@charset "utf-8"; /*-------------------------------------------------------------------------------- # PAGE : 가이드성 추가스타일 ---------------------------------------------------------------------------------*/ /* 액션버튼(흰색) */ .btn-action2 {padding:0 3.0rem;font-size:1.6rem;line-height:5.6rem;color:#fff;background:rgba(17,35,105,0.15);border-radius:2.8rem;text-align:left;} .btn-action2:after {content:'';display:block;position:absolute;right:3.0rem;top:50%;width:1.0rem;height:1.0rem;margin:-0.6rem 0 0 -0.6rem;border-right:0.2rem solid #fff;border-bottom:0.2rem solid #fff;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .btn-action2:hover, .btn-action2:focus {background:rgba(17,35,105,0.3);} .pc .btn-action2 {min-width:21.6rem;} .mb .btn-action2 {padding:0 3.0rem;font-size:1.6rem;line-height:4.6rem;} /* 기본버튼(흰색) */ .btn-com2 {position:relative;padding:0 2.4rem;font-size:1.6rem;line-height:4.6rem;border:0.1rem solid rgba(255,255,255,0.3);color:#fff;border-radius:2.4rem;text-align:left;} .btn-com2:hover, .btn-com2:focus {background:rgba(255,255,255,0.05);} .btn-com2.checked {border-color:rgba(255,255,255,1);} .pc .btn-com2 {min-width:16.6rem;} .pc .btn-com2:after {content:'';display:block;position:absolute;right:2.0rem;top:50%;} .pc button.btn-com2:after {width:1.3rem;height:0.6rem;margin:-0.7rem 0 0 0;border-left:0.2rem solid rgba(255,255,255,0.15);border-bottom:0.2rem solid rgba(255,255,255,0.15);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .pc a.btn-com2:after {width:1.0rem;height:1.0rem;margin:-0.6rem 0 0 -0.6rem;border-right:0.1rem solid rgba(255,255,255,0.3);border-bottom:0.1rem solid rgba(255,255,255,0.3);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .pc a.btn-com2:hover:after, .pc a.btn-com2:focus:after {border-color:rgba(255,255,255,0.3);} .pc .btn-com2.checked:after {border-color:rgba(255,255,255,1);} .pc .btn-com2 + .btn-com2 {margin:0 0 0 1.2rem;} .mb .btn-com2 {font-size:1.4rem;line-height:3.8rem;text-align:center;} .btn-action2, .btn-com2 {-webkit-transition:all 0.2s ease;transition:all 0.2s ease;} /*-------------------------------------------------------------------------------- # PAGE : 메인 ---------------------------------------------------------------------------------*/ /* 기본 영역 및 레이아웃 */ .page-main .header {padding:0;} .page-main #header:before, .page-main #header:after {display:none;} .page-main #header.open:before, .page-main #header.open:after {display:block;} .page-main #uiNavTop, .page-main #uiNavQuick {display:none;} #container > #content.page-main header:not(.header-visual) h1 {color:rgba(255,255,255,0);} #container > #content.page-main header:not(.header-visual) h1:after {content:'';display:block;position:absolute;left:50%;top:50%;width:12.5rem;height:2.7rem;background:url(../img/com/icon_set1.png) no-repeat 0 0;background-size:40.0rem;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);} .pc .page-main #container ~ #uiNavTop a {display:none;} .pc #container > #content.page-main {padding:0 0 24.4rem;} .pc #container > #content.page-main header {overflow:hidden;position:absolute;width:1px;height:1px;opacity:0;padding:0;} .mb .page-main #header {position:relative;} .mb .page-main #header .icon-menu.ic1 {position:absolute;} .mb .page-main #header .icon-menu.ic3 {display:none;} .mb .page-main #container {position:relative;/* background:#ebecee; */} .mb #container > #content.page-main {padding:0 0 2.2rem} .mb #container > #content.page-main header:not(.header-visual) {position:absolute;} .mb #container > #content.page-main section.section-visual ~ section {padding:0 2.4rem;} .mb.app #container > #content.page-main {padding:0 0 3.2rem} /* 하단컨텐츠 : 주요메뉴바로가기 */ .pc #content.page-main .list-box1 > li:nth-child(5) {display:none;} .mb:not(.app) #content.page-main .list-box1 > li:not(:last-child) {display:none;} .mb:not(.app) #content.page-main .list-box1 > li:last-child {display:block;} .mb.app #content.page-main .list-box1 > li:not(:last-child) {display:block;} .mb.app #content.page-main .list-box1 > li:last-child, .mb.app #content.page-main .list-box1 > li:nth-child(3) {display:none;} .mb #container > #content.page-main section.menu-link {padding:2.4rem 2.4rem 1.2rem !important;background:#ebecee} .mb .menu-link .list-box1 {margin:0;} .mb .menu-link .list-box1 > li {margin-bottom:1.2rem;} .mb .menu-link .list-box1 > li + li {margin-top:0} /* 하단컨텐츠 : 공지사항 */ .page-main .notice .link-t1 {color:#0082d0} .page-main .notice .link-t1:after {border-color:#0082d0} .pc .page-main .notice .tit-sub1 {margin-top:5.0rem} .pc .page-main .notice div.tit-sub1 > .sub {bottom:-0.8rem} .pc .page-main .notice .board-list li:nth-child(2) ~ li {display:none;} .mb .page-main .notice .tit-sub1 {margin-top:0;} .mb .page-main .notice div.tit-sub1 > .sub {bottom:-0.4rem} .mb .page-main .notice .board-list li strong {font-family:'OneShinhanL' !important;} .mb .page-main .notice .board-list li:nth-child(5) ~ li {display:none;} .mb .page-main .notice .meta {display:none;} /* 하단컨텐츠 : 배너 */ .mb #content.page-main .area-banner1 {margin-bottom:-2.0rem;} .mb.app #content.page-main .area-banner1 {margin-bottom:-3.2rem;} /*-------------------------------------------------------------------------------- # PAGE : 메인 : 슬라이드 ---------------------------------------------------------------------------------*/ /* 공통스타일 */ .section-visual {position:relative;margin:0 0 3.0rem;padding:0;color:#fff;} .section-visual a, .section-visual button {color:#fff;} .pc .section-visual:before, .mb .section-visual {width:100vw;background:#0096d6;background:linear-gradient(to right, #0096d6, #5b3eb3);} .pc .section-visual:before {content:'';display:block;position:absolute;left:0;top:0;bottom:0;left:50%;min-width:120.0rem;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:-1;} /* 좌측영역 */ .section-visual {height:92.0rem;margin:0 0 5.0rem;} .section-visual .section {height:92.0rem;padding:22.0rem 46.0rem 0 4.0rem;z-index:5;} .section-visual .section .headline {font-size:6.4rem;line-height:7.0rem;} .section-visual .section .headline + p {margin:3.0rem 0 0;font-size:2.4rem;line-height:1.5;} .section-visual .section .area1 {margin:9.0rem 0 0;font-size:1.6rem;color:#d6e3f4;} .section-visual .section .area1 > dd {margin:2.8rem 0 0;} .pc .section-visual .section {width:100% !important;} .pc .section-visual .list .section .headline + p br {display:none;} .mb .section-visual {max-height:64.0rem;padding:0;margin:0;} .mb .section-visual .section {max-height:64.0rem;padding:20.0rem 4.8rem 0;} .mb .section-visual .section .headline, .mb .section-visual .section .headline + p, .mb .section-visual .section .area1 {width:calc(100vw - 9.6rem);} .mb .section-visual .section .headline {display:none;} .mb .section-visual .section .headline + p {margin:0;font-size:3.2rem;line-height:4.8rem;} .mb .section-visual .section .area1 {font-size:1.4rem;position:absolute;left:4.8rem;bottom:20%;margin:0;} .mb .section-visual .section .area1 dd * {float:left;width:calc(33.3% - 0.6rem);padding:0;} .mb .section-visual .section .area1 dd * + * {margin:0 0 0 0.9rem;} .mb .section-visual .section .area1 dd *:nth-child(1):nth-last-child(2), .mb .section-visual .section .area1 dd *:nth-child(2):nth-last-child(1) {width:calc(50% - 0.5rem);} .mb .section-visual .section .area1 dd *:nth-child(2):nth-last-child(1) {margin:0 0 0 1.0rem;} .mb .section-visual .section .area1 .btn-com2 {line-height:4.8rem;height:4.8rem;} .mb .section-visual .section dl.area1.area-btn1 {text-align:left;} .mb .section-visual .section dl.area1.area-btn1 dt, .mb .section-visual .section .area1.area-btn1 dd {float:none;width:100%;} .mb .section-visual .section dl.area1.area-btn1 dd {margin:2.8rem 0 0;} .pc .section-visual .list .section .area1.area-btn1 {display:none;} /* [2019.04.24 이상현 SRID : 20190424-003] 모바일웹도 모바일앱과 동일하게 메인화면 원하시는 상품버튼을 같은 버튼이 나오도록 수정하기 위해 아래 두개를 주석 처리로 막음. */ .mb:not(.app) .section-visual .section .area1.stock:not(.area-btn1) {display:none;} .mb:not(.app) .section-visual .section .area1.area-btn1.stock {display:block;} .mb.app .section-visual .section .area1:not(.area-btn1) {display:block;} .mb.app .section-visual .section .area1.area-btn1 {display:none;} .mb .section-visual .section .mw_100 {width:100%} /* 우측영역 */ .pc .section-visual .aside {position:absolute;left:100%;top:0;bottom:0;-webkit-transition:all 0.6s ease;transition:all 0.6s ease;} .pc .section-visual .aside {display:block;visibility:hidden;right:0;width:42.0rem;margin:0 0 0 18.0rem;padding:0 0 0 6.5rem;transition-delay:0.2s;-webkit-transition-delay:0.2s;opacity:0;z-index:10;} .pc .section-visual .aside:before {content:'';position:absolute;left:0;top:0;bottom:0;width:calc(50vw - 18.0rem);min-width:42.0rem;background:rgba(17,35,105,0.15);z-index:-1;} .pc .section-visual .aside.active {left:50%;opacity:1;visibility:visible;} .mb .section-visual .aside {position:fixed;/*position:-webkit-sticky;position:sticky;*/left:100%;top:0;bottom:0;width:100%;width:100vw;background:#0096d7;background:linear-gradient(to right bottom, #0096d6, #5b3eb3);z-index:105;} .mb .section-visual .aside.active {left:0;} .mb .section-visual .aside.section, .mb .section-visual .section-pop {display:none !important;} /* 우측영역 : 오토금융 : 레이아웃 */ .section-visual .section .area2 {font-size:1.6rem;line-height:2.6rem;color:#bdc8e6;} .section-visual .ui-close, .section-visual .ui-back {overflow:hidden;position:absolute;top:14.0rem;padding:0 0 0 2.5rem;font-size:1.4rem;line-height:2.5rem;white-space:nowrap;color:#bdc8e6;} .section-visual .ui-close {right:0;width:0;height:2.5rem;z-index:50;} .section-visual .ui-close:before, .section-visual .ui-close:after, .section-visual .ui-back:before {content:'';display:block;position:absolute;top:50%;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;} .section-visual .ui-close:before, .section-visual .ui-close:after {left:50%;width:3.0rem;height:0.1rem;margin:-0.1rem 0 0 -1.5rem;background:#fff;} .section-visual .ui-back {left:0;} .section-visual .ui-back:hover, .section-visual .ui-back:focus {color:#fff;} .section-visual .ui-back:before {left:0;width:1.0rem;height:1.0rem;margin:-0.6rem 0 0 0.5rem;border-left:0.1rem solid #fff;border-bottom:0.1rem solid #fff;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);} .section-visual .section .area2.active .ui-close:before, .section-visual .section-pop.open .ui-close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .section-visual .section .area2.active .ui-close:after, .section-visual .section-pop.open .ui-close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);} .mb .section-visual .section .area2 {font-size:1.4rem;line-height:2.2rem;} .mb .section-visual .ui-close, .mb .section-visual .ui-back {padding:0 0 0 5.6rem;line-height:6.4rem;top:0;} .mb .section-visual .ui-close {height:6.4rem;} .mb .section-visual .ui-close:before, .mb .section-visual .ui-close:after {width:2.2rem;height:0.2rem;margin:-0.1rem 0 0 -1.1rem;} .mb .section-visual .ui-back {overflow:hidden;width:0;} .mb .section-visual .ui-back:before {left:50%;width:1.5rem;height:1.5rem;margin:-0.8rem -0.6rem;border-left:0.2rem solid #fff;border-bottom:0.2rem solid #fff;} /* 우측영역 : 오토금융 : 구조 */ .section-visual .section .area2 .area-view {position:relative;overflow:hidden;width:100%;height:100%;} /* [2018.12.24 이상현 SRID : 20181211-011] 하단의 페이지 횟수를 보여주는 마커임. 총 fildset이 5개로 늘어나면서 아래의 마커가 불필요함을 느껴서 주석처리함. */ /*.section-visual .section .area2 .area-view:before, .section-visual .section .area2 .area-view:after {content:'';position:absolute;bottom:4.0rem;margin:0 0.4rem;visibility:visible;display:block;width:0.8rem;height:0.8rem;background:rgba(255,255,255,0.5);border-radius:0.4rem;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;} .section-visual .section .area2 .area-view:before {right:50%;} .section-visual .section .area2 .area-view:after {left:50%;} .section-visual .section .area2 .area-view.active1:before, .section-visual .section .area2 .area-view.active2:after {width:2.4rem;transition-delay:0.2s;-webkit-transition-delay:0.2s;background:rgba(255,255,255,1);}*/ .section-visual .section .area2 .area-view .view {width:500%;height:100%;overflow:hidden;} .section-visual .section .area2 fieldset.ui-tab-con {position:static;float:left;display:block;visibility:hidden;width:20%;opacity:0;padding:22.0rem 0 0;-webkit-transition:all 0.6s ease;transition:all 0.6s ease;} .section-visual .section .area2 fieldset.ui-tab-con.active {display:block;visibility:visible;opacity:1;} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(1).active {-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transform:translateX(0%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(1).active-after {-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transform:translateX(-100%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(2).active-before {-ms-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(2).active {-ms-transform:translateX(-100%);-webkit-transform:translateX(-100%);transform:translateX(-100%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(2).active-after {-ms-transform:translateX(-200%);-webkit-transform:translateX(-200%);transform:translateX(-200%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(3).active-before {-ms-transform:translateX(200%);-webkit-transform:translateX(200%);transform:translateX(200%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(3).active {-ms-transform:translateX(-200%);-webkit-transform:translateX(-200%);transform:translateX(-200%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(3).active-after {-ms-transform:translateX(-400%);-webkit-transform:translateX(-400%);transform:translateX(-400%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(4).active-before {-ms-transform:translateX(300%);-webkit-transform:translateX(300%);transform:translateX(300%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(4).active {-ms-transform:translateX(-300%);-webkit-transform:translateX(-300%);transform:translateX(-300%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(4).active-after {-ms-transform:translateX(-600%);-webkit-transform:translateX(-600%);transform:translateX(-600%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(5).active-before {-ms-transform:translateX(400%);-webkit-transform:translateX(400%);transform:translateX(400%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(5).active {-ms-transform:translateX(-400%);-webkit-transform:translateX(-400%);transform:translateX(-400%);} .section-visual .section .area2 fieldset.ui-tab-con:nth-of-type(5).active-after {-ms-transform:translateX(-800%);-webkit-transform:translateX(-800%);transform:translateX(-800%);} .mb .section-visual .section .area2 .area-view:before, .mb .section-visual .section .area2 .area-view:after {bottom:3.2rem;} .mb .section-visual .section .area2 fieldset.ui-tab-con {padding:7.0rem 2.4rem 2.4rem 2.4rem;} .mb .section-visual .section .area2 fieldset.ui-tab-con .ui-back ~ p {min-height:4.4rem;} /* 우측영역 : 오토금융 : 컨텐츠 */ .section-visual .section .area2 p strong {font-family:'OneShinhanM';font-weight:normal;color:#fff;} .section-visual .section .area2 .tab {overflow:hidden;display:table;margin:2.5rem 0 0.5rem;border-spacing:0.1rem;width:100%;} .section-visual .section .area2 .tab > li {position:relative;display:table-cell;width:50%;text-align:center;} .section-visual .section .area2 .tab > li a {display:block;line-height:4.0rem;color:#c5d3e9;} .section-visual .section .area2 .tab > li a:before {content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:-0.1rem;border:0.1rem solid rgba(255,255,255,0.15);z-index:-1;} .section-visual .section .area2 .tab > li.active {z-index:1;} .section-visual .section .area2 .tab > li.active a:before {background:#2242a6;border-color:#1c3c9d;} .section-visual .section .area2 .form {overflow:hidden;margin:0 0 4.0rem;} .section-visual .section .area2 .form dt {font-size:1.4rem;line-height:4.0rem;color:#fff;} .section-visual .section .area2 .form dd .selectbox {width:100%;} .section-visual .section .area2 .info {position:relative;margin:0 0 4.0rem;} .section-visual .section .area2 .info dt {overflow:hidden;position:absolute;width:1px;height:1px;} .section-visual .section .area2 .info dd {font-family:'OneShinhanM';line-height:2.0rem;padding:1.0rem 0 0.8rem;color:#fff;border-bottom:0.2rem solid #fff;} .section-visual .section .area2 .info .btn-icon2 {position:absolute;right:0.7rem;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .section-visual .section .area2 .text, .section-visual .section .area2 .selectbox {background-color:transparent;color:#fff;border-color:#93afd9;} .section-visual .section .area2 .selectbox {background-image:url(../img/com/icon_form2.png);} .section-visual .section .area2 .selectbox option {color:#212121;} .section-visual .section .area2 .selectbox:focus::-ms-value {color:#fff;} .section-visual .section .area2 .text:focus, .section-visual .section .area2 .selectbox:focus {border-color:#fff;} .section-visual .section .area2 .form {margin:4.0rem 0;} .section-visual .section .area2 .form dt, .section-visual .section .area2 .form dd {padding:0.8rem 0;} .section-visual .section .area2 .form dt {float:left;width:7.6rem;} .section-visual .section .area2 .form dd {position:relative;margin:0 0 0 7.6rem;} .mb .section-visual .section .area2 .form dt, .mb .section-visual .section .area2 .form dd {padding:0.4rem 0;} .section-visual .btn-com {background-color:transparent;border-color:#fff;font-size:1.4rem;font-family:'OneShinhanL';} .section-visual .btn-com:hover, .section-visual .btn-com:focus {background-color:rgba(0,0,0,0.05);} .section-visual .area-btn1 {overflow:hidden;margin:1.5rem 0 0;} .section-visual .area-btn1 > button {width:calc(50% -0.5rem);} .section-visual .area-btn1 > button + button {float:right;} .section-visual .area-btn1 > button:only-child {width:100%;} /*.section-visual .section .area2 #uiAutoTab2.active.step1 ~ * {display:none;}*/ .section-visual .section .area2 .active.step1 ~ * {display:none;} .mb .section-visual .section .area2 .form {margin:1.5rem 0 2.0rem;} .mb .section-visual .section .area2 #uiAutoTab1.active .form dt {float:none;width:100%;} .mb .section-visual .section .area2 #uiAutoTab1.active .form dd ~ dt {margin:0.5rem 0 0;} .mb .section-visual .section .area2 #uiAutoTab1.active .form dd {margin:0;} .mb .label-main2[data-boxscroll="true"] ~ .ui-tab-con p {font-size:1.2rem;} /* 우측영역 : 오토금융 : 폼객체 */ .label-main1 {overflow:hidden;margin:0 0 4.0rem -1.2rem;} .label-main1 label {display:block;float:left;position:relative;padding:0.2rem 0;} .label-main1 label > input {display:block;position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;margin:0.1rem;z-index:-1;width:100%;} .label-main1 label > input ~ span {position:relative;display:block;padding:0 1.1rem 0 1.2rem;line-height:3.6rem;color:#fff;} .label-main1 label > input ~ span:after {content:'';display:block;position:absolute;left:1.2rem;right:1.2rem;bottom:0;height:0.2rem;background:rgba(255,255,255,0);-webkit-transition:all 0.3s ease;transition:all 0.3s ease;} .label-main1 label > input:checked ~ span:after {background:rgba(255,255,255,1);} .pc .label-main1 label > input:focus + span {outline:0.1rem dotted rgba(255,255,255,0.1);} .mb .label-main1 {font-size:1.2rem;} .label-main2 {position:relative;overflow:hidden;margin:0.5rem 0 3.0rem;} .label-main2 ul {position:relative;overflow:hidden;min-height:100%;} .label-main2 li label, .label-main2 li button {position:relative;width:100%;text-align:left;vertical-align:top;} .label-main2 li label > input {position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;z-index:-1;width:100%;} .label-main2 li button span {z-index:-1;} .label-main2 li span {min-height:4.0rem;position:relative;display:block;padding:0.9rem 2.0rem 0.9rem 0;font-size:1.4rem;line-height:2.2rem;} .label-main2 li span:before, .label-main2 li span:after {content:'';position:absolute;right:0;display:block;} .label-main2 li span:before {left:0;bottom:0;height:0.1rem;background:rgba(255,255,255,0.15);} .label-main2 li span:after {top:50%;width:1.3rem;height:0.6rem;margin:-0.7rem 0 0 0;border-left:0.2rem solid rgba(255,255,255,0.15);border-bottom:0.2rem solid rgba(255,255,255,0.15);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .label-main2 li button:hover, .label-main2 li button:focus {outline:0;} .label-main2 li button:hover span:before, .label-main2 li button:focus span:before, .label-main2 li input:focus ~ span:before, .label-main2 li span:hover:before {background-color:rgba(255,255,255,1);} .label-main2 li button.checked span, .label-main2 li input:checked ~ span {color:#fff;} .label-main2 li button.checked span:before, .label-main2 li input:checked ~ span:before {height:0.2rem;background:rgba(255,255,255,1);} .label-main2 li button.checked span:after, .label-main2 li input:checked ~ span:after {border-color:rgba(255,255,255,1);} .pc .label-main2 label > input:focus + span {outline:0.1rem dotted rgba(255,255,255,0.5);} .label-main2[class*=" col"] li span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .label-main2[class*=" col"] li {float:left;} .label-main2[class*=" col"] ul:before, .label-main2[class*=" col"] ul:after {content:'';display:block;position:absolute;top:0;height:100%;background:linear-gradient(0deg, rgba(255,255,255,0.15) 1px, transparent 1px);background-size:100% 40px;z-index:-1;} .label-main2.col2 li {width:calc(50% - 1.2rem);margin:0;} .label-main2.col2 li:nth-child(2n) {margin:0 0 0 2.4rem;} .label-main2.col2 ul:before, .label-main2.col2 ul:after {width:calc(50% - 1.2rem);} .label-main2.col2 ul:before {left:0;} .label-main2.col2 ul:after {left:50%;margin:0 0 0 1.2rem;} .label-main2.col3 ul:before, .label-main2.col3 ul:after {width:calc(33.3% - 1.6rem);} .label-main2.col3 ul:before {left:33.3%;margin:0 0 0 0.8rem;} .label-main2.col3 ul:after {left:66.6%;margin:0 0 0 1.6rem;} .label-main2.col3 li {float:left;width:calc(33.3% - 1.6rem);margin:0 0 0 2.4rem;} .label-main2.col3 li:nth-child(3n-2) {margin-left:0;} /* 우측영역 : 오토금융 : 폼객체 : 스크롤 */ .label-main2[data-boxscroll="true"] {border:0;} .label-main2[data-boxscroll="true"] .mCSB_container {padding:0 1.5rem 0 0;} .label-main2[data-boxscroll="true"] .mCSB_container.mCS_no_scrollbar_y {padding:0;} .label-main2[data-boxscroll="true"] .mCSB_scrollTools .mCSB_draggerRail {background:rgba(0,0,0,0.1);} .label-main2[data-boxscroll="true"] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:rgba(255,255,255,0.4);} .label-main2[data-boxscroll="true"] ~ .ui-tab-con p {color:#fff;} fieldset[id^="uiAutoStep"].kind1 .ui-auto-kind2 {display:none;} fieldset[id^="uiAutoStep"].kind2 .ui-auto-kind1 {display:none;} /* 우측영역 : 오토금융 : 폼객체 : 스크롤 : 사이즈조정 */ .section-visual .section .area2 .label-main2[data-boxscroll="true"] {height:40.0rem;max-height:40.0rem;} /* [2018.12.22 이상현 SRID : 20181211-011] 아래 하단에 선이 넘는 문제로 min-height 를 삭제한다.*/ /*.section-visual .section .area2 .label-main2[data-boxscroll="true"] ul {min-height:40.0rem;}*/ /*.section-visual .section .area2 #uiAutoTab2 .label-main2[data-boxscroll="true"] {height:48.0rem;max-height:48.0rem;}*/ /*.section-visual .section .area2 .label-main2[data-boxscroll="true"] {height:40.0rem;max-height:40.0rem;}*/ .mb .section-visual .section .area2 .label-main2[data-boxscroll="true"] {max-height:calc(100vh - 36.0rem);} /*.mb .section-visual .section .area2 #uiAutoTab2 .label-main2[data-boxscroll="true"] {height:calc(100vh - 24.0rem);max-height:calc(100vh - 24.0rem);}*/ @media only screen and (min-device-width:375px) and (min-device-height:812px){ /* 아이폰 X, XS, 11 Pro 를 위한 미디어쿼리*/ .mb .section-visual .section .area2 .label-main2[data-boxscroll="true"] {height:auto;max-height:36.0rem;} } @media only screen and (min-device-width:414px) and (min-device-height:896px){ /* 아이폰 XS Max, 11 Pro Max 를 위한 미디어쿼리*/ .mb .section-visual .section .area2 .label-main2[data-boxscroll="true"] {height:auto;max-height:36.0rem;} } /* 우측영역 : 오토금융 : 폼객체 : 검색 */ .direct-search {padding-top:0.9rem;} .direct-search .title {float:none !important;width:auto !important;padding:0 !important;line-height:2.2rem !important;font-size:1.6rem;line-height:2.6rem !important;color:#bdc8e6;min-height:0 !important;font-family:'OneShinhanL';} .direct-search .title:before {display:none !important;} .direct-search .input-wrap2 {margin:0;} .direct-search .input-wrap2 input.text {color:#fff;padding:0 1.2rem 0 0;border-width:0 0 0.1rem 0;border-color:rgba(255,255,255,0.15);background:none;} .direct-search .input-wrap2 input.text:hover {border-color:#fff;z-index:1;} .direct-search .input-wrap2 ::-webkit-input-placeholder {color:#fff !important;} .direct-search .input-wrap2 ::-ms-input-placeholder {color:#fff !important;} .direct-search .input-wrap2 placeholder {color:#fff !important;} .direct-search .input-wrap2.icon .btn-sub1 {border-color:transparent;background:none;} .direct-search .input-wrap2.icon .btn-sub1.ic7:before {border-color:#c5d3e9;} .direct-search .input-wrap2.icon .btn-sub1.ic7:after {background-color:#c5d3e9;} .mb .direct-search .title {font-size:1.4rem;line-height:2.2rem;} /* 차량선택 팝업 내에서 너비 */ .pc #uiPOPSelectCar .direct-search {width:50%;margin:0 auto;} .mb #uiPOPSelectCar .direct-search {padding: 0 0 3.0rem;} .mb #uiPOPSelectCar .label-main2[data-boxscroll="true"] {max-height:calc(100vh - 36.0rem);margin-bottom:1.5rem;} @media only screen and (min-device-width:375px) and (min-device-height:812px){ /* 아이폰 X, XS, 11 Pro 를 위한 미디어쿼리*/ .mb #uiPOPSelectCar .label-main2[data-boxscroll="true"] {height:auto;max-height:36.0rem;} } @media only screen and (min-device-width:414px) and (min-device-height:896px){ /* 아이폰 XS Max, 11 Pro Max 를 위한 미디어쿼리*/ .mb #uiPOPSelectCar .label-main2[data-boxscroll="true"] {height:auto;max-height:36.0rem;} } /* 슬라이드관련 */ .section-visual .bx-viewport {overflow:visible !important;} .section-visual .list .section .headline, .section-visual .list .section .headline + p, .section-visual .list .section .area1 dt, .section-visual .list .section .area1 dd, .section-visual .list .section div.area1 {padding-left:2.0rem;opacity:0;-webkit-transition:all 0.8s ease;transition:all 0.8s ease;} .section-visual .list .section.active .headline, .section-visual .list .section.active .headline + p, .section-visual .list .section.active .area1 dt, .section-visual .list .section.active .area1 dd, .section-visual .list .section.active div.area1 {padding-left:0;opacity:1;} .section-visual .list .section.active .headline {transition-delay:0s;-webkit-transition-delay:0s;} .section-visual .list .section.active .headline + p {transition-delay:0.2s;-webkit-transition-delay:0.2s;} .section-visual .list .section.active .area1 dt {transition-delay:0.4s;-webkit-transition-delay:0.4s;} .section-visual .list .section.active .area1 dd, .section-visual .list .section.active div.area1 {transition-delay:0.6s;-webkit-transition-delay:0.6s;} .section-visual .bx-controls {position:absolute;left:0;padding:0 6.0rem 0 0;z-index:6;} .section-visual .bx-controls .bx-controls-auto {position:absolute;right:0;top:0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .section-visual .bx-controls .bx-controls-auto > div {display:inline-block;} .section-visual .bx-controls .bx-controls-auto a {position:relative;overflow:hidden;display:inline-block;width:0;height:2.4rem;padding:0 0 0 2.4rem;white-space:nowrap;background:rgba(0,0,0,0.1);border-radius:50%;} .section-visual .bx-controls .bx-controls-auto a.active {display:none;} .section-visual .bx-controls .bx-controls-auto a:after {content:'';position:absolute;left:50%;top:50%;display:block;margin:-0.4rem 0 0 -0.3rem;} .section-visual .bx-controls .bx-controls-auto a.bx-start:after {width:0;height:0;border-top:0.4rem solid transparent;border-bottom:0.4rem solid transparent;border-left:0.6rem solid #fff;margin-left:-0.2rem;} .section-visual .bx-controls .bx-controls-auto a.bx-stop:after {width:0.2rem;height:0.8rem;border-left:0.2rem solid #fff;border-right:0.2rem solid #fff;} .section-visual .bx-controls .bx-pager {position:relative;width:100%;} .section-visual .bx-controls .bx-pager a {display:block;font-size:1.6rem;line-height:5.6rem;color:#d6e3f4;} .section-visual .bx-controls .bx-pager a:hover, .section-visual .bx-controls .bx-pager a:focus {color:#fefefe;} .section-visual .bx-controls .bx-pager a.active {font-family:'OneShinhanM';font-size:2.0rem;color:#fefefe;} /* 슬라이드 4개 .pc .section-visual .bx-controls {bottom:9.0rem;} .pc .section-visual .bx-controls .bx-pager {display:table;width:68.0rem;border-top:0.1rem solid rgba(255,255,255,0.5);} .pc .section-visual .bx-controls .bx-pager:before {content:'';position:absolute;left:0;top:-0.4rem;display:block;width:25%;height:0.4rem;background:#fff;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;} .pc .section-visual .bx-controls .bx-pager > div {display:table-cell;width:25%;vertical-align:bottom;} .pc .section-visual.active1 .bx-controls .bx-pager:before {left:0;} .pc .section-visual.active2 .bx-controls .bx-pager:before {left:25%;} .pc .section-visual.active3 .bx-controls .bx-pager:before {left:50%;} .pc .section-visual.active4 .bx-controls .bx-pager:before {left:75%;} */ .pc .section-visual .bx-controls {bottom:9.0rem;} .pc .section-visual .bx-controls .bx-pager {display:table;width:68.0rem;border-top:0.1rem solid rgba(255,255,255,0.5);} .pc .section-visual .bx-controls .bx-pager:before {content:'';position:absolute;left:0;top:-0.4rem;display:block;width:33%;height:0.4rem;background:#fff;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;} .pc .section-visual.active2 .bx-controls .bx-pager:before {width:34%;} .pc .section-visual .bx-controls .bx-pager > div {display:table-cell;width:34%;vertical-align:bottom;} .pc .section-visual .bx-controls .bx-pager > div:nth-child(2) {width:34%;} .pc .section-visual.active1 .bx-controls .bx-pager:before {left:0;} .pc .section-visual.active2 .bx-controls .bx-pager:before {left:33%;} .pc .section-visual.active3 .bx-controls .bx-pager:before {left:67%;} .mb .page-main #container.open .section-visual {z-index:103;} .mb .page-main #container.open .section-visual .bx-controls {z-index:5;} .mb .section-visual .bx-controls {top:9.5rem;left:4.8rem;right:0;padding:0;} .mb .section-visual .bx-controls .bx-pager {display:table;width:100%;border-bottom:0.1rem solid rgba(255,255,255,0.5);} .mb .section-visual .bx-controls .bx-pager:before {top:100%;} .mb .section-visual .bx-controls .bx-pager > div {display:table-cell;vertical-align:top;} .mb .section-visual .bx-controls .bx-pager > div:nth-child(1) {width:7.0rem;} .mb .section-visual .bx-controls .bx-pager > div:nth-child(2) {width:10.0rem;} .mb .section-visual .bx-controls .bx-pager > div:nth-child(3) {width:6.0rem;} .mb .section-visual.active1 .bx-controls .bx-pager > div:nth-child(1) {width:calc(100% - 16.0rem);} .mb .section-visual.active2 .bx-controls .bx-pager > div:nth-child(2) {width:calc(100% - 13.0rem);} .mb .section-visual.active3 .bx-controls .bx-pager > div:nth-child(3) {width:calc(100% - 17.0rem);} .mb .section-visual .bx-controls .bx-pager a {position:relative;padding-right:2.4rem;font-size:1.2rem;line-height:4.5rem;} .mb .section-visual .bx-controls .bx-pager a:after {content:'';position:absolute;left:0;width:0;bottom:-0.1rem;display:block;height:0.2rem;background:#fff;opacity:0;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;} .mb .section-visual .bx-controls .bx-pager a.active {width:100%;padding-right:1.6rem;font-size:2.4rem;} .mb .section-visual .bx-controls .bx-pager a.active:after {right:1.6rem;width:calc(100% - 1.6rem);opacity:1;} @media only screen and (max-width:359px) { .mb .section-visual .bx-controls {left:3.6rem;} .mb .section-visual .bx-controls .bx-pager a {padding-right:1.2rem;} .mb .section-visual .bx-controls .bx-pager a.active {padding-right:2.4rem;} .mb .section-visual .bx-controls .bx-pager a.active {font-size:2.0rem;} .mb .label-main1 {margin:0 -1.0rem 4.0rem;} .mb .label-main1 label > input ~ span {padding:0 1.0rem;} } /* 팝업 : 기업투자금융 상세팝업 */ .section-visual .aside:before {left:0;-webkit-transition:all 0.6s ease;transition:all 0.6s ease;} .section-visual.open .aside:before {width:100vw !important;min-width:120.0rem !important;margin-left:calc(-50vw - 18.0rem);} .section-visual.open > .section > *, .section-visual.open .bx-wrapper, .section-visual.open .bx-controls {opacity:0;-webkit-transition:all 0.6s ease;transition:all 0.6s ease;} .section-visual .section.aside {padding-top:22.0rem;} .section-visual .section.aside .headline {font-size:4.0rem;line-height:4.6rem;} .section-visual .section.aside .headline + p {font-size:1.6rem;} .section-visual .section.aside .area1 {margin:8.0rem 0 0;} .section-visual .section-pop {visibility:hidden;position:absolute;left:0;right:0;top:0 !important;bottom:5.0rem;padding:20.0rem 4.0rem 0;z-index:-1;} .section-visual .section-pop > ul {opacity:0;margin:5.0rem 0 0;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;} .section-visual .section-pop.open {display:block;visibility:visible;z-index:10;} .section-visual .section-pop.open > ul {opacity:1;margin:0;transition-delay:0.3s;-webkit-transition-delay:0.3s;} .section-visual .section-pop > ul > li {float:left;width:calc(40% - 2.5rem);} .section-visual .section-pop > ul > li > strong {display:block;display:block;font-size:4.0rem;line-height:8.5rem;border-bottom:0.2rem solid #fff;} .section-visual .section-pop > ul > li li {font-size:1.4rem;line-height:2.4rem;border-bottom:0.1rem solid rgba(255,255,255,0.2);} .section-visual .section-pop > ul > li li a {position:relative;display:block;padding:2.5rem 0;color:rgba(255,255,255,0.7);} .section-visual .section-pop > ul > li li a:before, .section-visual .section-pop > ul > li li a:after {content:'';position:absolute;right:0;top:2.5rem;} .section-visual .section-pop > ul > li li a:after {right:1.5rem;content:'자세히보기';} .section-visual .section-pop > ul > li li a:before {right:0;width:0.8rem;height:0.8rem;margin:0.7rem 0.2rem 0 0;border-right:0.1rem solid rgba(255,255,255,0.7);border-bottom:0.1rem solid rgba(255,255,255,0.7);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .section-visual .section-pop > ul > li li a:hover:before, .section-visual .section-pop > ul > li li a:focus:before {border-color:rgba(255,255,255,1.0);} .section-visual .section-pop > ul > li li a:hover:after, .section-visual .section-pop > ul > li li a:focus:after {color:rgba(255,255,255,1.0);} .section-visual .section-pop > ul > li li strong {display:block;margin:0 0 1.0rem;font-family:'OneShinhanM';font-size:1.6rem;line-height:2.6rem;color:rgba(255,255,255,1);font-weight:normal;} .section-visual .section-pop > ul > li + li {width:calc(60% - 2.5rem);margin:0 0 0 5.0rem;} .section-visual .section-pop > ul > li + li li {float:left;width:calc(50% - 2.0rem);} .section-visual .section-pop > ul > li + li li:nth-child(3n), .section-visual .section-pop > ul > li + li li:nth-child(3n) + li {min-height:18.3rem;} .section-visual .section-pop > ul > li + li li:nth-child(2n) {margin:0 0 0 4.0rem;} .section-visual .section-pop > ul > li:nth-child(1) li:last-child {border:0;} .ios.app #uiPOPMainNotice1.pop-modal4 .bx-viewport {height:auto !important;padding:103% 0 0;} .ios.app #uiPOPMainNotice1.pop-modal4 > dl > dd .list {position:absolute !important;top:0;right:0;left:0;} .ios.app #uiPOPMainNotice1.pop-modal4 > dl > dd .list > li {width:100% !important} .ios.app #uiPOPMainNotice1.pop-modal4 [data-banner="bxslider"].one dd .list {position:relative !important;} /*-------------------------------------------------------------------------------- # PAGE : 상품공통 ---------------------------------------------------------------------------------*/ /* 상품공통 */ .section-product p + p {margin-top: 1.2rem;} .section-product .info-con1 ~ .txt-info1, .section-product .txt-mark2 + .txt-info1 {margin-top:1.6rem;} /* 팝업 : 물건지검색 */ .pc #uiPOPFindArea .content #uiTabFind1 {margin:-4.0rem 0 0;} .pc #uiPOPFindArea .content #uiTabFind1 .wrap-area5 {margin:0 -4.0rem -4.0rem;} .pc #uiPOPFindArea .content #uiTabFind1 .wrap-area5 + .wrap-area5 {margin-top:4.0rem;} .mb #uiPOPFindArea .content #uiTabFind1 {margin:-2.4rem 0;} .mb #uiPOPFindArea .content #uiTabFind1 .wrap-area5 {margin:0 -2.4rem;} /* 팝업 : 차량검색 */ .pc .pop-modal1[id^="uiPOPSelectCar"] {max-height:78.0rem;height:78.0rem;} .pc .pop-modal1[id^="uiPOPSelectCar"] .content {max-height:69.2rem;height:69.2rem;} /* 팝업 : 계좌윤용규칙 */ .pc .pop-modal1[id="uiPOPSL010101"] .content {max-height:69.2rem;height:69.2rem;} .mb .pop-modal1[id="uiPOPSL010101"] .form-area2 dl > dt:first-child {display:none;} /* 팝업 : 프로세스 안내 */ #menualDtailList {counter-reset:my-step-counter} #menualDtailList .area1 {padding-right:16rem;} #menualDtailList .area1 .heading:before {counter-increment:my-step-counter;content:"STEP" counter(my-step-counter)". "} #menualDtailList .area1 .heading + p {margin-top:1rem;} #menualDtailList .area1 .sub {position:absolute;right:6.4rem;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:2} #menualDtailList b, #menualDtailList .active .area1 .heading {color: #0082d0;} #menualDtailList strong {font-weight:normal;font-family:'OneShinhanM';} .process-info .heading {position:relative;min-height:4.6rem;padding:1.0rem 0;margin:0;box-sizing:border-box;} .process-info .heading [class*="tit-sub"] {margin:0 !important;white-space: normal;width: 80%;} .process-info .heading .sub {position:absolute;top:50%;right:0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .process-info .con:after {content:'';display:block;clear:both;} .process-info .visual-info {position:relative;overflow-y:auto;max-height:45vh;border: 0.1rem solid #d8d9dd;} .process-info .visual-info img {width:100%} .process-info .visual-info .info-scroll {display:block;position:absolute;bottom:1.5rem;left:50%;font-size:1.4rem;font-family:'OneShinhanM';-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);} .process-info .visual-info .info-scroll i {display:block;position:relative;left:50%;width:3.9rem;height:2.0rem;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:scrollArrow 1.6s infinite;animation:scrollArrow 1.6s infinite;} .process-info .visual-info .info-scroll i:before, .process-info .visual-info .info-scroll i:after {content:'';position:absolute;right:0;top:50%;width:2.2rem;height:0.3rem;margin:0;background:#018be0;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;} .process-info .visual-info .info-scroll i:before {-ms-transform:rotate(-35deg);-webkit-transform:rotate(-35deg);transform:rotate(-35deg);} .process-info .visual-info .info-scroll i:after {-ms-transform:rotate(35deg);-webkit-transform:rotate(35deg);transform:rotate(35deg);margin-right:1.7rem;} .process-info .visual-info .info-scroll i:nth-child(1) {-webkit-animation-delay:0s;animation-delay:0s} .process-info .visual-info .info-scroll i:nth-child(2) {-webkit-animation-delay:0.3s;animation-delay:0.3s} .process-info .visual-info .info-scroll i:nth-child(3) {-webkit-animation-delay:0.6s;animation-delay:0.6s} @-webkit-keyframes scrollArrow{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} } @keyframes scrollArrow{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} } .process-info .visual-info + .text-info {margin-top:1.5rem;} .process-info .text-info {padding:2.0rem 2.5rem;background:#ebf5fb;} .process-info .list .nodata {text-align: center;padding: 1.6rem 2.4rem !important;border: 0.1rem solid #d6dadd;} .mb #uiPOPOutMenual.pop-modal1 .content {overflow-y:scroll;height:100%;padding-bottom:15rem} .mb #menualDtailList .area1 {padding-right:4.0rem;} .mb #menualDtailList .area1 .heading {padding-right:8.5rem;} .mb #menualDtailList .area1 .sub {right:4.5rem;top:12px;-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);} .mb .process-info[data-banner="bxslider"] .bx-controls-direction > a {top:35vh} .mb .process-info[data-banner="bxslider"] .bx-controls-direction > a.bx-prev {left:-0.9rem;} .mb .process-info[data-banner="bxslider"] .bx-controls-direction > a.bx-next {right:-0.9rem;} .mb .process-info .heading {min-height:4.4rem;} .mb .process-info .visual-info {max-height:30vh} .mb .process-info .visual-info .info-scroll {bottom:0.5rem;} .mb .process-info .visual-info .info-scroll i {height:1.0rem;-ms-transform:translateX(-50%) scale(0.5);-webkit-transform:translateX(-50%) scale(0.5);transform:translateX(-50%) scale(0.5);} .mb .process-info .text-info {padding:1.5rem;font-size:1.2rem;} .mb .process-info .con {margin:0 !important;} .mb .contact-box {position:fixed;right:0;left:0;bottom:0;padding:2rem 1rem;width:100%;box-sizing:border-box;z-index:3;background:rgba(17,35,105,0.8);} .mb .contact-box .sub-con {margin-top:0;} .mb .contact-box .txt-info1 {color:#fff;} /*-------------------------------------------------------------------------------- # PAGE : 상품 : 리테일금융 ---------------------------------------------------------------------------------*/ .bracket-box {display:table;} .bracket-box .tit, .bracket-box .cont {display:table-cell;vertical-align:middle;} .bracket-box .tit {padding-right:1.0rem} .bracket-box .cont {padding:0 1.0rem;} .bracket {position:relative;} .bracket .wing {overflow:hidden;position:absolute;top:0;left:0;bottom:0;width:0.5rem;} .bracket .wing.right {top:0;left:auto;bottom:0;right:0;} .bracket .wing:before {position:absolute;top:0;left:0;content:'';width:2.5rem;height:100%;border-radius:55%;border:0.1rem solid #525252;} .bracket .wing.right:before {left:auto;right:0;} .pc .bracket-box .txt-bul2 li {padding-left:0;} .pc .bracket-box .txt-bul2 li:before {display:none;} .mb .bracket-box {display:block;} .mb .bracket-box .tit, .mb .bracket-box .bracket {display:block;padding:0;} .mb .bracket-box .bracket .wing {display:none;} .pc .summary-list [class^="txt-bul"] {font-size:1.6rem;} .pc .summary-list [class^="txt-bul"] li + li {margin-top:1.0rem;} [class*="u-block"] {position:relative;} [class*="u-block"]:after {position:absolute;left:0;bottom:0.1rem;content:'';display:inline-block;width:100%;height:1.0rem;background:rgba(72,104,225,0.3)} .u-block-org:after {background:rgba(255,235,59,0.4)} .line-bottom {border-bottom:0.1rem solid #0082d0} /*-------------------------------------------------------------------------------- # PAGE : 상품 : 기업/투자금융 : 서브메인 ---------------------------------------------------------------------------------*/ .mb #content.page-submain{background:#ebecee;} /*-------------------------------------------------------------------------------- # PAGE : 상품 : 기업금융 ---------------------------------------------------------------------------------*/ /* 부동산PF : 차트 */ .info-flowchart1 {overflow:hidden;padding:3.2rem 5.8rem;} .info-flowchart1 ul {position:relative;height:20.4rem;} .info-flowchart1 ul:before {content:'';position:absolute;top:3.0rem;left:6.6rem;width:55.0rem;height:14.0rem;border:0.3rem solid #d7d9dd;border-radius:6.8rem 6.8rem;} .info-flowchart1 ul:after {content:'';position:absolute;top:10.2rem;left:7.4rem;width:75.8rem;height:0.3rem;background:#d7d9dd;z-index:-1;} .info-flowchart1 li {position:absolute;padding:0 0.4rem;background:#fff;font-family:'OneShinhanM';} .info-flowchart1 li strong {position:absolute;width:13.7rem;height:6.0rem;line-height:6.0rem;border-radius:5.0rem 5.0rem;background:#0082d0;font-size:1.6rem;font-weight:normal;color:#fff;text-align:center;} .info-flowchart1 li strong span {overflow:hidden;position:absolute;width:1px;height:1px;opacity:0;padding:0;} .info-flowchart1 li:nth-child(1) strong {background:linear-gradient(to top left, #5b3eb3, #0096d6);} .info-flowchart1 li:nth-child(5) strong {background:#61667a;} .info-flowchart1 li:nth-child(1) strong:after {content:'';position:absolute;background:#fff;} .pc .info-flowchart1 {margin:1.0rem 0;border:0.1rem solid #d7d9dd;} .pc .info-flowchart1 li:nth-child(1) {top:2.0rem;left:13.9rem;} .pc .info-flowchart1 li:nth-child(2) {top:9.2rem;left:31.4rem;} .pc .info-flowchart1 li:nth-child(3) {bottom:2.0rem;left:45.7rem;} .pc .info-flowchart1 li:nth-child(4) {top:2.0rem;left:46.0rem;} .pc .info-flowchart1 li:nth-child(5) {top:9.2rem;right:17.4rem;} .pc .info-flowchart1 li:not(:nth-child(1)) strong {top: 50%;transform: translateY(-50%);} .pc .info-flowchart1 li:nth-child(1) strong {top:5.2rem;left:-13.6rem;} .pc .info-flowchart1 li:nth-child(2) strong {right:-31.2rem;} .pc .info-flowchart1 li:nth-child(3) strong {left:-17.9rem;} .pc .info-flowchart1 li:nth-child(4) strong {left:-18.4rem;} .pc .info-flowchart1 li:nth-child(5) strong {right:-17.4rem;} .pc .info-flowchart1 li:nth-child(1) strong:after {bottom:-4.5rem;left:0rem;width:27.6rem;height:4.5rem;} .mb .info-flowchart1 {padding:0;} .mb .info-flowchart1 ul {width:31.2rem;height:27.5rem;margin:0 auto;} .mb .info-flowchart1 ul:before {top:2.4rem;left:3.7rem;width:23.2rem;height:11.6rem;border:0.2rem solid #d7d9dd;border-radius:5.6rem 5.6rem;} .mb .info-flowchart1 ul:after {top:0rem;left:50%;transform:translateX(-50%);width:0.3rem;height:27.0rem;background:#d7d9dd;z-index:-1;} .mb .info-flowchart1 li {padding:0;font-size:1.0rem;} .mb .info-flowchart1 li:nth-child(1) {top:2.4rem;right:0.8rem;} .mb .info-flowchart1 li:nth-child(2) {top:7.4rem;left: 50%;transform:translateX(-50%);} .mb .info-flowchart1 li:nth-child(3) {left:0rem;top:50%;transform:translateY(-50%);background: transparent;} .mb .info-flowchart1 li:nth-child(4) {right:0.8rem;top:50%;transform:translateY(-50%);background: transparent;} .mb .info-flowchart1 li:nth-child(5) {bottom:7.4rem;left: 50%;transform:translateX(-50%);} .mb .info-flowchart1 li strong {width:10.8rem;height:5.0rem;line-height:5.0rem;font-size:1.4rem} .mb .info-flowchart1 li:nth-child(1) strong {top:-2.4rem;left:-15.4rem;} .mb .info-flowchart1 li:nth-child(2) strong, .mb .info-flowchart1 li:nth-child(5) strong {bottom:-7.3rem;left:-3.3rem;} .mb .info-flowchart1 li:nth-child(3) strong {top:-7.0rem;left:0rem;} .mb .info-flowchart1 li:nth-child(4) strong {top:-7.0rem;right:-0.8rem;} .mb .info-flowchart1 li:nth-child(1) strong:after {top:0rem;left:-10.0rem;width:10.0rem;height:6.0rem;} /*-------------------------------------------------------------------------------- # PAGE : 상품 : 투자금융 ---------------------------------------------------------------------------------*/ /* 구조화금융 : 차트 */ .info-flowchart2 {overflow:hidden;padding:4.6rem 12.0rem;} .info-flowchart2 ul {position:relative;height:28.4rem;background:url(../img/content/ei01_01.png) no-repeat;} .info-flowchart2 li {position:absolute;min-width:17.2rem;min-height:6.8rem;font-family:'OneShinhanM';} .info-flowchart2 li strong {position:absolute;} .info-flowchart2 li strong span {overflow:hidden;position:absolute;width:1px;height:1px;opacity:0;padding:0;} .info-flowchart2 li:not(:nth-child(4)) strong {position:absolute;width:17.2rem;height:6.8rem;line-height:6.8rem;border-radius:3.4rem 3.4rem;background:#0082d0;font-size:1.8rem;font-weight:normal;color:#fff;text-align:center;} .info-flowchart2 li:nth-child(1) strong, .info-flowchart2 li:nth-child(6) strong {padding:1.2rem 0;line-height:1.2;} .info-flowchart2 li:nth-child(1) strong {background:linear-gradient(to top left, #5b3eb3, #0096d6);} .info-flowchart2 li:nth-child(5) strong, .info-flowchart2 li:nth-child(8) strong, .info-flowchart2 li:nth-child(9) strong {background:#61667a;} .pc .info-flowchart2 {border: 0.1rem solid #d7d9dd;} .pc .info-flowchart2 li:nth-child(1), .pc .info-flowchart2 li:nth-child(2), .pc .info-flowchart2 li:nth-child(7) {top:10.8rem;} .pc .info-flowchart2 li:nth-child(3), .pc .info-flowchart2 li:nth-child(4), .pc .info-flowchart2 li:nth-child(5), .pc .info-flowchart2 li:nth-child(8) {top:0;} .pc .info-flowchart2 li:nth-child(6), .pc .info-flowchart2 li:nth-child(9) {bottom:0rem;} .pc .info-flowchart2 li:nth-child(1), .pc .info-flowchart2 li:nth-child(3), .pc .info-flowchart2 li:nth-child(4), .pc .info-flowchart2 li:nth-child(6) {left:33.4rem;} .pc .info-flowchart2 li:nth-child(2), .pc .info-flowchart2 li:nth-child(8), .pc .info-flowchart2 li:nth-child(9) {right:0rem;} .pc .info-flowchart2 li:nth-child(5), .pc .info-flowchart2 li:nth-child(7) {left:0rem;} .pc .info-flowchart2 li:nth-child(1) {padding:0 0 0 19.0rem;} .pc .info-flowchart2 li:nth-child(2) {padding:4.6rem 17.2rem 0 0;} .pc .info-flowchart2 li:nth-child(3) {padding:8.5rem 0 0 2.2rem;} .pc .info-flowchart2 li:nth-child(4) {padding:7.0rem 0 0 10.4rem;} .pc .info-flowchart2 li:nth-child(5) {padding:4.4rem 0 0 20.6rem} .pc .info-flowchart2 li:nth-child(6) {padding:0 0 7.6rem 0;margin-left:-0.5rem;} .pc .info-flowchart2 li:nth-child(7) {padding:3.8rem 0 0 21.2rem;} .pc .info-flowchart2 li strong {top:0;left:0;} .pc .info-flowchart2 li:nth-child(2) strong {left:auto;right:0;} .pc .info-flowchart2 li:nth-child(6) strong {top:auto;bottom:0;left:0.6rem;} .mb .info-flowchart2 {padding:0;width:calc(100% + 1.6rem);margin-left:-0.8rem;} .mb .info-flowchart2 ul {width:32.8rem;height:37.2rem;margin:0 auto;background:url(../img/content/ei01_02.png) no-repeat 50% 100%;background-size:100% 100%;} .mb .info-flowchart2 li {min-width:10.3rem;min-height:5.0rem;font-size:1.0rem;} .mb .info-flowchart2 li:nth-child(1) {top:6.9rem;} .mb .info-flowchart2 li:nth-child(2), .mb .info-flowchart2 li:nth-child(8), .mb .info-flowchart2 li:nth-child(9) {top:0;} .mb .info-flowchart2 li:nth-child(3), .mb .info-flowchart2 li:nth-child(4) {top:18.0rem;} .mb .info-flowchart2 li:nth-child(5) {bottom:0rem;} .mb .info-flowchart2 li:nth-child(6), .mb .info-flowchart2 li:nth-child(7) {top:15.2rem;} .mb .info-flowchart2 li:nth-child(1), .mb .info-flowchart2 li:nth-child(2), .mb .info-flowchart2 li:nth-child(3), .mb .info-flowchart2 li:nth-child(4), .mb .info-flowchart2 li:nth-child(5) {left:11.2rem;} .mb .info-flowchart2 li:nth-child(6), .mb .info-flowchart2 li:nth-child(8) {left:0rem;} .mb .info-flowchart2 li:nth-child(7), .mb .info-flowchart2 li:nth-child(9) {right:0rem;} .mb .info-flowchart2 li:nth-child(1) {padding:0 0 7.3rem 6.6rem;} .mb .info-flowchart2 li:nth-child(2) {padding:7.0rem 0 0 0;} .mb .info-flowchart2 li:nth-child(3) {padding:0 0 6.8rem 0;} .mb .info-flowchart2 li:nth-child(4) {padding:0 0 0 6.6rem;} .mb .info-flowchart2 li:nth-child(5) {padding:0 0 6.6rem 2.0rem;} .mb .info-flowchart2 li:nth-child(6) {padding: 0 0 9.6rem 2.7rem;} .mb .info-flowchart2 li:nth-child(7) {padding:0 0 9.6rem 2.0rem;} .mb .info-flowchart2 li strong {width:10.3rem;height:5.0rem;line-height:5.0rem;border-radius:2.4rem 2.4rem;font-size:1.2rem;} .mb .info-flowchart2 li:not(:nth-child(2)) strong {bottom:0;left:0;} .mb .info-flowchart2 li:nth-child(2) strong {top:0;left:0;} .mb .info-flowchart2 li:nth-child(1) strong, .mb .info-flowchart2 li:nth-child(6) strong {padding:1.0rem 0;line-height:1.2;} /*-------------------------------------------------------------------------------- # PAGE : 고객센터 > 이용안내 > 고객확인의무제도 ---------------------------------------------------------------------------------*/ /* 상단 비주얼배경 */ .page-cu0101 .mes-headline1.visual strong:after {content:'';display:block;height:0;margin:5.0rem 0 0;padding:0 0 22%;background:url(../img/content/cu0101.png) no-repeat 50% 100%;background-size:100% 100%;} .mb .page-cu0101 .mes-headline1.visual strong:after {width:100vw;margin:3.0rem -2.4rem 0;padding:0 0 47%;background-image:url(../img/content/cu0101_m.png);} /*-------------------------------------------------------------------------------- # PAGE : 고객센터 > 이용안내 > ars안내 ---------------------------------------------------------------------------------*/ /* 다이얼 */ .dial-keypad {position:relative;margin-top:3.0rem;padding:0 2.0rem 0 0;box-sizing:border-box;} .dial-keypad:after {content:'';display:block;clear:both;} .dial-keypad .dial-num {float:left;width:42%;padding-right:9%;margin:0 auto;} .dial-num:after {content:'';display:block;clear:both;} .dial-num .ea {float:left;width:33.0%;padding:1.0rem 0;text-align:center;} .dial-num .ea:last-child {clear:both;width:100%;} .dial-num .ea.active .btn-dial {color:#fff;background:#0082d0} .dial-num .ea .btn-dial:hover .txt, .dial-num .ea.active .btn-dial .txt {text-decoration:underline;} .btn-dial {display:inline-block;width:10.0rem;height:10.0rem;border-radius:100%;font-size:2.0rem;font-family:'oneShinhanB';color:#333;word-break:break-all;background-color:#e6e6e6;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s;} .btn-dial:active {background-color:#ccc} .btn-dial[disabled="disabled"] {cursor:default;} .btn-dial .txt {display:block;min-height:3.8rem;font-size:1.3rem;font-family:'oneShinhanL';} .dial-keypad .list-data4 {float:left;width:58%;} .dial-keypad .list-data4 > ul > li {display:none;} .dial-keypad .list-data4 > ul > li + li {margin-top:0;} /*-------------------------------------------------------------------------------- # PAGE : 고객센터 > 금융소비자보호 > 금융감독원 금융정보 ---------------------------------------------------------------------------------*/ .list-info2 {margin-left:-2.3%;} .list-info2:after {content:'';display:block;clear:both;} .list-info2 > li {float:left;width:31%;margin:3% 0 0 2.3%;box-sizing:border-box;} .list-info2 .tit {display:inline-block;margin-bottom:1.0rem;font-family:'OneshinhanM';font-size:1.6rem;line-height:2.0rem;color:#212121} .list-info2 .tit a {color:#212121} .list-info2 .desc {display:block;} .mb .list-info2 {margin:0;border-top:0.1rem solid #9599a6;border-bottom:0.1rem solid #9599a6} .mb .list-info2 > li {float:none;width:auto;margin:0;padding:1.3rem 0} .mb .list-info2 > li + li {border-top:0.1rem solid #d7d9dd} /*-------------------------------------------------------------------------------- # PAGE : 마이페이지 ---------------------------------------------------------------------------------*/ /* 상환스케줄팝업 : 공통 */ .tbl-data1.data-t2 th {padding:0.8rem 0 !important;} .tbl-data1.data-t2 td {text-align:right;} .tbl-data1.data-t2 tbody tr td:nth-child(1), .tbl-data1.data-t2 tbody tr td:nth-child(2) {text-align:center;padding:0.8rem 0 !important;} .tbl-data1.data-t2 tbody tr td {font-size:1.2rem;} @media only screen and (max-width:359px) { .mb .tbl-data1.data-t2 tbody tr td {font-size:1.1rem;padding:0.8rem 0.5rem;} } .pc .tbl-data1[data-table-value] {max-height:calc(100vh - 65.0rem) !important;} .mb .tbl-data1[data-table-value] {max-height:calc(100vh - 31.0rem) !important;} /* 상환스케줄팝업1 */ .pc .tbl-data1[data-table-value="1"] tbody tr td {padding:0.8rem 1.0rem;} .pc .tbl-data1[data-table-value="1"] col:nth-child(1) {width:5%;} .pc .tbl-data1[data-table-value="1"] col:nth-child(2):nth-last-child(6) ~ col:not(:last-child) {width:19%;} .pc .tbl-data1[data-table-value="1"] col:nth-child(2):nth-last-child(8) ~ col:not(:last-child) {width:13%;} .mb .tbl-data1[data-table-value="1"] col:nth-child(2) {width:28%;} .mb .tbl-data1[data-table-value="1"] col:nth-last-child(2), .mb .tbl-data1[data-table-value="1"] col:nth-last-child(1) {width:31%;} .mb .tbl-data1[data-table-value="1"] col:nth-child(3), .mb .tbl-data1[data-table-value="1"] col:nth-child(4), .mb .tbl-data1[data-table-value="1"] tr th:nth-child(3), .mb .tbl-data1[data-table-value="1"] tr th:nth-child(4), .mb .tbl-data1[data-table-value="1"] tr td:nth-child(3), .mb .tbl-data1[data-table-value="1"] tr td:nth-child(4), .mb .tbl-data1[data-table-value="1"] col:nth-child(5):nth-last-child(4), .mb .tbl-data1[data-table-value="1"] col:nth-child(6):nth-last-child(3), .mb .tbl-data1[data-table-value="1"] tr th:nth-child(5):nth-last-child(4), .mb .tbl-data1[data-table-value="1"] tr th:nth-child(6):nth-last-child(3), .mb .tbl-data1[data-table-value="1"] tr td:nth-child(5):nth-last-child(4), .mb .tbl-data1[data-table-value="1"] tr td:nth-child(6):nth-last-child(3) {display:none;} /* 상환스케줄팝업2 */ .pc .tbl-data1[data-table-value="2"] col ~ col {width:11%;} .pc .tbl-data1[data-table-value="2"] col ~ col:last-child {width:13%;} .pc .tbl-data1[data-table-value="2"] col:nth-child(3), .pc .tbl-data1[data-table-value="2"] col:nth-child(4), .pc .tbl-data1[data-table-value="2"] col:nth-child(5) {width:13%;} .pc .tbl-data1[data-table-value="2"] col:nth-child(6), .pc .tbl-data1[data-table-value="2"] col:nth-child(7), .pc .tbl-data1[data-table-value="2"] col:nth-child(8) {width:11%;} .pc .tbl-data1[data-table-value="2"] tbody tr td {padding:0.8rem;} .mb .tbl-data1[data-table-value="2"] col:nth-child(2) {width:28%;} .mb .tbl-data1[data-table-value="2"] col:nth-child(3) {width:31%;} .mb .tbl-data1[data-table-value="2"] col:nth-child(9) {width:33%;} .mb .tbl-data1[data-table-value="2"] col:nth-child(4), .mb .tbl-data1[data-table-value="2"] col:nth-child(4) ~ col:not(:last-child), .mb .tbl-data1[data-table-value="2"] tr th:nth-child(4), .mb .tbl-data1[data-table-value="2"] tr th:nth-child(4) ~ th:not(:last-child), .mb .tbl-data1[data-table-value="2"] tr td:nth-child(4), .mb .tbl-data1[data-table-value="2"] tr td:nth-child(4) ~ td:not(:last-child) {display:none;} /* 상환스케줄팝업3 */ .mb .tbl-data1[data-table-value="3"] col:nth-child(2) {width:28%;} .mb .tbl-data1[data-table-value="3"] col:nth-child(7) {width:31%;} .mb .tbl-data1[data-table-value="3"] col:nth-child(8) {width:33%;} .mb .tbl-data1[data-table-value="3"] col:nth-child(3), .mb .tbl-data1[data-table-value="3"] col:nth-child(3) ~ col:not(:nth-child(7)):not(:last-child), .mb .tbl-data1[data-table-value="3"] tr th:nth-child(3), .mb .tbl-data1[data-table-value="3"] tr th:nth-child(3) ~ th:not(:nth-child(7)):not(:last-child), .mb .tbl-data1[data-table-value="3"] tr td:nth-child(3), .mb .tbl-data1[data-table-value="3"] tr td:nth-child(3) ~ td:not(:nth-child(7)):not(:last-child) {display:none;} .pc .tbl-data1.data-t2 col:first-child {width:4.8rem;} .pc .tbl-data1.data-t2 tbody td {padding:0.8rem 1.4rem 0.8rem 1.0rem;} /* 차량인수 확인 버튼 */ .btn-accept {margin-bottom:1.0rem;border-radius:0;} .mb .btn-accept {width:100%;} /*-------------------------------------------------------------------------------- # PAGE : 기타 : 로그인 ---------------------------------------------------------------------------------*/ .mb .page-login #container {margin-bottom:0;} /* .mb .page-login #container > #content {padding-bottom:8.5rem;} */ .mb .page-login #container > #content .section {padding-top:0;padding-bottom:0;} .mb .page-login .wrap-area1 .bottom {position:fixed;left:0;right:0;bottom:0;margin:0;padding:0;z-index:3} .mb .page-login .wrap-area1 .bottom .btn-set1 {margin:0;padding:0;} .mb .page-login #container ~ #footer {display:none;} .mb .page-login #uiNavTop {bottom:11rem} /* .app .page-login #uiNavBottom {display:none;} */ .app .page-login #uiNavTop {bottom:1.6rem;} .app .page-login #container > #content {padding-bottom:10.5rem;} .page-login .wrap-area1 .ui-tab-con p.mes {font-size:2.0rem;color:#757575;text-align:center;} .pc #container .page-login header:not(.header-visual) {margin:0 0 3.6rem;} .pc #container .page-login header:not(.header-visual) h1 {margin:1.8rem 0 0 0;font-size:3.2rem;} .pc .page-login .wrap-area1 .con {min-height:34.4rem;} .pc .page-login .wrap-area1 .tab-sub1 {margin:-6.1rem -8.6rem 7.5rem;} .pc .page-login .wrap-area1 .tab-sub1 li a {padding:0.9rem 2.0rem 1.2rem;border-top:0.1rem solid #d7d9dd;} .pc .page-login .wrap-area1 .tab-sub1 li.active a {border-top: 0.2rem solid #112369;} .pc .page-login .wrap-area1 .tab-sub1 li:first-child a {border-left:0.1rem solid #d7d9dd;} .pc .page-login .wrap-area1 .tab-sub1 li:last-child a {border-right:0.1rem solid #d7d9dd;} .pc .page-login .wrap-area1 .ui-tab-con .mes:only-child {padding:6.3rem 0 0 0;height:17.2rem;line-height:1.6;color:#212121;} .pc .page-login .wrap-area1 .ui-tab-con p.mes > span {display:block;margin-top:-1.2rem;font-size:1.4rem;color:#525252;} .pc .page-login .wrap-area1 .area-btn1 + .area-btn1 {margin-top:-0.4rem;} .pc .page-login .wrap-area1 .btn-set1 + .btn-set1 {margin-top:1.0rem} .mb .page-login .wrap-area1 .tab-sub1 {margin-bottom:2.0em;} .mb .page-login .wrap-area1 .ui-tab-con p.mes {font-size:1.6rem;} /*.mb .page-login .wrap-area1 .ui-tab-con .mes:only-child {line-height:21.5rem;}*/ .mb .page-login .wrap-area1 .ui-tab-con .mes:only-child {line-height:6.5rem;} .mb .page-login .area-btn1 .link-t2 {display:inline;float:none !important;margin:0 !important;padding:0;width:auto !important;} .app .page-login .wrap-area1 .ui-tab-con .mes:only-child {line-height:normal;} .mb .pop-modal1 .content .box-t1 + .tit-sub2 {margin-top:1.6rem;} /* 공인인증서 로그인 : 공인인증서등록 디스플레이 */ .page-login .wrap-area1.mbox #uiTabCon2.active ~ .area-btn1 ~ .area-btn1:last-child {display:none;} /* 자동로그인 */ .mb .area-btn1 + .login-type-box {margin-top:-1.0rem;} .login-type-box:after {content:'';display:block;clear:both;} .login-type-box .login-auto {float:left;width:42%;text-align:left} .login-type-box .login-choose {float:left;width:58%;} .login-type-box .login-auto .btn-icon2 {vertical-align:middle} .login-type-box .login-auto .txt {position:relative;} .login-type-box .login-auto .txt + * {margin-top:0.5rem;} .login-type-box .login-auto .txt.active [class^="pop-modal"] {display:block;position:absolute;left:0;top:2.5rem !important;width:100%;-webkit-transform:none;transform:none;} .login-choose .tit {position:relative;text-align:right;} .login-choose .tit a, .login-choose .tit button {position:relative;display:inline-block;padding-right:2.5rem} .login-choose .tit .ic {display:inline-block;position:absolute;top:0.1rem;right:0;width:2.0rem;height:2.0rem;border-radius:1.0rem;background:linear-gradient(to bottom right, #0082d0, #3166c3);} .login-choose .tit .ic:before, .login-choose .tit .ic:after {content:'';position:absolute;top:1.0rem;right:0.5rem;display:block;width:1.0rem;height:0.1rem;background:#fff;z-index:1} .login-choose .tit .ic:after {-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);} .login-choose .tit + .cont {display:none;} .login-choose .tit.active .ic:before {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);} .login-choose .tit.active .ic:after {top:1.0rem;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .login-choose .cont {text-align:right;margin:0.8rem 0 0 -1.5rem;} .login-type {display:inline-block;max-width:15.0rem;padding:1.0rem 1.5rem;text-align:right;background:#ebf5fb;} .login-type li {padding:0.2rem 0;} .login-type li + li {border-top:0.1rem dashed #d7d9dd} .login-type [class^='ic-cert'] {position:relative;display:inline-block;padding:0.2rem 2.5rem 0.2rem 0;} .login-type [class^='ic-cert']:after {content:'';position:absolute;right:0;display:inline-block;width:2.0rem;height:2.0rem;background:url(../img/com/icon_set2.png) no-repeat left top;background-size:15.0rem} .login-type .ic-cert-paper:after {background-position:-8.8rem -12.5rem;} .login-type .ic-cert-phone:after {background-position:-7.1rem -10.5rem;} .login-type .ic-cert-card:after {background-position:-6.2rem -12.5rem;} .login-type .ic-cert-finger:after {background-size:12.0rem;background-position:-7.1rem -2.4rem;} .login-type .ic-cert-simple:after {background-size:12.0rem;background-position:-9.2rem -2.0rem;} .pop-autologin-info .tit {font-family:'OneShinhanM'} .pop-autologin-info .sub-tit {margin-top:1.5rem;} .pop-autologin-info .txt-num {margin-top:0.5rem;} .pop-autologin-info .txt-bul3 {margin-top:0.5rem;font-size:1.2rem} .mb .pop-autologin-info .txt-num .active [class^="pop-modal"] {display:block;position:absolute;left:0;top:2.5rem !important;width:100%;-webkit-transform:none;transform:none;} .full-image {width:100%;height:100%;vertical-align:top;} .login-banner {position:fixed;bottom:0;left:0;right:0;z-index:2} .login-banner img {width:100%;vertical-align:top;} /*-------------------------------------------------------------------------------- # PAGE : 기타 : 휴대폰 본인인증 ---------------------------------------------------------------------------------*/ .section-cert .cert-num-box {text-align:center;} .cert-num-box .cert-num {font-size:5.0rem;font-family:'OneShinhanM';color:#212121} .cert-num-box .limit-time {font-size:1.6rem;} .cert-num-box .limit-time + .btn-sub2 {margin-top:1.0rem;} .section-cert .comment-box {margin-top:2.0rem;box-sizing:border-box;} .section-cert .comment-box .tit {font-family:'OneShinhanM';color:#212121} .section-cert .comment-box .tit + .cont {margin-top:1.0rem;} .section-cert .comment-box .txt-bul3 {margin-top:0.5rem;font-size:1.2rem;} .mb .section-cert .comment-box {min-height:calc(100vh - 31rem);margin:2.0rem -2.4rem -6.3rem;padding:2.4rem;background:#f7f9fa;} .mb .section-cert {padding-bottom:0 !important;} .mb .section-cert .wrap-area1 .bottom {position:fixed;left:0;right:0;bottom:0;background:none;padding:0;margin:0;} .mb .section-cert .wrap-area1 .bottom .btn-action {width:100%;border-radius:0;} /*-------------------------------------------------------------------------------- # PAGE : 기타 / 인증센터 : 모바일전용 ---------------------------------------------------------------------------------*/ /* 로그인형 간략폼(공통) : 화면세로중앙정렬 */ .wrap-area1.form {text-align:center;} .wrap-area1.form .headline {font-size:2.4rem;line-height:3.0rem;margin:0 0 4.0rem;color:#212121;} .wrap-area1.form .headline.img1:after, .wrap-area1.form .headline.img2:before {content:'';display:block;width:6.4rem;height:6.4rem;background:url(../img/com/icon_set2.png) no-repeat -24.0rem -8.0rem;background-size:40.0rem 40.0rem;} .wrap-area1.form .headline.img1:after {margin:4.5rem auto 0;} .wrap-area1.form .headline.img2 {margin:0 0 1.0rem;} .wrap-area1.form .headline.img2:before {margin:0 auto 1.0rem;} .wrap-area1.form p.headline {font-size:1.6rem;line-height:2.2rem;margin:0 0 1.0rem;} .mb .wrap-area1.form {width:100%;min-height:calc(100vh - 16.0rem);} .mb .wrap-area1.form > div:first-child {position:absolute;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);} .mb .wrap-area1.form.wide .tbl-form {padding-top:0;} .mb .page-login .wrap-area1.form {display:table;} .mb .page-login .wrap-area1.form > div:first-child {position:static;display:table-cell;vertical-align:middle;-webkit-transform:none;transform:none;} /* 공인인증서등록완료 : 배경설정 : 인증수단선택영역 */ .mes-t1.visual1:before {background:url(../img/com/icon_set2.png) -32.0rem -8.0rem;background-size:40.0rem 40.0rem;} /* 자동로그아웃 : 시간카운트 */ .info-time {text-align:center;padding:0.6rem 0;} .info-time > dt {display:inline-block;font-family:'OneShinhanM';font-size:1.4rem;line-height:1.5rem;color:#61667a;} .info-time > dt:before {content:'';display:inline-block;margin:0 0.4rem -0.2rem 0;width:1.5rem;height:1.5rem;background:url(../img/com/icon_set1.png) -4.0rem -12.0rem no-repeat;background-size:40.0rem 40.0rem;} .info-time > dd {margin:0.5rem 0 0;font-size:4.0rem;line-height:4.2rem;color:#0082d0;} .info-time + .mes-box1 {margin-top:2.0rem;background:#f7f9fa;} .mb .pop-modal1 > .content > .info-time + .mes-box1 {margin:2.8rem 0 1.0rem;} /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > 회사개요 ---------------------------------------------------------------------------------*/ .page-co01 .mes-headline1.visual > strong:after {background-image:url(../img/content/co01.png);} .mb .page-co01 .mes-headline1.visual > strong:after {background-image:url(../img/content/co01_m.png);} .pc .page-co01 .wrap-area5 {min-height:15.0rem;padding-top:0;} .pc .page-co01 .wrap-area5:before {top:14.0rem;} /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > 주요연혁 ---------------------------------------------------------------------------------*/ .list-con1.list-timeline > div > .heading {font-size:2.4rem;line-height:3.2rem;} .pc .list-con1.list-timeline > div > .heading {padding:0 16.0rem 0 0;} .pc .list-con1.list-timeline > div {min-height:12.4rem;} .list-timeline > div > ul {margin:-1.0rem 0;} .list-timeline ul > li {position:relative;padding:1.6rem 0.8rem;border-top:0.1rem solid #d7d9dd;} .list-timeline ul > li:first-child {border-top:none;} .list-timeline ul > li strong {font-weight:normal;text-align:right;vertical-align:top;} .list-timeline ul > li > ul {display:inline-block;width:calc(100% - 4.5rem);} .list-timeline ul > li > ul > li {padding:0 0 0 4.8rem;border:none;} .list-timeline ul > li > ul > li + li {margin-top:1.0rem;} .list-timeline ul > li > ul > li span {position:absolute;top:0;left:0;} .list-timeline ul > li > ul > li li {padding:0;} .mb .list-timeline > div {padding:3.0rem 2.4rem 1.5rem;} .mb .list-timeline > div > ul {margin:0;} .mb .list-timeline > div > ul > li {padding:1.6rem 0;} /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > CEO인사말 ---------------------------------------------------------------------------------*/ .page-ceo .mes-headline1:before {content:'';display:block;margin:0 auto;width:50.4rem;height:20.9rem;box-sizing:border-box;border:0.5rem solid #0082d0;-webkit-border-image:linear-gradient(to bottom,#0082d0 0%,#3166c3 100%);border-image:linear-gradient(to bottom,#0082d0 0%,#3166c3 100%);border-image-slice:1;} .page-ceo .mes-headline1 strong {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;padding:1.0rem 0 1.8rem;line-height:1.6;background:#fff;} .page-ceo .mes-headline1 + p {width:calc(63.5% - 4.5rem);} .page-ceo .wrap-area5 p > strong {display:block;margin:0 0 0.8rem;font-size:1.6rem;font-family:'OneShinhanM';font-weight:normal;} .page-ceo .wrap-area5 p + p {margin:2.7rem 0 0;} .page-ceo .wrap-area5 p + p:nth-child(4) {margin:1.8rem 0 0;} .page-ceo .wrap-area5 p + p:last-child {margin-top:4.0rem;font-size:2.0rem;} .page-ceo .wrap-area5 p + p:last-child span {margin-left:2.4rem;font-family:'OneShinhanM';} /*.page-ceo .wrap-area5 .txt-num {margin-top:-8.0rem;padding:3.5rem 0;background:#0096d6;} .page-ceo .txt-num > li {position:relative;margin:0;padding:2.0rem 3.5rem 1.9rem 8.8rem;font-family:'OneShinhanM';font-size:1.6rem;line-height:2.6rem;color:#fff;} .page-ceo .txt-num > li:before {content: "0"counter(num);width:5.6rem;margin: 0 0 0 -5.6rem;color:rgba(255,255,255,0.6);} .page-ceo .txt-num > li + li:after {content:'';display:block;position:absolute;right:0;top:0;width:calc(100% - 8.8rem);height:0.1rem;background:rgba(255,255,255,0.1);}*/ .pc .page-ceo .mes-headline1 {margin:6.0rem 0 5.6rem;} .pc .page-ceo .mes-headline1 strong {width:68.0rem;} .pc .page-ceo .wrap-area5 {margin-top:4.0rem;} /*.pc .page-ceo .wrap-area5:after {content:'';display:block;position:absolute;top:-12.3rem;right:-1.2rem;width:34.0rem;height:48.0rem;background:url(../img/content/visual_ceo.png) no-repeat;box-shadow:-15px 15px 0 rgba(97,102,122,0.2);}*/ .pc .page-ceo .wrap-area5:after {content:'';display:block;position:absolute;top:-12.3rem;right:1rem;width:34.0rem;height:48.0rem;background:url(../img/content/visual_ceo.png) no-repeat;} .mb .page-ceo .mes-headline1:before {width:64.1%;height:20.0rem;} .mb .page-ceo .mes-headline1 strong {padding:2.0rem;font-size:2.0rem;} .mb .page-ceo .mes-headline1 + p {width:100%;padding-top:0;} .mb .page-ceo .wrap-area5 {display:flex;flex-direction:column-reverse;margin-top:0 !important;} .mb .page-ceo .wrap-area5 .area:last-of-type {margin:3.0rem -2.4rem;width:calc(100% + 4.8rem);} .mb .page-ceo .wrap-area5 .area:last-of-type {margin:3.0rem 0;width:100%;text-align: center;} .mb .page-ceo .wrap-area5.mblock:before {top:2.9rem;} /*.mb .page-ceo .txt-num {margin-top:0;padding:0 0 0.5rem;} .mb .page-ceo .txt-num > li {padding:2.0rem 3.2rem 1.6rem 8.8rem;} .mb .page-ceo .mes-headline1 ~ p:last-child {font-size:1.6rem;}*/ /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > 비전 ---------------------------------------------------------------------------------*/ .vision-info1 {position:relative;} .vision-info1 > li {position:relative;margin:0 auto;font-size:2.0rem;line-height:3.2rem;color:#0082d0;text-align:center;} /* .vision-info1 > li:not(:last-child) {margin:0 auto;font-size:2.0rem;line-height:3.2rem;color:#0082d0;} .vision-info1 > li:nth-child(1) {width:32.0rem;padding:2.2rem 0;border-radius:7.0rem;border:1px solid #0082d0;} */ .vision-info1 > li:nth-child(1) {width:50rem;padding:2.2rem 0;border-radius:7.0rem;border:1px solid #0082d0;} /* .vision-info1 > li:nth-child(1) ~ li:not(:last-child) {width:36.0rem;padding:3.2rem 0;border-radius:5.0rem;border:1px solid #0082d0;background:#0082d0;color:#fff;} */ .vision-info1 > li:nth-child(1) ~ li {width:50.0rem;padding:3.2rem 0;border-radius:5.0rem;border:1px solid #0082d0;background:#0082d0;color:#fff;} .vision-info1 > li:not(:first-child) {margin-top:15.2rem;padding:1.6rem 0 !important;} /* .vision-info1 > li:nth-child(2) {padding:1.6rem 0 !important;} */ .vision-info1 > li:not(:first-child):before, .vision-info1 > li:not(:first-child):after {content:'';position:absolute;left:50%;} .vision-info1 > li:not(:first-child):before {top:-15.2rem;height:8.6rem;border-left:1px dotted #0082d0;} .vision-info1 > li:not(:first-child):after {top:-12.2rem;transform:translateX(-50%);width:2.3rem;height:2.3rem;border-radius:50%;background:#0082d0;z-index:-1;} .vision-info1 > li + li strong {position:absolute;top:-4.9rem;left:50%;transform:translateX(-50%);} .vision-info1 > li + li strong:before, .vision-info1 > li + li strong:after {content:'';position: absolute;top: -6.5rem;width: 0.1rem;height: 0.6rem;background:#fff;} .vision-info1 > li + li strong:before {left: calc(50% - 0.2rem);transform: rotate(45deg);} .vision-info1 > li + li strong:after {right: calc(50% - 0.3rem);transform: rotate(-45deg);} .vision-info1 > li span {display:block;width:100%;} .vision-info1 > li strong, .vision-info1 > li span b {display:block;font-family:'OneShinhanM';font-weight:normal;} .vision-info1 > li strong {font-size:2.0rem;color:#212121;} .vision-info1 > li > ul {overflow:hidden;padding-left:3rem;} .vision-info1 > li > ul > li {position:relative;display:block;float:left;width:30%;padding:1.6rem 1rem;border-radius:5.6rem 5.6rem;background:rgba(0,130,208,0.1);font-size:1.6rem;line-height:2.2rem;color:#212121;} .vision-info1 > li > ul > li:nth-child(2) {margin:0 0 0 -8%;} .vision-info1 > li > ul > li:nth-child(3) {margin:0 -8%;} .vision-info1 > li > ul > li em {display:block;font-family:'OneShinhanM';color:#0082d0;margin-bottom:1.0rem;} .pc .vision-info1 {margin:6.0rem 0 11rem;} .pc .section .wrap-area5.vision-info2 {padding-top:5.6rem;} .mb .vision-info1 {margin:0.8rem 0 6rem;} .mb .vision-info1 > li {padding:0.9rem 0;width:100%;font-size:1.8rem;line-height:1.4;} .mb .vision-info1 > li:not(:first-child) {margin-top:9.2rem;} .mb .vision-info1 > li:not(:first-child):before {height:5.0rem;top:-9.2rem;} .mb .vision-info1 > li:not(:first-child):after {width:2.0rem;height:2.0rem;top:-7.6rem;} .mb .vision-info1 > li:nth-child(1) ~ li {width:100%;padding:2.3rem 0;} .mb .vision-info1 > li:nth-child(2),.mb .vision-info1 > li:nth-child(3) {padding:1.0rem 0 !important;} .mb .vision-info1 > li + li strong {top:-3.5rem;font-size:1.8rem;} .mb .vision-info1 > li + li strong:before, .mb .vision-info1 > li + li strong:after {top:-3.3rem;} .mb .vision-info1 > li > ul {padding-left:0;} .mb .vision-info1 > li > ul > li {display:block;width:100%;padding:0.9rem 0;} .mb .vision-info1 > li > ul > li + li {margin:1.2rem 0 0 0;} .mb .vision-info1 > li > ul > li br {display:none;} .mb .vision-info1 > li > ul > li em {margin-bottom:0.2rem;} .mb .vision-info2 {width:calc(100% + 4.8rem);padding:2.8rem 2.4rem 8.0rem;margin:0 0 -8.5rem -2.4rem;background:#f7f9fa;} .mb .vision-info2 .tit-sub1:before, .vision-info2 .tit-sub1:after {display:none;} .mb .vision-info2 .tit-sub1 + .list-con3 {margin-top:2.0rem;} .vision-info3{position:relative;} .vision-info3:before{content: ''; position:absolute;top:24.8rem; left:50%; margin-left:-40.8rem; width: 0; height: 0; border-bottom:25.8rem solid #333;border-left:40.8rem solid transparent;border-right:40.8rem solid transparent; opacity:0.1; z-index: 0} .vision-info3:after{content: ''; position:absolute;top:24.8rem; left:50%; margin-left:-45rem; width: 90rem; height: 25.8rem; background: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); z-index: 0} .vision-info3 > li {position:relative;text-align:center;} .vision-info3 > li:not(:last-child) {margin:0 auto;font-size:2.0rem;line-height:3.2rem;color:#0082d0;} .pc .vision-info3 > li:nth-child(2) .mes-headline1{margin:1.5rem 0;} /*.pc .vision-info3 > li:nth-child(2) .mes-headline1 > strong{line-height: 7.4rem; font-size: 6rem; font-family: 'OneShinhanL' !important}*/ .vision-info3 > li:nth-child(1) ~ li:not(:last-child) {padding:3.2rem 0;} .vision-info3 > li:nth-child(2) {padding:3rem 0 !important; background-color: #fff; margin-top:10rem;} .vision-info3 > li:nth-child(3) {margin-top:6rem; z-index: 1} .vision-info3 > li:not(:first-child):after {top:-12.2rem;transform:translateX(-50%);width:2.3rem;height:2.3rem;border-radius:50%;background:#0082d0;z-index:-1;} .vision-info3 > li:first-child > strong {display: block; padding: 1rem 2rem; position:absolute;top:-2.8rem;left:50%;transform:translateX(-50%);background-color: #fff; z-index: 1} /* .vision-info3 > li + li > strong {display: block; padding: 1rem 2rem; position:absolute;top:-1rem;left:50%;transform:translateX(-50%);background-color: #fff; font-family: 'OneShinhanL' !important; color: #999;} */ .vision-info3 > li + li > strong {display: block;} .vision-info3 > li + li strong:before, .vision-info1 > li + li strong:after {content:'';position: absolute;top: -6.5rem;width: 0.1rem;height: 0.6rem;background:#fff;} /*.vision-info3 > li + li strong:before {left: calc(50% - 0.2rem);transform: rotate(45deg);} .vision-info3 > li + li strong:after {right: calc(50% - 0.3rem);transform: rotate(-45deg);}*/ .vision-info3 > li span {display:block;width:100%;} .vision-info3 > li strong, .vision-info1 > li span b {display:block;font-family:'OneShinhanM';font-weight:normal;} .vision-info3 > li strong {font-size:2.0rem;color:#212121;} .vision-info3 > li > .drs{display: flex; margin:-10px;} .vision-info3 > li > .drs .drs_item{border-radius: 7.0rem; border: 1px solid #0082d0; overflow: hidden; margin:10px; background-color: #fff; flex:1} .vision-info3 > li > .drs .drs_item > strong{display: block; text-align: center; background-color:#0082d0; padding:1.2rem; font-size:2rem; color: #fff; line-height: 2.4rem} .vision-info3 > li > .drs .drs_item > strong > span{display: block; font-weight: normal; font-size:1.6rem;} .vision-info3 > li > .drs .drs_item > ul {display: flex; padding:1rem 2rem; flex-wrap:wrap; justify-content: space-between; flex-direction: column; } .vision-info3 > li > .drs .drs_item > ul > li {position:relative;display:block;margin:1rem 0; padding:1.6rem 2rem;text-align:left; border-radius:5.6rem 5.6rem; font-size:1.6rem;line-height:2.2rem;color:#212121; border:1px solid #a0d0ed;} .vision-info3 > li > .drs .drs_item > ul > li em {display:block;text-align:center; font-family:'OneShinhanB';color:#0082d0;margin-bottom:1.0rem; font-size:2rem; line-height: 2.8rem;} .vision-info3 > li > .drs .drs_item > ul > li > ul > li{display: block; padding-left:10px; position: relative; margin: 0.4rem; color:#212121} .vision-info3 > li > .drs .drs_item > ul > li > ul > li::before{content:''; display: block; position: absolute; top:1rem;left:0; width: 2px; height: 2px; background-color: #212121; border-radius:2px;} .vision-info3:before{display: none;} .vision-info3:after{display: none;} .vision-info3 .mes-headline1{margin:3rem 0;} .vision-info3 > li:first-child{position: relative; height: 12rem;} .vision-info3 > li:first-child .mes-headline1{position: relative;} .vision-info3 > li:first-child .mes-headline1:before{content: ''; position:absolute; display: block; width: 60rem; left:50%; margin-left:-30rem; height: 12rem; box-sizing: border-box; border: 0.5rem solid #0082d0; -webkit-border-image: linear-gradient(to bottom,#0082d0 0%,#3166c3 100%); border-image: linear-gradient(to bottom,#0082d0 0%,#3166c3 100%); border-image-slice: 1;} .vision-info3 > li:first-child .mes-headline1:after{content: ''; position:absolute; top:0; display: block; width: 54rem; left:50%; margin-left:-27rem; height: 12rem; box-sizing: border-box; background-color: #ffff; z-index: 0;} .vision-info3 > li:first-child p strong{display:block; position: absolute; top:2rem; z-index: 1; width: 54rem; left:50%; margin-left:-27rem;} .vision-info3 > li:first-child p span{display:block; position: absolute; top:6.5rem; z-index: 1; width: 54rem; left:50%; margin-left:-27rem; font-size:1.6rem;} .pc .vision-info3 {margin:6.0rem 0 0;} .mb .vision-info3 {margin:0.8rem 0 3.2rem;} .mb .vision-info3 > li:not(:last-child) {width:100%;font-size:1.8rem;line-height:1.4;padding:0.9rem 0;} .mb .vision-info3 > li:not(:first-child) {margin-top:9.2rem;} .mb .vision-info3 > li:not(:first-child):before {height:5.0rem;top:-9.2rem;} .mb .vision-info3 > li:not(:first-child):after {width:2.0rem;height:2.0rem;top:-7.6rem;} .mb .vision-info3 > li:nth-child(1) ~ li:not(:last-child) {width:100%;padding:2.3rem 0; z-index: 1} .mb .vision-info3 > li:nth-child(2) {padding:1.0rem 0 !important;} .mb .vision-info3 > li + li strong {top:-1rem;font-size:1.8rem;} .mb .vision-info3 > li:nth-child(2) .mes-headline1 > strong{font-size: 3rem; line-height: 4.2rem;} .mb .vision-info3 > li + li strong:before, .mb .vision-info3 > li + li strong:after {top:-3.3rem;} .mb .vision-info3 > li > ul {padding-left:0;} .mb .vision-info3 > li > ul > li {display:block;width:100%;padding:0.9rem 0;} .mb .vision-info3 > li > ul > li + li {margin:1.2rem 0 0 0;} .mb .vision-info3 > li > ul > li br {display:none;} .mb .vision-info3 > li > ul > li em {margin-bottom:0.2rem;} .mb .vision-info3 {width:calc(100% + 4.8rem);padding:2.8rem 2.4rem 8.0rem;margin:0 0 -8.5rem -2.4rem;} .mb .vision-info3 > li:first-child > strong{top:0;} .mb .vision-info3 > li:first-child p strong{width: 30rem; margin-left:-15rem;} .mb .vision-info3 > li:first-child p span{width: 30rem; margin-left:-15rem;} .mb .vision-info3:before{top:27.6rem; left:50%; margin-left:-10rem; border-bottom:20rem solid #333;border-left:10rem solid transparent;border-right:10rem solid transparent;} .mb .vision-info3:after{top:27.6rem; left:50%; margin-left:-15rem; width: 30rem; height: 20rem; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 0} .mb .vision-info3 > li:first-child .mes-headline1:before{ top:0; width: 32rem; left:50%; margin-left:-16rem; } .mb .vision-info3 > li:first-child .mes-headline1:after{ top:0; width: 30rem; left:50%; margin-left:-15rem; background-color: #fff; z-index: 0;} .mb .vision-info3 > li:first-child p span{width: 28rem; margin-left: -14rem;} .mb .vision-info3 > li:nth-child(2){ margin-top:12rem;} .mb .vision-info3 > li:nth-child(3){margin-top:3rem;} .mb .vision-info3 > li > .drs{flex-direction: column;} .mb .vision-info3 > li > .drs > .drs_item{border-radius:3rem;} .mb .vision-info3 > li > .drs .drs_item > ul{padding:0.5rem;} .mb .vision-info3 > li > .drs .drs_item > ul > li{margin:0.5rem; padding:1rem; border-radius:2rem;} /* 2024704 김선영 */ .vision-info1:before, .vision-info1:after {content:'';position:absolute;left:50%;} .vision-info1:before {bottom: -8.6rem;height:8.6rem;border-left:1px dotted #0082d0;} .vision-info1:after {bottom:-5.2rem;transform:translateX(-50%);width:2.3rem;height:2.3rem;border-radius:50%;background:#0082d0;z-index:-1;} [class^="vision-info"] li i {display:block;margin-top: .4rem;font-size:1.4rem;line-height:1.3;} .vision-info1 > li + li:last-child span:before, .vision-info1 > li + li:last-child span:after {content:'';position: absolute;bottom: -4.4rem;width: 0.1rem;height: 0.6rem;background:#fff;} .vision-info1 > li + li:last-child span:before {left: calc(50% - 0.2rem);transform: rotate(45deg);} .vision-info1 > li + li:last-child span:after {right: calc(50% - 0.3rem);transform: rotate(-45deg);} .pc [class^="vision-info"] + .wrap-area5 .list-con3{display:flex;justify-content: center;} .pc [class^="vision-info"] + .wrap-area5 .list-con3 ul {width:80%;justify-content: center;} .pc [class^="vision-info"] + .wrap-area5 .list-con3 ul > li {float:none;display:flex;flex:1;flex-direction: column; justify-content:flex-start;margin-top:0;text-align: center;z-index:1} [class^="vision-info"] + .wrap-area5 .list-con3 > ul > li .tit {font-size:1.6rem;} .pc [class^="vision-info"] + .wrap-area5 .list-con3 em {display:block;margin:2rem 0 0;font-family: 'OneShinhanM';font-size:2rem;} .mb [class^="vision-info"] + .wrap-area5 .list-con3 em {margin:0 0 .5rem;font-size:2rem;font-family: 'OneShinhanM';color: #525252;} .mb .vision-info1:before {bottom: -5rem;height:5rem;} .mb .vision-info1:after {bottom: -3.4rem;width: 2.0rem;height: 2.0rem;} .mb .vision-info1 > li + li:last-child span:before, .mb .vision-info1 > li + li:last-child span:after {bottom:-2.8rem;} .mb [class^="vision-info"] + .wrap-area5 .list-con3 ul > li {text-align:center;} /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > 그룹가치경영체계 ---------------------------------------------------------------------------------*/ .tit-visual1 {position:relative;text-align:center;margin:0 0 3.0rem;padding:61.0rem 0 0;height:0;overflow:hidden;background:url(../img/content/co05_T2.png) no-repeat 50% 0;background-size:auto 100%;} .tit-visual1 h3 {position:absolute;left:0;right:0;top:50%;font-size:2.4rem;line-height:3.8rem;font-family:'OneShinhanM';color:#0082d0;margin:-3.8rem 0 0;} .group_val{margin-top:3rem} .group_val .val_img_pc{display: inline-block;} .group_val .val_img_mo{display: none;} .group_val ul li{border-top: 0.1rem solid #d7d9dd; position: relative;} .group_val ul li:first-child{border-top:none;} .group_val .sub_tit{display: block; position:absolute; color: #fff; border-radius:0.2rem; padding:1rem; width:6.4rem; height:6.4rem; text-align:center; font-family:'OneShinhanM'; top: 3rem;} .group_val .mission .sub_tit{background-color: #fba131} .group_val .value .sub_tit{background-color: #2bb01f} .group_val .vision .sub_tit{background-color: #0191d8} .esg_frm{margin-top:3rem; display: inline-block;} .esg_frm_mo{display: none;} .add_tit-sub1{padding: 0; font-size: 2.4rem; line-height: 3.2rem;} .add_sub_tit{margin-top:1rem; font-size:1.6rem;} .slogan_box{text-align: center; border: 0.1rem solid #d7d9dd; padding:3rem; margin-top: 3rem;} .vision_box{margin:3rem 0; padding: 0 1rem;} .vision_box ul{display: flex; flex-direction:column;} .vision_box ul > li{margin-top:1.6rem; border-radius:20rem; background-color: #e5f2fa; display: flex; padding:1rem;} .vision_box ul > li:first-child{margin-top:0} .vision_box ul > li > p{border-radius:20rem; background-color: #a0d0ed; color:#fff; display: flex; flex-direction:column; text-align: center; padding:1.5rem; font-size: 1.6rem;line-height: 1.8rem; min-width: 9rem;} .vision_box ul > li > p > strong{font-family:'OneShinhanM'; font-size: 2rem;line-height: 2.2rem; font-weight: normal;} .vision_box ul > li > div{margin-left: 1rem;} .vision_box ul > li > div > .inn_tit{font-family:'OneShinhanM'; color:#0082d0; font-size: 2.2rem;} .vision_history{margin-top:3rem; padding-top: 3rem; border-top: 0.1rem solid #d7d9dd;} .vision_history > ul{display: flex; justify-content: space-between;} .vision_history > ul > li{flex:1; display: flex; flex-direction:column; align-items: center;} .vision_history > ul > li.clamp{flex: 0.4; position: relative;} .vision_history > ul > li.clamp:before{content: ''; position: absolute; width: 2rem; height: 3rem; top:4rem; left: calc(50% - 1rem); background-image:url(../img/content/clamp_r.png); background-size:2rem 3rem;} .vision_history > ul > li > p{border-radius:20rem; background-color: #0082d0; color:#fff; display: flex; flex-direction:column; text-align: center; padding:1.5rem; font-size: 1.6rem;line-height: 1.8rem; min-width: 9rem;width: 11rem; height: 11rem; align-items: center; justify-content: center;} .vision_history > ul > li > span{text-align: center; color:#0082d0; font-size:1.3rem; padding: 0.5rem 0 0;} .vision_history > ul > li > ul > li{position:relative; margin-top:0.5rem; padding-left: 0.5rem; line-height: 1.8rem; font-size:1.2rem;} .vision_history > ul > li > ul > li:before{content: '';position:absolute; width: 0.2rem; height: 0.2rem; background-color: #0082d0; border-radius:0.2rem; top:0.8rem; left:0rem;} .mb .tit-visual1 {margin:0;padding:31.2rem 0 0;background-image:url(../img/content/co05_T2_m.png);} .mb .tit-visual1 h3 {font-size:1.4rem;line-height:2.2rem;margin:-2.2rem 0 0;} .mb .group_val .sub_tit{position: relative; width: auto; height: auto; top:0; margin-top:1rem;} .mb .group_val .sub_tit br{display: none;} .mb .group_val .val_img_pc{display: none;} .mb .group_val .val_img_mo{display: inline-block;} .mb .esg_frm{display: none;} .mb .esg_frm_mo{display: inline-block;} .mb .slogan_box{padding:3rem 0rem; margin-top: 3rem;} .mb .vision_box{padding:0;} .mb .vision_box ul > li{flex-direction:column; border-radius:3rem;} .mb .vision_box ul > li > p{display: block;} .mb .vision_box ul > li > div{margin:1rem;} .mb .vision_box ul > li > div span br{display: none;} .mb .vision_history > ul{flex-direction:column;} .mb .vision_history > ul > li > p{width: 100%; height: auto; display: block;} .mb .vision_history > ul > li > p > br{display: none;} .mb .vision_history > ul > li.clamp{padding:2rem;} .mb .vision_history > ul > li.clamp:before{transform: rotate(90deg); top: 0.5rem; left: calc(50% - 1.5rem);} @media only screen and (max-width:359px){ .mb .tit-visual1 {padding:100% 0 0;} } /* 180621 추가 */ .info-bank {background:#fff;} .info-bank .slogan {display:block;height:15.2rem;text-indent:-9999px;background:url(../img/content/co_slogan.png) 50% 50% no-repeat;} .wrap-area5.t1 .tit-sub1 {text-align:left;} .wrap-area5 .info-bank {margin:1.5rem 0;} .wrap-area5 .info-bank ul {text-align:center;} .wrap-area5 .info-bank li {display:inline-block;position:relative;padding:4.0rem 4.0rem 4.0rem 17.0rem;width:39.0rem;height:14.4rem;background:#e5f2fa;border-radius:7.2rem;} .wrap-area5 .info-bank li strong {display:block;position:absolute;top:0;left:0;width:14.4rem;color:#fff;font-size:2.0rem;line-height:14.4rem;background:#a0d0ed;border-radius:7.2rem;} .wrap-area5 .info-bank li dl {margin:0.5rem 0 0;} .wrap-area5 .info-bank li dt, .wrap-area5 .info-bank li dd {font-size:1.6rem;text-align:left;} .wrap-area5 .info-bank li dt {font-family:'OneShinhanM';font-size:2.0rem;color:#0082d0;} .wrap-area5 .info-bank li + li {margin:0 0 0 11.2rem;} .wrap-area5 .info-bank li + li:before {content:'';display:block;position:absolute;top:0;left:-11.5rem;width:11.5rem;height:14.4rem;background:url(../img/content/info_bank_line.png) 50% 50% no-repeat;} .pc .section .wrap-area5.t1 {margin:6.0rem 0 -10.0rem;padding:5.4rem 0 6.0rem;} .pc .wrap-area5.t1 dl.tit-sub2 > dt {margin:3.0rem 0 1.0rem;font-size:1.6rem;line-height:1.8rem;} .pc .wrap-area5 .info-bank li:last-child {padding:4.0rem 17.0rem 4.0rem 4.0rem;} .pc .wrap-area5 .info-bank li:last-child strong {left:auto;right:0;} .mb .mes-headline1.t1 > strong {font-size:2.6rem;line-height:3.4rem;} .mb .info-bank .slogan {height:13.2rem;background:url(../img/content/co_slogan_m.png) 50% 50% no-repeat;background-size:31.0rem;} .mb .section .wrap-area5.t1.mblock:before {top:-2.7rem;} .mb .wrap-area5.t1 .tit-sub1 {margin:5.9rem 0 1.5rem;} .mb .wrap-area5.t1 .tit-sub1:before {display:none;} .mb .wrap-area5 .info-bank {margin:2.5rem 0;padding:3.0rem 2.5rem;} .mb .wrap-area5 .info-bank li {padding:2.0rem 2.0rem 2.0rem 10.4rem;width:100%;height:9.0rem;border-radius:4.5rem;} .mb .wrap-area5 .info-bank li strong {width:9.0rem;height:9.0rem;font-size:1.8rem;line-height:9.0rem;border-radius:4.5rem;} .mb .wrap-area5 .info-bank li dt, .mb .wrap-area5 .info-bank li dd {font-size:1.4rem;} .mb .wrap-area5 .info-bank li + li {margin:7.5rem 0 0 0;} .mb .wrap-area5 .info-bank li + li:before {top:-7.2rem;left:0;width:100%;height:7.5rem;background:url(../img/content/info_bank_line_m.png) 50% 50% no-repeat;background-size:2.0rem;} /* 180621 추가 끝 */ /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > 조직도 ---------------------------------------------------------------------------------*/ /* [2020.01.04 김선영 SRID : 20210104-006] 2021년 1월 조직개편에 따른 조직도 변경, [2020.05.24 김선영 SRID : 20210517-009,20210524-002] 회사소개/IR 변경 */ /*** 조직도 CO06000000 ***/ .info-treemap1 {position:relative;min-height:85.0rem;} .info-treemap1:before {content:'';display:block;position:absolute;top:0;left:50%;width:0.1rem;height:35.3rem;background:#b0b3bc;z-index:-1;} .ie .info-treemap1:before {width:0.2rem;} .info-treemap1 li {display:block;position:relative;vertical-align:top;} .info-treemap1 > li {margin:0 0.5rem 0;height:4.8rem;} .info-treemap1 > li:nth-child(2) {margin-top:2.0rem;} .info-treemap1 > li:nth-child(3) {position:absolute;left:50%;top:6.8rem;margin-top:0;padding-left:14rem;} .info-treemap1 > li:last-child {text-align:center;} .info-treemap1 > li > span {display:block;margin: 0 auto;width:17.6rem;height:4.8rem;line-height:4.7rem;text-align:center;color:#fff;background:#4f525e;} .info-treemap1 > li > span.ceo {margin-top:9.4rem;background:#112369;} .info-treemap1 > li > span.ceo + .group2 {margin:2.5rem 0 0 13.5rem;} .info-treemap1 > li > span.ceo + .group2 span {position:relative;margin-top:0;} .info-treemap1 > li > span.ceo + .group2 span:after {content:'';display:block;position:absolute;top:50%;left:0;width:40rem;height:0.1rem;background:#b0b3bc;z-index:-1;} .ie .info-treemap1 > li > span.ceo + .group2 span:after {width:40.5rem;} /* group1, group2 */ .info-treemap1 .group1:before,.info-treemap1 .group1:after, .info-treemap1 .group1 li > span:after {content:'';display:block;position:absolute;background:#b0b3bc;z-index:-1;} .info-treemap1 .group1:before {left:11rem;top:2rem;width:0.1rem;height:15rem;} .info-treemap1 .group1:after {left:-0.5rem;top:9.5rem;width:11.5rem;height:.1rem;} .info-treemap1 .group1 li > span:after {left:-3rem;top:50%;width:3rem;height:0.1rem;} .info-treemap1 .group1 li + li {margin:1.0rem 0 0;} .info-treemap1 .group1 > li span {display:inline-block;width:20.2rem;height:4.0rem;background:#606783;color:#fff;line-height:4.0rem;text-align:center;} .info-treemap1 .group1 .group2 {display:inline-block;margin-left:5.5rem;} .info-treemap1 .group1 .group2 .subdep li span {display:block;width:12.5rem;height:2.4rem;font-size:1.3rem;line-height:2.4rem;color:#0082d0;background:#e5f4fb;border:1px solid #99d8f7;} .info-treemap1 .group1 .group2 .subdep li span:after {content:'';display:block;position:absolute;top:50%;left:-6rem;width:6rem;height:0.1rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group2 > li:first-child > span {margin-top:1rem;} .info-treemap1 .group2 > li > span {display:block;width:20.2rem;height:4.0rem;background:#7d86a7;color:#fff;line-height:4.0rem;text-align:center;} /* group3 */ .info-treemap1 .group3 {display:inline-block;position:relative;margin:6rem 0 0;text-align:center;} .info-treemap1 .group3:before {content:'';display:block;position:absolute;top:-3rem;left:1.9rem;width:calc(100% - 8rem);height:0.1rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3:after {content:'';display:block;clear:both;} .info-treemap1 .group3 > li {display:inline-block;float:left;margin-right:0.6rem;} .info-treemap1 .group3 > li:first-child {position:absolute;left:0;top:-4.2rem;} .info-treemap1 .group3 > li .subgroup1 {} .info-treemap1 .group3 > li .subgroup1 > li > span:before {content:'';display:block;position:absolute;top:-3rem;left:50%;width:0.1rem;height:8.6rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3 > li .subgroup1 > li > span {margin:0 auto;} .info-treemap1 .group3 span + ul li:first-child > span {margin-top:1rem;} .info-treemap1 .group3 > li:nth-child(2) .subgroup1 > li > .subdep, .info-treemap1 .group3 > li:nth-child(3) .subgroup1 > li > .subdep {position:absolute;left:0;top:0;} .info-treemap1 .group3 > li:nth-child(3) .subgroup1 > li > .subdep {left:-13.4rem;} .info-treemap1 .group3 > li:nth-child(2) .subgroup1 > li > .subdep span:after, .info-treemap1 .group3 > li:nth-child(3) .subgroup1 > li > .subdep span:after {content:'';display:block;position:absolute;right:-8rem;top:50%;width:8rem;height:0.1rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3 > li:nth-child(3), .info-treemap1 .group3 > li:nth-child(4) {margin-right:1.2rem} .info-treemap1 .group3 > li:nth-child(4) .subgroup2 {margin-top:7rem} .info-treemap1 .group3 > li:nth-child(4) .subgroup2 > li > span {margin:0;} .info-treemap1 .group3 > li:nth-child(4) .subgroup2:after {display:none;} .info-treemap1 .group3 > li:nth-child(5) {float:none;position:absolute;right:13.6rem;top:24.9rem;margin-right:0;} .info-treemap1 .group3 > li:nth-child(5) .subgroup1 > li > span:before {left:-0.6rem;top:-27.8rem;height:29.9rem;} .info-treemap1 .group3 > li:nth-child(5) .subgroup1 > li > span:after {content:'';display:block;position:absolute;left:-0.6rem;top:2rem;width: 1rem;height: 0.1rem;background:#b0b3bc;z-index: -1;} .info-treemap1 .group3 > li:nth-child(5) .subgroup1 > li > .subdep {margin-top:1.6rem;} .info-treemap1 .group3 > li:nth-child(7) {margin-right:0;} .info-treemap1 .group3 > li:nth-child(7) .subgroup2 {float:none;margin-top:7rem;padding:0;} .info-treemap1 .group3 > li:nth-child(6), .info-treemap1 .group3 > li:nth-child(8), .info-treemap1 .group3 > li:nth-child(9) {position:absolute;right:0;margin-right:0;} .info-treemap1 .group3 > li:nth-child(6) {top:30.5rem;} .info-treemap1 .group3 > li:nth-child(8) {top:36.3rem;} .info-treemap1 .group3 > li:nth-child(9) {top:42.1rem;} .info-treemap1 .group3 > li .subgroup1 .subgroup2 {display:inline-block;float:left;position:relative;padding-right:.5rem;vertical-align:top; } .info-treemap1 .group3 > li .subgroup1 .subgroup2:last-child {padding-right:0;} .info-treemap1 .group3 > li .subgroup1 .subgroup2:after {content:'';display:block;position:absolute;left:0;top:1.5rem;width:100%;height:0.1rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3 > li .subgroup1 .subdep + .subgroup2::after {left:auto;right:0;width:calc(50% + 0.2rem);width:-webkit-calc(50% + 0.2rem);} .info-treemap1 .group3 > li .subgroup1 .subgroup2:last-child::after {width:50%;} .info-treemap1 .group3 > li > .subgroup2 > li:first-child > span {margin-top:0;} .info-treemap1 .group3 > li > .subgroup2 > li:first-child > span:before {content:'';display:block;position:absolute;left:50%;top:-10rem;width:0.1rem;height:10rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3 .subgroup1 > li > span, .info-treemap1 .group3 .subgroup2 > li > span {display:block;width:12.4rem;height:4.0rem;color:#fff;line-height:4.0rem;text-align:center;} .info-treemap1 .group3 .subgroup1 > li > span {position:relative;background:#1c9deb;} .info-treemap1 .group3 .subgroup2 > li > span {margin:3rem 0 0;background:#0082d0;} .info-treemap1 .group3 .subgroup2 > li > span:before {content:'';display:block;position:absolute;top:-1.5rem;left:50%;width:0.1rem;height:1.5rem;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3 .subdep li:before,.info-treemap1 .group3 .subdep li:after {content:'';display:block;position:absolute;background:#b0b3bc;z-index:-1;} .info-treemap1 .group3 .subdep li:before {top:-1.6rem;left:0.5rem;width:0.1rem;height:calc(100% + .5rem);height:-webkit-calc(100% + .5rem);} .info-treemap1 .group3 .subdep li:after {top:50%;left:.5rem;width:1rem;height:0.1rem;} .info-treemap1 .group3 > li:first-child .subdep li:before, .info-treemap1 .group3 > li:first-child .subdep li:after, .info-treemap1 .group3 > li:nth-child(2) .subgroup1 > li > span + .subdep li:before, .info-treemap1 .group3 > li:nth-child(2) .subgroup1 > li > span + .subdep li:after, .info-treemap1 .group3 > li:nth-child(3) .subgroup1 > li > span + .subdep li:before, .info-treemap1 .group3 > li:nth-child(3) .subgroup1 > li > span + .subdep li:after {display:none;} .info-treemap1 .group3 > li:nth-child(5) .subdep:not(.child) > li:first-child::before {height:6rem;height:-webkit-calc(6rem);} .info-treemap1 .group3 > li:nth-child(5) .subdep:not(.child) > li:last-child::before {height:2.8rem;height:-webkit-calc(2.8rem);} .info-treemap1 .group3 > li:nth-child(5) .subdep:not(.child) > li:last-child::after {top:1.2rem;} /* 경영기획부, 재무관리부 type1 */ .info-treemap1 .group3 > li:nth-child(6) .subdep:not(.child) > li:before {left:-0.6rem;top:-33.5rem} .info-treemap1 .group3 > li:nth-child(6) .subdep:not(.child) > li:first-child::before {height:38rem;} .info-treemap1 .group3 > li:nth-child(6) .subdep:not(.child) > li:after {left:-0.6rem;width:2.5rem;} .info-treemap1 .group3 > li:nth-child(8) .subdep:not(.child) > li:before, .info-treemap1 .group3 > li:nth-child(9) .subdep:not(.child) > li:before {left:-0.6rem;top:-4.6rem} .info-treemap1 .group3 > li:nth-child(8) .subdep:not(.child) > li:after {left:-0.6rem;top:1.2rem;width:2.5rem;} .info-treemap1 .group3 > li:nth-child(9) .subdep:not(.child) > li:after {left:-0.6rem;top:1.1rem;width:2.5rem;} .info-treemap1 .group3 .subdep.child > li:before {left:1.9rem} .info-treemap1 .group3 .subdep.child > li:after {top:50%;left:1.9rem} .info-treemap1 .group3 .subdep.child li span {margin:0.5rem 0 0 2.5rem;width:9.9rem;color:#757575;border-color:#b0b3bc;background:#fff;} .info-treemap1 .group3 .subdep li span {display:block;margin:0.5rem 0 0 1.5rem;width:10.9rem;height:2.4rem;font-size:1.3rem;line-height:2.4rem;text-align:center;color:#0082d0;background:#e5f4fb;border:1px solid #99d8f7;} .info-treemap1 .group3 > li > .subdep:first-child > li:first-child > span {margin-top:0;} /*-------------------------------------------------------------------------------- # PAGE : 회사소개 > 그룹사소개 ---------------------------------------------------------------------------------*/ /* PC | 김선영 SRID : 20210208-006] 홈페이지 그룹사 소개 변경 */ /*** 그룹사 소개 CO07000000 ***/ .info-treemap2 * {box-sizing: border-box;} .info-treemap2 {position:relative;} .info-treemap2 > h2 {width:25.6rem;height:4.4rem;margin:22px auto;background:url(../img/content/co08.png) no-repeat center;font-size:0;letter-spacing:-99.9rem;} .info-treemap2 .group {display:table;position:relative;height:137.5rem;margin:2.0rem auto 0;padding:2.0rem 0 0;} .info-treemap2 .group > li {display:table-cell;position:relative;overflow:visible;top:2.0rem;vertical-align:top;} .info-treemap2 .group > li > strong {display:block;position:relative;width:5.0rem;height:22.0rem;padding:1.5rem 0 0;background:#0096d6;color:#fff;font-weight:normal;text-align:center;} .info-treemap2 .group > li > strong > span:first-child {display:inline-block;margin:0 auto;min-width:2.0rem;} .info-treemap2 .group > li > strong span.vertical {writing-mode:vertical-rl;-ms-writing-mode:tb-rl;text-align:left;letter-spacing:-0.1em;} .ie .info-treemap2 .group > li > strong span.vertical {letter-spacing:0.4em;} .info-treemap2 .group > li > strong span.vertical > span {display:inline-block;min-width:2.0rem;text-align:center;writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;line-height:1.4;letter-spacing:-0.1em;} .info-treemap2 .group > li > strong > span + span, .info-treemap2 .group > li > strong > span + a {position:absolute;bottom:1.0rem;left:0;width:100%;font-size:1.2rem;} .info-treemap2 .group > li + li strong {margin:0 0 0 1.4rem} /* 라인 */ .info-treemap2 .group:before, .info-treemap2 .group > li:before {content:'';display:block;position:absolute;right:2.9rem;background:#b0b3bc;} .info-treemap2 .group:before {top:2.0rem;left:2rem;height:0.1rem;} .info-treemap2 .group > li:before {top:-2.0rem;width:0.1rem;height:2.0rem;} .info-treemap2 .group > li:after {content:'';display:block;position:absolute;border:solid #b0b3bc;border-width:0;} .info-treemap2 .group > li:nth-child(2):after {left:3.9rem;width:23.5rem;height:5.9rem;border-width:0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(3):after {left:3.9rem;width:18.1rem;height:5.0rem;border-width:0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(4):after {left:3.9rem;width:12.7rem;height:4.1rem;border-width:0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(5):after {left:3.9rem;width:7.3rem;height:3.2rem;border-width:0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(99):after {left:-1.5rem;width:5.3rem;height:5rem;border-width:0 0.1rem 0.1rem 0;} .info-treemap2 .group > li:nth-child(10):after {left:4.1rem;width:9.6rem;height:5rem;border-width:0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(12):after {left: 1.9rem;width: 2rem;height:5rem;border-width:0 0.1rem 0.1rem 0;} .info-treemap2 .group > li:nth-child(13):after {left:-3.5rem;width:7.4rem;height:5.9rem;border-width: 0 0.1rem 0.1rem 0;} /* 라인 */ .info-treemap2 .group > li > ul:before {content:'';display:block;position:absolute;bottom: 10.8rem;left: -1.0rem;width: 0.1rem;height: 3.5rem;background:#b0b3bc;} .info-treemap2 .group > li:first-of-type > ul:before {height:calc(100% + 4.2rem);bottom: 2.6rem;} .info-treemap2 .group > li:nth-child(2) > ul:before {left:-4.0rem;height:102.2rem;bottom:2.6rem;} body.edg .info-treemap2 .group > li:nth-child(2) > ul:before {height:102.8rem;} .info-treemap2 .group > li:nth-child(3) > ul:before {left:-3rem;height:72rem;bottom:3.7rem;} body.edg .info-treemap2 .group > li:nth-child(3) > ul:before {height:72.4rem;} .info-treemap2 .group > li:nth-child(4) > ul:before {left:-2rem;bottom: 2.6rem;height: 25.5rem;} .info-treemap2 .group > li:nth-child(5) > ul:before {left: -1rem;bottom: 3.7rem;height: 7.3rem;} body.edg .info-treemap2 .group > li:nth-child(5) > ul:before {bottom: 3.8rem;} .info-treemap2 .group > li:nth-child(6):after {width: 1.9rem;height: 2.3rem;left: 3.9rem;border-width: 0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(6) > ul:before {bottom:3.7rem;left: -4rem;height:47.4rem;width:6.0rem;border:0.1rem solid #b0b3bc;border-width:0 0 0 0.1rem;background:none;} body.edg .info-treemap2 .group > li:nth-child(6) > ul:before {bottom: 3.8rem;height: 47.5rem;} .info-treemap2 .group > li:nth-child(6) > ul:after {content: '';display: block;position: absolute;top: -24.9rem;left: -36.5rem;width: 32.5rem;height:3.6rem;border: 0.1rem solid #b0b3bc;border-width: 0 0 0.1rem 0.1rem;} .info-treemap2 .group > li:nth-child(6) > ul > li:before {width:0.0rem;} .info-treemap2 .group > li:nth-child(10) > ul:before {left:-3.0rem;bottom:2.6rem;height:18.6rem;} .info-treemap2 .group > li:nth-child(13) > ul:before {left: -1rem;bottom: 2.6rem;height:3.4rem;} .info-treemap2 .group > li:nth-child(14) > ul:before {left:-1.0rem;bottom: 3.7rem;height: 10.6rem;} .info-treemap2 .group > li:nth-child(99) > ul:before {bottom:3.7rem;left:-2.0rem;height:36.1rem;} .info-treemap2 .group > li:nth-child(12) > ul:before {left:auto;right:26.9rem;bottom:3.8rem;height:11.4rem;} /* 하위 메뉴 그다음 하위 메뉴*/ .info-treemap2 .group > li:nth-child(3) > ul > li:nth-child(5) > ul > li:before {content:'';display:block;position:absolute;bottom:50%;left:-8.1rem;width:8.0rem;height:0.1rem;background:#b0b3bc;} .info-treemap2 .group > li:nth-child(3) > ul > li:nth-child(5) > ul > li {position:relative;min-height: 4.8rem;padding: 1.4rem;border: 0.1rem solid #0096d6;background: #fff;color: #0082d0;} .info-treemap2 .group > li:nth-child(3) > ul > li:nth-child(5) > ul {position: absolute;left: 36.4rem;top: -0.1rem;width: 25.0rem;} /* 하위메뉴 위치 & 세로라인*/ .info-treemap2 .group > li > ul {display:block;position:absolute;top:28.8rem;width:25.0rem;z-index:1;} .info-treemap2 .group > li:first-of-type > ul {left:3.4rem;} .info-treemap2 .group > li:nth-child(2) > ul {bottom: 2.7rem;left: 31.4rem;width: 28.5rem;top: auto;} body.edg .info-treemap2 .group > li:nth-child(2) > ul {bottom: 2.1rem;} .info-treemap2 .group > li:nth-child(3) > ul {top:55rem;left:25.0rem;width:28.5rem;} .info-treemap2 .group > li:nth-child(4) > ul {left:18.6rem;top:37rem;width:28.5rem;} .info-treemap2 .group > li:nth-child(5) > ul {left:12.2rem;width: 28.5rem;} .info-treemap2 .group > li:nth-child(6) > ul {top: 49.2rem;left: 42.3rem;} .info-treemap2 .group > li:nth-child(10) > ul {top: 43.1rem;left:16.7rem;} .info-treemap2 .group > li:nth-child(12) > ul {top: 34.8rem;left:3.9rem;} .info-treemap2 .group > li:nth-child(99) > ul {top:43rem;left:auto;right: -19.1rem;/*width:24.2rem;*/} .info-treemap2 .group > li:nth-child(13) > ul {top: 28.8rem;left: auto;right: -16.1rem;/*width:23.1rem;*/} /* 하위메뉴 안쪽 & 가로라인 */ .info-treemap2 .group > li > ul > li {display:table;position:relative;width:100%;min-height:4.8rem;padding:1.4rem;border:0.1rem solid #0096d6;background:#fff;color:#0082d0;} .info-treemap2 .group > li > ul > li:after {content:'';display:block;clear:both;} .info-treemap2 .group > li > ul > li + li {margin:0.8rem 0 0;} .info-treemap2 .group > li > ul > li > span:first-child {max-width:22.0rem;display:table-cell;vertical-align:middle;} .info-treemap2 .group > li > ul > li span + span, .info-treemap2 .group > li > ul > li span + a {max-width:5.5rem;float:right;color:#757575;font-size:1.2rem;text-align:right;} .info-treemap2 .group > li:nth-child(99) > ul > li span:first-child {max-width:14.0rem;} /* 라인 */ .info-treemap2 .group > li > ul > li.hide:before {display:none;} .info-treemap2 .group > li > ul > li:before {content:'';display:block;position:absolute;bottom:50%;left:-1.0rem;width:0.9rem;height:0.1rem;background:#b0b3bc;} .info-treemap2 .group > li:nth-child(2) > ul > li:before {left:-4.0rem;width:3.9rem;} .info-treemap2 .group > li:nth-child(3) > ul > li:before {left:-3.0rem;width:2.9rem;} .info-treemap2 .group > li:nth-child(2) > ul > li:after {display:none;} .info-treemap2 .group > li:nth-child(4) > ul > li:before {left:-2.1rem;width: 2rem;} .info-treemap2 .group > li:nth-child(5) > ul > li:before {left:-1.1rem;width:1rem;} .info-treemap2 .group > li:nth-child(6) > ul > li:before {left:-4.1rem;width:4rem;} .info-treemap2 .group > li:nth-child(10) > ul > li:before {left:-3.0rem;width:3.0rem;} .info-treemap2 .group > li:nth-child(14) > ul > li:before {left:-1.0rem;width:1.0rem;} .info-treemap2 .group > li:nth-child(13) > ul > li:before {left:-1.1rem;width:1.0rem;} .info-treemap2 .group > li:nth-child(99) > ul > li:before {left:-2.0rem;width:2.0rem;} .info-treemap2 .group > li:nth-child(12) > ul > li:before {left:auto;right: 24.9rem;width:2.0rem;} /* 각주 */ .info-treemap2 > ul a {display:block;position:relative;font-size:1.2rem;} .info-treemap2 > ul ul a:before {display:block;margin:0;font-size:1.0rem;color:#4690ce;} #uiFootNoteTxt1 a:before {content:'1)';} #uiFootNoteTxt2 a:before {content:'2)';} #uiFootNoteTxt3 a:before {content:'3)';} #uiFootNoteTxt4 a:before {content:'4)';} #uiFootNoteTxt5 a:before {content:'5)';} #uiFootNoteTxt6 a:before {content:'6)';} #uiFootNoteTxt7 a:before {content:'7)';} .info-treemap2 strong a {padding:1.6rem 0 0;color:#fff;} .info-treemap2 strong a:before {content:'1)';position:absolute;top:0;right:1.0rem;margin:0 0.5rem 0 0;color:#fff;} .info-treemap2 .info {counter-reset:num;width:100%;margin-top: 10rem;padding:0.5rem 1.8rem 0.5rem 3.6rem;border-top:0.1rem solid #9599a6;background:#f7f9fa;} .info-treemap2 .info li {margin:0 0 0.8rem;} .info-treemap2 .info li span {position:relative;color:#757575;font-size:1.2rem;line-height:1.8rem;} .info-treemap2 .info li span:before {content:counter(num)')';counter-increment:num 1;display:inline-block;position:absolute;top:0;left:0;margin:0 0.5rem 0 -1.5rem;font-size:1.0rem;color:#4690ce;} /* PC | 김성은 SRID : ] 홈페이지 그룹사 소개 변경 */ /*** 조직도 CO06000000 ***/ .chart_org{position:relative; width: 100%; height: 95rem;} .chart_org > div{position: absolute;} .chart_org > div.item > span{display: block; width: 17.6rem; text-align: center; line-height: 4.8rem;} .chart_org > div.item > span:after{content:''; position: absolute; width: 0.1rem; height: 2rem; background-color: #b0b3bc; top: 100%; left: 50%;} .chart_org > div.item.grd1 > span{height: 4.8rem; font-size:1.4rem; color: #fff; background: #4f525e;} .chart_org > div.item.grd > span{height: 4.8rem; font-size:1.4rem; color: #fff; background: #112369;} .chart_org > div.item.juju{top:0rem; left: 50%;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);} .chart_org > div.item.isa{top:6.8rem; left: 50%;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);} .chart_org > div.item.isa > span:after{height: 9.4rem;} .chart_org > div.item.sajang{top:21rem; left: 50%;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);} .chart_org > div.item.sajang > span:after{height: 9.4rem;} .chart_org > div.item.top_gp{top:6.8rem; left: 69rem;} .chart_org > div.item.sinyoung{top:28.3rem; left: 13.5rem;} .chart_org > div.item.grd2 > ul{position:relative; width: 20.2rem;} .chart_org > div.item.grd2 > ul > li{position:relative; height: 4rem; line-height:4rem; font-size:1.4rem; color: #fff; background: #606783; margin-top:1rem; text-align: center;} .chart_org > div.item.grd2 > ul > li:first-child{margin-top:0;} .chart_org > div.item.grd2 > ul > li > ul{position:absolute; left:26.5rem; top:50%; margin-top:-1.2rem;} .chart_org > div.item.grd2 > ul > li > ul > li:before{content:''; position: absolute; width: 6.3rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; right: 100%;} .chart_org > div.item.grd2 > ul > li > ul > li > span{display:block; width: 12.5rem; height: 2.4rem; line-height:2.4rem; color: #0082d0; background-color: #e5f4fb; border:1px solid #99d8f7;} .chart_org > div.item.grd2 > span{height: 4rem; width:20.2rem; line-height:4rem; font-size:1.4rem; color: #fff; background: #606783; text-align: center;} .chart_org > div.item.top_gp > ul:before{content:''; position: absolute; width: 12rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; right: calc(100% + 3rem);} .chart_org > div.item.top_gp > ul:after{content:''; position: absolute; width: 0.1rem; height: calc(100% - 4rem); background-color: #b0b3bc; top: 2rem; left: -3rem;} .chart_org > div.item.top_gp > ul > li:before{content:''; position: absolute; width: 3rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; right: 100%;} .chart_org > div.item.sinyoung > span:after{width: 20.4rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; left: 100%;} .chart_org > div.grp_wrap{position:relative; top:35rem;} .chart_org > div.grp_wrap:before{content: ''; position: absolute; width: calc(100% - 34.2rem); height: 0.1rem; background-color: #b0b3bc; top: 0.2rem; left: 32.2rem;} .chart_org > div.grp_wrap:after{content: ''; position: absolute; width: calc(100% - 15.1rem); height: 0.1rem; background-color: #b0b3bc; top: 31.2rem; left: 13.2rem;} .chart_org > div.grp_wrap .cline{position: absolute; width: 0.1rem; height: 31rem; background-color: #b0b3bc; top: 0.2rem; left: 106rem;} .chart_org .grp{position:absolute; margin-top:3rem;} .chart_org .grp:before{content: ''; position: absolute; width: calc(100% - 12.3rem); height: 0.1rem; background-color: #b0b3bc; top: 5.9rem; left: 6.2rem;} .chart_org .grp > span{position:relative; display: block; margin: 0 auto; width: 15rem; height: 4.0rem; color: #fff; background-color:#1c9deb; line-height: 4.0rem; text-align: center;} .chart_org .grp > span:before{content: ''; position: absolute; width: 0.1rem; height: 2.8rem; background-color: #b0b3bc; bottom: 100%;left: 50%;} .chart_org .grp > span:after{content: ''; position: absolute; width: 0.1rem; height: 2rem; background-color: #b0b3bc; top: 100%;left: 50%;} .chart_org .grp > ul{display: flex;} .chart_org .grp > ul > li{margin-left:6rem;} .chart_org .grp > ul > li:first-child{margin-left:0;} .chart_org .grp > ul > li > span{display: block; position:relative; width: 12.4rem; height: 4.0rem;background-color:#0082d0; color: #fff; line-height: 4.0rem; text-align: center; margin-top:3.5rem;} .chart_org .grp > ul > li > span:before{content: ''; position: absolute; width: 0.1rem; height: 1.5rem; background-color: #b0b3bc; bottom: 100%;left: 50%;} .chart_org .grp > ul > li > ul > li{position: relative;} .chart_org .grp > ul > li > ul > li > span{display: block; position:relative; margin: 0.5rem 0 0 1.5rem; width: 10.9rem;height: 2.4rem;font-size: 1.3rem; line-height: 2.4rem; text-align: center; color: #0082d0; background: #e5f4fb; border: 1px solid #99d8f7;} .chart_org .grp > ul > li > ul > li > span.under{color: #757575; background: #fff; border: 1px solid #b0b3bc;} .chart_org .grp > ul > li > ul > li > span:before{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: -1.7rem; left: -1rem; width: 0.1rem; height: calc(100% + .7rem); height: -webkit-calc(100% + .7rem);} .chart_org .grp > ul > li > ul > li.plusgap > span:before{top: -4.6rem; height: calc(100% + 4rem); height: -webkit-calc(100% + 4rem);} .chart_org .grp > ul > li > ul > li > span:after{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: 50%; left: -1rem; width: 1rem; height: 0.1rem;} .chart_org .grp > ul > li > ul > li > ul > li > span{display: block; position:relative; margin: 0.5rem 0 0 2.5rem; width: 9.9rem; color: #757575; background: #fff;border: 1px solid #b0b3bc; height: 2.4rem; font-size: 1.3rem; line-height: 2.4rem; text-align: center;} .chart_org .grp > ul > li > ul > li > ul > li > span:before{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: -1.6rem; left: -0.6rem; width: 0.1rem; height: calc(100% + .5rem); height: -webkit-calc(100% + .5rem);} .chart_org .grp > ul > li > ul > li > ul > li > span:after{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: 50%; left: -0.6rem; width: 1rem; height: 0.1rem} .chart_org .grp > ul > li > ul > li > ul > li > ul > li > span{display: block; position:relative; margin: 0.5rem 0 0 3.5rem; width: 8.9rem; color: #757575; background: #f3f3f3;border: 1px solid #b0b3bc; height: 2.4rem; font-size: 1.2rem; line-height: 2.4rem; text-align: center;} .chart_org .grp > ul > li > ul > li > ul > li > ul > li > span:before{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: -1.6rem; left: -0.6rem; width: 0.1rem; height: calc(100% + .5rem); height: -webkit-calc(100% + .5rem);} .chart_org .grp > ul > li > ul > li > ul > li > ul > li > span:after{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: 50%; left: -0.6rem; width: 1rem; height: 0.1rem} .chart_org .grp .spc_item{position: absolute;} .chart_org .grp .spc_item > span{display:block; width: 12.5rem; height: 2.4rem; line-height:2.4rem; color: #0082d0; background-color: #e5f4fb; border:1px solid #99d8f7; text-align:center;} .chart_org .grp.sihq > ul{margin-top:4rem;} .chart_org .grp.sihq > ul > li > span:before{height: 10.3rem;} .chart_org .grp.cogrp{left: 7.6rem;} .chart_org .grp.cogrp .spc_item {top: -0.6rem;left: 0rem;} .chart_org .grp.cogrp .spc_item:before{content: ''; position: absolute; width: 0.1rem; height: 3rem; background-color: #b0b3bc; top: 1.2rem; right:-2.4rem;} .chart_org .grp.cogrp .spc_item:after{content:''; position: absolute; width: 2.2rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; right:-4.6rem;} .chart_org .grp.cogrp .spc_item span{margin-top:0.5rem; position: relative;} .chart_org .grp.cogrp .spc_item span:first-child{margin-top:0rem;} .chart_org .grp.cogrp .spc_item > span:after{content:''; position: absolute; width: 2.4rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; left: 100%;} .chart_org .grp.gib{left:70rem;} .chart_org .grp.gib .spc_item{top:0.8rem; left:-8.2rem} .chart_org .grp.gib .spc_item > span:after{content:''; position: absolute; width: 3.6rem; height: 0.1rem; background-color: #b0b3bc; top: 50%; left: 100%;} .chart_org .grp_out.loan{top:34rem; left:5.6rem;} .chart_org .grp_out.loan:before{left:0.6rem;} .chart_org .grp_out.loan > ul{margin-top:3rem;} .chart_org .grp_out.loan > ul > li{display: flex;} .chart_org .grp_out.loan > ul > li > ul{margin-left:2rem;} .chart_org .grp_out.loan > ul > li > ul > li > span:before{top: -5.9rem; height: calc(100% + 4.9rem); height: -webkit-calc(100% + 4.9rem);} .chart_org .grp.mng{top:31rem; left:29rem;} .chart_org .grp.mng:before{left:0.6rem; width: calc(100% - 6.7rem)} .chart_org .grp.mng > ul{margin-top:3rem;} .chart_org .grp.mng > ul > li{display: flex;} .chart_org .grp.mng > ul > li.noteam{margin-top:4.6rem;} .chart_org .grp.mng > ul > li > ul{margin-left:2rem;} .chart_org .grp.mng > ul > li > ul:first-child{margin:0;} .chart_org .grp.mng > ul > li.dgt{display: block;margin-left:4rem;} .chart_org .grp.mng > ul > li.dgt > ul{margin-left:0rem;} .chart_org .grp.mng > ul > li.dgt > span{margin-top:0.5rem;} .chart_org .grp_out{position: absolute; } .chart_org .grp_out > ul{display: flex; margin-top:3rem;} .chart_org .grp_out > span{position:relative; display: block; margin: 0 auto; width: 15rem; height: 4.0rem; color: #fff; background-color:#1c9deb; line-height: 4.0rem; text-align: center;} .chart_org .grp_out > span:before{content: ''; position: absolute; width: 0.1rem; height: 2.8rem; background-color: #b0b3bc; bottom: 100%;left: 50%;} .chart_org .grp_out > ul > li{margin-left:0.5rem;} .chart_org .grp_out > ul > li:first-child{margin-left:0;} .chart_org .grp_out > ul > li > span{display: block; width: 12.4rem; height: 4.0rem;background-color:#0082d0; color: #fff; line-height: 4.0rem; text-align: center;} .chart_org .grp_out > ul > li > ul > li > span{display: block; position:relative; margin: 0.5rem 0 0 1.5rem; width: 10.9rem;height: 2.4rem;font-size: 1.3rem; line-height: 2.4rem; text-align: center; color: #0082d0; background: #e5f4fb; border: 1px solid #99d8f7;} .chart_org .grp_out > ul > li > ul > li > span.under{color: #757575; background: #fff; border: 1px solid #b0b3bc;} .chart_org .grp_out > ul > li > ul > li > span:before{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: -1.7rem; left: -1rem; width: 0.1rem; height: calc(100% + .7rem); height: -webkit-calc(100% + .7rem);} .chart_org .grp_out > ul > li > ul > li > span:after{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: 50%; left: -1rem; width: 1rem; height: 0.1rem;} .chart_org .grp_out > ul > li > ul > li > ul > li > span{display: block; position:relative; margin: 0.5rem 0 0 2.5rem; width: 9.9rem; color: #757575; background: #fff;border: 1px solid #b0b3bc; height: 2.4rem; font-size: 1.3rem; line-height: 2.4rem; text-align: center;} .chart_org .grp_out > ul > li > ul > li > ul > li > span:before{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: -1.6rem; left: -0.6rem; width: 0.1rem; height: calc(100% + .5rem); height: -webkit-calc(100% + .5rem);} .chart_org .grp_out > ul > li > ul > li > ul > li > span:after{content: ''; display: block; position: absolute; background: #b0b3bc; z-index: -1;top: 50%; left: -0.6rem; width: 1rem; height: 0.1rem} .chart_org .grp_out.risk{top:34rem;left:64rem} .chart_org .grp_out.risk > ul > li > ul > li > span:before{top: -5.9rem; height: calc(100% + 4.9rem); height: -webkit-calc(100% + 4.9rem);} .chart_org .grp_out.risk > ul > li > ul{margin-left:2rem;} .chart_org .grp_out.law{top:34rem;left:86rem} .chart_org .grp_out.law > ul > li > ul > li > span:before{top: -5.9rem; height: calc(100% + 4.9rem); height: -webkit-calc(100% + 4.9rem);} .chart_org .grp_out.law > ul > li > ul{margin-left:2rem;} /*-------------------------------------------------------------------------------- # PAGE : 회사소개 : CI ---------------------------------------------------------------------------------* CI : 공통 ---------------------------------------------------------------------------------*/ .page-ci p + p {margin:1.0rem 0 0;} .page-ci p + p > b{font-weight: normal; color:#0046ff} .page-ci .box-t2 {margin:0;margin:0 0 2.0rem;} .page-ci .tit-sub2 {margin:0 0 0.7rem;color:#525252;text-align:left;} .pc .page-ci .mes-headline1 {padding:0 1rem 3.6rem 1rem;border-bottom:0.1rem solid #d7d9dd;} .pc .page-ci .mes-headline1 > span{display: block; margin-top:1rem;} .pc .page-ci .mes-headline1 > span:first-child{margin-top:0} .mb .page-ci > .tab-sub1 {margin-top:-2.4rem;border-bottom:0.1rem solid #d7d9dd;} .mb .page-ci .mes-headline1 > span{display: block; margin-top:1rem;} .mb .page-ci .mes-headline1 > span:first-child{margin-top:0} /* -------------------------------------------------------------------------------- CI : TAB1 : CI STORY ---------------------------------------------------------------------------------*/ /* CI의 의미 */ .ci-info1 ul > li {position:relative;padding:1.6rem 0 1.6rem 15.0rem;} .ci-info1 ul > li strong {display:block;font-size:1.6rem;margin:0 0 0.7rem;} .ci-info1 ul > li:first-child {padding-top:0;} .ci-info1 ul > li:after {content:'';display:block;position:absolute;bottom:0;left:15.0rem;right:0;border-bottom:0.1rem solid #d7d9dd;} .ci-info1 ul > li:before {content:'';position:absolute;left:4.0rem;top:50%;transform:translateY(-50%);width:7.0rem;height:7.0rem;background:url(../img/content/co_ci_0102_r.png) no-repeat 0 0;background-size:100% 100%;} .ci-info1 ul > li:nth-child(1):before {background-image:url(../img/content/co_ci_0102_r.png);} .ci-info1 ul > li:nth-child(2):before {background-image:url(../img/content/co_ci_0103_r.png);} .ci-info1 ul > li:nth-child(3):before {background-image:url(../img/content/co_ci_0104_r.png);} .pc .ci-info1 .box-t2.img {height:30.8rem;} .pc .ci-info1 .box-t2.img img {height:16.8rem;} .mb .ci-info1 .box-t2.img img {height:10.0rem;} .mb .ci-info1 ul > li {padding-left:10.0rem;} .mb .ci-info1 ul > li:before {left:2.0rem;width:5.8rem;height:5.8rem;} .mb .ci-info1 ul > li:after {left:0;} /* -------------------------------------------------------------------------------- CI : TAB2 : SYNBOL & LOGO ---------------------------------------------------------------------------------*/ /* 심볼 */ .ci-info2 .box-t2 {position:relative;} .ci-info2 .box-t2.img img {height:16.8rem;} .ci-info2 .box-t2.img img + div {position:absolute;left:50%;top:50%;height:17.0rem;margin:0 0 0 9.5rem;border-left:0.1rem solid #0096d6;line-height:1.2;font-size:1.1rem;font-family:'돋움, Dotum';color:#0082d0;transform: translateY(-50%);} .ci-info2 .box-t2.img img + div:before, .ci-info2 .box-t2.img img + div:after {content:'';display:block;position:absolute;left:-1.1rem;width:2.2rem;height:0.1rem;background:#0096d6;} .ci-info2 .box-t2.img img + div:before {top:0;} .ci-info2 .box-t2.img img + div:after {bottom:0;} .ci-info2 .box-t2.img img + div p {position:absolute;top:50%;left:0.8rem;transform:translateY(-50%);text-align:left;} .ci-info2 .box-t2.img + .box-t2.img img {border:0.1rem solid #d7d9dd;} .sbl_new{margin-bottom:2.0rem;} .sbl_new img{border:0.1rem solid #d7d9dd;} .pc .ci-info2 .box-t2 {height:31.4rem;} .pc .ci-info2 .box-t2.img img + div p {width:13.0rem;} .pc .ci-info2 .box-t2.img + .box-t2.img img {margin:0 0 0 -0.4rem;} .pc .sbl_new .sbl_mo{display: none;} .mb .ci-info2 .box-t2.img img {height:10.0rem;} .mb .ci-info2 .box-t2.img img + div {height:10.0rem;margin:0 0 0 6.5rem;} .mb .ci-info2 .box-t2.img img + div p {width:calc(50% -7.5rem);} .mb .sbl_new .sbl_pc{display: none;} /* 로고 */ .pc .ci-info3 .box-t2 {height:11.2rem;} .pc .ci-info3 .box-t2.img img {height:2.9rem;} .mb .ci-info3 .box-t2.img img {height:2.4rem;} .box-t2.img.non_grd:before{display: none;} .box-t2.img.non_grd:after{display: none;} /* -------------------------------------------------------------------------------- CI : TAB3 : COLOR & SIGNATURE ---------------------------------------------------------------------------------*/ /* 심볼 */ .ci-info4 {padding:3.9rem 0;} .ci-info4 .color {color:rgba(255,255,255,0);} .ci-info4 .color.c1 {background:linear-gradient(to left,#ca984e,#fff);} .ci-info4 .color.c2 {background:linear-gradient(to left,#0066b3,#0097d6,#00c0f3);} .ci-info4 .color.c3 {background:#77787b;} .ci-info4 div.area {height:23.7rem;} .ci-info4 div.area img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:25.8rem;} .ci-info4 ul.area > li > strong {display:block;} .ci-info4 ul.area > li > .color {height:4.0rem;margin:0;} .ci-info4 ul.area > li > .color + ul {position:relative;width:100%;height:3.0rem;} .ci-info4 ul.area > li > .color + ul > li {position:absolute;top:0;left:0;display:inline-block;line-height:1;padding-top:1.6rem;font-size:1.2rem;} .ci-info4 ul.area > li > .color + ul > li:nth-child(2) {left:16.6%;} .ci-info4 ul.area > li > .color + ul > li:nth-child(3) {left:50%;} .ci-info4 ul.area > li > .color + ul > li:last-child {left:auto;right:0;} .ci-info4 ul.area > li > .color + ul > li:before {content:'';display:block;position:absolute;top:0;width:0.1rem;height:0.8rem;background:#b0b3bc;} .ci-info4 ul.area > li > .color + ul > li:not(:last-child):before {left:auto;} .ci-info4 ul.area > li > .color + ul > li:last-child:before {right:0;} .ci-info4 ul.area > li > .color + ul.info-word2 {margin:0;} .ci-info4 ul.area > li > .color + ul.info-word2 span:first-child {margin:0;} .ci-info4 ul.area > li:nth-child(2) ~ li strong {margin-bottom:1.1rem;font-size:1.4rem;} .ci-info4 ul.area > li:nth-child(4) > ul > li {float:left;width:calc(33.3% - 1.6rem);height:2.4rem;text-align:left;} .ci-info4 ul.area > li:nth-child(4) > ul > li + li {margin-left:2.4rem;} .ci-info4 ul.area > li + li {margin-top:1.4rem;} .pc .ci-info4 ul.area {padding-right:4.7rem;} .pc .ci-info4 ul.area > li:nth-child(2) ~ li {float:left;width:calc(50% - 1.2rem);text-align:left;} .pc .ci-info4 ul.area > li:nth-child(4) {margin-left:2.4rem;} .pc .ci-info4 ul.area > li {position:relative;} .pc .ci-info4 ul.area > li:not(:last-child):before {content:'';display:block;position:absolute;top:4.0rem;left:calc(-24.5rem + -2.4rem);width:24.5rem;height:0.1rem;background:#d7d9dd;z-index:-1;} .pc .ci-info4 ul.area > li:nth-child(2):before {top:2.0rem;} .pc .ci-info4 ul.area > li:nth-child(3):before {top:1.5rem;left:calc(-11.5rem + -2.4rem);width:11.5rem;} .mb .ci-info4 div.area {height:12.7rem;margin-top:1.2rem;} .mb .ci-info4 div.area img {width:14.9rem;} .mb .ci-info4 .area ~ .area {margin-top:4.0rem;} .mb .ci-info4 ul.area > li > .color {height:2.4rem;} .mb .ci-info4 ul.area:nth-child(2) > li:nth-child(2) > .info-word2 span {display:block;margin-left:0;} .mb .ci-info4 ul.area:nth-child(2) > li:nth-child(2) > .info-word2 span + span:before {display:none;} /* 전용색상 */ .ci-info5 {padding:3.9rem 7.1rem 2.5rem;border:0.1rem solid #d7d9dd;text-align:center;} .ci-info5 > li strong {display:block;width:82%;line-height:6.4rem;margin:0 auto 2.7rem;font-weight:normal;color:#fff;} .ci-info5 > li:nth-child(1) strong {background:#0b1966;} .ci-info5 > li:nth-child(2) strong {background:#595959;} .ci-info5 > li em {font-family:'OneShinhanM';} .prc_new{margin-bottom:2.0rem} .pc .ci-info5 > li {line-height:3.3rem;} .pc .prc_new .prc_mo{display: none;} .mb .ci-info5 {padding:3.1rem 1.6rem 2.0rem;} .mb .ci-info5 > li strong {width:100%;line-height:4.0rem;margin-bottom:1.0rem;} .mb .ci-info5 .area ~ .area {margin-bottom:0;} .mb .prc_new .prc_pc{display: none;} /* SIGNATURE */ .ci-info6 .area:nth-child(1) li + li {margin:4.0rem 0 0;} .ci-info6 .area:nth-child(1) li img {height:3.7rem;} .ci-info6 .area:nth-child(2) li {display:inline-block;width:3.9rem;vertical-align: top;} .ci-info6 .area:nth-child(2) li + li {margin:0 0 0 5.4rem;} .ci-info6 .area:nth-child(3) ul {width:10.2rem;} .ci-info6 .area:nth-child(3) li + li {margin:3.8rem 0 0;} .sgt_new{margin-bottom:2.0rem} .pc .ci-info6 .box-t2.img {height:46.2rem;} .pc .ci-info6 .area:nth-child(1) ul {width:28.0rem;} .pc .sgt_new .sgt_mo{display: none;} .mb .ci-info6 .area:nth-child(1) li + li {margin:3.4rem 0 0;} .mb .ci-info6 .area:nth-child(1) li img {height:3.2rem;margin:0 auto;} .mb .ci-info6 .area:nth-child(2) {text-align:center;} .mb .ci-info6 .area:nth-child(2) li {width:3.1rem;} .mb .ci-info6 .area:nth-child(2) li + li {margin:0 0 0 2.8rem;} .mb .ci-info6 .area:nth-child(3) ul {width:8.2rem;} .mb .ci-info6 .area:nth-child(3) li + li {margin:2.4rem 0 0;} .mb .sgt_new .sgt_pc{display: none;} /*-------------------------------------------------------------------------------- # PAGE : IR > 경영공시 / 보고서 ---------------------------------------------------------------------------------*/ .list-filedown {position:relative;margin:2.4rem -0.8rem 0; display: flex; justify-content: center; flex-wrap: wrap;} .list-filedown:after {content:'';display:block;clear:both;} .list-filedown > li {position:relative; width:calc(25% - 2.4rem);text-align:center;margin-top:2.4rem;padding:0.4rem 0 0;} .list-filedown > li + li {margin:2.4rem 0 0 3.2rem;} .list-filedown > li:first-child, .list-filedown > li:nth-child(2), .list-filedown > li:nth-child(3), .list-filedown > li:nth-child(4) {margin-top:0;} .list-filedown > li:nth-child(4n + 1) {margin-left:0;} .list-filedown > li:before, .list-filedown > li:after {content:'';display:block;position:absolute;height:0.1rem;bottom:1.5rem;border:0.1rem solid #d8d9dd;border-bottom:none;} .list-filedown > li:before {top:0;right:0.4rem;left:0.4rem;} .list-filedown > li:after {top:0.2rem;right:0.2rem;left:0.2rem;} .list-filedown > li strong {position:relative;display:block;overflow:hidden;width:100%;height:0;padding:134.4% 0 0;border:0.1rem solid #d8d9dd;} .list-filedown > li strong:after {content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-size:100% 100%;} .list-filedown > li > ul {display:none;position:absolute;right:0;left:0;top:100%;padding:0.5rem 1.2rem;border:0.1rem solid #b0b3bc;border-top:none;background:#fff;z-index:2;text-align:left;} .list-filedown > li > .btn-sub1 {display:block;overflow:hidden;margin:1.0rem 0 0;width:100%;padding-right:3.5rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;} .list-filedown > li > .btn-sub1:after {position:absolute;right:1.5rem;top:50%;margin:0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .list-filedown > li > .btn-sub1 span {overflow:hidden;position:absolute;width:1px ;height:1px ;opacity:0;} .list-filedown > li .info-file2 > li a {font-size:1.2rem;} .list-filedown > li.active > ul {display:block;} .list-filedown > li:nth-child(1) strong:after {background-image:url(../img/content/img_report1.png);} .list-filedown > li:nth-child(2) strong:after {background-image:url(../img/content/img_report2.png);} .list-filedown > li:nth-child(3) strong:after {background-image:url(../img/content/img_report3.png);} .list-filedown > li:nth-child(4) strong:after {background-image:url(../img/content/img_report4.png);} .list-filedown > li.data_hidden{display: none;} .mb .list-filedown{justify-content: flex-start;} .mb .list-filedown > li {width:calc(50% - 1.6rem); margin:1rem 0.8rem } .mb .list-filedown > li .info-file2 > li a {font-size:1.1rem;} .list-filedown.img2 {text-align:center;font-size:0;} .list-filedown.img2 > li strong:after {background:url(../img/content/co_ci_0105.png) #fff no-repeat 228% 156%;background-size:80%;} .list-filedown .txt {position:absolute;top:50%;left:50%;width:100%;color:#112369;font-size:1.4rem;transform:translate(-50%, -50%);z-index:1} .list-filedown > li strong.logo:before {position:absolute;top:1.0rem;left:1.0rem;content:'';width:11rem;height:3.0rem;display:inline-block;background:url(../img/com/icon_set1.png) no-repeat -48rem 0;background-size:60.0rem;z-index:1;} .pc .list-filedown.img2 > li {display:inline-block;float:none;} .pc .list-filedown .txt {font-size:2.0rem;} .mb .list-filedown > li strong.logo:before {height:2.2rem;background:url(../img/com/icon_set1.png) no-repeat -42.4rem 0;background-size:53rem;} .pc .page-ir02 .section .wrap-area5, .pc .page-ir04 .section .wrap-area5 {margin-top:18.0rem;padding-bottom:10.0rem;margin-bottom:-10.0rem;} .pc .page-ir02 .section .wrap-area5 .list-filedown {margin-top:-19.6rem;} .pc .page-ir04 .section .wrap-area5 .list-filedown {margin-top:-13rem;} /*-------------------------------------------------------------------------------- # PAGE : IR > 주요경영지표 ---------------------------------------------------------------------------------*/ .wrap-visual .visual {display:block;width:100%;margin:0 auto 3.5rem;} .pc .wrap-visual .visual {margin:0 auto 5.0rem;} .mb .wrap-visual .visual {max-width:46.8rem;} /*-------------------------------------------------------------------------------- # PAGE : IR > 사회책임경영 ---------------------------------------------------------------------------------*/ /* 공통 */ .page-ir04 .mes-headline1 {text-align:left;padding:0;} .page-ir04 .ui-tab-con.visual:before {content:'';display:block;height:0;margin:4.0rem 0 2.0rem;padding:0 0 22%;background:url(../img/content/ir0401_01.jpg) no-repeat 50% 0;background-size:100% 100%} .page-ir04 #uiTabCon1.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_01.png);} .page-ir04 #uiTabCon2.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_02.png);} .page-ir04 #uiTabCon3.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_03.png);} .page-ir04 #uiTabCon4.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_01.png);} .page-ir04 #uiTabCon5.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_01.png);} .page-ir04 .sign {margin-top:4.0rem;font-size:2.0rem;font-family:'OneShinhanM';text-align:center;} .page-ir04 .tit_sub_0{padding: 0; font-size: 2.4rem; line-height: 3.2rem; font-family: 'OneShinhanM'; color: #212121; margin: 4.2rem 0 1.6rem; font-weight: normal;} .page-ir04 .tit_sub_1{padding: 0; font-size: 2.4rem; line-height: 3.2rem; font-family: 'OneShinhanM'; color: #212121; margin: 7.2rem 0 1.6rem; font-weight: normal;} .page-ir04 .tit_sub_2{padding: 0; font-size: 2rem; line-height: 3.2rem; font-family: 'OneShinhanM'; color: #212121; margin: 3.2rem 0 1rem; font-weight: normal;} .page-ir04 .tit_sub_txt{text-align: left; padding: 0; font-size: 1.6rem; margin: 1.6rem 0;} .page-ir04 .list-con2{margin: 3rem 0;} .mb .page-ir04 .tit_sub_1{margin: 4rem -2.4rem 1.6rem; padding:3.2rem 2.4rem 0; border-top: 0.8rem solid #ebecee;;} .pc .page-ir04 .section .wrap-area5 {margin-top:13.0rem;} .mb .page-ir04 .ui-tab-con.visual:before {width:100vw;margin:-2.4rem -2.4rem 2.0rem;padding:0 0 55%;} .mb .page-ir04 #uiTabCon1.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_01_m.png);} .mb .page-ir04 #uiTabCon2.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_02_m.png);} .mb .page-ir04 #uiTabCon3.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_03_m.png);} .mb .page-ir04 #uiTabCon4.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_01_m.png);} .mb .page-ir04 #uiTabCon5.ui-tab-con.visual:before {background-image:url(../img/content/ir0401_01_m.png);} .mb .page-ir04 .mes-headline1 {margin: 2.8rem 0 2.8rem 0;} /* 탭1 : 사회공헌 */ /* 탭2 : 윤리경영 */ .pc .page-ir04 .area-btn2 + .list-con4 {margin:4.0rem 0 0;} .list-con4.icon1 > li:nth-child(1):after {background-position:0 -8.0rem;} .list-con4.icon1 > li:nth-child(2):after {background-position:-8.0rem -8.0rem;} .list-con4.icon1 > li:nth-child(3):after {background-position:-16.0rem -8.0rem;} /* 탭3 : 리스크관리 */ .pc .page-ir04 .wrap-area5 {margin-top:14.5rem;} .pc .page-ir04 .wrap-area5 .list-con4 {margin-top:-13.0rem;} .pc .page-ir04 .list-con4.col3 > li {margin-bottom: 3.2rem;} .pc .page-ir04 .list-con4.col3 > li:nth-child(3n + 1) {margin-left:0;} .pc .page-ir04 .list-con4.col3 > li:nth-child(1), .pc .page-ir04 .list-con4.col3 > li:nth-child(2) {align-self:flex-start;} .pc .page-ir04 .list-con4.col3 > li:nth-child(4) {margin-top:-11.0rem;} .pc .page-ir04 .list-con4.col3 > li:nth-child(5) {margin-top:-19.8rem;} .mb .page-ir04 .wrap-area5.mblock:before {top: 9.0rem;bottom: -8.6rem;} .mb .page-ir04 .wrap-area5.t1.mblock {padding-bottom:0;} .mb .page-ir04 .wrap-area5.t1.mblock:before {top: 9.0rem;bottom: -8.6rem;} .mb .page-ir04 .list-con4 {margin-top:3.2rem;} /*-------------------------------------------------------------------------------- # PAGE : 채용 > 서브메인 ---------------------------------------------------------------------------------*/ .page-hrmain .mes-headline1 {padding:0;margin:5.1rem 0 3.6rem;} .page-hrmain .mes-headline1 > strong:last-child {margin:1.3rem 0 0 0;} .page-hrmain div.mes-headline1 + .list-con3 {margin:-4.0rem 0 0;} .page-hrmain h2.tit-sub1 + .list-con3 {margin:4.0rem 0 0 0;} .pc .page-hrmain .header-visual, .pc .page-hrmain .header-visual:before {height:40.0rem;} /* icon설정 : 인사제도 */ .list-con3.icon1 > ul > li:nth-child(1) .tit:before {background-position:0 -480px;} .list-con3.icon1 > ul > li:nth-child(2) .tit:before {background-position:-120px -480px;} .list-con3.icon1 > ul > li:nth-child(3) .tit:before {background-position:-240px -480px;} .list-con3.icon1 > ul > li:nth-child(4) .tit:before {background-position:-360px -480px;} /* icon설정 : 인재육성 */ .list-con3.icon2 > ul > li:nth-child(1) .tit:before {background-position:0 -600px;} .list-con3.icon2 > ul > li:nth-child(2) .tit:before {background-position:-120px -600px;} .list-con3.icon2 > ul > li:nth-child(3) .tit:before {background-position:-240px -600px;} .list-con3.icon2 > ul > li:nth-child(4) .tit:before {background-position:-360px -600px;} /* icon설정 : 복리후생 */ .list-con3.icon3 > ul > li:nth-child(1) .tit:before {background-position:0 -720px;} .list-con3.icon3 > ul > li:nth-child(2) .tit:before {background-position:-120px -720px;} .list-con3.icon3 > ul > li:nth-child(3) .tit:before {background-position:-240px -720px;} .list-con3.icon3 > ul > li:nth-child(4) .tit:before {background-position:-360px -720px;} .list-con3.icon3 > ul > li:nth-child(5) .tit:before {background-position:-480px -720px;} .list-con3.icon3 > ul > li:nth-child(6) .tit:before {background-position:-600px -720px;} /*-------------------------------------------------------------------------------- # PAGE : 채용 > 채용공고 ---------------------------------------------------------------------------------*/ /* 입사지원 > 지원자약관동의 */ .form-agree1 > .info-con2 dd strong, .form-agree1 > .info-con2 dd span {display:block;} .form-agree1 > .info-con2 dd span {margin-top:1.0rem;} .form-agree1 > .info-con2 dd p {margin-top:0.5rem;} /* 입사지원 > 입력폼 */ fieldset[id^="uiAddForm"] + .area-btn2 {margin:-0.2rem 0 1.5rem;} /* 입사지원 > 합격자조회 */ .mes-template1 {margin:0 0 6.0rem;padding:6.0rem 0 6.4rem;border-top:0.1rem solid #9599a6;border-bottom:0.1rem solid #9599a6;} .mes-template1 .tit {margin-bottom:2.8rem;font-size:3.2rem;color:#212121;text-align:center;} .mes-template1 strong {font-family:'OneShinhanM';font-weight:normal;color:#212121;} .mes-template1.info {text-align:center;} .mes-template1.info p + p {margin:1.2rem 0 0;} /*-------------------------------------------------------------------------------- # PAGE : 기타 : 보안프로그램설치 ---------------------------------------------------------------------------------*/ .page-install .mes-headline1 {margin:3.6rem 0 2.0rem;padding:0;text-align:left;} /*-------------------------------------------------------------------------------- # PAGE : 기타 : 오류페이지 ---------------------------------------------------------------------------------*/ .page-system .mes-result1 {padding:0;} .page-system .mes-result1:after {background-position:-12.0rem 0;} .page-system .mes-result1 > p:first-child:not(:last-child) {margin:0 0 0.7rem;} .page-system .mes-result1 > p:first-child > strong:first-child {font-family:'OneShinhanL';font-weight:normal;} .page-system .mes-result1 > p ~ .tbl-data1 {margin:2.0rem 0 0;} .page-system .mes-result1 > p ~ .tbl-data1 td {color:#525252;} .page-system .mes-result1 > p + p {margin:1.0rem 0 0;} .page-system .mes-result1 > p ~ p.txt-info1 {display:inline-block;margin:3.2rem 0 0;} .pc .page-system .mes-result1:after {background-position:-18.0rem -12.0rem;} .pc .pop-modal1 .page-system .mes-result1 {margin:2.0rem 0 0;} #wrapper.page-system > #header ~ #container > #content header h1 {color:rgba(255,255,255,0);} /* 단일컨텐츠형 */ #wrapper.page-system > #container:first-child > #content {padding:0;} #wrapper.page-system > #container:first-child > #content header {overflow:hidden;height:0;padding:4.0rem 0 0;} #wrapper.page-system > #container:first-child > #content header:after {content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:18.0rem;background:url(../img/com/icon_set1.png) no-repeat -72.0rem 0;background-size:90.0rem;} #wrapper.page-system > #container:first-child > #content .section {padding:0;} .pc #wrapper.page-system > #container:first-child {position:absolute;left:0;right:0;top:50%;max-width:74.0rem;min-height:0;height:auto;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .pc.firefox #wrapper.page-system > #container:first-child .area-btn1 {overflow:visible;} .mb .page-system .wrap-area1 .bottom {text-align:center;padding:1.0rem 0;} .mb #wrapper.page-system > #container:first-child > #content header {position:relative;margin:0 0 3.0rem;padding:2.4rem 0 0;background:none;} .mb #wrapper.page-system > #container:first-child > #content header:after {left:50%;width:12.0rem;background-size:60.0rem;background-position:-48.0rem 0;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);} .mb #wrapper.page-system > #container:first-child > #content {position:absolute;left:2.4rem;right:2.4rem;top:50%;padding:0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .pc .page-system.endapp .wrap-area1{background-color:#bfe1fc} .pc .page-system.endapp .mes-result1:before{display: none;} .pc .page-system.endapp .mes-result1:after{display: none;} .pc .page-system.endapp .mes-result1{text-align: left} .pc .page-system.endapp .mes-result1 > p:not(.txt-info1){font-size:2.0rem;} .pc .page-system.endapp .mes-result1 > p:first-child{font-size:3.8rem;} .pc .page-system.endapp .mes-result1 > p:not(.txt-info1) strong{color:#0590e1;} .pc .page-system.endapp .mes-result1 > p:first-child:not(:last-child) strong{color: #473ac6} .pc .page-system.endapp .wrap-area1{border: 0.1rem solid #bfe1fc} .pc .page-system.endapp .wrap-area1:before{content:''; display: block; position: absolute; width: 23.6rem; height: 21.1rem; right: 0; bottom: 0; background:url(../img/com/bg_endapp.png); background-size:cover; } .pc .page-system.endapp .wrap-area1 .bottom{display: none;} .mb #wrapper.page-system.endapp{background-color: #bfe1fc} .mb #wrapper.page-system.endapp:before{content:''; display: block; position: absolute; width: 23.6rem; height: 21.1rem; right: 0; bottom: 0; background:url(../img/com/bg_endapp.png); background-size:cover; } .mb .page-system.endapp .mes-result1:before{background-color: #ffffff} .mb .page-system.endapp .wrap-area1 .bottom{display: none;} .mb .page-system.endapp .mes-result1 > p:not(.txt-info1) strong{color:#0590e1;} .mb .page-system.endapp .mes-result1 > p:first-child:not(:last-child) strong{color: #473ac6} #wrapper.page-system.endapp > #container:first-child > #content header:after{} /*-------------------------------------------------------------------------------- # PAGE : 기타 : 점검중페이지 ---------------------------------------------------------------------------------*/ .page-system.t2 .mes-result1 > p:first-child:not(:last-child) {margin:0 0 4.0rem;} /*-------------------------------------------------------------------------------- # PAGE : 기타 : 앱전용페이지 ---------------------------------------------------------------------------------*/ /* 앱 접근권한 안내 */ .page-appinfo1 .mes {position:relative;margin:0 0 3.0rem;padding:11.6rem 0 3.0rem;color:#757575;text-align:center;} .page-appinfo1 .mes:before, .page-appinfo1 .mes:after {content:'';display:block;position:absolute;} .page-appinfo1 .mes:before {top:0.8rem;left:50%;width:9.0rem;height:9.0rem;border:0.1rem solid #ebecee;border-radius:1.5rem;background:url(../img/com/icon_set1.png) no-repeat -32.0rem -7.0rem;background-size:40.0rem;transform:translate(-50%, 0);} .page-appinfo1 .mes:after {right:-2.4rem;bottom:0;left:-2.4rem;height:0.1rem;background:#d7d9dd;} .page-appinfo1 dt {position:relative;padding:0 0 0 5.4rem;color:#212121;font-family:'OneShinhanM';} .page-appinfo1 dd {padding:0 0 0 5.4rem;font-size:1.2rem;} .page-appinfo1 dd + dt {margin:2.0rem 0 0;} .page-appinfo1 dt:before, .page-appinfo1 dt:after {content:'';display:block;position:absolute;} .page-appinfo1 dt:before {top:0;left:0;width:4.0rem;height:4.0rem;border-radius:2.0rem;background:linear-gradient(-45deg, #4056c1, #1b75d3);} .page-appinfo1 dt:after {top:0.8rem;left:0.8rem;width:2.4rem;height:2.4rem;background:url(../img/com/icon_set1.png) no-repeat 0 0;background-size:40.0rem;} .page-appinfo1 dt:nth-of-type(1):after {background-position: 0 -14.0rem;} .page-appinfo1 dt:nth-of-type(2):after {background-position: -4.0rem -14.0rem;} .page-appinfo1 dt:nth-of-type(3):after {background-position: -8.0rem -14.0rem;} @media only screen and (min-height:600px) { .mb .page-appinfo1 .area-btn1 {position:fixed;right:2.4rem;bottom:2.4rem;left:2.4rem;} } /*-------------------------------------------------------------------------------- # PAGE : 영문 > CEO's Greeting ---------------------------------------------------------------------------------*/ /*.page-en01 .section:before {content:'';display:block;position:absolute;top:10.0rem;right:0;width:28.8rem;height:45.0rem;background:url(../img/eng/visual_ceo.png) no-repeat;box-shadow:-15px 15px 0 rgba(97,102,122,0.2);}*/ .page-en01 .section:before {content:'';display:block;position:absolute;top:10.0rem;right:0;width:28.8rem;height:45.0rem;background:url(../img/eng/visual_ceo.png) no-repeat;} .page-en01 p {margin-bottom:1.6rem;} .page-en01 .section > p:first-of-type {font-size:2.0rem;font-family:'OneShinhanM';} .page-en01 .wrap-area5 p:last-of-type {margin:0;font-size:2.0rem;} .page-en01 .wrap-area5 p:last-of-type > strong {color:#212121;font-family:'OneShinhanM';font-weight:normal;} .pc #container > #content.page-en01 > .section {padding-right:37.0rem;} .pc .page-en01 .wrap-area5 {margin-top:1.6rem;padding-top:1.6rem;} .pc .page-en01 .wrap-area5:before {left:calc(50% + 18.5rem);} /*-------------------------------------------------------------------------------- # PAGE : 영문 > Company Overview ---------------------------------------------------------------------------------*/ .graph-data1 > ul {display:table;width:100%;height: 38.1rem;padding:0 0 3.0rem;border-top:0.1rem solid #ebecee;background: repeating-linear-gradient(white, white 4.9rem, #ebecee 5.0rem);} .graph-data1 > ul > li {display:table-cell;position:relative;height:100%;text-align:center;} .graph-data1 > ul > li > dl {position:absolute;bottom:0;left:0;width:100%;font-size:0;} .graph-data1 > ul > li > dl dt {position:absolute;top:100%;left:0;width:100%;font-size:1.4rem;color:#757575;line-height:3.0rem;} .graph-data1 > ul > li > dl dd {display:inline-block;width:8.0rem;background:#b4d5f2;} .graph-data1 > ul > li:last-of-type > dl dd {background:linear-gradient(#0082d0, #3166c3);} .graph-data1 > ul > li > dl dd span {position:absolute;top:-2.8rem;left:0;width:100%;font-size:1.4rem;color:#525252;} .graph-data1 > ul > li:last-of-type > dl dd span {color:#112369;font-family:'OneShinhanM';font-weight:normal;} .page-en02 .section:after {content:'';display:block;clear:both;} .page-en02 .graph-data1 {width:45%;width:calc(50% - 3.6rem);margin-top:3.5rem;float:left;} .page-en02 .graph-data1:nth-of-type(2n) {margin-left:7.2rem;} .txt-rate {position:relative;} .txt-rate:before {content:'';display:inline-block;width:1.4rem;height:0.9rem;margin:0 0.5rem 0 0;} .txt-rate > em {overflow:hidden !important;position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;padding:0 !important;} .txt-rate.t1:before {background:url(../img/eng/ico_txt_rate.png) no-repeat;} /*-------------------------------------------------------------------------------- # PAGE : 영문 > Corporate History ---------------------------------------------------------------------------------*/ .page-en03 .list-con1.list-timeline {border-top:none;} /*-------------------------------------------------------------------------------- # PAGE : 영문 > Business Fields ---------------------------------------------------------------------------------*/ .page-en04 .ui-tab-con {padding:28.0rem 0 0;background:url(../img/eng/business.png) no-repeat 0 0;} .page-en04 .ui-tab-con p + p {margin-top:1.6rem;} /*-------------------------------------------------------------------------------- # PAGE : 영문 > Location ---------------------------------------------------------------------------------*/ .page-en05 .tab-sub1 li a {padding:1.1rem 0 1.3rem;} .list-local:after {content:'';display:block;clear:both;} .list-local > li {width:45%;width:calc(50% - 1.2rem);float:left;} .list-local > li:nth-child(2n) {margin-left:2.4rem;} .list-local > li:nth-child(2) ~ li {margin-top:2.4rem;} .list-local > li > a {display:block;position:relative;height:18.0rem;padding:2.4rem 19.0rem 0 4.0rem;border:0.1rem solid #d8d9dd;background:#fff;} .list-local > li > a:hover {box-shadow:6px 6px 0 rgba(215,217,221,0.5);} .list-local > li > a span {display:block;color:#525252;} .list-local > li > a span:first-of-type {margin:0 0 1.2rem;} .list-local > li > a strong {display:block;position:relative;margin:0 0 0.6rem;padding:0.8rem 0 0;color:#0082d0;font-family:'OneShinhanM';font-weight:normal;font-size:1.6rem;} .list-local > li > a strong:before {content:'';display:block;position:absolute;top:0;left:0;width:1.2rem;height:0.2rem;background:#0082d0;} /* 지도 이미지 */ .list-local > li > a:after {content:'';display:block;position:absolute;top:1.4rem;right:3.7rem;width:9.2rem;height:15.0rem;background:url(../img/eng/location.png) no-repeat;} .list-local > li:nth-child(1) > a:after {background-position: 0 0;} .list-local > li:nth-child(2) > a:after {background-position: -92px 0;} .list-local > li:nth-child(3) > a:after {background-position: 0 -150px;} .list-local > li:nth-child(4) > a:after {background-position: -92px -150px;} /* [20221216-003 조영찬] 지역 부산 에서 서울로 변경. */ .list-local > li:nth-child(5) > a:after {background-position: -92px -300px;} .list-local > li:nth-child(6) > a:after {background-position: -92px -300px;} .list-local > li:nth-child(7) > a:after {background-position: 0 -450px;} /*-------------------------------------------------------------------------------- # PAGE : 기타 ---------------------------------------------------------------------------------*/ /* 보이스피싱 피해예방 동영상 */ .wrap-movie > * {display:inline-block;vertical-align:top;margin:1.0rem 0;} .wrap-movie .movie {width:60.0rem;height:33.8rem;color:#fff;text-align:center;line-height:33.8rem;background:#000;} .wrap-movie .subtitle {width:100%;height:19.0rem;padding:0.8rem 0.5rem 0.8rem 1.0rem;background:#f5f7fa;} .wrap-movie .subtitle p {text-align:center;} .wrap-movie .subtitle p + ul {margin-top:1.5rem;} .wrap-movie .subtitle li + li {margin:0.7rem 0 0;} .wrap-movie .subtitle li > span:first-child {display:inline-block;font-family:'OneShinhanM';} .mb .wrap-movie .subtitle {display:none;} .mb .wrap-movie {position:relative;width:100%;height:0;padding:60% 0 0;} .mb .wrap-movie .movie {position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:auto;} /* 이탈방지 팝업 */ .pop-modal1 p.tit-sub1 {margin:0 0 2.0rem;text-align:center;} .mb .pop-modal1 .tit-sub1 {margin:0 0 1.0rem;font-family:'OneShinhanL'} .list-con1.icon1 > li:nth-child(1):after {background-position:-960px -12.0rem;} .list-con1.icon1 > li:nth-child(2):after {background-position:-990px -12.0rem;} .mb .list-con1.icon1 > li:nth-child(1):after {background-position:-32.0rem 0;} .mb .list-con1.icon1 > li:nth-child(2):after {background-position:-36.0rem 0;} /*-------------------------------------------------------------------------------- # PAGE : 공통 : 간략 약관 ---------------------------------------------------------------------------------*/ .info-t1 {margin:1.0rem 0 0;} .info-t1 > dt {font-family:'OneShinhanM';margin-bottom:0.4rem;} .info-t1 > dd {padding:0.8rem 1.3rem;background:#f7f9fa;} .info-t1 > dd > ul > li {display:inline-block;line-height:2.4rem;} .info-t1 > dd > ul > li:not(:last-child):after {content:'';display:inline-block;height:0.6rem;margin:0 1.3rem;border-right:0.1rem solid #d7d9dd;} .info-t1 > dd > ul > li > span:first-child:after {content: ' : ';} .mb .info-t1 > dd > ul > li {display:block;} .mb .info-t1 > dd > ul > li:not(:last-child):after {display:none;} /*-------------------------------------------------------------------------------- # PAGE : 컨텐츠유형1 : 약관 ---------------------------------------------------------------------------------*/ /* 기본구조 */ .con-t1 {font-size:1.3rem;line-height:2.2rem;} .con-t1 .tit1 {display:block;margin:1.2em 0 0.5em;font-size:1.15em;font-family:'OneShinhanM';color:#212121;font-weight:normal;} .con-t1 .tit1 ~ dl, .con-t1 .tit1 ~ ul {margin:0.6rem 0 0;} .con-t1 .tit2 {display:block;margin:1.2rem 0 0.5rem;font-size:1.05em;font-family:'OneShinhanM';color:#333;} .con-t1 .tit2 + ul {margin-bottom:3.2rem;} .con-t1 .tit2 + dd {color:#525252;} .con-t1 .tit2 + dd:last-child {margin-bottom:1.2rem;} .con-t1 p ~ ol {margin-top:1.2em;} .con-t1 ol ~ p {margin-top:1.2em;} .con-t1 td ol > li + li {margin-top:0;} .con-t1 .txt-bul1 > dt {margin:1.2rem 0 0;} .con-t1 .txt-bul1 > dd {margin:0.4rem 0 0;} .con-t1 .txt-bul1.t1 {overflow:hidden;} .con-t1 .txt-bul1.t1 > li {clear:both;} .con-t1 .txt-bul1.t1 em.txt-line {color:#525252;} .con-t1 .align1 {text-align:left !important;} /* 기본구조 : dl형 */ .con-t1 dl.tit-sub1 > dt:first-child {margin-top:0 !important;} .con-t1 dl.tit-sub1 > dd ~ dt {margin:6.6rem 0 1.0rem;} .con-t1 dl.tit-sub1 > dd > ol {margin-top:2.7rem;} .con-t1 dl.tit-sub1 > dd > .txt-num.num {margin-bottom:3.2rem;} .con-t1 dl.tit-sub1 > dd > .txt-bul3 {margin:0.6rem 0 3.2rem;} .con-t1 dl.tit-sub1 > dd > .txt-bul3 em:not([class*="tit"]) {display:block;margin-top:1.2rem;font-family:'OneShinhanM';} .con-t1 dl.tit-sub2 > dt {font-size:1.6rem;line-height:2.4rem;} .con-t1 dl.tit-sub2 > dd > .txt-num {margin:0.6rem 0;} .con-t1 dl.tit-sub2 > dd > .txt-num.num {margin-bottom:1.2rem;} .con-t1 dl.tit-sub2 dt.hide + dd .tbl-data1 {margin-top:2.0rem;} /* 기본구조 : dl 토글형가공 */ .con-t1 dl[class*="tit-sub"].toggle {border-top:0.1rem solid #9599a6;border-bottom:0.1rem solid #9599a6;} .con-t1 dl[class*="tit-sub"].toggle > dt {position:relative;margin:0;padding:1.6rem 4.0rem 1.7rem 1.6rem;border-top:0.1rem solid #d7d9dd;} .con-t1 dl[class*="tit-sub"].toggle > dt:first-child {border-top:0;} .con-t1 dl[class*="tit-sub"].toggle > dt button {display:block;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;color:rgba(255,255,255,0);text-align:right;outline:0;} .con-t1 dl[class*="tit-sub"].toggle > dt button:before, .con-t1 dl[class*="tit-sub"].toggle > dt button:after {content:'';position:absolute;top:3.1rem;right:2.5rem;display:block;width:1.3rem;height:0.1rem;background:#b0b3bc;} .con-t1 dl[class*="tit-sub"].toggle > dt button:after {-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);} .con-t1 dl[class*="tit-sub"].toggle > dd {display:none;padding:2.0rem 1.6rem;background:#f7f9fa;} .con-t1 dl[class*="tit-sub"].toggle > dt.active {color:#0082d0;border-color:#9599a6;} .con-t1 dl[class*="tit-sub"].toggle > dt.active button:before, .con-t1 dl[class*="tit-sub"].toggle > dt.active button:after {background:#0082d0;} .con-t1 dl[class*="tit-sub"].toggle > dt.active button:after {top:3.2rem;-ms-transform:rotate(0deg);-webkit-transform:rotate(-180deg);transform:rotate(-180deg);} .con-t1 dl[class*="tit-sub"].toggle > dt.active + dd {display:block;} .con-t1 dl[class*="tit-sub"].toggle > dt.active + dd > dl.tit-sub2 > dt:first-child {margin-top:0;} .con-t1 dl[class*="tit-sub"].toggle > dt.active + dd .tbl-data1 th {background:#eff3f5;} .con-t1 dl[class*="tit-sub"][data-toggle-auto="pop"] > dt button {display:none;} .con-t1 dl[class*="tit-sub"].toggle[data-toggle-auto="pop"] > dt button {display:block;} .con-t1 dl.tit-sub1.toggle > dt {font-family:'OneShinhanL';font-size:1.8rem;} .mb .con-t1 dl.tit-sub1.toggle > dt {font-size:1.6rem;} .mb .con-t1 dl.tit-sub1.toggle > dt:before, .mb .con-t1 dl.tit-sub1.toggle > dt:after {display:none;} /* */ .con-t1 dl .tbl-data1 dt {font-family:'OneShinhanL';margin-bottom:0;} .con-t1 dl .tbl-data1 .txt-num dt {color:#525252;} .con-t1 dl dt.hide + dd > ol:first-child {margin:0;} .con-t1 > ol:first-child, .con-t1 dl:not(.ui-tab-con) > dt.hide + dd > ol:first-child, .con-t1 dl > dt.hide + dd > dl.tit-sub2:first-child {margin-top:-3.2rem;} .con-t1 > p {margin-top:-1.2rem;} /* 20180622 약관 수정 */ .pc .con-t1 dl > dt.hide + dd > dl.tit-sub2:first-child dt {margin:1.8rem 0 0.5rem;} /* 20180622 약관 수정 */ .pc .con-t1 dl.tit-sub2 dt.tit0 {font-size:1.8rem;}/*20210907 약관 수정*/ .pc .con-t1 dl.tit-sub2 dt.tit0:first-of-type {margin-top:1.2rem;} .con-t1 dl.tit-sub2 dd {word-break:break-all;} /* */ span.ex {vertical-align:top;} span.ex + .txt-bul1 {display:inline-block;margin:0 0 0 1.0rem;} span.ex + .txt-bul1 .txt-bul2 a {text-decoration:none;} /* 추가테이블스타일 */ .con-t1 .tbl {margin:1.0rem 0 0;} .con-t1 .tbl th {font-family:'OneShinhanM';text-align:left;color:#212121;} .con-t1 .tbl td {color: #757575;} .tbl-data1 th.line1 {border-right:0.1rem solid #d7d9dd;} .mb .con-t1 .tbl {margin:1.7rem 0 0;} .mb .con-t1 .tbl table {width: auto;} .mb .con-t1 .tbl th {display: block;} .mb .con-t1 .tbl td {display: block;position: relative;padding-left: 1.0rem;} .mb .con-t1 .tbl td:before {position: absolute;left: 0;top: 1.0rem;display: block;content: '';width: 0.2rem;height: 0.2rem;background: #525252;} .mb .con-t1 .tbl tr:not(:last-child) > td {padding-bottom: 1.6rem;} /* 정보형 테이블 : 정렬변경 */ .con-t1 .tbl-data1 {margin:0.5rem 0;} .con-t1 .tbl-data1 thead + tbody td {text-align:left;} .con-t1 .tbl-data1 th {background:#f7f9fa;} .con-t1 dl .tbl-data1 thead + tbody th {text-align:left;} .con-t1 dl .tbl-data1 thead + tbody td {text-align:center;} .mb .con-t1 .tbl-data1 th, .mb .con-t1 .tbl-data1 td {font-size:1.3rem;line-height:2.0rem;height:4.0rem;padding:0.5rem 1.0rem;} /* 기준일자정보 : 정렬 및 간격 */ .pc .con-t1 .tit-con + .txt-date1 {border:0;} .mb .con-t1 .txt-date1 {border-bottom: 0.1rem solid #ebecee;text-align:left;} /* 정보형 안내문구 스타일 */ .con-t1 .txt-info1 {display:block;margin:0.2rem 0;} .con-t1 .txt-info1.line:after {content:'';display: block;margin-top:1.6rem;height:1.6rem;border-top: 1px solid #d7d9dd;} .con-t1 .txt-info1 a {color:#fc4237;} /* 강조스타일 */ .con-t1 .fr {float:right;} .con-t1 .txt-line {font-size:1.14em; text-decoration:underline;} .con-t1 .txt-line, .con-t1 .txt-line > * {font-family:'OneShinhanM' !important;} .con-t1 .txt-bold {font-family:'OneShinhanM' !important;} /* 팝업 */ .pop-modal1 .con-t1 > ol {color: #525252;} .pop-modal1 .con-t1 > ol .tit1 ~ dl, .pop-modal1 .con-t1 > ol .tit1 ~ ul {margin:0;} /* 모바일토글 PC스타일추가 */ .pc .con-t1 .wrap-toggle2 > dd {padding:0 0 2.0rem;} /* 본인동의 */ .con-t1 .box-t5 {margin:1.0rem 0;padding:1.5rem;border:0.1rem solid #d7d9dd;} .con-t1 .box-t5 .info-sign.multi {margin:1.5rem 0 0;} .con-t1 .info-sign {margin:3.2rem 0;} .con-t1 .info-sign span {display:inline-block;min-width:16.0rem;word-break:break-all} .con-t1 .info-sign.multi {text-align:right;} .con-t1 .info-sign.multi p {display:inline-block;text-align:right;} .con-t1 .info-sign.multi p + p {margin-left:2.5rem} .con-t1 .info-sign.multi span {border-bottom:0.1rem solid #525252;text-align:center;} .mb .con-t1 .info-sign.multi span {min-width:10rem;} .mb .con-t1 .info-sign.multi p + p {margin-left:1rem;} /* 넘버링 직접입력 : .txt-num.num */ .con-t1 .txt-num.num > dt:not(.tit1) {padding-left:1.0rem;} .con-t1 .txt-num.num > dt:not(.tit1):before {position:absolute;left:0;top:1.0rem;display:block;content:'';width:0.2rem;height:0.2rem;background:#525252;} .con-t1 .txt-num.num > dt:not(.tit1) ~ dd {margin: 0 0 0 1.0rem;} .con-t1 .txt-num.num > dt:not(.tit1) ~ dd > span, .con-t1 .txt-num.num:not(ul):not(dl) > span {display:inline-block;float:left;margin: 0 0 0 -1.8rem} .con-t1 .txt-num.num > li + li {margin-top: 0rem;} /* 기획서랑 불릿 맞추기 위해 추가한 .t1 (까만네모), .t2(흰네모) 원래대로 정리하려면 그냥 지우면 됨 */ .con-t1 .txt-bul1.t1:not(ul):not(dl):before, .txt-bul1.t1 > li:before, .txt-bul1.t1 > dd:before {top:0.8rem;width:0.7rem;height:0.7rem;} .con-t1 .txt-bul2.t1 > dt:before, .con-t1 .txt-num.num.t1 > dt:before {top:0.8rem;width:0.7rem;height:0.7rem;} .con-t1 .txt-bul1.t2:not(ul):not(dl):before, .txt-bul1.t2 > li:before, .txt-bul1.t2 > dd:before {top:0.8rem;width:0.5rem;height:0.5rem;border:0.1rem solid #525252;background:none;} .con-t1 .txt-bul2.t2 > dt:before, .con-t2 .txt-num.num.t1 > dt:before {top:0.8rem;width:0.5rem;height:0.5rem;border:0.1rem solid #525252;background:none;} .con-t1 .txt-num > li + li, .con-t1 .txt-num > dd, .con-t1 .txt-bul1 > li + li, .con-t1 .txt-bul1 > dd {margin:0;} .con-t1 li li li, .con-t1 li li li:before, .con-t1 li dd, .con-t1 li dd:before {color:#757575;} .con-t1 .sub-con {margin:1.6rem 0;padding:2.0rem;background:#f7f9fa;font-size:1.2rem;} .con-t1 .sub-con .tit {display:block;font-family:'OneShinhanM';font-size:1.4rem;} .con-t1 .sub-con .tit ~ ul {margin-top:1.2rem;} .con-t1 .input {overflow:hidden;display:inline-block;width:10.0rem;border:0.1rem solid #d7d9dd;background:#f5f7fa;color:#f5f7fa;height:2.0rem;line-height:1.8rem;vertical-align:top;white-space:nowrap;} .con-t1 .tit-sub1 > dd > .tit1.line:before {content:'';display:block;margin-top:3.5rem;height:3.5rem;border-top:1px solid #d7d9dd;} .con-t1 .con-line {margin:1.5rem 0;padding:1.5rem 0 0;border-top:0.1rem solid #d7d9dd;} .pc .pop-modal1 .content.con-t1 p.txt-date1 + ol {margin-top:1.0rem;padding-top:1.6rem;border-top: 0.1rem solid #d7d9dd;} /* 바닥컨텐츠 스타일 재가공 */ #container .section .con-t1 > dl.tit-sub1 > dt:only-of-type {overflow:hidden;position:absolute;width:1px;height:1px;opacity:0;padding:0;} #container .section .line + .area-admin .con-t1 > .txt-date1:first-child {margin:1.2rem 0 0;} /* 박스약관 내부 스타일 재가공 */ .box-con1 .con-t1 {font-size:1.2rem;line-height:1.5;} .box-con1 .con-t1 dl.tit-sub1 > dt {margin:1.2rem 0 0.5rem;font-size:1.2em;line-height:1.2;} .box-con1 .con-t1 dl.tit-sub2 > dt {margin:1.2rem 0 0;font-size:1.1em;line-height:1.4;} .box-con1 .con-t1 .tit1 {font-size:1.1em;} .box-con1 .con-t1 .tbl-data1 th, .box-con1 .con-t1 .tbl-data1 td {height:auto;padding:0.5em;font-size:1em;} .box-con1 .con-t1 .txt-info1:not(ul):not(dl), .box-con1 .con-t1 .txt-info1 > li, .box-con1 .con-t1 .txt-info1 > dt, .box-con1 .con-t1 .txt-info1 > dd {padding:0 0 0 1.7rem;} .box-con1 .con-t1 .txt-info1:not(ul):not(dl):before, .box-con1 .con-t1 .txt-info1 > li:before, .box-con1 .con-t1 .txt-info1 > dt:before {top:0.3rem;width:1.0em;height:1.0em;} .box-con1 .con-t1 .txt-info1:not(ul):not(dl):after, .box-con1 .con-t1 .txt-info1 > li:after, .box-con1 .con-t1 .txt-info1 > dt:after {width:0.15em;height:0.1em;margin:0.5em;} .box-con1 .con-t1 > ol:first-child, .box-con1 .con-t1 dl:not(.ui-tab-con) > dt.hide + dd > ol:first-child, .box-con1 .con-t1 dl > dt.hide + dd > dl.tit-sub2:first-child {margin-top:-1.2rem;} .box-con1 .con-t1 dl.tit-sub1:only-of-type > dt:only-of-type {display:none;} .box-con1 .con-t1 dl.tit-sub1:only-of-type > dt:only-of-type + dd > ol {margin-top:-1.2rem;} .mb .box-con1 .con-t1 {font-size:1.1rem;} .mb .box-con1 .tit-sub1:not(dl), .mb .box-con1 dl.tit-sub1 > dt {padding-top:0;} .mb .box-con1 .tit-sub1:not(dl):before, .mb .box-con1 dl.tit-sub1 > dt:before {display:none;} /* admin 글자수제한으로 넘버링 수정 txt-num num2 */ .txt-num.num2 > li:nth-child(1):before {content:'①';} .txt-num.num2 > li:nth-child(2):before {content:'②';} .txt-num.num2 > li:nth-child(3):before {content:'③';} .txt-num.num2 > li:nth-child(4):before {content:'④';} .txt-num.num2 > li:nth-child(5):before {content:'⑤';} .txt-num.num2 > li:nth-child(6):before {content:'⑥';} .txt-num.num2 > li:nth-child(7):before {content:'⑦';} .txt-num.num2 > li:nth-child(8):before {content:'⑧';} .txt-num.num2 > li:nth-child(9):before {content:'⑨';} .txt-num.num2 > li:nth-child(10):before {content:'⑩';} .txt-num.num2 > li:nth-child(11):before {content:'⑪';} .txt-num.num2 > li:nth-child(12):before {content:'⑫';} .txt-num.num2 > li:nth-child(13):before {content:'⑬';} .txt-num.num2 > li:nth-child(14):before {content:'⑭';} .txt-num.num2 > li:nth-child(15):before {content:'⑮';} /*-------------------------------------------------------------------------------- # PAGE : 컨텐츠유형1 : 약관 > 문서형식 ---------------------------------------------------------------------------------*/ /* 기본 */ .con-t1-doc {margin:0 0 3.0rem 0;} /* 타이틀 가운데 */ .con-t1-doc > dt {margin:0 0 1.6rem;color:#212121;font-size:1.5em;line-height:1.3;text-align:center;font-family:'OneShinhanM';} /* 날짜 (오른쪽) */ .con-t1-doc .date {margin:1.0rem 0;text-align:right;} .con-t1-doc .date span {display:inline-block;min-width:15.0rem;text-align:left;} .con-t1-doc .date + .sub-con {margin-top:0.6rem;} /* 서명, 주소 등 정보 */ .con-t1-doc .info {margin:4.0rem 0;} .con-t1-doc .info th, .con-t1 .con-t1-doc .info td {padding:0 0.5rem 0.5rem 0.5rem;} .con-t1-doc .info th {color:#212121;text-align:right;font-family:'OneShinhanM';vertical-align:top;} .con-t1-doc .info td {vertical-align:middle;} .box-con1 .con-t1-doc > dt {font-size:1.2em;} /*-------------------------------------------------------------------------------- # PAGE : 컨텐츠유형2 : 일반컨텐츠 ---------------------------------------------------------------------------------*/ .con-t2 .tit1 {font-family:'OneShinhanM';margin:0 0 1.2rem;font-size:1.6rem;color:#212121;} .con-t2 .tit1 ~ .tit1 {margin-top:3.0rem;} .con-t2 > dl > dt {font-family:'OneShinhanM';font-size:1.4rem;} .con-t2 .txt-bul1 > dt {margin:0 0 0.5rem;} .con-t2 .txt-bul1 > dd ~ dt {margin-top:3.0rem;} .con-t2 .txt-bul1 > dd {margin:0.5rem 0 0;} .con-t2 > p + p, .con-t2 > p + ul {margin:1.0rem 0 0;} .con-t2 .tit1 {font-size:1.6rem;} .pc .con-t2 .txt-bul1 {margin:0 0 0 1.0rem;} .pc .con-t2 .txt-bul1 > dt {margin-left:-1.0rem;} .pc .con-t2 .tit-sub2 + .txt-bul1 {margin-top:-0.5rem;} .pc .con-t2 > dl > dt {font-size:1.6rem;} .pc .con-t2 > p + p {margin:1.2rem 0 0;} /*-------------------------------------------------------------------------------- # PAGE : 컨텐츠유형3 : 채용간략약관형 ---------------------------------------------------------------------------------*/ .con-t3 ul, .con-t3 li {border:0 !important;} .con-t3 dl > dt {font-family:'OneShinhanM';} .con-t3 dl > dd + dt {margin:1.2rem 0 0;} .con-t3 dl dl {margin-left:1.4rem;} .con-t3 dl dl > dt {margin:0.6rem 0 0;} /*-------------------------------------------------------------------------------- # PAGE : 통합 프로그램 설치(퍼블 확인용/임시 - 개발/운영 반영 시, .pub 삭제, 'wizvera > install_pc.css' 로 이동 ---------------------------------------------------------------------------------*/ .pub #pcInfo_area {margin:4.0rem 0 0;font-size:1.4rem;} .pub #pcInfo_area ul {position:relative;overflow:hidden;margin:1.0rem 0;padding:3.9rem;border:0.1rem solid #d7d9dd;} .pub #pcInfo_area ul li {position:relative;padding:0 0 0 1.2rem;} .pub #pcInfo_area ul li em {color:#0082d0;} .pub #pcInfo_area ul li:before {position:absolute;left:0;top:1.0rem;display:block;content:'';width:0.2rem;height:0.2rem;background:#525252;} /*-------------------------------------------------------------------------------- # PAGE : 앱 다운로드 ---------------------------------------------------------------------------------*/ .page.app-down {background:url(../img/com/bg_appdown.png) no-repeat 50% bottom;background-size:cover;} .page.app-down .mes-headline1 {margin:1.6rem 0 0 0;} .page.app-down .mes-headline1 > strong {margin:0 0 0.6rem;font-size:2.2rem;line-height:3.1rem;} .page.app-down .mes-headline1 > strong + span {line-height:1.4;} .page.app-down .area-btn1 {margin:1.7rem 0;} .page.app-down .area-btn1:before {display:block;content:'';padding:30.0rem 0 0 0;margin:0 auto;width:31.2rem;background:url(../img/com/icon_appdown.png) no-repeat 0 0;background-size:40.0rem 40.0rem;} .page.app-down .area-btn1 .btn-download {margin:0 auto;width:19.6rem;height:5.5rem;background:#fff;border:0.1rem solid #61667a;border-radius:0.6rem;} .page.app-down .area-btn1 .btn-download span {display:inline-block;margin:0 auto;height:3.2rem;text-indent:-9999px;} .page.app-down .area-btn1 .btn-download.dl-apple span {width:12.4rem;background:url(../img/com/icon_appdown.png) no-repeat 0 -30.0rem;background-size:40.0rem 40.0rem;} .page.app-down .area-btn1 .btn-download.dl-android span {width:13.4rem;background:url(../img/com/icon_appdown.png) no-repeat 0 -33.2rem;background-size:40.0rem 40.0rem;} /*-------------------------------------------------------------------------------- # PAGE : sms 접속 - 2018.06.22 추가 ---------------------------------------------------------------------------------*/ .mb .page-sms #container > #content .section {padding:0;} .page-sms .section > .mes-t2 {margin:0 0 3.0rem;} .page-sms .section > .mes-t2 > .tit-sub1 {margin-top:0;padding:1.0rem 0 0;} .page-sms .section > .mes-t2 > .tit-sub1:before {display:none;} .page-sms .form-select {margin:1.6rem 0;padding:1.0rem 1.5rem 0.5rem;border:0.1rem solid #d7d9dd;} .page-sms .form-select > .label-check {display:block;} .page-sms .form-select > .label-check > li {position:relative;padding:0.4rem 0;} .page-sms .form-select > .label-check > li + li {border-top:0.1rem solid #d7d9dd;} .page-sms .form-select > .label-check > li > ul {border-top:0.1rem solid #ebecee;} .page-sms .form-select > .label-check > li > ul > li {padding:0 0 0 3.0rem;} .page-sms .form-select > .label-check > li .tit-sub2 {margin:0;} .page-sms .form-select > .label-check > li > .tit-sub2:first-child {padding:1.0rem;font-size:1.4rem;line-height:2.0rem;} .page-sms .label-check.listbox {padding:1.0rem 2.0rem 0.2rem 0;margin:0 -2.0rem 0 0;max-height:35.5rem;overflow-y:auto;} .page-sms .tbl-form .label-check label > input[type="radio"]:checked + span:before {width:0.8rem;height:0.4rem;background:none;border-left:0.2rem solid rgba(255,255,255,0);border-bottom:0.2rem solid rgba(255,255,255,0);border-color:#fff;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-radius:0;} .page-sms .area-info2 {min-height:6.0rem;} .page-sms .board-list.goodsList > li {padding:0;} .page-sms .board-list.goodsList > li > label {position:relative;display:block;padding:1.0rem 0 0.6rem 3.0rem;} .page-sms .board-list.goodsList > li .meta {position:absolute;top:0.8rem;right:0;margin:0;} .page-sms .board-list.goodsList > li input + .tit:before, .page-sms .board-list.goodsList > li input + .tit:after {content:'';display:block;position:absolute;top:50%;left:0;border-radius:50%;z-index:1;} .page-sms .board-list.goodsList > li input + .tit:after {margin:-0.9rem 0;width:1.8rem;height:1.8rem;border:0.1rem solid #b0b3bc;background:#fff;z-index:0;} .page-sms .board-list.goodsList > li input:checked + .tit:before {width:0.8rem;height:0.8rem;margin:-0.3rem 0.6rem;background:#0082d0;} .page-sms .board-list.goodsList > li input:checked + .tit:after {border-color:#0096d6;} .page-sms .board-list.goodsList > li .list-info1 {margin:0.5rem 0 0 0;} .page-sms .board-list.goodsList > li .list-info1 > li {font-size:1.2rem;line-height:1.2;} .page-sms .board-list.goodsList > li .list-info1 > li > span:first-child:before {top:0.5rem;} .page-sms .board-list.goodsList > li .list-info1 > li > span:only-child {color:#525252;} .page-sms .board-list.goodsList > li .list-info1 > li > span:only-child:after {display:none;} /*-------------------------------------------------------------------------------- # PAGE : 고객센터 > 금융소비자보호 ---------------------------------------------------------------------------------*/ .info-treemap3 {position:relative;max-width:49%;margin:0 auto} .info-treemap3:after {content:'';display:block;position:absolute;top:0;left:12.5rem;width:0.1rem;height:100%;background:#b0b3bc;z-index:-1;} .info-treemap3 li {display:block;position:relative;vertical-align:top;} .info-treemap3 > li + li {margin:3.0rem 0 0;} .info-treemap3 > li > span {display:inline-block;width:25.0rem;padding:1.3rem 1.5rem 1.2rem;color:#fff;text-align:center;background:#4f525e;} .info-treemap3 > li > span.ceo {vertical-align:middle;background:#112369;} .info-treemap3 > li:nth-child(2) {margin-top:6.9rem} .info-treemap3 .group1 {position:absolute;right:0;margin:0} .info-treemap3 .group1:after {position:absolute;top:50%;right:0;display:inline-block;content:'';width:40.5rem;height:0.1rem;background:#b0b3bc;z-index:-1;} .ie .info-treemap3 .group1:after, .edge .info-treemap3 .group1:after {width:40.8rem} .info-treemap3 .group1 li {display:block;position:relative;text-align:center;vertical-align:top;} .info-treemap3 .group1 > li + li {margin:2.0rem 0 0;} .info-treemap3 .group1 > li > span {display:inline-block;vertical-align:middle;width:25rem;padding:1.3rem 1.5rem 1.2rem;background:#7d86a7;color:#fff;text-align:center;} .info-treemap3 .group1 li:nth-child(2) {margin-top:8.0rem} .pc .info-treemap3 li span {height:6.9rem;} .pc .info-treemap3 > li > span.ceo, .pc .info-treemap3 .group1 > li > span {display:table-cell;} .mb .info-treemap3 {max-width:45.0rem;} .mb .info-treemap3 li {text-align:left;} .mb .info-treemap3 > li > span {width:45%;} .mb .info-treemap3:after {left:22.5%;} .mb .info-treemap3 .group1 {width:45%;margin:0} .mb .info-treemap3 .group1 > li > span {width:100%} .mb .info-treemap3 .group1:after {left:auto;right:0;width:172%} @media only screen and (min-width:768px) { .mb .info-treemap3 .group1 {top:5.9rem;} }