@charset "utf-8"; /* -------------------------------------------------------------------------------- PAGE : 공통 : 상품이미지설정 -----------------------------------------------------------------------------------*/ [data-cate^="CMP01"]:before {background-image:url(../../com/img/CMP01.png);} [data-cate^="CMP01_0101"]:before {background-image:url(../../com/img/CMP01_0101.png);} [data-cate^="CMP01_0102"]:before {background-image:url(../../com/img/CMP01_0102.png);} [data-cate^="CMP01_0103"]:before {background-image:url(../../com/img/CMP01_0103.png);} [data-cate^="CMP01_0104"]:before {background-image:url(../../com/img/CMP01_0104.png);} [data-cate^="CMP01_0105"]:before {background-image:url(../../com/img/CMP01_0105.png);} [data-cate^="CMP01_0106"]:before {background-image:url(../../com/img/CMP01_0106.png);} [data-cate^="CMP01_0107"]:before {background-image:url(../../com/img/CMP01_0107.png);} [data-cate^="CMP01_0201"]:before {background-image:url(../../com/img/CMP01_0201.png);} [data-cate^="CMP01_0202"]:before {background-image:url(../../com/img/CMP01_0202.png);} [data-cate^="CMP01_0203"]:before {background-image:url(../../com/img/CMP01_0203.png);} [data-cate^="CMP01_0204"]:before {background-image:url(../../com/img/CMP01_0204.png);} [data-cate^="CMP01_0205"]:before {background-image:url(../../com/img/CMP01_0205.png);} [data-cate^="CMP01_0301"]:before {background-image:url(../../com/img/CMP01_0301.png);} [data-cate^="CMP01_0302"]:before {background-image:url(../../com/img/CMP01_0302.png);} [data-cate^="CMP01_0303"]:before {background-image:url(../../com/img/CMP01_0303.png);} [data-cate^="CMP02"]:before {background-image:url(../../com/img/CMP02.png);} [data-cate^="CMP02_0101"]:before {background-image:url(../../com/img/CMP02_0101.png);} [data-cate^="CMP02_0102"]:before {background-image:url(../../com/img/CMP02_0102.png);} [data-cate^="CMP02_0103"]:before {background-image:url(../../com/img/CMP02_0103.png);} [data-cate^="CMP02_0104"]:before {background-image:url(../../com/img/CMP02_0104.png);} [data-cate^="CMP02_0105"]:before {background-image:url(../../com/img/CMP02_0105.png);} [data-cate^="CMP02_0106"]:before {background-image:url(../../com/img/CMP02_0106.png);} [data-cate^="CMP02_0107"]:before {background-image:url(../../com/img/CMP02_0107.png);} [data-cate^="CMP02_0108"]:before {background-image:url(../../com/img/CMP02_0108.png);} [data-cate^="CMP02_0201"]:before {background-image:url(../../com/img/CMP02_0201.png);} [data-cate^="CMP02_0202"]:before {background-image:url(../../com/img/CMP02_0202.png);} [data-cate^="CMP02_0203"]:before {background-image:url(../../com/img/CMP02_0203.png);} [data-cate^="CMP02_0204"]:before {background-image:url(../../com/img/CMP02_0204.png);} [data-cate^="CMP02_0301"]:before {background-image:url(../../com/img/CMP02_0301.png);} [data-cate^="CMP02_0302"]:before {background-image:url(../../com/img/CMP02_0302.png);} [data-cate^="CMP03"]:before {background-image:url(../../com/img/CMP03.png);} [data-cate^="CMP03_01"]:before {background-image:url(../../com/img/CMP03_01.png);} [data-cate^="CMP03_02"]:before {background-image:url(../../com/img/CMP03_02.png);} [data-cate^="CMP03_03"]:before {background-image:url(../../com/img/CMP03_03.png);} [data-cate^="CMP04"]:before {background-image:url(../../com/img/CMP04.png);} [data-cate^="CMP04_01"]:before {background-image:url(../../com/img/CMP04_01.png);} [data-cate^="CMP04_02"]:before {background-image:url(../../com/img/CMP04_02.png);} [data-cate^="CMP04_03"]:before {background-image:url(../../com/img/CMP04_03.png);} [data-cate^="CMP05"]:before {background-image:url(../../com/img/CMP05.png);} [data-cate^="CMP05_01"]:before {background-image:url(../../com/img/CMP05_01.png);} [data-cate^="CMP05_02"]:before {background-image:url(../../com/img/CMP05_02.png);} [data-cate^="CMP05_03"]:before {background-image:url(../../com/img/CMP05_03.png);} [data-cate^="CMP05_04"]:before {background-image:url(../../com/img/CMP05_04.png);} [data-cate^="CMP05_05"]:before {background-image:url(../../com/img/CMP05_05.png);} [data-cate^="CMP05_06"]:before {background-image:url(../../com/img/CMP05_06.png);} [data-cate^="CMP06"]:before {background-image:url(../../com/img/CMP06.png);} [data-cate^="CMP06_01"]:before {background-image:url(../../com/img/CMP06_01.png);} [data-cate^="CMP06_02"]:before {background-image:url(../../com/img/CMP06_02.png);} [data-cate^="CMP06_03"]:before {background-image:url(../../com/img/CMP06_03.png);} [data-cate^="CMP06_04"]:before {background-image:url(../../com/img/CMP06_04.png);} [data-cate^="CMP06_05"]:before {background-image:url(../../com/img/CMP06_05.png);} [data-cate^="CMP06_06"]:before {background-image:url(../../com/img/CMP06_06.png);} [data-cate^="CMP07"]:before {background-image:url(../../com/img/CMP07.png);} [data-cate^="CMP07_01"]:before {background-image:url(../../com/img/CMP07_01.png);} [data-cate^="CMP07_02"]:before {background-image:url(../../com/img/CMP07_02.png);} /* -------------------------------------------------------------------------------- PAGE : MAIN -----------------------------------------------------------------------------------*/ #container[data-page="main"] {position:relative;max-width:1680px;margin:0 auto;padding-top:81px;font-size:0;} [data-page="main"]:before {display: none; content:'';position:absolute;right:383px;top:0;bottom:0;width:1px;background:#e4e4e7;} [data-page="main"] .section-basic, [data-page="main"] .section-aside {display:inline-block;vertical-align:top;} [data-page="main"] .section-basic {position: sticky;top:0;width:calc(100% - 405px);} [data-page="main"] .section-aside {position:sticky;top:144px;width:280px;transition:all 0.3s ease-in-out;margin:0 0 0 125px;} .scroll [data-page="main"] .section-aside {top:unset;} @media only screen and (max-width:1440px){ #container[data-page="main"] {padding-top:112px;} [data-page="main"] .section-aside {top:96px;} } @media only screen and (max-width:1459px){ #container[data-page="main"] {padding-top: 49px;} } [data-page="main"] .section-basic .headline span {display:block;} [data-page="main"] .section-basic .headline h1 {font-family:'YouandiNewKrTitleB';font-size:48px;line-height:58px;color:#1f1f3c;} [data-page="main"] .section-basic .headline h1 span + span {margin:8px 0 0;} [data-page="main"] .section-basic .headline p {margin:30px 0 0;font-size:20px;line-height:25px;} [data-page="main"] .section-basic .headline p span + span {margin:4px 0 0;} [data-page="main"] .section-basic[data-motion="scroll"] .headline span {opacity:0;} [data-page="main"] .section-basic[data-motion="scroll"] .headline h1 span {overflow:hidden;height:58px;padding:58px 0 0;transition:all 1.2s cubic-bezier(0.895,0,0.18,1);} [data-page="main"] .section-basic[data-motion="scroll"] .headline p span {transform:translateY(20px);transition:all 1.0s cubic-bezier(0.215,0.61,0.355,1);} [data-page="main"] .section-basic[data-motion="scroll"].load .headline span {opacity:1;} [data-page="main"] .section-basic[data-motion="scroll"].load .headline h1 span {padding:0;} [data-page="main"] .section-basic[data-motion="scroll"].load .headline p span {transform:translateY(0);} [data-page="main"] .section-basic[data-motion="scroll"].load .headline p span:nth-child(1) {transition-delay:1.0s;} [data-page="main"] .section-basic[data-motion="scroll"].load .headline p span:nth-child(2) {transition-delay:1.2s;} [data-page="main"] .section-basic .section {position:relative;min-height:128px;margin:0;padding: 100px 0 20px 25%;} [data-page="main"] .section-basic .section .heading {position:absolute;left:0;top:100px;width:25%;font-family:'YouandiNewKrTitleB';font-size:34px;line-height:44px;color:#1f1f3c;} [data-page="main"] .section-basic .section.section1 .heading {top:80px;} [data-page="main"] .section-basic .section .list-con1{border-top:1px solid #1F1F3C} [data-page="main"] .section-basic .section .list-con1 > ul > li {width:calc(33.3% - 16px);} [data-page="main"] .section-basic .section .list-con1 > ul > li:nth-child(3n-1) {margin:0 24px;} [data-page="main"] .section-basic .section1 .con {margin:-20px 0 0;} [data-page="main"] .section-basic .section1 .con > ul {font-size:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 24px;} [data-page="main"] .section-basic .section1 .con > ul > li {position:relative;display:inline-block;width: calc(33.3% - 18px);padding:20px 0 100px;border-top: 2px solid var(--point1);vertical-align:top;} [data-page="main"] .section-basic .section1 .con > ul > li:before {content:'';position:absolute;right:0;bottom:32px;width:132px;height:132px;background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;} [data-page="main"] .section-basic .section1 .con > ul > li:nth-child(2) ~ li {border-top: 2px solid var(--point1);} [data-page="main"] .section-basic .section1 .con > ul > li:nth-child(1) {padding-bottom:160px;} [data-page="main"] .section-basic .section1 .con .tit {display:block;font-size:28px;line-height:36px;color:#1f1f3c;} [data-page="main"] .section-basic .section1 .con .btn {margin:40px 0 0;display:inline-flex;flex-direction:column;align-items:flex-start;} [data-page="main"] .section-basic .section1 .con .link-t1 {font-size:20px;line-height:1.3;color:#1f1f3c;font-weight:normal;} [data-page="main"] .section-basic .section1 .con .link-t1 + .link-t1 {margin:12px 0 0;} [data-page="main"] .section-basic .section1 .con .link-t1:after {position:relative;display:inline-block;top:unset;left: 5px;bottom:4px;width:6px;height:6px;border-color:#1f1f3c;transform:rotate(-45deg);} [data-page="main"] .section-basic .section1 .con .link-t1:before {background:#1f1f3c;} [data-page="main"] .section-basic .list-con1 li[class*="ic"]:before {margin: 24px 0 12px -10px;} [data-page="main"] .section-basic .list-con1 .link-t2 + .link-t2 {margin:0 0 0 17px;} [data-page="main"] .section-basic .list-con1 .link-t2, [data-page="main"] .section-basic .list-con1 .link-t2:visited {color:#707082;font-size:16px;} [data-page="main"] .section-basic .list-con1 .link-t2:after {background:#707082;} [data-page="main"] .section-basic .list-con1 .data-word1 > a:before {left:-8px;} [data-page="main"] .section-aside {position: relative;top:0;width:340px;margin: -190px 0 0 64px;padding:60px 0 570px 62px;background:#FFF;border-radius: 8px 0 0 0;border-left:1px solid #E4E4E8;z-index: 3;transition: all 0.3s ease-in-out;} [data-page="main"] .section-aside::after {content:'';display:block;position:absolute;top:0;left:100%;width:41px;height:800px;background:var(--point6);} [data-page="main"] .section-aside::before {content:'';display:block;position:absolute;bottom:-160px;left:-1px;width:1px;height:160px;border-left:1px solid #E4E4E8;} .bg-video{position:relative;min-height:630px;z-index:1;} .bg-video > div {height:630px;width:100vw; overflow:hidden; position:absolute;top:0; left:50%; transform: translateX(-50%);} .bg-video > div:before {content:'';display:block;position:absolute;bottom:0;left:50%;width:100%;height:3px;background:#FFF; transform: translateX(-50%);z-index:3;} .bg-video > div > video, .bg-video > div > iframe, .bg-video > div > div{width:1680px;max-width:unset;position: relative; top:0; left:50%;transform: translateX(-50%);} @media only screen and (max-width: 1298px){ .bg-video > div {width: 1280px;} } @media only screen and (min-width:1680px){ :root{ --side-margin:calc((100vw - 1680px) / 2); } .nav-gnb.open > span:before {width:calc(1300px + var(--side-margin));} [data-page="main"] .section-aside::after {width:calc(var(--side-margin) + 49px);} .bg-video > div{width:100vw;height:unset;} .bg-video > div video, .bg-video > div iframe, .bg-video > div > div{width:100%;} [data-page="main"] .section-basic .section.section1 .heading {top: 80px;} [data-page="main"] .section-basic .section .heading {top: 100px;} .bg-video{height:calc(100dvw * 9 / 24);} } @media only screen and (max-width:1599px){ [data-page="main"] .section-basic .headline h1 {font-size:40px;line-height:48px;} [data-page="main"] .section-basic .headline p {font-size:18px;} [data-page="main"] .section-basic[data-motion="scroll"] .headline h1 span {height:48px;padding:48px 0 0;} [data-page="main"] .section-basic .section {margin:80px 0 0;padding:20px 0 20px 27%;} [data-page="main"] .section-basic .section.section1 {padding: 100px 0 0 25%;} [data-page="main"] .section-basic .section {margin:0;padding: 100px 0 20px 25%;border-top:unset;} [data-page="main"] .section-basic .section .heading {top:100px;width:27%;font-size:28px;line-height:32px;} [data-page="main"] .section-basic .section.section1 .heading {top:80px;} [data-page="main"] .section-basic .section1 .con > ul > li:before {width:100px;height:100px;} [data-page="main"] .section-basic .section1 .con .tit {font-size:24px;line-height:32px;} [data-page="main"] .section-basic .section1 .con .link-t1 {color:#1f1f3c;font-size:16px;font-weight:700;line-height:22px;} [data-page="main"] .section-basic .list-con1 > ul > li .tit > span:not(:only-of-type):nth-child(1) {font-size:16px;line-height:22px;} [data-page="main"] .section-basic .list-con1 > ul > li .tit > span:not(:only-of-type):nth-child(2) {font-size:24px;line-height:32px;} [data-page="main"] .section-basic .list-con1 .data-word1 > span {font-size:14px;font-weight:600;} [data-page="main"] .section-basic .list-con1 > ul > li[class*="ic"]:before {width:64px;height:64px;margin-bottom:5px;background-size:640px 640px;} [data-page="main"] .section-basic .list-con1.icon3 > ul > li.ic1:before {background-position:-256px -64px;} [data-page="main"] .section-basic .list-con1.icon3 > ul > li.ic2:before {background-position:-128px -384px;} [data-page="main"] .section-basic .list-con1.icon3 > ul > li.ic3:before {background-position:-192px -384px;} } [data-page="main"] .section-aside .section .tit-sub2 {margin:0 0 20px;} [data-page="main"] .section-aside .section .tit-sub3 {margin: 0 0 8px;} [data-page="main"] .section-aside .section .tit-sub3 + .list-con3 {margin-top:-4px;} [data-page="main"] .section-aside .section + .section {margin:65px 0 0;} [data-page="main"] .section-aside .section + .section + .section{margin:60px 0 0;} [data-page="main"] .section-aside .section + .section + .section .tit-sub2 a.link:after{top:2px;} [data-page="main"] .section-aside .section + .section + .section .tit-sub2 a.link:after{content: '';display: block;position: absolute;right: 16px;top: 9px;width: 6px;height: 6px;border-right: 2px solid #1f1f3c;border-bottom: 2px solid #1f1f3c;transform: rotate(-45deg);background:none; background-size: auto;} [data-page="main"] .section-aside .section .notice li{margin-bottom:10px;} [data-page="main"] .section-aside .section .notice li a{position:relative;display:inline-block; max-width:100%;color:#1f1f3c;font-size:16px;font-weight: 500;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;} [data-page="main"] .section-aside .section .notice li a:hover:before, [data-page="main"] .section-aside .section .notice li a:focus:before {content:'';display:block;position:absolute;left:0;right:0;bottom:2px;height:1px;background:#1f1f3c;} [data-page="main"] .section-aside .session1 h2 {font-size:28px;line-height:36px;font-weight:700;color:#1f1f3c;} [data-page="main"] .section-aside .session1 .area-btn1 {margin:26px 0 0;} [data-page="main"] .section-aside .session1 .area-btn2 {margin:12px 0 0;} [data-page="main"] .section-aside .session2 h2 {max-width:calc(100% - 100px);word-break:break-all;} [data-page="main"] .section-aside .session2 .btn-com1 {line-height:52px;} [data-page="main"] .section-aside .session2 .area-btn3 {margin:20px 0 0;} [data-page="main"] .section-aside .session2 .area-btn3 {margin:20px 0 0;} [data-page="main"] .list-con3 li[class*="ic"] {padding: 16px 0 16px 76px;} [data-page="main"] .list-con3 li[class*="ic"] > a {color: #1f1f3c;} [data-page="main"] .list-con3 li[class*="ic"] > a:focus {outline: 2px dotted #a5a5b1;} [data-page="main"] .list-con3 > ul > li > a:after {top:36px;} /* -------------------------------------------------------------------------------- PAGE : 로그인 --------------------------------------------------------------------------------- */ #container[data-page="login"] {min-height:100vh;padding:160px 0 180px;} #container[data-page="login"] .content {max-width:412px;} #container[data-page="login"] .content ~ .bottom {position:absolute;left:50%;bottom:56px;width:1200px;margin:0 0 0 -600px;} [data-page="login"] .label-btn1[data-autoset] ~ .ui-tabcon {margin:24px 0 0;} [data-page="login"] .label-btn1[data-autoset] ~ .ui-tabcon .label-btn2 {margin-top:4px;margin-bottom:32px;} .area-btn1.data-t1 {margin:50px 0 0;} .area-btn1.data-t1 ~ .area-btn1 {margin:28px 0 0;} /* -------------------------------------------------------------------------------- PAGE : 사이트맵 -----------------------------------------------------------------------------------*/ .nav-sitemap {line-height:26px;padding:0 0 56px} .nav-sitemap strong {display:block;color:#1f1f3c;font-weight:700;} .nav-sitemap a {position:relative;display:inline-block;vertical-align:top;outline:none;} .nav-sitemap a:before {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent;} .nav-sitemap a:hover:before, .nav-sitemap a:focus:before {background:#707082;} .nav-sitemap > ul > li > strong {font-size:20px;margin:0 0 21px;padding:16px 0 14px;;border-bottom:2px solid #1f1f3c;} .nav-sitemap > ul > li + li {margin:64px 0 0;} .nav-sitemap > ul > li > ul {display:flex;flex-wrap:wrap;} .nav-sitemap > ul > li > ul > li strong {margin:0 0 8px;} .nav-sitemap > ul > li > ul > li ul li + li {margin:8px 0 0;} .nav-sitemap > ul > li:not(.m9) > ul > li {width:35%;} .nav-sitemap > ul > li:not(.m9) > ul > li:nth-child(3n) {width:30%;} .nav-sitemap > ul > li:not(.m9) > ul > li:nth-child(3) ~ li {margin:8px 0 0;} .nav-sitemap > ul > li:not(.m9) > ul > li:nth-child(3) ~ li > strong {margin-top:56px;} .nav-sitemap > ul > li.m9 > ul > li {width:25%;} .nav-sitemap > ul > li.m9 > ul > li:nth-child(4) ~ li > strong {margin-top:56px;} .nav-sitemap > ul > li.m9 > ul > li:nth-child(4) ~ li > div:first-child {margin-top:56px;} .nav-sitemap > ul > li.m9 > ul > li:nth-child(4) ~ li > div + div {margin:8px 0 0;} .nav-sitemap > ul > li.m12 > ul {display:block;} .nav-sitemap > ul > li.m12 > ul > li:nth-child(1) {float:left;} .nav-sitemap > ul > li.m12 > ul > li:nth-child(1) ~ li {margin-left:35%;} .nav-sitemap > ul > li.m12 > ul > li:nth-child(1) ~ li + li {margin-top:8px;} [lang="en"] .nav-sitemap > ul > li.m3 > ul > li:nth-child(2) {width:65%;} [lang="en"] .nav-sitemap > ul > li.m3 > ul > li:nth-child(3) {width:35%;margin-top:8px;} /* -------------------------------------------------------------------------------- PAGE : 주소찾기 -----------------------------------------------------------------------------------*/ #uiFindAddr1 .content {height:calc(100vh - 490px);} #uiFindAddr1 [data-fixed="modal"] + .content:last-child {height:calc(100vh - 466px);} #uiFindAddr1 [data-content] {outline:none;} .pop-modal1 .content.mCustomScrollbar > .mCustomScrollBox > .mCSB_container > .tit-sub2.info1:first-child {margin-top:54px !important;} .tit-sub2.info1 > dt {margin-bottom:14px;} .tit-sub2.info1 > dd {font-size:16px;line-height:22px;color:#91919f;} .tit-sub2.info1 > dd:not(:first-of-type) {margin-top:4px;} .info-data1.data-t1 > dl > dt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .info-data1.data-t1 > dl > dd {padding:5px 0;} .info-data1.data-t1 > dl:nth-of-type(3) > dd {font-size:16px;color:#91919f;font-weight:normal;} .info-data1.data-t1 .nodata {line-height:130px;color:#1f1f3c;} /* -------------------------------------------------------------------------------- PAGE : 공통오류 : PC/Mobile 통합페이지 --------------------------------------------------------------------------------- */ #container[data-page="all"] {min-height:100vh;height:100vh;padding:24px;display:flex;flex-direction:column;justify-content:center;} #container[data-page="all"] .mes-headline1 {padding:0;} .mb #container[data-page="all"] .area-btn1 {position:fixed;left:0;right:0;bottom:0;padding:16px;background-image:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8) 20px, rgba(255,255,255,1));z-index:100;} .mb #container[data-page="all"] .area-btn1 .btn-action1 {display:block;font-size:16px;line-height:56px;} .mb .mes-headline1 > :first-child ~ p br {display:none;} /* -------------------------------------------------------------------------------- PAGE : 상품 : 공통 -----------------------------------------------------------------------------------*/ [data-page="product"] .section-basic, [data-page="product"] .section-info {max-width:996px;margin:0 auto;} /*[data-page="product"] .section-info {margin-top:80px;}*/ [data-page="product"] .section-info {margin-top:80px;} [data-page="product"] .section-info[data-cate] {margin:0 auto 0;padding-bottom:0;} [data-page="product"] .section-info.height-spaced[data-cate] {min-height:240px;} [data-page="product"] .section-info[data-cate]:before {content:'';display:block;position:absolute;right:0;top:0;width:240px;height:240px;background-size:100% 100%;} [data-page="product"] .section-info.tab-section1 .section-info[data-autoset="toggle"] {margin-top:80px} [data-page="product"] .section-info.tab-section1 ~ .section-info {margin-top:100px;} [data-page="product"] .section-info.txt-bul1 {margin-top:100px;} [data-page="product"] .section-info.txt-bul1 + .section-info.area-info2 {margin-top:10px;} [data-page="product"] .section-header + .section-info:not(.tab-section1), [data-page="product"] .section-basic + .section-info:not(.tab-section1) {border-top:unset;padding-top:unset;} [data-page="product"] div.line + .section-info {margin-top:0;} [data-page="product"] .section-basic {margin:0 auto 100px;} [data-page="product"] .section-info .area .tit-sub2 + p, [data-page="product"] .section-info .area .tit-sub2 + p + p.txt-mark1, [data-page="product"] .section-info .area .tit-sub2 + ul li{line-height: 26px;} [data-page="product"] .section-info .area .tit-sub2 + p + p, [data-page="product"] .section-info .area .tit-sub2 + p + ul.txt-mark1, [data-page="product"] .section-info .area .tit-sub2 + p + p.txt-mark1{margin-top:8px;} [data-page="product"] .section-info .area .tit-sub2 + p + ul.txt-mark1 li{line-height: 26px;} [data-page="product"] .section-info .area .tit-sub2 + dl.tit-sub3{margin-top:24px !important;} /* 기본정보 */ [data-page="product"] .section-header {padding:60px 0 0;margin:0 0 60px;} [data-page="product"] .section-header:has(.btn) + .section-basic {margin-top:143px;} [data-page="product"] .section-header .btn-action1.c1{background:var(--opacity08)} [data-page="product"] .section-header + .section-info {margin-top:100px;} [data-page="product"] .tit-page {position:relative;min-height:160px;padding:64px 0 52px;margin:0;text-align:center;} [data-page="product"] .tit-page h1, [data-page="product"] .tit-page h1 + p {margin:0;} [data-page="product"] .tit-page h1 {font-family:'YouandiNewKrTitleB';color:#1f1f3c;font-size:34px;line-height:40px;font-weight:700;} [data-page="product"] .tit-page h1 + p {margin:16px 0 0;font-family:'YouandiNewKrTitleB';color:#1f1f3c;font-size:55px;line-height:68px;color:#1f1f3c;} [data-page="product"] .tit-page h1:only-child {margin:0;} [data-page="product"] .tit-page[data-img] {height:278px;padding-top:54px;} [data-page="product"] .tit-page[data-img] h1{font-size:20px;line-height:26px;font-weight:700; color:var(--point6);} [data-page="product"] .tit-page[data-img] h1+p{margin:8px 0 0; font-family:'YouandiNewKrTitleB';font-size:48px;line-height:64px; color:var(--point6);} [data-page="product"] .tit-page p span {display:block;} [data-page="product"] .tit-page .btn {margin:102px 0 0;} [data-page="product"] .tit-page .btn .btn-action1 {overflow:visible;} [data-page="product"] .tit-page [data-scroll-tab="true"] {display:none;} #wrapper:not(.scrolling) [data-page="product"] .tit-page h1:only-child {padding-top:49px;font-family:'YouandiNewKrTitleB';font-size:56px;line-height:68px;color:var(--point6);} .scrolling [data-page="product"] .tit-page[data-img] {background:#fff;} .scrolling [data-page="product"] .tit-page[data-img] {min-height:unset;height:unset;padding-top:unset;padding-bottom:unset;color:var(--color1);} .scrolling [data-page="product"] .tit-page[data-img] h1 {color:var(--color1);} .scrolling [data-page="product"] .tit-page {position:fixed;left:0;right:0;top:0;z-index:100;background:#fff;border-bottom:1px solid #ebebeb;transform:translateY(48px);transition:transform 0.3s ease-in-out;} .scrolling [data-page="product"] .tit-page > div {position:relative;max-width:1920px;min-width:1280px;height:80px;margin:0 auto;padding:18px 40px;background:#fff;text-align:right;} .scrolling [data-page="product"] .tit-page h1 {float:left;line-height:48px;} .scrolling [data-page="product"] .tit-page p {visibility:hidden;overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .scrolling [data-page="product"] .tit-page [data-scroll-tab="true"], .scrolling [data-page="product"] .tit-page .btn {display:inline-block;vertical-align:top;} .scrolling [data-page="product"] .tit-page .btn {margin:0 0 0 36px;} .scrolling [data-page="product"] .tit-page .btn .btn-action1 {min-width:0;padding:0 14px;font-size:16px;line-height:48px;} .scrolling [data-page="product"] .tit-page .btn .btn-action1 .icon-txt1 {display:none;} [data-page="product"] .tit-page[data-img="cmp01"] {background:url(/resources/pc/img/content/bg_cmp01.png) no-repeat 50%;} [data-page="product"] .tit-page[data-img="cmp02"] {background:url(/resources/pc/img/content/bg_cmp02.png) no-repeat 50%;} [data-page="product"] .tit-page[data-img="cmp03"] {background:url(/resources/pc/img/content/bg_cmp03.png) no-repeat 50%;} [data-page="product"] .tit-page[data-img="cmp04"] {background:url(/resources/pc/img/content/bg_cmp04.png) no-repeat 50%;} [data-page="product"] .tit-page[data-img="cmp05"] {background:url(/resources/pc/img/content/bg_cmp05.png) no-repeat 50%;} /* 상품이미지설정 */ [data-page="product"] [data-cate] {position:relative;padding-right:272px;} [data-page="product"] [data-cate]:before {content:'';display:block;position:absolute;right:-104px;top:70px;width:420px;height:420px;background-size:100% 100%;} [data-page="product"] [data-cate].tab-section1 {padding-right:0;padding-bottom:0;margin:0 auto;} [data-page="product"] [data-cate].tab-section1:before {top:140px;right:60px;} /*[data-page="product"] [data-cate].section-info.tab-section1 .ui-tabcon {padding-right:440px;min-height:560px;}*/ [data-page="product"] [data-cate].section-info.tab-section1 .ui-tabcon {padding-bottom:60px;} /*[data-page="product"] [data-cate][data-motion="scroll"]:before {opacity:0;transform:translateX(60px);transition:all 1.0s cubic-bezier(0.215,0.61,0.355,1);}*/ /*[data-page="product"] [data-cate][data-motion="scroll"].load:before {opacity:1;transform:translateX(0);transition-delay:0.3s;}*/ /* 상세정보 : 공통 */ .area-con2 {position:relative;padding:0 0 0 112px;} .area-con2 > [class*="tit-sub"] {position:absolute;left:0;top:24px;color:#4c4c63;} .area-con2 > .area.info-con1 > ul > li {padding-top:23px;padding-bottom:24px;} .area-con2 > .area.info-con1 > ul > li + li {margin:0;border-top:1px solid #e4e4e7;} .area-con2 > .area.info-con1[class*=" icon"] > ul > li:before {top:23px;} .area-con2 + .area-con2 {border-top:1px solid #e4e4e7;} .tit-sub1 + .area-con2 {margin-top:-20px;} [data-page="product"] .section-info .area-col2 .area {width:calc(50% - 24px);} [data-page="product"] .section-info .area-col2 .area:nth-of-type(2n-1) {width:calc(100% - 460px);} [data-page="product"] .section-info .area-col2 .area:nth-of-type(2n) {width:404px;margin-left: 20px} [data-page="product"] .section-info .mes-headline2 {margin:0 0 80px;margin-bottom:0;} [data-page="product"] .section-info .mes-headline2 > dt{font-size:28px;line-height:36px;} [data-page="product"] .section-info .mes-headline2 > dt ~ dt{margin-top:48px;} [data-page="product"] .section-info .mes-headline2 > dd{margin-top:24px;font-weight:500; line-height:32px;} [data-page="product"] .section-info .tit-sub1.tit-line1 {border-bottom-width:1px;} [data-page="product"] .section-info .tit-sub1 ~ .tit-sub1 {margin-top:100px;} [data-page="product"] .section-info .tit-sub2 ~ .tit-sub2 {margin-top:32px;} [data-page="product"] .section-info .tit-sub2.txt-c1 {margin:0 0 24px;} [data-page="product"] .section-info .tit-sub2.txt-c1:not(:first-child) {margin-top:48px;} [data-page="product"] .section-info h2.hide +.tit-sub2.txt-c1 {margin-top:0;} [data-page="product"] .section-info .info-con1 .tit {font-size:18px;} [data-page="product"] .section-info .info-con1 .tit:not(:last-child) {margin:0 0 4px;} [data-page="product"] .section-info.txt-bul1 > li + li {margin:10px 0 0;} [data-page="product"] .section-info.txt-bul1 strong:not([class]) {color:#4c4c63;} [data-page="product"] .section-info.txt-bul1 strong:not([class]):only-child {font-size:18px;} [data-page="product"] .section-info .area-col2 + .area-col2 {margin-top: 48px;} [data-page="product"] .section-info [class*="sub-con"].txt-bul1 {/*font-size:14px;*/color:#91919f;} [data-page="product"] .section-info .info-data1{border-top:unset;} [data-page="product"] .section-info .info-data1 > ul > li {border-bottom:unset;} [data-page="product"] .section-info .info-data1 > ul > li +li{border-top:1px solid #ededf0;} [data-page="product"] .section-info .info-data1 > ul > li div{font-weight:700;} [data-page="product"] .section-info .info-data1 > ul > li div + div{font-weight:500;} [data-page="product"] .mes-headline2 > :first-child{font-size:28px;line-height:36px;} [data-page="product"] [class*="area-col"]:has(.con-graph-img){justify-content: space-between;} [data-page="product"] .con-graph-img {width:404px;margin: 0;} [data-page="product"] .con-graph-img + .txt-mark{margin-top:8px; font-size:14px; font-weight:500; line-height:22px;} [data-page="product"] .tit-sub2 > dt {margin: 0 0 12px;} [data-page="product"] .tit-sub2 > dt ~ dt {margin-top:32px;} [data-page="product"] [class*="txt-bul"] > li + li{margin:8px 0 0;} [data-page="product"] .area:has(.info-con1.icon1) .area-con2:last-child .info-con1.icon1 li:last-child {padding-bottom:0;} /* 상세정보 : 탭형 */ .tab-section1 {position:relative;} .tab-section1 > ul {position:relative;width:100%;display:flex;border:1px solid #dbdbe0;border-bottom:none;background:#fff;border-radius:16px 16px 0 0;overflow:hidden;z-index:1;} .tab-section1 > ul li {display:inline-block;width:50%;text-align:center;font-weight:500;font-size:18px;line-height:22px;border-bottom:1px solid #e4e4e7;} .tab-section1 > ul li + li {border-left:1px solid #e4e4e7;} .tab-section1 > ul li a {position:relative;display:block;width:100%;padding:25px 0;color:#818192;background:#f6f6f7;} .tab-section1 > ul li.active {border-bottom:none;} .tab-section1 > ul li.active a {color:#1f1f3c;background:#fff;font-weight:700;} [data-page="product"] .tab-section1 .ui-tabcon {margin:-1px 0 0;padding:60px 60px 60px;border:1px solid #dbdbe0;border-radius:0 0 16px 16px;overflow:hidden;} [data-page="product"] .tab-section1 .ui-tabcon .bottom {position:absolute;left:0;right:0;bottom:0;border-top:1px solid #dbdbe0;text-align:center;padding:24px 0;} [data-page="product"] .tab-section1 .ui-tabcon .bottom .btn-txt1:only-child {display:block;margin:-24px 0;padding:24px 0;text-align:center;} [data-page="product"] .tab-section1 .ui-tabcon .bottom .btn-txt1:focus {text-decoration:underline;} [data-page="product"] .ui-tabcon .section-info {margin-top: 80px;} [data-page="product"] .ui-tabcon .section-info.area-toggle1 + .section-info.area-toggle1 {margin-top: 80px;} [data-page="product"] .tab-section1 ~ .section-info{margin-top:100px;} [data-page="product"] .section-info.area-toggle1 + .section-info, [data-page="product"] .section-info.area-toggle1 + .section-info ~ .section-info, [data-page="product"] .section-info:has(.list-con2.icon2), [data-page="product"] .section-info:has(.list-con2.icon2) ~ .section-info, [data-page="product"] .section-info.area-info2, [data-page="product"] .section-info.area-info2 ~ .section-info {margin-top:100px;} [data-page="product"] .section-info.txt-bul1 + .section-info.area-info2 {margin-top:10px;} [data-page="product"] .section-info.area-toggle1[data-autoset="toggle"] {margin-top:80px} [data-page="product"] .section-info[data-austoset="tab"] + .section-info.area-toggle1[data-autoset="toggle"] {margin-top:100px} /* 상세정보 : 토글형 */ [data-page="product"] .section-info.area-toggle1 {border-top:1px solid #1f1f3c;border-bottom:0;} [data-page="product"] .section-info.area-toggle1.active > .area:nth-child(2) {padding:32px 0 0;} [data-page="product"] .section-info.area-toggle1 .tbl-data1.info1 {border-top:1px solid #e4e4e7;} [data-page="product"] .section-info.area-toggle1 .txt-bul1:not(:first-child) {margin-top:10px;} /* 상세정보 : 자주하는 질문 */ [data-page="product"] .section-info .list-board1 {border-top:1px solid #e4e4e7;} [data-page="product"] .section-info .list-board1 {border-top:0;} [data-page="product"] .section-info .list-board1 > dl:last-of-type {border-bottom:0;} [data-page="product"] .list-board1[data-autoset="toggle"] > dl > dt[data-toggle="btn"] {padding: 20px 0 20px;} [data-page="product"] .list-board1[data-autoset="toggle"] > dl.active [data-toggle="content"] {padding: 20px 0 30px;} [data-page="product"] .list-board1[data-autoset="toggle"] > dl > dt[data-toggle="btn"]:after {right:0;} [data-page="product"] .area-btn3 {overflow: unset;} /* -------------------------------------------------------------------------------- PAGE : 상품 : 상세팝업 -----------------------------------------------------------------------------------*/ .tbl-data1.info1 {border-top-width:1px;} .tbl-data1.info1 > table th, .tbl-data1.info1 > table td {height:56px;padding:16px 24px;} .tbl-data1.info1 > table th {font-weight:700;} .tbl-data1.info1 > table td {text-align:left;vertical-align:top;} .tbl-data1.info1 > table td [class*="area-btn"]:first-child {margin-top:0;} .tbl-data1.info1 > table td div + ul, .tbl-data1.info1 > table td div + [class*="area-btn"] {margin-top:4px !important;} .tbl-data1.info1 > table td [class*="area-btn"] [class*="link-t"] {font-size:14px;} .tbl-data1.info1 > table thead + tbody td:last-of-type:not(.align2) {padding-right:0;} .tbl-data1.info1 > table thead tr:nth-of-type(1) > th:first-of-type:not([colspan]) {text-align:left;} .tbl-data1.info1 > table td ul.list > li + li {margin-top:16px;} .tbl-data1.info1 > dl > dt {width:120px;} .tbl-data1.info1 > dl > dt + dd {width:calc(100% - 120px);} .tbl-data1.info1.data-t2 > table thead th {text-align:center !important;} [class*="tit-sub"] + .tbl-data1.info1 {margin:0;} /* 상품상세 : 도표형컨텐츠1 : 리스장점 */ .con-pro1 {position:relative;margin:40px 0 0;} .con-pro1 > dl {position:relative;} .con-pro1 > dl:before {content:'';display:block;position:absolute;bottom:21px;width:1px;background:#e4e4e7;} .con-pro1 > dl:nth-of-type(2):after {content:'';display:block;position:absolute;left:calc(67% + 30px);top:calc(100% - 130px);width:26px;height:86px;border-right:1px solid #e4e4e7;border-bottom:1px solid #e4e4e7;} .con-pro1 dt, .con-pro1 dd {position:relative;font-size:14px;color:#707082;text-align:center;} .con-pro1 dt {position:absolute;line-height:22px;min-width:64px;white-space:nowrap;} .con-pro1 dd {margin:0 auto;width:34%;padding:0 16px;line-height:38px;;border:1px solid #e4e4e7;background:#fff;white-space:nowrap;} .con-pro1 dd + dd {margin-top:2px;} .con-pro1 dt:before, .con-pro1 dt:after, .con-pro1 dd:before {content:'';display:block;} .con-pro1 dt:before {width:64px;height:64px;margin:0 auto;background:url(../../com/img/icon1.png) no-repeat 0 0;background-size:640px 640px;} .con-pro1 dt:after {position:absolute;top:40px;width:40px;height:1px;background:#e4e4e7;} .con-pro1 dl:nth-of-type(2) dt:after {width:24px;} .con-pro1 dd:before {position:absolute;left:-30px;right:0;top:50%;height:1px;background:#e4e4e7;z-index:-1;} .con-pro1 dd:nth-of-type(5):before , .con-pro1 dd:nth-of-type(5) ~ dd:before {right:-30px;} .con-pro1 > dl:nth-of-type(1):before {right:calc(67% + 30px);top:20px;} .con-pro1 > dl:nth-of-type(1) dt {right:calc(67% + 70px);top:calc(50% - 43px);} .con-pro1 > dl:nth-of-type(1) dt:after {right:-40px;} .con-pro1 > dl:nth-of-type(2):before {left:calc(67% + 29px);top:calc(100% - 64px);} .con-pro1 > dl:nth-of-type(2) dt {left:calc(67% + 80px);top:-168px;} .con-pro1 > dl:nth-of-type(2) dt:after {left:-24px;} .con-pro1 > dl:nth-of-type(2) > dd + dd {margin:-2px 0 0;} .con-pro1 .ic1 dt:before {background-position:-320px -64px;} .con-pro1 .ic2 dt:before {background-position:-192px -64px;} /* 2022-05-27 도형 변경(S) */ .con-pro1 dl.ic2:after{left:67%;top:calc(100% - 105px);width:44px;height:85px; } .con-pro1 dd:nth-of-type(5):before , .con-pro1.type2 dd:nth-of-type(5) ~ dd:before {right:0;} .con-pro1 .ic2:before{display: none} .con-pro1 > dl.ic2 dt {top:-144px;} .con-pro1 > dl:nth-of-type(2) dt:after {left:-36px; width:34px;} /* 2022-05-27 도형 변경(E) */ /* 상품상세 : 도표형컨텐츠2 : 금융구조도 */ .con-pro2 {font-family:'YouandiNewKrTitleM';border:1px solid #e4e4e7;border-radius:8px;} .con-pro2 > ul {position:relative;display:flex;flex-wrap:wrap;justify-content:space-around;width:100%;padding:84px 0 92px;text-align:center;} .con-pro2 > ul:before {content:'';position:absolute;top:64px;bottom:64px;left:50%;display:block;width:50%;border:1px solid #e4e4e7;border-radius:8px;transform:translateX(-50%);z-index:-1;} .con-pro2 > ul > li {position:relative;width:36%;min-width:108px;height:108px;padding:8px;border-radius:8px;} .con-pro2 > ul > li > strong {position:absolute;display:block;width:100%;padding:4px 0;color:#91919f;background:#fff;font-size:14px;line-height:20px;font-weight:500;} .con-pro2 > ul > li > div {position:relative;top:50%;transform:translateY(-50%);} .con-pro2 > ul > li:nth-child(1) {order:1;color:#fbfbfb;background:#707082;} .con-pro2 > ul > li:nth-child(1) > strong {left:0;bottom:-70px;} .con-pro2 > ul > li:nth-child(2) {order:3;margin-top:100px;color:#fbfbfb;background:#a5a5b1;} .con-pro2 > ul > li:nth-child(3) {order:2;color:#91919f;background:#f6f6f7;} .con-pro2 > ul > li:nth-child(4) {order:4;margin-top:100px;color:#fff;background:#d2d2d8;} .con-pro2 > ul > li:nth-child(3):before, .con-pro2 > ul > li:nth-child(4):before {content:'';position:absolute;left:calc(50% - 3px);width:4px;height:4px;transform:rotate(45deg);} .con-pro2 > ul > li:nth-child(3):before {top:-13px;border-right:2px solid #dbdbe0;border-bottom:2px solid #dbdbe0;} .con-pro2 > ul > li:nth-child(4):before {bottom:-16px;border-left:2px solid #dbdbe0;border-top:2px solid #dbdbe0;} .con-pro2 > ul > li:nth-child(2) > strong {left:100%;bottom:-62px;transform:translate(-31%);} .con-pro2 > ul > li:nth-child(3) > strong {right:100%;top:-55px;transform:translate(31%);} .con-pro2 > ul > li:nth-child(4) > strong {left:0;top:-60px;} .con-pro2 > ul > li:nth-child(1) > strong:before, .con-pro2 > ul > li:nth-child(1) > strong:after, .con-pro2 > ul > li:nth-child(4) > strong:before {content:'';position:absolute;left:calc(50% - 3px);width:4px;height:4px;transform:rotate(45deg);} .con-pro2 > ul > li:nth-child(1) > strong:before {top:-10px;border-left:2px solid #dbdbe0;border-top:2px solid #dbdbe0;} .con-pro2 > ul > li:nth-child(1) > strong:after {bottom:-12px;border-right:2px solid #dbdbe0;border-bottom:2px solid #dbdbe0;} .con-pro2 > ul > li:nth-child(4) > strong:before {top:-25px;border-left:2px solid #dbdbe0;border-top:2px solid #dbdbe0;} /* -------------------------------------------------------------------------------- PAGE : 상품 : 대출상담 : 자동검색기능 -----------------------------------------------------------------------------------*/ .area-search1 {display:none;position:absolute;top:64px;left:0;width:100%;background-color:#fff;padding:18px 0 14px;box-shadow:0 6px 12px 0 rgba(31,31,60,0.2);border-radius:0 0 8px 8px;z-index:4;} .area-search1 p {padding:8px 32px;line-height:22px;} .area-search1 > div {max-height:227px;overflow:hidden;} .area-search1 > div .mCSB_scrollTools {right:4px;margin:6px 0;} .area-search1 .list {padding:0 32px;} .area-search1 .list li {border-bottom:1px solid #f6f6f7;} .area-search1 .list li:last-child {border-bottom:none;} .area-search1 .list li a {display:block;width:100%;height:100%;padding:15px 0;} .area-search1 [data-btn="ui-close"] {overflow:hidden;display:block;position:absolute;top:17px;right:17px;width:16px;height:16px;color:transparent;} .area-search1 [data-btn="ui-close"]:before, .area-search1 [data-btn="ui-close"]:after {content:'';display:block;position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -7px;background:#a5a5b1;} .area-search1 [data-btn="ui-close"]:before {transform:rotate(-45deg);} .area-search1 [data-btn="ui-close"]:after {transform:rotate(45deg);} /* -------------------------------------------------------------------------------- PAGE : 상품 : 취급 중단 안내 메세지 -----------------------------------------------------------------------------------*/ [data-page="product"] .section-header:has(.txt-bul5) {margin-bottom:191px;} [data-page="product"] .txt-bul5 {position:absolute;left:50%; bottom:-112px;color:#1f1f3c;font-size:24px;line-height:32px;font-weight:700; text-align:center;transform: translateX(-50%);} [data-page="product"] .section-header .tit-page[data-img] .txt-bul5 {margin-top:82px;} [data-page="product"] .txt-bul5 span{font-size:16px;line-height:32px;font-weight:400;} [data-page="product"] .txt-bul5 > li:before, [data-page="product"] .txt-bul5 > dd:before, [data-page="product"] .txt-bul5:not(ol):not(ul):not(dl):before {float:none; position:relative; display:inline-block; left:auto; top:auto; width:34px;height:32px;background:url(../img/com/icon_set1.png) no-repeat -112px -219px; transform: translateX(-12px) translateY(7px); } [data-page="product"] .section-header .tit-page .txt-bul5 {margin-top:32px;} [data-page="product"] .txt-bul5 + .btn{margin-top:74px;} /* -------------------------------------------------------------------------------- PAGE : MY ACCOUNT : 공통 -----------------------------------------------------------------------------------*/ .area-summary1 {position:relative;border-top:2px solid #1f1f3c;padding:24px 0;} .area-summary1 .area-btn2 {position:absolute;right:0;bottom:24px;} .area-summary1 .area-btn2 .btn-sub1 {min-width:168px;} .area-summary1 .area-btn3 {margin:36px 0 0;} .area-summary1 .area-btn3 .btn-sub1 {min-width:180px;} .area-summary2 {position:relative;display:flex;justify-content:center;padding:24px;background:#f6f6f7;border-radius:20px;} .area-summary2:not(:first-child) {margin:40px 0 0;} .area-summary2 .area-info1 {position:absolute;right:24px;top:20px;margin:0;} .area-summary2 + .area-btn2 {margin:15px 0 0;} .area-con1 {display:flex;justify-content:space-between;margin:0 0 80px;} .area-con1 .area:nth-child(1) {width:60%;} /* -------------------------------------------------------------------------------- PAGE : MY ACCOUNT : 서브메인 -----------------------------------------------------------------------------------*/ /* 레이아웃 */ #container[data-page="myaccount"] {padding-top:200px;background:#fafaf9;} #container[data-page="myaccount"] .content {position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;} [data-page="myaccount"] .section-summary {width:100%;margin:0 0 64px;} [data-page="myaccount"] .section-basic {width:calc(100% - 326px);} [data-page="myaccount"] .section-aside {width:262px;margin:0 0 0 64px;} [data-page="myaccount"] .section-aside .section {border-top:1px solid #1f1f3c;padding:22px 0 0;} [data-page="myaccount"] .section-aside .section + .section {margin:100px 0 0;} [data-page="myaccount"] .section-aside .section div[class*="tit-sub"] > *:first-child + p:not([class]) {color:inherit;} [data-page="myaccount"] .section-aside .area-banner2 {margin:0 0 40px;} /* 요약정보 */ .info-summary1 {display:table;width:100%;padding:26px 32px;border:1px solid #1f1f3c;font-size:20px;line-height:32px;border-radius:20px;color:#1f1f3c;} .info-summary1 p , .info-summary1 .con {display:table-cell;} .info-summary1 p {font-weight:700;} .info-summary1 p strong {color:#ff5729;} .info-summary1 .con {white-space:nowrap;text-align:right;} .info-summary1 .con > li {position:relative;display:inline-block;} .info-summary1 .con > li + li {margin:0 0 0 49px;} .info-summary1 .con > li + li:before {content:'';display:block;position:absolute;left:-25px;width:1px;height:24px;top:50%;margin:-12px 0 0;background:#dbdbda;} .info-summary1 .con > li > div {display:inline-block;vertical-align:top;} .info-summary1 .con > li > div + div {margin:0 0 0 12px;font-weight:700;} /* 결제금액정보 */ [data-page="myaccount"] .section-basic .area-summary1 {padding:0;border:0;} /* 상품목록 */ .list-section1 {margin:80px 0 0;} .list-section1 > ul > li {border-top:1px solid #1f1f3c;padding:22px 0 0;} .list-section1 > ul > li + li {margin:92px 0 0;} .list-section1 .tit {display:block;margin:0 0 10px;font-size:27px;line-height:36px;color:#1f1f3c;font-weight:700;} .list-section1 .tit span:not(:only-child) {position:relative;display:inline-block;padding:0 24px 0 12px;margin:0 0 0 -12px;} .list-section1 .tit span:not(:only-child) + span:before {content:'';display:block;position:absolute;left:-1px;top:50%;width:1px;height:20px;margin:-10px 0 0;background:#ededf0;} .list-section1 .area-con1 {align-items:flex-end;margin:52px 0 0;} .list-section1 .area-con1 > .area {width:calc(50% - 32px);} .list-section1 .area-con1 > .area + .area {text-align:center;padding:36px 0;} .list-section1 .area-con1 .info-num2 > dt {color:#1f1f3c;font-size:20px;line-height:26px;font-weight:700;} .list-section1 .area-con1 .info-num2 > dt .icon-txt1 {margin:3px;} .list-section1 .area-con1 .info-data2 {margin:20px 0 0;} .list-section1 .area-con1 .info-data2 > ul > li {padding:11px 0;} .list-section1 .area-con1 .info-data2 > ul > li > div:last-child {font-size:20px;font-weight:700;} .list-section1 .area-con1 .info-data2 > ul > li > div:last-child span + span {font-size:18px;} .list-section1 .area-con1 .info-data2 > ul + ul {margin:12px 0 0;padding:12px 0 0;border-top:1px solid #ededf0;} .list-section1 .area-btn3 {margin:28px 0 0;} .list-section1 .nodata {border-top:1px solid #1f1f3c;padding:202px 0;color:#1f1f3c;} .list-section1 .nodata strong, .list-section1 .nodata span {display:block;} .list-section1 .nodata strong {font-size:34px;line-height:44px;font-weight:500;} .list-section1 .nodata strong + span {margin:10px 0 0;} .list-section1 .nodata + .area-btn1 {margin:-170px 0 0;} /* 추천상품배너 */ .area-banner2 {position:relative;overflow:hidden;} .area-banner2 .slide-area {overflow:visible;position:relative;width:100%;height:100%;margin:0;z-index:1;white-space:nowrap;transition-property:transform;box-sizing:content-box;} .area-banner2 .slide {position:relative;display:inline-block;flex-shrink:0;width:100%;height:211px;padding:0 0 88px;white-space:normal;} .area-banner2 .slide:before {content:'';position:absolute;right:0;bottom:0;width:112px;height:112px;background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;z-index:-1;} .area-banner2 .slide strong, .area-banner2 .slide span {display:block;} .area-banner2 .slide strong {color:#1f1f3c;font-size:24px;line-height:32px;} .area-banner2 .slide span {margin:7px 0 0;font-size:20px;line-height:26px;} .area-banner2 .pagination, .area-banner2 .pagination-ctrl {position:absolute;left:0;bottom:0;z-index:1;line-height:12px;} .area-banner2 .pagination .bullet, .area-banner2 .pagination-ctrl button {position:relative;display:inline-block;width:12px;height:12px;cursor:pointer;font-size:1px;vertical-align:top;overflow:hidden;color:transparent;word-break:break-all;} .area-banner2 .pagination .bullet:after, .area-banner2 .pagination-ctrl button:after {content:'';box-sizing:border-box;display:block;position:absolute;left:0;right:0;top:0;bottom:0;} .area-banner2 .pagination .bullet:only-child {display:none;} .area-banner2 .pagination .bullet:after {width:6px;height:6px;margin:auto;background:#d2d2d8;border-radius:100%;} .area-banner2 .pagination .bullet.active:after {opacity:1;background:#1f1f3c;} .area-banner2 .pagination-ctrl button.ui-start:after {width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #1f1f3c;margin:2px 3px 2px 4px;} .area-banner2 .pagination-ctrl button.ui-stop:after {margin:3px;border-left:2px solid #1f1f3c;border-right:2px solid #1f1f3c;} .area-banner2 .pagination-ctrl[data-auto-state="true"] .ui-start {display:none;} .area-banner2 .pagination-ctrl[data-auto-state="true"] .ui-stop {display:inline-block;} .area-banner2 .pagination-ctrl[data-auto-state="false"] .ui-start {display:inline-block;} .area-banner2 .pagination-ctrl[data-auto-state="false"] .ui-stop {display:none;} .area-banner2 .pagination-ctrl + .pagination {left:12px;} /* 고객센터 정보 */ .info-tel1 {margin:52px 0 0;} .info-tel1 > ul > li {color:#1f1f3c;font-weight:700;} .info-tel1 > ul > li + li {margin:41px 0 0;} .info-tel1 > ul > li > strong {display:block;line-height:23px;} .info-tel1 > ul > li > a {font-size:28px;line-height:36px;} /* -------------------------------------------------------------------------------- PAGE : MY ACCOUNT : 결제서비스 -----------------------------------------------------------------------------------*/ .list-data1.data-t1 > ul > li {padding:40px 24px;} .list-data1.data-t1 .con {margin:30px 0 0;} .list-data1.data-t1 .con.data1 {overflow:hidden;font-size:16px;color:#1f1f3c;text-align:right;} .list-data1.data-t1 .con.data1 > span {font-weight:700;} .list-data1.data-t1 .con.data1 > span:not(:only-child):first-child {float:left;font-weight:normal;} .pop-modal1 .list-data1:first-child {border-top:0;} .pop-modal1 .list-data1.data-t1 > ul > li {padding:20px 0;} .pop-modal1 .list-data1.data-t1 .info-data2 dl {padding-left:0;padding-right:0;background:none;border:0;} .pop-modal1 .list-data1 + .tit-sub3 {margin-top:32px;} /* -------------------------------------------------------------------------------- PAGE : 회사소개 : 공통 -----------------------------------------------------------------------------------*/ /* 컨텐츠 : 그래프/도표 */ .con-graph1 {text-align:center;} .con-graph1.box-t2 > dl {margin-top:-10px;} .con-graph1 > dl > dt {margin:0 0 12px;color:#1f1f3c;font-size:24px;font-weight:700;line-height:32px;} .con-graph1 > dl > dt + dd:not(.graph) {font-size:20px;line-height:26px;} .con-graph1 > dl > dd.graph {margin:46px 0 0;} .con-graph1 > dl > dd.bottom {margin:24px 0 0;} /* 컨텐츠 : 그래프/도표 : 신용등급 */ .con-graph4 > dl > dt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph4 > dl > dd.label {margin:0 0 24px 40px;font-size:12px;line-height:18px;color:#707082;white-space:nowrap;} .con-graph4 > dl > dd.label span {position:relative;display:block;padding:0 0 0 16px;} .con-graph4 > dl > dd.label span b {overflow:hidden;display:block;float:left;width:8px;height:8px;margin:4px 8px 0 -16px;border-radius:100%;background:#ff5729;font-size:1px;color:transparent;} .con-graph4 .graph {position:relative;padding:0 0 45px 42px;font-size:12px;color:#9494a2;} .con-graph4 .graph .axis-y dt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph4 .graph .axis-y dd ol {position:absolute;left:42px;right:0;bottom:45px;top:-49px;display:flex;flex-wrap:nowrap;flex-direction:column;} .con-graph4 .graph .axis-y dd ol:after {content:'';position:absolute;display:block;left:0;right:0;top:49px;bottom:0;border-left:1px solid #d2d2d8;border-bottom:1px solid #d2d2d8;} .con-graph4 .graph .axis-y dd ol > li {position:relative;flex:1;height:49px;} .con-graph4 .graph .axis-y dd ol > li:before {content:'';position:absolute;right:0;left:0;bottom:0;height:1px;background:#ededf0;} .con-graph4 .graph .axis-y dd ol > li span {position:absolute;right:100%;bottom:0;width:42px;line-height:20px;margin:0 0 -10px;} .con-graph4 .graph .data {display:flex;height:245px;padding:0 10px;align-items:flex-end;background:#fbfbfb;} .con-graph4 .graph .data > li {position:relative;flex:1;} .con-graph4 .graph .data > li:before, .con-graph4 .graph .data > li:after {content:'';} .con-graph4 .graph .data > li:before, .con-graph4 .graph .data > li:after, .con-graph4 .graph .data > li > span {display:block;position:absolute;} .con-graph4 .graph .data > li > span:nth-child(1) {left:0;right:0;top:100%;line-height:45px;text-align:center;} .con-graph4 .graph .data > li > span:nth-child(2) {left:50%;top:0;overflow:hidden;width:7px;height:7px;background:var(--point2);border-radius:100%;margin:-3px 0 0 -4px;font-size:1px;color:transparent;} .con-graph4 .graph .data > li.term > span:nth-child(1) {color:transparent;} .con-graph4 .graph .data > li.term > span:nth-child(1):before {position:absolute;left:0;right:0;top:0;bottom:0;content:'~';color:#707082;} .con-graph4 .graph .data > li + li:before {left:-50%;right:50%;top:0;height:2px;background:var(--point2);margin:-1px 0 0;} .con-graph4 .graph .data > li + li:after {left:50%;top:0;background:var(--point2);margin:1px 0 0 -1px;} .con-graph4 .graph .data > li.aminus {height:0;} .con-graph4 .graph .data > li.a {height:20%;} .con-graph4 .graph .data > li.aplus {height:40%;} .con-graph4 .graph .data > li.aaminus {height:60%;} .con-graph4 .graph .data > li.aa {height:80%;} .con-graph4 .graph .data > li.aaplus {height:100%;} .con-graph4 .graph .data > li.aminus + li.a:before, .con-graph4 .graph .data > li.a + li.aplus:before, .con-graph4 .graph .data > li.aplus + li.aaminus:before, .con-graph4 .graph .data > li.aaminus + li.aa:before, .con-graph4 .graph .data > li.aa + li.aaplus:before {top:49px;} .con-graph4 .graph .data > li.aminus + li.a:after, .con-graph4 .graph .data > li.a + li.aplus:after, .con-graph4 .graph .data > li.aplus + li.aaminus:after, .con-graph4 .graph .data > li.aaminus + li.aa:after, .con-graph4 .graph .data > li.aa + li.aaplus:after {width:2px;height:49px;} .con-graph4 .graph .data > li.aplus + li.aa:before {top:98px;} .con-graph4 .graph .data > li.aplus + li.aa:after {width:2px;height:98px;} /* 컨텐츠 : 이미지 유형1 */ .img-con1 {text-align:center;} .img-con1 img {display:inline-block;vertical-align:middle;} .img-con1 img + img {margin-left:100px;} /* 컨텐츠유형1 : 문장형 */ .con-t1 p + p {margin:26px 0 0;} .con-t1 p:not([class]) > strong:only-child {color:#1f1f3c;} .con-t1 p:not([class]) > em:only-child {color:#1f1f3c;font-weight:500;} /* 컨텐츠 : 연혁 */ .info-history1 {padding:40px 0;border-top:1px solid #ededf0;border-bottom:1px solid #ededf0;} .info-history1 > dl {position:relative;padding:0 0 0 70px;font-size:20px;line-height:26px;} .info-history1 > dl + dl {margin-top:23px;} .info-history1 > dl > dt {position:absolute;top:0;left:0;color:#1f1f3c;font-weight:700;} .info-history1 > dl > dd {position:relative;padding:0 0 0 99px;} .info-history1 > dl > dd + dd {margin-top:23px;} .info-history1 > dl > dd:before {content:'';position:absolute;left:58px;top:12px;width:2px;height:calc(100% + 23px);background:#ededf0;} .info-history1 > dl > dd:after {content:'';position:absolute;top:8px;left:54px;width:6px;height:6px;background:#fff;border:2px solid #e4e4e7;border-radius:50%;} .info-history1 > dl > dd > strong {position:absolute;top:0;left:0;color:#1f1f3c;} .info-history1 > dl > dd > div {font-size:16px;} .info-history1 > dl > dd > [class*="txt-bul"] {margin-top:10px;} .info-history1 > dl:last-child > dd:last-child:before {display:none;} /* -------------------------------------------------------------------------------- PAGE : 회사소개 : 서브메인 -----------------------------------------------------------------------------------*/ /* 컨텐츠 : 이미지 유형1 */ .wrap-content2 {display:flex;justify-content:space-between;} .wrap-content2 > .area {width:calc(33.3% - 36px);border-top:1px solid #1f1f3c;padding:22px 0 0;} .wrap-content2 > .area + .area {margin:0 0 0 56px;} .wrap-content2 > .area .tit-sub1 {margin:0 0 24px;} .wrap-content2 > .area .tit-sub1 + .info-num1 {margin:39px 0 0;} .wrap-content2:not(:last-child) {margin:0 0 106px;} .wrap-content2.w-t1 > .area:nth-child(2) {flex:1;} .wrap-content2 .info-num1 > dt {margin:0;font-size:16px;line-height:22px;color:#ff5729;font-weight:700;} .wrap-content2 .info-num1 .num + span,.wrap-content2 .info-num1 .txt {font-size:28px;line-height:48px;vertical-align:bottom;} .wrap-content2 .info-num1 .txt {display:inline-block;font-size:16px;font-weight:700;} .wrap-content2 .info-num1 .txt + .num {margin-left:30px} .wrap-content2 .info-num1 + .info-num1 {margin:32px 0 0;} .wrap-content2 .list-board1, .wrap-content2 .list-board1 > ul > li {border:0;} .wrap-content2 .list-board1 > ul > li, .wrap-content2 .list-board1 > ul > li > a {padding:13px 0;} .wrap-content2 .list-board1 > ul > li > a {margin:-13px 0;} .tit-sub1[aria-label]:before {content:attr(aria-label);display:block;margin:0 0 8px;font-size:16px;line-height:52px;color:#ff5729;font-weight:700;} .tit-sub1[aria-label] > dt ~ dt {margin-top:56px;} .tit-sub1[aria-label] > dd.area-btn1 {margin:0;} /* -------------------------------------------------------------------------------- PAGE : 회사소개 : 회사소개 -----------------------------------------------------------------------------------*/ [data-content="ir"] {background:#fafaf9;} [data-content="ir"] ~ #footer {background:#fafaf9;} /* CEO메시지 */ [data-content="ir0101"] .con-t1 {position:relative;} [data-content="ir0101"] .con-t1:before {content:'';position:absolute;right:0;bottom:79px;width:222px;height:394px;background:url(../../../resources/pc/img/content/ir_ceo.png) 0 100% no-repeat;background-size:100%;} [data-content="ir0101"]:lang(en) .con-t1:before{bottom:105px;} [data-content="ir0101"] .con-t1 p:last-child {position:relative;padding:26px 0 0;margin-top:165px;border-top:1px solid #ededf0;} [data-content="ir0101"] .con-t1 p:last-child > span {display:inline-block;} [data-content="ir0101"] .con-t1 p:last-child >span + span {display:inline-block;position:absolute; top: unset; left:unset; width:115px;height:44px;color:transparent;font-size:1px;background:url(../../../resources/pc/img/content/ir_ceo_sign.png) 0 0 no-repeat;background-size:100%; line-height:2.5;} [data-content="ir0101"]:lang(en) .con-t1 p:last-child >span + span {top:58px;} [data-content="ir0101"] .con-t1 p:nth-last-child(2), [data-content="ir0101"] .con-t1 p:nth-last-child(3), [data-content="ir0101"] .con-t1 p:nth-last-child(4) {padding-right:180px;} [data-content="ir0101"]:lang(en) .con-t1 p:nth-child(2), [data-content="ir0101"]:lang(en) .con-t1 p:nth-child(3){padding-right:0;} /* 인사철학 */ [data-content="ir0104"] .con1:not(:first-child) {margin-top:63px;} [data-content="ir0104"] .con1 > ul {display:flex;flex-wrap:wrap;justify-content:space-between;text-align:center;} [data-content="ir0104"] .con1 > ul > li {display:flex;align-items:center;justify-content:center;width:calc(25% - 16px);min-height:168px;padding:29px 16px 33px;background:#fff;border-radius:8px;border:1px solid #ededf0;} [data-content="ir0104"] .con1 > ul > li > .heading {display:block;font-family:'YouandiNewKrTitleM';color:#1f1f3c;font-size:16px;font-weight:inherit;line-height:26px;} [data-content="ir0104"] .con1 + p {margin-top:65px;} [data-content="ir0104"] .con-t1 p + p{margin-top:unset;} /* 기업문화 */ [data-content="ir0105"] .info-con3.box-t2 > dl > dd > ul > li{position:relative;padding-top:60px;} [data-content="ir0105"] .info-con3.box-t2 > dl > dd > ul > li:before {content:'';display:block;position:absolute;left:50%;top:0;width:45px;height:45px;background-image: url('/resources/com/img/icon3.png'); background-repeat:no-repeat; background-size:auto 45px; transform: translateX(-50%)} [data-content="ir0105"] .info-con3.box-t2 > dl > dd > ul > li:nth-child(1):before {background-position-x: 0;} [data-content="ir0105"] .info-con3.box-t2 > dl > dd > ul > li:nth-child(2):before {background-position-x: -55px;} [data-content="ir0105"] .info-con3.box-t2 > dl > dd > ul > li:nth-child(3):before {background-position-x: -110px;} [data-content="ir0105"] .info-con3.box-t2 > dl > dd > ul > li:nth-child(4):before {background-position-x: -165px;} /* CI소개 : 색상 */ [data-content="ir0106"] .content{text-align: center;} #container[data-content="ir0106"] .content ~ .content{margin-top:64px;padding-top:64px; border-top:1px solid var(--opacity12);} [data-content="ir0106"] .content > .tit-section1{margin-bottom:17px;} [data-content="ir0106"] .box-gray{margin-top:52px;padding:60px 0;background:var(--opacity08); text-align: center;} [data-content="ir0106"] .box-gray2{margin-top:52px;text-align: center;} [data-content="ir0106"] .box-gray + .area-btn1, [data-content="ir0106"] .box-gray2 + .area-btn1{margin-top:20px;} [data-content="ir0106"] .box-ci-size{margin-top:52px;} [data-content="ir0106"] .box-ci-size dt {color:var(--color1);font-size:16px; font-weight:500; line-height:22px;} [data-content="ir0106"] .box-ci-size dd {margin-top:26px;} [data-content="ir0106"] .content .info-color1 {margin-top:52px;text-align: left;} .info-color1 > dl {position:relative;} .info-color1 > dl dt{position:relative;margin-bottom:12px;font-size:18px;font-weight:500;line-height:22px;} .info-color1 > dl:first-child dd.con {width:100%;} .info-color1 > dl + dl{display: flex; flex-wrap: wrap;margin-top:26px;} .info-color1 > dl + dl dt{width:100%;} .info-color1 > dl + dl dd.con{width:calc(792px / 3);} .info-color1 .con {position:relative;height:152px;padding:9px 0 0 12px;box-sizing:border-box} .info-color1 .con > strong {display:block;font-family:'YouandiNewKrTitleR';font-size:8px;font-weight:400; line-height:12px;white-space:pre-line;} .info-color1 .con > ul {margin:8px 0 0; line-height:12px;} .info-color1 .con > ul > li > span {display:inline-block;font-size:8px;line-height:12px;} .info-color1 .con.c1 {color:var(--point6);background:var(--point1);} .info-color1 .con.c1 strong{color:var(--point6);} .info-color1 .con.c2 {color:var(--color1);background:var(--point6); border:1px solid var(--opacity12);border-right:unset;} .info-color1 .con.c2 strong{color:var(--color1); } .info-color1 .con.c3 {color:var(--point6);background:#262626; } .info-color1 .con.c3 strong{color:var(--point6); } .info-color1 .con.c4 {color:var(--point6);background:#000000; } .info-color1 .con.c4 strong{color:var(--point6); } [data-content="ir0106"] .icon-com2.txt1.ic4{color:var(--opacity64);} [data-content="ir0106"] .icon-com2.ic4:after {opacity: 0.64;} /* -------------------------------------------------------------------------------- PAGE : 회사소개 : 홍보 PAGE : 회사소개 : 투자정보 -----------------------------------------------------------------------------------*/ /* 보도자료 */ [data-content="ir0201"] .board-view1 .detail .img {margin:32px 0;text-align:center;} [data-content="ir0201"] .board-view1 .detail .img:empty {margin:0;} /* 경영실적 */ .list-board1.data-t2 .btn a {vertical-align:bottom;} /* 경영공시 */ [data-content="ir0303"] .mes-t1 + .list-board1 {border-top:none;} .list-board1.data-t2 > ul > li .cate.t1 {font-size:18px;margin-right:4px;color:#1f1f3c;} /* ESG보고 */ [data-content="ir0304"] .content > p {padding-bottom:376px;margin-bottom:96px;background:url("../../../resources/pc/img/content/ir_esg.png") no-repeat 50% 100%;background-size:100% auto;} /* 문의 */ .area-map1 {margin:40px 0 0;width:100%;} .area-map1 img {width:100%;object-fit:cover;} /* -------------------------------------------------------------------------------- PAGE : 회사소개 : 윤리경영 -----------------------------------------------------------------------------------*/ /* 기업윤리 : 현대커머셜 컴플라이언스 */ [data-content="ir0401"] .con1:not(:first-child) {margin:63px 0 0;} [data-content="ir0401"] .con1 > dl {text-align:center;font-family:'YouandiNewKrTitleM';} [data-content="ir0401"] .con1 > dl > dt {font-size:20px;line-height:26px;margin:0 0 32px;} [data-content="ir0401"] .con1 > dl > dd {position:relative;width:648px;padding:0 232px 0 0;margin:0 auto;border:1px solid #e4e4e7;background:#fff;} [data-content="ir0401"] .con1 > dl > dd strong {position:absolute;right:0;display:block;width:232px;height:112px;color:#91919f;line-height:112px;font-weight:500;} [data-content="ir0401"] .con1 > dl > dd li {position:relative;color:#fff;line-height:56px;} [data-content="ir0401"] .con1 > dl > dd > ul {background:#f6f6f7;} [data-content="ir0401"] .con1 > dl > dd > ul > li:nth-child(1) {color:#91919f;} [data-content="ir0401"] .con1 > dl > dd > ul > li:nth-child(2) {margin:0 0 0 56px;background:#d2d2d8;} [data-content="ir0401"] .con1 > dl > dd > ul > li strong {right:-175px;bottom:0;width:175px;border-top:1px solid #e4e4e7;border-right:1px solid #e4e4e7;} [data-content="ir0401"] .con1 > dl > dd > ul > li > ul > li:nth-child(1) {padding:0 0 0 56px;margin:0 0 0 56px;background:#a5a5b1;} [data-content="ir0401"] .con1 > dl > dd > ul > li > ul > li:nth-child(2) {padding:0 0 0 112px;margin:0 0 0 56px;background:#707082;} [data-content="ir0401"] .con1 > dl > dd > ul > li > ul > li:nth-child(1):before, [data-content="ir0401"] .con1 > dl > dd > ul > li > ul > li:nth-child(2):before, [data-content="ir0401"] .con1 > dl > dd > ul > li > ul > li:nth-child(2):after {content:'';position:absolute;left:0;top:0;display:inline-block;width:56px;height:56px;background:#d2d2d8;} [data-content="ir0401"] .con1 > dl > dd > ul > li > ul > li:nth-child(2):after {left:56px;background:#a5a5b1;} [lang="en"] [data-content="ir0401"] .con1 > dl > dd {width:100%;} /* 기업윤리 : 추진방향 */ [data-content="ir0401"] .con2.box-t2 {padding:13px 13px 13px 0;text-align:center;font-weight:400;} [data-content="ir0401"] .con2 {display:flex;align-items:center;} [data-content="ir0401"] .con2 > dl {width:30%;} [data-content="ir0401"] .con2 > dl > dt {padding:0 10px;font-family:'YouandiNewKrTitleM';color:#1f1f3c;font-size:20px;line-height:26px;} [data-content="ir0401"] .con2 > dl .con {margin:9px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;} [data-content="ir0401"] .con2 > dl .con span {display:block;width:100%;margin-top:4px;color:#91919f;font-size:12px;line-height:18px;} [data-content="ir0401"] .con2 > dl .con .tit {margin-top:0;color:#707082;font-family:'YouandiNewKrTitleM';font-size:16px;line-height:26px;} [data-content="ir0401"] .con2 > dl.box {flex:1;align-self:stretch;display:flex;align-items:center;padding:12px 12px 12px 0;border:1px solid #ededf0;border-radius:8px;background:#f6f6f7;} [data-content="ir0401"] .con2 > dl.box > dt {flex:1;} [data-content="ir0401"] .con2 > dl.box > dd span.tit {line-height:20px;} [data-content="ir0401"] .con2 > dl.box > dd.sub {width:292px;margin-top:0;} [data-content="ir0401"] .con2 > dl.box > dd.sub > ul {display:flex;flex-wrap:wrap;justify-content:space-between;} [data-content="ir0401"] .con2 > dl.box > dd.sub > ul > li {width:140px;min-height:156px;padding:16px 8px 16px;border:1px solid #ededf0;border-radius:8px;background:#fff;} [data-content="ir0401"] .con2 > dl.box > dd.sub > ul > li:nth-child(2) ~ li {margin-top:12px;} [data-content="ir0401"] .con2 > dl.box > dd.sub .con {margin-top:0;} /* 기업윤리 : 무관용 정책 */ [data-content="ir0401"] .con3 {padding:30px 24px 36px;} [data-content="ir0401"] .con3 > dl {display:flex;justify-content:space-around;align-items:center;text-align:center;} [data-content="ir0401"] .con3 > dl > dt {color:#1f1f3c;font-family:'YouandiNewKrTitleM';font-size:20px;} [data-content="ir0401"] .con3 > dl > dd {font-family:'YouandiNewKrTitleM';line-height:26px;} [data-content="ir0401"] .con3 > dl > dd:before {content: '';display:block;margin:0 auto 4px;width:64px;height:64px;background:url(../../com/img/icon1.png) no-repeat 0 0;background-size:640px 640px;} [data-content="ir0401"] .con3 > dl > dd.ic1:before {background-position:-256px -320px;} [data-content="ir0401"] .con3 > dl > dd.ic2:before {background-position:-512px -128px;} [data-content="ir0401"] .con3 > dl > dd.ic3:before {background-position:-320px -320px;} /* 기업윤리 : 실천활동 */ [data-content="ir0401"] .con4:not(:first-child) {margin-top:63px;} [data-content="ir0401"] .con4 > dl {display:flex;flex-wrap:wrap;justify-content:space-between;text-align:center;} [data-content="ir0401"] .con4 > dl > dt {flex:1;min-width:100%;font-family:'YouandiNewKrTitleM';font-size:20px;line-height:26px;margin:0 0 32px;} [data-content="ir0401"] .con4 > dl > dd {width:calc(33.3% - 16px);padding:29px 16px 33px;background:#fff;border-radius:8px;border:1px solid #ededf0;} [data-content="ir0401"] .con4 > dl > dd > .heading {display:block;font-family:'YouandiNewKrTitleM';color:#1f1f3c;font-size:20px;font-weight:inherit;line-height:26px;} [data-content="ir0401"] .con4 > dl > dd > ul > li {margin:25px 0 0;} [data-content="ir0401"] .con4 > dl > dd > ul > li span {display:block;margin-top:5px;color:#91919f;font-size:12px;line-height:18px;} [data-content="ir0401"] .con4 > dl > dd > ul > li .tit {margin:0;font-family:'YouandiNewKrTitleM';color:#4c4c63;font-size:16px;line-height:26px;} [lang="en"] [data-content="ir0401"] .con4 > dl > dd > .heading {display:flex;align-items:center;justify-content:center;height:52px;} /* -------------------------------------------------------------------------------- PAGE : 고객센터 : 이용안내 : 인터넷 설정 안내 -----------------------------------------------------------------------------------*/ /* 브라우저 링크 */ .link-set1 {margin:24px 0;padding:40px 0;background:#fff;border:1px solid #ededf0;text-align:center;font-size:0;} .link-set1 li {display:inline-block;padding:0 24px;width:20%;vertical-align:top;} .link-set1 li .tit {display:block;font-size:16px;line-height:32px;color:#1f1f3c;} .link-set1 li[class*="ic"]:before {content:'';display:block;margin:0 auto 10px;width:50px;height:50px;background:url(../img/com/icon_set1.png) no-repeat 0 0;background-size:600px 600px;} .link-set1 li.ic1:before {background-position:-300px -200px;} .link-set1 li.ic2:before {background-position:-350px -200px;} .link-set1 li.ic3:before {background-position:-400px -200px;} .link-set1 li.ic4:before {background-position:-450px -200px;} .link-set1 li.ic5:before {background-position:-500px -200px;} .area-toggle1 > dl > dd[data-toggle="content1"] .info-step1:not(:first-child) {margin-top:40px;} /* -------------------------------------------------------------------------------- PAGE : 소비자포털 -----------------------------------------------------------------------------------*/ /* 금융소비자보호법 */ p + .txt-num1.txt-data2, .txt-num1.txt-data2 > li ~ li, .txt-num1.txt-data2 .con + .con:not(.box-t1) {margin:40px 0 0;} .txt-num1.txt-data2 {font-weight:700;} .txt-num1.txt-data2, .txt-num1.txt-data2 .txt-num1 {color:#1f1f3c;} .txt-num1.txt-data2 .txt-num1 > li + li, .txt-num1.txt-data2 .con {margin:14px 0 0;} .txt-num1.txt-data2 .con {font-weight:500;color:#707082;} .txt-num1.txt-data2 .con .con {margin:4px 0 0;} .txt-num1.txt-data2 .con, .txt-num1.txt-data2 .con [class*="txt-bul"], .txt-num1.txt-data2 .con [class*="txt-num"], .txt-num1.txt-data2 .con [class*="link-t"] {font-size:14px;line-height:22px;} .txt-num1.txt-data2 .box-t1, .txt-num1.txt-data2 .tbl-data1 {margin-left:-24px;} .txt-num1.txt-data2 .box-t1 dl dt {font-weight:700;} .txt-num1.txt-data2 .tbl-data1 {border-top:1px solid #1f1f3c;font-size:initial;} .txt-num1.txt-data2 .tbl-data1 tbody th + td, .txt-num1.txt-data2 .tbl-data1 tbody td:first-child {padding-left:0;} .txt-num1.txt-data2 .tbl-data1 tbody td {vertical-align:top;} .txt-num1.txt-data2 .tbl-data1 tbody td:last-child {padding-right:0;} /* 소비자보호체계 : 상품개발과정 */ .list-con2.icon3.box-t2 {padding:36px 12px;} .list-con2.icon3 li {padding:0 12px;} .list-con2.icon3 ~ [class*="tbl-data"] {margin:64px 0 0;} /* 소비자보호체계 : 민원처리과정 */ .tbl-data1 [class*="box-t"] {margin:19px 0 0;} .tbl-data1 [class*="box-t"][class*="txt-bul"] {line-height:26px;} .tbl-data1 > ul > li > div + div > strong:not([class]), .tbl-data1 > dl > dt + dd > strong:not([class]) {color:#1f1f3c;} /* 각종사례(토글상세) */ .area-toggle1.data-t3 [data-toggle="content1"] [class*="txt-bul"], .area-toggle1.data-t3 [data-toggle="content1"] [class*="txt-num"], .area-toggle1.data-t3 [data-toggle="content1"] [class*="txt-mark"], .area-toggle1.data-t3 [data-toggle="content1"] [class*="link-t"] {font-size:14px;line-height:22px;} .area-toggle1.data-t3 [data-toggle="content1"] p + p {margin:26px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl:not(:first-child), .area-toggle1.data-t3 [data-toggle="content1"] dl > dt ~ dt {margin:40px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dt {font-weight:600;color:#1f1f3c;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dt + dd {margin:12px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dd + dd {margin:12px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dd + dd.img {margin:30px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dd [class*="txt-bul"] {margin:4px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl [class*="txt-num"] > li + li {margin:4px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] dl.txt-bul1 > dd.txt-bul3 + dd {margin:25px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] .bottom, /*.area-toggle1.data-t3 [data-toggle="content1"] [class*="txt-bul"] [class*="txt-bul"],*/ .area-toggle1.data-t3 [data-toggle="content1"] dl > dd .min {font-size:13px;line-height:1.5;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dd .min {margin:4px 10px 0;color:#91919f;} .area-toggle1.data-t3 [data-toggle="content1"] dl > dd .min [class*="link-t"] {font-size:13px;line-height:1.5;} .area-toggle1.data-t3 [data-toggle="content1"] dl.con-line2 {margin:12px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] .bottom {margin:40px 0 0;} .area-toggle1.data-t3 [data-toggle="content1"] .box-t2 {padding:36px 40px;} .area-toggle1.data-t3 [data-toggle="content1"] .box-t2.txt-num1, .area-toggle1.data-t3 [data-toggle="content1"] dl.box-t2 {margin:12px 0 0;padding:16px;} .area-toggle1.data-t3 [data-toggle="content1"] .box-t2.txt-num1 {font-size:13px;} .area-toggle1.data-t3 [data-toggle="content1"] .box-t2.txt-num1 [class*="txt-bul"] {margin:4px 0 0;font-size:13px;} .area-toggle1.data-t3 [data-toggle="content1"] .box-t2.txt-num1 [class*="txt-bul"] li + li {margin:0;} .area-toggle1.data-t3 [data-toggle="content1"] strong.txt-c0 {font-weight:600;} .area-toggle1.data-t3 [data-toggle="content1"] figure {margin-top:40px;} /* 소비자보호체계 : 조직도 */ .con-graph2 {margin:0 0 64px;color:#4c4c63;text-align:center;} .con-graph2 ul > li, .con-graph2 ul, .con-graph2 ul > li {position:relative;} .con-graph2 ul li > span{min-width: 178px;font-size: 14px;line-height: 36px;display: inline-block;padding: 0 24px;background: #fff;border: 1px solid #d2d2d8;text-align: center;white-space: nowrap;font-weight: 700;} .con-graph2 ul li > span + ul:before{content:'';position:absolute;display:block;background:#d2d2d8;left:50%;bottom:100%;width:1px;height:24px;} .con-graph2 ul li > span + ul{margin-top:24px;} .con-graph2 ul li > span + ul.con-graph2-depth{margin-top:40px;} .con-graph2 ul.con-graph2-depth:before{height:40px;} .con-graph2 ul.con-graph2-depth:after{content:'';position:absolute;display:block;background:#d2d2d8;height: 1px;top: 0;left: 21%;right: 20.8%;} .con-graph2 ul.con-graph2-depth li{display:inline-block; margin-top:45px; width:40%;} .con-graph2 ul.con-graph2-depth li:before{content:'';position:absolute;display:block;background:#d2d2d8;left:50%;bottom:100%;width:1px;height:45px;} .con-graph2 ul.con-graph2-depth li span{display: block; font-size:16px; line-height:56px;} .con-graph2 ul.con-graph2-depth li + li {margin-left:18%;} /* 소비자보호체계 : 상품판매준칙 */ .con-graph3 {margin:0 0 64px;font-size:14px;font-weight:700;color:#4c4c63;text-align:center;} .con-graph3 dl {position:relative;padding:136px 0 0;overflow:hidden;} .con-graph3 dl > dt, .con-graph3 dl > dd {position:relative;width:calc(20% - 8px);line-height:36px;border:1px solid #d2d2d8;} .con-graph3 dl > dt {position:absolute;left:50%;top:0;transform:translateX(-50%);} .con-graph3 dl > dd {float:left;} .con-graph3 dl > dd + dd {margin:0 0 0 10px;} .con-graph3 dl:before, .con-graph3 dl > dt:before, .con-graph3 dl > dd:before {content:'';display:block;position:absolute;left:50%;background:#d2d2d8;} .con-graph3 dl:before {top:86px;left:calc(10% - 4px);right:calc(10% - 4px);height:1px;} .con-graph3 dl > dt:before, .con-graph3 dl > dd:before {width:1px;} .con-graph3 dl > dt:before {top:36px;bottom:-50px;} .con-graph3 dl > dd:before {bottom:36px;top:-50px;} /* -------------------------------------------------------------------------------- PAGE : AS-IS 디버깅 --------------------------------------------------------------------------------- */ /* 기본 */ .termsWrap {font-size:16px;line-height:24px;} .termsWrap h2 {margin:48px 0 12px 0;font-size:24px;line-height:26px;color:#1f1f3c;font-weight:700;} .termsWrap h3 {margin:36px 0 12px 0;font-size:20px;line-height:26px;color:#1f1f3c;font-weight:700;} .termsWrap h4 {margin:20px 0 12px;font-size:16px;line-height:20px;font-weight:600;} .termsWrap h5 {margin:16px 0 12px;font-weight:600;} .termsWrap h2:first-child, .termsWrap h3:first-child, .termsWrap h4:first-child {margin-top:0;} .termsWrap ol, .termsWrap ul {margin:12px 0 0;} .termsWrap ol ol, .termsWrap ol ul {margin:8px 0 0 0;} .termsWrap ol li {padding:0 0 0 20px;text-indent:-20px;} .termsWrap ol li strong, .termsWrap ol li p, .termsWrap ol li ul li, .termsWrap ol li a {text-indent:0;} .termsWrap ol li ol li ol {margin:5px 0 10px 0;} .termsWrap ol li ol li ul {margin:5px 0 10px 0;padding-left:12px;} .termsWrap ul li {padding-left:3px;list-style:none;} .termsWrap ol > li + li {margin:10px 0 0;} .termsWrap ol ol > li + li {margin:4px 0 0;} .termsWrap ol > li a[href^="#rule"] {text-decoration:underline;} .termsWrap strong {font-weight:600;} .termsWrap > :first-child {margin-top:0;} .termsWrap h3 ~ p {font-weight:600;} .termsWrap h3 ~ h4 ~ p {font-weight:400;} .termsWrap p:not(:first-child) {margin:12px 0 0;} .termsWrap ol li p {margin:5px 0 0;} .termsWrap .txtB {font-weight:600;color:#1f1f3c;} .termsWrap .textDeco, .termsWrap .txtDecoUnder, .termsWrap .strong{text-decoration:underline;} .termsWrap .strong {font-weight:700;color:#1f1f3c;} /* 기본 : 신규 */ .termsWrap > dl > dt {margin:0 0 10px;font-size:16px;line-height:26px;font-weight:700;color:#1f1f3c;} .termsWrap > dl > dt ~ dt, .termsWrap > dl + dl {margin-top:24px;} .termsWrap ul.txt-mark li{padding-left:2rem;} /* 블릿유형 */ .termsWrap .list {padding:0;} .termsWrap .list > li {position:relative;margin:0;padding:0 0 0 10px;text-indent:0;} .termsWrap .list > li + li {margin:4px 0 0;} .termsWrap .list > li:before {content:'';display:block;float:left;width:3px;height:3px;margin:0.625em 7px 0 -10px;background:#707082;border-radius:100%;} .termsWrap .list2 > li + li {margin:4px 0 0;} .termsWrap .list2 > li:before {content:'';display:block;float:left;width:4px;height:1px;margin:0.6875em 5px 0 -10px;background:#707082;} .termsWrap .list .list2 {margin:4px;} .termsWrap .bullet {position:relative;padding:0 0 0 10px;text-indent:0;} .termsWrap .bullet:before {content:'';display:block;float:left;width:3px;height:3px;margin:0.625em 7px 0 -10px;background:#707082;border-radius:100%;} .termsWrap a.textDeco {display:inline-block;position:relative;padding:0 18px 0 0;font-size:15px;line-height:24px;color:#1f1f3c;text-decoration:none;font-weight:600;white-space:nowrap;} .termsWrap a.textDeco:before, .termsWrap a.textDeco:after {content:'';display:block;position:absolute;} .termsWrap a.textDeco:before {left:0;right:0;bottom:0;height:1px;margin:0 18px 0 0;background:#1f1f3c;opacity:0;} .termsWrap a.textDeco:after {top:50%;right:4px;width:4px;height:4px;border-right:2px solid #1f1f3c;border-bottom:2px solid #1f1f3c;transform:rotate(-45deg) translateY(-50%);} .termsWrap a.textDeco:hover:before, .termsWrap a.textDeco:focus:before {opacity:1;} .termsWrap .jj_tt {font-size:1em; font-weight:bold; margin:15px 0 10px 0;} .termsWrap ol.ti0 li, .termsWrap ul.ti0 li {text-indent:0;} /* 테이블 */ .termsWrap table {border-top:1px solid #1f1f3c;margin:10px 0 0;} .termsWrap table th, .termsWrap table td {height:48px;padding:12px;font-size:15px;line-height:24px;border-bottom:1px solid #e4e4e7;word-break:break-all;} .termsWrap table th {font-weight:600;color:#1f1f3c;} .termsWrap table thead th {text-align:center;} .termsWrap table td ol:first-child, .termsWrap table td ul:first-child {margin:0;} .termsWrap ol table th, .termsWrap ol table td {height:40px;padding:10px 12px;font-size:14px;line-height:20px;} .termsWrap table td.vtT {vertical-align: top;} .termsWrap table td.txtCenter {text-align: center;} /* 탭 */ .termsWrap .tabType1 {position:relative;font-size:0;margin:0 -4px 24px;} .termsWrap .tabType1 li {display:inline-block;margin:4px 2px;text-align:center;font-size:16px;line-height:40px;white-space:nowrap;} .termsWrap .tabType1 li a {position:relative;display:block;height:40px;padding:0 12px;color:#818192;background:#f6f6f7;border-radius:20px;word-break:break-word;} .termsWrap .tabType1 li a.on {color:#fff;background-color:#1f1f3c;} /* 팝업변형 */ .pop-modal1 .termsWrap > dl > dt {font-size:20px;} .pop-modal1 .termsWrap table th, .pop-modal1 .termsWrap table td {font-size:14px;line-height:22px;} /* 약관UI내 컨텐츠 */ .form-agree1 ~ [data-con="ajax"] {margin-top:54px;padding:0 24px;} .form-agree1 ~ [data-con="ajax"].ui-tabcon.active + [data-con="ajax"].ui-tabcon {margin-top:24px;} .termsWrap.area-policy1 {margin:56px 0 0;} .termsWrap.area-policy1:empty {background:#f6f6f7;} .termsWrap.area-policy1:empty:before {content:'약관내용출력영역';display:block;line-height:50vh;text-align:center;} /* 약관 아이콘 라벨링 */ .termsWrap .label-index{display: flex; flex-wrap: wrap;} .termsWrap .label-index li{position:relative;width:25%;padding-left:88px; padding-right:20px;} .termsWrap .label-index li:nth-child(n+5){margin-top:42px;} .termsWrap .label-index figure{display: inline-block;position:absolute;left:0;top:0;} .termsWrap .label-index img{width:80px; } .termsWrap .label-index p.tit{color:#1f1f3c;font-weight:700;} .termsWrap .label-index p.tit + p.txt{margin-top:4px;} .termsWrap .tit-label > span.ico{display:inline-block; margin-left:8px; vertical-align: middle;} .termsWrap .tit-label > span.ico img{width:40px;} .termsWrap .tit-label > span.ico img + img{margin-left:-4px;} .termsWrap .sub-label > span.ico {display:inline-block; margin-left:8px; vertical-align: middle; text-indent:0;} .termsWrap .sub-label > span.ico img {width:34px; max-width:120px;} /* -------------------------------------------------------------------------------- PAGE : AS-IS 디버깅 : 공지사항게시물 ----------------------------------------------------------------------------------*/ .hdTxt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} /* 문장 간격 */ .area-admin.termsWrap p {color:#1f1f3c;} .area-admin.termsWrap table p {font-size:16px;color:#707082;} /* 링크 */ .area-admin.termsWrap a.textDeco {text-decoration:none;} .area-admin.termsWrap .arrLink, .area-admin.termsWrap .btnLayer {display:inline-block;position:relative;padding:0 18px 0 0;font-size:16px;line-height:24px;color:#1f1f3c;font-weight:600;} .area-admin.termsWrap .arrLink, .area-admin.termsWrap .arrLink:visited, .area-admin.termsWrap .btnLayer, .area-admin.termsWrap .btnLayer:visited {color:#1f1f3c;} .area-admin.termsWrap .arrLink:before, .area-admin.termsWrap .arrLink:after, .area-admin.termsWrap .btnLayer:before, .area-admin.termsWrap .btnLayer:after {content:'';position:absolute;right:0;} .area-admin.termsWrap .arrLink:before, .area-admin.termsWrap .btnLayer:before {left:0;right:0;bottom:0;height:1px;margin:0 18px 0 0;background:#1f1f3c;opacity:0;} .area-admin.termsWrap .arrLink:hover:before, .area-admin.termsWrap .arrLink:focus:before, .area-admin.termsWrap .btnLayer:hover:before, .area-admin.termsWrap .arrLibtnLayernk:focus:before {opacity:1;} .area-admin.termsWrap .arrLink:after, .area-admin.termsWrap .btnLayer:after {top:50%;width:4px;height:4px;border-right:2px solid #1f1f3c;border-bottom:2px solid #1f1f3c;transform:rotate(-45deg) translateY(-50%);} .area-admin.termsWrap a.textDeco {display:inline-block;position:relative;padding:0 24px 0 0;font-size:16px;line-height:24px;color:#1f1f3c;font-weight:600;text-decoration:none;} .area-admin.termsWrap a.textDeco:after {content:'';position:absolute;right:0;right:2px;top:50%;width:24px;height:24px;border:0;background:url(../img/com/icon_set1.png) no-repeat -240px 0;background-size:600px 600px;transform:rotate(0deg) translateY(-50%);} .area-admin.termsWrap .linkList {margin:20px 0;} /* 리스트 */ .area-admin.termsWrap .list strong {color:#1f1f3c} .area-admin.termsWrap .list > li + li {margin:8px 0 0;} .area-admin.termsWrap .listNum.notice > li {padding-left:18px;margin-top:4px;text-indent:-18px;} .area-admin.termsWrap .listNum.notice > li:first-child {margin-top:0;} .area-admin.termsWrap .listNum.notice > li .dl {margin-top:4px;text-indent:0;} .area-admin.termsWrap .listNum.notice > li .dl.fwB {font-weight:700;margin-top:15px;} .area-admin.termsWrap .listNum.notice > li .dl.fwB + ul {margin-top:0;} .area-admin.termsWrap .listNum.notice > li ul {text-indent:0;} .area-admin.termsWrap .listNum.notice > li p {font-size:16px;color:#707082;} .area-admin.termsWrap .listNum.notice > li p.tit {text-indent:-18px;} /* 테이블변형 */ .area-admin.termsWrap table {border-top:1px solid #d2d2d8;} .area-admin.termsWrap table .textL {text-align:left;} .area-admin.termsWrap p + table {margin:24px 0 0;} .area-admin.termsWrap table + table {margin:40px 0 0;} .area-admin.termsWrap table + .termsWrap {margin-top:40px;} /* 서브타이틀 */ .area-admin.termsWrap h4 {margin:20px 0 10px;font-size:16px;font-weight:bold;color:#1f1f3c;} .area-admin.termsWrap h4:first-child {margin-top:0;} .area-admin.termsWrap .tblType2 span, .area-admin.termsWrap .tblType2 .span {padding-top:15px;} /* 2022-09-15 개선 */ /* 민원 건수 조회 */ [data-content="civil-cmpln"] .input-wrap1 .el-select2{width:100% !important;} [data-content="civil-cmpln"] [class*="txt-bul1"] {font-size:14px;line-height:22px;} [data-content="civil-cmpln"] .tbl-data1.info1{border-top-width:2px;} [data-content="civil-cmpln"] .tbl-data1 thead {font-size:14px;font-weight:600;line-height:22px;} [data-content="civil-cmpln"] .tbl-data1 thead th:first-child {padding-left:10px;text-align: left;} [data-content="civil-cmpln"] .tbl-data1 tbody th + td, [data-content="civil-cmpln"] .tbl-data1 tbody td, [data-content="civil-cmpln"] .tbl-data1 tfoot td {padding-left:0;padding-right:0;} [data-content="civil-cmpln"] .tbl-data1 tbody td, [data-content="civil-cmpln"] .tbl-data1 tfoot td {color:#1f1f3c; font-weight:600;vertical-align:top; text-align: center;} [data-content="civil-cmpln"] .tbl-data1 tbody td {padding-right:0;} [data-content="civil-cmpln"] .tbl-data1 tbody th {padding-left:10px;font-size:14px;font-weight:normal;line-height:22px;} [data-content="civil-cmpln"] .tbl-data1 tfoot th {padding-left:10px;font-size:14px;line-height:22px;text-align: left;} /* 2022-05-20 추가 */ /* main 임시 파업 */ .pop-modal1 section.main-sample-pop {overflow: visible;} .pop-modal1 section.main-sample-pop h1 span {overflow: visible; color:#ff5729; } .pop-modal1 section.main-sample-pop .area p + .link-t1{margin-top:10px;} .pop-modal1 section.main-sample-pop{overflow: visible;} .pop-modal1 section .today-close{position:absolute;bottom:-30px; right:0; color:#FFF; text-align:right;} /* 2022-09-21 추가 */ /* main 임시 파업 */ .main-sample-pop .tit-sub .info {font-size:16px;} .main-sample-pop .btn-sub1.w-col3{width:30%;} /* 2023-03-09 추가 */ /* -------------------------------------------------------------------------------- # COMMONET : GRAPH : 유형5 -----------------------------------------------------------------------------------*/ /* 컨텐츠 : 그래프/도표 : 신용등급 */ .con-graph5{margin:40px 0 0;} .con-graph5 > dl > dt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph5 > dl > dd.label {margin:0 0 24px 40px;font-size:14px;line-height:20px;color:#707082;white-space:nowrap;} .con-graph5 > dl > dd.label span {position:relative;display:inline-block;padding:0 0 0 16px;} .con-graph5 > dl > dd.label span + span{margin-left:24px;} .con-graph5 > dl > dd.label span b {overflow:hidden;display:block;float:left;width:12px;height:12px;margin:4px 4px 0 0;border-radius:100%;background:#ff5729;font-size:1px;color:transparent;} .con-graph5 > dl > dd.label span:nth-child(2) b {background:#d2d2d8;} .con-graph5 .graph {position:relative;padding:0 0 45px 42px;font-size:12px;color:#9494a2; } .con-graph5 .graph .axis-xy dl {position:absolute;left:42px;right:0;bottom:45px;top:0;} .con-graph5 .graph .axis-xy dl dt{overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph5 .graph .axis-xy dl:after {content:'';position:absolute;display:block;left:0;right:0;top:0;bottom:0;border-left:1px solid #d2d2d8;border-bottom:1px solid #d2d2d8;} .con-graph5 .graph .axis-xy dl dd {position:absolute;} .con-graph5 .graph .axis-xy dl .axis-y {top:0; left:-45px;} .con-graph5 .graph .axis-xy dl .axis-x {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph5 .graph .data {display:flex;height:265px;padding:0 10px 0 10px;align-items:flex-end;background:#fbfbfb;} .con-graph5 .graph .data > li {position:relative;flex:1; height:100%;} .con-graph5 .graph .data > li > span:nth-child(1) {left:0;right:0;top:100%;line-height:45px;text-align:center;} .con-graph5 .graph .data > li > span.point{display:block;bottom: 0;left:50%;height: 100%;margin: auto;width: 20px;border-radius: 4px 4px 0 0; background:#ff5729;transform: translateX(-50%)} .con-graph5 .graph .data > li > span.point b {left:50%;overflow:hidden;width:1px;height:1px;border-radius:100%;margin:-3px 0 0 -4px;font-size:1px;color:transparent;} .con-graph5 .graph .data > li > span.gray{width:100%} .con-graph5 .graph .data > li > span.gray b {left:50%;overflow:hidden;width:7px;height:7px;background:#d2d2d8;border-radius:100%;margin:-3px 0 0 -4px;font-size:1px;color:transparent;} .con-graph5 .graph .data > li span.gray:before, .con-graph5 .graph .data > li span.gray:after{content:'';} .con-graph5 .graph .data > li span.gray:before, .con-graph5 .graph .data > li span.gray:after, .con-graph5 .graph .data > li > span{display:block;position:absolute;} .con-graph5 .graph .data > li > span b{display:block;position:absolute;} .con-graph5 .graph .data > li span.gray:before {left:0;right:0;top:auto;height:2px;background:#d2d2d8;margin:-1px 0 0;} .con-graph5 .graph .data > li span.gray:after {right:0;background:#d2d2d8;margin:1px 0 0 -1px;} .con-graph5 .graph .data > li > span.gray.bp0{bottom:170px;} .con-graph5 .graph .data > li > span.gray.bp1{bottom:200px;} .con-graph5 .graph .data > li > span.gray.bp2{bottom:230px;} .con-graph5 .graph .data > li > span.gray.bp-1{bottom:140px;} .con-graph5 .graph .data > li > span.gray.bp-2{bottom:110px;} .con-graph5 .graph .data > li span.bp-up1:after{height:31px; width:2px;bottom:0} .con-graph5 .graph .data > li span.bp-up2:after{height:61px; width:2px;bottom:0} .con-graph5 .graph .data > li span.bp-dwn1:after{height:30px; width:2px;top:0} .con-graph5 .graph .data > li span.bp-dwn2:after{height:60px; width:2px;top:0} /* 2022-08-02 추가 */ /* IR 국문,영문 공정거래자율준수 */ [data-content="ir0405"] .con-t1 {position:relative;} [data-content="ir0405"] .content > ul {display:flex;justify-content:space-between; flex-wrap: wrap; } [data-content="ir0405"] .content > ul li{display:inline-flex;align-items:center;position:relative;width:calc(50% - 10px);height:124px;padding-left:134px;border-radius: 8px;border: 1px solid #ededf0;} [data-content="ir0405"] .content > ul li:nth-child(2) ~ li {margin-top:16px;} [data-content="ir0405"] .content > ul li:before {content:'';position:absolute;left:58px;top:31px;display:block;width:64px;height:64px;background-image:url(/resources/com/img/icon1.png?20230802); background-repeat: no-repeat; background-size:640px 640px;} [data-content="ir0405"] .content > ul li:nth-child(1):before {background-position:0 -512px;} [data-content="ir0405"] .content > ul li:nth-child(2):before {background-position:-64px -512px;} [data-content="ir0405"] .content > ul li:nth-child(3):before {background-position:-128px -512px;} [data-content="ir0405"] .content > ul li:nth-child(4):before {background-position:-192px -512px;} [data-content="ir0405"] .content > ul li:nth-child(5):before {background-position:-256px -512px;} [data-content="ir0405"] .content > ul li:nth-child(6):before {background-position:-320px -512px;} [data-content="ir0405"] .content > ul li:nth-child(7):before {background-position:-384px -512px;} [data-content="ir0405"] .content > ul li:nth-child(8):before {background-position:-448px -512px;} [data-content="ir0405"] .content p.sign {position:relative;margin-top:120px; text-align:center;} [data-content="ir0405"] .content p.sign > span {display:inline-block;} [data-content="ir0405"] .content p.sign > span + span {display:inline-block;position:absolute; top: -9px; left:unset; width:80px;height:80px;color:transparent;font-size:1px;background:url(/resources/pc/img/content/ir_ceo_sign_03.png?20240327) 0 0 no-repeat;background-size:cover; line-height:2.5;} /* 2023-12-12 수정 */ .con-graph-img{margin:0;} #uiTabInfo2 .con-graph-img{margin-top:0;} /* 2024-02-28 ir 메인 신용등급 수정 미사용 */ [data-content^="ir"] .info-num1 [class*="ir-rating"]:after{content:'';display: table;clear:both;} [data-content^="ir"] .info-num1 [class*="ir-rating"] .txt{line-height:72px;} [data-content^="ir"] .info-num1 [class*="ir-rating"] .txt + div{float:right;width:240px;} [data-content^="ir"] .info-num1 .ir-rating-en .txt + div{width:207px;} [data-content^="ir"] .info-num1 [class*="ir-rating"] .num + span{font-size:16px;} /* 2024-03-20 금리활인 */ .list-data4 .nodata {line-height:320px;border-bottom:1px solid #ededf0;} .list-data4 > ul > li {padding:30px;border-radius: 8px;border: 1px solid #ededf0;} .list-data4.coupon > ul > li {position:relative;padding-right:203px;} .list-data4.coupon > ul > li ~ li {margin-top:24px;} .list-data4.coupon > ul > li .tit{color:#1F1F3C;font-size:24px;font-weight:700;} .list-data4.coupon > ul > li > ul,.list-data4 > ul > li > ul + p{margin-top:10px;color:#707082; font-size:14px; line-height:20px;} .list-data4.coupon > ul > li > a.btn-sub1{position: absolute; right:30px; top:50%; transform: translateY(-50%)} .prdct-infrm + .area-info2{margin-top:10px} .prdct-infrm li strong{color:#4c4c63;font-size:18px;} /* 2024-04-25 컨텐츠 : 그래프/도표 : 신용등급(영문) */ .con-graph6 > dl > dt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph6 > dl > dd.label {margin:0 0 24px 40px;font-size:12px;line-height:18px;color:#707082;white-space:nowrap;} .con-graph6 > dl > dd.label span {position:relative;display:inline-block;padding:0 0 0 16px;} .con-graph6 > dl > dd.label span b {overflow:hidden;display:block;float:left;width:8px;height:8px;margin:4px 8px 0 -16px;border-radius:100%;background:#072399;font-size:1px;color:transparent;} .con-graph6 > dl > dd.label span + span{margin-left:24px;} .con-graph6 > dl > dd.label span:nth-child(2) b {background:#da1f33;} .con-graph6 .graph {position:relative;padding:0 0 45px 70px; font-size:12px;color:#9494a2;} .con-graph6 .graph .axis-y dt {overflow:hidden;position:absolute;left:-1px;top:-1px;width:1px;height:1px;opacity:0;} .con-graph6 .graph .axis-y dd ol {position:absolute;left:70px;right:0;bottom:45px;top:-49px;display:flex;flex-wrap:nowrap;flex-direction:column;} .con-graph6 .graph .axis-y dd ol:after {content:'';position:absolute;display:block;left:0;right:0;top:49px;bottom:0;border-left:1px solid #d2d2d8;border-bottom:1px solid #d2d2d8;} .con-graph6 .graph .axis-y dd ol > li {position:relative;flex:1;height:49px;} .con-graph6 .graph .axis-y dd ol > li:before {content:'';position:absolute;right:0;left:0;bottom:0;height:1px;background:#ededf0;} .con-graph6 .graph .axis-y dd ol > li span {position:absolute;right:100%;bottom:0;width:70px;line-height:20px;margin:0 0 -10px;} .con-graph6 .graph .data {display:flex;height:245px;padding:10px 10px 0;align-items:flex-end;background:#fbfbfb;} .con-graph6 .graph .data > li {position:relative;flex:1; height:100%} .con-graph6 .graph .data > li .op1:before, .con-graph6 .graph .data > li .op1:after, .con-graph6 .graph .data > li .op2:before, .con-graph6 .graph .data > li .op2:after {content:'';} .con-graph6 .graph .data > li .op1:before, .con-graph6 .graph .data > li .op1:after, .con-graph6 .graph .data > li .op2:before, .con-graph6 .graph .data > li .op2:after, .con-graph6 .graph .data > li span {display:block;position:absolute;} .con-graph6 .graph .data > li div {display:block;position:absolute;bottom:0;width:100%;} .con-graph6 .graph .data > li > span.date {left:0;right:0;top:100%;line-height:45px;text-align:center;} .con-graph6 .graph .data > li > div.op1 span {left:50%;top:0;overflow:hidden;width:7px;height:7px;background:#072399;border-radius:100%;margin:-3px 0 0 -4px;font-size:1px;color:transparent;} .con-graph6 .graph .data > li > div.op2 span {left:50%;top:0;overflow:hidden;width:7px;height:7px;background:#da1f33;border-radius:100%;margin:-3px 0 0 -4px;font-size:1px;color:transparent;} .con-graph6 .graph .data > li.term > span.date {color:transparent;} .con-graph6 .graph .data > li.term > span.date:before {position:absolute;left:0;right:0;top:0;bottom:0;content:'~';color:#707082;} .con-graph6 .graph .data > li div.op1:before {right:-50%;left:50%;top:0;height:2px;background:#072399;margin:-1px 0 0; z-index:2;} .con-graph6 .graph .data > li div.op1:after {right:50%;top:0;background:#072399;margin:1px 0 0 -1px;z-index:2;} .con-graph6 .graph .data > li div.op2:before {right:-50%;left:50%;top:0;height:2px;background:#da1f33;margin:-1px 0 0;} .con-graph6 .graph .data > li div.op2:after {right:50%;top:0;background:#da1f33;margin:1px 0 0 -1px;} .con-graph6 .graph .data > li:last-child div.op1:before, .con-graph6 .graph .data > li:last-child div.op2:before{display: none} .con-graph6 .graph .data > li:first-child div.op1:after, .con-graph6 .graph .data > li:first-child div.op2:after{display: none} .con-graph6 .graph .data > li:last-child div.op1.first:before {display:block;right:50%;top:-1px;margin:1px 0 0 -1px;width:20px;transform: translateX(-50%)} .con-graph6 .graph .data > li > div.sub-2 {height:0;} .con-graph6 .graph .data > li > div.sub-1 {height:25%;} .con-graph6 .graph .data > li > div.sub-0 {height:50%;} .con-graph6 .graph .data > li > div.super-1 {height:75%;} .con-graph6 .graph .data > li > div.super-2 {height:100%;} .con-graph6 .graph .data > li div.plus1:after {width:2px;height:59px;} .con-graph6 .graph .data > li div.minus1:after {width:2px;height:59px;top:-59px} .con-graph6 .graph .data > li div.plus2:after {width:2px;height:calc(59px * 2);} .con-graph6 .graph .data > li div.minus2:after {width:2px;height:calc(59px * 2);top:calc(-59px * 2)} [data-content="listShrhl"] .list-data1 > ul > li > .area:nth-child(1) {padding-right:120px;} [data-content="listShrhl"] .info-data2 dd > strong {font-size:20px;} .proof-doc-vrfct{margin:40px 0; text-align: center;} .proof-doc-vrfct > p {margin-top:21px; color:#1f1f3c;font-size:24px;font-weight:700;line-height:32px;} .proof-doc-vrfct > p > span {margin:0 16px;} /* IR 20260122 */ .wrap-content2 .info-num1.info-rate {display:flex; flex-wrap: wrap; align-items: start;gap: 12px;} .wrap-content2 .info-num1.info-rate > dt.hide + dd{margin-top:0;} .wrap-content2 .info-num1.info-rate > dd{flex:1;} .wrap-content2 .info-num1.info-rate dd > .txt + div {margin-top:8px;} .wrap-content2 .info-num1.info-rate .txt + div .num{line-height:48px;} .wrap-content2 .info-num1.info-rate .txt + div .num + .num{margin-top:8px;} .wrap-content2 .info-num1.info-rate .txt + div .num span{display:block;font-family:SpoqaHanSansNeo;font-size:16px;font-weight:500;line-height:22px;} .wrap-content2 .tit-sub1 + .tit-sub1 {margin-top:32px;} .wrap-content2 .tit-sub1 .area-btn3 + dt{margin-top:40px;} .wrap-content2 > .area {width:100%;border-top:1px solid #1f1f3c;padding:22px 0 0;} .wrap-content2 > .area + .area {margin:0 24px;padding: 22px 24px 0 0;} .wrap-content2 > .area + .area + .area{margin:0;padding:22px 0 0;} .wrap-content2 .info-num1 > dt {margin:0;font-size:16px;line-height:22px;color:rgba(31,31,60,0.64);font-weight:700;} .wrap-content2 .info-num1 > dt + dd{margin-top:8px;} .wrap-content2 .info-num1 .txt {display:block;font-size:16px;color:rgba(31,31,60,0.64);font-weight:700;line-height:22px;} .wrap-content2 .info-num1 .txt + .num {margin-left:30px;line-height:48px;} [data-content="ir"] .list-con1.line1.col4 li {width:calc(25% - 18px);padding:20px 0 0;border-top:1px solid #1f1f3c;border-radius:0;min-height:0;background:none;} [data-content="ir"] .list-con1.line1.col4 li + li {margin:0 0 0 24px;}