@charset "utf-8"; /* ****************************************************** 00. Common : 전체 공통사항 01. Font : 폰트 02. Color : 색상 03. Layout : 레이아웃 04. Table : 테이블 05. Button : 버튼 06. Pop : 팝업 07. Icon : 아이콘 08. Etc : 기타 UI *******************************************************/ /* ****************************************************** 00. common *******************************************************/ .fixed-body {} body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,div,figure,article,header,nav,footer,section,aside {margin:0;padding:0;box-sizing:border-box;word-break:keep-all;word-wrap:break-word;white-space:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-weight:400;} a {display:inline-block;box-sizing:border-box;color:inherit;text-decoration:none;cursor:default;} abbr{text-decoration:none;} :-ms-input-placeholder{font-family: 'NotoSansKR', sans-serif;font-size:16px;color:#737373;font-weight:400;} ::-webkit-input-placeholder {font-family: 'NotoSansKR', sans-serif;font-size:16px;color:#737373;font-weight:400;} textarea::placeholder {font-family: 'NotoSansKR', sans-serif;color:#737373;font-weight:400;font-size:16px} img,fieldset,iframe {border:0;vertical-align:top} h1,h2,h3,h4,h5,h6 {font-weight:normal;} input:focus, textarea:focus {outline:1px solid #6db6ff;box-shadow:0 0 2px #6db6ff;} input,select {-webkit-appearance:none;vertical-align:middle;} table {width:100%;border-collapse:separate;border-spacing:0;} label{word-break:break-all;} legend,caption {position:absolute;height:0;overflow:hidden;} ul, li, ol{list-style:none} /*a[href]{color:#0373e4}*/ /* body{min-width:1024px}*/ /* body 에 min-width 잡을 경우 모든 팝업이 커지는 부작용 생김 (팝업이 iframe body 안에 있음) 이 너비 제어는 contents 클래스로 옮김 */ input:focus, textarea:focus{outline:1px solid #6db6ff;box-shadow:0 0 2px #6db6ff;} div.ui-select__label:focus {border:2px solid #87bef5 !important; border-radius:5px !important; height:100%;} [v-cloak]{display:none} /* vue 로딩시 mustach 태그가 안보이게 */ #___loading_div[v-cloak]{display:block;} #___loading_div{display:none;} /* .header {display:none !important;} */ .wrapper.top-fixed .container {padding-top:110px !important;} .container .contents {margin-bottom:0;min-width: 1024px;} /* 웹접근성을 위한 본문바로가기 링크 */ .direct-link {display:block;position:fixed;top:-40px;left:0;width:100%;height:40px;line-height:40px;background-color:#0373e4;text-align:center;color:#fff;z-index:1000;} .direct-link:focus {top:0;} /* 숨긴텍스트 스크린리더 적용*/ [hidden], .hidden {position:absolute;top:0;left:0;display:inline-block;overflow:hidden;border:0;width:1px !important;height:1px !important; margin:-1px !important;clip:rect(1px,1px,1px,1px);clip-path: inset(50%);font-size:0;line-height:0;} .blind {display:inline-block;overflow:hidden;border:0;width:1px !important;height:1px !important; margin:-1px !important;clip:rect(1px,1px,1px,1px);clip-path: inset(50%);font-size:0;line-height:0;} div,h1,h2,h3,h4,h5,p,span,a,li,ul,ol,dt,dl,dd,table,td,th,i,small,u,strong,button,textarea,input{font-family: 'NotoSansKR', sans-serif;} a{text-decoration:none;} a,button,input[type=button] {cursor:pointer !important;} button {border:0 none;} button:hover {opacity:.7;} a[class*=icon]:hover {opacity:.7;} .text-btn:hover,.text-btn.arrow:hover {color:#0373e4;} .text-btn.v2:hover {opacity:1;} .icon-btn:hover {opacity:.7;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin:0;} input[type=number]{-moz-appearance: textfield;} textarea.type01 {borser:1px solid #e0e0e0; border-radius:3px; padding:14px;} .letter{letter-spacing:normal !important} .under{text-decoration:underline !important} html.fix{overflow-y:hidden} .d_t{display:table;width:100%;height:100%;table-layout:fixed} .d_t .d_c{display:table-cell;width:100%;vertical-align:middle} .text_c{text-align:center !important;} .text_l{text-align:left !important;} .text_r{text-align:right !important;} .vertical_t{vertical-align:top !important;} .vertical_m{vertical-align:middle !important;} .vertical_b{vertical-align:bottom !important;} /* 사업자보증 심사시스템 개편 사업 추가 start */ .flex-d-row {flex-direction:row !important;} .flex-d-column {flex-direction:column !important;} /* 사업자보증 심사시스템 개편 사업 추가 end */ .fl{float:left !important;} .fr{float:right !important} .clear{clear:both;} .text-underline {text-decoration:underline;} .d-flex{display:flex;} .d-inline{display:inline;} .d-block{display:block !important;} .d-iblock{display:inline-block !important;} .no-wrap {flex-wrap: nowrap !important;} .align-start {align-items:flex-start;} .align-end {align-items:flex-end !important;} .align-center {align-items:center;align-content:center;} .justify-center{justify-content:center;} .justify-start{justify-content:flex-start;} .justify-end{justify-content:flex-end;} .space-between {justify-content:space-between;} .w100 {width:100% !important;} .w36 {width:36% !important;} .w40 {width:40% !important;} .w41 {width:41% !important;} /* 사업자보증 심사시스템 개편 사업 추가 start */ .w46_7 {width:46.7% !important;} .w48 {width:48% !important;} .w49 {width:49.5% !important;} .w50 {width:50% !important;} .w51 {width:51% !important;} .w53 {width:53% !important;} .w57 {width:57% !important;} .w70 {width:70% !important;} .w80 {width:80% !important;} .w82 {width:82% !important;} .w90 {width:90% !important;} .w94 {width:94% !important;} .w97 {width:97% !important;} .w20 {width:20% !important;} /* 사업자보증 심사시스템 개편 사업 추가 end */ .w33 {width:33%;} .w30px {width:30px !important;} .w50px {width:50px !important;} .w60px {width:60px !important;} .w70px {width:70px !important;} .w100px {width:100px !important} .w110px {width:110px !important} .w120px {width:120px !important;} .w150px {width:150px !important;} .w160px {width:160px !important;} .w165px {width:165px !important;} .w180px {width:180px !important;} .w190px {width:190px !important;} .w196px {width:196px !important;} .w200px {width:200px !important;} .w206px {width:206px !important;} .w240px {width:240px !important;} .w259px {width:259px !important;} .w260px {width:260px !important;} .w262px {width:262px !important;} .w270px {width:270px !important;} .w272px {width:272px !important;} .w290px {width:290px !important;} /* 사업자보증 심사시스템 개편 사업 추가 */ .w296px {width:296px !important;} /* 사업자보증 심사시스템 개편 사업 추가 */ .w300px {width:300px !important;} .w324px {width:324px !important;} .w360px {width:360px !important;} .w390px {width:390px !important;} .w400px {width:400px !important;} .w422px {width:422px !important;} .w452px {width:452px !important;} .w464px {width:464px !important;} .w470px {width:470px !important;} .w640px {width:640px !important;} .w770px {width:770px !important;} .mw240px {width:240px;} .mwidth70px {min-width:70px !important;} .mwidth80px {min-width:80px !important;} .tp4 {top:4px !important;} .text-left {text-align:left !important;} .text-center {text-align:center !important;} .text-right {text-align:right !important;} .text-inline {display:inline-block !important} .line-break {white-space: pre;} .img-responsive {width:100%;} .porelative {position:relative !important;} .poabsolute {position:absolute !important;} .ml-auto {margin-left:auto !important;} .mr-auto {margin-right:auto !important;} .mt-auto {margin-top:auto !important;} .mb-auto {margin-bottom:auto !important;} .mx0 {margin-left:0 !important;margin-right:0 !important;} .mx5 {margin-left:5px !important;margin-right:5px !important;} .mx10 {margin-left:10px !important;margin-right:10px !important;} .mx20 {margin-left:20px !important;margin-right:20px !important;} .mx30 {margin-left:30px !important;margin-right:30px !important;} .mx40 {margin-left:40px !important;margin-right:40px !important;} .mx50 {margin-left:50px !important;margin-right:50px !important;} .mx60 {margin-left:60px !important;margin-right:60px !important;} .mx70 {margin-left:70px !important;margin-right:70px !important;} .mx80 {margin-left:80px !important;margin-right:80px !important;} .mx90 {margin-left:90px !important;margin-right:90px !important;} .my0 {margin-top:0 !important;margin-bottom:0 !important;} .my10 {margin-top:10px !important;margin-bottom:10px !important;} .my20 {margin-top:20px !important;margin-bottom:20px !important;} .my30 {margin-top:30px !important;margin-bottom:30px !important;} .my40 {margin-top:40px !important;margin-bottom:40px !important;} .my50 {margin-top:50px !important;margin-bottom:50px !important;} .my60 {margin-top:60px !important;margin-bottom:60px !important;} .my70 {margin-top:70px !important;margin-bottom:70px !important;} .my80 {margin-top:80px !important;margin-bottom:80px !important;} .my90 {margin-top:90px !important;margin-bottom:90px !important;} .ma0 {margin:0 !important} .ma5{margin:5px !important} .ma10{margin:10px !important} .ma15{margin:15px !important} .ma20{margin:20px !important} .ma30{margin:30px !important} .ma40{margin:40px !important} .ma50{margin:50px !important} .ma60{margin:60px !important} .ma70{margin:70px !important} .ma80{margin:80px !important} .ma90{margin:90px !important} .mt-2 {margin-top:-2px !important;} .mt-7 {margin-top:-7px !important;} .mt-10 {margin-top:-10px !important;} .mt-20 {margin-top:-20px !important} .mt-40 {margin-top:-40px !important} .mt-57 {margin-top:-57px !important} .mt0{margin-top:0 !important} .mt2{margin-top:2px !important} .mt3{margin-top:3px !important} .mt4{margin-top:4px !important} .mt5{margin-top:5px !important} .mt6{margin-top:6px !important} .mt7{margin-top:7px !important} .mt8{margin-top:8px !important} .mt10{margin-top:10px !important} .mt15{margin-top:15px !important} .mt20{margin-top:20px !important} .mt25{margin-top:25px !important} .mt30{margin-top:30px !important} .mt33{margin-top:33px !important} .mt35{margin-top:35px !important} .mt40{margin-top:40px !important} .mt50{margin-top:50px !important} .mt60{margin-top:60px !important} .mt70{margin-top:70px !important} .mt80{margin-top:80px !important} .mt90{margin-top:90px !important} .mt100{margin-top:100px !important} .mb0{margin-bottom:0 !important} .mb5{margin-bottom:5px !important} .mb10{margin-bottom:10px !important} .mb15{margin-bottom:15px !important} .mb20{margin-bottom:20px !important} .mb28{margin-bottom:28px !important} .mb30{margin-bottom:30px !important} .mb40{margin-bottom:40px !important} .mb50{margin-bottom:50px !important} .mb60{margin-bottom:60px !important} .mb70{margin-bottom:70px !important} .mb80{margin-bottom:80px !important} .mb90{margin-bottom:90px !important} .mb100{margin-bottom:100px !important} .ml-14{margin-left:-14px !important} .ml-18{margin-left:-18px !important} .ml0{margin-left:0 !important} .ml5{margin-left:5px !important} .ml10{margin-left:10px !important} .ml15{margin-left:15px !important} .ml18{margin-left:18px !important} .ml20{margin-left:20px !important} .ml22{margin-left:22px !important} /* 사업자보증 심사시스템 개편 사업 추가 */ .ml25{margin-left:25px !important} .ml26{margin-left:26px !important} .ml28{margin-left:28px !important} .ml30{margin-left:30px !important} .ml40{margin-left:40px !important} .ml50{margin-left:50px !important} .ml60{margin-left:60px !important} .ml70{margin-left:70px !important} .ml80{margin-left:80px !important} .ml90{margin-left:90px !important} .ml100{margin-left:100px !important} .ml150{margin-left:150px !important} .ml200{margin-left:200px !important} .ml210{margin-left:210px !important} .ml220{margin-left:220px !important} .ml230{margin-left:230px !important} .ml240{margin-left:240px !important} .ml250{margin-left:250px !important} .ml260{margin-left:260px !important} .ml270{margin-left:270px !important} .ml280{margin-left:280px !important} .ml290{margin-left:290px !important} .ml300{margin-left:300px !important} .mr0{margin-right:0 !important} .mr2{margin-right:2 !important} .mr5{margin-right:5px !important} .mr10{margin-right: 10px !important} .mr15{margin-right:15px !important} .mr20{margin-right:20px !important} .mr24{margin-right:24px !important} .mr25{margin-right:25px !important} .mr30{margin-right:30px !important} .mr33{margin-right:33px !important} .mr35{margin-right:35px !important} .mr40{margin-right:40px !important} .mr50{margin-right:50px !important} .mr60{margin-right:60px !important} .mr70{margin-right:70px !important} .mr80{margin-right:80px !important} .mr90{margin-right:90px !important} .mr100{margin-right:100px !important} .mr130{margin-right:130px !important} .px0 {padding-left:0 !important;padding-right:0 !important;} .px5 {padding-left:5px !important;padding-right:5px !important;} .px10 {padding-left:10px !important;padding-right:10px !important;} .px20 {padding-left:20px !important;padding-right:20px !important;} .px30 {padding-left:30px !important;padding-right:30px !important;} .px40 {padding-left:40px !important;padding-right:40px !important;} .px50 {padding-left:50px !important;padding-right:50px !important;} .px60 {padding-left:60px !important;padding-right:60px !important;} .px70 {padding-left:70px !important;padding-right:70px !important;} .px80 {padding-left:80px !important;padding-right:80px !important;} .px90 {padding-left:90px !important;padding-right:90px !important;} .py0 {padding-top:0 !important;padding-bottom:0 !important;} .py10 {padding-top:10px !important;padding-bottom:10px !important;} .py20 {padding-top:20px !important;padding-bottom:20px !important;} .py30 {padding-top:30px !important;padding-bottom:30px !important;} .py40 {padding-top:40px !important;padding-bottom:40px !important;} .py50 {padding-top:50px !important;padding-bottom:50px !important;} .py60 {padding-top:60px !important;padding-bottom:60px !important;} .py70 {padding-top:70px !important;padding-bottom:70px !important;} .py80 {padding-top:80px !important;padding-bottom:80px !important;} .py90 {padding-top:90px !important;padding-bottom:90px !important;} .pa0 {padding:0 !important} .pa5{padding:5px !important} .pa10{padding:10px !important} .pa15{padding:15px !important} .pa20{padding:20px !important} .pa30{padding:30px !important} .pa40{padding:40px !important} .pa50{padding:50px !important} .pa60{padding:60px !important} .pa70{padding:70px !important} .pa80{padding:80px !important} .pa90{padding:90px !important} .pt0{padding-top:0 !important} .pt5{padding-top:5px !important} .pt10{padding-top:10px !important} .pt12{padding-top:12px !important} .pt15{padding-top:15px !important} .pt20{padding-top:20px !important} .pt30{padding-top:30px !important} .pt40{padding-top:40px !important} .pt50{padding-top:50px !important} .pt60{padding-top:60px !important} .pt70{padding-top:70px !important} .pt80{padding-top:80px !important} .pt90{padding-top:90px !important} .pt95{padding-top:95px !important} .pb0{padding-bottom:0 !important} .pb5{padding-bottom:5px !important} .pb10{padding-bottom:10px !important} .pb15{padding-bottom:15px !important} .pb20{padding-bottom:20px !important} .pb30{padding-bottom:30px !important} .pb40{padding-bottom:40px !important} .pb50{padding-bottom:50px !important} .pb60{padding-bottom:60px !important} .pb70{padding-bottom:70px !important} .pb80{padding-bottom:80px !important} .pb90{padding-bottom:90px !important} .pl0{padding-left:0 !important} .pl3{padding-left:3 !important} /* 사업자보증 심사시스템 개편 사업 추가 */ .pl5{padding-left:5px !important} .pl10{padding-left:10px !important} .pl15{padding-left:15px !important} .pl20{padding-left:20px !important} .pl25{padding-left:25px !important} .pl27{padding-left:27px !important} .pl28{padding-left:28px !important} .pl30{padding-left:30px !important} .pl32{padding-left:32px !important} .pl40{padding-left:40px !important} .pl50{padding-left:50px !important} .pl60{padding-left:60px !important} .pl70{padding-left:70px !important} .pl80{padding-left:80px !important} .pl90{padding-left:90px !important} .pl100{padding-left:100px !important} .pl150{padding-left:150px !important} .pl200{padding-left:200px !important} .pl220{padding-left:220px !important} .pl230{padding-left:230px !important} .pr0{padding-right:0 !important} .pr5{padding-right:5px !important} .pr10{padding-right:10px !important} .pr15{padding-right:15px !important} .pr20{padding-right:20px !important} .pr25{padding-right:25px !important} .pr30{padding-right:30px !important} .pr40{padding-right:40px !important} .pr50{padding-right:50px !important} .pr60{padding-right:60px !important} .pr70{padding-right:70px !important} .pr80{padding-right:80px !important} .pr90{padding-right:90px !important} .pr220{padding-right:220px !important} .t0 {top:0 !important;} .t5 {top:5px !important;} .t10 {top:10px !important;} .t15 {top:15px !important;} .t20 {top:20px !important;} .border-top {border-top:1px solid #e0e0e0 !important;} .border-bottom {border-bottom:1px solid #e0e0e0 !important;} .border-bottom-midgray {border-bottom:1px solid #c0c0c0 !important;} .border-right {border-right:1px solid #e0e0e0 !important;} .border-left {border-left:1px solid #e0e0e0 !important;} .bdt_type01 {border-top:1px solid #333333 !important} .bdb_type01 {border-bottom:1px solid #333333 !important} .bdl_type01 {border-left:1px solid #333333 !important} .bdr_type01 {border-right:1px solid #333333 !important} .btop_type02 {border-top:1px solid #c0c0c0 !important} .bbottom_type02 {border-bottom:1px solid #c0c0c0 !important} .bleft_type02 {border-left:1px solid #c0c0c0 !important} .bright_type02 {border-right:1px solid #c0c0c0 !important} .bdrn {border:none !important} .bdt-none {border-top:none !important} .bdb-none {border-bottom:none !important} .bdl-none {border-left:none !important} .bdr-none {border-right:none !important} /* ****************************************************** 01. Font *unicode-range* 영문(대문자) U+0041-005A 영문(소문자) U+0061-007A 숫자 U+0030-0039 한글 U+AC00-D7A3 *******************************************************/ /* NotoSansKR 영문, 한글에만 적용 */ @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 700; src: url(/resources/font/NotoSansKR-Bold.woff2) format('woff2'), url(/resources/font/NotoSansKR-Bold.woff) format('woff'), url(/resources/font/NotoSansKR-Bold.otf) format('opentype'); unicode-range:U+0041-005A, U+0061-007A, U+AC00-D7A3; } @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 500; src: url(/resources/font/NotoSansKR-Medium.woff2) format('woff2'), url(/resources/font/NotoSansKR-Medium.woff) format('woff'), url(/resources/font/NotoSansKR-Medium.otf) format('opentype'); unicode-range:U+0041-005A, U+0061-007A, U+AC00-D7A3; } @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 400; src: url(/resources/font/NotoSansKR-Regular.woff2) format('woff2'), url(/resources/font/NotoSansKR-Regular.woff) format('woff'), url(/resources/font/NotoSansKR-Regular.otf) format('opentype'); unicode-range:U+0041-005A, U+0061-007A, U+AC00-D7A3; } @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 300; src: url(/resources/font/NotoSansKR-DemiLight.woff2) format('woff2'), url(/resources/font/NotoSansKR-DemiLight.woff) format('woff'), url(/resources/font/NotoSansKR-DemiLight.otf) format('opentype'); unicode-range:U+0041-005A, U+0061-007A, U+AC00-D7A3; } /* Roboto 숫자에만 적용 */ @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 700; src: url(/resources/font/Roboto-Bold.woff2) format('woff2'), url(/resources/font/Roboto-Bold.woff) format('woff'), url(/resources/font/Roboto-Bold.otf) format('opentype'); unicode-range:U+0030-0039; } @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 500; src: url(/resources/font/Roboto-Medium.woff2) format('woff2'), url(/resources/font/Roboto-Medium.woff) format('woff'), url(/resources/font/Roboto-Medium.otf) format('opentype'); unicode-range:U+0030-0039; } @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 400; src: url(/resources/font/Roboto-Regular.woff2) format('woff2'), url(/resources/font/Roboto-Regular.woff) format('woff'), url(/resources/font/Roboto-Regular.otf) format('opentype'); unicode-range:U+0030-0039; } @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 300; src: url(/resources/font/Roboto-Light.woff2) format('woff2'), url(/resources/font/Roboto-Light.woff) format('woff'), url(/resources/font/Roboto-Light.otf) format('opentype'); unicode-range:U+0030-0039; } .f_200{font-weight:350 !important}/* Thin */ .f_400{font-weight:400 !important}/* Reguler */ .f_500{font-weight:500 !important}/* Medium */ .f_700{font-weight:700 !important}/* Bold */ .f13 {font-size:13px !important;} .f14 {font-size:14px !important;} .f15 {font-size:15px !important;} .f16 {font-size:16px !important;} .f17 {font-size:17px !important;} .f18 {font-size:18px !important;} .f20 {font-size:20px !important;} .f24 {font-size:24px !important;} .f25 {font-size:25px !important;} .f26 {font-size:26px !important;} .f30 {font-size:30px !important;} .f42 {font-size:42px !important;} .price, .txt-num{font-family:'NotoSansKR'/*'NotoSansKR'*/, sans-serif;} h6.tit{font-size:16px;margin:20px 0 10px} /* ****************************************************** 02. Color *******************************************************/ .point_color{color:#1c69d5 !important} .color_01{color:#262626 !important} .color_02{color:#666 !important} .color_03{color:#999 !important} .color_04{color:#f01212 !important} .color-white{color:#fff !important} .color-primary {color:#0373e4 !important;} .color-red {color:#d93745 !important;} .color-black {color:#000 !important;} .color-white {color:#fff !important} .color-blue{color:#0066cc !important} .color-blue02{color:#31486f !important} .color-gray3 {color:#333333 !important;} .color-gray4 {color:#444444 !important;} .color-gray5 {color:#555555 !important;} .color-gray6 {color:#666666 !important;} .color-gray7 {color:#737373 !important;} .color-gray8 {color:#747474 !important;} .bgcolor-primary {background-color:#0373e4 !important;} .bgcolor-white {background-color:#fff !important;} .bgcolor-gray {background-color:#efefef !important;} .bgcolor-gray2 {background-color:#f5f6fa;} .bgcolor-grayblue {background-color:#e7f2f9 !important;} .bgcolor-pink {background-color:#fceaee;} /* ****************************************************** 03. Layout *******************************************************/ /* 상단 */ .header-wrap {position:fixed;width:100%;height:110px;border-bottom:1px solid #e0e0e0;z-index:150;background:#fff} .header-wrap .header {width:1170px;height:110px;margin:0 auto;} .header-wrap .header:after{content:'';display:block;clear:both} .header-wrap .header .menus-wrap {float:right} .header-wrap .header .logo {float:left;width:199px;height:110px;line-height:110px} .header-wrap .header .logo img{vertical-align:middle} .header-wrap .header .util-menus {position:relative;top:10px;width:100%;text-align:right} .header-wrap .header .util-menus .icon-alarm {position:relative;top:3px;left:0;} .header-wrap .header .util-menus .icon-alarm.on:after {content:'';position:absolute;top:0;left:17px;width:5px;height:5px;border-radius:50%;background-color:#ff162a;} .header-wrap .header .util-menus .user {font-size:15px;margin-left:10px;margin-right:20px;} .header-wrap .header .main-menus {float:right;margin-top:10px;height:70px} @media screen and (max-width:1025px) { .header-wrap .header {max-width:96%;min-width: 860px;} } /* gnb 1depth */ .header-wrap .header .main-menus > ul{float:left;height:70px} .header-wrap .header .main-menus > ul:after{content:'';display:block;clear:both;} .header-wrap .header .main-menus > a {float:left;margin-left:80px;font-size:20px;margin-top:23px} .header-wrap .header .main-menus > a.icon-search{width:24px;height:22px;background:url("/resources/images/common/btn_input_search.png") no-repeat 0 0} .header-wrap .header .main-menus > a.icon-dic{width:22px;height:22px;background:url("/resources/images/common/dic_ico.png") no-repeat 0 0; margin-left:30px!important;} .header-wrap .header .main-menus > a.icon-menu{margin-left:30px;width:24px;height:22px;background:url("/resources/images/common/icon_menu.png") no-repeat 0 0} .header-wrap .header .main-menus > a.icon-menu.opened{background:url("/resources/images/common/btn_allMenu_close.png") no-repeat 0 0} .header-wrap .header .main-menus > ul > li{float:left;margin-left:60px} .header-wrap .header .main-menus > ul li a{line-height:100%} .header-wrap .header .main-menus > ul > li:first-child{margin-left:0} .header-wrap .header .main-menus > ul > li > a {display:block;font-size:20px;padding:25px 10px 23px;box-sizing:border-box} .header-wrap .header .main-menus > ul > li > a:focus, .header-wrap .header .main-menus > ul > li > a:hover{color:#0373e4;border-bottom:3px solid #0373e4;padding-bottom:20px} .header-wrap .header .main-menus > ul > li:after{content:'';display:block;clear:both} .header-wrap .header .main-menus > ul > li > ul{float:left;positoin:relative;z-index:160} /* gnb sub-depth */ .header-wrap .header .main-menus ul > li > a + .sub-depth-wrap{display:none;position:absolute;left:0;width:100%;top:110px;background:#fff;z-index:161;padding:50px 0;box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15)} .header-wrap .header .main-menus ul > li > a + .sub-depth-wrap .sub-depth{width:1170px;margin:0 auto;display:flex;} .header-wrap .header .main-menus ul > li .sub-depth > ul{flex:0 1 25%;box-sizing:border-box;border-right:1px solid #eee;padding-left:30px} .header-wrap .header .main-menus ul > li .sub-depth > ul:last-child{border-right:0} .header-wrap .header .main-menus ul > li .sub-depth > ul:first-child{padding-left:0} .header-wrap .header .main-menus ul > li .sub-depth > ul > li{margin-top:40px} .header-wrap .header .main-menus ul > li .sub-depth > ul > li:first-child{margin-top:0} .header-wrap .header .main-menus ul > li .sub-depth > ul > li.ht{height:203px} .header-wrap .header .main-menus ul > li .sub-depth > ul > li > ul{max-height:400px;overflow:auto} .header-wrap .header .main-menus ul > li .sub-depth > ul > li > ul > li{margin-top:18px} .header-wrap .header .main-menus ul > li > a{display:block;font-size:18px;font-weight:500;color:#000000} .header-wrap .header .main-menus ul > li > p{display:block;font-size:18px;font-weight:500;color:#000000} .header-wrap .header .main-menus ul > li > ul > li a{color:#555555;font-size:16px;font-weight:400;display:block} .header-wrap .dropdown-wrap{position:absolute;width:100%;left:0;top:110px;height:0;background:#fff;box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);z-index:110;transition:height 0.3s;} .header-wrap.active .dropdown-wrap{height:500px;transition:height 0.3s} /* 전체메뉴 */ .all-menu{visibility:hidden;position:absolute;width:100%;left:0;background:#fff;box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);padding:10px 0 0;height:0;overflow-y:scroll;transition:all ease-out 0.3s} .all-menu.active{visibility:visible;height:800px;transition:all ease-in 0.3s} .all-menu-wrap{position:relative;width:1170px;margin:0 auto} .all-menu-wrap > .btn{position:absolute;right:0;top:0} .all-menu-wrap dl{border-bottom:1px solid #949494;padding-bottom:48px} .all-menu-wrap dl:last-child{border-bottom:0} .all-menu-wrap dl:after{content:'';display:block;clear:both} .all-menu-wrap dl dt{float:left;width:170px;line-height:100%;margin-top:43px} .all-menu-wrap dl dt a{color:#0373e4;font-size:24px;font-weight:500;line-height:1.3em} .all-menu-wrap dl dt p{color:#0373e4;font-size:24px;font-weight:500;line-height:1.3em} .all-menu-wrap dl dd{float:left;width:1000px} .all-menu-wrap dl dd > ul{display:flex;flex-wrap:wrap;justify-content:flex-start} .all-menu-wrap dl dd > ul > li{float:left;width:210px;margin-left:35px;margin-top:45px} .all-menu-wrap dl dd > ul > li:first-child{margin-left:0} .all-menu-wrap dl dd > ul > li:nth-child(4n+1){margin-left:0} .all-menu-wrap dl dd > ul > li > ul{display:none} .all-menu-wrap dl:first-child dd > ul > li{margin-top:0} .all-menu-wrap dl:first-child dt{margin-top:0} .all-menu-wrap dl dd > ul > li a{position:relative;display:block;line-height:100%;z-index:1} .all-menu-wrap dl dd > ul > li > a{font-size:18px;color:#000000;font-weight:500;} .all-menu-wrap dl dd > ul > li > a i{position:relative;display:inline-block;vertical-align:top;width:14px;height:18px;background:url("/resources/images/common/bg_main_depth.png") no-repeat 0 center;transition:0.3s;z-index:-1;top:1px} .all-menu-wrap dl dd > ul > li.active > a i{transform:rotate(-180deg);transition:0.3s} /* .all-menu-wrap dl dd > ul > li > a:after{content:'';position:absolute;right:0;top:50%;margin-top:-7px;width:0px;height:0px;border-bottom:7px solid transparent;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #333;} .all-menu-wrap dl dd > ul > li.active > a:after{transform:rotate(-180deg)} */ .all-menu-wrap dl dd > ul > li > a.no-child i{display:none} .all-menu-wrap dl dd > ul > li > ul > li{position:relative;margin-top:20px} .all-menu-wrap dl dd > ul > li > ul > li > a{position:relative;font-size:16px;color:#555555} .all-menu-wrap dl dd > ul > li > ul > li.has-child:after{content:'';position:absolute;top:10px;right:0;width:10px;height:6px;background:url("/resources/images/common/bg_sub_depth.gif") no-repeat 0 -1px} .all-menu-wrap dl dd > ul > li > ul > li.has-child:hover, .all-menu-wrap dl dd > ul > li > ul > li.active:after{background-position:-12px -1px} .all-menu-wrap dl dd > ul > li > ul > li.active > a{color:#0373e4;border-bottom:1px solid #0373e4} .all-menu-wrap dl dd > ul > li > ul > li > ul{display:none} .all-menu-wrap dl dd > ul > li > ul > li > ul > li{margin-top:10px} .all-menu-wrap dl dd > ul > li > ul > li > ul > li > a{position:relative;font-size:14px;color:#737373;padding-left:10px} .all-menu-wrap dl dd > ul > li > ul > li > ul > li > a:hover{color:#0373e4} .all-menu-wrap dl dd > ul > li > ul > li > ul > li > a:before{content:'';position:absolute;left:0;top:50%;left:0;width:4px;height:1px;background:#737373} .all-menu-wrap > .btn{position:absolute;right:0;top:0} .all-menu-wrap > .btn i{display:inline-block;width:10px;height:10px;background:url("/resources/images/common/icon_set_toggle.png") no-repeat 0 0;vertical-align:middle;top:-2px} .all-menu-wrap > .btn.clicked i{background:url("/resources/images/common/icon_set_toggle.png") no-repeat -13px 0} /* 본문 */ #container{position:relative;min-height:550px;padding-bottom:60px;box-sizing:border-box} /* title-area */ .contents .title-area {position:relative;top:0;left:0;max-width:1170px;height:210px;margin:0 auto;} .contents .title-area .title-wrap {position:relative;top:30px;display:flex;justify-content:center;} .contents .title-area .title-wrap .mainTitle {position:relative;top:0;left:0;font-size:40px;font-weight:500} .contents .title-area .title-wrap .mainTitle:after {content:'';position:absolute;top:80px; left:50%; width:1px; height:30px; background-color:#949494;margin-bottom:30px;} .contents .title-area .toolbar {display:flex;justify-content:flex-end;align-items:center;position:relative;top:15px;} .contents .title-area .toolbar .text-btn {position:relative;top:0;left:0;padding:10px;margin:0 10px;font-size:13px;text-decoration:none;color:#555 } .contents .title-area .toolbar .text-btn:last-child {margin-right:0;top:2px;} .contents .title-area .toolbar .text-btn:first-child:before{display:none;} .contents .title-area .toolbar .text-btn:before {content:'';position:absolute;top:16px;left:-10px;width:1px;height:14px;background-color:#949494;} .contents .title-area .toolbar .text-btn:last-child:before{top:14px;} .contents .title-area .toolbar .text-btn.chat {padding-top: 11px;} .detail-wrap{position: relative;top: 0;left: 0;width: 1170px;margin: 0 auto;padding:50px 0} /* 하단 */ .footer {position:relative;top:0;left:0;width:100%;height:170px;background-color:#fff;padding:30px 0 0;border-top:1px solid #e0e0e0;text-align:left;} .footer .footer-contents {display:flex;position:relative;top:0;left:0;max-width:1180px;margin:0 auto;} .footer .footer-contents .address {margin:25px 0 10px;font-size:16px;color:#666666;letter-spacing:-1px;border-bottom:0} .footer .footer-contents .copyright {margin:5px 0 0;font-size:14px;color:#666666;} .footer .footer-contents .webMark {position:absolute;bottom:0;left:520px;width:55px;height:35px;} .footer .footer-contents .webMark img{width:100%;height:100%;} .footer .footer-contents .text-btn {position:relative;top:0;left:0;color:#333;margin-right:20px;font-size:16px;letter-spacing:-1px;} .footer .footer-contents .text-btn:last-child {margin-right:0;} .footer .footer-contents .text-btn:before {content:'';position:absolute;top:5px;left:-10px;width:1px;height:15px;background-color:#e0e0e0;} .footer .footer-contents .text-btn:first-child:before {display:none;} .footer .footer-contents .family-site {margin-left:auto;margin-top:-12px;} .footer .footer-contents .qr_img{width:60px; height:60px; position:absolute; right:0; top:50px;} .footer .footer-contents .qr_img img{width:100%;} @media screen and (max-width:1025px) { .footer .footer-contents {max-width:95%;} } /* ****************************************************** 04. Table *******************************************************/ /* 상세 테이블 */ .table-detail {position:relative;top:0;left:0;width: 100%;} .table-detail:before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background-color:#333333;} .table-detail th, .table-detail td {border-bottom:1px solid #e0e0e0;} .table-detail th {width:200px;padding:10px 10px 10px 20px;background-color:#f7f8fa;font-size:16px;color:#000;height:60px;text-align: left;} .table-detail td {padding:10px 20px;font-size:16px;color:#555555;height:60px;line-height:1.5;} .table-detail th .question{position:relative;top: 0;} .table-detail th div {font-size:16px;color:#000;} /* 리스트 테이블 */ table.list{width:100%;table-layout:fixed;border-top:2px solid #000} table.list > thead > tr > th{height:56px;font-size:18px;color:#000;font-weight:400;padding:0 10px;letter-spacing:-0.050em;background:#f8f8f8;border-bottom:1px solid #f7f7f7;vertical-align:middle;text-align:center;border-bottom:1px solid #000} table.list > tbody > tr > td{height:20px;font-size:18px;color:#000;padding:16px 10px 15px 10px;font-weight:400;line-height:24px;background:#fff;border-bottom:1px solid #ddd;vertical-align:middle;text-align:center} table.list.doc_list > tbody > tr > td {padding:16px 10px 15px 20px;} table.list > tbody > tr > td.none_data{height:108px;color:#999;background:#f7f7f7} table.list.border > thead > tr > th{border-left:1px solid #ddd} table.list.border > thead > tr > th:first-child{border-left:none} table.list.border > tbody > tr > td{border-left:1px solid #ddd} table.list.border > tbody > tr > td:first-child{border-left:none} table.very_small > thead > tr > th{height:40px;font-size:12px;padding:0 5px} table.very_small > tbody > tr > td{height:20px;font-size:11px;color:#000;padding:10px 5px;line-height:15px;} /* 정보 테이블 */ table.info_list{width:100%;table-layout:fixed;border-top:2px solid #000} table.info_list > thead > tr > th{height:56px;font-size:18px;color:#000;padding:0 20px;font-weight:400;letter-spacing:-0.050em;background:#f8f8f8;border-bottom:1px solid #f7f7f7;vertical-align:middle;text-align:left;border-bottom:1px solid #000;border-left:1px solid #ddd} table.info_list > tbody > tr > td{height:20px;font-size:18px;color:#000;padding:20px;font-weight:400;line-height:24px;background:#fff;border-bottom:1px solid #ddd;vertical-align:top;text-align:left;border-left:1px solid #ddd} table.info_list > thead > tr > th:first-child, table.info_list > tbody > tr > td:first-child{border-left:none} table.info_list + table.info_list{margin-top:-1px} /* 입력 테이블 */ table.view{width:100%;table-layout:fixed;border-top:2px solid #000} table.view > tbody > tr > th{height:24px;padding:8px 29px 8px 29px;font-size:18px;color:#000;line-height:40px;font-weight:400;background:#f7f7f7;border-bottom:1px solid #ddd;vertical-align:middle;text-align:left} table.view > tbody > tr > td{height:24px;padding:8px 29px 8px 29px;font-size:18px;color:#000;line-height:24px;font-weight:400;background:#fff;border-bottom:1px solid #ddd;vertical-align:middle;text-align:left} table.view > tbody > tr > td.nPd{padding:0;} table.view > thead > tr > th{height:24px;padding:8px 20px 8px 29px;font-size:18px;color:#000;line-height:40px;font-weight:400;background:#f7f7f7;border-bottom:1px solid #ddd;vertical-align:middle;text-align:left} .check_th{background:#fff !important;padding:0 !important;border-right:none !important} table.view.info_table{border-top:1px solid #c2c2c2} table.view.info_table > tbody > tr > td, table.view.info_table > tbody > tr > th{} table.view.info_table > tbody > tr:last-child > td, table.view.info_table > tbody > tr:last-child > th{border-bottom:1px solid #c2c2c2} table.view.result_table > tbody > tr > td{height:40px;text-align:center;padding-left:0;padding-right:0;} table.view.result_table > tbody > tr > th{height:55px;padding:0;line-height:22px;text-align:center;padding-left:0;padding-right:0;} table.view.result_table.border > tbody > tr > td{border-right:1px solid #c2c2c2} table.view.result_table.border > tbody > tr > th{border-right:1px solid #c2c2c2} table.view.result_table.border > tbody > tr > td:last-child, table.view.result_table.border > tbody > tr > th:last-child{border-right:none} table.view.result_table + .result_table{margin-top:10px;} table.view.result_table.small > tbody > tr > td{font-size:15px;line-height:20px;} table + .bottom_table_info{margin-top:20px} /* 컨텐츠 상세 테이블 */ table.detail_table_view{width:100%;table-layout:fixed} table.detail_table_view > tbody > tr > th{height:24px;padding:16px 20px 16px 50px;font-size:18px;color:#000;line-height:24px;font-weight:400;background:#949494;border:1px solid #ddd;border-right:none;vertical-align:middle;text-align:left} table.detail_table_view > tbody > tr > td{height:24px;padding:16px 20px 16px 30px;font-size:18px;color:#666;line-height:24px;font-weight:400;background:#f7f7f7;border:1px solid #ddd;border-left:none;vertical-align:middle;text-align:left} .table-header{position:relative} .table-header .al-right{position:absolute;right:0;top:-10px} .table-header.v2 {font-weight:normal;} .table-header.v2 .title {color:#555555;} .table-header.v2 .text {margin-left:10px;color:#333333;} .table-header.v3 {font-weight:500;font-size:18px;margin-bottom:10px;color:#333} .table-header.v3 .detail {font-weight:350} .table-header.v3 .detail strong{font-weight:500;color:#0373e4} .table-header.v3 .text {margin-left:10px;color:#333333;} /* 테이블 공통 */ .hf-table {font-size:16px;font-weight:normal;font-weight:normal;border-top:1px solid #333333;border-collapse:separate} .hf-table > thead > tr > th {text-align:center;font-size:16px;height:50px;color:#333333;border-bottom:1px solid #000;border-right:1px solid #949494;font-weight:500;background:#f7f7f7;} .hf-table > tbody > tr > th, .hf-table > tbody > tr > td {padding:10px;border-bottom:1px solid #949494;border-right:1px solid #949494;font-size:16px} .hf-table > thead > tr > th:last-child, .hf-table > thead tr > td:last-child, .hf-table > tbody > tr > th:last-child, .hf-table tbody > tr > td:last-child {border-right:0 none;} .hf-table > tbody tr > td:last-child.br{border-right:1px solid #949494 } .hf-table > tbody > tr > th {text-align:left;background-color:#f7f7f7;color:#555;} .hf-table > tbody > tr > th .require {color:#555;} .hf-table > tbody > tr > td {color:#333;height:50px} .hf-table.border-top {border-top:1px solid #000 !important;} .hf-table.th-white > tbody > tr >th {background-color:#fff;} .hf-table.th-center > tbody > tr >th {text-align:center;} .hf-table.th-left > tbody > tr > th {text-align:left;} .hf-table.th-right > tbody tr > th {text-align:right;} .hf-table.td-center > tbody > tr > td {text-align:center;} .hf-table.td-right > tbody > tr > td {text-align:right;} .hf-table th.em, .hf-table td.em{color:#0373e4 !important;font-weight:500} .hf-table + p small{display:block;margin-top:8px; font-size:14px;} .hf-table > tbody > tr > th + td > label{font-weight:400} .hf-table th label{margin-bottom:0} .hf-table > tbody > tr > th label.require,.hf-table > tbody > tr > th strong.require{color:#333} .IBDS03M005 .hf-table {font-size:16px;font-weight:normal;font-weight:normal;border-top:1px solid #333333;border-collapse:separate; text-align:center} /* type2 */ .hf-table.type2 th, .hf-table.type2 td{padding:20px 0} .hf-table.type2 th, .hf-table.type2 th label, .hf-table.type2 th strong{background:#fff;padding-left:0;font-weight:500;font-size:18px;color:#333} .hf-table.type2 th, .hf-table.type2 td{border:0} .hf-table.no-border {border:0 none;} /* type3 */ .hf-table.type3 th {color:#555555;} .hf-table.type3 td {color:#333333;text-align:right;} .page-title {font-size:20px;font-weight:500;border-top:1px solid #000;padding:15px 20px;} .page-title.type2 {border-bottom:1px solid #333;margin-bottom:30px;} .page-title.type3 {border-top:0;padding:30px 0 10px;font-size:24px} .page-title.type4 {border-top:0;padding:30px 0 10px;font-size:20px} .page-title.type5 {border-top: 1px solid #000;border-bottom:1px solid #e0e0e0;padding: 15px 20px !important;font-size: 20px;font-weight: 500;} .page-title.type6 {position:relative;border-bottom:1px solid #333;border-top:0;margin-bottom:30px;padding-left:0} .page-title.type6 .caption{position:absolute;right:0;bottom:5px;font-size:16px;color:#555555;font-weight:400;line-height:100%} .page-title.type6 .caption:before{content:'';display:inline-block;width:5px;height:5px;background:#ff162a;border-radius:50%;vertical-align:top;margin-right:10px;margin-top:5px} .page-title:first-child{padding-top:0;} .page-title-wrap {display:flex;align-items:flex-end;border-bottom:1px solid #333;margin-bottom:20px;} .page-title-wrap .page-title.type2 {border-bottom:0 none;margin-bottom:0;} .unit-wrap {display:flex;align-items:center;} .unit-wrap .unit {margin-left:auto;margin-bottom:5px;} .unit {font-size:14px;color:#737373;} /* type4 - 완료화면 등 */ .hf-table.type4 {background-color:#fff;border-top:1px solid #e0e0e0;} .hf-table.type4 > tbody > tr > th {font-size:18px;background-color:#fff;color:#000000;font-weight:500;border-right:0 none;} .hf-table.type4 > tbody > tr > td {font-size:18px;color:#555555;border-right:0 none;} .hf-table.type4 > tbody > tr > th, .hf-table.complete > tbody > tr > td {padding:27px 20px;} .hf-table.type4.dense > tbody > tr > th, .hf-table.complete.dense > tbody > tr > td {padding:15px 20px;} /* type5 */ .hf-table.type5{border-collapse:collapse} .hf-table.type5 thead th{border-bottom:1px solid #949494;font-weight:500} .hf-table.type5 tbody{border-top:1px solid #000} .hf-table.type5 > thead > tr > th:last-child, .hf-table.type5 > thead tr > td:last-child, .hf-table.type5 > tbody > tr > th:last-child, .hf-table.type5 tbody > tr > td:last-child {border-left:1px solid #949494} /* 사업자보증 심사시스템 개편 사업 추가 */ /* type6 */ .hf-table.type6{border-collapse:separate} .hf-table.type6 thead{border-bottom:1px solid #e0e0e0} .hf-table.type6 thead th{font-weight:500} .hf-table.type6 tbody{border-top:1px solid #333} .hf-table.type6 > tbody > tr > th, .hf-table.type6 > tbody > tr > td{padding:10px 8px} /* type7사업자보증 심사시스템 개편 사업 추가 start */ .hf-table.type7 > thead > tr > th, .hf-table.type7 td {padding:10px 3px !important} /* 사업자보증 심사시스템 개편 사업 추가 end */ /* .hf-table > thead > tr > th, .hf-table > tbody > tr > th, .hf-table > tbody > tr > td {border:0 none;} */ .hf-table.dataTable {margin:0 !important;} .hf-table.dataTable tbody tr {cursor:pointer;background-color:#fff;} .hf-table.dataTable .board-title {vertical-align:center;} .hf-table.dataTable .board-title .ttle {display:inline-block;max-width:90%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .hf-table.dataTable .board-title .new-icon{top:-2px;} .hf-table.dataTable tbody .board-title a:hover, .hf-table.dataTable tbody .board-title a:focus {text-decoration:underline;color:#0373e4;} /*주택연금 담보제공방식 테이블*/ .img_txt{width:770px; margin:0 auto} .round_box{display:inline-block; background:#618dd7; color:#fff; padding:5px 20px; border-radius:50px;font-size:16px;font-weight:400; } .hf-table.type100{ border-top:none!important;margin:0 auto;} .hf-table.type100 thead tr th{border:none!important; background:#618dd7!important; color:#fff; border-right:1px solid #fff!important;} .hf-table.type100 tbody tr td.sky{background:#d5ebfe; font-weight:400; } .fix-label {font-size:13px;color:#0373e4;padding:3px 20px;border:1px solid #0373e4;background-color:#fff;border-radius:13px;} .fix-bgcolor td {background-color:#f7f7f7;} /* 사업자보증 심사시스템 개편 사업 추가 start */ .divi {display:inline-flex; line-height:15px; margin:0 0 0 0; padding:5px 10px;border-radius:0 6px 0 6px;color:#fff;font-size:14px; letter-spacing:-1px;} .divi_1 {background:#6d7588;} .divi_2 {background:#098270;} /* 사업자보증 심사시스템 개편 사업 추가 end */ /* ****************************************************** 05. Button *******************************************************/ .btn-container{text-align:center;margin-top:60px} .btn {position:relative;min-width:120px;height:50px;border-radius:3px;padding:0 25px;font-size:16px;box-sizing:border-box;background-color:#fff;margin-right:6px;color:#333;line-height:100%;font-weight:400;transition:all 0.3s;} .btn:last-child{margin-right:0} .btn.mid {font-size:15px;padding:9px 17px;min-width:100px;height:40px} .btn.big {font-size:18px;font-weight:500;min-width:180px;padding:0 40px;height:60px;font-weight:500} .btn.outline {border:1px solid #949494;} .btn.outline-darkgray{border:1px solid #666666} .btn.outline-primary{border:1px solid #0373e4;color:#0373e4} .btn.outline-gray-primary{border:1px solid #e0e0e0;color:#0373e4} .btn.little {font-size:15px;padding:6px 17px;min-width:90px;height:30px; border-radius:14px;} .btn.little:hover, .btn.little:focus {background:#fff !important;} .btn.little.outline:hover, .btn.little.outline:focus {border:1px solid #e0e0e0 !important;} .btn:hover,.btn:focus{opacity:1 !important;transition:all 0.3s} .btn.primary{background-color:#0373e4;color:#fff} .btn.darkgray{background-color:#424959;color:#fff;font-weight:400} .btn.midgray{background-color:#6d7588;color:#fff} .btn.lightgray{background-color:#eceff2;color:#424959} .btn.gray{background-color:#d5dbe6;color:#424959} .btn.gray2{background-color:#6e7588;color:#ffffff} .btn.primary.outline{background-color:#fff;border:1px solid #0373e4;color:#0373e4} .btn.primary.outline:hover, .btn.primary.outline:focus {color:#fff;} .btn.outline-gray-primary{border:1px solid #0373e4;} .btn[disabled].outline,.btn[disabled],.btn[disabled]:hover,.btn[disabled]:focus{background:#e6e6e6;color:#666666;opacity:1;cursor:default} a.btn{vertical-align:middle} a.btn.mid{line-height:40px;padding:0 17px} /* 돋보기 검색 버튼 */ .btn-inquiry i{display:inline-block;vertical-align:middle;width:17px;height:16px;background:url("/resources/images/common/icon_inquiry.png") no-repeat 0 0;margin-right:10px} .btn-plus i{display:inline-block;vertical-align:middle;width:14px;height:14px;background:url("/resources/images/common/ico_plus.png") no-repeat 0 0;margin-right:10px; margin-top:-2px;} .btn-plus:hover i,.btn-plus:focus i{display:inline-block;vertical-align:middle;width:14px;height:14px;background:url("/resources/images/common/ico_plus_hover.png") no-repeat 0 0;margin-right:10px; margin-top:-2px;} .btn-deletex {display:inline-block;vertical-align:middle;width:50px;height:50px;background:url("/resources/images/common/ico_trash.gif") no-repeat 0 0; text-indent:-9999px; font-size:0px; content:''} .btn-modi {display:inline-block;vertical-align:middle;width:50px;height:50px;background:url("/resources/images/common/ico_modi.gif") no-repeat 0 0; text-indent:-9999px; font-size:0px; content:''} .btn-deletex.btn_s {width:30px;height:30px;background:url("/resources/images/common/ico_trash.gif") no-repeat center;} .btn-modi.btn_s {width:30px;height:30px;background:url("/resources/images/common/ico_modi.gif") no-repeat center;} .btn-icon {position:relative;top:0;left:0;width:23px;height:23px;background-color:transparent;} .sms i {display:inline-block;vertical-align:middle;width:24px;height:22px;background:url("/resources/images/common/ico_talk01.png") no-repeat 0 0; text-indent:-9999px; font-size:0px; margin-right:10px;} .kakao i {display:inline-block;vertical-align:middle;width:23px;height:20px;background:url("/resources/images/common/ico_talk02.png") no-repeat 0 0; text-indent:-9999px; font-size:0px; margin-right:10px;} .deltype01 i {display:inline-block;vertical-align:middle;width:18px;height:18px;background:url("/resources/images/common/ico_delty01.png") no-repeat center center; text-indent:-9999px; font-size:0px; margin-right:10px;margin-top:-2px} /* .btn.outline.sms:hover, .btn.outline.kakao:hover, .btn.outline.sms:focus, .btn.outline.kakao:focus {color:#333; border:1px solid #e0e0e0} */ .btn-icon.search {top:0;padding:5px 20px;} .btn.gray:hover, .btn.gray:focus{background:#c5ccd6} .btn.midgray:hover, .btn.midgray:focus{background:#2a2e38;} .btn.outline:hover,.btn.outline-darkgray:hover,.btn.outline:focus,.btn.outline-darkgray:focus{color:#0054a4;border-color:#0054a4} .btn.primary:hover,.btn.primary:focus{background-color:#0362c2} .btn.lightgray:hover,.btn.lightgray:focus{background-color:#d6d8db} .btn.darkgray:hover,.btn.darkgray:focus{background-color:#2a2e38;} .btn.outline-primary:hover,.btn.outline-primary:focus{background:#0373e4;color:#fff} .btn.small.outline.color-primary{color:#0362c2} .btn.small.outline:hover,.btn.small.outline:focus{border-color:#666666;color:#333} .btn.small.outline.color-primary:hover, .btn.small.outline.color-primary:focus{border-color:#0362c2;} .btn.outline-primary:hover .icon.add{background-image:url(../images/common/icon_button_plus_w.png);} .btn.primary .icon.add{background-image:url(../images/common/icon_button_plus_w.png);} .btn.gray .icon.add{background-image:url(../images/common/icon_button_plus_w.png);} .btn.outline-primary:disabled .icon.add{background-image:url(../images/common/icon_button_plus_w.png);} .btn.small {min-width:80px;height:30px;border-radius:3px;font-size:13px;padding:0 15px;line-height:28px} .btn.w60{min-width:60px !important} .btn.w90{min-width:90px !important} .btn.rounded{border-radius:9999px} .btn.big.primary, .pop-foot .btn.primary.block{background:#0054a4;color:#fff;font-weight:500} .btn.big.primary:hover, .pop-foot .btn.primary.block:hover{background:#01417d} .btn.big.primary:focus, .pop-foot .btn.primary.block:focus{background:#01417d} .btn_con{position:relative;margin-top:20px;text-align:center;font-size:0} .btn_con a{margin:0 5px} .btn_con a:last-child{margin-right:0} .btn_con a:first-child{margin-left:0} .btn_page{position:relative;margin-top:30px;text-align:center;font-size:0} .btn_page a{margin:0 5px} .btn_page a:last-child{margin-right:0} .btn_page a:first-child{margin-left:0} .btn_page.big{margin-top:50px} .btn_pos_left{position:absolute;top:0;left:0;font-size:0} .btn_pos_left > input[type=submit], .btn_pos_left > button, .btn_pos_left > a{margin-left:10px} .btn_pos_left > input[type=submit]:first-child, .btn_pos_left > button:first-child, .btn_pos_left > a:first-child{margin-left:0} .btn_pos_right{position:absolute;top:0;right:0;font-size:0} .btn_pos_right > input[type=submit], .btn_pos_right > button, .btn_pos_right > a{margin-left:10px} .btn_pos_right > input[type=submit]:first-child, .btn_pos_right > button:first-child, .btn_pos_right > a:first-child{margin-left:0} .btn_input_right_more{position:absolute;top:0;left:100%;margin-left:10px;line-height:38px !important;height:40px !important} /* small 버튼 */ a.btn_vsmall , input[type=submit].btn_vsmall , button.btn_vsmall{display:inline-block;min-width:60px;height:30px;padding:0 15px;font-size:18px;line-height:26px;font-weight:400;text-align:center;box-sizing:border-box;transition:color 0.4s, border 0.4s, background 0.4s ease} a.btn_small , input[type=submit].btn_small , button.btn_small{display:inline-block;min-width:100px;height:38px;padding:0 20px;font-size:18px;line-height:34px;font-weight:400;text-align:center;box-sizing:border-box;transition:color 0.4s, border 0.4s, background 0.4s ease} a.btn_big , input[type=submit].btn_big , button.btn_big{display:inline-block;min-width:120px;height:50px;padding:0 20px;font-size:20px;line-height:46px;font-weight:500;text-align:center;box-sizing:border-box;transition:color 0.4s, border 0.4s, background 0.4s ease} a.type_01 , input[type=submit].type_01 , button.type_01{color:#fff;border:2px solid #1c69d4;background:#1c69d4;} a.type_01:hover , input[type=submit].type_01:hover , button.type_01:hover{border-color:#1c69d4;background:#1c69d4;} a.type_01:focus , input[type=submit].type_01:focus , button.type_01:focus{border-color:#1c69d4;background:#1c69d4;} a.type_02 , input[type=submit].type_02 , button.type_02{color:#fff;border:2px solid #ccc;background:#ccc;} a.type_02:hover , input[type=submit].type_02:hover , button.type_02:hover{border-color:#ccc;background:#ccc;} a.type_02:focus , input[type=submit].type_02:focus , button.type_02:focus{border-color:#ccc;background:#ccc;} /* 링크 버튼 */ .text-btn {position:relative;top:0;left:0;text-decoration:underline;color:#000;} .text-btn.arrow{color:#555555} .text-btn.arrow:after{content:'';position:absolute;right:-15px;top:7px;width:9px;height:9px;border:solid #aaa;border-width:0 2px 2px 0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);} .link-btn{ font-size:18px;color:#0373e4;text-decoration:underline;} a.link{color:#0373e4;text-decoration:underline} .footer .text-btn {text-decoration:none;} /* ▼▼▼ 버튼 컬러 변경 :19.02.19 수정 */ a.type_03 , input[type=submit].type_03 , button.type_03 {color:#fff;border:2px solid #1c69d4;background:#1c69d4;} a.type_03:hover , input[type=submit].type_03:hover , button.type_03:hover {border-color:#1c69d4;background:#1c69d4;} a.type_03:focus , input[type=submit].type_03:focus , button.type_03:focus {border-color:#1c69d4;background:#1c69d4;} /*a.type_03 , input[type=submit].type_03 , button.type_03 {color:#fff;border:2px solid #666;background:#666;} a.type_03:hover , input[type=submit].type_03:hover , button.type_03:hover {border-color:#666;background:#666;}*/ /* ▲▲▲ 버튼 컬러 변경 :19.02.19 수정 */ a.type_04 , input[type=submit].type_04 , button.type_04{color:#666;border:2px solid #666;background:#fff;} a.type_04:hover , input[type=submit].type_04:hover , button.type_04:hover{border-color:#666;background:#fff;} a.type_04:focus , input[type=submit].type_04:focus , button.type_04:focus{border-color:#666;background:#fff;} a.type_05 , input[type=submit].type_05 , button.type_05{color:#1c69d4;border:2px solid #1c69d4;background:#fff;} a.type_05:hover , input[type=submit].type_05:hover , button.type_05:hover{border-color:#1c69d4;background:#fff;} a.type_05:focus , input[type=submit].type_05:focus , button.type_05:focus{border-color:#1c69d4;background:#fff;} /* 검색 버튼 */ a.btn_search , input[type=submit].btn_search , button.btn_search{display:inline-block;padding:0 39px 0 19px;font-size:18px;color:#262626;line-height:36px;font-weight:500;text-align:center;box-sizing:border-box;border:1px solid #000;border-radius:19px;background:url(/resources/images/icon/icon_search.png) right 18px top 50% no-repeat} /* 더보기 버튼 */ a.btn_more{display:inline-block;width:30px;height:30px;box-sizing:border-box;border:1px solid #262626} a.btn_more:before{content:'';position:absolute;top:50%;left:50%;display:block;width:2px;height:16px;background:#262626;margin:-8px 0 0 -1px} a.btn_more:after{content:'';position:absolute;top:50%;left:50%;display:block;width:16px;height:2px;background:#262626;margin:-1px 0 0 -8px} /* + 버튼 */ a.btn_plus_small{position:relative;display:block;width:20px;height:20px;box-sizing:border-box;border:1px solid #1c69d4} a.btn_plus_small:before{content:'';position:absolute;top:50%;left:50%;display:block;width:2px;height:10px;background:#1c69d4;margin:-5px 0 0 -1px} a.btn_plus_small:after{content:'';position:absolute;top:50%;left:50%;display:block;width:10px;height:2px;background:#1c69d4;margin:-1px 0 0 -5px} /* 페이징 */ .paging_wrap{position:relative;margin-top:25px;text-align:center} .paging{} .paging ol{display:inline-block} .paging ol li{display:inline} .paging ol li a, .paging ol li span{float:left;display:block;width:28px;height:28px;font-size:16px;text-align:center;line-height:26px;color:#999;font-weight:400;margin:0 3px} .paging ol li .current{cursor:default;color:#1c69d4;font-weight:400} .paging > a{display:inline-block;width:28px;height:28px} .paging .btn_page_prev{margin-left:8px} .paging .btn_page_next{margin-right:8px} /* ****************************************************** 06. pop *******************************************************/ .pop_wrap{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;display:none;background:rgba(0,0,0,0.4);overflow-y:auto;} .pop_wrap > div{display:table;width:100%;height:100%;table-layout:fixed} .pop_wrap > div > div{display:table-cell;width:100%;vertical-align:middle;padding:80px 60px;box-sizing:border-box;} .pop_data{position:relative;max-width:100%;background:#fff;box-sizing:border-box;} .pop_data a.btn_pop_close{position:absolute;top:17px;right:32px;display:block;width:28px;height:26px;background-color:transparent;background-image:url('/resources/images/util/btn_pop_close.png');background-repeat:no-repeat;background-position:center center} .pop_data.small{max-width:600px;padding:0;margin:0 auto} .pop_data.middle{max-width:860px;padding:0;margin:0 auto} .pop_data h3{font-size:24px;color:#fff;padding:0 40px;background:#1c69d4;line-height:60px} .pop_data .detail_data{padding:40px;background:#fff} .btn_pop_page{margin-top:30px;font-size:0} .btn_pop_page > a{margin:0 5px} .btn_pop_page > a:last-child{margin-right:0} .btn_pop_page > a:first-child{margin-left:0} .pop_top_info{font-weight:300;line-height:26px;margin-top:-4px} .pop_top_info + .tab_content{margin-top:20px;} .pop_con_title{font-size:18px;margin-bottom:20px;font-weight:500;color:#262626} .address_pop .tab_content .tab_data{margin-top:20px} .address_pop table.view > tbody > tr > td{padding:10px 9px;} .result_address_search{margin-top:50px} .result_address_search table.list > thead > tr > th{padding-left:0;padding-right:0;} .result_address_search table.list > tbody > tr > td{padding-left:5px;padding-right:5px;word-break:break-all;} .user_info_pop .title{font-size:18px;color:#262626;} .user_info_pop .input{max-width:330px;margin:0 auto;padding-top:39px;} .user_info_pop .btn{margin-top:30px;text-align:left;} .user_info_pop .btn > a{display:inline-block;font-size:18px;color:#666;font-weight:400;padding-right:15px;background:url(/resources/images/icon/icon_arrow_right_black.png) right center no-repeat;} /* 주소 검색결과 웹접근성 반영한 리스트 200918 */ .addressWrap {max-height:349px;} .address {position:relative;top:0;left:0;border-bottom:1px solid #e0e0e0;} .address:last-child {border-bottom:0 none;} .address input[type="radio"] {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;} .address input[type="radio"]:focus + label{box-shadow:0px 0px 0px 1px #87bef5;} .address label {display:flex;align-items:center;cursor:pointer;margin:1px} .address label .zip {padding:0 25px 0 15px} .address label .title {font-size:16px;color:#333333;margin:15px 0 8px !important;} .address label .text {font-size:16px;color:#666666;margin-bottom:15px;} .address input[type="radio"]:checked + label {background-color:#f5f6fa;} .addressWrap .address input[type="radio"]:checked + label {box-shadow: 1px 1px 1px 1px #bababa;} .IBCM00P000 .address input[type="radio"]:checked + label {background-color:#dbe2ff;} .IBCM00P000 .addressWrap .address input[type="radio"]:checked + label {box-shadow: 0px 0px 0px 0px #bababa;} .com-input-wrap.append-wrap input::-webkit-input-placeholder {text-align:left !important} .com-input-wrap.append-wrap input:-ms-input-placeholder {text-align:left} /* 영업점 검색결과 웹접근성 반영한 리스트 */ .branchWrap {max-height:278px;} .branch {position:relative;top:0;left:0;border-bottom:1px solid #e0e0e0;} .branch:last-child {border-bottom:0 none;} .branch input[type="radio"] {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;} .branch label {display:flex;align-items:center;flex-direction:column;align-items:flex-start;padding-left:20px;cursor:pointer;} .branch label .title {font-size:16px;color:#333333;margin:17px 0 7px !important;} .branch label .text {font-size:16px;color:#666666;margin-bottom:17px;} .branch input[type="radio"]:checked + label {background-color:#f5f6fa;} /* 알럿 팝업 CSS */ .jconfirm.jconfirm-my-dialog .jconfirm-bg {background: rgba(0,0,0,.7);} .jconfirm.jconfirm-my-dialog .jconfirm-box {max-width:400px;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons {display:flex;padding:0;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button {margin: 0;border-radius:0;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button:first-child {border-top-right-radius: 0;border-bottom-right-radius: 0;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button:last-child {border-top-left-radius: 0;border-bottom-left-radius: 0;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-content-pane .jconfirm-content div {padding:0 30px;} .jconfirm {padding:0 !important;} .jconfirm.jconfirm-text-theme .jconfirm-box {width:100%;max-width: 520px;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons .btn {min-width: auto;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button:only-child {width:100%;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button:only-child:hover {width:100%;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button {width: 50%;height: 60px;font-size:18px;font-weight:500;color:#424959} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-title-c {justify-content: center;height:70px;padding: 0 52px 0 38px;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-closeIcon{width:70px;height:70px;background:url("/resources/images/common/btn_confirm_close.png") no-repeat center center;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons button{height:60px} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {font-size:26px;text-align:center;white-space:nowrap;letter-spacing:-1.5px} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-content {text-align:center;color:#555555;font-size:16px;padding:40px 0 50px} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-content div{font-size:16px;line-height:26px} .jconfirm .jconfirm-box-container {position: relative;left: 3%;width: 94%;} .jconfirm .pop-contents {padding:10px;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-title-c {font-weight:500;font-size:26px;} .ui-modal__mask {z-index: 900;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons .btn-primary {color: #fff;background-color: #136fd6;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-buttons .btn-cancel {color: #0d0e0f !important;background-color: #c2c3c3 !important;} .jconfirm.jconfirm-text-theme .jconfirm-box .jconfirm-content-pane {margin-top:0;margin-bottom: 60px;} /* 에러팝업 */ .jconfirm .jconfirm-box .jconfirm-title-c {display: flex;align-items: center;justify-content: center;height:50px;border-bottom:1px solid #e0e0e0;} .jconfirm .jconfirm-box div.jconfirm-title-c {padding-bottom: 0 !importnat;} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {display: flex;justify-content: center;align-items: center;height: 50px;font-size: 26px;} .jconfirm .jconfirm-box div.jconfirm-title-c:focus-visible {border: solid 1px black;} .jconfirm .jconfirm-box div.jconfirm-content-pane{border-radius: 10px;} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {text-align: center;color: #555555;font-size:14px;} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content div {margin:0 auto;} .jconfirm.jconfirm-alert-theme .jconfirm-box .jconfirm-buttons button {font-weight:400 !important;} .jconfirm.jconfirm-alert-theme .jconfirm-box .jconfirm-buttons button:focus {border:1px solid #87bef5;background:#0054a4} .jconfirm.jconfirm-alert-theme .jconfirm-box .jconfirm-buttons {position:relative;top:0;} .jconfirm.jconfirm-alert-theme .jconfirm-content-pane.no-scroll .jconfirm-content {display:table;width:100%} .jconfirm.jconfirm-alert-theme .jconfirm-content-pane.no-scroll .jconfirm-content > div:first-child{display:table-cell;vertical-align:middle} .jconfirm.jconfirm-alert-theme .jconfirm-content-pane.no-scroll .jconfirm-content:focus-visible {border: solid 1px black;} /* ****************************************************** 07. Icon *******************************************************/ .icon {display:inline-block;position:relative;top:5px;margin-right:8px;} /* 용어사전 Switch */ .icon.word-dic {top:3px;} .icon.word-dic #wordDicSwitch {position:absolute;appearance:none;-webkit-appearance:none;-moz-appearance:none;} .icon.word-dic .switch_label {position:relative;cursor:pointer;display:inline-block;width:34px;height:14px;background:#fff;border:1px solid #555;border-radius:20px;transition:0.2s;} .icon.word-dic .switch_label:hover {background:#efefef;} .icon.word-dic .onf_btn {position:absolute;top:3px;left:3px;display:inline-block;width:8px;height:8px;border-radius:8px;background:#555;transition:0.2s;} .icon.word-dic #wordDicSwitch:checked+.switch_label {background:#333;border:1px solid #333;} .icon.word-dic #wordDicSwitch:checked+.switch_label:hover {background:#555;} .icon.word-dic #wordDicSwitch:checked+.switch_label .onf_btn {left:24px;background:#fff;} /* 가운데 타이틀 쪽 아이콘 버튼들 */ .icon.download {background:url(../images/common/icon_util_download.png) no-repeat;background-size:17px 17px;width:17px;height:17px;} .icon.print {background:url(../images/common/icon_util_print.png) no-repeat;background-size:17px 17px;width:17px;height:17px;} .icon.chatting {background:url(../images/common/icon_util_chat.png) no-repeat;background-size:17px 17px;width:17px;height:17px;} .icon.zoom {background:url(../images/common/icon_util_enlarge.png) no-repeat;background-size:17px 17px;width:17px;height:17px;top:3px} .icon.text-zoom {background:url(../images/common/icon_util_text_zoom.gif) no-repeat;background-size:37px 19px;width:37px;height:19px;} .icon.text-zoomin {margin-right:0;background:url(../images/MH/icon_util_text_zoomin.gif) no-repeat;background-size:19px 19px;width:19px;height:19px;} .icon.text-zoomout {position: relative;left: -4px;margin-right:6px;background:url(../images/MH/icon_util_text_zoomout.gif) no-repeat;background-size:18px 19px;width:18px;height:19px;} /* 카드 안 타이틀 오른쪽 화살표 아이콘 */ .icon.arrow-right {background:url(../images/MH/icon_card_header_arrow_right_black.gif) no-repeat;background-size:15px 28px;width:15px;height:28px;} /* .icon.home{margin-left:25px;margin-right:23px;background:url(../images/common/icon_tab_selectbox_home.png) no-repeat;background-size:12px 13px;width:12px;height:13px;} */ /* .icon.home:before{content:'';position:absolute;top:-25px;left:-25px;width:1px;height:60px;background-color:#eee;} */ .icon.home{margin-right:0;top:0;width:60px;height:60px;border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;} .icon.home:before{content:'';position:absolute;top:22px;left:24px;background-color:#949494;background:url(../images/common/icon_tab_selectbox_home.png) no-repeat;width:12px;height:13px;background-size:12px 13px;} /* IBMH010M02 */ .icon.mh-loan01 {background:url(../images/MH/icon_IBMH010M02_pd_1.png) no-repeat center center;background-size:60px 60px;width:60px;height:60px;} .icon.mh-loan02 {background:url(../images/MH/icon_IBMH010M02_pd_2.png) no-repeat center center;background-size:62px 58px;width:62px;height:58px;} .icon.mh-loan03 {background:url(../images/MH/icon_IBMH010M02_pd_3.png) no-repeat center center;background-size:62px 62px;width:62px;height:62px;} /* 테이블 안 물음표 */ .icon.question {margin-right:0;background:url(../images/common/icon_table_question_mark.gif) no-repeat;background-size:22px 22px;width:22px;height:22px;} /* 유의사항 */ .icon.alert {margin-right:0;background:url(../images/common/icon-alert.gif) no-repeat;background-size:22px 22px;width:22px;height:22px;} .icon.arrow-up {margin-right:0;margin-top:3px;background:url(../images/common/icon_content_bottom_arrow_up.gif) no-repeat;background-size:20px 11px;width:20px;height:11px;} /* 동의 시 선택/필수 체크모양 아이콘 */ .icon.checkbox {position:relative;top:0;left:0;width:28px;height:28px;background-color:#fff;border:2px solid #0373e4;border-radius:5px;box-sizing:border-box;} .icon.checkbox:after {content:'';position:absolute;top:2px;left:7px;width:7px;height:13px;border:solid #0373e4;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /* 스크래핑 진행상황 아이콘 */ .scraping {position:relative;top:0;left:0;width:28px;height:28px;background-color:#fff;top:0px;left:7px;width:7px;height:13px;border:solid #1c69d4;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .scraping.on {position:relative;top:0;left:0;width:28px;height:28px;background-color:#fff;top:0px;left:7px;width:7px;height:13px;border:solid #ccc;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .scraping.error {position:relative;top:0;left:0;width:28px;height:28px;background-color:#fff;top:0px;left:7px;width:7px;height:13px;border:solid #ff0000;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .scr_txt {padding:0 0 5px 15px; font-size:16px; color:#555; display:inline-block;} .icon.checkbox.small {width:20px;height:20px;border-radius:4px;} .icon.checkbox.small:after {top:1px;left:5px;width:4px;height:9px;} /* 완료화면의 체크모양 아이콘 */ .icon.complete {position:relative;top:0;left:0;width:50px;height:50px;background-color:#0373e4;box-sizing:border-box;border-radius:25px;} .icon.complete:after {content:'';position:absolute;top:10px;left:17px;width:13px;height:21px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /* 상담종료 엑스모양 아이콘 */ .icon.theend {position:relative;top:0;left:0;width:50px;height:50px;background-color:#0373e4;box-sizing:border-box;border-radius:25px;} .icon.theend:before {content:'';position:absolute;top:11px;left:19px;margin-top:1.25px;margin-left:4px;height:25px;border:solid #fff; border-width:0 3px 0 0;transform:rotate(46deg);border-radius: 2px;} .icon.theend:after {content:'';position:absolute;top:11px;left:19px;margin-top:1.25px;margin-left:4px;height:25px;border:solid #fff; border-width:0 3px 0 0;transform:rotate(-44deg);border-radius: 2px;} /* 신청 말풍선 아이콘 */ .icon-msg {display:inline-block;width:21px;height:22px; background: url(/resources/images/RE/icon_talk.png) no-repeat center center;background-size: 21px auto; margin-right: 10px;} .icon-drag-file {position:relative;top:0;left:0;} .icon-drag-file:before{content:'';position:absolute;top:0;left:0;background:url(../images/common/icon-drag-file.png) no-repeat;width:20px;height:23px;background-size:20px 23px;} /* ****************************************************** 08. Etc *******************************************************/ /* radio */ .radio-wrap {display:flex; justify-content:space-between;flex: 0 0 250px;} .radio-container {display:block;position:relative;padding-left:37px;line-height:24px;cursor:pointer;font-size:18px;color:#555;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left} .radio-container input {position:absolute;opacity:0;cursor:pointer;height:26px;width:26px;left:0; top:0;display:inline-block;z-index:4; border-radius:100%;} .login-type .radio-container input {height:20px;width:20px;} .radio-container input:focus, .square input:focus {opacity:1!important;border:2px solid #87bef5 !important;} .radio-container .checkmark {position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;background-color:#fff;border:1px solid #949494;box-sizing: border-box;} .radio-container .checkmark:focus{border:1px solid #000;} .radio-container:hover input ~ .radio-container .checkmark {background-color:#fff;} .radio-container:hover input ~ .radio-container .checkmark:focus{border:1px solid #000;} .radio-container input:checked:not(:disabled) ~ .checkmark {background-color:#0373e4;border-color:#0373e4} .radio-container .checkmark:after {content:'';position:absolute;} .radio-container input:checked ~ .checkmark:after {top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:0 none;margin-top:-7px;margin-left:-7px} .radio-container .checkmark:after {left:8px;top:4px;width:5px;height:10px;} .radio-container input:disabled + .checkmark {background-color:#949494;} .square {display:inline-block;position:relative;padding: 5px 0 5px 38px; cursor:pointer; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:25px} .square input {position:absolute;opacity:0;cursor:pointer;height:0;width:0;} .square .checkmark {position:absolute;top:4px;left:0;width:25px;height:25px;background-color:#fff;border-radius:3px;border:1px solid #ccc;} .square:hover input ~ .checkbox-container .checkmark {background-color:#fff;} .square input:checked ~ .checkmark {background-color:#0373e4;border-color:#0373e4} .square input:disabled ~ .checkmark {background-color:#949494;border-color:#e0e0e0;} .square input:disabled:checked ~ .checkmark {background-color:#949494;border-color:#e0e0e0;} .square .checkmark:after {content:'';position:absolute;border:solid #ccc;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .square input:disabled:checked ~ .checkmark:after{border-color:#ccc} .square input:checked ~ .checkmark:after {border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .square .checkmark:after {left:8px;top:4px;width:5px;height:10px;} /* 공통 인풋 컴포넌트 */ input[type="text"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],input[type="email"] {position: relative;top: 0;left: 0;width: 100%;height: 50px;line-height: 48px;font-size: 16px;padding: 0 60px 0 15px;border: 1px solid #949494;border-radius: 3px;color:#333333;font-family:'NotoSansKR', sans-serif} input.logother[type="text"],input.logother[type="password"],input.logother[type="search"],input.logother[type="number"],input.logother[type="tel"],input.logother[type="email"] {position: relative;top: 0;left: 0;width: 100%;height: 50px;line-height: 48px;font-size: 16px;padding: 0 30px 0 15px !important;border: 1px solid #e0e0e0;border-radius: 3px;color:#333333;font-family:'NotoSansKR', sans-serif} .com-input-wrap.logother > input {position: relative;top: 0;left: 0;width: 100%;height: 50px;line-height: 48px;font-size: 16px;padding: 0 30px 0 15px !important;border: 1px solid #e0e0e0;border-radius: 3px;color:#333333;font-family:'NotoSansKR', sans-serif} input[type="text"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="email"]:focus{/* border:2px solid #87bef5 !important; */ border-radius:5px !important;} input[type="radio"]:focus {border:1px solid #87bef5 !important; opacity:.9} input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-result-button, input::-webkit-search-result-decoration{-webkit-appearance:none} input::-ms-clear{display:none} input::-webkit-input-placeholder, input::-ms-input-placeholder{font-size:16px;font-family:'NotoSansKR', sans-serif;color:#737373} input[readonly],input[disabled]{background:#f7f7f7;color:#737373} input.logother[readonly],input.logother[disabled]{background:#f7f7f7;color:#737373} .icon.input-delete {position:absolute;left:0;top:50%;transform:translateY(-50%);background:url(../images/common/btn_input_delete.png) no-repeat;width:24px;height:24px;margin-right:10px} .icon.input-search {position:absolute;left:0;top:50%;transform:translateY(-50%);background:url(../images/common/btn_input_search.png) no-repeat;width:22px;height:22px;margin-right:10px} .icon.delete-input {background:url(../images/common/btn_nexttoinput_delete.png) no-repeat;background-size:35px 35px;width:40px;height:35px;margin-left:10px;} .com-input-wrap {position:relative;top:0;left:0;width:100%;} .com-input-wrap .txt {position: absolute;right: 30px;top: 50%;color: #333333;font-size: 0.93rem;transform: translateY(-50%);} .com-input-wrap .input-btns {position:absolute;top:0;right:0;display:flex;width:30px;height:100%;} .com-input-wrap .input-btns button {position:absolute;width:34px;height: 100%;align-items:center;background-color:transparent;right:5px;} .com-input-wrap .input-btns .btn-search {display:none;right:0} .com-input-wrap .input-btns .btn-delete:disabled {background-color:transparent !important;} .inp-wrap.flex-d-column .com-input-wrap {margin:0 0 10px 0} /* 사업자보증 심사시스템 개편 사업 추가 */ /*.com-input-wrap.append-wrap input {padding-right:50px;text-align:right;}*/ .com-input-wrap.append-wrap.char2 input {padding-right:65px;} .com-input-wrap.append-wrap.char3 input {padding-right:77px;} .com-input-wrap.append-wrap .txt {position:absolute;top:50%;right:45px;text-align:right;transform: translateY(-50%);color:#737373;line-height:100%} .com-input-wrap.append-wrap input::placeholder {text-align:right;} .com-input-wrap.search-wrap input {padding-right:80px;} .com-input-wrap.search-wrap .input-btns .btn-search {display:block;top:0;right:0} .com-input-wrap.search-wrap .input-btns .btn-delete {top:0;right:34px;} .com-input-wrap.type2 input {padding:0 41px 0 2px !important;} /* 사업자보증 심사시스템 개편 사업 추가 */ .textarea{font-family:'NotoSansKR';min-height:130px;max-height:130px;resize:none;width:100%;padding:20px;border:1px solid #e0e4ea;border-radius:3px;font-size:16px;color:#333333;font-weight:400} textarea::-webkit-input-placeholder{color:#737373;font-size:16px;font-weight:400} textarea:-ms-input-placeholder{color:#737373;font-weight:400} table th .require:after, table td .require:after{right:-10px !important;} strong.require, label.require, i.newline.require {font-weight:400;position:relative;color:#333} strong.require_down{font-weight:400;position:relative;color:#333} strong.require:after{content:'';position:absolute;width:5px;height:5px;background:#ff162a;border-radius:50%;right:0;top:4px} strong.require_down:after{content:'';position:absolute;width:5px;height:5px;background:#ff162a;border-radius:50%;right:-10px;top:24px} i.newline.require:after{content:'';position:absolute;width:5px;height:5px;background:#ff162a;border-radius:50%;right:0;top:6px} label.require:after{content:'';position:absolute;width:5px;height:5px;background:#ff162a;border-radius:50%;right:0;top:4px} .com-input-wrap.error input{border:1px solid #d93745;} .guide {font-size:14px;color:#737373;display:block;margin-top:10px} .warning {display:block;line-height:100%;font-size:14px;color:#d93745;margin-top:15px;} /* checkbox */ /* 기본 체크박스 */ .checkbox-container {display:inline-block;position:relative;padding:0 0 5px 38px;cursor:pointer;font-size:16px;color:#555;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .checkbox-container input {position:absolute;opacity:0;cursor:pointer;width:32px;height:32px;display:inline-block;left:-1px;top:-1px;border:0;z-index:4; border-radius:3px;} .checkbox-container input::-ms-check{display:none;} .checkbox-container input:focus-visible{width:30px;height:30px;opacity:.8; outline:none; border:2px solid #000000;}/*choi*/ .checkbox-container .checkmark {position:absolute;top:0;left:0;width:25px;height:25px;background-color:#fff;border-radius:3px;border:1px solid #949494;} /*choi*/ .checkbox-container:hover input ~ .checkbox-container .checkmark {background-color:#fff;} .checkbox-container input:checked ~ .checkmark {background-color:#0373e4;border-color:#0373e4;border-width:3px;top:-2px;left:-2px;} .checkbox-container .checkmark:after {content:'';position:absolute;border:solid #949494;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}/*choi*/ .checkbox-container input:checked ~ .checkmark:after {border:solid white;border-width:0 5px 5px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);left:6px;} .checkbox-container .checkmark:after {left:8px;top:3px;width:7px;height:12px;} .checkbox-container input:disabled {cursor:default;} .checkbox-container input:disabled + .checkmark {background-color:#949494;cursor:default;border-color:#949494} .checkbox-container input:checked:disabled ~ .checkmark {background-color:#0373e4;border-color:#0373e4} /* 테이블 안에서 쓰는 작은 체크박스 */ .checkbox-container.small input {position:absolute;opacity:0;cursor:pointer;width:28px;height:28px;display:inline-block;left:-3px;top:-3px;border:0;z-index:4; border-radius:3px;} .checkbox-container.small input:focus {opacity:.2} .checkbox-container.small .checkmark {width:20px;height:20px;} .checkbox-container.small .checkmark:after {left:5px;top:1px;width:7px;height:11px;} /* 아웃라인 없는 체크박스 */ .checkbox-container .checkmark.flat {border: 0 none;} .checkbox-container input:checked ~ .checkmark.flat {background-color:#fff;} .checkbox-container input:checked ~ .checkmark.flat:after {border:solid #0373e4;border-width:0 5px 5px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .checkbox-container input:disabled + .checkmark.flat {background-color:#fff;} .checkbox-container input:disabled ~ .checkmark.flat:after {border:solid #949494;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /* 라운드 체크박스 */ .checkbox-container .checkmark.round {border-radius:18px;} .checkbox-container .checkmark.round:after {left:8px;top:4px;width:7px;height:12px;} /* radio */ .radio-btns-wrapper {display:flex;position:relative;top:0;left:0;justify-content:space-between;border-radius: 5px;} .radio-btns-wrapper .btn-radio {position:absolute;top:0;left:0;width:0;height:0;} .radio-btns-wrapper .btn-radio + label {display:flex;align-items:center;justify-content:center;position:relative;top:0;left:0;width:100%;height:auto;text-align:center;padding:10px 0;border: 1px solid #949494;border-right: 0 none;color:#666666;font-size:18px;box-sizing:border-box;cursor:pointer;background:#fff} .radio-btns-wrapper .btn-radio:first-child + label {border-top-left-radius:5px;border-bottom-left-radius:5px;} .radio-btns-wrapper .btn-radio + label:last-child {border-top-right-radius:5px;border-bottom-right-radius:5px;border-right: 1px solid #949494;} .radio-btns-wrapper .btn-radio:checked + label {color:#0373e4;border:2px solid #0373e4;border-radius:5px;padding:9px 0} .radio-btns-wrapper .btn-radio:focus + label {box-shadow:0px 0px 0px 2px #87bef5;} .radio-btns-wrapper .btn-radio:checked + label .checkmark {position:absolute;top:-8px;left:-8px;width:30px;height:30px;border-radius:50%;background-color:#0373e4;z-index:10;box-shadow: 1.089px 1.677px 6px 0px rgba(139, 139, 139, 0.8);} .radio-btns-wrapper .btn-radio:checked + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .radio-btns-wrapper .btn-radio:disabled + label{background:#949494;color:#333}/*choi*/ .ui-collapsible{font-family:'NotoSansKR', sans-serif} /* 주택보증 */ .radio-btns-hg {display:flex;position:relative; text-align:center;} .radio-btns-hg .btn-radioty1:disabled + label .checkmark {background: #f7f7f7; color: #737373;} .radio-btns-hg .btn-radioty1 {position:absolute;top:0;left:0;width:0;height:0;border:0 none; cursor:pointer} .radio-btns-hg .btn-radioty1 + label:hover {transition:all .3s; box-shadow:0 30px 40px rgba(0,0,0,.2);} .radio-btns-hg .btn-radioty1:focus + label {transition:all .3s; box-shadow:0 30px 40px rgba(0,0,0,.2);} .radio-btns-hg .btn-radioty1 + label {text-align:center;color:#fff;border-radius:6px; height:204px; width:262px; color:#555; font-size:18px; padding:42px 29px 0 29px; text-align:center; background:#fff; border-top:6px solid #0373e4;position:relative; margin-left:108px;cursor:pointer;box-shadow:0 0 7px rgba(0,0,0,.1); letter-spacing:-1.2px;} .radio-btns-hg .btn-radioty1:first-child + label {border-top:6px solid #0373e4;} .radio-btns-hg .btn-radioty1 + label .text {color:#0373e4; font-size:24px; font-weight:500; height:34px; text-align:center; vertical-align:top; margin-bottom:26px;} .radio-btns-hg .btn-radioty1:last-child + label {border-top:0;} .radio-btns-hg .btn-radioty1:checked + label {color:#fff;border-radius:6px; height:204px; width:262px; color:#fff; font-size:18px; padding:42px 29px 0 29px; text-align:center; background:#0373e4;} .radio-btns-hg .btn-radioty1:checked + label .text {color:#fff; font-size:24px; font-weight:500; height:34px; text-decoration:underline;} .radio-btns-hg .btn-radioty1 + label .checkmark {position:absolute;bottom:30px;left:50%; width:30px; height:30px; border-radius:50%;background-color:#fff;z-index:10; margin-left:-16px; color:#0373e4; border:1px solid #ccc} .radio-btns-hg .btn-radioty1:checked + label .checkmark {position:absolute;bottom:30px;left:50%; width:30px; height:30px; border-radius:50%;background-color:#fff;z-index:10; margin-left:-16px; color:#0373e4} .radio-btns-hg .btn-radioty1:checked + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #0373e4;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .radio-btns-hg .btn-radioty1 + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #ccc;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /*주택연금 신청 추가*/ .radio-btns-hg .btn-radioty2:disabled + label .checkmark {background: #f7f7f7; color: #737373;} .radio-btns-hg .btn-radioty2 {position:absolute;top:0;left:0;width:0;height:0;border:0 none; cursor:pointer} .radio-btns-hg .btn-radioty2 + label:hover {transition:all .3s; box-shadow:0 30px 40px rgba(0,0,0,.2);} .radio-btns-hg .btn-radioty2:focus + label {transition:all .3s; box-shadow:0 30px 40px rgba(0,0,0,.2);} .radio-btns-hg .btn-radioty2 + label {text-align:center;color:#fff;border-radius:6px;height:204px; width:262px; color:#555; font-size:18px; padding:42px 29px 0 29px; text-align:center; background:#fff; border-top:6px solid #0373e4;position:relative; margin-left:108px;cursor:pointer;box-shadow:0 0 7px rgba(0,0,0,.1); letter-spacing:-1.2px;} .radio-btns-hg .btn-radioty2:first-child + label {border-top:6px solid #0373e4;} .radio-btns-hg .btn-radioty2 + label .text {color:#0373e4; font-size:24px; font-weight:500; height:34px; text-align:center; vertical-align:top; margin-bottom:26px;} .radio-btns-hg .btn-radioty2:last-child + label {border-top:0;} .radio-btns-hg .btn-radioty2:checked + label {color:#fff;border-radius:6px;height:204px; width:262px; color:#fff; font-size:18px; padding:42px 29px 0 29px; text-align:center; background:#0373e4;} .radio-btns-hg .btn-radioty2:checked + label .text {color:#fff; font-size:24px; font-weight:500; height:34px; text-decoration:underline;} .radio-btns-hg .btn-radioty2 + label .checkmark {position:absolute;bottom:30px;left:50%; width:30px; height:30px; border-radius:50%;background-color:#fff;z-index:10; margin-left:-16px; color:#0373e4; border:1px solid #ccc} .radio-btns-hg .btn-radioty2:checked + label .checkmark {position:absolute;bottom:30px;left:50%; width:30px; height:30px; border-radius:50%;background-color:#fff;z-index:10; margin-left:-16px; color:#0373e4} .radio-btns-hg .btn-radioty2:checked + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #0373e4;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .radio-btns-hg .btn-radioty2 + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #ccc;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .radio-btns-hg .btn-radioty2 + label span{position:relative; top:20px} .radio-btns-hg .btn-radioty3:disabled + label .checkmark {background: #f7f7f7; color: #737373; } .radio-btns-hg .btn-radioty3 {position:absolute;top:0;left:0;width:0;height:0;border:0 none; cursor:pointer} .radio-btns-hg .btn-radioty3 + label:hover {transition:all .3s; box-shadow:0 30px 40px rgba(0,0,0,.2);} .radio-btns-hg .btn-radioty3:focus + label {transition:all .3s; box-shadow:0 30px 40px rgba(0,0,0,.2);} .radio-btns-hg .btn-radioty3 + label {text-align:center;color:#fff;border-radius:6px; height:204px; width:262px; color:#555; font-size:18px; padding:42px 29px 0 29px; text-align:center; background:#fff; border-top:6px solid #0373e4;position:relative; margin-left:108px;cursor:pointer;box-shadow:0 0 7px rgba(0,0,0,.1); letter-spacing:-1.2px; line-height:28px!important;} .radio-btns-hg .btn-radioty3 + label span{display:block; padding-top:20px;} .radio-btns-hg .btn-radioty3:first-child + label {border-top:6px solid #0373e4;} .radio-btns-hg .btn-radioty3 + label .text {color:#0373e4; font-size:24px; font-weight:500; height:34px; text-align:center; vertical-align:top; margin-bottom:26px;} .radio-btns-hg .btn-radioty3:last-child + label {border-top:0;} .radio-btns-hg .btn-radioty3:checked + label {color:#fff;border-radius:6px; height:204px; width:262px; color:#fff; font-size:18px; padding:42px 29px 0 29px; text-align:center; background:#0373e4;} .radio-btns-hg .btn-radioty3:checked + label .text {color:#fff; font-size:24px; font-weight:500; height:34px; text-decoration:underline;} .radio-btns-hg .btn-radioty3 + label .checkmark {position:absolute;bottom:30px;left:50%; width:30px; height:30px; border-radius:50%;background-color:#fff;z-index:10; margin-left:-16px; color:#0373e4; border:1px solid #ccc} .radio-btns-hg .btn-radioty3:checked + label .checkmark {position:absolute;bottom:30px;left:50%; width:30px; height:30px; border-radius:50%;background-color:#fff;z-index:10; margin-left:-16px; color:#0373e4} .radio-btns-hg .btn-radioty3:checked + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #0373e4;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .radio-btns-hg .btn-radioty3 + label .checkmark:after {content:'';position:absolute;left:11px;top:6px;width:5px;height:11px;border:solid #ccc;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .radio-btns-hg .btn-radioty3 + label span{position:relative; top:-35px;} /* datepicker */ .form-control {display:flex;} .form-control.v2 .btn {margin-left:8px;border-radius:3px;} .form-control.v2 .btn.input {border-radius:3px;} .ui-datepicker{margin-bottom:0} .ui-datepicker__display{border:1px solid #e0e0e0;padding:0 15px;height:48px;border-radius:3px;box-sizing:border-box;font-size:16px;color:#333333} .ui-datepicker__display-value{color:#333333;font-weight:400;font-size:16px;text-align:left} .ui-datepicker__dropdown-button{display:none} .ui-datepicker.is-active:not(.is-disabled) .ui-datepicker__display{border-bottom:1px solid #e0e0e0} .ui-datepicker-calendar--color-primary .ui-datepicker-calendar__header{background-color:#0373e4} .ui-calendar-week--color-primary .ui-calendar-week__date.is-today{background-color:#b4deff} .ui-calendar-week--color-primary .ui-calendar-week__date.is-selected{background-color:#0373e4} .ui-datepicker:hover:not(.is-disabled) .ui-datepicker__display {border-bottom-color: #e0e0e0;} .datepicker .ui-datepicker__label:after {content:'';position:absolute;top:50%;margin-top:-11px;right:13px;background:url(/resources/images/common/icon_input_datepicker.png) no-repeat;background-size:22px 22px;width:22px;height:22px;} .ui-datepicker.is-disabled .ui-datepicker__display {border-bottom:0 none;background-color:#eee;} .ui-datepicker.is-disabled {background: #eee;} .datepicker .ui-datepicker__label input[type="text"] {position: relative;top: 0;left: 0;width: 100%;height: 40px;line-height: 48px;font-size: 16px;padding: 0 50px 0 15px;border: 1px solid #e0e0e0;border-radius: 5px;color:#333333;font-family:'NotoSansKR', sans-serif} /* ****************************************************** My HF *******************************************************/ .custom-select {position:relative;top:0;left:0;padding:0 15px; width:200px;height:50px; border:1px solid #eaeaea;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(../images/common/icon-select-chevron.gif) no-repeat center;background-position-x:175px;} .account-select {position:relative;top:0;left:0;padding:0 15px; width:340px;height:50px; border:0 none;border-bottom:2px solid #292f36;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(../images/common/icon-select-chevron.gif) no-repeat center;background-position-x:315px;font-size:22px;color:#555555;km} select::-ms-expand {display:none;} .fixed {position:fixed;top:0;left:0;width:100%;} .tabbar {position:relative;top:0;width:100%;height:60px;border:1px solid #eee;box-shadow:0 1px 7px rgba(0,0,0,.1); background-color:#fff;z-index:100;border-top:0;overflow:hidden;} .tabbar.fixed{position:fixed;top:0;left:0;width:100%;top:110px} .tabbar .tabbar-inner {display:flex;position:relative;top:0;left:0;max-width:1170px;min-width:1024px;height:59px;margin:0 auto;z-index:10} .tabbar .tabbar-inner .ui-select.is-disabled{display:none} .tabbar .tabbar-inner .tab-select {position:relative;top:0;left:0;padding:0 15px;width:240px;height:58px;box-sizing:border-box;border-top:0 none;border-bottom:0 none;border-left:1px solid #949494;font-size:15px;border-right:1px solid #949494;color:#666;margin-left: -4px;background:url(../images/common/icon-select-chevron.gif) no-repeat center;background-position-x:210px;} .tabbar .tabbar-inner .tab-select.v2 {color:#000;} .tabbar .tabbar-inner .ui-select:not(.is-multiple) .ui-select__display {height:54px;} /* .tabbar .tab-select:after {content:'';position:absolute;top:0;left:0;background:url(../images/common/icon-select-chevron.gif) no-repeat;background-size:10px 5px;width:10px;height:5px;} */ .tabbar .select-tab {position:relative;top:0;left:0;width:240px;height:60px;border:0;border-right:1px solid #e0e0e0;border-radius:0} .tabbar .select-tab .ui-select__display {height:54px;padding:0 15px;} .tabbar .select-tab .ui-select-option {height:40px;} select.ui-select{display:block;width:100%;font-size: 16px;color: #333;transition: all .3s;padding:0 10px;box-sizing:border-box;background:url("/resources/images/common/select_down.png") no-repeat right 10px center;} select.ui-select option{font-size:16px;} .ui-select__label{border:2px solid transparent;margin:1px;} .ui-select .ui-select__display {border: 0 none;} .tabbar .select-tab .ui-select__display-value {font-size:15px;color:#666666;} .tabbar .select-tab:last-child .ui-select__display-value {font-size:15px;color:#000;} .ui-select {margin-bottom:0;} /*contents*/ .title-area + .contents-wrap{margin-top:15px; position:relative;} .contents-wrap{width:100%;max-width:970px;margin:0 auto;padding-bottom:100px} .contents-wrap strong{font-weight:500} .contents-wrap strong.require{font-weight:400} .contents-wrap em{font-style:normal} .contents-wrap h2.title{color:#333333;font-size:28px;font-weight:400} .contents-wrap h3.h3-title{position:relative;color:#000000;font-size:24px;border-bottom:1px solid #333333;padding-bottom:10px;margin:55px 0 20px} .contents-wrap h3.h3-title span{position:absolute;right:0;bottom:10px;color:#737373;font-size:14px;font-weight:350} .contents-wrap h3.h3-title span em{color:#0373e4;font-weight:500} .contents-wrap p.text{color:#555555;font-size:16px;font-weight:350} .basic-box{position:relative;border:1px solid #e0e0e0;border-radius:3px;padding:28px} .basic-box p{color:#555555;font-size:16px;line-height:28px;letter-spacing:-0.5px} .basic-box p strong{color:#0373e4;font-size:18px} .inner-box{background:#fafafa;border:1px solid #e0e0e0;border-radius:3px;padding:28px} .basic-box2{position:relative;border:1px solid #ddd;border-radius:3px;padding:} .basic-box2 .tit{height:80px; line-height:80px; font-size:18px; background:#e0e0e0;padding-left:20px;} .gray-box {background-color:#f7f7f7;text-align:center;border:1px solid #949494;border-radius:7px;} .gray-box .title {font-size:24px;color:#000;margin-top:25px;} .gray-box .text {color:#555;margin-top:20px;font-weight: 400 !important;} section.info{margin-top:40px} section.info > p{font-size:16px;color:#555;font-weight:400} section.info > p:first-child strong{font-weight:500;font-size:20px;color:#000000;} section.info > ul{padding-left:9px;position:relative} section.info > ul > li{position:relative;padding-left:12px;margin-top:18px} section.info > ul > li:before{content:'';position:absolute;left:0;top:15px;width:3px;height:3px;background:#555555} section.info > ul > li p{color:#555;font-size:16px;line-height:26px;letter-spacing:-0.35px;font-weight:400;padding-top:4px;} section.info > ul > li strong{color:#000} section.info > ul.list-type01 li{margin-top:10px} /* 동의하십니까? 예/아니오 버튼 */ .basic-list{position:relative;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;padding:26px 20px;display:flex;justify-content:space-between;} .basic-list strong {display:block;width:90%;} .basic-list strong.question{font-size:18px;letter-spacing:-0.6px} .basic-list .radio-container{margin-left:50px;} .basic-list strong.question + div.d-flex .radio-container{white-space:nowrap} .basic-list strong.question + div.d-flex .radio-container:first-child{margin-left:0} .basic-list div.ui-select__label {width:100% !important;} section.info .subtitle {font-size:18px;color:#333;margin-bottom:20px;} section.info.dense > ul > li {margin-top:0;} section.info-footer {text-align:center;margin:40px 0 60px;} section.info-footer .main {font-size:16px;color:#555555;} section.info-footer .sub {font-size:16px;color:#737373;margin-top:30px;} .check-list .title {font-size:24px;color:#000;font-weight:500;margin-bottom:20px;} .check-list > ul > li {margin-bottom:20px;} section.info .inner-box dl.bullet > dt{color:#333333;font-size:16px;font-weight:500;margin-bottom:15px} section.info .inner-box dl.bullet > dt span{font-weight:350} section.info .inner-box dl.bullet > dd{padding-left:23px;position:relative;line-height:26px;margin-top:5px;color:#555555} section.info .inner-box dl.bullet > dd span.em{font-weight:500;color:#555555} section.info .inner-box dl.bullet > dd:before{content:'';position:absolute;width:4px;height:1px;background:#555555;left:9px;top:14px} section.info .inner-box dl.bullet > dd > ul >li{position:relative;padding-left:20px} section.info .inner-box dl.bullet > dd > ul > li:before{content:'';position:absolute;left:2px;top:9px;width:7px;height:6px;background:url("/resources/images/common/bullet_type01.png") no-repeat 0 0} section.info .inner-box dl.no-bullet dt{margin-bottom:0} section.info .inner-box dl.no-bullet > dd{padding-left:0} section.info .inner-box dl.no-bullet > dd:before{display:none} /* step */ .step{margin:0 auto 120px;position:relative;max-width:900px} .step ul{position:absolute;display:table;text-align:center;left:50%;transform:translateX(-50%);-ms-transform:translateX(-50%);z-index:10;overflow:hidden} .step ul li{display:table-cell;min-width:170px} .step ul:before{content:'';position:absolute;width:100%;height:2px;background:#949494;z-index:4;top:18px} .step:after{content:'';position:absolute;width:110px;height:2px;background:#fff;z-index:5;top:18px;right:0} .step li{position:relative;z-index:5;text-align:center} .step li:first-child:before{content:'';position:absolute;width:110px;height:36px;left:-55px;top:0;background:#fff} .step.small li:first-child:before{left:-45px;} .step li:last-child:before{content:'';position:absolute;width:50%;height:36px;right:0px;top:0;background:#fff} .step li i:before{content:'';position:absolute;width:10px;height:36px;left:-10px;top:0;background:#fff} .step li i:after{content:'';position:absolute;width:10px;height:36px;right:-10px;top:0;background:#fff} .step li i{position:relative;display:inline-block;width:36px;height:36px;border-radius:50%;background:#949494;color:#666666;font-size:20px;text-align:center;font-weight:500;line-height:36px;font-style:normal;font-family:'NotoSansKR'} .step li.complete i{text-indent:-9999px;background:#b1b3b9 url("/resources/images/common/bg_step_checked.png") no-repeat center center;color:#fff;} .step li.current i{background:#0373e4;color:#fff;} .step span{display:block;color:#737373;font-size:16px;margin-top:8px;font-weight:400} .step li.current span{color:#0373e4;} /*popup*/ .popup-header {display:block;position:absolute;width:100%;height:70px;background-color:#fff;border-bottom:1px solid #e0e0e0;z-index:1001;} .popup-header h1 {font-size:26px;width:100%;text-align:center;font-weight:500;line-height:100%;padding:22px 0} .popup-header .btn{height:100%;min-width:70px;height:69px;position: absolute;right: 0;top: 0;} #app-popup .pop-contents {position:absolute;top:70px;left:0;right:0;overflow:auto;padding-top:0px;height:calc(100% - 140px);} .pop-contents {padding-top:70px;font-size:0.87rem;color:#555555;} .pop-contents section {padding: 10px 60px 40px;border-top:10px solid #949494;} .pop-contents section:first-child {border-top:0;} .pop-contents h4.title {color:#000;margin:30px 0 8px;} .pop-contents.layer section{padding:40px 40px 80px;font-size:16px} .pop-contents.layer section:last-child{padding-bottom:0;} .pop-contents.pay section{padding:50px 100px 0;font-size:16px;} .pop-contents.layer section .hf-table > tbody > tr > th, .pop-contents.layer section .hf-table > tbody > tr > td{height:60px} .pop-foot {display:flex;position:fixed;bottom:0;left:0;width:100%;height:55px;z-index:100;} .pop-foot .btn {height:55px;line-height:55px;} .pop-contents.layer + .pop-foot {height:40px;} .pop-contents.layer + .pop-foot .btn {height:40px;line-height:40px;} .btn.close:before {transition:all .3s;content:'';position:absolute;top:21px;right:34px;border:solid #000;border-width:0 2px 2px 0;width:13px;height:13px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .btn.close:after {transition:all .3s;content:'';position:absolute;top:39px;right:34px;border:solid #000;border-width:0 2px 2px 0;width:13px;height:13px;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);} .pop-contents{font-size:16px} .pop-foot {display:flex;position:fixed;bottom:0;left:0;width:100%;height:60px;z-index:100;} .pop-foot .btn {height:60px;line-height:60px;border-radius:0;width:100%;margin:0;font-size:20px} .pop-contents.layer + .pop-foot {height:60px;} .pop-contents.layer + .pop-foot .btn {height:60px;line-height:60px;} /*고객권리안내문 문단수정 22.06.02 */ .pop-contents .con_text{display:inline-block; width:97%; vertical-align:top;} .IBCM00P000 .scroll-area{overflow-y:auto;border-top:0px solid #e0e0e0;border-bottom:0px solid #e0e0e0} .IBCM00P000 .scroll-area .hf-table{border-top:0} .IBCM00P000 .scroll-area .hf-table > tbody > tr:last-child > th,.scroll-area .hf-table > tbody > tr:last-child > td{border-bottom:0} .IBCM00P000 .scroll-area:focus {box-shadow:0 0 0 1px #87bef5;} .scroll-area{overflow-y:auto;border-top:1px solid #333;border-bottom:1px solid #e0e0e0} .scroll-area .hf-table{border-top:0} .scroll-area .hf-table > tbody > tr:last-child > th,.scroll-area .hf-table > tbody > tr:last-child > td{border-bottom:0} .scroll-area:focus {box-shadow:0 0 0 1px #87bef5;} .jconfirm-holder {border-radius: 10px;overflow: hidden;} .jconfirm.jconfirm-my-dialog .jconfirm-box{max-width:1170px;min-width:400px;width:760px;border-radius:10px;overflow:hidden;background-color:transparent} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{background:#fff;border-radius: 10px;overflow:hidden} .jconfirm-buttons {position:absolute;bottom:0;left:0;width:100%;display:flex} .jconfirm-buttons .btn{width:100%;height:60px;border-radius:0;margin:0} .box.gray {background-color: #f7f7f7;padding:30px;} .box.bluegray {background-color: #f5f6fa;padding:30px;border:1px solid #e0e0e0;border-radius:5px;} .box.border {border:1px solid #e0e0e0;} .box.round {border-radius:6px;} .box.white{padding:15px;border-radius:6px;background:#fff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);font-size:0.87rem;color:#555555;} .box.bluegray {background-color:#f5f6fa;color:#555555;} .box.shadow {box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);} .normal-box{background:#f5f6fa;padding:20px 15px} .normal-box p strong.tit{color:#333333;font-size:0.93rem;font-weight:500} .normal-box ul{margin-top:10px} .normal-box ul.bullet li{padding-left:10px;position:relative;text-align:left} .normal-box ul.bullet li:before{content:'';position:absolute;left:0;top:50%;background:#606061;width:3px;height:3px;border-radius:50%;margin-top:-1.5px} .normal-box ul li span{display:inline-block;color:#555555;width:34%;font-size:0.8rem} .normal-box ul li span:first-child{color:#737373;width:20%} /* KeenUI Switch */ .ui-switch--color-primary.is-checked:not(.is-disabled) .ui-switch__thumb {background-color: #fff;} .ui-switch--color-primary.is-checked:not(.is-disabled) .ui-switch__track {background-color: #68caff;} /* 셀렉트 */ .ui-select:not(.is-multiple) .ui-select__display {height:42px;line-height:42px;} .ui-select {border:1px solid #949494;border-radius:5px;/* height:50px; */line-height:50px;box-sizing:border-box;background-color:#fff;outline:inherit !important} div.ui-select:focus {opacity:.4 !important; border:3px solid #0054a4 !important; height:53px !important; margin:-2px 0 0 -2px !important} .ui-select__display {padding:0 15px;} .ui-select-option.is-selected {background-color:#fff;color:#0373e4;} .ui-select-option {color:#737373;padding:9px 0.75rem;border:1px solid #ffffff;background:#fff;} .ui-select-option.is-highlighted {background-color:#e0e0e0;color:#333;border:1px solid #87bef5} .tippy-popper{z-index:100;max-width:inherit;margin-left:-1px;margin-top:1px;} .ui-popover.is-raised {box-shadow: 0 0 4px rgba(0,0,0,.2);} .ui-select__dropdown {margin-bottom:0 !important;} .ui-select .ui-icon.ui-select__dropdown-button {display:none;} .ui-select__label-text {position: absolute;top: 11px;left: 10px;} .ui-select-option__basic, .ui-select-option__image-text{background:transparent;} .ui-select-option.is-selected .ui-select-option__basic{color:#0373e4} /* dropdown 오픈 전 */ .ui-select .ui-select__display-value:after {transition:all .3s;content:'';position:absolute;top:50%;right:15px;border:solid #555555;border-width:0 2px 2px 0;width:9px;height:9px;-webkit-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);} /* dropdown 오픈 후 */ .ui-select .has-dropdown-open.tippy-active .ui-select__display-value:after {content:'';position:absolute;top:50%;right:15px;border:solid #555555;border-width:0 2px 2px 0;width:9px;height:9px;-webkit-transform:translateY(-50%) rotate(225deg);-ms-transform:translateY(-50%) rotate(225deg);transform:translateY(-50%) rotate(225deg);} /* select disabled */ .ui-select.is-disabled {background-color:#f7f7f7;} .ui-select.is-disabled .ui-select__display {background-color:f7f7f7;border-bottom:0 none;} .ui-select.is-disabled .ui-select__display-value:after {transition:all .3s;content:'';position:absolute;top:50%;right:15px;border:solid #CCCCCC;border-width:0 2px 2px 0;width:9px;height:9px;-webkit-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);} /* selector 가 2개 이상인 경우 wrap 으로 감싼다 */ .selector-wrap {display:table;width:100%} .selector-wrap .selector{float:left;width:48%;display:table-cell} .selector-wrap .selector:last-child{float:right} .selector {position:relative;top:0;left:0;width:100%;margin-bottom:0;border-right:1px solid #949494;} .selector:focus {opacity:1 !important;border:1px solid #87bef5 !important;border-radius: 5px !important;box-shadow: 0 0 2px #6db6ff;} .selector .ui-select__display {height:58px;} .selector .ui-select-option {height:40px;} .selector .ui-select__display-value {font-size:16px;color:#333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right: 15px;} .selector .ui-select__content{width:100%} textarea {width:100%;border:1px solid #e0e0e0;border-radius:5px;padding:15px 20px;font-size:16px;color:#333333;resize:none;} .textarea-info {text-align:right;font-size:14px;margin-top:5px;} .textarea-info .main {color:#333333;} .textarea-info .sub {color:#737373;} .label {display:inline-block;position:relative;top:0;left:0;margin-bottom:10px;} .label.required {padding-right:10px;} .label.required:after {content:'';position:absolute;top:6px;right:0;width:5px;height:5px;border-radius:50%;background-color:#ff162a;} /* 캘린더 */ div[class*="ui-datepicker"] {outline:initial !important;} .ui-datepicker-calendar__body{height:auto} /* ie 크로스 브라우징*/ .ui-datepicker__hidden-input {outline:initial !important;} .datepicker.is-active .ui-datepicker__label {border: 1px solid #0373e4 !important;} .ui-calendar-controls__month-and-year:focus{text-decoration:underline;color:#309df4} .datepicker-wrap {position:relative;top:0;left:0;padding-bottom:50px;} .datepicker-wrap .datepicker {position:absolute;top:0;left:0;width:100%;} .datepicker-wrap .datepicker .ui-datepicker__label {position: absolute;width:240px;border: 1px solid #e0e0e0;border-radius: 5px;} .datepicker-wrap .datepicker.from .ui-datepicker__label {left:0;} .datepicker-wrap .datepicker.to .ui-datepicker__label {left:270px;} .datepicker-wrap .datepicker.from:after {content:'-';position: absolute;top: 11px;left:251px;font-size: 20px;color:#555555;} .datepicker {width:240px;} .datepicker .ui-datepicker__label {border: 1px solid #e0e0e0;border-radius: 5px; background:#fff !important} .datepicker .ui-datepicker__display {border: 0 none;} .ui-popover-theme {z-index:1000;} .ui-datepicker.is-active:not(.is-disabled) .ui-datepicker__display{border-bottom: 0 none !important;} /* 캘린더 색상 */ .ui-calendar-week--color-primary .ui-calendar-week__date.is-selected, body[modality=keyboard] .ui-calendar-week--color-primary .ui-calendar-week__date.is-selected {background-color: #0373e4;} .ui-datepicker-calendar--color-primary .ui-datepicker-calendar__header {background-color: #0373e4;} /* 캘린더 아이콘 */ .datepicker .ui-datepicker__label {border: 1px solid #e0e0e0;} /* 년월선택 캘린더 (com-datepicker-monthly) */ .pop-monthly-calendar {width:240px;} .pop-monthly-calendar .monthly-calendar-btn {position:relative;top:0;left:0;width:100%;} .pop-monthly-calendar .monthly-calendar-btn:hover {opacity:1;} .pop-monthly-calendar .datepicker-monthly-input {border:1px solid #e0e0e0;padding:0 45px 0 15px;width:100%;height:50px;border-radius:3px;box-sizing:border-box;font-size:16px;color:#333333;cursor:pointer;border-radius: 3px;} .pop-monthly-calendar .datepicker-monthly-input + .icon-calendar {content:'';position:absolute;top:13px;right:13px;background:url(../images/common/icon_input_datepicker.png) no-repeat;background-size:22px 22px;width:22px;height:22px;} .monthly-calendar {width:270px;} .monthly-calendar .btn-arrow {width:30px;height:30px;padding:20px;background:red;} .monthly-calendar .calendar-header {display:flex;align-items:center;padding:10px;background-color: #0373e4;color:#fff;} .monthly-calendar .calendar-header .year {position: relative;top: -2px;font-size: 1.375rem;color:#fff;padding:0 5px;} .monthly-calendar .calendar-header .prev {margin-right:auto;} .monthly-calendar .calendar-header .next {margin-left:auto;} .monthly-calendar .calendar-header .ui-icon-button--type-secondary.ui-icon-button--color-default {color:#fff;} .monthly-calendar .calendar-body {padding:15px;} .monthly-calendar .calendar-body .month {position:relative;top:0;left:0;width:25%;padding:10px 0;text-align:center;} .monthly-calendar .calendar-body .month:hover:before {display:block;} .monthly-calendar .calendar-body .month:before {display:none;content:'';position:absolute;top:50%;left:50%;transform: translateY(-50%) translateX(-50%);width:40px;height:40px;border-radius:20px;background-color:#efefef;z-index:-1;} /* 페이징 */ .paging {display:flex;align-items:center;justify-content:space-between;position:relative;top:0;left:0;margin:0 auto;} .paging .num {display:flex;align-items:center;padding:0 20px;text-align:center;font-size:1.1rem;font-weight:500;} .paging .num.active {color:#0373e4;text-decoration:underline;} .paging .btn-paging {position:relative;top:0;left:0;width:30px;height:30px;border-radius:5px;border:1px solid #e0e0e0;} .paging .btn-paging:hover {border:1px solid #555555;} .paging .go-first, .paging .prev {margin-right:10px;} .paging .go-last, .paging .next {margin-left:10px;} .paging .go-first:before {content:'';position:absolute;top:7px;left:6px;width:14px;height:13px;background:url(../images/common/icon_table_first_page.png) no-repeat center center;background-size:14px 13px;} .paging .go-last:before {content:'';position:absolute;top:7px;left:7px;width:14px;height:13px;background:url(../images/common/icon_table_last_page.png) no-repeat center center;background-size:14px 13px;} .paging .prev:before {content:'';position:absolute;top:7px;left:9px;width:8px;height:13px;background:url(../images/common/icon_table_prev.png) no-repeat center center;background-size:8px 13px;} .paging .next:before {content:'';position:absolute;top:8px;left:10px;width:8px;height:13px;background:url(../images/common/icon_table_next.png) no-repeat center center;background-size:8px 13px;} .icon.question-mark {background:url(../images/common/icon_table_question_mark.gif) no-repeat;background-size:22px 22px;width:22px;height:22px;top:0;} .icon.delete-input {background:url(../images/common/btn_input_delete.png) no-repeat;background-size:24px 24px;width:24px;height:24px;margin-left:10px;} .icon.add {background:url(../images/common/icon_button_plus.png) no-repeat;background-size:14px 14px;width:14px;height:14px;top:1px;} .icon.delete {position:relative;top:-7px;left:0;padding-right: 10px;} .icon.delete:before {transition:all .3s;content:'';position:absolute;top:2px;left:0px;width:6px;height:6px;border:solid #000;border-width:0 2px 2px 0;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);} .icon.delete:after {transition:all .3s;content:'';position:absolute;top:-7px;left:0px;width:6px;height:6px;border:solid #000;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /* 공통 툴팁 */ .tooltip {display:inline-block;position:relative;top:0;left:0;} .tooltip .tooltip-cont.show{display:block;} .tooltip .tooltip-cont.hide{display:none;} .tooltip .tooltip-cont {position:absolute;top:30px;left:0;padding:20px;background-color:#fff;border:1px solid #e0e0e0;border-radius:5px;font-size:16px;color:#555555;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:20;line-height:160%;text-align:left;} .tooltip .tooltip-cont .textbox .type-html {min-width:400px;} .tooltip .tooltip-cont .textbox .tooltip-title {display:block;margin-bottom:10px;text-align:left;} .tooltip .tooltip-cont .textbox .desc {display:block;white-space:pre-line;text-align:left;} /* 소득 툴팁 2021-03-17 */ .toolIncm01.tooltip .tooltip-cont.show {top:-190px;left:-620px; font-size:14px;} /* 사업자보증 심사시스템 개편 사업 추가 툴팁 start */ .tooltip-container {position:absolute; display:inline-block; z-index:140;} .tooltip-container.order2 {z-index:139;} .tooltip-icon {display:flex; width: 20px;height: 20px; border-radius: 50%; background: #003366;color: #ffffff; align-items: center ; justify-content: center;font-size: 16px;cursor: pointer; z-index:2;} .tooltip-box {position: absolute;left: 100%; top: 50%;transform: translateX(0px) translateY(-50%);display: flex;flex-direction: column;opacity: 0;transition: opacity 0.3s ease;} .tooltip-content {background-color: #fff;color: #333333;padding: 10px;} .tooltip-container:hover .tooltip-box {opacity: 1;} .ttip1 {margin-top:-20px; margin-left:533px;} .tooltip-table {border-collapse:collapse;border: 1px solid #e0e0e0;} .tooltip-table th {background-color: #f5f6f7;border: 1px solid #e0e0e0;text-align: center;color:#333;} .tooltip-table td {border:1px solid #e0e0e0;text-align: center} .orderList li, .order-list li { padding:0 0 0 12px !important; text-indent:-12px;} .highlight-t {border-top:2px solid #32a1ff !important;border-left:3px solid #32a1ff !important; border-right:2px solid #32a1ff !important;} .highlight-lr {border-left:3px solid #32a1ff !important;border-right:2px solid #32a1ff !important;} .highlight-b {border-left:3px solid #32a1ff !important;border-right:2px solid #32a1ff !important; border-bottom:2px solid #32a1ff !important;} .highlight-l {border-left:3px solid #32a1ff !important;} .highlight-r {border-right:2px solid #32a1ff !important;} .content-item {margin-bottom: 20px;} .question-item {margin-bottom: 10px;} .text-conten {margin-bottom: 20px} /* 사업자보증 심사시스템 개편 사업 추가 툴팁 end */ /*sub visual*/ .contents {width:100%;background-color:#fff;} .contents .subvisual {position:relative;top:0;left:0;width:100%;height:200px;background-color:#f2f5fa;} .contents .subvisual .text-wrap{position:relative;top:0;left:0;min-width:1024px;max-width:1170px;height:200px;padding-left:60px;margin:0 auto;} .contents .subvisual .text-wrap .title {padding-top:55px;margin-bottom:15px;font-size:40px;color:#004281;font-weight:500;line-height:100%} .contents .subvisual .text-wrap .subtitle {font-size:18px;color:#555;font-weight:300} .contents .subvisual .text-wrap img{position:absolute;bottom:0;right:0;width:441px;} .contents .subvisual#MY_HF{background:#f9f1ee} .contents .subvisual#CC{background:#f9f1ee} .contents .subvisual#RE{background:#f0f3f9} .contents .subvisual#DS{background:#e7f3f6} .contents .subvisual#SC{background:#f0f3f9} .contents .subvisual#CM{background:#f9f4eb} /* 툴팁닫기버튼 */ .close-tooltip{position:absolute;top:-7px;right:-8px;min-width:auto;width:22px;height:22px;padding:0;background-color:#bababa;border-radius:11px;} .close-tooltip:before {transition:all .3s;content:'';position:absolute;top:11px;left:7px;width:6px;height:6px;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);} .close-tooltip:after {transition:all .3s;content:'';position:absolute;top:3px;left:7px;width:6px;height:6px;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} /*서브페이지공통*/ .ph-type1{font-size:16px;color:#555;line-height:200%;} .ph-type1.f16{font-size:16px;line-height:26px} .ph-type1.f16.color-gray7{color:#737373;} .ph-type1 + .form{margin-top:60px;} .ul-list ul {margin-top:5px;border-top:1px solid #333333} .ul-list ul li{position:relative;border-bottom:1px solid #e0e0e0} .ul-list ul li a{height:85px;display:block;padding:0 15px;position:relative;} .ul-list ul li a:after{content:'';clear:both;position:absolute;width:8px;height:14px;right:30px;top:50%;transform:translateY(-50%);background-image:url("/resources/images/common/bg_arrow_right.png");background-repeat:no-repeat;} .ul-list ul li a.selected{background-color:#f5f6fa} .ul-list ul li a > span{display:inline-block;} .ul-list ul li a .accout{height:85px;line-height:85px;} .ul-list ul li a .flag{} .ul-list ul li a .total{position:absolute;right:190px;color:#737373;font-size:14px;top:50%;transform:translateY(-50%);z-index:9;line-height:100%;} .ul-list ul li a .total span{line-height:100%;} .ul-list ul li em{font-style:normal;font-weight:500} .ul-list ul li .txt-num{display:block;font-family:'NotoSansKR';font-weight: bold;color:#333333;font-size:26px;vertical-align:bottom;margin-top:5px;letter-spacing:-0.6px;line-height:110%;} .ul-list ul li a span span{display: inline-block;line-height:100%;} .ul-list ul li .ctrl-btn{position:absolute;right:78px;top:50%;transform:translateY(-50%);z-index:10} .ul-list ul li .flag{width:47px;height:25px;display:inline-block;margin-left:25px;color:#0474e4;text-align:center;background:#fff;border:#0474e4 solid 1px;font-size:13px;line-height:25px;border-radius:9999px;margin-bottom:0} .ul-list ul li .btn.small.outline.delete{width:60px;height:30px;display:inline-block;color:#333333;border:1px solid #e0e0e0;border-radius:2px;background:#fff;font-size:14px;text-align:center;line-height:30px;} .n-dash{display:inline-block;width:50px;text-align:center;line-height:50px} .form-item{margin-bottom:30px} .form-item > .radio-btns-wrapper{display:flex;width:770px} .form-item .d-flex{display:flex;align-items:center;flex-wrap:wrap} .form-item .inp-wrap .dash{display:inline-block;width:50px;text-align:center} /* .etsttip {margin-left: -107px; margin-top: 14px;} */ .form-item > p:nth-child(2){width:770px} .form-item > p:first-child + .ui-datepicker{width:770px} .form-item > p:first-child + .ui-datepicker + .list-box{padding-left:200px} .form-item > p.formw100 {display:flex;justify-content:space-between} .form-item > p.formw100 .btn.al-right{margin-left:10px} .form-item > p.formw100 + p{width:100%;padding-left:200px;margin-top:10px} .form-item > p:first-child strong.require,.form-item > p:first-child label, .form-item > div:first-child strong{display:table-cell;vertical-align:middle} .form.flex-type .form-item .form-tit{display:flex;align-items:center;width:200px;height:50px;} .form-item > p:first-child{ width:200px;} /* 문제 많은 부분 2021-04-22 폼요소의 p 영역으로 제목을 200px로 고정시킴 아래 label-tit 클래스를 넣어주세요. */ .label-tit{display: table;width: 200px;margin-right: 0;min-height: 50px;} .form-item .label-tit .tooltip,.form.flex-type .form-item .form-tit .tooltip{display:inline-flex;} .form-item .d-flex.space-between > .ui-select{max-width:240px} .form-item .d-flex.space-between > .ui-select + .com-input-wrap{max-width:410px} .form-item > p:first-child strong{display:table-cell;vertical-align:middle} .form-item > p label,.form-item > p strong, .form-item > div strong.require {font-weight:500 !important;font-size:18px;color:#000000;position:relative;padding-right:10px;} .form-item > p label.require:after,.form-item > p strong.require:after,.form-item > div:first-child strong.require:after{content:'';position:static;box-sizing:border-box;background-color:#ff162a;border-radius:50%;vertical-align:top;display:inline-block;margin-left:5px;margin-top:6px} .form-item > div{position:relative;} .form-item > div.formw100{width:770px} .form-item small.guide{color:#737373;font-size:14px;font-weight:300;margin-top:11px;display:block;} .form-item + .ui-collapsible .form-item{align-items:flex-start} .form-item .ui-collapsible .d-flex{align-items:flex-start} .table-header{position:relative} .table-header .al-right{position:absolute;right:0;top:-10px} .com-input-wrap ~ .btn{vertical-align:bottom} .inp-txtwrap ~ .btn{vertical-align:bottom} div.han{position:static;margin-bottom:5px;text-align:right;color:#ff162a;font-size:14px;} span.han{display:inline-block; color:#ff162a;font-size:16px;} .form-item ::-webkit-input-placeholder{letter-spacing:-1px} .form-item{display:flex;flex-wrap:wrap;min-height:50px} .form-item .half {display:flex;justify-content:space-between;margin-bottom:10px} .form-item .half .side{width:49%} .form-item .half .side .inp-txtwrap{margin-bottom:0} .form-item .half .side p{margin-bottom:10px} .form-item .half .side .d-flex{height:45px;align-items:center;margin-top:5px} .form-item .half .side .d-flex label{margin-bottom:0} .form-item .half .side strong,.form-item .half .side label{font-weight:500;font-size:15px} .form-item .half .side > label{margin-bottom:0;font-weight:350} .form-item .tooltip{display:inline-block;height:25px;vertical-align:middle;position:static;} .form-item .tooltip button{margin-right:0} .form-item .tooltip .tooltip-cont{width:460px;} .inp-txtwrap{position:relative;display:inline-block} .inp-txtwrap .han{position:absolute;right:0;top:-25px;color:#ff162a;font-size:14px;} .inp-txtwrap div.han{position:static;margin-bottom:5px;text-align:right;color:#ff162a;font-size:14px;} .info-list01{background:#fff;} .mcase + .mcase{margin-top:60px;} .info-list01 dt{position:relative;display:block;line-height:100%;padding:18px 20px 17.5px;font-weight:500;color:#000000;font-size:20px;border-top:1px solid #333;border-bottom:1px solid #e0e0e0;} .info-list01 dt .ui-switch{display:inline-block;height:auto;vertical-align:middle;margin-left:10px} .info-list01 dt button{display:inline-block;vertical-align:middle;margin-left:10px} .info-list01 dt a{position:absolute;right:0;height:100%;width:68px;top:0;background:url("/resources/images/common/bg_arrow_right2.png") no-repeat center center;background-size:9px 16px;} .info-list01 dt > span{display:inline-block;vertical-align:middle;} .info-list01 dt > h3, .info-list01 dt > h2{display:inline-block;vertical-align:middle;font-size: 20px;font-weight: 500;} .info-list01 dt.none{border-bottom:0} .info-list01 dd {padding:0 0 25px;position:relative;border-bottom:1px solid #e0e0e0;} .info-list01 dd.none{padding-bottom:10px} .info-list01 dd.none.v2{padding-bottom:0;border-bottom:0 none;} .info-list01 dd.none:before{display:none} /*.info-list01 dd:before{width:290px;height:100%;position:absolute;top:0;left:0;background:#f7f7f7;border-right:1px solid #e0e0e0;z-index:0;content:"";padding:0 40px;box-sizing:border-box}*/ .info-list01 dd > ul.bg{position:relative;top:0;left:0;padding: 20px 0;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;} .info-list01 dd > ul.bg:before{width:290px;height:100%;position:absolute;top:0;left:0;background:#f7f7f7;border-right:1px solid #e0e0e0;z-index:0;content:"";padding:0 40px;box-sizing:border-box} .info-list01 dd > ul{padding-top:30px;} .info-list01 dd > ul li:after{content:'';clear:both;display:block} .info-list01 dd > ul > li:not(:first-child){margin-top:20px;} .info-list01 dd > ul > li.nodata{font-size:0.93rem;color:#555;} .info-list01 dd > ul > li > ul{float:left;width:100%} .info-list01 dd > ul > li > ul > li{margin-top:10px} .info-list01 dd > ul > li > ul > li > span{display:inline-block;width:260px;padding-left:65px;box-sizing:border-box;color:#555;font-size:16px} .info-list01 dd > ul > li > ul > li > span:before{content:'ㄴ';position:absolute;left:52px;top:0;width:3px;height:3px;font-size:13px;font-weight:normal;} .info-list01 dd > ul > li span{position:relative} .info-list01 dd > ul > li > span{width:260px;display:inline-block;position:relative;font-size:16px;color:#555555;padding:0 40px;box-sizing:border-box;letter-spacing:-0.5px} .info-list01 dd > ul li strong {display:inline-block;font-size:16px;color:#333;font-weight:500;line-height:1.3em;margin-left:50px;white-space:pre-line;margin-right:50px;} .info-list01 dd > ul li .inp-txtwrap{display:inline-block;font-size:16px;color:#333;font-weight:500;line-height:1.3em;margin-left:50px;white-space:pre-line;float: right;margin-right:50px;} .info-list01 dd > ul li strong.num-align{width:260px;text-align:right;display:inline-flex;justify-content:space-between} .info-list01 dd > ul li strong.num-align i{margin-left:5px} .info-list01 dd > ul li ul li strong em{display:inline-block;min-width:66px;text-align:right;vertical-align:top} .info-list01 dd ul li i.require{position:relative;display:inline-block;width:5px;height:5px;background:#ff162a;border-radius:50%;top:4px;right:-5px} .info-list01 dd .subtotal + ul{padding-top:10px} .info-list01 .tooltip{display:inline-block;} i.require{position:relative;display:inline-block;width:5px;height:5px;background:#ff162a;border-radius:50%;top:2px;right:-5px} i.require.red-star{top:-9px;right:0;} .info-list01.st2 dd > ul > li > ul > li .com-input-wrap span:before{content:none;} .info-list01.st2 dd > ul > li > ul > li{margin-top:0px} .info-list01.st2 dd > ul > li > ul > li + li{margin-top:10px;} .info-list01.st2 dd > ul > li:not(:first-child){margin-top:0;} .info-list01.st2 dd > ul li ul li .inp-txtwrap{margin-left:0;} .info-list01.st2 dd > ul li .inp-txtwrap{max-width:657px;width:657px;} .info-list01.st2 dd > ul li .com-input-wrap.append-wrap .txt{width:auto;text-align:right;padding-right:0;} .info-list01 .tooltip .tooltip-cont{width:460px;} /* 리스트 스타일링 */ /* 1depth */ .dot > li {position:relative;top:0;left:0;padding-left:10px;margin-bottom:25px;color:#333333;font-size:16px;} .dot > li:last-child {margin-bottom:0;} .dot > li:before {content:'';position:absolute;top:10px;left:0;width:3px;height:3px;border-radius:2px;} .dot > li.top:before{margin-top:8px} .dot.dense > li {margin-bottom:5px;} .dot.f14 > li {font-size:14px;} /* 리스트 컬러 스타일링 */ .dot.gray > li:before {background-color:#555555;} .dot.gray.color-gray5 li {color:#555555;} /* 2depth */ .dot > li > ul {position:relative;top:0;left:0;color:#555555;margin-top:10px;} .dot > li > ul > li {position:relative;top:0;left:0;padding-left:10px;margin-bottom:5px;} .dot > li > ul > li:before {content:'-';position:absolute;top:0px;left:0;} /* 3depth */ .dot > li > ul > li > ul {position:relative;top:0;left:0;margin-top:8px;margin-bottom: 15px;} .dot > li > ul > li > ul > li {position:relative;top:0;left:0;padding-left:15px;} .dot > li > ul > li > ul > li:before {content: '';position: absolute;left: 2px;top: 9px;width: 7px;height: 6px;background: url(/resources/images/common/bullet_type01.png) no-repeat 0 0;} /* 숫자 리스트 스타일링 */ body {counter-reset: my-sec-counter my-sec-counter2 my-sec-counter3 my-sec-counter4 } .num > li {position:relative;top:0;left:0;padding-left:23px;margin-bottom:20px;font-size:15px;} .num > li:last-child {margin-bottom:0;} .num > li:before {counter-increment: my-sec-counter;content:counter(my-sec-counter);position:absolute;top:3px;left:0;width:18px;height:18px;border-radius:9px;text-align:center;} .num.gray > li:before {background-color:#424959;color:#fff;font-size: 12px;font-weight:700;} .num.type01 > li {position:relative;top:0;left:0;padding-left:36px;margin-bottom:0;font-size:18px; font-weight:500; line-height:28px} .num.type01 > li:last-child {margin-bottom:0; border-bottom:1px solid #c0c0c0;} .num.type01 > li:before {counter-increment: my-sec-counter;content:counter(my-sec-counter);position:absolute;top:0;left:0;width:28px;height:28px;border-radius:14px;text-align:center; background:#0373e4; color:#fff;font-size:1rem; line-height:28px} .num_detext {padding:8px 0 34px 22px; color:#555; font-size:16px; vertical-align:Top; border-left:1px solid #949494; margin:6px 0 6px -22px;} .num.type02, .num.type03 {margin-top:14px;} .num.type02 > li, .num.type03 > li {padding-left:24px; margin-bottom:3px;} .num.type02 > li:last-child, .num.type03 > li:last-child {} .num.type02 > li:before, .num.type03 > li:before {counter-increment: my-sec-counter;content:counter(my-sec-counter);position:absolute;top:2px;left:-6;width:18px;height:18px;border-radius:10px;text-align:center; background:#fff; line-height:17px; border:1px solid #555} .num.type04 > li {position:relative;top:0;left:0;padding-left:22px;margin-bottom:0;font-size:15px; font-weight:400; line-height:28px} .num.type04 > li:last-child {margin-bottom:3px;} .num.type04 > li:before {counter-increment: my-sec-counter;content:counter(my-sec-counter);position:absolute;top:7px;left:0;width:13px;height:13px;border-radius:10px;text-align:center; background:#fff; color:#333;font-size:12px; line-height:12px; border:1px solid #333} .counter-group ul { counter-reset: my-sec-counter my-sec-counter2 my-sec-counter3 my-sec-counter4 } /* 유의사항 */ .info-acco {margin-top:60px;border:1px solid #e0e0e0} .info-acco .title{padding:18px 30px;border-bottom:1px solid #e0e0e0;color:#000000;font-size:18px;font-weight:500} .info-acco .title i{display:inline-block;width:22px;height:22px;background:url("/resources/images/common/icon_info.png") no-repeat 0 0;vertical-align:middle;margin-right:10px} .info-acco .title span{display:inline-block;line-height:22px;vertical-align:middle} /* 사업자보증 심사시스템 개편 사업 추가 start */ .info-acco .title02{display:flex; min-height:65px; background:#f7f7f7; padding:12px 30px 11px 30px; justify-content:space-between; align-items:center} .info-acco .title03{background:#f7f7f7;} .info-acco .title04{display:flex; min-height:65px; background:#0373E4; padding:12px 30px 11px 30px; justify-content:space-between; align-items:center; color:#fff;} /* 사업자보증 심사시스템 개편 사업 추가 end */ .info-acco .info-content{padding:35px 30px} .info-acco .info-content ul li{font-size:16px} .IBRECOM .dot-list li{position:relative;padding-left:13px;color:#555555;font-size:16px;margin-top:5px;font-weight:400} .IBRECOM .dot-list li:before{content:'';position:absolute;left:0;top:12px;background:#555555;width:3px;height:3px;border-radius:50%} .IBRECOM .dot-list li .btn{margin-left:10px} .IBRECOM .dot-list li.top:before{top:18px} .IBDSCOM .dot-list li{position:relative;padding-left:13px;color:#555555;font-size:16px;margin-top:5px;font-weight:400} .IBDSCOM .dot-list li:before{content:'';position:absolute;left:0;top:12px;background:#555555;width:3px;height:3px;border-radius:50%} .IBDSCOM .dot-list li .btn{margin-left:10px} .IBDSCOM .dot-list li.top:before{top:18px} .IBCMCOM .dot-list li{position:relative;padding-left:13px;color:#555555;font-size:16px;font-weight:400} .IBCMCOM .dot-list li:before{content:'';position:absolute;left:0;top:12px;background:#555555;width:3px;height:3px;border-radius:50%} .IBCMCOM .dot-list li .btn{margin-left:10px} .IBCMCOM .dot-list li.top:before{top:18px} .IBLOCOM .dot-list li{position:relative;padding-left:13px;color:#555555;font-size:16px;margin-top:5px;font-weight:400} .IBLOCOM .dot-list li:before{content:'';position:absolute;left:0;top:12px;background:#555555;width:6px;height:6px;border-radius:10%} .IBLOCOM .dot-list li .btn{margin-left:10px} .IBLOCOM .dot-list li.top:before{top:18px} /* error form 요소 처리 */ input.error, .checkbox-container.error .checkmark:not(.flat), .radio-container.error .checkmark, .ui-select.error {border:1px solid #ff162a;} .checkbox-container.error .checkmark.flat:after {border:solid #ff162a;border-width: 0 2px 2px 0;} .label-state {text-align:center;font-size:16px;} .label-state i {display:inline-block;width:16px;height:16px;margin-right:6px;border-radius:50%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;vertical-align:middle} .label-state.blue {color:#0373e4;} .label-state.red {color:#d93745;} .label-state.blue .circle {border:3px solid #0373e4;} .label-state.red .circle {border:3px solid #d93745;} /* 동의화면 */ .agreement .agree-sub dl{margin-top:20px} .agree-all{height:50px;position:relative;border-bottom:1px solid #333333;z-index:5;padding:10px 0;} .agree-all .btn.small{position:absolute;right:0;top:10px;} .agree-all label{font-size:18px;color:#0373e4;font-weight:500} .agree-sub dl dt label{color:#0373e4;font-weight:500} .agree-sub dl dt .checkbox-container .checkmark{border:1px solid #949494;border-radius:5px;width:28px;height:28px;box-sizing:border-box} .agree-sub dl dt .checkbox-container input:checked ~ .checkmark{border:2px solid #0373e4;background:transparent} .agree-sub dl dt .checkbox-container input:checked ~ .checkmark:after{border-color:#0474e4} .agree-sub dl dd{margin-top:20px} .agree-sub dl dd .checkbox-container{padding-left:28px;} .IBCM00M004 .agree-sub dd ol{flex-wrap:wrap;align-items:stretch} .agree-sub dd ol > li{list-style-type: decimal;list-style-position: inside;color:#555555;font-size:0.83rem;margin-top:15px;padding-left:30px;min-width:50%;max-width:50%} .agree-sub dd ol > li > ul > li{list-style:none;padding-left:10px} .agree-sub dd ol > li > ul > li label{font-size:0.83rem;margin:10px 0 0 0} .IBCM00M004 .agree-sub dd ul{flex-wrap:wrap;align-items:stretch} .agree-sub dd ul > li{list-style-type: decimal;list-style-position: inside;color:#555555;margin-top:15px;padding-left:30px;min-width:50%;max-width:50%} .agree-sub dd ul > li > ul > li{list-style:none;padding-left:30px;margin-top:5px;max-width:100%;} .agree-sub dd ul > li > ul > li label{font-size:16px;} .IBCM00M004 .agree-sub dd > ul > li > ul{margin-top:15px;} /* 아래서 올라오는 셀렉트 박스 */ .pi-selectbox .btn-close {position:relative; border:1px solid transparent; overflow:hidden; color:transparent; font-size:xx-small; box-sizing:content-box;} .pi-selectbox{position:relative; vertical-align:middle; max-width:100%;line-height:1.45;} .pi-selectbox select{width:100%} .pi-selectbox select.off{position:absolute;width:1px;height:1px;z-index:-1;color:transparent;overflow:hidden;font-size:xx-small;line-height:0;border:0;background:none;} .pi-select-btn{display:inline-block; position:relative; vertical-align:middle; width:100%; height:40px; padding:0 40px 0 3px; text-align:left; background: #fff;border-bottom: 2px solid #0373e4;color:#0373e4; font-size:0.93rem;font-weight:500;cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: border-bottom .3s;} .pi-select-btn:focus{border-bottom: 2px solid #0373e4;color:#0373e4;} .pi-select-btn.disabled{opacity:.5} .pi-select-btn:after {transition:all .3s;content:'';position:absolute;top:13px;right:6px;border:solid #555555;border-width:0 2px 2px 0;width:9px;height:9px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .pi-select-btn:focus:after{border:solid #0373e4;border-width:0 2px 2px 0;} .pi-selectbox .dim{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; z-index:1500} .pi-select-wrap{display:none; position:fixed; z-index:1510; bottom:-80%; width:100%; min-height:40%; max-height:40%; left:0; border-radius:0;transition:all .5s;} .pi-select-opts{position:absolute; bottom:50px; left:0; width:100%; height:150px; overflow-y:scroll; padding: 0; z-index:2; background:#fff;} .pi-select-tit{position:relative; display:block; width:100%; text-align:left; min-height: 56px; line-height:55px; padding:0 18px; border-bottom:1px solid #d4d6d6; background:#ffffff; font-size:16px; box-sizing: border-box; color:#000; font-weight:500;border-top-left-radius: 15px;border-top-right-radius: 15px;} .pi-select-wrap .btn-close {width:54px; height:54px; position:absolute; top:0; right:0; z-index:1; background:transparent url(/resources/test/images/btn-select-close.png) no-repeat; background-size:100%; border:0; z-index:1;} .pi-select-opt {display:block;position:relative;top:0;left:0; width:100%; text-align:left; min-height:45px; margin: 0 !important; padding:13px 18px; font-size:14px; color:#555555; /*outline:none;*/} .pi-select-txt{word-break:break-all; display:block;} .pi-select-opt:after{display:none;} .pi-select-opt.selected {font-weight:500;color:#0373e4;padding-right:40px;} .pi-select-opt.selected:after {display:block;content:'';position:absolute;top:15px;right:20px;width:6px;height:11px;border:solid #0373e4;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .pi-select-opt.disabled{opacity:.5} .pi-selectbox .btn.fixedBottom {position:absolute;bottom:0;left:0;height:50px;z-index:1000;} /* 신청 페이징 */ .apply_paging {color:#fff;font-size:16px;font-weight:350; display:inline-block; background:#0373e4; border-radius:20px; padding:0 20px; line-height:40px;} .apply_paging em{color:#fff;font-weight:500; font-size:18px} .ui-calendar-week td {padding:0 !important;} .IBRE06M003 .dot > li.re01 {margin-bottom:15px;} h3.h3-ty01 {font-size:24px; color:#000; border-bottom:1px solid #333; padding-bottom:14px; margin:30px 0 20px;} /* 상단 페이징 */ .tonum_left {padding:10px 0 5px 0px; color:#333; font-size:18px; font-weight:500;} .tonum_left > span {color:#0373e4;} .IBHG01M008 .radio-container {display:inline-block; margin-left:40px;} .IBHG01M008 .radio-container:first-child {margin-left:0;} .IBHG01M008 .datepicker-wrap .datepicker .ui-datepicker__label {width:148px !important;background:#fff;} .IBHG01M008 .datepicker-wrap .datepicker.to .ui-datepicker__label {left:178px;} .IBHG01M008 .datepicker-wrap .datepicker.from:after {content:'-';position: absolute;top: 11px;left:160px;font-size: 20px;color:#555555;} .IBHG01M002 .selector .ui-select__content {width:165px !important;} /* 탭 */ .ui-tabs.is-raised{box-shadow:none;margin-bottom:0} .ui-tabs--background-color-default .ui-tabs__header{background:none} .ui-tabs__header-items{display:table;width:100%} .ui-tabs--text-color-black .ui-tab-header-item{display:table-cell;text-align:center;} .ui-tab-header-item__text{font-weight:400;color:#666;font-size:18px} .ui-tabs--text-color-active-primary .ui-tab-header-item.is-active{background:#fff;border:1px solid #333333;border-bottom:0} /* 파트 분할 */ .tabPart2 .ui-tab-header-item{width:50%;} .tabPart3 .ui-tab-header-item{width:33.3%;} .tabPart4 .ui-tab-header-item{width:25%;} .tabPart5 .ui-tab-header-item{width:20%;} .ui-tab-header-item{padding:0;height:56px;line-height:56px;background:#f7f7f7;border:1px solid #e0e0e0;border-bottom:1px solid #333333;border-left:0} .ui-tab-header-item:first-child{border-left:1px solid #e0e0e0} .ui-tabs--text-color-active-primary .ui-tab-header-item.is-active .ui-tab-header-item__text{color:#666666} .ui-tabs--indicator-color-primary .ui-tab-header-item:after{display:none} .ui-tabs--text-color-active-primary .ui-tab-header-item.is-active .ui-tab-header-item__text{color:#333} .ui-tabs.is-raised .ui-tabs__body{padding:60px 0} .no-result{margin:60px 0 60px;text-align:center;padding:50px 0;color:#333333;font-size:20px;} .no-result i{display:inline-block;width:80px;height:80px;background:url("/resources/images/common/icon_search_result_alert_circle_80.gif") no-repeat 0 0;vertical-align:middle;margin-right:20px} .no-result > div{line-height:80px} .no-result .title {margin-top:20px;font-size:24px;color:#333333;white-space:pre-line;} .no-result .text {margin-top:20px;font-size:16px;color:#555555;white-space:pre-line;} .len-chk {color:#555555;font-size:16px;margin-left:10px;} /* 파일첨부 공통 컴포넌트 */ .file-upload-container {padding:0 100px 100px;} .file-upload-container .file-header {display:flex;align-items:flex-end;margin-bottom:10px;} .file-upload-container .file-header .total {margin-left:auto;font-size:14px;color:#555555;} .file-upload-container .file-header .total strong {color:#333333;} .file-upload-container .file-content table {border-radius:5px;border:1px solid #e0e0e0;overflow:hidden;} .file-upload-container .file-content table thead tr th {border-bottom:1px solid #e0e0e0;background-color:#fafafa;} .file-upload-container .file-content table tr th {text-align:left;padding:10px 20px;font-size:14px;} .file-upload-container .file-content table tr td {text-align:left;padding:10px 20px;font-size:14px;} .file-upload-container .file-content table thead tr th:last-child {text-align:center;} .file-upload-container .file-content table tbody tr td:last-child {text-align:right;} .file-upload-container .file-content table tbody tr:first-child th, .file-upload-container .file-content table tbody tr:first-child td{padding-top:20px;} .file-upload-container .file-content table tbody tr:last-child th, .file-upload-container .file-content table tbody tr:last-child td{padding-bottom:20px;} .file-upload-container .file-content .checkbox-container {position:relative;top:0;left:0;font-size:14px;padding: 0 0 0 30px;} .file-upload-container .file-content .checkbox-container .file-name {position:relative;top:0;left:0;padding-left:25px;} .file-upload-container .file-content table thead th .checkbox-container {color:#333333;} .file-upload-container .file-content .file-name.doc:before {content:'';position:absolute;top:1px;left:0;width:20px;height:20px;background-image:url(../images/common/icon-fileupload-doc.gif);} .file-upload-container .file-content .file-name.img:before {content:'';position:absolute;top:1px;left:0;width:20px;height:20px;background-image:url(../images/common/icon-fileupload-img.gif);} .file-upload-container .file-content .btn.delete{position:relative;top:0;left:0;min-width:15px;height:15px;padding:0;margin-left:10px;} .file-upload-container .file-content .btn.delete:before {content:'';position:absolute;top:0;left:0;border:solid red;border-width:0 2px 2px 0;width:8px;height:8px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .file-upload-container .file-content .btn.delete:after {content:'';position:absolute;top:12px;left:0;border:solid red;border-width:0 2px 2px 0;width:8px;height:8px;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);} .file-upload-container .file-content .drag-files {text-align:center;padding:55px 0;} .file-upload-container .file-content .drag-files .drag-files-text {position:relative;top:0;left:0;font-size:15px;color:#737373;padding-left:25px;} .file-upload-container .file-content .drag-files .drag-files-text:before {content:'';position:absolute;top:0;left:0;width:20px;height:23px;background-image:url(../images/common/icon-fileupload-upload.gif);} .file-footer {margin-top:15px;} .file-footer ul li {color:#737373;font-size:14px;} .file-clip {position:relative;top:0;left:0;} .file-clip:before {content:'';position:absolute;top:-17px;left:0;width:17px;height:17px;background-image:url(../images/common/icon-file-board.png);} .file-type {position:relative;top:0;left:0;padding-left:25px;} .file-type.doc:before {content:'';position:absolute;top:1px;left:0;width:20px;height:20px;background-image:url(../images/common/icon-fileupload-doc.gif);} .file-type.img:before {content:'';position:absolute;top:1px;left:0;width:20px;height:20px;background-image:url(../images/common/icon-fileupload-img.gif);} .attach-file .file-clip{padding-right:25px;top:2px;font-size:0;} .new-icon {position:relative;top:0;left:0;padding-left:25px;} .new-icon:before {content:'';position:absolute;top:0;left:0;width:20px;height:20px;background-image:url(../images/common/icon-new-board.png);} .board_header {display:flex;align-items:flex-end;margin:30px 0 10px;} .board_header .row_count {width:200px;margin-left:auto;} .file-download {position:relative;top:0;left:0;padding-left:25px;} .file-download:before {content:'';position:absolute;top:0;left:0;width:20px;height:20px;background-image:url(../images/common/icon-file-download-board.png);} .board-detail {} .board-detail .board-header {padding:30px 20px;border-top:2px solid #333333;border-bottom:1px solid #e0e0e0;color:#555555;} .board-detail .board-header .title {font-size:26px;color:#000;margin-bottom:20px;} .board-detail .board-header .title .new-icon {top:8px;} .board-detail .board-header .divide {position:relative;top:0;left:0;padding:0 20px;} .board-detail .board-header .divide:before {content:'';position:absolute;top:3px;left:20px;width:1px;height:17px;background-color:#e0e0e0;} .board-detail .board-content {padding:40px;color:#555555;white-space:pre-line;} /* 공지사항 이미지 비율 처리 */ .board-detail .board-content img {max-width: 100%; height: auto !important;} .board-detail .board-footer {display:flex;align-items:center;color:#555555;padding:20px 0;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;} .board-detail .board-footer .title {display:flex;align-items:center;font-size:16px;padding:0 20px;} .board-detail .board-footer ul li {font-size:14px;margin-bottom:10px;cursor:pointer;} .board-detail .board-footer ul li:last-child {margin-bottom:0;} .board-detail .board-footer ul li:hover {color:#0373e4;text-decoration:underline;} .board-pagination {border-top:1px solid #333333;} .board-pagination li {font-size:16px;border-bottom:1px solid #e0e0e0;display:flex;padding:15px 0;} .board-pagination li i.arrow.prev {position:relative;top:10px;left:27px;width:9px;height:9px;border:solid #646464;border-width:0 2px 2px 0;-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);} .board-pagination li i.arrow.next {position:relative;top:3px;left:27px;width:9px;height:9px;border:solid #646464;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .board-pagination li strong {color:#000;margin-left:55px;margin-right:40px;} .board-pagination li .title {color:#555;text-overflow:ellipsis;width:690px;overflow:hidden;white-space:nowrap;} .board-pagination li .title:hover {color:#0373e4;text-decoration:underline;} .board-pagination li .date {color:#555;margin-left:auto;padding-right:20px;} .reddot-righttx {position:absolute; right:0; bottom:10px; font-size:15px; color:#555;} .reddot-righttx.reddot-top {top:10px;bottom:auto;margin-top:20px;} .reddot-righttx:before {content:'';position: absolute; width: 5px; height: 5px; background: #ff162a; border-radius: 50%; left:-15px; top: 8px;} .caution {color:#333333;font-size:20px;line-height:20px; padding:30px 0; text-align:center; background:#f7f7f7} .caution.bgNone {background:#fff} /* 사업자보증 심사시스템 개편 사업 추가 */ .caution.title {color:#333333;font-size:20px;} .caution.check{padding-left:0;text-align:center} .caution.center {font-size:16px;line-height:1.5;} .caution.center i {margin-bottom:20px;} .caution > span{display:inline-block;vertical-align:middle} .caution i{display:inline-block;width:40px;height:40px;background:url("/resources/images/RE/icon_cau.png") no-repeat 0 0;vertical-align:middle;margin-right:6px} .caution.check i{display:inline-block;width:40px;height:40px;background:url("/resources/images/RE/icon_able.png") no-repeat 0 0;vertical-align:middle;margin-right:6px} .caution.btnalignty01 {text-align:left !important; padding:28px 20px; color:#555; font-size:16px !important; line-height:40px;} .caution.btnalignty01 i {display:inline-block;width:22px !important;height:22px !important;background:url("/resources/images/RE/icon_caumini.png") no-repeat 0 0 !important;vertical-align:middle;margin-right:6px} .grnt_cnsl_box {border:1px solid #e0e0e0; border-radius:6px; background:url("/resources/images/HG/top_bg01.gif") no-repeat 59px 76px; padding:50px 72px 50px 220px;} .grnt_cnsl_box.ty01 {background:url("/resources/images/HG/top_bg01.gif") no-repeat 59px 30px; padding:50px 46px 50px 218px} .re-tit01 {color:#000; font-size:24px; margin-bottom:23px;} .grnt_cnsl_box > p {line-height:28px;} /* 정보제공동의화면 */ .IBCM00M004 .agree-sub dd ul > li, .IBCM00M007 .agree-sub dd ul > li, .IBCM00M007_DIDM .agree-sub dd ul > li, .IBRE00M007_DIDM .agree-sub dd ul > li, .IBCM00M007_DH_DIDM .agree-sub dd ul > li, .IBRE00M007_DH_DIDM .agree-sub dd ul > li {list-style-type: none !important;} .agree-sub dd ul > li {list-style-type: none !important;} /* 말풍선 */ .msg-ballon.nbr {display:flex;align-items:center;justify-content:center;border-radius: 9999px;} .msg-ballon {position: relative; background: #f5f6fa;border: 1px solid #e0e0e0;font-size:16px;text-align: center;padding: 15px 0;margin-bottom: 15px;position: relative;border-radius: 10px 10px 10px 0;} .ui-datepicker-calendar__header-day:after {content:'일';} /* disabled 된 캘린더 클릭 막기 */ /* .datepicker.is-disabled .ui-datepicker__content:after {content:'';position:absolute;top:0;left:0;width:100%;height:45px;background:rgba(0,0,0,0);} */ /* 정보제공동의 접기 기능 */ .collapsible-header {display:flex;position:relative;top:0;left:0;width:100%;} .collapsible-header .collapsible-btn {position:relative;top:0;left:0;padding:0 20px;margin-left:auto;background-color:#fff;} .collapsible-header .collapsible-btn i {position:absolute;top:0;right:0;width:25px;height:25px;} .collapsible-header .collapsible-btn i:after {transition:all .2s;} .collapsible-header .collapsible-btn.close i:after {content:'';position:absolute;top:2px;left:6px;width:8px;height:8px;border:solid #737373;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);} .collapsible-header .collapsible-btn.open i:after {content:'';position:absolute;top:8px;left:6px;width:8px;height:8px;border:solid #737373;border-width:0 2px 2px 0;-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg);} .collapsible-content {position:relative;top:0;left:0;} .collapsible-content.close {height:1px;overflow:hidden;} .collapsible-content.open {height:auto;overflow:initial;} /* list */ .subtotal{padding:30px;color:#333;font-size:18px;font-weight:500;} .subtotal span{display:inline-block;width:240px} .subtotal span i.require{top:-9px;} .subtotal strong{font-weight:700} .h-view{display:flex;justify-content:space-between;padding:0 30px} .h-view .line-title{background:#e7f2f9;color:#333333;font-size:16px;font-weight:500;padding:8px 20px} .h-view .half{width:48%} .h-view .half ul{padding-bottom:15px;border-bottom:1px solid #e0e0e0} .h-view .half ul li{margin-top:15px} .h-view .half ul li span{position:relative;display:inline-block;color:#555555;font-size:16px;width:210px;padding-left:30px} .h-view .half ul li strong{font-weight:500;color:#333;font-size:16px} .h-view .half ul li span:before{content:'';position:absolute;left:18px;width:3px;height:3px;border-radius:50%;background:#555;top:12px;} /* 부채내역 */ .righttoptxt {position:absolute; right:0; bottom:15px; font-size:16px; color:#555;} .debts-list{border-top:1px solid #333333;width:100%} .debts-list dt{position:relative;padding:18px 20px;border-bottom:1px solid #e0e0e0} .debts-list dl dt:first-child{border-top:0} .debts-list dl dt:last-child{border-bottom:1px solid #e0e0e0} .debts-list dt strong{font-weight:500;color:#000;font-size:20px;width:150px;display:inline-block} .debts-list dt .link-btn{color:#0373e4;font-size:16px} .debts-list dd{display:none} .debts-list dt .date{display:none;position:absolute;right:20px;color:#737373;font-size:16px;top:50%;transform:translateY(-50%);} .debts-list dt.active + dd{display:block;border-bottom:1px solid #e0e0e0} .debts-list dt.active .date{display:inline-block} .debts-list dt.active{background:#0474e4;color:#fff} .debts-list dt.active strong, .debts-list dt.active .link-btn, .debts-list dt.active .date{color:#fff} .debts-list dd.no-result{background:#f7f7f7;text-align:center;padding:50px 0;color:#333333;font-size:20px;border-bottom:1px solid #e0e0e0} .debts-list dd.no-result i{display:inline-block;width:40px;height:40px;background:url("/resources/images/common/icon_no_result.png") no-repeat 0 0;vertical-align:middle;margin-right:20px} .debts-list dd.no-result > div{line-height:40px} .debts-list dd .debt{padding:40px 40px 20px} .debts-list dd .debt .ul-list ul li{padding:20px 30px 20px 40px;display: flex;justify-content: space-between;align-items:center} .debts-list dd .debt .ul-list ul li .flag{width:70px} .debts-list dd .debt .ul-list ul li .account{color:#333333;font-size:16px;width:610px} .debts-list dd .debt .ul-list ul li .account .name{display:inline-block;width:70px} .debts-list dd .debt .ul-list ul li .total{margin-left:auto} .debts-list dd .debt .ul-list ul li .total span{color:#737373;font-size:14px} .debts-list dd .debt .ul-list ul li .checkbox-container{margin-left:45px} .debts-list dd .debt .ul-list ul li .checkbox-container .checkmark{/* margin-top:-12.5px */} .debts-list dd .debt > .form-item{padding:40px;position:relative;border-bottom:1px solid #e0e0e0} .debts-list dd .debt > .form-item a{position:absolute;left:50%;bottom:-30px;background:#fff;width:160px;height:30px;line-height:30px;border:1px solid #e0e0e0;border-top:0;z-index:10;transform:translateX(-50%);text-align:center;color:#555555;font-size:14px} .debts-list dd .debt > .form-item a:after{content:'';display:inline-block;width:14px;height:8px;margin-left:10px;background:url("/resources/images/RE/icon_arrow.png") no-repeat 0 0;} .debts-list dd .debt > .form-item a.on:after{transform:rotate(-180deg)} .debts-list dd .debt .form-item > div{width:600px} .debts-list dd .debt .form-item > p{display:flex;align-items:center} .debts-list dd .debt .form-item.single{padding:20px 0 0;border-bottom:0;margin-top:40px;margin-bottom:0} .debts-list dd .debt .form-item p label{font-weight:400;color:#333;font-size:16px} .debts-list dd .debt .detail{position:relative;background:#fafafa;padding:50px 40px 30px;transition:all 0.3s} .debts-list dd .debt .detail-wrap{display:none;width:100%;padding:0} .debts-list dd .debt .detail-wrap.active{display:block;transition:all 0.3s} .debts-list dd .debt .detail-wrap.active + .single{margin-top:0px} .debts-list dd .debt .detail .form-item:last-child{margin-bottom:0} /* 2021-04-21 박스 하단여백공간정리 */ .contents-wrap > .list-box:first-child li{color:#555;font-size:16px} .contents-wrap > .list-box:first-child li:before{top:12px} .contents-wrap .new .ui-collapsible__header{background:#fff;color:#000000;font-size:20px;font-weight:500;padding:15px 20px;border-bottom:1px solid #e0e0e0} .contents-wrap .new .ui-collapsible:not(.is-disabled) .ui-collapsible__header:hover{background:#fff;} .contents-wrap .new .ui-collapsible .ui-collapsible__header:hover{background:#fff} .contents-wrap .new .ui-collapsible.is-open .ui-collapsible__header, .contents-wrap .new .ui-collapsible.is-open .ui-collapsible__header:hover{background:#f7f7f7;} .contents-wrap .new .ui-collapsible.first{border-top:1px solid #333} .contents-wrap .new .ui-collapsible{margin-bottom:0} .contents-wrap .new .ui-collapsible .box{padding:0;margin:0;overflow:hidden} .contents-wrap .new .ui-collapsible .white.box:last-child{margin-bottom:0 !important;} .contents-wrap .new .ui-collapsible .ui-collapsible__body{background:#f7f7f7;padding:40px} .contents-wrap .new .info-list01 dt{border-top:0;font-size:18px;padding:15px 25px} .contents-wrap .new .ui-collapsible:first-child{border-top:1px solid #333} .contents-wrap .new .ui-collapsible .box.editable{border-color:#0373e4} .contents-wrap .new .ui-collapsible .box.editable .info-list01 dt span{color:#0373e4} .contents-wrap .new .ui-collapsible .box.editable .info-list01 dt a{text-indent:-9999px;background: url(/resources/images/common/bg_arrow_right3.png) no-repeat center center;} .contents-wrap .new .ui-collapsible .info-list01 dd:after{content:'';display:block;clear:both} .contents-wrap .new .ui-collapsible .info-list01 dd > ul{padding-top:25px} .contents-wrap .new .ui-collapsible .info-list01 dd:before{display:none} .contents-wrap .new .ui-collapsible .info-list01 dd > ul > li > span{max-width:200px;padding-right:0;letter-spacing:-0.8px} .contents-wrap .new .ui-collapsible .info-list01 dd > ul > li > span.require:after{position:static;display:inline-block;vertical-align: top;margin-top: 5px;margin-left: 10px;} .contents-wrap .new .ui-collapsible .info-list01 dd > ul.type2 li{float:left;width:50%} .contents-wrap .new .ui-collapsible .info-list01 dd > ul.type2 li:not(:first-child){margin-top:12px} .contents-wrap .new .ui-collapsible .info-list01 dd > ul.type2 li:nth-child(2){margin-top:0} .contents-wrap .new .ui-collapsible .info-list01 dd > ul.type2 li:after{content:'';display:block;clear:both} .result-wrap{padding:0 30px} .prime{margin-bottom:60px} .prime .rate{display:flex;text-align:right;height:112px;align-items:stretch;line-height:100%;border-radius:3px;overflow:hidden} .prime .standard{flex:1 0 280px;padding:60px 30px 15px;color:#333;font-size:16px;background:#f5f6fa url("/resources/images/RE/bg_rate.png") no-repeat 0 0} .prime .standard strong{font-size:40px;display:inline-block;margin-left:15px} .prime .rate .expect{display:flex;width:100%;background:#0373e4;color:#fff;font-size:16px;padding:60px 30px 15px;} .prime .rate .expect span{margin-top:10px;} .prime .rate .expect strong{display:inline-block;font-size:40px;font-weight:700;min-width:93px;margin-left:10px} .color-box-typ01 {border-top:6px; border:1px solid #e0e0e0; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15); border-radius:7px; border-top:6px solid #38d1c0; padding:30px 28px 0;} .grayshadowbox {background:#f5f6fa; border:1px solid #e0e0e0; border-radius:8px; padding:30px; position:relative; color:#333; font-size:16px;} .shadowinner {background:#fff; border-radius:8px; text-align:center; color:#333; font-size:16px; width:100%; padding:30px 0;} .pyCard {width:770px;} .pyCard .py_header {display:flex;align-items:center;padding-bottom:10px;border-bottom:1px solid #000;margin-bottom:20px;} .pyCard .py_header .btn {margin-left:auto;} .pyCard .py_header .py_title {font-size:18px;color:#000;font-weight:500;} .pyCard .py_content .d-flex {flex-wrap:initial !important;} .pyCard .py_content label {flex: 0 0 110px;text-align:right;padding-right:10px;} .pyCard .py_content .monthly_data label:first-child {flex: 0 0 90px;text-align:left;} .pyCard .py_content .monthly_data {display:flex;align-items:center;margin-bottom:20px;} .pyCard .py_content .income_data {display:flex;align-items:center;} .pyCard .py_content .income_data label:first-child {flex: 0 0 65px;text-align:left;} /* 우대금리 */ .prme_rat .list-box > ul > li strong{font-weight:500} .prme_rat .form{border-bottom:1px solid #c0c0c0;padding-bottom:20px} .prme_rat .btn.mid{padding:0;height:auto;min-width:0;margin-left:20px} .prme_rat .setting-wrap{width:100%;margin-top:20px} .prme_rat .setting-wrap + .list-box{padding-left:40px} .prme_rat .btn.mid .setting{width:15px;height:16px;background:url("/resources/images/RE/icon_setting.png") no-repeat 0 0;vertical-align:top;top:0} .prme_rat .btn.mid.coupon{padding:0 18px;height:40px;line-height:40px;border:1px solid #e0e0e0} .prme_rat .btn.mid.coupon i{width:28px;height:20px;background:url("/resources/images/RE/icon_coupon.png") no-repeat 0 0;top:3px} /* 파일첨부 */ .file-drag-zone {height:120px;} .file-drag-zone .drag-info {font-size:14px;color:#737373;padding-left:30px;} .ic-cert-prg01{display:inline-block;width:40px;height:40px;background:url("/resources/images/common/icon_set_program.png") no-repeat -5px -3px} .ic-cert-prg02{display:inline-block;width:40px;height:40px;background:url("/resources/images/common/icon_set_program.png") no-repeat -5px -84px} .ic-cert-prg03{display:inline-block;width:40px;height:40px;background:url("/resources/images/common/icon_set_program.png") no-repeat -5px -165px} /* 파일첨부 */ .file-control {display:flex;align-items:flex-end;margin-bottom:10px;} .file-control .filesize {font-size:14px;color:#555555;} .file-drag-zone {height:120px;} .file-drag-zone .drag-info {font-size:14px;color:#737373;padding-left:30px;} .file-uploader {font-size: 14px;border:1px solid #e0e0e0;border-radius:5px;overflow:hidden;} .file-uploader .file-uploader-header {display:flex;align-items:center;width:100%;height: 50px;color:#333333;border-bottom: 1px solid #e0e0e0;font-weight: 500;background-color: #fafafa;} .file-uploader .file-uploader-header > div {display: flex;align-items: center;justify-content: center;text-align:center;height: 50px;} .file-uploader .file-uploader-body {} .file-uploader .file-uploader-body .no-files {display:flex;align-items:center;justify-content:center;height:120px;} .file-uploader .file-uploader-body .icon-drag-file {top: -13px;} .file-uploader .file-uploader-body .drag-info {font-size:14px;color:#737373;padding-left:30px;} .file-uploader .file-uploader-body .files {position:relative;top:0;left:0;width:100%;padding:19px 0;} .file-uploader .file-uploader-body .files .file-item {display:flex;align-items:center;font-size:14px;color:#555555;margin-bottom:10px;} .file-uploader .file-uploader-body .files .file-item:last-child {margin-bottom:0;} .file-uploader .file-uploader-header .checkbox-container {top:-9px;padding: 0 0 5px 28px;} .file-uploader .file-uploader-body .checkbox-container {top:-9px;padding: 0 0 5px 28px;} .file-uploader .fchk {display:flex;justify-content:center;width:60px;padding:0 20px;} .file-uploader .fname {width:960px;text-align:left;padding:0 20px;} .file-uploader .fname .file-type {top:-2px;margin-right:5px;} .file-uploader .fsize {width:150px;padding:0 20px;text-align:center;} .jno_afternum input {background:#fff url("/resources/images/common/pw_bg01.png") no-repeat 30px 21px; background-size:104px 9px;font-size:11px} .jumin-after input{background:#a9d0f5;font-size:8px} .jno_afternum input.logother {background:#fff url("/resources/images/common/pw_bg01.png") no-repeat 30px 21px; background-size:104px 9px;font-size:11px} .jumin-after input.logother{background:#a9d0f5;font-size:8px} span.join_afterico {background:#a9d0f5 url("/resources/images/LO/bg_mouse.png") no-repeat left center !important; width:32px; height:48px; position:absolute; right:1px; top:1px;text-indent:-9999px; font-size:0px; content:''; display:inline-block;} span.join_afterico:hover {opacity:1;} .w276px {width:276px !important} .IBCMCOM span.join_afterico {right: 0;} .btn.hover:hover {color:#fff !important} .dash_c {width:50px;text-align:center;line-height:50px;} /* graybox type */ .graybox_type01 {background:#f5f8fc; padding:30px; border-radius:5px;} .graybox_type02 {background:#f5f6fa; padding:20px; border-radius:5px; border:1px solid #e0e0e0;box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15)} /* 캘린더 */ .ui-datepicker-calendar__header-year {background:url("/resources/images/common/ico_calarrow01.png") no-repeat right center; display:inline-block; padding-right:15px;} /* step icon */ .ico_step {display:inline-block; padding:5px 10px; border-radius:14px; background:#0373e4; color:#fff; font-size:12px; vertical-align:middle; margin-right:10px;} .env_info_box { padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; margin-right:10px; cursor: default; border-radius: 4px; background-color: #4478c1; color: white; text-align: center; font-size: 16px; font-weight: bold; } /* 공지사항 팝업 */ .npop_header {z-index:2000;position:fixed;top:0; padding:2px 0; text-align:center; background:#4279cc; width:100%;height:70px;line-height:70px; color:#fff; font-size:26px; font-weight:400; margin-top:0px;} .windowcl {position:absolute; right:0; top:0; display:inline-block; width:81px; height:71px; background:url('/resources/images/common/ico_closepop01.png') no-repeat 50% 50%;content:''; font-size:0; z-index:2} .noti_cont {position:relative; width:100%; padding:14px 40px 40px;} .noti_cont ul {width:100%; overflow:hidden;} .noti_cont li {padding:16px 7px 0 17px; color:#555; font-size:16px; position:relative;} .noti_cont li:before {content:''; font-size:0; position:absolute; left:0; top:0; width:3px; height:3px; background:#555; margin-top:28px;} .npop_btnarea {position:fixed; bottom:0; width:100%; display:flex; width:100%} .npop_btnarea button {position:relative;flex:0 1 50%; border-left:1px solid #d3d3d3; background:#e2e2e2; text-align:center; color:#333; font-size:15px; padding:15px 0 14px;} .npop_btnarea button:first-child {border-left:0;} .npop_btnarea button:before {position:absolute; left:1px; top:0; width:1px; height:51px; content:''; font-size:0; background:#fff;} .npop_btnarea button:first-child:before {display:none;} .npop_btnarea button:hover {background:#e2e2e2; opacity:1;} /* 사업자보증 심사시스템 개편 사업 추가 start */ .info-box02 {padding-left:8px;} .info-box02.last {border-bottom: 1px solid #e0e0e0;} .info-list {margin:16px 0 27px 20px;} .info-list li {padding:10px 0 0px 17px; text-indent:-17px} .info-oList {margin:16px 0 27px 20px;} .info-oList li {padding:10px 0 0px 0px;} .subForm-list li {padding:10px 0 0px 0;} .subInfo-list li {padding:10px 0 0px 14px; text-indent:-14px} .subInfo-list.only {margin-left:-17px; margin-top:-10px;} .subInfo-list02 li {padding:10px 0 0px 14px; text-indent:-14px} .subInfo-oList li {padding:10px 0 0px 24px !important; text-indent:-24px} .subInfo-oList02 li {padding:10px 0 0px 17px !important; text-indent:-17px} .subInfo-oList .subInfo-list02 li {padding:10px 0 0px 14px !important; text-indent:-14px} .subInfo-oList .subInfo-list li {padding:10px 0 0px 14px; text-indent:-14px} .subInfo-oList .dot > li {padding-left:35px !important;} .subInfo-oList .dot > li:before {top:20px;} .inner-box .dot:first-child > li {padding-top:0px !important;} .inner-box .dot:first-child > li:before {top:10px !important;} .basic-list strong.question.num {text-indent:-45px; padding-left:25px;} .basic-list strong.question .num_sp00 {display:inline-block; width:0px;} .basic-list strong.question .num_sp01 {display:inline-block; width:10px;} .basic-list strong.question .num_sp02 {display:inline-block; width:15px;} .basic-list strong.question .num_sp03 {display:inline-block; width:24px;} .basic-list strong.question .lnk {margin-left:43px;} .progress-container {position: relative;top: 0px;right:-440px; text-align: center;} .progress-ring {transform: rotate(-90deg);} .progress-ring__circle {transition: stroke 0.3s;} .progress-ring__circle-progress {transition: stroke-dashoffset 0.3s;} .progress-text {font-size: 24px;font-weight: bold;position: absolute;top: 47%;left: 50%;transform: translate(-50%, -50%);} /* 사업자보증 심사시스템 개편 사업 추가 end */ /* 사업자보증 심사시스템 개편 사업 추가 start */ a.tit.custA {background-size: cover;display: inline;width: 22px;height: 22px;padding-right: 22px;} .hgt-btnarea {position:absolute; right:0; bottom:10px; font-size:15px; color:#555;} /* IBHG06M004 start */ .doc-title .tit {max-width: 350px;display: inline-block;line-height: 20px;color: #333333;font-size: 16px;line-height: 25px;margin-top: 10px} .doc-title a.tit {margin-right: 10px;padding-right: 30px;background: url("/resources/images/common/bg_doc_attatch.png") no-repeat right center;} /* IBHG06M004 end */ /* IBHG06M005 start */ .default-graybox {margin:10px 0 20px;padding:30px;background:#fafafa;border:1px solid #e0e0e0;border-radius:5px;font-size:16px;color:#555555; line-height:22px;} /* IBHG06M005 end */ .ellipsis {text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block} /* 사업자보증 심사시스템 개편 사업 추가 end */