@charset "utf-8"; /* Root : ITBYY_COM_PT_STATIC_ITB_WBZ Comment : 접근성 수정 Date : 2025.04.01 작성자 : 김효정 */ /*=========================================== 메인통합 레이아웃 ==============================================*/ body.hScroll.fit {width: 100%} body.hScroll.fit .header.sticky .gnbArea {min-width:1132px;} #content.main section {width: 100%; max-width: none; margin:0;} #content.main section#section2{z-index: 3} #content.main {padding-bottom: 0} /* mainHScroll */ body.mainHScroll .secContain, body.mainHScroll .fixedContain, body.mainHScroll .bgContain {width:1132px;} /* Drag Scroll */ .main .cardList {white-space: nowrap;} .main .cardList > li {display: inline-block; margin-left: 20px; white-space: normal;} .main .cardList > li:first-child {margin-left: 0px;} .dragScroll {position:relative; } .dragScroll.uiAct {width: 200%;} .dragScroll.uiAct:hover {cursor:e-resize; cursor: -webkit-grab;} .dragScroll .scrollItem {position: relative; z-index: 10} .dragScroll .scrollGuideBar {position:absolute; bottom:-30px; background: #c7ccd6; height: 1px; width: 1132px; overflow: hidden; z-index: 1} .dragScroll .scrollBtn {position:absolute; top:0; bottom: 0px; background: #4b4e68; } .dragScroll .scrollItem.forceMove {transition: transform 0.2s ease-in-out} /*=========================================== Header Top Notice ==============================================*/ body.ready .topNotice ~ .header {position: relative !important;} body.ready .topNotice {visibility: visible;} .topNotice {position: relative; background-color:#4b4e68; z-index: 50; width: 100%;} #content .topNotice {display: none;} .topNotice .topNotiWrap {position:relative; width: 1132px; margin:0 auto;} .topNotice .fullBanner {display: block;} .topNotice .closeBtn {position: absolute; width:30px; height:30px; right: 0; top: 20px;} .topNotice .closeBtn:after {content: ''; display:block; width:20px; height:20px; margin:5px; background: url(/img/common/img_common.png) no-repeat -445px 0; transition: transform 0.3s} .topNotice .closeBtn:hover:after, .topNotice .closeBtn:focus:after {transform:rotate(90deg)} .topNotice .remindOff {position: absolute; bottom: 10px; right: 0;} .topNotice input[type="checkbox"]:not(.def)+label {padding-right:30px; color:#fff; line-height: 1.5} .topNotice input[type="checkbox"]:not(.def)+label:before {position:absolute; right:0; margin:0; border-color: #fff; background: #fff;} .topNotice input[type="checkbox"]:not(.def)+label:after {right: 0; left: auto;} .topNotice input[type="checkbox"]:not(.def)+label:hover, .topNotice input[type="checkbox"]:not(.def):focus+label {color:#fff} .topNotice input[type="checkbox"]:not(.def)+label:hover:before, .topNotice input[type="checkbox"]:not(.def):focus+label:before {border:none;} .topNotice input[type="checkbox"]:not(.def):checked+label:before {border: none; background: #fff url('../img/common/ico_top_noti_check.png') no-repeat -1px;} .topNotice input[type="checkbox"]:not(.def):checked+label:after {right: 0; left: auto; background: #fff; -webkit-animation: chkmotionRight 0.25s 1 linear forwards; -moz-animation: chkmotionRight 0.25s 1 linear forwards; -ms-animation: chkmotionRight 0.25s 1 linear forwards; animation: chkmotionRight 0.25s 1 linear forwards; } .topNotice input[type="checkbox"]:not(.def):checked+label:hover:before, .topNotice input[type="checkbox"]:not(.def):checked:focus+label:before {border:none;} @-webkit-keyframes chkmotionRight {0%{width: 20px; right:0px}45%{width: 12px; right:0}75%{width:12px; right:0}100%{width: 0; right:0px;}} @-moz-keyframes chkmotionRight {0%{width: 20px; right:0px}45%{width: 12px; right:0}75%{width:12px; right:0}100%{width: 0; right:0px;}} @-ms-keyframes chkmotionRight {0%{width: 20px; right:0px}45%{width: 12px; right:0}75%{width:12px; right:0}100%{width: 0; right:0px;}} @keyframes chkmotionRight {0%{width: 20px; right:0px}45%{width: 12px; right:0}75%{width:12px; right:0}100%{width: 0; right:0px;}} /*=========================================== Parallax 기본설정 ==============================================*/ body.parallax {overflow-y: hidden; background: #fff; color:#333} body.parallax .header {position: fixed !important; top:0; left:0; right:0; transition: top 0.25s ease-in-out} body.parallax .header .topArea {height: 36px;} body.parallax .header.sticky {position: fixed; top:-34px} body.parallax .footer {position: fixed !important; top: auto; left:0; right:0; bottom:0; z-index: 20; transform:translate(0,100%); transition-property: transform; transition-timing-function: ease-in-out;} body.parallax .bgContain, .parallax .fixedContain, .parallax .secContain {position: fixed !important;} body.parallax.footerMode .footer {transform: translate(0,0);} .parallax .secBottom {position: absolute; bottom: 0px; left: 0; right: 0; background-color: rgba(0,0,0,0.55); z-index: 9; text-align: center; } .parallax .scrollGuide {position:absolute; top:-50px; display:inline-block; left:0; right:0; margin:0 auto; color:#333; font-size: 11px; letter-spacing: 0.05em; transition: color 0.3s linear} .parallax .scrollGuide:after {content: ''; position: absolute; top: 22px; left:0; right:0; display: block; width: 10px; height: 14px; margin:0 auto; background: url(/img/common/img_common.png) no-repeat -926px -344px; transition: top 0.1s ease-in-out; transition: background-position 0.3s ease-in-out; } .scrollGuide:after { -webkit-animation: scGuideAni 0.78s ease-in-out infinite; animation: scGuideAni 0.78s ease-in-out infinite; } @-webkit-keyframes scGuideAni {0%{top: 22px;}50%{top:17px;}100%{top: 22px;}} @keyframes scGuideAni {0%{top: 22px;}50%{top:17px;}100%{top: 22px;}} /* section */ .parallax .section .bg {height: 100%; width: auto; visibility: hidden;} .parallax .section {position: relative; z-index: 2; padding-bottom: 0px;}/*섹션별 간격조절*/ .parallax .bgContain {position: absolute; top:0; left:0; right:0; bottom:0; min-width:1132px; z-index: 2; transition-property: transform,top; transition-timing-function: ease-in-out;} .parallax .fixedContain {position: fixed; top:0; left:0; right:0; bottom:0; min-width:1132px; z-index: 1;} .parallax .fixedContain > div {position: absolute; top:0; left:0; right:0; bottom:0; } .parallax .secContain {position: absolute; top:0; left:0; right:0; min-width:1132px; z-index:4; transition-property: transform, top; transition-timing-function: ease-in-out;} .parallax .secContain > .section {padding-bottom:0px; box-sizing: border-box;} .parallax .secContain > .section:last-child {padding-bottom: 0} .parallax .sectionWrap.middle {display:table; width:1132px; box-sizing: border-box; z-index: 2; overflow: visible } .parallax .sectionWrap.middle .content {display:table-cell; vertical-align: middle;} .parallax .visualSlide {position: absolute; top: 0px; left: 50%; bottom: 600px; z-index: 1; margin-left: -960px;} .parallax .visualSlide img {position: absolute;} .parallax .bgContain.fixed { transition-property: background-color; transition-timing-function: ease-in-out; } .parallax .bgContain.fixed > div {position: absolute; top:0; right:0; left:0; bottom:0; visibility: hidden;} .sectionWrap {position:relative; width:1132px; margin: 0 auto; padding-top: 62px; height:inherit;} section:not(.section) .sectionWrap {padding-top: 0} .secContain .section:first-child .sectionWrap {padding-top: 96px; transition:padding 0.3s ease-in-out} .section.hasSecBottom .sectionWrap {padding-bottom: 90px}/* section bottom 높이값 90 */ body.notice .secContain .section:first-child .sectionWrap {padding-top: 196px;} body.notice .pxNavi {top: 140px;} body.noticeMotion .pxNavi {top: 140px;} /* section Navigation */ .pxNavi {position: absolute; top:240px; /*left:50%; margin-left:-810px;*/ left:30px; z-index: 10;} .pxNavi:before {content: ''; position: absolute; left: -11px; bottom: -99px; width:31px; height: 61px; background: url(/img/common/img_common.png) no-repeat -990px -300px; } .pxNavi li {position:relative; margin:0; padding:12px 0 0 0} .pxNavi li:before {content:""; display:block; position:absolute; top:-2px; left:3px; width:2px; height:16px; background:url(/img/common/img_common.png) no-repeat -1025px -300px} .pxNavi li:first-child {padding-top:0} .pxNavi li:first-child:before {content: none} .pxNavi li a {position:relative; padding-left:20px; font-size:14px; color:rgba(51,51,51,0.4); transition: all 0.2s ease-in-out} .pxNavi li a:before {content: ''; position: absolute; top:4px; left:0; width:8px; height:9px; background:url(/img/common/img_common.png) no-repeat -410px -40px;} .pxNavi li a:after {content: ''; position: absolute; left:15px; right:100%; bottom:-2px; display: inline-block; border-bottom: 1px solid #33333340; transition: all 0.19s ease-out} .pxNavi li a:hover:after, .pxNavi li a:focus:after {left:20px; right:0;} .pxNavi li a span.num{display:none} .pxNavi li.on a {color:#333;} .pxNavi li.on a:before {background-position: -410px -49px;} .pxNavi li.on a:after {border-color: #333} /* white version */ .pxNavi.invert:before {background-position: -990px -361px;} .pxNavi.invert li:before {background-position: -1026px -300px;} .pxNavi.invert li a {color:rgba(255,255,255,0.4);} .pxNavi.invert li a:before {background-position: -418px -40px;} .pxNavi.invert li a:after {border-color: rgba(255,255,255,0.4);} .pxNavi.invert li.on a {color:#fff;} .pxNavi.invert li.on a:before {background-position: -418px -49px; } .pxNavi.invert li.on a:after {border-color: rgba(255,255,255,1);} /*=========================================== Home (전체메인) - With KDB ==============================================*/ /* BG Slide */ .mainBGSlide {position: absolute; top:0px; bottom: 0; left:0; right: 0; z-index: 1; overflow: hidden; background-color: #fff} .mainBGSlide > li {position:absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity 0.45s linear; background:center center / cover no-repeat;} .mainBGSlide > li.on {opacity: 1; z-index: 2} /* pagination */ .chhm .mainTxtSlide .pagination * {vertical-align: middle;} .chhm .mainTxtSlide {float: left; position:relative; width:820px; z-index: 2} .chhm .mainTxtSlide .slideList > li {position: absolute; width:100%; height:100%; opacity:0; z-index: 1; transition: opacity 0.45s linear;} .chhm .mainTxtSlide .slideList > li.on {opacity:1; z-index: 2} .chhm .mainTxtSlide .slideBtn {display: inline-block; margin-right: -10px;} .chhm .mainTxtSlide .slideBtn li {position:relative; display: inline-block; padding: 0 13px; font-size: 16px;} .chhm .mainTxtSlide .slideBtn li button {opacity:0.5; padding:5px 7px; transition: opacity 0.1s ease-out} .chhm .mainTxtSlide .slideBtn li:before {content: '/'; position: absolute; top:3px; left: -3px; color:#333; opacity: 0.2;} .chhm .mainTxtSlide .slideBtn li:first-child, .chhm .mainTxtSlide .slideBtn li:first-child button {padding-left:0;} .chhm .mainTxtSlide .slideBtn li:first-child:before {content: none;} .chhm .mainTxtSlide .slideBtn li.on button {opacity: 1} .chhm .mainTxtSlide .slideBtn li button:hover,.chhm .mainTxtSlide .slideBtn li button:focus {text-decoration: underline;} .chhm .mainTxtSlide .bigTit {display:block; margin: 18px auto auto -3px; letter-spacing: -0.06em; font-size: 58px; line-height: 1.3em;} .chhm .mainTxtSlide .bigTit img {margin-top:10px; margin-bottom: 12px;} .chhm .mainTxtSlide .comment {margin-top: 14px} .chhm .mainTxtSlide [class*=link] {position:relative; display: inline-block; height:35px; margin-top:35px; margin-right:20px; padding-left: 42px; } .chhm .mainTxtSlide [class*=link]:before {content: ''; position: absolute; top:11px; left:0; width:32px; height: 13px; background:url(/img/main/chhm/ico_movie_play_.png) no-repeat center bottom; overflow: hidden; z-index: 2} .chhm .mainTxtSlide [class*=link]:after{content: ''; position: absolute; top:0px; left:0px; width:33px; height: 35px; background:url(/img/common/img_common.png) no-repeat -1048px -335px ; } .chhm .mainTxtSlide .invert [class*=link]:after{background-position: -1048px -300px} .chhm .mainTxtSlide .link:before {background: url(/img/main/chhm/ico_link_.png) no-repeat center bottom;} .chhm .mainTxtSlide .link:hover:before,.chhm .mainTxtSlide .link:focus:before { top:10px; height:15px; animation: mainTxtSlideBtn 0.5s ease-out infinite; -webkit-animation: mainTxtSlideBtn 0.5s ease-out infinite; } @-webkit-keyframes mainTxtSlideBtn {0%{background-position: 52% center;}50%{background-position: 37% center;}100%{background-position: 52% center;}} @keyframes mainTxtSlideBtn {0%{background-position: 52% center;}50%{background-position: 37% center;}100%{background-position: 52% center;}} .chhm .mainTxtSlide .linkMovie:hover:before,.chhm .mainTxtSlide .linkMovie:focus:before { top:10px; height:15px; animation: mainTxtSlideBtnMovie 0.5s ease-out infinite; -webkit-animation: mainTxtSlideBtnMovie 0.5s ease-out infinite; } @-webkit-keyframes mainTxtSlideBtnMovie {0%{background-position: 53% center;}50%{background-position: 41% center;}100%{background-position: 53% center;}} @keyframes mainTxtSlideBtnMovie {0%{background-position: 53% center;}50%{background-position: 41% center;}100%{background-position: 53% center;}} .chhm .mainTxtSlide [class*=link] span {position:relative; line-height: 35px;} .chhm .mainTxtSlide [class*=link] span:after {content: ''; position: absolute; width:auto; height:1px; bottom:-2px; left:50%; right:50%; border-bottom: 1px solid #333; transition: all 0.15s ease-in-out; } .chhm .mainTxtSlide [class*=link]:hover span:after, .chhm .mainTxtSlide [class*=link]:focus span:after {width:auto; left:0; right: 0;} /* .chhm button.swiper-button-stop:before, .chhm button.swiper-button-stop:after {background-color: #333} .chhm button.swiper-button-play:after {border-left-color: #333} .chhm button[class^=swiper-button-] {position:relative; transition:background-color 0.15s ease-out} .chhm button[class^=swiper-button-]:hover, .chhm button[class^=swiper-button-]:focus {background-color: rgba(0,0,0,0.2)} */ /* Direct Menu */ .chhm .directMenu {float:right; margin-right:-35px; color:#fff; position: relative;} .chhm .directMenu .topBtn {width: 317px;height: 99px;padding: 16px 35px 0 19px;margin-left: 1px;background: url(/img/common/img_common.png) no-repeat -625px -805px;box-sizing: border-box;} .chhm .directMenu .topBtn li {float:left; width: 50%; margin-top:30px; text-align: center;} .chhm .directMenu .topBtn li a {display: inline-block;} .chhm .directMenu .topBtn li a[class*=log] {padding-left: 33px; position: relative;} .chhm .directMenu .topBtn li a[class*=log]:before{content:''; display: block; position: absolute; left:0; top:0; width:22px; height:24px; background: url(/img/common/img_common.png) no-repeat -580px -300px;} .chhm .directMenu .topBtn li a.logout {padding-left: 30px; } .chhm .directMenu .topBtn li a.logout:before{top:1px; width:21px; height:20px; background-position: -603px -300px;} .chhm .directMenu .topBtn li a > span {position: relative; display: inline-block;} .chhm .directMenu a > span:after {content: ''; position: absolute; width:0%; height:1px; bottom:-2px; left:50%; right:50%; border-bottom: 1px solid #fff; transition: all 0.18s; transition-timing-function:inherit} .chhm .directMenu .topBtn a > span:after {transition: all 0.13s ease-out} .chhm .directMenu a:hover > span:after, .chhm .directMenu a:focus > span:after {left:0; right: 0; width:100%;} .chhm .directMenu .bottomBtn {width: 317px;height: 393px; background: url(/img/common/img_common.png) no-repeat -955px -805px; position: relative;} .chhm .directMenu .bottomBtn > ul {padding: 0 48px 50px 24px} .chhm .directMenu .bottomBtn li {float:left; width: 50%; margin-top:11px; text-align: center;} .chhm .directMenu .bottomBtn > ul > li a {position:relative; display: block; height: 90px; padding-top:63px; box-sizing: border-box; overflow: hidden;} .chhm .directMenu .bottomBtn > ul > li a:before {content: ''; position: absolute; top:8px; left:0; right:0; width:50px; height:50px; margin:0 auto; background:url(/img/common/img_common.png) no-repeat -625px -300px; z-index: 2;} .chhm .directMenu .bottomBtn .ico2 a:before {background-position:-675px -300px;} .chhm .directMenu .bottomBtn .ico3 a:before {background-position:-725px -300px;} .chhm .directMenu .bottomBtn .ico4 a:before {background-position:-775px -300px;} .chhm .directMenu .bottomBtn .ico5 a:before {background-position:-825px -300px;} .chhm .directMenu .bottomBtn .ico6 a:before {background-position:-875px -300px;} .chhm .directMenu .bottomBtn > ul > li a:hover:before, .chhm .directMenu .bottomBtn a:focus:before {background-position: -625px -350px;} .chhm .directMenu .bottomBtn .ico1 a:hover:before, .chhm .directMenu .bottomBtn .ico1 a:focus:before {background-position:-625px -350px;} .chhm .directMenu .bottomBtn .ico2 a:hover:before, .chhm .directMenu .bottomBtn .ico2 a:focus:before {background-position:-675px -350px;} .chhm .directMenu .bottomBtn .ico3 a:hover:before, .chhm .directMenu .bottomBtn .ico3 a:focus:before {background-position:-725px -350px;} .chhm .directMenu .bottomBtn .ico4 a:hover:before, .chhm .directMenu .bottomBtn .ico4 a:focus:before {background-position:-775px -350px;} .chhm .directMenu .bottomBtn .ico5 a:hover:before, .chhm .directMenu .bottomBtn .ico5 a:focus:before {background-position:-825px -350px;} .chhm .directMenu .bottomBtn .ico6 a:hover:before, .chhm .directMenu .bottomBtn .ico6 a:focus:before {background-position:-875px -350px;} .chhm .directMenu .bottomBtn > ul > li a:after {content: ''; position: absolute; top:8px; left:0; right:0; width:50px; height:50px; margin:0 auto; background: #fff; border-radius: 50%; z-index: 1; transform:scale(0.6); opacity:0; transition-property: opacity,transform; transition-duration: 0.23s; transition-timing-function: inherit;} .chhm .directMenu .bottomBtn > ul > li a:hover:before, .chhm .directMenu .bottomBtn a:focus:before {background-position: -625px -350px;} .chhm .directMenu .bottomBtn > ul > li a:hover:after, .chhm .directMenu .bottomBtn a:focus:after {transform: scale(1); opacity: 1} .chhm .directMenu .bottomBtn > ul > li a > span {position: relative; display: inline-block;} /* 200310 추가 */ .chhm .directMenu .banner{height:100px; width:268px; position: absolute; bottom:-70px; left:19px; display: none} .chhm .directMenu .banner.on{display: block} .chhm .directMenu .banner .inner{position: relative; height:100%;} .chhm .directMenu .banner .inner .btn_close{position:absolute; right:2px; top:2px; display: block; width:20px; height:20px; min-width:auto; padding:0; text-indent:-9999px; background:rgba(0, 0, 0, .3) url(/img/common/img_common.png) no-repeat -445px 0; background-size:15px auto} .chhm .directMenu .banner .inner > img{width:100%; height:100%} /* Bottom Notice */ .chhm .notiWrap {position:relative; min-height:90px; padding: 19px 40px 9px; width: 1132px; margin: 0 auto; box-sizing: border-box; color:#fff} .chhm .notiWrap .noti:first-child {float:left} .chhm .notiWrap .noti { position:relative; float: right; padding-left:100px; text-align: left;} .chhm .notiWrap .noti .bigTit {position: absolute; left: 0; padding-right: 14px;} .chhm .notiWrap .noti .bigTit:after {content:''; position:absolute; top: 50%; right:0; display:block; width:6px; height:10px; margin-top: -6px; background: url(/img/common/img_common.png) no-repeat -80px -20px;} .chhm .noti li {position:relative; width: 370px; padding-right: 80px; box-sizing: border-box;} .chhm .noti .links {display: inline-block; width:100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left; color:#333;} .secBottom .noti .links{color:#fff !important;} .chhm .noti .links:hover span, .chhm .noti .links:focus span {text-shadow: none !important; color: #333 !important;} .noti .links:after {content: none} .noti .links > span:after {border-color:rgba(0,0,0,0)} .chhm .noti .links > span:after, .noti .links.bold span:before {border-color:#454545; opacity:0.9; left:-100%; width:100%; max-width:290px; /* transition: left 0.25s ease-out */} .chhm .noti .links:hover > span:after, .chhm .noti .links:focus > span:after, .chhm .noti .links.bold:hover span:before, .chhm .noti .links.bold:focus span:before {left:0;} .chhm .noti .date {position: absolute; top:2px; right: 0; font-size: 14px;} .chhm .notiWrap .links span {color:#fff} .chhm .notiWrap .links:hover span,.chhm .notiWrap .links:focus span {color:#fff !important} .chhm .notiWrap .links > span:after {border-color:#fff !important} /* 색반전 관련 css */ .pxNavi.invert ~ .secContain .pagination *, .pxNavi.invert ~ .secContain .pagination *:after {color:#fff;} .pxNavi.invert ~ .secContain .mainTxtSlide .slideBtn li:before {color:#fff} .pxNavi.invert ~ .secContain .scrollGuide {color:#fff} .pxNavi.invert ~ .secContain .scrollGuide:after {background-position: -926px -330px;} .chhm .mainTxtSlide .invert {color:#fff} .chhm .mainTxtSlide .invert [class*=link] {background-position: 0 0;} .chhm .mainTxtSlide .invert [class*=link] span:after {border-color: #fff} .chhm .mainTxtSlide .invert [class*=link]:before {background: url(/img/main/chhm/ico_movie_play.png) no-repeat center center;} .chhm .mainTxtSlide .invert .link:before {background: url(/img/main/chhm/ico_link.png) no-repeat center center;} /*=========================================== Home (전체메인) - News & Event ==============================================*/ .chhm .secTitle {margin: 0 auto 50px; width:231px; height:27px; background: url(/img/common/img_common.png) no-repeat 0 -300px } .chhm #section2 .secTitle{width:205px; height:33px; background-position: 0 -330px} .chhm .newsBottom {margin-top: 50px;} .chhm .newsBottom .boldBox {float:left; position:relative; width:748px; box-sizing: border-box;} .chhm .newsBottom .boldBox:before {content: ''; position: absolute; width: 22px; height: 22px; left:42px; top:37px; background: url(/img/common/img_common.png) no-repeat -580px -408px; /* padding-right: 36px; border-right: 1px solid #d2d2d2; */} .chhm .newsBottom .boldBox:after {content: ''; position: absolute; display: block; left:100px; top:33px; height:31px; width:1px; background:#d2d2d2} .chhm .newsBottom .boldBox .list {min-height: 97px; padding-left:97px; border-color: #fff; box-sizing: border-box;} .chhm .newsBottom .boldBox .list > li {width: 25%} .chhm .newsBottom .boldBox .list > li:before {content: none;} .newsBottom .boldBox .list .bold {color:#333} .newsBottom .boldBox .list .bold span {position: relative; transition: color 0.12s ease-out; } .newsBottom .boldBox .list .bold span:after {content: ''; position:absolute; left:50%; right:50%; bottom: -3px; width: 0%; border-bottom: 1px solid #0063cc; transition: all 0.12s ease-out} .newsBottom .boldBox .list .bold:hover span, .newsBottom .boldBox .list .bold:focus span {color:#0063cc} .newsBottom .boldBox .list .bold:hover span:after, .newsBottom .boldBox .list .bold:focus span:after {left:0; right: 0; width: 100%} .newsBottom .boldBox .list .bold.dropMenu:after {content: ''; position: absolute; right: -20px; top: 10px; width: 1px; height: 1px; border-top: 5px solid rgba(102,102,102,1); border-right: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0);} .newsBottom .newsBannerWrap {float:right; width: 364px; border-radius: 8px; overflow: hidden;} .newsBannerWrap .swiper-controls {top: 5px; left: auto; right: 0; bottom: auto; width: auto; text-align: right;} /* Grid View */ .gridView {position:relative; top:0; left:0;} .gridView.easeInCubic {transform:translate(-1920px,0); transition:transform 0.4s} .gridView.ready {transform:translate(1920px,0); visibility: hidden;} .gridView.easeOutCubic {transform:translate(0,0); transition:transform 0.4s; transition-delay: 0.4s} .gridView .bigTit {display:inline-block; color:#0063cc; padding-bottom: 4px; margin-bottom:15px; border-bottom: 2px solid #0063cc;} .gridView .noti li {width: 323px; padding-right: 0; margin-top:18px;} .gridView .noti li:first-child {margin-top: 0;} .gridView .noti li .date {position: static; color:#777} .gridView .noti .links > span:after {max-width: 325px;} .gridView .noti .links.bold {font-size: 20px; color:#333; white-space: normal;} .gridView .noti .links.bold span:before {content: ''; position: absolute; bottom: 30px; right: auto; left: -310px; width: 310px; max-width: none; border-bottom: 1px solid #454545;} .gridView .noti .links.bold ~ .date {display:block; margin-top: 10px; font-size: 16px; color:#666} .gridView .noti ~ .noti {padding-top:27px; margin-top:20px; border-top:1px solid #ccc;} .gridView .bannerArea {float: left; width:323px; padding: 0 40px 43px; margin:0 40px; border-left: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2;} .gridView .bannerArea a {display: block; height:344px; overflow: hidden; padding:30px; border-radius: 10px; color:#fff; box-sizing: border-box;} .gridView .bannerArea .mainTit {display:block; margin-bottom: 10px; font-size: 20px;} .gridView .bannerArea .dark a, .cardView .dark.event a {color:#555} .gridView .bannerArea .dark .mainTit, .cardView .dark.event .mainTit {color:#333} .gridView .bannerArea .detailInfo {font-size: 14px;} .gridView .bannerArea .swiper-controls {bottom: -50px;} /* 위로 올라오는 dropMenu */ .up.dropMenuWrap .dropMenuBox {transform:translate(0,-100%); margin-top: -40px;} .up.dropMenuWrap .dropMenuBox:before {top:auto; bottom:-8px; transform:rotate(180deg);} .boldBox .list .dropMenuWrap {margin-top:-2px;} .boldBox .list .dropMenuWrap, .boldBox .list .dropMenu {vertical-align:top;} .boldBox .list .dropMenuWrap.on .bold.dropMenu {color:#0063cc} .boldBox .list .dropMenuWrap.on .bold.dropMenu:after {top:5px; border-top: 5px solid rgba(102,102,102,0); border-bottom: 5px solid rgba(0,99,204,1);} /*=========================================== Home (전체메인) - Special KDB ==============================================*/ .specialBox {float:left; position: relative; width:546px !important; overflow: hidden; border-radius: 8px;} .specialBox + .specialBox {margin-left:40px;} .specialBox .conWrap {position: relative; display:table; width:273px; height:223px; background-color:#fff; z-index: 2;} .specialBox .conWrap .middle {display: table-cell; text-align: center; vertical-align: middle; } .specialBox .conWrap .middle * {display: block;} .specialBox .conWrap .sTxt {font-size: 14px; color:#333; margin-bottom: 10px} .specialBox .conWrap .bTxt {font-size: 20px; color:#252525; margin-bottom: 10px} .specialBox .conWrap .context {position:relative; display:inline; font-size: 16px; color:#666} .specialBox .conWrap:before {content: ''; position: absolute; top: 50%; left: 100%; width: 10px; height: 40px; margin: -20px 0 0 0px; background: url(/img/common/img_common.png) no-repeat -1245px -580px; z-index: 3;} .specialBox > img {position: absolute; display:block; width:273px; height:auto; z-index: 1} .specialBox > img ~ .conWrap {width:546px; padding: 0 0 0 273px; background:none; /* background: url(/img/main/chhm/bg_special_box.png) no-repeat right 0; */ box-sizing: border-box;} .specialBox > img ~ .conWrap:before {left:50%; margin: -20px 0 0 -10px; background-position: -1235px -580px;} .specialBox > img ~ .conWrap .middle{background: url(/img/common/img_common.png) no-repeat -955px -580px;} .specialBox > .conWrap ~ img {top:0; right: 0; left:273px;} .specialBox.noBG .conWrap {background: none; padding-left: 40px;} .specialBox.noBG .conWrap .middle {text-align: left} .specialBox.noBG .conWrap:before {content:none} .specialBox.noBG > img {height: 223px; width: auto} .specialBox.noBG > img ~ .conWrap {padding-left: 274px;} .specialBox.noBG > img ~ .conWrap .middle{padding-left:30px;background: #fff;} .specialBox.noBG .conWrap .context:after {content: ''; position: absolute; right: -15px; bottom: 2px; width:8px; height:15px; background: url(/img/common/img_common.png) no-repeat -1235px -621px;} .middleBlock, .bottomBlock {width:1132px; margin-top: 40px;} .specialWrap ul {margin:auto -20px; transition-property: transform; transition-duration:0.5s} .specialWrap ul > li {float: left; padding: 0 20px;} .specialWrap ul > li:before, .specialWrap ul > li:after {content: ''; display: table;} .specialWrap ul > li:after {clear: both} .familySiteWrap {height:100px; padding:35px 60px; background-color: rgba(255,255,255,0.5); box-sizing: border-box;} .familySiteWrap button[class*=btn] {top:50%; margin-top:-15px; left: 20px;} .familySiteWrap button.btnNext {left:auto; right:20px;} .familySiteWrap ul {transition-property: transform; transition-duration:0.3s; margin-left:-1px; margin-right: -1px;} .familySiteWrap ul.sMotion {transition-duration:0.7s !important;} .familySiteWrap li {position:relative; float: left; width:25%; text-align:center;} .familySiteWrap li a {position: relative; display: inline-block; width:auto !important; height: 30px; line-height: 30px; transition: color 0.1s ease-out;} .familySiteWrap li .img {position: relative; display: inline-block; margin-right: 5px;} .familySiteWrap li a:before{content: ''; display: inline-block; margin-right: 5px; width:30px; height:30px; background: url(/img/common/img_common.png) no-repeat -685px -410px; vertical-align: middle;} .familySiteWrap li.icon_2 a:before{background-position: -805px -410px} .familySiteWrap li.icon_3 a:before{background-position: -715px -410px} .familySiteWrap li.icon_4 a:before{background-position: -835px -410px} .familySiteWrap li.icon_5 a:before{background-position: -625px -410px } .familySiteWrap li.icon_6 a:before{background-position: -745px -410px } .familySiteWrap li.icon_7 a:before{background-position: -775px -410px } .familySiteWrap li.icon_8 a:before{background-position: -865px -410px} .familySiteWrap li.icon_9 a:before{background-position: -895px -410px} .familySiteWrap li.icon_10 a:before{background-position: -655px -410px } .familySiteWrap li:before {content: ''; position: absolute; left:0; top:0; bottom:0; border-left: 1px solid #ccc;} .familySiteWrap li:first-child:before {content: none} .familySiteWrap li a span {position: relative; vertical-align: middle;} .familySiteWrap li a span:after {content:''; position: absolute; border-bottom: 1px solid #0063cc; width:0; left:50%; right:50%; bottom: -2px; transition: all 0.15s ease-in-out;} .familySiteWrap li a:hover,.familySiteWrap li a:focus {color:#0063cc;} .familySiteWrap li a:hover span:after, .familySiteWrap li a:focus span:after {left:0; right:0; width: 100%;} /*=========================================== Home (전체메인) - 기업금융정보 ==============================================*/ .chhm .mainCopyWrap {position:relative; text-align: center; z-index: 3} .mainCopyWrap .sTxt {font-size:20px; margin-bottom: 8px;} .mainCopyWrap .bTxt {margin: 6px auto 16px; font-size: 58px; line-height: 1.2em; letter-spacing: -0.01em; width: 571px; height: 121px; background: url(/img/common/img_common.png) no-repeat 0 -365px;} .mainCopyWrap .comment {color:#666} .chhm .search, .main .search.shape {position: relative; margin: 40px auto 0; z-index: 3; text-align: center;} .chhm .search div.delete.rel, .main .search.shape div.delete.rel {display:inline-block; width:537px; box-shadow: 10px 10px 30px 0 rgba(0,0,0,0.1); margin-right: -10px} .chhm .search .ipt, .main .search.shape .ipt {position:relative; width: 100%; height: 60px; padding:20px; border-color:#fff; border-radius:0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; box-sizing: border-box; z-index: 2; font-size: 16px; color:#333; line-height:20px; font-size: 20px;} .chhm .search .ipt::-moz-placeholder {font-size:16px; color: # !important;}.chhm .search .ipt:-ms-input-placeholder {font-size:16px; color: #333 !important;}.chhm .search .ipt::-webkit-input-placeholder {font-size:16px; color: #333 !important;} .main .search.shape .ipt::-moz-placeholder {font-size:16px; color: #333 !important;}.main .search.shape .ipt:-ms-input-placeholder {font-size:16px; color: #333 !important;}.main .search.shape .ipt::-webkit-input-placeholder {font-size:16px; color: #333 !important;} .chhm .search .delBtn, .main .search.shape .delBtn {top: 10px; z-index: 10;} .chhm .search .btnSearch, .main .search.shape .btnSearch {position: relative; display:inline-block; height: 60px; padding:0 0 0 73px; border-radius:0; z-index: 1; text-align:left; background: #0063cc; transition-duration:0s} .chhm .search .btnSearch:after, .main .search.shape .btnSearch:after{content:''; position: absolute; width:20px; height:60px; display: block; right:-20px; top:0; background:url(/img/common/img_common.png) no-repeat -1130px -300px;} .chhm .search .btnSearch:before, .main .search.shape .btnSearch:before {content: ''; position: absolute; left: 34px; top:17px; width:30px; height:26px; background: url(/img/common/img_common.png) no-repeat -1095px -300px; } .chhm .search .btnSearch:hover, .chhm .search .btnSearch:focus, .main .search.shape .btnSearch:hover, .main .search.shape .btnSearch:focus {background: #1aa3fa;} .chhm .search .btnSearch:hover:after, .main .search.shape .btnSearch:hover:after{background-position: -1130px -360px;} .chhm .searchShape {position: relative; width: 223px; height: 94px; margin: 30px auto 0; background: url(/img/common/img_common.png) no-repeat -1093px -440px;} .consultBtn {position: relative; margin-top:20px; z-index: 3; text-align: center;} .consultBtn li {display: inline-block; vertical-align: top; margin:0 35px;} .consultBtn a {position:relative; display: block; text-align: center; transition: color 0.2s linear; outline: rgba(0,0,0,0)} .consultBtn .bold {display: block; padding-top:70px; min-width: 86px;} .consultBtn a:before {content:''; position: absolute; top: 0; left: 0; width:86px; height:90px; background: url(/img/common/img_common.png) no-repeat -1320px -440px; z-index: 3; transition: all 0.2s ease-in-out} .consultBtn a:hover, .consultBtn a:focus {color:#0063cc;} .consultBtn a:hover:before, .consultBtn a:focus:before {background-position-x: -1407px !important;} .consultBtn a.ico2:before {background-position:-1320px -530px;} .consultBtn a.ico3:before {background-position:-1320px -620px;} .consultBtn a.ico4:before {background-position:-1320px -710px;} .consultBtn a.ico5:before {background-position:-1320px -800px;} .consultBtn a.ico6:before {background-position:-1320px -890px;} .hexagon {position: relative; width: 86px; height: 38px; top:27px; z-index: 2} .hexagon, .hexagon:before, .hexagon:after {background-color: #fff; box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1); transition: all 0.2s linear} .hexagon:before, .hexagon:after {content: ''; position: absolute; left: 15px; width: 56px; height: 48px; transform: rotate(31deg) skew(-30deg); border-radius: 10px;} .hexagon:before {top: -25px;} .hexagon:after {top: 14px;} .hexagon span {position: absolute; top: 0; left: 0; width: 86px; height: 38px; background-color: #fff; z-index: 1; transition:all 0.2s linear} .isIE .hexagon span {width: 85px;} a:hover > .hexagon span, a:hover > .hexagon:before, a:hover > .hexagon:after, a:focus > .hexagon span, a:focus > .hexagon:before, a:focus > .hexagon:after {background-color: #0063cc;} @-webkit-keyframes glow { 0%{-webkit-box-shadow: 0px 0px 10px 3px rgba(255,255,255, 0.3);} 50%{-webkit-box-shadow: 0px 0px 20px 7px rgba(255,255,255, 1);} 100%{-webkit-box-shadow: 0px 0px 10px 3px rgba(255,255,255, 0.3);} } @keyframes glow { 0%{box-shadow: 0px 0px 10px 3px rgba(255,255,255, 0.3);} 50%{box-shadow: 0px 0px 20px 7px rgba(255,255,255, 1);} 100%{box-shadow: 0px 0px 10px 3px rgba(255,255,255, 0.3);} } .objContain {position: absolute; top:0; left:0; right:0; bottom:0; z-index: 1; pointer-events: none;} .objContain [class*=obj] {position: absolute; z-index: 1; background:url('/img/common/img_common.png') no-repeat;} .objContain .obj1 {right: -115px; bottom: 25%; z-index: 2; width:309px; height:362px; background-position: -580px -440px;} .objContain .obj2 {left: 51px; bottom: 30%; z-index: 2; width:63px; height:251px; background-position: -891px -440px;} .objContain .obj3 {left: 130px; bottom: 37%; z-index: 1; width:45px; height:132px; background-position: -954px -440px;} .objContain .obj4 {left: 11px; bottom: 31%; z-index: 1; width:46px; height:134px; background-position: -1000px -440px;} .objContain .obj5 {left: 93px; bottom: 34%; z-index: 1; width:46px; height:131px; background-position: -1047px -440px;} .parallax .moveTarget {transition-duration: 0.5s; transition-property:transform; transform: translate(0, 0)} .parallax .moveTarget.out {transform: translate(0, -100px)} .parallax .moveTarget.in {transform: translate(0, 100px)} /*=========================================== 템플릿 메인 ==============================================*/ /*visualFrame*/ .visualFrame ~ .sectionWrap {height:inherit; z-index:2;} .visualFrame {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; max-width:1820px; min-width:1132px; height:inherit; margin:0 auto; z-index:1;} .visualFrame:before {content:''; display:block; position:absolute; left:0; width:20px; height:inherit; background:#fff; z-index:3;} .visualFrame:after {content:''; position:absolute; bottom:0; right:0; display:block; width:140px; height:inherit; background:url('/img/main/bg_main_edge.png') no-repeat 0 bottom; z-index:1;} .visualFrame .visualList {height:inherit;} .visualFrame .visualList .visual {height:inherit; max-width:1780px; margin:0 auto;} .visualFrame.cover .visualList:before {content: ''; position: absolute; top: 0; left:0; bottom: 0; width: 50%; box-sizing:border-box; background-color: #0063cc; opacity: 0.9; z-index:2} .visualFrame.cover button:focus, .visualFrame.cover ~ .sectionWrap a:focus, .visualFrame.cover ~ .sectionWrap button:focus {outline: 1px dotted #fff;} .kc.main .visualFrame.cover ~ .sectionWrap .keyContents .last a:focus {text-decoration:underline;} .kc.main .keyContents .item button:focus {outline: 1px dotted #629eff !important;} @media (max-width:1440px) { .visualFrame:before {left:50%; margin-left:-712px} .visualFrame:after {right:50%; margin-right:-711px;} } .main .copyArea {padding-top:115px; color:#fff;} .main .copyArea [class*=tit], .main .copyArea [class*=btn] {color:#fff;} .main .copyArea [class*=btnW]:not(.btnArea) {background:none; border-color:#fff;} .main .copyArea [class*=btnW]:not(.btnArea):hover, .main .copyArea [class*=btnW]:not(.btnArea):focus {background-color:#fff; color:#0063cc;} .keyContents{position:absolute; left:0; right:0; bottom:127px} .keyContents:after {content: ''; display:table; clear: both;} .keyContents .item {float:left; width: 25%;} .keyContents .item.first {border-top-left-radius: 6px;border-bottom-left-radius: 6px} .keyContents .item.last {border-top-right-radius: 6px;border-bottom-right-radius: 6px} .keyContents.div4 .item {width: 25%;} .keyContents.div3 .item {width: 33%;} .keyContents.div3 .item:first-child {width: 34%;} .keyContents.div5 .item {width: 20%;} .keyContents .item button, .keyContents .item a {display: inline-block; width: 100%; height: 120px; padding: 0 40px; box-sizing: border-box; color: #fff; font-size: 16px; text-align: left; word-break: break-all; overflow:hidden;} .keyContents .item button span, .keyContents .item a span{position:relative; display:inline-block;} .keyContents .item button > span:after, .keyContents .item a > span:after{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;} .keyContents .item button:hover span, .keyContents .item button:focus span, .keyContents .item a:hover span, .keyContents .item a:focus span {color:#0063cc;} .keyContents .item button:hover > span:after, .keyContents .item button:focus > span:after, .keyContents .item a:hover > span:after, .keyContents .item a:focus > span:after{left:0; right: 0; width:auto} .keyContents .item button:hover:after, .keyContents .item button:focus:after, .keyContents .item a:hover:after, .keyContents .item a:focus:after{border-bottom:0} .keyContents .goList{float:left; border-radius:8px 0 0 8px; overflow:hidden;} .keyContents .goList li{float:left;} .keyContents .goList li > a{display:block; width:100%; text-align:center; color:#fff; font-size:16px; box-sizing:border-box; word-break: break-all; overflow:hidden; background-repeat: no-repeat; background-position:center 25px;} .keyContents .goList li > a:hover, .keyContents .goList li > a:focus{background-color:#293250} .keyContents .goList li a:hover:after, .keyContents .goList li a:focus:after{border-bottom:0} .keyContents .goList li > a span{position:relative; display:inline-block;} .keyContents .goList li a > span:after{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;} .keyContents .goList li a:hover > span:after, .keyContents .goList li a:focus > span:after{left:0; right: 0; width:auto} .main .footArea {position:absolute; left:0; right:0; bottom:50px} .main .footArea .leftArea, .main .footArea .rightArea {width: 50%; float: left; box-sizing: border-box;} .main .footArea .rightArea {padding-left: 20px;} .main .boldBox .list{position:relative; padding:34px 0 25px; border:4px solid #dedede; border-radius:8px 8px} .main .boldBox .list:after{content:""; display:block;clear:both} .main .boldBox .list > li{position:relative; float:left; width:20%; text-align:center} .main .boldBox .list > li:before{content:""; display:block; position:absolute; top:5px; left:0; width:1px; height:17px; border-left:1px solid #ccc} .main .boldBox .list > li:first-child:before{display:none} .main .boldBox .list.div3 > li {width:33.3%;} .main .boldBox .list.div4 > li {width:25%;} .main .csCont{position:relative; margin-top:40px; padding:30px 0; border-top:1px solid #dedede; background:#f5f7fb} .main .csCont .inner{width:1132px; margin:0 auto;} .main .csCont .row > * {margin-left:-1px; padding-left:40px; border-left:1px solid #dedede; border-right:1px solid #dedede} .main .csCont .row > *.first, .main .csCont .row > *:first-child {padding-left:10px; border-left:0;} .main .csCont .row > *.brNone + * {border-left:none;} .main .csCont .row > *.ar, .main .csCont .row > *.last {border-right:none;} .main .csCont .position{color:#333} .main .csCont .num{display:block; margin-top:5px; font-size:24px; color:#333} .main .csCont .links{margin-top:32px} .main .csCont .ar .links{margin:32px 0 0 27px;} .main .csCont .inner.clfix {text-align:right;} .main .csCont .inner.clfix > * {float:left; text-align:left; box-sizing:border-box;} .main .csCont .inner.clfix .titWrap {padding-left:85px; background:url(../img/main/bp/ico_cscont.png) no-repeat 0 0;} .main .csCont .inner.clfix .titWrap .txtM.num {color:#666;} .main .csCont .inner.clfix .numWrap {float:none; display:inline-block; vertical-align:top;} .main .csCont .inner.clfix .numWrap + .numWrap {margin-left:40px; padding-left:40px; border-left:1px solid #dedede;} /* progArea */ .keyContents .progArea{position:relative; float:right; width:220px; height:160px; border-radius:4px; box-sizing: border-box;} .keyContents .progArea .box{position:absolute; bottom:0; right:0; width:100%; height:160px; padding:23px 30px 30px; box-sizing:border-box; overflow:hidden;} .keyContents .progArea .overviewArea{position:absolute; display:block; top:0; left:0; width:220px; height:160px; padding:87px 0 30px 30px; box-sizing:border-box; transition: top 0.3s ease-in-out} .keyContents .progArea .overviewArea .txt{font-size:16px; color:#fff; } .keyContents .progArea .tit{display:block; position:relative; font-size:20px; color:#fff; } .keyContents .progArea .tit:after {display: block; content: ''; position: absolute; bottom:-15px; left:0; width:30px; border-bottom:1px solid #fff;} .keyContents .progArea .listArea{position:relative; top:160px; transition: top 0.3s ease-in-out } .keyContents .progArea .list{height:100%; padding-top:18px;} .keyContents .progArea .list li{margin-top:7px; font-size:16px; color:#fff} .keyContents .progArea .list li:first-child{margin-top:12px} .keyContents .progArea .list li a{position:relative; display:inline-block; width:auto; height:auto; padding:0; word-break: break-all; overflow:hidden} .keyContents .progArea .list li a:hover:after, .keyContents .progArea .list li a:focus:after{border-bottom:0} .keyContents .progArea .list li a > span{position:relative; display:inline-block; color:#fff} .keyContents .progArea .list li a > span:after, .keyContents .progArea .list li a:before{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #fff; transition: all 0.25s ease-out;} .keyContents .progArea .list li a:before{position:absolute; left:0; bottom: 26px;} .keyContents .progArea .list li a:hover > span:after, .keyContents .progArea .list li a:focus > span:after{left:0; right: 0; width:auto} .keyContents .progArea .list li a:hover:before, .keyContents .progArea .list li a:focus:before {width:auto; left:0; right:10px;} .keyContents .progArea .btnShowArea{display:inline-block; position:absolute; top:30px; right:30px; width:18px; height:18px; line-height:18px; z-index:11} .keyContents .progArea .btnShowArea .minus {display: none} .keyContents .progArea .btnShow{position:relative; min-width:0; width:18px; height:18px; padding:0; vertical-align:top; background:none } .keyContents .progArea .btnShow:before, .keyContents .progArea .btnShow:after{content:""; display:inline-block; position:absolute; top:8px; left:0; width:18px; height:2px; background-color:#fff; transition: all 0.2s ease-in-out} .keyContents .progArea .btnShow:after{top:0px; left:8px; width:2px; height:18px} .keyContents .progArea.on .btnShowArea .plus {display: none} .keyContents .progArea.on .btnShowArea .minus {display: block;} .keyContents .progArea.on .btnShowArea .btnShow:after {transform: rotate(270deg); transition-duration: 0.45s} .keyContents .progArea.on .btnShowArea .btnShow:before {transform: rotate(270deg); left: 50%; width: 0; transition-duration: 0.45s} .keyContents .progArea:not(.on) .btnShow:hover:before, .progArea:not(.on) .btnShow:focus:before, .keyContents .progArea:not(.on) .btnShow:hover:after, .progArea:not(.on) .btnShow:focus:after {transform: rotate(90deg)} .keyContents .progArea.on .overviewArea{top:-160px;} .keyContents .progArea.on .listArea{top:0} /* swiper-controls */ .visualFrame .swiper-controls{position:absolute; top:459px; left:50%; width: auto; margin-left:-571px; bottom:auto; right:auto; text-align:left; } .visualFrame .swiper-pagination:after{content:""; display:block; clear:both} /* .visualFrame .swiper-pagination > button.swiper-pagination-bullet{float:left; margin:5px 10px 0; display:inline-block; width:12px; height:12px; border-radius:12px 12px; background:#fff !important; opacity:0.4 !important} .visualFrame .swiper-pagination > button.swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1 !important} .visualFrame button.swiper-button-stop, .visualFrame button.swiper-button-play{border:0;} .visualFrame button.swiper-button-stop:before, .visualFrame button.swiper-button-stop:after{bottom: 6px; background-color:#fff} .visualFrame button.swiper-button-play:after{border-left:7px solid #fff; border-right:7px solid rgba(0,0,0,0); border-bottom:6px solid rgba(0,0,0,0); border-top:6px solid rgba(0,0,0,0);} */ /*===================================== KDB미래전략연구소 =====================================*/ body.parallax .footer.white{height:auto;} .fafl.main .copyArea .txt{margin-top:25px} .parallax .fafl .section {padding-bottom: 300px; box-sizing: content-box;}/*섹션별 간격조절*/ .fafl .faflBox {position:absolute; width:1132px; height: 220px; bottom:100px; background-color: #fff; border-radius: 10px; overflow: hidden;} .fafl .faflBox .directLink {float: left;} .fafl .faflBox .linkWrap {position: relative; float: right; min-width: 384px; height:220px; padding: 40px; border-left: 1px solid #efefef; box-sizing: border-box; background-color: #f8f8f8} .fafl .faflBox .linkWrap > a, .fafl .faflBox .linkWrap > a > * {display: block;} .fafl .faflBox .linkWrap .tit {font-size: 20px;} .fafl .faflBox .linkWrap .bookImg {position: absolute; right:30px; top:20px; width:148px; height:189px;background: url(/img/common/img_sub_main.png) no-repeat -349px -984px; } .fafl .faflBox .linkWrap .links{margin-top:10px; width:auto; height:auto; color:#0063cc} .fafl .faflBox .linkWrap span:after{display:none} .fafl .secContain .section:first-child .sectionWrap {box-sizing: border-box;} .fafl .notiScroll{position:absolute; bottom: 40px; left:0; right:0; margin: 0 auto; text-align: center;} .fafl .notiScroll .txt {display:inline-block; position:relative; padding-right:34px; color:#fff; line-height:25px; font-size: 14px;} .fafl .notiScroll .txt:after{content: ''; display: block; position: absolute; right:0; top:0; background:url(/img/common/img_sub_main.png) no-repeat -499px -985px; width:24px; height:26px;} .fafl .titH1{width:479px; height:54px; display: block; background:url(/img/common/img_sub_main.png) no-repeat -82px -930px;} .faflBox .directLink {width: 748px; box-sizing: border-box; padding: 0 50px; text-align: center;} .faflBox .directLink li {position:relative; float: left; width: 25%; margin-top:57px; text-align: center;} .faflBox .directLink li a {position:relative; display: inline-block; padding-top: 87px;} .faflBox .directLink li a > span {position: relative; transition: color 0.10s ease-in-out;} .faflBox .directLink li a > span:after {content: ''; position:absolute; bottom:-3px; right:50%; left:50%; width:0%; border-bottom: 1px solid #0063cc; transition: all 0.18s ease-in-out;} .faflBox .directLink .ico {position: absolute; top:0; left:0; right:0; width: 66px; height: 70px; margin:0 auto; background-color: #eff1f3; overflow: hidden; transition: background-color 0.25s ease-in-out;} .faflBox .directLink .ico:before {content: ''; position: absolute; top:0; left:0; display:block; width: 66px; height: 70px; background: url(/img/common/img_sub_main.png) no-repeat -562px -930px; z-index: 3 } .faflBox .directLink .ico:after {content: ''; position:relative; top:0; left:0; display:block; width: 66px; height: 140px; transform: translate(0,0); background: url(/img/common/img_sub_main.png) no-repeat -82px -984px ; z-index: 2; transition: transform 0.25s ease-in-out} .faflBox .directLink .link2 .ico:after {background-position:-149px -984px;} .faflBox .directLink .link3 .ico:after {background-position:-216px -984px;} .faflBox .directLink .link4 .ico:after {background-position:-283px -984px;} .faflBox .directLink li a:hover .ico, .faflBox .directLink li a:focus .ico{background-color: #0063cc;} .faflBox .directLink li a:hover .ico:after, .faflBox .directLink li a:focus .ico:after {transform: translate(0,-70px);} .faflBox .directLink li a:hover > span, .faflBox .directLink li a:focus > span {color:#0063cc} .faflBox .directLink li a:hover > span:after, .faflBox .directLink li a:focus > span:after {left:0; right:0; width:100%;} .fafl.main .topCont{position:relative; width:100%; margin-top:90px} .fafl.main .topCont:after{content:""; display:block; clear:both} .fafl.main .filterArea{width:50%; float:left;} .fafl.main .filter{margin-top:20px} .fafl .pxNavi:before {content: none;} .fafl .pxNavi:before {content: ''; position: absolute; display:block; top:-26px; left:0; width:181px; height: 26px; background: url(/img/main/fafl/bg_pxnavi_top.png) no-repeat 0 0; } .fafl .pxNavi {width: 152px; padding: 0 21px 23px 10px; background: url(/img/main/fafl/bg_pxnavi.png) no-repeat 0 bottom; } .fafl .pxNavi ul {margin: 10px 0 0 20px; padding-bottom: 30px;} .main .filter:after{content:""; display:block; clear:both} .main .filter > li{position:relative; float:left; padding:0 30px;} .main .filter > li:before{content:""; display:block; position:absolute; top:5px; left:0; width:1px; height:20px; border-left:1px solid #d2d2d2} .fafl .filter > li:first-child{padding-left:0} .main .filter > li:first-child:before{display:none} .main .filter > li > label {position:relative; display:inline-block; text-align:center; cursor:pointer; box-sizing:border-box; z-index:1} .main .filter > li > label > span{display:inline-block;} .main .filter > li > input[type="radio"]{position:absolute; overflow:hidden; margin:-1px; border:0; padding:0; width:1px; height:1px; clip: rect(0 0 0 0);} .main .filter > li > input[type="radio"]:checked + label{color:#0063cc; border-bottom:2px solid #0063cc; z-index:2} .main .filter > li > input[type="radio"]:focus + label, .main .filter > li > input[type="radio"]:hover + label{color:#0063cc;} .main .filter > li > input[type="radio"]:focus + label {outline: 1px dotted #666;} .fafl.main .topCont .searchArea{width:50%; float:left; margin-top:20px} .fafl.main .search{position:relative; display:inline-block; box-shadow:5px 5px 5px rgba(0,0,0,0.07)} .fafl.main .search:after{content:""; display:block; clear:both} .fafl.main .search .ipt{height:60px; line-height:58px; } .fafl.main .search .ipt:focus{position:relative; z-index:2} .fafl.main .search > select.ipt{float:left; width:170px; font-size:18px; color:#003895} .fafl.main .search > input.ipt{float:left; position:relative; width:375px; border-right:0; border-radius:4px 0 0 4px; } .fafl.main .search > .btnSearchWrap{position:relative; float:left; height:60px; border-radius:0 4px 4px 0; background-color:#0063cc} .fafl.main .search > .btnSearchWrap:after{content:""; position:absolute; bottom:-16px; right:-15px; width:30px; height:36px; background:url(/img/common/img_sub_main.png) no-repeat -499px -1034px;} .fafl.main .search > .btnSearchWrap .btnSearch{display:inline-block; height:60px; line-height:60px; background-color:#0063cc} .fafl.main .search > .btnSearchWrap .btnSearch span{display:inline-block; padding-left:35px; position: relative;} .fafl.main .search > .btnSearchWrap .btnSearch span:before{content:''; display: block; position:absolute; left:0; top:50%; width:24px; height:21px; margin-top:-11px; background: url(/img/common/img_sub_main.png) no-repeat -499px -1012px; } .fafl.main .notiDrag{position:absolute; left:0; top:50%; margin:-40px 0 0 -40px;width:80px; height:80px; text-align:center; opacity:1; z-index:11; transition: opacity 0.3s linear; pointer-events:none} .fafl.main .notiDrag:before{content:""; display:block; position:absolute; top:0; left:0; width:80px; height:80px; border-radius:40px 40px; background:#9ac9fe; opacity:0.85; z-index:11} .fafl.main .notiDrag .txt{position:relative; display:inline-block; padding:12px 20px 35px; font-size:13px; color:#fff; z-index:12} .fafl.main .notiDrag .txt:after{content: ''; display: block; width:52px; height:30px; position: absolute; left:50%; margin-left:-26px; bottom:0; background: url(/img/common/img_sub_main.png)-499px -1073px} .fafl.main .dragScroll.enter .notiDrag, .fafl.main .draged .notiDrag {opacity:0;} .fafl.main .viewport {min-height: 350px;} .fafl.main .dragScroll{margin-top:75px;} .fafl.main .dragScroll .cardList > li { vertical-align: top; } .fafl.main .dragScroll .cardList > li .cardWrap {width: 203px; height: 280px; padding: 34px 34px 34px 40px; transition:all 0s ease-in-out;;} .fafl.main .dragScroll .cardList > li .cardWrap .cardOver { min-height: 280px; padding: 34px 34px 34px 40px;} .fafl.main .dragScroll .cardList > li .cardWrap .cardOver .btnCArea{left:40px; right:40px; bottom:37px} .fafl.main .dragScroll .cardList > li .cardWrap .midCont{font-size:20px; color:#252525; letter-spacing: -0.05em;} .fafl.main .dragScroll .cardList > li .cardWrap .bottomCont{left:40px; bottom:37px} .fafl.main .dragScroll .cardList > li .dropMenuBox {min-width: 279px;} .fafl.main .dragScroll .cardList > li.on .cardWrap {top: 0; left:0; box-shadow: 5px 5px 5px rgba(0,0,0,0.07)} .fafl.main .dragScroll .cardList > li.on .cardWrap .cardDefault {height: 310px;} .fafl.main .dragScroll .cardList > li.on .cardWrap .cardOver .cardTit {display:block; color:#fff} .fafl.main .dragScroll .cardList > li.on .cardWrap .cardOver .midCont {height:310px; color:#fff} .fafl.main .boldBox{position:relative; width:100%; margin-top:85px} .fafl.main .boldBox .list{border-color:#fff} .fafl.main .boldBox .list > li{width:25%} .fafl.main .boldBox .list > li span{display:inline-block; font-size:14px} .fafl.main .boldBox .list > li strong{display:inline-block; margin-left:15px; color:#252525} /* miniMode */ .miniMode .pxNavi li a span.num{display:block} .miniMode .pxNavi li a strong{display:none} .miniMode .fafl.main .copyArea{padding-top:25px} .miniMode .fafl.main .copyArea .titH4{font-size:16px} .miniMode .fafl.main .copyArea .titH1{line-height:44px} .miniMode .fafl.main .copyArea .titH1 img{width:395px;} .miniMode .fafl.main .copyArea .txt{font-size:14px; margin-top:15px} .miniMode .fafl.main .linkCont{margin-top:45px;} /* .miniMode .fafl.main .linkCont:before{top:0; height:192px; background:url(/img/main/fafl/bg_linkcont.png) no-repeat 0 bottom;} .miniMode .fafl.main .linkCont .item{height:155px} .miniMode .fafl.main .linkCont button{height:155px} .miniMode .fafl.main .linkCont button .txtM{display:none} */ .miniMode .fafl.main .topCont{margin-top:25px} .miniMode .fafl.main .topCont .titH2{font-size:28px; line-height:40px} .miniMode .fafl.main .filter > li > label > span{font-size:14px} .miniMode .fafl.main .dragScroll{margin-top:30px} .miniMode .fafl.main .dragScroll .cardList > li .cardWrap{height:198px; padding:24px 24px 24px 30px;} .miniMode .fafl.main .dragScroll .cardList > li .cardWrap .cardOver{min-height:198px; padding:24px 24px 24px 30px;} .miniMode .fafl.main .dragScroll .cardList > li .cardWrap .cardOver .btnCArea{left:30px; right:30px; bottom:27px} .miniMode .fafl.main .dragScroll .cardList > li .cardWrap .cardTit .txt{font-size:14px} .miniMode .fafl.main .dragScroll .cardList > li .cardWrap .midCont{font-size:16px} .miniMode .fafl.main .dragScroll .cardList > li .cardWrap .bottomCont{left:30px; bottom:27px; font-size:14px} .miniMode .fafl.main .boldBox{margin-top:65px} .miniMode .fafl.main .boldBox .list{padding:26px 0} .miniMode .fafl.main .boldBox .list > li{font-size:14px} .miniMode .fafl.main .boldBox .list > li span{font-size:12px} /*===================================== 기업금융정보(정보마당) =====================================*/ .chef.main .linkBox li { width: 33.33%; float: left; padding-top: 140px; margin-top:105px; text-align: center;} .chef.main .linkBox li.left { background: url(/img/main/chef/ico_chef_01.png) no-repeat center 0; } .chef.main .linkBox li.center { background: url(/img/main/chef/ico_chef_02.png) no-repeat center 0; } .chef.main .linkBox li.right { background: url(/img/main/chef/ico_chef_03.png) no-repeat center 0; } .chef.main .linkBox li a { display: block; height: 90px; } .chef.main .linkBox li a .txt { padding-top: 10px; } .chef.main .linkBox li a:hover .titH4, .chef.main .linkBox li a:focus .titH4 { color: #0063cc; } .chef.main .linkBox li a:hover .txt, .chef.main .linkBox li a:focus .txt { color: #0063cc; } .chef.main .boldBox { margin-top: 50px; margin-bottom: 100px; } .chef.main .boldBox .dropMenuBox .menu { width:240px; } .chef.main .footLink { padding: 20px 0; border-top: 1px solid #dedede; } .chef.main .footLink a.links { color:#999; } .chef.main .footLink a.links:hover, .chef.main .footLink a.links:focus { color:#0063cc; } /* 랜딩 인트로 메인 */ .chef.main .chefMain {background: url(/img/main/chef/bg_chef_main.jpg) center center / cover no-repeat; min-height: 636px; padding-top: 100px; box-sizing: border-box; margin-bottom: 108px; transition: transform 0.5s ease-in-out; z-index: 1} .chef.main .searchCont{ text-align:center} .chef.main .searchCont .copyArea {margin-top:-5px; padding-top:0;} .chef.main .searchCont .copyArea .titH1 {margin:15px 0 35px 0;} .chef.main .searchCont .search.shape .ipt {width: 537px;} /* VISUAL 화면열림 */ .chefWrap {position: relative; height:636px; overflow: hidden;} .chefArea {position: absolute; top: 0; bottom: 0; left: 0; right: 0; min-height: 100px; min-height: 636px; z-index: 9; transition: transform 0.5s ease-in-out; transform:translate(0,100%); z-index: 2} .chef.main .chefArea .sectionWrap { padding-top: 80px; box-sizing: border-box; color: #fff; } .chefArea .chefAreaClose { position:absolute; top:80px; left:50%; margin-left: 510px; width:28px; height:28px; } .chefArea .chefAreaClose:before { content:''; position:absolute; top:0; left:0; width:28px; height:28px; background: url(/img/main/chef/btn_visual_close.png) no-repeat 0 0; transition:transform 0.25s ease-out} .chefArea .chefAreaClose:hover:before, .chefArea .chefAreaClose:focus:before { transform:rotate(90deg); } .chef.main .chefArea.remove {z-index: 3} /* visual 내부 서브메뉴 */ .chefArea.sub0 { background: url(/img/main/chef/bg_chef_visual1.png) center center / cover no-repeat; } .chefArea.sub1 { background: url(/img/main/chef/bg_chef_visual2.png) center center / cover no-repeat; } .chefArea.sub2 { background: url(/img/main/chef/bg_chef_visual3.png) center center / cover no-repeat; } .chefArea.sub3 { background: url(/img/main/chef/bg_chef_visual4.png) center center / cover no-repeat; } .chefSubMenu { padding: 15px 0; position: absolute; top: 142px; right: 20px; } .chefSubMenu:before { content: ""; background-color: rgba(0,31,91,0.9); height: 15px; position: absolute; top: 0; left: 0; right: 10px; border-radius: 4px 0 0 0; } .chefSubMenu:after { content: ""; background-color: rgba(0,31,91,0.9); height: 15px; position: absolute; bottom: 0; left: 10px; right: 0px; border-radius: 0 0 4px 0; } .chefSubMenu > ul:before { content: ""; background: url(/img/main/chef/ico_sub_edge_top.png) no-repeat 0 0; width: 10px; height: 15px; position: absolute; top: 0; right: 0; } .chefSubMenu > ul:after { content: ""; background: url(/img/main/chef/ico_sub_edge_bottom.png) no-repeat 0 0; width: 10px; height: 15px; position: absolute; bottom: 0; left: 0; } .chefSubMenu > ul { display: none; background-color: rgba(0,31,91,0.9); padding: 8px 30px 8px 25px; } .chefSubMenu > ul.on { display: block; } .chefSubMenu > ul li { text-align: right; margin-bottom: 13px; } .chefSubMenu > ul li:last-child { margin-bottom: 0px; } .chefSubMenu a { padding: 2px; font-size: 14px; color: #86b4de;} .chefSubMenu a:hover, .chefSubMenu a:focus, .chefSubMenu a.on { color: #fff; position: relative; } .chefSubMenu a.on:after { content: ""; position: absolute; top: 5px; right: -15px; width: 9px; height: 15px; background: url(/img/main/chef/ico_sub_here.png) no-repeat 0 0; } .isIE .chefSubMenu > ul:before {border-left:1px solid rgba(0,31,91,0.9)} .isIE .chefSubMenu > ul:after {border-right:1px solid rgba(0,31,91,0.9)} /* visual 내부 컨텐츠 내용 */ .visualCont { position:absolute; display: none; padding-left: 30px; max-width: 800px; } .chef.main .visualCont .titH2 { color: #fff; padding-bottom: 25px; } .chef.main .visualCont .btnGroup { margin-top: 15px; } .chef.main .visualCont .btnGroup a { display: inline-block; min-width: 100px; height: 40px; padding:0 14px; background-color:#fff; line-height: 38px; vertical-align: middle; text-align: center; border-radius:4px; box-sizing: border-box; color:#555; transition:all 0.125s, border 0.125s; font-size:16px; } .chef.main .visualCont .btnGroup a:hover, .chef.main .visualCont .btnGroup a:focus { background-color: rgba(0,31,91,0.9); border-color: rgba(0,31,91,0.9); color: #fff; } .chef.main .visualCont .hexaLink { margin-top: 30px; } .chef.main .visualCont .hexaLink li { display: inline-block; margin-left: 15px; } .chef.main .visualCont .hexaLink li:first-child { margin-left: 0; } .chef.main .visualCont .hexaLink li > a { letter-spacing: -0.5px; width: 105px; height: 115px; display: table; table-layout: fixed; background: url(/img/main/chef/bg_hexa_link.png) no-repeat 0 0; box-sizing: border-box; color: #333; text-align: center; line-height: 1.2;} .chef.main .visualCont .hexaLink li > a span { display: table-cell; width: 100%; vertical-align: middle; padding: 20px 5px 15px; } .chef.main .visualCont .hexaLink li > a:hover, .chef.main .visualCont .hexaLink li > a:focus { background: url(/img/main/chef/bg_hexa_link_on.png) no-repeat 0 0; color: #fff; } /* 기업금융정보 메인화면 메뉴 */ .chefMenuFull { position: absolute; bottom:-40px; left: 0; right: 0; z-index: 10;} .chef.main .shadowBox { width: 1132px; margin: 0 auto;box-shadow: 5px 4px 5px rgba(0,0,0,0.07); position: relative; } .chef.main .shadowBox:after { content: ""; background: url(/img/main/chef/img_chef_edge.png) no-repeat 0 0; z-index: 1; width: 37px; height: 46px; position: absolute; bottom: -8px; right: -8px; } .chefMenu { width: 1132px; overflow: hidden; border-radius: 8px; } .chefMenu > ul {position: relative; left:0; transition: left 0.2s ease-in-out} .chef.main .chefMenu > ul:after { content: ""; clear: both; display: block; } .chefMenu > ul > li { width: 283px; float: left; box-sizing: border-box; position: relative; transition: all 0.2s ease-in-out;} .chefMenu a { display: block; height:100%; box-sizing: border-box; padding: 30px 20px 30px 30px; background-color: #fff; position: relative; transition: all 0.35s ease-in-out; min-height: 120px;} .chefMenu a > span.num { padding-bottom: 10px; display: block; color: #333; font-size: 20px; position: relative; z-index: 1; } .chefMenu a > strong { padding-bottom: 10px; display: block; position: relative; z-index: 1; } .chefMenu a > span.more { line-height: 1.4; width: 20px; height: 20px; color: #fff; position: absolute; bottom: 30px; left: 30px; background: url(/img/main/chef/ico_arrow_gray.png) no-repeat center 50%; z-index: 1; } .chefMenu a > span.more em { position: absolute !important; overflow: hidden; margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; clip: rect(0 0 0 0); } .chefMenu a:before { content: ""; border-right: #d2d2d2 1px solid; position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; } .chefMenu .hidTxt {height: 205px; position: relative; z-index: 1; } .chefMenu > ul > li:first-child > a:before { border: none; } .chefMenu > ul > li > a > * {/*transition: color 0.3s ease-out*/} .chefMenu a:hover, .chefMenu a:focus, .chefMenu a.on { color: #fff; } .chefMenu a:after {content: ""; position: absolute; top: 100%; bottom:0; left: 0; right: 0; background-color: #0063cc; z-index: 0; transition: all 0.2s ease-out} .chefMenu a:hover:after, .chefMenu a:focus:after, .chefMenu a.on:after {top: 0;} .chefMenu a:hover:before, .chefMenu a:focus:before, .chefMenu a.on:before { border:none; } .chefMenu a:hover > span.num, .chefMenu a:focus > span.num, .chefMenu a.on > span.num { color: #fff; } .chefMenu a:hover > strong, .chefMenu a:focus > strong, .chefMenu a.on > strong { color: #fff; } .chefMenu a:hover .hidTxt, .chefMenu a:focus .hidTxt { color:#fff; } .chefMenu a:hover > span.more, .chefMenu a:focus > span.more, .chefMenu a.on > span.more { width: auto; padding-right: 22px; background: none; } .chefMenu a:hover > span.more:after, .chefMenu a:focus > span.more:after, .chefMenu a.on > span.more:after { content: ''; position: absolute; width: 14px; height: 11px; top: 5px; left: auto; right: 0; background: url(/img/main/chef/ico_arrow_white.png) no-repeat right 50%; z-index: 1; -webkit-animation: arrmotion 0.6s ease-in-out infinite; animation: arrmotion 0.6s ease-in-out infinite; } .chefMenu a:hover > span.more em, .chefMenu a:focus > span.more em, .chefMenu a.on > span.more em { position: static !important; overflow: auto; margin: 0; width: auto; height: auto; clip: auto; } .chefMenu a > span.num { display: none; } /* 컨트롤버튼 */ .chefMenu .btnPrev, .chefMenu .btnNext { position: absolute; top:40%; width:60px; height: 60px; margin-top:-30px; z-index: 100; min-width: 0; padding:0; background: transparent url(/img/common/img_common.png) no-repeat -260px -115px; border:1px solid rgba(210,210,210,0); transition: border-color 0.15s ease-out, background-color 0.15s ease-out} .chefMenu .btnNext {background-position: -320px -115px; } .chefMenu .btnNext { right: -70px; } .chefMenu .btnPrev { left: -70px; } .chefMenu .btnPrev:hover, .chefMenu .btnNext:hover, .chefMenu .btnPrev:focus, .chefMenu .btnNext:focus {background-color: rgba(255,255,255,0.4); border-color: rgba(210,210,210,1);} .chefMenu .btnPrev[disabled]:hover, .chefMenu .btnNext[disabled]:hover {background-color: transparent; border-color:rgba(210,210,210,0);} /*.chefMenu .swiper-controls {position:absolute; display:inline-block; bottom:-45px; width:1132px; text-align: center; box-sizing: border-box; z-index: 100} .chefMenu .swiper-pagination {position:static !important; display: inline-block; white-space: nowrap;}*/ /* 서브 열려있을때 */ .chefSubMode .chefMain {transform:translate(0,-30%);} .chefSubMode .chefArea {transform:translate(0,0);} /* .chefSubMode .chefMenu > ul { display: table; width: 100%; table-layout: fixed; } .chefSubMode .chefMenu > ul > li { display: table-cell; float: none; vertical-align: middle; width: 100%; } */ .chefSubMode .chefArea.leftDefSet:not(.remove) {transform:translate(100%,0);} .chefSubMode .chefArea.leftMove.remove {transition: transform 0.5s ease-in-out !important; transform:translate(-100%,0) !important; } .chefSubMode .chefArea.leftMove:not(.remove) {transition: transform 0.5s ease-in-out !important; transform:translate(0,0) !important; } .chefSubMode .chefArea.rightDefSet:not(.remove) {transform:translate(-100%,0);} .chefSubMode .chefArea.rightMove.remove {transition: transform 0.5s ease-in-out !important; transform:translate(100%,0) !important; } .chefSubMode .chefArea.rightMove:not(.remove) {transition: transform 0.5s ease-in-out !important; transform:translate(0,0) !important; } /*.chefSubMode .chefMenu > ul {width: 100% !important;}*/ /* 컨트롤버튼 */ .chefSubMode .chefMenu .btnPrev, .chefSubMode .chefMenu .btnNext, .chefSubMode .chefMenu .swiper-controls { display: none; } .chefSubMode .chefMenu > ul { display: block;} .chefMenu > ul > li.lastMotion {height: 150px;} .chefMenu.zeroSet > ul {left:0 !important;} /* 검색결과화면 CHEFMN0005 */ .totalSearch .bbs > li { padding: 20px 0 25px 0; } .chef.main .totalSearch .resultTit .total { padding-left: 0; } .chef.main .totalSearch .resultTit .total:before { display: none; } .chef.main div.titArea { margin-top: 60px; margin-bottom: 40px !important; padding-bottom: 0; } /*===================================== 금융상품몰 =====================================*/ .mt100 { margin-top: 100px; } .bm.main .kdbGoods .wrap {height: 380px; padding-bottom: 75px; margin:30px auto;} .bm.main .kdbGoods .swiper-controls {bottom: 100px; margin-right: -563px} .bm.main .kdbGoods .goodsTit{margin-bottom:5px;} .bm.main .kdbGoods .goodsImg {bottom: 75px} .bm.main .kdbGoods .goodsDes{padding-top:15px; font-size:16px;} .bm.main .shape{margin-bottom:155px;} .bm.main .shape .sectionWrap{position:relative; width:1194px; padding:0; z-index:10; /*background: url("/img/main/bm/bg_bm_body_shapbox.png") no-repeat center -11px; height: 318px; margin-top: -75px !important; z-index: 10*/} .bm.main .shape .sectionWrap:before{content:''; display:block; position:absolute; top:-82px; left:0; width:100%; height:82px; background: url("/img/main/bm/bg_bm_top_shapbox.png") no-repeat center 0;} .bm.main .shape .sectionWrap:after{content:''; display:block; position:absolute; bottom:-82px; left:0; width:100%; height:82px; background: url("/img/main/bm/bg_bm_bottom_shapbox.png") no-repeat center 0;} .bm.main .shape .sectionWrap .titArea { padding-bottom: 15px; border-bottom: #999 2px solid; margin-top: -77px; margin-bottom: 30px; } .bm.main .shape .sectionWrap .links.arr.fr{margin-top:2px;} .bm.main .shape .sectionWrap .bestList { width: auto; padding-bottom:0 !important; position: relative; overflow: hidden; } .bm.main .shape .sectionWrap .bestList:after { content: ""; border-left: #e7e7e7 1px solid; position: absolute; top: 0; bottom: 35px; left: 337px; height:100%; max-height: 200px;} .bm.main .shape .sectionWrap .bestList:before { content: ""; border-left: #e7e7e7 1px solid; position: absolute; top: 0; bottom: 35px; right: 357px; height:100%; max-height: 200px;} .bm.main .shape .sectionWrap .bestList .mallProduct { position: relative; padding-bottom: 0; } .bm.main .shape .sectionWrap .bestList .mallProduct .infoTit { padding-right: 60px; height: 54px; padding-bottom: 0; } .bm.main .shape .sectionWrap .bestList .mallProduct .infoFigure { position:static; bottom: 0; padding: 30px 0 0 0; } .bm.main .shape .sectionWrap .bestList .mallProduct .infoFigure strong{display:block; padding-left:0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .bm.main .shape .shapeCont{height:auto; padding: 35px 69px; box-sizing:border-box; background: url("/img/main/bm/bg_bm_body_shapbox.png") no-repeat -7px 0;} .bm.main .shape .shapeCont.new{padding: 35px 69px 0 69px;} .bm.main .shape .shapeCont.new .titArea{padding-top:15px; margin-top: -37px; border-top:2px solid #999; } .bm.main .bestList .shapeBox .mallProduct .infoFigure strong{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .bm.main .bestList .shapeBox .mallProduct .infoFigure strong span{font-size: 24px;} .bm.main .fitArea { text-align: center; font-size: 0; } .bm.main .fitArea ul { display: inline-block; /*overflow: hidden;*/ } .bm.main .fitArea li { float: left; width: 140px; text-align: center; position: relative; } .bm.main .fitArea li input[type="radio"] { position: absolute; top: auto; display: inline-block; opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: -10; box-sizing: border-box; vertical-align: top;} .bm.main .fitArea li input[type="radio"]+label { padding-top: 100px; padding-bottom: 30px; display: inline-block; width: 88px; text-align: center; background-repeat: no-repeat; background-position: 0 0; font-size: 18px; color: #666; cursor: pointer; } .bm.main .fitArea li.fit1 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit01.png"); } .bm.main .fitArea li.fit2 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit02.png"); } .bm.main .fitArea li.fit3 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit03.png"); } .bm.main .fitArea li.fit4 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit04.png"); } .bm.main .fitArea li.fit5 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit05.png"); } .bm.main .fitArea li.fit6 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit06.png"); } .bm.main .fitArea li.fit7 input[type="radio"]+label { background-image: url("/img/main/bm/ico_bm_fit07.png"); } .bm.main .fitArea li.fit1 input[type="radio"]+label:hover, .bm.main .fitArea li.fit1 input[type="radio"]:focus+label, .bm.main .fitArea li.fit1 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit01_on.png");} .bm.main .fitArea li.fit2 input[type="radio"]+label:hover, .bm.main .fitArea li.fit2 input[type="radio"]:focus+label, .bm.main .fitArea li.fit2 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit02_on.png");} .bm.main .fitArea li.fit3 input[type="radio"]+label:hover, .bm.main .fitArea li.fit3 input[type="radio"]:focus+label, .bm.main .fitArea li.fit3 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit03_on.png");} .bm.main .fitArea li.fit4 input[type="radio"]+label:hover, .bm.main .fitArea li.fit4 input[type="radio"]:focus+label, .bm.main .fitArea li.fit4 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit04_on.png");} .bm.main .fitArea li.fit5 input[type="radio"]+label:hover, .bm.main .fitArea li.fit5 input[type="radio"]:focus+label, .bm.main .fitArea li.fit5 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit05_on.png");} .bm.main .fitArea li.fit6 input[type="radio"]+label:hover, .bm.main .fitArea li.fit6 input[type="radio"]:focus+label, .bm.main .fitArea li.fit6 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit06_on.png");} .bm.main .fitArea li.fit7 input[type="radio"]+label:hover, .bm.main .fitArea li.fit7 input[type="radio"]:focus+label, .bm.main .fitArea li.fit7 input[type="radio"]:checked+label { background-image: url("/img/main/bm/ico_bm_fit07_on.png");} .bm.main .fitArea li input[type="radio"]:checked+label { color: #0063cc; } .bm.main .fitArea li input[type="radio"]:checked+label:after { content: ""; width: 18px; height: 18px; background-color: #cae1ef; position: absolute; bottom: -9px; left: 50%; margin-left: -9px; transform: rotate(45deg); } /* 20.04.23 접근성추가(정현아)*/ .bm.main .fitArea li.fit1 input[type="radio"]:focus+label, .bm.main .fitArea li.fit2 input[type="radio"]:focus+label, .bm.main .fitArea li.fit3 input[type="radio"]:focus+label, .bm.main .fitArea li.fit4 input[type="radio"]:focus+label, .bm.main .fitArea li.fit5 input[type="radio"]:focus+label, .bm.main .fitArea li.fit6 input[type="radio"]:focus+label, .bm.main .fitArea li.fit7 input[type="radio"]:focus+label, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="checkbox"]:focus+label, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="radio"]:focus+label {outline:1px dotted #999 !important;} .bm.main .fitSearch { position:relative; text-align:center; background-color: #cae1ef; padding: 40px 0; } .bm.main .fitSearch .sectionWrap { padding-left: 40px; padding-right: 40px; box-sizing: border-box; } .bm.main .fitSearch .sectionWrap .row { background: url(/img/temp/main/bg_bm_search_line.png) no-repeat center bottom; } .bm.main .fitSearch .sectionWrap .terms { position: relative; } .bm.main .fitSearch .sectionWrap .terms > strong { position: absolute; top: 4px; left: 10px; } .bm.main .fitSearch .sectionWrap .terms .termsList { padding-left: 76px; /*overflow: hidden;*/ } .bm.main .fitSearch .sectionWrap .terms .termsList input[type="checkbox"], .bm.main .fitSearch .sectionWrap .terms .termsList input[type="radio"] { position: absolute; top: auto; display: inline-block; opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: -10; box-sizing: border-box; vertical-align: top;} .bm.main .fitSearch .sectionWrap .terms .termsList input[type="checkbox"]+label, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="radio"]+label { display: inline-block; float: left; height: 30px; line-height: 30px; margin-right: 10px; margin-bottom: 10px; padding: 0 15px; border: 1px solid #acbfcb; border-radius: 15px; cursor: pointer; } .bm.main .fitSearch .sectionWrap .terms .termsList input[type="checkbox"]:focus+label, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="checkbox"]+label:hover, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="radio"]:focus+label, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="radio"]+label:hover { border-color: #0063cc; color: #0063cc; } .bm.main .fitSearch .sectionWrap .terms .termsList input[type="checkbox"]:checked+label, .bm.main .fitSearch .sectionWrap .terms .termsList input[type="radio"]:checked+label { border-color: #0063cc; background-color: #0063cc; color: #fff; } .bm.main .fitSearch .sectionWrap .search { position:relative; display:inline-block; box-shadow:5px 5px 5px rgba(0,0,0,0.07); margin-top: 20px; } .bm.main .fitSearch .sectionWrap .search:after { content:""; display:block; clear:both} .bm.main .fitSearch .sectionWrap .search .ipt { height:70px; line-height:58px; padding: 0 30px; font-size: 18px; } .bm.main .fitSearch .sectionWrap .search > .delete { float:left; position:relative; width:890px} .bm.main .fitSearch .sectionWrap .search > .delete > .ipt { width:100%; border:none; border-radius: 8px 0 0 8px; } .bm.main .fitSearch .sectionWrap .search > .delete .icoBtn { top: 15px; } .bm.main .fitSearch .sectionWrap .search > .btnSearchWrap{ position:relative; float:left; height:70px; border-radius:0 8px 8px 0; background-color:#4b4e68; } .bm.main .fitSearch .sectionWrap .search > .btnSearchWrap:after{ content:""; position:absolute; bottom:-17px; right:-16px; width:30px; height:38px; background:url(/img/main/bm/img_bm_search_edge.png) no-repeat 0 0;} .bm.main .fitSearch .sectionWrap .search > .btnSearchWrap .btnSearch{ display:inline-block; width: 162px; height:70px; line-height:70px; background-color:#4b4e68; border-radius:0 8px 8px 0; } .bm.main .fitSearch .sectionWrap .search > .btnSearchWrap .btnSearch span{ font-size: 20px; display:inline-block; padding-left:35px; background:url(/img/main/bm/ico_bm_search.png) no-repeat 0 center;} .bm.main .boldBox{margin-top:60px; margin-bottom: 100px;} .bm.main .boldBox .list > li{width:224px; } .bm.main .boldBox .list > li a { font-size: 18px; padding-left: 40px; } .bm.main .boldBox .list > li.lc1 a { background: url("/img/temp/main/ico_bm_lc01.png") no-repeat 0 -1px; } .bm.main .boldBox .list > li.lc2 a { background: url("/img/temp/main/ico_bm_lc02.png") no-repeat 0 -1px; } .bm.main .boldBox .list > li.lc3 a { background: url("/img/temp/main/ico_bm_lc03.png") no-repeat 0 -1px; } .bm.main .boldBox .list > li.lc4 a { background: url("/img/temp/main/ico_bm_lc04.png") no-repeat 0 -1px; } .bm.main .boldBox .list > li.lc5 a { background: url("/img/temp/main/ico_bm_lc05.png") no-repeat 0 -1px; } .bm.main .boldBox .txtHover:hover:after, .bm.main .boldBox .txtHover:focus:after { left: 40px; } .bm.main .recommendList > li .mallProduct[class*=Bg]{padding: 25px 30px;} .bm.main .recommendList > li .mallProduct .infoTit { padding-bottom: 7px; } .bm.main .recommendList > li .mallProduct .infoFigure {bottom:140px;} .bm.main .recommendList > li.on .mallProduct .infoFigure {bottom:77px;} .recommend {position: relative; margin:40px 0 60px;} .recommend.slide .swiper-controls { bottom: auto; top: 0; right: 0; width: auto; } .recommendList {height:360px; margin-left: -10px; margin-right: -10px;} .recommendList:after { content: ""; clear: both; display: table; } .recommendList > li { float: left; padding-left: 10px; padding-right: 10px; width: 288px; box-sizing: border-box; transition: all 0.3s ease-out} .recommendList > li .mallProduct[class*=Bg] {position:relative; min-height: 360px; box-sizing: border-box; position: relative; padding: 30px; border-radius: 8px; border: rgba(0,0,0,0.08) 1px solid; overflow: hidden;} .recommendList > li .mallProduct .infoTit { padding-bottom: 15px; } .recommendList > li .mallProduct .infoTit a { font-size: 20px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; max-height: 54px; -webkit-line-clamp:2; transition: all 0.35s ease-out} .recommendList > li .mallProduct .infoTit a:hover, .recommendList > li .mallProduct .infoTit a:focus {color: #333;} .recommendList > li .mallProduct .txt {opacity: 0; width:316px; margin-top:-20px; transition: all 0.35s ease-out} .recommendList > li .mallProduct .infoFigure { position: absolute; left:30px; bottom: 156px; padding: 0; line-height: 2em; transition: all 0.35s ease-out;} .recommendList > li .mallProduct .infoFigure strong { display: block; padding-left: 0; } .recommendList > li .mallProduct .infoFigure strong span { font-size: 28px; transition: all 0.35s ease-out} .mallProduct[class*=Bg]:after {content: ''; position: absolute; width: 170px; height: 170px; right: -630px; bottom: 30px; opacity: 1; transition: all 0.37s ease-out;} .mallProduct.depositBg:after {background: url(/img/common/cnt/ico_recom_goods_deposit.png) no-repeat 0 0;} .mallProduct.loanBg:after {background: url(/img/common/cnt/ico_recom_goods_loan.png) no-repeat 0 0;} .mallProduct.bondBg:after {background: url(/img/common/cnt/ico_recom_goods_trust.png) no-repeat 0 0;} .mallProduct.insurBg:after {background: url(/img/common/cnt/ico_recom_goods_insur.png) no-repeat 0 0;} .mallProduct.cardBg:after {background: url(/img/common/cnt/ico_recom_goods_card.png) no-repeat 0 0;} .mallProduct.fundBg:after {background: url(/img/common/cnt/ico_recom_goods_fund.png) no-repeat 0 0;} .mallProduct.pensionBg:after {background: url(/img/common/cnt/ico_recom_goods_pension.png) no-repeat 0 0;} .recommendList > li.on { width: 576px; } .recommendList > li.on .mallProduct .infoTit a { font-size: 24px; display: block; max-height: none; } .recommendList > li.on .mallProduct .txt { opacity:1; margin-top:0px;} .recommendList > li.on .mallProduct .infoFigure { bottom: 77px; left: 30px;} .recommendList > li.on .mallProduct .infoFigure strong span { font-size: 34px; } .recommendList > li.on .mallProduct[class*=Bg]:after {right: 30px} .recommend.slide .btnPrev {left: -70px;} .recommend.slide .btnNext {right: -70px;} .recommendList.slideMode {position: relative; margin-left: 0px; margin-right: 0px; overflow: hidden; width:100%; } .recommendList.slideMode > li {left: -1132px} .recommendList.slideMode > li {position:absolute; float: none; top:0;} .recommendList.slideMode > li.tempLeft {left:-318px; } .recommendList.slideMode > li.left {left:-10px; opacity: 1;} .recommendList.slideMode > li.on {left:278px; opacity: 1;} .recommendList.slideMode > li.right {left:854px; opacity: 1;} .recommendList.slideMode > li.tempRight {left:1162px;} .recommendList.slideMode > li[class*=temp] {opacity: 0;} /* 가입 중 상품 */ .bm .fxBox{display:none; position:fixed; top:470px; left:50%; margin-left: 260px; width:230px; padding:25px 15px 25px 20px; box-sizing:border-box; background-color:#4960eb; border-radius:8px; text-align: center; box-shadow: 4px 4px 4px rgba(0,0,0,0.07); z-index:99; } .bm .fxBox.active{display:block;} .bm .fxBox .fxHeader{position:relative;} .bm .fxBox .fxHeader .fxtit{display:block; line-height:1.3; font-size:20px; color:#fff; text-align: left; font-weight:bold;} .bm .fxBox .fxHeader .fxBtnClose{content:''; position:absolute; top:5px; right:10px; width:15px; height:15px;background: url(../img/common/ico_call_end.png) no-repeat center; background-size:15px;} .bm .fxBox span{position:relative; display:block; padding:15px 0 25px 0; line-height:1.3; font-size:15px; color:#fff; text-align: left;} .bm .fxBox span:after{content:''; position:absolute; top:14px; right:3px; width:70px; height:62px; background: url(/img/main/bm/img_kkgom_fixed.png) no-repeat 0 0; background-size:70px;} .bm .fxBox .fxBtnLink{width: 170px;padding:8px 0;background-color:#fff;font-size: 16px;color:#333;border-radius: 30px;font-weight:bold;} /*===================================== PB =====================================*/ .cbps.main .visualFrame, .cbps.main .sectionWrap {height:754px;} .cbps.main .copyArea{ position:relative;} .cbps.main .copyArea .titH1 {font-size:58px; text-align: center; margin-top: 10px; } .cbps.main .copyArea .subTxt {font-size:24px; text-align: center; } .cbps.main .keyContents{bottom:100px; border-radius:8px 8px; background:#121b3d; box-shadow:5px 5px 5px rgba(0,0,0,0.07)} .cbps.main .keyContents:after{content:""; display:block; clear:both} .cbps.main .goList li{width:144px;} .cbps.main .goList li > a{height:120px; padding-top:75px; position: relative;} .cbps.main .goList li > a:after{content: ''; display: block; position: absolute; width:40px; height:40px; left:50%; top:23px; margin-left:-20px;background: url(/img/common/img_sub_main.png) no-repeat -338px -525px} .cbps.main .goList li > a.icoGo2:after{background-position:-379px -525px} .cbps.main .goList li > a.icoGo3:after{background-position:-420px -525px} .cbps.main .goList li > a.icoGo4:after{background-position:-461px -525px } .cbps.main .goList li > a:hover, .cbps.main .goList li > a:focus{background-color:#293250} .cbps.main .goList li a:hover:after, .cbps.main .goList li a:focus:after{border-bottom:0} .cbps.main .goList li a > span:after{border-bottom: 1px solid #fff;} .cbps.main .notiWrap {float:right; width:556px; height:120px; border-radius:0 8px 8px 0; background:#725c5c; padding: 28px 30px; box-sizing: border-box; position: relative; margin-top: 0;} .cbps.main .notiCont {margin-top: 0; width: 100%;} .cbps.main .notiCont .tit {display:block; font-size: 18px; vertical-align:top; padding-bottom: 15px; line-height: 22px;} .cbps.main .notiCont .tit:after {content: none;} .cbps.main .notiCont .control {top: auto; bottom: 5px} /*===================================== 소비자보호/고객센터 =====================================*/ .co.main .searchCont{position:relative; text-align:center} .co.main .searchCont .tit{margin:65px 0 35px; font-size:34px; color:#333; } .co.main .searchCont .search{position:relative; display:inline-block; box-shadow:5px 5px 5px rgba(0,0,0,0.07)} .co.main .searchCont .search:after{content:""; display:block; clear:both} .co.main .searchCont .search .ipt{height:60px; line-height:58px; } .co.main .searchCont .search .ipt:focus{position:relative; z-index:2} .co.main .searchCont .search > select.ipt{float:left; border-radius:4px 0 0 4px; width:170px; font-size:18px; color:#003895} .co.main .searchCont .search > input.ipt{float:left; position:relative; width:470px; border-left:0; border-right:0; border-radius:0} .co.main .searchCont .search > .btnSearchWrap{position:relative; float:left; height:60px; border-radius:0 4px 4px 0; background-color:#0063cc} .co.main .searchCont .search > .btnSearchWrap:after{content:""; position:absolute; bottom:-15px; right:-15px; width:30px; height:36px; background:url(/img/main/co/bg_co_edge.png) no-repeat 0 0;} .co.main .searchCont .search > .btnSearchWrap .btnSearch{display:inline-block; height:60px; line-height:60px; background-color:#0063cc} .co.main .searchCont .search > .btnSearchWrap .btnSearch span{display:inline-block; padding-left:35px; background:url(/img/main/co/ico_btn_search.png) no-repeat 0 center;} .co.main .searchCont .keyword{margin-top:15px; display:inline-block; } .co.main .searchCont .keyword:after{content:""; display:block; clear:both} .co.main .searchCont .keyword > .item{display:inline-block; float:left; height:30px; line-height:30px; margin-left:10px; padding:0 18px; border:1px solid #d2d2d2; border-radius:15px;background:#f5f5f5} .co.main .searchCont .keyword > .item:first-child{margin-left:0} .co.main .searchCont .keyword > .item:hover, .co.main .searchCont .keyword > .item:focus{border-color:#0063cc; color:#0063cc} .co.main .listCont{position:relative; margin-top:60px} .co.main .listCont .txtHover{position:relative; word-break: break-all; overflow:hidden} .co.main .listCont .txtHover:hover:after, .co.main .listCont .txtHover:focus:after{border-bottom:0} .co.main .listCont .txtHover > span{position:relative; display:inline; padding-right:15px; background:url(/img/main/co/ico_co_arr.png) no-repeat center right} .co.main .listCont .txtHover > span:after, .co.main .listCont .txtHover:before{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;} .co.main .listCont .txtHover:before{position:absolute; left:0; bottom: 26px;} .co.main .listCont .txtHover:hover > span, .co.main .listCont .txtHover:focus > span{background:url(/img/main/co/ico_co_arr_hover.png) no-repeat center right} .co.main .listCont .txtHover:hover > span:after, .co.main .listCont .txtHover:focus > span:after{left:0; right: 0; width:auto} .co.main .listCont .txtHover:hover:before, .co.main .listCont .txtHover:focus:before {width:auto; left:0; right:10px;} .co.main .listCont .shapeBox{min-height:280px; padding:35px 30px 35px 40px; box-shadow: 6px 8px 10px rgba(0,0,0,0.07);} .co.main .listCont .shapeBox:after{bottom:-15px; right:-12px; width:40px; height:55px; background:url(/img/main/co/bg_box_edge.png) no-repeat 0 0} .co.main .listCont .shapeBox.bg{background-color:#f2f2f2} .co.main .listCont .shapeBox.bg:after{background:url(/img/main/co/bg_box_edge_gray.png) no-repeat 0 0} .co.main .listCont .txtList > li{margin-top:0} .co.main .listCont .listS .txtList{margin-top:30px} .co.main .listCont .listS .item1{background:#fff url(/img/main/co/ico_co_1.png) no-repeat 195px 38px} .co.main .listCont .listS .item2{background:#f2f2f2 url(/img/main/co/ico_co_2.png) no-repeat 195px 38px} .co.main .listCont .listS .item3{background:#fff url(/img/main/co/ico_co_3.png) no-repeat 195px 38px} .co.main .listCont .listS .item4{background:#f2f2f2 url(/img/main/co/ico_co_4.png) no-repeat 195px 38px} .co.main .listCont .listL .infoBox.left{min-height:250px; background:#f5f7fb url(/img/main/co/ico_co_5.png) no-repeat 327px 130px} .co.main .listCont .listL .infoBox.right{min-height:250px; background:#f5f7fb url(/img/main/co/ico_co_6.png) no-repeat 327px 130px} .co.main .boldBox{margin-top:40px;} /* 보안센터 서브메인 */ .co.main.subMain > section{min-height:974px} .co.main.subMain > section.titArea { min-height: auto; width: 1132px !important; position: absolute !important; top: 0; left: 50%; margin: 0 0 0 -566px !important; z-index: 1; } .co.main.subMain > section.titArea h1.titH2 { display: none !important; } .co.main.subMain .copyArea .titH2{color:#333; } .co.main.subMain .copyArea .pageUtil {position: absolute; top:20px; right:0;} .co.main.subMain .copyArea .pageUtil > li {float: left; margin-left:4px} .co.main.subMain .copyArea .pageUtil > li:first-child {margin-left: 0;} .co.main.subMain .copyArea .pageUtil button > span {position: absolute; overflow: hidden; margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; clip: rect(0 0 0 0);} .co.main.subMain .slideCont{position:relative; margin-top:80px; padding:0 30px 80px; box-sizing:border-box} .co.main.subMain .slideCont .slideWrapper{width:100%} .co.main.subMain .slideCont .slideWrapper .cardList{padding:0} .co.main.subMain .slideCont .slideWrapper .cardList > li{margin:0; padding:0 0 0 7px; box-sizing:border-box; max-width:268px;} .co.main.subMain .slideCont .cardList > li .cardWrap{width:100%; border-radius:8px; border:0; background:none !important; transition: all 0s ease-in-out;} .co.main.subMain .slideCont .cardDefault{height:350px; background:url(/img/main/co/bg_card.png) no-repeat 0 0; } .co.main.subMain .slideCont .cardOver{height:350px; padding:0; border:0; vertical-align:middle; background:url(/img/main/co/bg_card_on.png) no-repeat 0 0} .co.main.subMain .slideCont .cardList > li.on .cardWrap .cardOver:before{display:none} .co.main.subMain .slideCont .cardList > li .cardWrap .cardOver .btnCArea{margin:-10px; top:50%; bottom:auto; left:36px;right:47px;vertical-align:middle; transform: translateY(-50%)} .co.main.subMain .slideCont .cardList > li .cardWrap .cardOver .btnCArea .down.noIco{margin-top:10px; font-family:'Roboto Light', 'NotoSans Light', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-weight:normal} .co.main.subMain .slideCont .cardList > li .cardWrap .cardOver .btnCArea .down.noIco span{padding-right:0; text-align:center; background:none} .co.main.subMain .slideCont .ico{display:block; margin-right:10px; padding-top:155px; text-align:center} .co.main.subMain .slideCont .ico.ico1{background:url(/img/main/co/ico_co_slide1.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico2{background:url(/img/main/co/ico_co_slide2.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico3{background:url(/img/main/co/ico_co_slide3.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico4{background:url(/img/main/co/ico_co_slide4.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico5{background:url(/img/main/co/ico_co_slide5.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico6{background:url(/img/main/co/ico_co_slide6.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico7{background:url(/img/main/co/ico_co_slide7.png) no-repeat center 30px} .co.main.subMain .slideCont .ico.ico8{background:url(/img/main/co/ico_co_slide8.png) no-repeat center 30px} .co.main.subMain .slideCont .ico > strong{display:block; font-size:20px; color:#333} .co.main.subMain .slideCont .ico > span{display:block; margin-top:20px} .co.main.subMain .slideCont button.btnPrev{top:150px; margin:0; width:23px; height:41px; background:url(/img/main/co/btn_slide_co_prev.png) no-repeat 0 0} .co.main.subMain .slideCont button.btnNext{top:150px; margin:0; width:23px; height:41px; background:url(/img/main/co/btn_slide_co_next.png) no-repeat 0 0} .co.main.subMain .boldBox .list > li{width:25%} /*===================================== 직원광장 =====================================*/ .ce.main .sectionWrap, .ce.main .visualFrame {height:755px;} .ce.main .copyArea .txt [class*=btn].S {margin-top:-3px;} .ce.main .keyContents .item + .item, .ce.main .footArea .item + [class*=col_] {padding-left:20px;} .ce.main .keyContents .item {position:relative; background-color:#fff; padding:0 !important;} .ce.main .keyContents .item button span{color:#666} .ce.main .keyContents .item button:hover span, .ce.main .keyContents .item button:focus span{color:#0063cc} .ce.main .keyContents .item:before {content:''; position:absolute; left:-1px; top:0; bottom:0; border-left:1px solid #e7e7e7;} .ce.main .keyContents .item.first:before {content: none} .ce.main .keyContents .item.bg {background-color:#0096f1;} .ce.main .keyContents .item.bg button span, .ce.main .keyContents .item.bg button:hover span:after, .ce.main .keyContents .item.bg button:focus span:after {color:#fff; border-color:#fff;} .ce.main .keyContents .item [class*=icoMenu]:before {content:''; display:inline-block; width:40px; height:40px; margin-right:38px; vertical-align:middle;} .ce.main .keyContents .item .icoMenu1:before {background:url(/img/common/img_sub_main.png) no-repeat 0 -525px;} .ce.main .keyContents .item .icoMenu2:before {background:url(/img/common/img_sub_main.png) no-repeat -41px -525px;} .ce.main .keyContents .item .icoMenu3:before {background:url(/img/common/img_sub_main.png) no-repeat -82px -525px;} .ce.main .keyContents .item .icoMenu4:before {background:url(/img/common/img_sub_main.png) no-repeat -123px -525px;} .ce.main .footArea {color:#fff} .ce.main .footArea .rightArea .tit, .ce.main .footArea .subject, .ce.main .footArea .date {display:inline-block; vertical-align:top;} .ce.main .footArea .rightArea .tit {position:relative; margin-right:20px;} .ce.main .footArea .rightArea .tit:after {content:''; position:absolute; top:5px; bottom:2px; right:-14px; border-right:1px solid #fff; opacity:0.2;} .ce.main .footArea .nowrap {max-width:60%; overflow:hidden; text-overflow:ellipsis;} .ce.main .footArea .subject, .ce.main .footArea .txt {margin-right:10px;} /*===================================== 유가증권 수탁 =====================================*/ .cp.main .sectionWrap, .cp.main .visualFrame {height:754px;} .cp.main .copyArea{ position:relative; padding-top:110px; } .cp.main .copyArea .subTxt {line-height: 1.7;} .cp.main .keyContents{bottom:100px;} .cp.main .keyContents .item {background-color: #fff; box-sizing: border-box;} .cp.main .keyContents .item + .item {border-left:1px solid #d2d2d2;} .cp.main .keyContents .item:not(.item1), .cp.main .keyContents a {display:block; height:140px; text-align:center; padding:24px 0 0 0;} .cp.main .keyContents a:hover, .cp.main .keyContents a:focus{background:#f8f8f8} .cp.main .keyContents a strong, .cp.main .keyContents .item:not(.item1) strong {position:relative; display: inline-block; text-align: center; color: #333; font-size: 20px; } .cp.main .keyContents a strong:after{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;} .cp.main .keyContents a:hover strong, .cp.main .keyContents a:focus strong{color:#0063cc;} .cp.main .keyContents a:hover strong:after, .cp.main .keyContents a:focus strong:after{left:0; right: 0; width:auto} .cp.main .keyContents a span, .cp.main .keyContents .item:not(.item1) span {display:block; text-align: center; color: #666; padding-top: 10px; height: 46px;} .cp.main .keyContents a span:after{display:none} .cp.main .keyContents a:hover span, .cp.main .keyContents a:focus span{color:#0063cc;} .cp.main .keyContents .item.first a{border-top-left-radius:6px; border-bottom-left-radius:6px;} .cp.main .keyContents .item.last {border-top-right-radius:6px; border-bottom-right-radius:6px;} .cp.main .keyContents .item .links{display:inline-block; padding:0; padding-right:23px; width: auto; height: auto; color: #0063cc;} .cp.main .keyContents .item a:hover .links.arr:before, .cp.main .keyContents .item a:focus .links.arr:before {-webkit-animation: arrmotion 0.6s ease-in-out infinite; animation: arrmotion 0.6s ease-in-out infinite;} /*===================================== Business Leaders Forum =====================================*/ .cl.main .visualFrame, .cl.main .sectionWrap {height:754px;} .cl.main .visualFrame.cover .visualList:before {background:#273360;} .cl.main .copyArea {position:relative; } .cl.main .copyArea:after{content:""; display:block; clear:both} .cl.main .copyArea .left, .cl.main .copyArea .right{float:left; width:50%; box-sizing:border-box} .cl.main .copyArea .subTxt {font-size:16px; padding-bottom: 25px;} .cl.main .copyArea h2{width:262px; height:228px; background:url(/img/common/img_sub_main.png) no-repeat -0px -701px} .cl.main .keyContents .goList li{position:relative; float:left;margin-left:18px; width:210px;height:130px; overflow:hidden; border-radius:4px} .cl.main .keyContents .goList li:first-child{margin-left:0;} .cl.main .keyContents .goList li > a{width:210px; height:130px; text-align:left; font-size:18px; } .cl.main .keyContents .goList li > a:before{content:""; display:block; position:absolute; top:0; left:0; width:210px; height:130px; transition:all ease-in-out 0.3s; z-index:1} .cl.main .keyContents .goList li > a:after{content:""; display:block; position:absolute; top:0; left:0; width:210px; height:130px; transition:all ease-in-out 0.3s; background:#b17943; opacity:0.5; z-index:2} .cl.main .keyContents .goList li > a:hover:after, .cl.main .keyContents .goList li > a:focus:after{background:#5e3914; opacity:0.8;} .cl.main .keyContents .goList li > a span{position:relative; display:inline-block; width:100%; height:100%; padding:80px 0 0 28px; box-sizing:border-box; z-index:3} .cl.main .keyContents .goList li > a span:after{display:none} .cl.main .keyContents .goList li > a.icoGo1:before{background:url(/img/common/img_sub_main.png) no-repeat -0px -570px} .cl.main .keyContents .goList li > a.icoGo2:before{background:url(/img/common/img_sub_main.png) no-repeat -211px -570px} .cl.main .keyContents .goList li > a.icoGo3:before{background:url(/img/common/img_sub_main.png) no-repeat -422px -570px} .cl.main .keyContents .goList li > a.icoGo4:before{background:url(/img/common/img_sub_main.png) no-repeat -633px -570px} .cl.main .keyContents .progArea{height:130px} .cl.main .keyContents .progArea .overviewArea{height:130px; padding-top:57px} .cl.main .keyContents .progArea .box{height:130px; border-radius:4px; background:linear-gradient(-106deg,#906539,#b99066,#906539);} /*===================================== 은행소개 =====================================*/ .chbi.main .visualFrame {overflow:hidden; height:700px;} .chbi.main .visualFrame .anniversary {display: block; position:absolute; top:0; left:50%; width:233px; height: 206px; margin-left:-890px;} .chbi.main .sectionWrap {height:955px;} .chbi.main .sectionWrap .copyArea {padding-top:114px;} .chbi.main .sectionWrap .copyArea .titH4 {color:#003895} .chbi.main .sectionWrap .copyArea .txt {color:#666;} .chbi.main .keyContents {bottom:144px;} .chbi.main .keyContents .item {height:270px; background:#fff; box-sizing: border-box; overflow: hidden; box-shadow: 15px 15px 30px rgba(0,0,0,0.1);} .chbi.main .keyContents .linkWrap {display:block; position:relative; width:100%; height:inherit; padding:40px; box-sizing: border-box;} .chbi.main .keyContents .linkWrap .category {position: relative; width:auto; height:auto; padding-bottom: 10px; color:#fff; opacity: 0.6;} .chbi.main .keyContents .linkWrap .category:after {display: block; position:absolute; left:0; bottom:0; content: ''; width:22px; height:2px;} .chbi.main .keyContents .linkWrap .tit, .chbi.main .keyContents .linkWrap .txt{display: block; width:auto; height:auto; } .chbi.main .keyContents .linkWrap:hover .links:before, .chbi.main .keyContents .linkWrap:focus .links:before { -webkit-animation: arrmotion 0.6s ease-in-out infinite; animation: arrmotion 0.6s ease-in-out infinite; } .chbi.main .keyContents .item1 {background:url("/img/main/chbi/bg_item1.png") center center / cover no-repeat; color:#fff;} .chbi.main .keyContents .item1 .linkWrap {background:rgba(0,56,149,0.9);} .chbi.main .keyContents .item1 .linkWrap .category:after {background-color:rgba(250,250,250,0.2);} .chbi.main .keyContents .item1 .linkWrap .links{display:inline-block; width:auto; height:auto; margin-top:15px; color:#fff} .chbi.main .keyContents .item1 .linkWrap .links:after{display:none} .chbi.main .keyContents .item1 .linkWrap:hover .links, .chbi.main .keyContents .item1 .linkWrap:focus .links{color:#fff} .chbi.main .keyContents .item1 .linkWrap:hover .links > i:after, .chbi.main .keyContents .item1 .linkWrap:focus .links > i:after {border-color: #fff} .chbi.main .keyContents .item1 .linkWrap .links.arr:before, .chbi.main .keyContents .item1 .linkWrap .links.arr i:before{background: url(../img/main/ico_arrow_white.png) no-repeat 0;} .chbi.main .keyContents .item2 {padding:30px;} .chbi.main .keyContents .item2 li {float:left; width:50%; height:100px; box-sizing: border-box;} .chbi.main .keyContents .item2 li a {position:relative; display: block; padding:0; text-align:center; color:#666} .chbi.main .keyContents .item2 li a:before{content:""; position:absolute; top:0; left:50%; margin-left:-33px; width:66px; height: 70px; background:url(/img/main/chbi/ico_frame_white.png) no-repeat 0 0; z-index:1} .chbi.main .keyContents .item2 li a:hover, .chbi.main .keyContents .item2 li a:focus{color:#0063cc} .chbi.main .keyContents .item2 li a .ico{position:absolute; top:0; left:50%; margin-left:-33px; width:66px; height: 70px; overflow:hidden; } .chbi.main .keyContents .item2 li a .ico:before {display: block; content:''; position:absolute; top:0; left:0; width:66px; height: 70px; background-image: url("/img/main/chbi/ico_items.png"); background-color:#eff1f3; transition: all 0.25s ease-out;} .chbi.main .keyContents .item2 li a .ico:after{display: block; content:''; position:absolute; top:70px; left:0; width:66px; height: 70px; background-image: url("/img/main/chbi/ico_items.png"); background-color:#0063cc; transition: all 0.25s ease-out;} .chbi.main .keyContents .item2 li.link1 a .ico:before{background-position: 0 0;} .chbi.main .keyContents .item2 li.link2 a .ico:before{background-position: -71px 0;} .chbi.main .keyContents .item2 li.link3 a .ico:before{background-position: -142px 0;} .chbi.main .keyContents .item2 li.link4 a .ico:before{background-position: -213px 0;} .chbi.main .keyContents .item2 li.link1 a .ico:after{background-position: 0 -70px;} .chbi.main .keyContents .item2 li.link2 a .ico:after{background-position: -71px -70px;} .chbi.main .keyContents .item2 li.link3 a .ico:after{background-position: -142px -70px;} .chbi.main .keyContents .item2 li.link4 a .ico:after{background-position: -213px -70px;} .chbi.main .keyContents .item2 li a:hover .ico:before, .chbi.main .keyContents .item2 li a:focus .ico:before{top:-70px} .chbi.main .keyContents .item2 li a:hover .ico:after, .chbi.main .keyContents .item2 li a:focus .ico:after{top:0} .chbi.main .keyContents .item2 li a span {position:relative; display: inline-block; position: relative; padding-top:75px;} .chbi.main .keyContents .item2 li a span:after{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;} .chbi.main .keyContents .item2 li a:hover span:after, .chbi.main .keyContents .item2 li a:focus span:after{left:0; right: 0; width:auto} .chbi.main .keyContents .item3 {border-left:1px solid #efefef;} .chbi.main .keyContents .item3 .linkWrap .category {color:#333;} .chbi.main .keyContents .item3 .linkWrap .txt{color:#666} .chbi.main .keyContents .item3 .linkWrap .category:after {background-color:#333; opacity:0.2;} .chbi.main .keyContents .item3 .linkWrap .bookImg {position: absolute; right:30px; top:36px; width:auto; height:auto;} .chbi.main .keyContents .item3 .linkWrap .links{margin-top:10px; width:auto; height:auto; color:#0063cc} .chbi.main .keyContents .item3 .linkWrap span:after{display:none} .chbi.main .keyContents .item3 a:hover span, .chbi.main .keyContents .item3 a:focus span {color:#333;} .chbi.main .footArea {bottom:70px; padding:0 10px;} .chbi.main .footArea .leftArea {width:60%;} .chbi.main .footArea .rightArea {position:relative; width:40%; padding-left:40px;} .chbi.main .footArea .rightArea:after {display:block; content: ''; position: absolute; top:-2px; bottom:0px; left:0; border-left:1px solid #ccc;} .chbi.main .footArea .notiCont {width:630px; color: #666} .chbi.main .rightArea a[class*=rm] {display:inline-block; position:relative; padding-left:34px;} .chbi.main .rightArea a + a {margin-left:44px;} .chbi.main .rightArea a[class*=rm]:before {display:block; content:''; position:absolute; top:2px; left:0; width:22px; height:22px; background: url("/img/main/chbi/ico_rm.png") no-repeat;} .chbi.main .rightArea a.rm1:before {background-position: 0 0;} .chbi.main .rightArea a.rm2:before {background-position: 0 -27px;} .chbi.main .rightArea a.rm3:before {background-position: 0 -54px; height:24px; left:2px; top:1px;} .chbi.main .rightArea a:hover, .chbi.main .rightArea a:focus{color:#0063cc} .chbi.main .rightArea a span{position:relative; display:inline-block;} .chbi.main .rightArea a span:after{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;} .chbi.main .rightArea a:hover span:after, .chbi.main .rightArea a:focus span:after{left:0; right: 0; width:auto} /* ==== subMain : IR,공시,사회공헌 ==== */ .chbi.main.subMain > section{min-height:780px} .chbi.main.subMain > section.titArea { min-height: auto; width: 1132px !important; position: absolute !important; top: 0; left: 50%; margin: 0 0 0 -566px !important; z-index: 1; } .chbi.main.subMain > section.titArea h1.titH2 { display: none !important; } .chbi.main.subMain .sectionWrap{height:auto} .chbi.main.subMain .pageUtil {position: absolute; top:20px; right:0;} .chbi.main.subMain .pageUtil > li {float: left; margin-left:4px} .chbi.main.subMain .pageUtil > li:first-child {margin-left: 0;} .chbi.main.subMain .pageUtil button > span {position: absolute; overflow: hidden; margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; clip: rect(0 0 0 0);} .chbi.main.subMain .copyArea{padding-top:70px} .chbi.main.subMain .copyArea .titH2{color:#333;} .chbi.main.subMain .copyArea .txt{color:#333;} .chbi.main.subMain .mainRow{text-align: center; margin-top:75px;} .chbi.main.subMain .mainRow .col_4{background: url(/img/main/chbi/bg_shapebox.png) no-repeat 10px 0; height: 368px;} .chbi.main.subMain .mainRow .col_3{ background:url(/img/main/chbi/bg_shapebox_s.png) no-repeat 10px 0; height: 398px; } .chbi.main.subMain .mainRow .col_3 span { height: 82px; } .chbi.main.subMain .mainRow .ico {min-height:295px; box-sizing: border-box; padding-top: 145px; } .chbi.main.subMain .mainRow .ico strong {display: block; font-size: 20px; color: #333; } .chbi.main.subMain .mainRow .ico span {display: block; font-size: 16px; color: #666; height: 50px; padding-top: 10px;} /* IR */ .chbi.main.subMain .mainRow.ir .ico.icoGo1 {background:url(/img/main/chbi/ico_ir_1.png) no-repeat center 30px} .chbi.main.subMain .mainRow.ir .ico.icoGo2 {background:url(/img/main/chbi/ico_ir_2.png) no-repeat center 30px} .chbi.main.subMain .mainRow.ir .ico.icoGo3 {background:url(/img/main/chbi/ico_ir_3.png) no-repeat center 30px} /* 공시 */ .chbi.main.subMain .mainRow.pa .ico.icoGo1 {background:url(/img/main/chbi/ico_pa_1.png) no-repeat center 30px} .chbi.main.subMain .mainRow.pa .ico.icoGo2 {background:url(/img/main/chbi/ico_pa_2.png) no-repeat center 30px} .chbi.main.subMain .mainRow.pa .ico.icoGo3 {background:url(/img/main/chbi/ico_pa_3.png) no-repeat center 30px} #content.chbi .footNote {max-width: 1132px; bottom:-157px} /* 사회공헌 */ .chbi.main.subMain .mainRow.sc .img{display:block; margin:20px 20px 25px 20px; height:120px;} .chbi.main.subMain .mainRow.sc .txt{min-height:150px; } .chbi.main.subMain .mainRow.sc .txt strong {display: block; font-size:20px; color: #333; } .chbi.main.subMain .mainRow.sc .txt span {display: block; font-size:16px; color: #666; height: 50px; padding-top: 10px;} /*===================================== Global =====================================*/ .chgl.main .visualFrame {overflow:hidden; height:544px;} .chgl.main .visualFrame .anniversary {display: block; position:absolute; top:0; left:50%; width:233px; height: 206px; margin-left:-890px;} .chgl.main .visualFrame + .sectionWrap {height:364px;} .chgl.main .sectionWrap .copyArea {padding-top:80px;} .chgl.main .sectionWrap .copyArea .titH4 {color:#fff} .chgl.main .sectionWrap .copyArea .subTxt {color:#fff;} .chgl.main .directMenu {position:relative; height:318px; margin-top:0; margin-bottom:-37px; background:url(/img/main/chgl/bg_chgl_content.png) no-repeat center -11px; z-index:2; float: none; margin-right: auto;} .chgl.main .directMenu .sectionWrap {display:table; height:270px; box-sizing:border-box;} .chgl.main .directMenu .sectionWrap .box {display:table-cell; padding: 0 30px 0 30px; vertical-align: middle; box-sizing: border-box;} .chgl.main .directMenu .sectionWrap .box.ac {width:768px;} .chgl.main .directMenu .box.ac .icoList {display:inline-block; max-width:100%; width: 100%; } .chgl.main .directMenu .box.ac .icoList:after {content:''; display:block; clear:both;} .chgl.main .directMenu .box.ac .icoList li {float:left; width:16.66%; margin-top: 20px; box-sizing:border-box;} .chgl.main .directMenu .box.ac .icoList li a {position:relative; display:inline-block; max-width:100%; padding:0 0 0 0; overflow:hidden;} .chgl.main .directMenu .box.ac .icoList li a:before {content:''; position:absolute; top:0; left:0; right:0; height:70px; z-index:1; background:url(/img/main/chgl/bg_chgl_frame.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li a:hover, .chgl.main .directMenu .box.ac .icoList li a:focus {color:#0063cc; transition: all 0.25s ease-in-out;} .chgl.main .directMenu .box.ac .icoList li a > i {position:relative; display:block; width:66px; height:70px; margin:0 auto 5px; overflow:hidden;} .chgl.main .directMenu .box.ac .icoList li a > i:before, .chgl.main .directMenu .box.ac .icoList li a > i:after {content:''; position:absolute; top:0; left:0; width:66px; height:70px; transition: all 0.25s ease-in-out;} .chgl.main .directMenu .box.ac .icoList li a > i:after {top:70px;} .chgl.main .directMenu .box.ac .icoList li a:hover > i:before, .chgl.main .directMenu .box.ac .icoList li a:focus > i:before {top:-70px;} .chgl.main .directMenu .box.ac .icoList li a:hover > i:after, .chgl.main .directMenu .box.ac .icoList li a:focus > i:after {top:0;} .chgl.main .directMenu .box.ac .icoList li a > span {position: relative; color:#555; display: inline-block; width: auto; } .chgl.main .directMenu .box.ac .icoList li a:hover > span, .chgl.main .directMenu .box.ac .icoList li a:focus > span {color:#0063cc;} .chgl.main .directMenu .box.ac .icoList li a > span:after {content: ''; position: absolute; width:0; bottom:0; left:50%; border-bottom: 1px solid #0063cc; transition: all 0.18s; transition-timing-function:inherit;} .chgl.main .directMenu .box.ac .icoList li a:hover > span:after, .chgl.main .directMenu .box.ac .icoList li a:focus > span:after{ width: 100%; left:0;} .chgl.main .directMenu .box.ac .icoList li.ico1 a > i:before {background:#eff1f3 url(/img/main/chgl/ico_chgl_cont_01.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico1 a > i:after {background:#0063cc url(/img/main/chgl/ico_chgl_cont_01_on.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico2 a > i:before {background:#eff1f3 url(/img/main/chgl/ico_chgl_cont_02.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico2 a > i:after {background:#0063cc url(/img/main/chgl/ico_chgl_cont_02_on.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico3 a > i:before {background:#eff1f3 url(/img/main/chgl/ico_chgl_cont_03.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico3 a > i:after {background:#0063cc url(/img/main/chgl/ico_chgl_cont_03_on.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico4 a > i:before {background:#eff1f3 url(/img/main/chgl/ico_chgl_cont_04.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico4 a > i:after {background:#0063cc url(/img/main/chgl/ico_chgl_cont_04_on.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico5 a > i:before {background:#eff1f3 url(/img/main/chgl/ico_chgl_cont_05.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico5 a > i:after {background:#0063cc url(/img/main/chgl/ico_chgl_cont_05_on.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico6 a > i:before {background:#eff1f3 url(/img/main/chgl/ico_chgl_cont_06.png) no-repeat center 0;} .chgl.main .directMenu .box.ac .icoList li.ico6 a > i:after {background:#0063cc url(/img/main/chgl/ico_chgl_cont_06_on.png) no-repeat center 0;} .chgl.main .directMenu .box.bg {width:364px; padding:0 40px; color:#fff; vertical-align:middle; box-sizing: border-box; } .chgl.main .directMenu .box.bg .icoList li {display:table; width:100%; height:61px; border-top:1px solid #0056b2; box-sizing:border-box; background:none;} .chgl.main .directMenu .box.bg .icoList li:first-child {border:none;} .chgl.main .directMenu .box.bg .icoList li > div {display:table-cell; padding:0; vertical-align:middle; box-sizing:border-box;} .chgl.main .directMenu .box.bg .icoList li a {position:relative; display:inline-block; height:30px; margin-left:35px; padding-left:62px; line-height:30px; opacity: 0.5; vertical-align:top; word-break: break-all; overflow:hidden;} .chgl.main .directMenu .box.bg .icoList li a > span {position:relative;} .chgl.main .directMenu .box.bg .icoList li a > span:after {content:''; position:absolute; bottom:0; width:0; right:100%; border-bottom:1px solid #fff; transition:all 0.25s ease-out;} .chgl.main .directMenu .box.bg .icoList li a:hover, .chgl.main .directMenu .box.bg .icoList li a:focus {opacity:1;} .chgl.main .directMenu .box.bg .icoList li a:hover > span:after, .chgl.main .directMenu .box.bg .icoList li a:focus > span:after {left:0; right:0; width:auto; opacity:1;} .chgl.main .directMenu .box.bg .icoList li.ico1 div a {background:url(/img/main/chgl/ico_chgl_com_01.png) no-repeat 0 center;} .chgl.main .directMenu .box.bg .icoList li.ico2 div a {background:url(/img/main/chgl/ico_chgl_com_02.png) no-repeat 0 center;} .chgl.main .directMenu .box.bg .icoList li.ico3 div a {background:url(/img/main/chgl/ico_chgl_com_03.png) no-repeat 0 center;} .chgl.main .directMenu .box.bg .icoList li.ico4 div a {background:url(/img/main/chgl/ico_chgl_com_04.png) no-repeat 0 center;} .chgl.main .notiCont {width:727px; margin-top:45px;} .chgl.main .boldBox { margin-top: 55px; margin-bottom:0;} .chgl.main .boldBox .list{position:relative; padding:30px 0; border:6px solid #f2f2f2; border-radius:8px 8px} .chgl.main .boldBox.div3 .list > li { width:33.33%; } .chgl.main .boldBox.div3 .list > li .txtHover {font-size:18px; color:#333;} .chgl.main .txtHover:hover:after, .chgl.main .txtHover:focus:after {border-bottom: 1px solid #333;} .chgl.main .csCont {margin-top:60px;} /*===================================== KDB금융대학교 =====================================*/ .cu.main .visualFrame, .cu.main .sectionWrap {height:754px;} .cu.main .copyArea {position:relative; padding-top:110px;} .cu.main .copyArea:after{content:""; display:block; clear:both} .cu.main .copyArea .left, .cu.main .copyArea .right{float:left; width:50%; box-sizing:border-box} .cu.main .copyArea .right{padding-top:15px; padding-left:100px;} .cu.main .copyArea .right .imgTxt{width:149px; height:77px; background: url(/img/common/img_sub_main.png) no-repeat -668px -783px;} .cu.main .copyArea .titH1{margin-top:15px; font-size:54px;width:343px; height:49px; background: url(/img/common/img_sub_main.png) no-repeat -263px -875px;} .cu.main .copyArea .subTxt{font-size:20px;} .cu.main .keyContents{background:#fff; border-radius:8px; overflow:hidden;} .cu.main .keyContents .goList li{width:140px; position: relative;} .cu.main .keyContents .goList li > a{padding-top:80px; height:120px; color:#333; transform:none} .cu.main .keyContents .goList li > a:hover, .cu.main .keyContents .goList li > a:focus{color:#0063cc;} /* .cu.main .keyContents .goList li > a.icoGo1{background:#fff url(/img/main/cu/ico_cu_go1.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo1:hover, .cu.main .keyContents .goList li > a.icoGo1:focus{background:#f8f8f8 url(/img/main/cu/ico_cu_go1.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo2{background:#fff url(/img/main//cu/ico_cu_go2.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo2:hover, .cu.main .keyContents .goList li > a.icoGo2:focus{background:#f8f8f8 url(/img/main/cu/ico_cu_go2.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo3{background:#fff url(/img/main/cu/ico_cu_go3.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo3:hover, .cu.main .keyContents .goList li > a.icoGo3:focus{background:#f8f8f8 url(/img/main/cu/ico_cu_go3.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo4{background:#fff url(/img/main/cu/ico_cu_go4.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo4:hover, .cu.main .keyContents .goList li > a.icoGo4:focus{background:#f8f8f8 url(/img/main/cu/ico_cu_go4.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo5{background:#fff url(/img/main/cu/ico_cu_go5.png) no-repeat center 25px} .cu.main .keyContents .goList li > a.icoGo5:hover, .cu.main .keyContents .goList li > a.icoGo5:focus{background:#f8f8f8 url(/img/main/cu/ico_cu_go5.png) no-repeat center 25px} */ .cu.main .keyContents .goList li > a:before{content: ''; display: block; width:40px; height:40px; background: url(/img/common/img_sub_main.png) no-repeat -607px -875px; position: absolute; top:25px; left:50%; margin-left:-20px;} .cu.main .keyContents .goList li > a.icoGo2:before{background-position: -648px -875px;} .cu.main .keyContents .goList li > a.icoGo3:before{background-position: -689px -875px;} .cu.main .keyContents .goList li > a.icoGo4:before{background-position: -730px -875px;} .cu.main .keyContents .goList li > a.icoGo5:before{background-position: -771px -875px;} .cu.main .keyContents .goBtnArea{float:right; width:270px; height:120px; line-height:120px; text-align:center; border-radius:0 8px 8px 0; background:#0096f1} .cu.main .keyContents .goBtnArea .links{display:inline-block; font-size:20px; line-height:22px; color:#fff} .cu.main .keyContents .goBtnArea .links.arr:before{background:url(/img/common/img_common.png) no-repeat -515px -40px;} .cu.main .footArea {bottom:75px;} /*===================================== KDB기술거래마트 =====================================*/ .tm.main .sectionWrap, .tm.main .visualFrame {height:755px;} .tm.main .motionArea{position:absolute; top:0; right:0; width:50%; height:498px; z-index: 20} .tm.main .motionArea > *{position:absolute; display:inline-block;} .tm.main .motionArea .bulb{top:94px; left:123px; width:220px; height:355px; display: block; background: url("/img/common/img_sub_main.png") no-repeat 0 0;} .tm.main .motionArea .icoContain > span{display: block; background:url("/img/common/img_sub_main.png") no-repeat} .tm.main .motionArea .bulbItem1{top:94px; left:240px; width:24px; height:23px; background-position: -221px 0 !important;} .tm.main .motionArea .bulbItem2{top:105px; left:277px; width:17px; height:17px; background-position: -246px 0 !important;} .tm.main .motionArea .bulbItem3{top:129px; left:141px; width:18px; height:18px; background-position: -264px 0 !important;} .tm.main .motionArea .bulbItem4{top:121px; left:168px; width:35px; height:34px; background-position: -283px 0 !important;} .tm.main .motionArea .bulbItem5{top:136px; left:206px; width:27px; height:26px; background-position: -319px 0 !important;} .tm.main .motionArea .bulbItem6{top:130px; left:250px; width:45px; height:45px; background-position: -347px 0 !important;} .tm.main .motionArea .bulbItem7{top:131px; left:299px; width:24px; height:24px; background-position: -393px 0 !important;} .tm.main .motionArea .bulbItem8{top:173px; left:122px; width:17px; height:17px; background-position: -418px 0 !important;} .tm.main .motionArea .bulbItem9{top:160px; left:148px; width:18px; height:18px; background-position: -436px 0 !important;} .tm.main .motionArea .bulbItem10{top:175px; left:154px; width:43px; height:43px; background-position: -455px 0 !important;} .tm.main .motionArea .bulbItem11{top:180px; left:208px; width:49px; height:50px; background-position: -499px 0 !important;} .tm.main .motionArea .bulbItem12{top:192px; left:279px; width:26px; height:26px; background-position: -549px 0 !important;} .tm.main .motionArea .bulbItem13{top:179px; left:328px; width:17px; height:17px; background-position: -576px 0 !important;} .tm.main .motionArea .bulbItem14{top:225px; left:144px; width:49px; height:49px; background-position: -594px 0 !important;} .tm.main .motionArea .bulbItem15{top:227px; left:267px; width:47px; height:47px; background-position: -644px 0 !important;} .tm.main .motionArea .bulbItem16{top:213px; left:322px; width:24px; height:24px; background-position: -692px 0 !important;} .tm.main .motionArea .bulbItem17{top:260px; left:202px; width:54px; height:53px; background-position: -717px 0 !important;} .tm.main .motionArea .bulbItem18{top:300px; left:166px; width:25px; height:25px; background-position: -772px 0 !important;} .tm.main .motionArea .bulbItem19{top:329px; left:186px; width:38px; height:37px; background-position: -798px 0 !important;} .tm.main .motionArea .bulbItem20{top:317px; left:242px; width:33px; height:31px; background-position: -837px 0 !important;} .tm.main .motionArea .bulbItem21{top:298px; left:276px; width:27px; height:27px; background-position: -871px 0 !important;} .tm.main .motionArea .lightItem1{top:-15px; left:-95px} .tm.main .motionArea .lightItem2{top:-104px; left:220px} .tm.main .motionArea .lightItem3{top:154px; left:47px} .tm.main .motionArea .lightItem4{top:92px; left:320px} .tm.main .motionArea .lightItem5{top:213px; left:328px} .tm.main .motionArea .lightItem6{top:274px; left:47px} .tm.main .motionArea .lightItem7{top:319px; left:204px} .tm.main .copyArea {padding-top:105px; color:#001f5b; letter-spacing: -3px;} .tm.main .copyArea .shearchWrap {position:relative; width:412px; height:118px; margin-top:30px; margin-left:-20px; padding-left:20px; background: url("/img/common/img_sub_main.png") no-repeat -221px -108px; box-sizing: border-box;} .tm.main .copyArea .shearchWrap input {position:absolute; top:9px; width:295px; height:70px; padding:0 40px 0 20px; line-height:70px; background:none; border:none; box-sizing: border-box; font-size: 16px; color:#666;} .tm.main .copyArea .delete .icoBtn {top:25px; right:100px;} .tm.main .copyArea .shearchWrap .btnSearch {position:absolute; top:9px; right:28px; min-width:70px; height:70px; padding:0; background: transparent;} .tm.main .copyArea .shearchWrap .btnSearch:before{content: ''; display: block; width:30px; height:26px; background:transparent url("/img/common/img_sub_main.png") no-repeat -629px -55px; margin: 0 auto;} .tm.main .keyContents{box-shadow:15px 15px 15px rgba(0,0,0,0.07);} .tm.main .keyContents .item {position:relative; height:130px; box-sizing: border-box;} .tm.main .keyContents .item2:before {content: ''; position: absolute; left: -1px; top: 40px; bottom: 40px; border-left: 1px solid #e7e7e7;} .tm.main .keyContents .item.first:before {content: none} .tm.main .keyContents .item1 {background:#fff; position: relative;} .tm.main .keyContents .item1:after{content:''; display: block; width:40px; height:40px; position:absolute; left:40px; top:45px; background: url("/img/common/img_sub_main.png") no-repeat -660px -55px;} .tm.main .keyContents .item2 {background:#fff; position: relative;} .tm.main .keyContents .item2:after{content:''; display: block; width:40px; height:36px; position:absolute; left:40px; top:45px; background: url("/img/common/img_sub_main.png") no-repeat -701px -55px;} .tm.main .keyContents .item4 {background:#003895} .tm.main .keyContents .item1, .tm.main .keyContents .item2 {padding-top: 35px;} .tm.main .keyContents .item a[class*=golink] {margin-left:120px; height:auto; padding:0; color:#666; } .tm.main .keyContents .item a[class*=golink]:after {content: ''; display: inline-block; width:8px; height:13px; margin-left:8px; background: url("/img/common/img_sub_main.png") -742px -55px no-repeat;} .tm.main .keyContents .item a[class*=golink] + a[class*=golink] {margin-top:5px;} .tm.main .keyContents .item a[class*=golink]:hover, .tm.main .keyContents .item a[class*=golink]:focus {color:#0063cc;} .tm.main .keyContents .item a[class*=golink]:hover:after, .tm.main .keyContents .item a[class*=golink]:focus:after{background-position:-742px -68px;} .tm.main .keyContents .item a[class*=golink] span{line-height:26px;} .tm.main .keyContents .progArea{float:none; width:100%; height:130px; border-radius:0} .tm.main .keyContents .progArea .box{height:130px; padding:34px 30px 30px; background-color:#0096f1;} .tm.main .keyContents .progArea .overviewArea{height:120px; padding:34px 0 0 30px; } .tm.main .keyContents .progArea .listArea{top:130px } .tm.main .keyContents .progArea .tit{font-size:16px; } .tm.main .keyContents .progArea .btnShowArea{top:80px; transition: all 0.3s ease-in-out} .tm.main .keyContents .progArea.on .box{border-top-left-radius:6px; border-top-right-radius:6px;} .tm.main .keyContents .progArea.on .overviewArea{top:-130px} .tm.main .keyContents .progArea.on .listArea{top:0 } .tm.main .keyContents .progArea.on .btnShowArea{top:30px} .tm.main .movieBtn a{display:block; padding:34px 70px 48px 30px; text-align:left; color:#fff; background:none} .tm.main .movieBtn a:before{content:""; display:inline-block; position:absolute; top:47px; left:203px; width:50px; height:53px; background:url(/img/common/img_sub_main.png) no-repeat -751px -55px; transition: all 0.5s ease-in-out} .tm.main .movieBtn a:hover:before, .tm.main .movieBtn a:focus:before{transform: rotateY(360deg);} .tm.main .notiCont{color:#333;} .tm.main .notiCont .control .btnStop, .tm.main .notiCont .control .btnPlay {border:1px solid rgba(0,0,0,0.5);} .tm.main .notiCont .control .btnStop:before, .tm.main .notiCont .control .btnStop:after {background-color:rgba(0,0,0,0.5);} .tm.main .notiCont .control .btnPlay:after {border-left: 6px solid rgba(0,0,0,0.5); border-right: 6px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0); border-top: 5px solid rgba(0,0,0,0);} .tm.main .copyArea [class*=tit]{width:407px; height:53px;background: url("/img/common/img_sub_main.png") no-repeat -221px -55px;} /*===================================== KDB나눔재단 =====================================*/ .ck.main .sectionWrap{height:755px;} .ck.main .visualFrame ~ .sectionWrap{z-index:auto} .ck.main .pgCustomSlide{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:755px; min-width:1132px; height:inherit; margin:0 auto; z-index:1;} .ck.main .pgCustomSlide .swiper-container{position: relative; height: 100%; overflow: hidden; padding:0; z-index:1;} .ck.main .pgCustomSlide .slide-cont{width: 1132px; margin:0 auto; padding-top:150px;} .ck.main .pgCustomSlide .slide-cont .bigTit{font-size:40px; line-height:1.3em; color:#fff;} .ck.main .pgCustomSlide .slide-cont .link{position:relative; display:inline-block; margin-top:23px; padding-right:32px; font-size:20px; color:#fff;} .ck.main .pgCustomSlide .slide-cont .link:after{content:''; position: absolute; width:22px; height:22px; top:3px; right:0; background:url(/img/main/ck/ico_btn_link.png) no-repeat;} .ck.main .pgCustomPagination{position: absolute; top:28px; right:0; z-index:3; } .ck.main .pgCustomPagination .control {text-align: right; margin-bottom: 7px; } .ck.main .pgCustomPagination .control .btnStop, .ck.main .pgCustomPagination .control .btnPlay {position:relative; display:inline-block; width:23px; height:23px; padding:0; min-width:0; border:1px solid rgba(255,255,255,0.6); border-radius:3px; background: none; box-sizing: border-box; transition: border-color 0.15s ease-out, background-color 0.15s ease-out} .ck.main .pgCustomPagination .control .btnStop:hover, .ck.main .pgCustomPagination .control .btnPlay:hover, .ck.main .pgCustomPagination .control .btnStop:focus, .ck.main .pgCustomPagination .control .btnPlay:focus {background-color: rgba(255,255,255,0.2);border-color:#fff} .ck.main .pgCustomPagination .control .btnStop:before, .ck.main .pgCustomPagination .control .btnStop:after {content: ''; position: absolute; top: 6px; left: 7px; bottom: 6px; width:2px; background-color: rgba(255,255,255,0.6); transition: background-color 0.2s ease-out} .ck.main .pgCustomPagination .control .btnStop:hover:before, .ck.main .pgCustomPagination .control .btnStop:focus:before, .ck.main .pgCustomPagination .control .btnStop:hover:after, .ck.main .pgCustomPagination .control .btnStop:focus:after {background-color: rgba(255,255,255,1)} .ck.main .pgCustomPagination .control .btnStop:after {left: auto; right: 7px;} .ck.main .pgCustomPagination .control .btnPlay {display: none} .ck.main .pgCustomPagination .control .btnPlay:after {content: ''; position: absolute; top: 6px; left: 8px; width: 0; height: 0; border-left: 7px solid rgba(255,255,255,0.6); border-right: 7px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0); border-top: 5px solid rgba(0,0,0,0); transition: border-color 0.2s ease-out} .ck.main .pgCustomPagination .control .btnPlay:hover:after, .ck.main .pgCustomPagination .control .btnPlay:focus:after {border-left-color: rgba(255,255,255,1)} .ck.main .pgCustomPagination .swiper-pagination{display: block;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet{position:relative; display:block; width:241px; height:182px; margin-top:32px; border-radius: 6px; background:url(/img/main/ck/bg_pg_off_ver2.png) no-repeat; color:#001f5b; opacity: 0.9;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet:first-child{margin-top:0;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet:after{content:''; position:absolute; width:52px; height:51px; top: 25px; left: 25px; background:url(/img/main/ck/ico_pg01_off.png) no-repeat;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet:nth-child(2):after{width:64px; height:48px; background:url(/img/main/ck/ico_pg02_off.png) no-repeat;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet:nth-child(3):after{width:53px; height:55px; background:url(/img/main/ck/ico_pg03_off.png) no-repeat;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet span{position:absolute; bottom:25px; right:25px; font-size:22px;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active{background:url(/img/main/ck/bg_pg_on_ver2.png) no-repeat;} /*.ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active:after{filter: brightness(0) invert(1);}*/ .ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active:after{background:url(/img/main/ck/ico_pg01_on.png) no-repeat;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active:nth-child(2):after{background:url(/img/main/ck/ico_pg02_on.png) no-repeat;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active:nth-child(3):after{background:url(/img/main/ck/ico_pg03_on.png) no-repeat;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active span{color:#fff;} .ck.main .pgCustomPagination ul li.swiper-pagination-bullet-active:focus {border-color:rgba(0,0,0,0.8);} .ck.main .copyArea{position:relative; padding-top:30px; z-index:2;} .ck.main .copyArea .titH1{width:848px; font-size:26px;} .ck.main .copyArea .titH1 img{width:100%;} .ck.main .footArea{bottom:25px; z-index:2} .ck.main .footArea .rightArea{padding:0;} .ck.main .footArea .links.arr{color:#fff;} .ck.main .footArea .links.arr:before{content:''; position: absolute; width:7px; height:12px; top:5px; right:7px; background:url(/img/main/ck/ico_arr_small.png) no-repeat; z-index: 2;} .ck.main .keyContents{position: static; margin-bottom: 28px;} .ck.main .keyContents:after{content:''; display:block; clear: both;} .ck.main .keyContents .progArea{float:left; width:265px; height:60px; padding:0 20px; border-radius: 6px; background-color:#1480e5; color:#fff; opacity:0.85;} .ck.main .keyContents .progArea .box{height:60px; padding: 10px 20px; border-radius:6px; background-color:#1480e5;} .ck.main .keyContents .progArea .overviewArea{width:100%; height:60px; padding: 17px 20px;} .ck.main .keyContents .progArea .list{padding-top:8px;} .ck.main .keyContents .progArea .list li{font-size:15px;} .ck.main .keyContents .progArea.on .box{border-top-left-radius: 6px;} .ck.main .keyContents .progArea .overviewArea .txt{font-family: 'NotoSans Medium';} .ck.main .keyContents .progArea.on .overviewArea{top:0;} .ck.main .keyContents .progArea.on .listArea{top:40px; border-top: 1px solid #fff;} .ck.main .keyContents .progArea .btnShowArea{top:22px; right:18px; width:14px; height: 14px;} .ck.main .keyContents .progArea .btnShow{width:14px; height: 14px;} .ck.main .keyContents .progArea .btnShow:before, .ck.main .keyContents .progArea .btnShow:after{content:""; display:inline-block; position:absolute; top:6px; left:0; width:14px; height:2px; background-color:#fff; transition: all 0.2s ease-in-out} .ck.main .keyContents .progArea .btnShow:after{top:0px; left:6px; width:2px; height:14px} .ck.main .keyContents .progArea.on .btnShowArea .btnShow:before {transform: rotate(270deg);left: 50%;width: 0;transition-duration: 0.45s;} .ck.main .keyContents .grayBtn{float:left; width:200px; padding:0 23px; height:60px; border-radius: 6px; background-color:#435560; color:#fff; opacity:0.85;} .ck.main .keyContents .grayBtn a{position:relative; display:block; line-height:60px;} .ck.main .keyContents .grayBtn a.icoVideo:after{content:''; position: absolute; width:26px; height:21px; top:20px; left:7px; background:url(/img/main/ck/ico_video.png) no-repeat;} .ck.main .keyContents .grayBtn a.icoVideo span{margin-left:41px; font-family: 'NotoSans Medium';} /*===================================== 신성장정책금융센터 =====================================*/ .ng.main .visualFrame, .ng.main .sectionWrap {height:755px;} .ng.main .visualFrame ~ .sectionWrap{z-index:auto} .ng.main .visualFrame .swiper-controls{top:320px;} .ng.main .copyArea{position:relative; padding-top:115px; z-index:5} .ng.main .copyArea .titH1{margin-top:10px;} .ng.main .copyArea .subTxt{font-size:20px;} .ng.main .keyContents{background-color:#fff; border-radius:8px 8px; z-index:5} .ng.main .keyContents .goList{width:100%; float:none; background-color:#596eed; border-radius:8px 8px 0 0 } .ng.main .keyContents .goList:after{content:""; display:block; clear:both} .ng.main .keyContents .goList li{position:relative; width:25%} .ng.main .keyContents .goList li:before{content:""; display:block; position:absolute; top:35px; left:0; width:1px; height:80px; border-left:1px solid #fff; opacity:0.2} .ng.main .keyContents .goList li:first-child:before{display:none} .ng.main .keyContents .goList li > a{position:relative; display:block; width:100%; height:145px; padding:32px 0 0px; text-align:center; border-radius:4px; box-sizing:border-box} .ng.main .keyContents .goList li > a:hover, .ng.main .keyContents .goList li > a:focus{background:none} .ng.main .keyContents .goList li > a > span.img{position:relative; margin-top:20px; display:block; min-height:40px; text-align:center; margin:0 auto; width:43px; height:39px; background:url(/img/common/img_sub_main.png) no-repeat -164px -525px; } .ng.main .keyContents .goList li:nth-child(2) > a > span.img{background-position:-208px -525px; width:40px; height:36px;} .ng.main .keyContents .goList li:nth-child(3) > a > span.img{background-position:-249px -525px; width:40px; height:36px;} .ng.main .keyContents .goList li:nth-child(4) > a > span.img{background-position:-290px -525px; width:40px; height:40px;} .ng.main .keyContents .goList li > a > span.img:after{display:none} .ng.main .keyContents .goList li > a > span.img img{display:inline-block;} .ng.main .keyContents .goList li > a > span.txt{position:relative; margin:15px 0 0 0; padding-right:20px; display:inline-block; color:#fff} .ng.main .keyContents .goList li > a > span.txt:before{content:""; display:block; position:absolute; top:5px; right:0; width:8px; height:15px; background:url(/img/common/img_common.png) no-repeat -1235px -636px;} .ng.main .keyContents .goList li > a > span.txt:after{border-color:#fff} .ng.main .keyContents .compSlide{position:relative; padding:22px 20px 20px 20px; border-radius:0 0 8px 8px; box-sizing:border-box; background-color:#fff; z-index:5} .ng.main .keyContents .carouselSlide{position:relative; margin-top:0; padding:0 50px; opacity: 0} .ng.main .keyContents .carouselSlide.uiAct {opacity: 1} .ng.main .keyContents .carouselSlide .slideWrapper {overflow:hidden} .ng.main .keyContents .carouselSlide .goSlide {position:relative; left:0; border: none; /*transition: transform 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out*/ } .ng.main .keyContents .carouselSlide .goSlide:after{content:""; display:block; clear:both} .ng.main .keyContents .carouselSlide .goSlide .subInfo {margin-top:0; border-top:0} .ng.main .keyContents .carouselSlide .goSlide > li {float:left; width:164px; height:52px; padding:0; box-sizing: border-box;} .ng.main .keyContents .carouselSlide .goSlide > li > a {display:inline-block; width:auto; margin:5px; border:1px solid #fff; border-radius:8px 8px; text-align:center; box-sizing: border-box; width:136px; height:42px; background:#fff; transition: border 0.2s ease-in-out; background:url(/img/common/img_sub_main.png) no-repeat -263px -701px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_2{background-position: -398px -701px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_3{background-position: -533px -701px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_4{background-position: -668px -701px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_5{background-position: -263px -742px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_6{background-position: -398px -742px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_7{background-position: -533px -742px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_8{background-position: -668px -742px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_9{background-position: -263px -783px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_10{background-position: -398px -783px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_11{background-position: -533px -783px;} .ng.main .keyContents .carouselSlide .goSlide > li > a.site_12{background-position: -668px -783px;} .ng.main .keyContents .carouselSlide .goSlide > li > a:hover, .ng.main .keyContents .carouselSlide .goSlide > li > a:focus{border:1px solid #0063cc; } .ng.main .keyContents .carouselSlide .goSlide > li > a img{display:inline-block; text-align:center; width:134px; } .ng.main .keyContents .carouselSlide .goSlide > li > a:hover img, .ng.main .keyContents .carouselSlide .goSlide > li > a:focus img{transform:none} .ng.main .keyContents .carouselSlide .noImg {position: relative; min-height: 166px;} .ng.main .keyContents .carouselSlide .noImg:before {content:''; position:absolute; top:30px; left:8px; right:19px; bottom:0; background:#fafafa url(/img/common/bg_gallery_nodata.png) no-repeat center center; border:1px solid #ddd;} .ng.main .keyContents .carouselSlide button[class*=btn] {position:absolute; left:20px; top:13px; width:14px; height:30px; min-width:0; background: url(/img/common/img_common.png) no-repeat -370px 0; z-index:3} .ng.main .keyContents .carouselSlide button.btnNext {left:auto; right:5px; background-position:-370px -30px ; } .ng.main .footArea{z-index:5} .ng.main .footArea .notiCont {width:570px; } .ng.main .footArea .rightArea.type_banner > a{width:239px; height:50px; display: inline-block; background: url(/img/common/img_sub_main.png) no-repeat -263px -824px;} /*===================================== 넥스트라운드 =====================================*/ .nr.main .sectionWrap, .nr.main .visualFrame {height:754px;} .nr.main .copyArea{position:relative; padding-top:70px;} .nr.main .copyArea .titH1 {font-size:53px; padding-bottom: 15px;} .nr.main .copyArea .subTxt {font-size:18px;} .nr.main .copyArea .subTxt.L{font-size:20px;} .nr.main .movieBtn {margin:45px 0 40px;} .nr.main .movieBtn a {position:relative; display: inline-block; height: 67px; line-height: 67px; padding-left: 70px; font-size: 18px; word-break: break-all; overflow:hidden} .nr.main .movieBtn a:before{content:""; display:block; position:absolute; top:0; left:0; width:60px; height:67px; background:url(/img/main/nr/ico_movie.png) no-repeat 0; transition: all 0.5s ease-in-out} .nr.main .movieBtn a:hover:before{transform: rotateY(360deg);} .nr.main .movieBtn a span{position:relative; display:inline-block; line-height:26px;} .nr.main .movieBtn a span:after{content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #fff; transition: all 0.25s ease-out;} .nr.main .movieBtn a:hover > span:after, .nr.main .movieBtn a:focus > span:after{left:0; right: 0; width:auto} #content.nr.main .cardList > li .cardWrap {background-color:transparent;} .nr.main .bbs.grid { border: none !important; padding: 0;} .nr.main .bbs.grid > li { padding: 0;} .nr.main .cardList > li {width:268px; margin-left: 0;} .nr.main .cardList > li + li {margin-left:20px;} .nr.main .cardList > li:first-child {margin-left:0;} .nr.main .cardList > li.on .cardWrap { top: 0px; left: 0px; } .nr.main .cardList > li .cardWrap { width: auto; height: 350px; padding: 30px; box-sizing: border-box; background: url(/img/main/nr/bg_nr_card.png) no-repeat 0 0; border: none; box-shadow: none;} .nr.main .cardList > li.on .cardWrap .cardOver:before { background: url(/img/main/nr/bg_nr_card_on.png) no-repeat 0 0; opacity: 1; } .nr.main .cardList > li .cardWrap .cardOver { padding:30px; } .nr.main .cardList > li .cardWrap .cardOver .btnCArea { left: 45px; right: 60px; } .nr.main .cardList.irRoundList .midCont dl dt { border-bottom: none; margin-bottom: 0; } .nr.main .cardList > li .cardWrap .cardTit { font-size: 24px; } .nr.main .cardList > li .cardWrap .cardTit .txtL { font-size: 34px !important; } .nr.main .cardList > li .cardWrap .cardTit .txt { padding-top: 7px; } .nr.main .cardList.irRoundList .midCont .midTit {font-size:16px;} .nr.main .cardList > li .cardWrap .cardDefault .midCont .bold {color:#333;} .nr.main .cardList.irRoundList .midCont dl dd { font-size: 16px;} /*===================================== KDB컨설팅실 =====================================*/ .kc.main .visualFrame, .kc.main .sectionWrap {height:755px; z-index:auto} .kc.main .visualSlide.swiper-container{height:755px} .kc.main .swiper-wrapper{z-index:auto} .kc.main .visualSlide .swiper-slide{opacity:0; z-index:-1} .kc.main .visualSlide .swiper-slide.swiper-slide-active{opacity:1; z-index:1} .kc.main .visualList{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:755px;} .kc.main .visualFrame.cover .visualList:before{display:none} .kc.main .visualFrame.cover .visualList .visual:before{content:""; position:absolute; top:0; left:0; bottom:0; width:50%; background-color:#0063cc; opacity:0.9; z-index:2;} .kc.main .visualList .visual{position:relative; top:0; width:1780px; height:755px; z-index:auto} .kc.main .visualList .visual .copyCont{position:absolute; top:115px; left:50%; margin-left:-566px; width:1132px; z-index:101} .kc.main .visualList .visual .copyCont > *{color:#fff} .kc.main .visualList .visual .copyCont.copyCont2, .kc.main .visualList .visual .copyCont.copyCont3{display:none} .kc.main .downLoadCnt{position:absolute; top:375px; left:0; z-index:5} .kc.main .downLoadCnt a {position:relative; display:inline-block; height:53px; padding-top:3px; padding-left:70px; background:url("/img/main/kc/bg_download.png") 0 50% no-repeat; color:#fff;} .kc.main .downLoadCnt a span{display:inline-block;} .kc.main .downLoadCnt a span:before{content:""; display:inline-block; position:absolute; top:36px; left:16px; width:18px; height:2px; background:#0063cc} .kc.main .downLoadCnt a span:after{content:""; display:inline-block; position:absolute; top:13px; left:17px; width:16px; height:18px; background:url(/img/main/kc/ico_download_arr.png) no-repeat 0 0;} .kc.main .downLoadCnt a:hover span:after, .kc.main .downLoadCnt a:focus span:after{ -webkit-animation: kcdownloadmotion 0.6s ease-in-out infinite; animation: kcdownloadmotion 0.6s ease-in-out infinite; } @-webkit-keyframes kcdownloadmotion {0%{top:13px;}50%{top:20px}100%{top:13px}} @keyframes kcdownloadmotion {0%{top:13px;}50%{top:20px}100%{top:13px}} .kc.main .keyContents {z-index:101} .kc.main .keyContents .item {position:relative; height:120px; background-color:#fff; box-sizing: border-box;} .kc.main .keyContents .item:before {content: ''; position: absolute; left: -1px; top: 0; bottom: 0; border-left: 1px solid #e7e7e7;} .kc.main .keyContents .item.first:before {content: none} .kc.main .keyContents .progArea{float:none; width:100%; height:120px} .kc.main .keyContents .progArea .box{ width:100%; height:120px; padding:25px 40px; background-color:#fff; transition: background-color 0.3s ease-in-out;} .kc.main .keyContents .progArea .overviewArea{height:120px; padding:40px 0 0 50px;} .kc.main .keyContents .progArea .overviewArea .txt{display:inline-block; position: relative; line-height:36px; padding-left:60px; font-size:18px; color:#333} .kc.main .keyContents .progArea .overviewArea .txt:after{display:block; content:''; position:absolute; left:0; background:url(/img/main/kc/ico_items.png) no-repeat;} .kc.main .keyContents .progArea .listArea{top:120px } .kc.main .keyContents .progArea .btnShowArea{top:20px; right:20px; } .kc.main .keyContents .progArea .btnShow:before, .kc.main .keyContents .progArea .btnShow:after{background-color:#0096f1;} .kc.main .keyContents .progArea.on .box{border-top-left-radius:6px; border-top-right-radius:6px; background:#0096f1; z-index:101} .kc.main .keyContents .progArea.on .listArea{top:0} .kc.main .keyContents .progArea.on .btnShowArea .btnShow:before, .kc.main .keyContents .progArea.on .btnShowArea .btnShow:after{background-color:#fff;} .kc.main .keyContents .item1 {border-right:1px solid #e7e7e7} .kc.main .keyContents .item1 .progArea .box {border-top-left-radius:6px; border-bottom-left-radius:6px;} .kc.main .keyContents .item1 .progArea .overviewArea .txt:after{background-position: 0 0; width:40px; height:36px; top:0;} .kc.main .keyContents .item2 .progArea .overviewArea .txt:after{background-position: 0 -46px; width:40px; height:31px; top:4px;} .kc.main .keyContents .item3 {overflow:hidden; text-align:center; background:url('/img/main/kc/bg_item.png') no-repeat; background-size: cover;} .kc.main .keyContents .item3 a {background:rgba(0,150,241,0.9); text-align:center;} .kc.main .keyContents .item3 a {display:inline-block; width:100%; height:inherit; padding-top:34px; text-align:center; box-sizing:border-box; color:#fff} .kc.main .keyContents .item3 a span {position:relative; display:inline-block; font-size:18px;padding-right:17px; } .kc.main .keyContents .item3 a span:after{display:none} .kc.main .keyContents .item3 a span:before {display:inline-block; content:''; position:absolute; top:6px; right:0; width:7px; height:13px; background: url('/img/main/kc/img_item_arr.png') no-repeat;} .kc.main .keyContents .item3 a:hover span, .kc.main .keyContents .item3 a:focus span{color:#fff} .kc.main .keyContents .item3 a:hover span:before, .kc.main .keyContents .item3 a:focus span:before{ -webkit-animation: arrmotion 0.6s ease-in-out infinite; animation: arrmotion 0.6s ease-in-out infinite; } .kc.main .footArea{z-index:5} .kc.main .notiCont .list > li .txt{max-width:290px} /*===================================== M&A MNA 컨설팅 =====================================*/ /* mna visual slide*/ .mna.main{background-color:#f5f7fb;} .mna.main .sectionWrap{width:1145px;} .mna.main .wrap{position:relative; width: 1132px; height: 590px; margin: 0 auto; box-sizing: border-box;} .mna.main .wrap .comment{margin-top: 165px; font-size:36px; letter-spacing: -0.06em; color:#333;} .mna.main .wrap .bigTit {display:block; letter-spacing: -0.06em; font-size: 58px; line-height: 1.3em; color:#333;} .mna.main .wrap .txt16{margin-top:12px; color:#333; letter-spacing: -0.04em;} .mna.main .mnaShape{position:relative; margin-top: -330px !important; z-index: 10; } /* customSlt + mnasel */ .navyBox .formContain{padding:40px 20px; background-color: rgba(0, 31, 91, 0.9); border-top-left-radius: 8px; border-bottom-left-radius: 8px;} .navyBox{position: relative; padding-right:26px; border-radius:8px; z-index:100; } .navyBox:after{content:""; display:block; position:absolute; top:0px; right:0px; bottom:0; width:26px; background: url('/img/main/ma/bg_mna_search_edge.png') no-repeat 0 bottom; border-top-right-radius: 8px; } .isIE .navyBox:after{right:0.4px;} .navyBox .customSlt{display:inline-block; min-width:180px; margin-left:20px; vertical-align: middle;} .navyBox .customSlt.long{min-width:260px;} .navyBox .customSlt .ipt{padding:0; background:none; color:#fff; border:none; border-radius:0;} .navyBox .customSlt .ipt:after{background: url('../img/common/btn_select_w_small.png') no-repeat 0 0;} .navyBox .customSlt .ipt:before{content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; border-bottom:1px solid #fff; opacity:0.4 !important;} .navyBox .customSlt .ipt:hover:before, .navyBox .customSlt .ipt:focus:before{opacity:1 !important;} .navyBox .customSlt .ipt:focus{box-shadow: none;} .navyBox .customSlt.on .ipt {opacity: 0} .navyBox .customSlt.on .customSltBox {top:0px; border-top:1px solid #0068d4; border-radius: 4px; overflow: hidden;} .navyBox .customSlt.on .customSltBox:before {content: none;} .navyBox .btnSearch {display:inline-block; min-width:100px; margin-left:40px; padding:0; vertical-align:middle; background:none;} .navyBox .btnSearch span {display: inline-block; padding-left: 35px; background: url(/img/main/bm/ico_bm_search.png) no-repeat 0 center;} .navyBox .btnSearchWrap .btnSearch span{display:inline-block;padding-left:35px; background:url(/img/main/bm/ico_bm_search.png) no-repeat 0 center;} .navyBox .menu > li.noSlt button{background-color:#ccc; color:#000; font-weight:bold; cursor:default;} /* mna 매도관련 slide*/ .mna.main .mnaShape .carouselSlide .slideWrapper{padding:10px 10px 30px 10px;} .mna.main .mnaShape .middleBlock{ margin-top:35px;} .mna.main .mnaShape .btnPrev{top:70px; left:-40px;} .mna.main .mnaShape .btnNext{top:70px; left:auto; right:-50px;} .mna.main .mnaShape .slideWrapper{width:1145px;} .mnaSpecialBox {float:left; position: relative; width:545px !important;} .mnaSpecialBox + .mnaSpecialBox {margin-left:40px;} .mnaSpecialBox:after{content:""; position: absolute; top: -12px; left: -15px; width: 598px; height: 243px; background: url('/img/main/ma/bg_mna_bm_edge.png') no-repeat 0 0;} .mnaSpecialBox .conWrap {position: relative; display:table; width:100%; background-color:transparent; z-index: 2; } .mnaSpecialBox .conWrap .coninner {width:100%; padding:20px 20px; margin-right:-7px; box-sizing:border-box;} .mnaSpecialBox .textArea{border-bottom:2px solid #f3f1fc;} .mnaSpecialBox .textArea a{display:inline-block; padding-right:30px;} .mnaSpecialBox .textArea a strong{position:relative; } .mnaSpecialBox .textArea a:hover .bTxt,.mnaSpecialBox .textArea a:focus .bTxt{cursor: pointer; color:#0063cc !important;} .mnaSpecialBox .textArea a:hover .bTxt:after,.mnaSpecialBox .textArea a:focus .bTxt:after{background: url(../img/common/btn_arrowRight_hover.png) no-repeat right 0;} .mnaSpecialBox .sellBox{position:relative; display:none; padding-top: 20px; text-align:right; cursor: pointer;} .mnaSpecialBox .sellBox.on{display:block;} .mnaSpecialBox .sellBox:after{content:''; display:block; clear:both;} .mnaSpecialBox .sellCategori{position:absolute; top:20px; left:0; text-align:left;} .mnaSpecialBox .sellCategori .location{padding:3px 10px; border:1px solid #ccc; border-radius:4px;} .mnaSpecialBox .sellCategori p{width:195px;} .mnaSpecialBox .sellCondition{display:inline-block;} .mnaSpecialBox .sellCondition .sellPay{position:relative; display:inline-block; height:70px; padding:0 16px 0 45px; box-sizing:border-box;} .mnaSpecialBox .sellCondition .sellPay .txtM{color:#333;} .mnaSpecialBox .sellCondition .sellPay p{position:absolute; top:30px; right:15px; font-size:24px !important; color:#333; font-weight:bold;} .mnaSpecialBox .sellCondition .sellPayL{padding:0;} .mnaSpecialBox .sellCondition .sellPayL p{right:1px;} .mnaSpecialBox .conWrap .sTxt {font-size: 14px; color:#333; margin-bottom: 10px} .mnaSpecialBox .conWrap .bTxt {font-size: 23px; color:#333; margin-bottom: 10px} .mnaSpecialBox .conWrap .bTxt:after{content:''; position:absolute; top:-2px; right:-30px; width:28px; height:30px; background: url(../img/common/btn_arrowRight.png) no-repeat right 0;} .mnaSpecialBox .conWrap .context {position:relative; display:inline; font-size: 16px; color:#666} /* mna slide swiper-controls*/ .mna.main .slide .swiper-controls {width: auto; top: 120px; left:50%; bottom: auto; margin-left: -563px; display: none;} .mna.main .slide .swiper-pagination{position:relative;} .mna.main .slide .swiper-pagination:after{content: '/'; position: absolute; top:0; left: 35px; color:#333;} .mna.main .slide button{margin:0 20px;} .mna.main .slide button:first-child{margin-left:0;} .mna.main .slide button.swiper-button-play,.mna.main .slide button.swiper-button-stop{border: 1px solid #333;} .mna.main .slide button.swiper-button-play:after{border-left: 7px solid #333;} .mna.main .slide button.swiper-button-stop:before, .mna.main .slide button.swiper-button-stop:after{background-color: #333;} .mna.main .slide button.swiper-button-play,.mna.main .slide button.swiper-button-stop{margin:0;} .mna.main .slide button span{color:#333; font-weight: 700;} .mna.main .slide .swiper-pagination-bullet{width:auto;} .mna.main .slide .swiper-pagination-bullet:before{content:none;} .mna.main .controlWrap{position:absolute; width: auto; top: 35px; bottom: auto; right: 28px; text-align: right;} .mna.main .controlWrap .pageBullet {position:relative; display:inline-block; width:21px; height:23px; margin:0; background: none !important; opacity: 1 !important; vertical-align: top} .mna.main .controlWrap .pageBullet:before {content: ''; position: absolute; top: 7px; left: 5px; right: 6px; bottom: 6px; background-color: #000; opacity: 0.2; border-radius: 50%;} .mna.main .controlWrap .pageBullet.on:before {opacity: 0.5} section:not(.section) .mnaSectionwrap{margin-top:110px;} .mnaSectionwrap .middleBlock{width:1150px;} .mnaSectionwrap .carouselSlide .slideWrapper{padding-bottom:30px;} .mnaSectionwrap .specialWrap ul > li{border-left:1px solid #ccc;} .mnaSectionwrap .specialBox .conWrap{padding: 30px 0 30px 40px;} .mnaSectionwrap .specialBox .conWrap .middle{position:relative; vertical-align: baseline;} .mnaSectionwrap .specialBox > .conWrap ~ img{top:30px; left:auto; right:40px;} .mnaSectionwrap .specialBox.noBG > img{height:220px;} .mnaSectionwrap .specialBox:hover{border-radius: 8px; background-color:#fff; box-shadow:7px 7px 7px rgba(0,0,0,0.16); transition:all 0.25s ease-out;} .mnaSectionwrap .middleBlock button.btnPrev{left:-63px;} .mnaSectionwrap .middleBlock button.btnNext{right:-53px;} .mnaSectionwrap .moreWrap{position:absolute; bottom:30px; left:40px; } .mnaSectionwrap .moreWrap button{color:#333;} .mnaSectionwrap .moreWrap button:hover, .mnaSectionwrap .moreWrap button:focus{color:#000 !important;} .mnaSectionwrap.middleBlock .btnPrev, .mnasectionWrap.middleBlock .btnNext{display:none;} .mna.main .compSlide{position:relative; padding:30px 20px 75px 20px; border-radius:0 0 8px 8px; box-sizing:border-box; z-index:5} .mna.main .compSlide .carouselSlide{position:relative; margin-top:0; padding:0 50px; opacity: 0;} .mna.main .compSlide .carouselSlide.uiAct {opacity: 1} .mna.main .compSlide .carouselSlide .slideWrapper {overflow:hidden;} .mna.main .compSlide .carouselSlide .goSlide {position:relative; left:0; border: none; /*transition: transform 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out*/ } .mna.main .compSlide .carouselSlide .goSlide:after{content:""; display:block; clear:both} .mna.main .compSlide .carouselSlide .goSlide .subInfo {margin-top:0; border-top:0} .mna.main .compSlide .carouselSlide .goSlide > li {float:left; width:164px; height:52px; padding:0; box-sizing: border-box;} .mna.main .compSlide .carouselSlide .goSlide > li > a {display:inline-block; width:auto; padding:5px; border-radius:8px 8px; text-align:center; border:1px solid #f5f7fb; box-sizing: border-box; transition: border 0.2s ease-in-out} .mna.main .compSlide .carouselSlide .goSlide > li > a:hover,.mna.main .compSlide .carouselSlide .goSlide > li > a:focus{border:1px solid #0063cc; } .mna.main .compSlide .carouselSlide .goSlide > li > a img{display:inline-block; text-align:center; width:134px; } .mna.main .compSlide .carouselSlide .goSlide > li > a:hover img, .mna.main .compSlide .carouselSlide .goSlide > li > a:focus img{transform:none} .mna.main .compSlide .carouselSlide .noImg {position: relative; min-height: 166px;} .mna.main .compSlide .carouselSlide .noImg:before {content:''; position:absolute; top:30px; left:8px; right:19px; bottom:0; background:#fafafa url(/img/common/bg_gallery_nodata.png) no-repeat center center; border:1px solid #ddd;} .mna.main .compSlide .carouselSlide button[class*=btn] {position:absolute; left:20px; top:15px; width:22px; height:22px; min-width:0; background: url(/img/common/img_common.png) no-repeat -370px 0; background-size:10px auto; z-index:3} .mna.main .compSlide .carouselSlide button.btnNext {left:auto; right:5px; background-position:-370px -30px; } .mnaTel{padding:16px 0; border: 1px solid #e7e7e7; border-radius: 8px;} .mnaTel .txtList:after{content:''; display:block; clear:both;} .mnaTel .txtList > li{float:left; width:50%; margin-top:0; padding-left:60px; box-sizing: border-box;} .mnaTel .txtList > li:before{left:40px;} /*===================================== 개인,기업뱅킹,퇴직연금 =====================================*/ /* 개인,기업,퇴직연금 공통 */ .main .directMenu.stick nav[class*=Btn] {overflow:hidden;} .main .directMenu.stick nav[class*=Btn] ul {position:relative; display:table; width:100%; white-space:nowrap; z-index:5;} .main .directMenu.stick nav[class*=Btn] ul > li {position:relative; display:table-cell; white-space:normal; text-align:center; box-sizing:border-box; vertical-align:top; color:#555;} .main .directMenu.stick nav[class*=Btn] ul > li:before {content:''; position:absolute; top:0; bottom:0; left:-1px; border-left:1px solid #dedede;} .main .directMenu.stick nav[class*=Btn] ul > li > a {position:relative; display:block; letter-spacing:-0.05em;} .main .directMenu.stick nav[class*=Btn] ul > li > a > span {position:relative; display:inline-block; vertical-align:middle; line-height:1.2em;} .main .directMenu.stick nav[class*=Btn] a:hover > span, .main .directMenu.stick nav[class*=Btn] a:focus > span {color:#0063cc;} .main .directMenu.stick nav[class*=Btn] [class*=ico] > a:before {content:''; display:block; width:40px; height:40px; margin:0 auto 8px auto;} html:not(.en) .main .directMenu.stick nav[class*=Btn] ul > li > a > span:after {content:''; position:absolute; bottom:-2px; width:0; left:50%; border-bottom: 1px solid #fff; transition: all 0.18s; transition-timing-function:inherit;} html:not(.en) .main .directMenu.stick nav[class*=Btn] ul > li > a:hover > span:after, html:not(.en) .main .directMenu.stick nav[class*=Btn] ul > li > a:focus > span:after {left:0; width:100%;} html:not(.en) .main .directMenu.stick [class*=top] li a > span:after {border-bottom: 2px solid #fff !important;} html:not(.en) .main .directMenu.stick .bottomBtn ul > li:not(.white) > a > span:after, html:not(.en) .main .directMenu.stick .leftBtn ul > li > a > span:after {border-color:#0063cc !important;} .main .directMenu.stick .white:before, .main .directMenu.stick .white li:before, .main .directMenu.stick [class*=top] li:before {border-left:1px solid #fff !important; opacity:0.1;} .main .directMenu.stick [class*=top] li a > span, .main .directMenu.stick [class*=top] li a:hover > span, .main .directMenu.stick [class*=top] li a:focus > span, .main .directMenu.stick .white a > span, .main .directMenu.stick .white a:hover > span, .main .directMenu.stick .white a:focus > span {color:#fff !important;} .main .directMenu.stick nav[class*=Btn] ul > li:first-child:before, .main .directMenu.stick .bottomBtn ul > li.white + li:not(.white):before {content:none !important;} .main .directMenu.stick a[class*=log], .main .directMenu.stick a[class*=cert] > span {font-size:22px; line-height:1.158em;} .main .directMenu.stick a.login:before, .main .directMenu.stick a.logout:before {content:''; display:inline-block; width:22px; height:24px; margin-right:10px; background: url(../img/main/bp/ico_login.png) no-repeat 0 0; box-sizing:border-box; vertical-align:middle;} .main .directMenu.stick a.logout:before {width:25px; background: url(../img/main/bp/ico_logout.png) no-repeat 0 0;} /* 개인,기업 공통 */ .bank.main .visualTop .copyArea {padding-top:80px;} .bank.main .visualTop .copyArea .bigTit, .bank.main .visualTop .copyArea .tit, .brMain .visualTop .copyArea .bigTit, .brMain .visualTop .copyArea .tit {position:relative; color:#333; line-height:1;} .bank.main .visualTop .copyArea .bigTit, .brMain .visualTop .copyArea .bigTit {display:inline-block; margin-left:-2px; margin-top:-2px; font-size:54px; line-height:1.068em; letter-spacing:-0.05em} .bank.main .visualTop .copyArea .bigTit img, .brMain .visualTop .copyArea .bigTit img {margin-top:2px; margin-left:2px;} .bank.main .visualTop .copyArea .tit, .brMain .visualTop .copyArea .tit {margin-bottom:20px; margin-left:-1px; font-size:20px;} .bank.main .visualTop .copyArea .tit img, .brMain .visualTop .copyArea .tit img {margin-left:1px;} .bank.main .visualTop .slide {position:absolute; top:80px; right:-30px; width:338px; height:260px; overflow:hidden;} .bank.main .visualTop .slide:after {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:#417839; border-radius:10px; opacity:0.9;} .bank.main .visualTop .slide li > a {position:relative; display:block; min-height:260px; padding:30px; box-sizing:border-box; color:#fff; opacity:0;} .bank.main .visualTop .slide li > a > * {display:block; color:#fff !important;} .bank.main .visualTop .slide li > a > .titH3 {height:34px; -ms-line-clamp:1; -webkit-line-clamp:1;} .bank.main .visualTop .slide li > a > .txt {height:75px; -ms-line-clamp:3; -webkit-line-clamp:3;} .bank.main .visualTop .slide li > a:after {content:''; position:absolute; left:30px; bottom:60px; width:17px; height:12px; background:url(../img/main/be/ico_arrow.png) no-repeat 0 0;} .bank.main .visualTop .slide li > a:hover:after, .bank.main .visualTop .slide li > a:focus:after {animation: bankTxtSlideBtn 0.55s ease-out infinite; -webkit-animation: bankTxtSlideBtn 0.55s ease-out infinite;} .bank.main .visualTop .slide.on button:focus {outline-color: #fff !important; outline-style: dotted !important; outline-width: 1px !important;} @-webkit-keyframes bankTxtSlideBtn {0%{left:30px;}50%{left:35px;}100%{left:30px;}} @keyframes bankTxtSlideBtn {0%{left:30px;}50%{left:35px;}100%{left:30px;}} .bank.main .visualTop .slide li.swiper-slide-active > a {opacity:1;} .bank.main .visualTop .slide .swiper-controls {text-align:right; right:0; bottom:24px; padding-right:25px;} .bank.main .visualTop .slide li > a > *, .bank.main .hotKDB li > a .contWrap .tit, .bank.main .hotKDB li > a .contWrap .txt {display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; overflow:hidden;} .bank.main .directMenu {position:relative; width: 1132px; margin:0 auto;} .bank.main .directMenu:after {content:''; position:absolute; top:-16px; left:-16px; width:336px; height:303px; background:url(../img/main/bp/bg_directmenu.png) no-repeat 0 0; opacity:0.9;} .bank.main .directMenu .topBtn {position:relative; width:288px; height:100px; margin-top:-100px; box-sizing:border-box; z-index:1; text-align:center;} .bank.main .directMenu.stick .topBtn ul {width:100%;} .bank.main .directMenu.stick .topBtn ul > li {width:50%; height:100px; vertical-align:middle;} html:not(.en) .bank.main .directMenu.stick .topBtn ul > li a.logout {min-width:159px !important;} .bank.main .directMenu.stick .topBtn ul > li:before {top:38px; bottom:38px;} .bank.main .directMenu.stick .bottomBtn {position:relative; height:150px; margin-bottom:80px; padding:30px 0; box-sizing:border-box; z-index:1;} .bank.main .directMenu.stick .bottomBtn ul {height:100%;} .bank.main .directMenu.stick .bottomBtn ul > li {width:141px;} .bank.main .directMenu.stick .bottomBtn ul > li.white {width:144px !important; min-width:144px;} .bank.main .directMenu.stick .bottomBtn ul > li.ico1 > a:before {background:url(../img/main/bp/ico_direct1.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico2 > a:before {background:url(../img/main/bp/ico_direct2.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico3 > a:before {background:url(../img/main/bp/ico_direct3.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico4 > a:before {background:url(../img/main/bp/ico_direct4.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico5 > a:before {background:url(../img/main/bp/ico_direct5.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico6 > a:before {background:url(../img/main/bp/ico_direct6.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico7 > a:before {background:url(../img/main/bp/ico_direct7.png) no-repeat 0 0;} .bank.main .directMenu.stick .bottomBtn ul > li.ico8 > a:before {background:url(../img/main/bp/ico_direct8.png) no-repeat 0 0;} .bank.main .boldBox ul {font-size:18px; border-color:#f2f2f2 !important;} .bank.main .boldBox ul > li:before {top:0; bottom:0; height:auto;} .bank.main .boldBox ul > li > a {position:relative; display:block; color:#333;} .bank.main .boldBox ul > li > a > span {position:relative; display:inline-block;} .bank.main .boldBox ul > li > a:hover > span, .bank.main .boldBox ul > li > a:focus > span {color:#0063cc;} .bank.main .boldBox.white ul {background-color:#fff; border-color:#dedede !important;} .bank.main .boldBox.white ul > li > a {color:#555;} .bank.main .boldBox ul > li[class*=ico] > a:before {content:''; display:inline-block; width:28px; height:30px; margin:-3px 9px 0 0; background:url(../img/main/bp/ico_boldbox1.png) no-repeat 0 0; vertical-align:middle;} .bank.main section > .boldBox {position:relative; width: 1132px; margin:0 auto;} html:not(.en) .bank.main .boldBox ul > li > a > span:after {content:''; position:absolute; bottom:0; width:0; left:50%; border-bottom: 1px solid #0063cc; transition: all 0.18s; transition-timing-function:inherit;} html:not(.en) .bank.main .boldBox ul > li > a:hover > span:after, html:not(.en) .bank.main .boldBox ul > li > a:focus > span:after {left:0; width:100%;} .bank.main .boldBox ul > li.ico2 > a:before {background:url(../img/main/bp/ico_boldbox2.png) no-repeat 0 0;} .bank.main .boldBox ul > li.ico3 > a:before {background:url(../img/main/bp/ico_boldbox3.png) no-repeat 0 0;} .bank.main .boldBox ul > li.ico4 > a:before {background:url(../img/main/bp/ico_boldbox4.png) no-repeat 0 0;} html.en .bank.main .boldBox ul > li > a:hover > span, html.en .bank.main .boldBox ul > li > a:focus > span {text-decoration:underline;} .bank.main section.bg {padding:80px 0; background-color:#e7ebec;} .bank.main section.bg .secTitle {margin-bottom:40px; text-align:center;} .bank.main section.bg .secTitle [class*=titH] img {display:block; margin:0 auto;} .bank.main .carouselSlide {margin-bottom:-10px;} .bank.main .carouselSlide .slideWrapper {margin:0 -10px; padding:0 10px;} .bank.main .carouselSlide .btnPrev, .bank.main .carouselSlide .btnNext {position: absolute; left:-70px; top:50%; width:60px; height: 60px; margin-top:-30px !important; z-index: 100; min-width: 0; padding:0; background: transparent url(../img/common/img_common.png) no-repeat -260px -176px; border:1px solid rgba(210,210,210,0); transition: border-color 0.15s ease-out, background-color 0.15s ease-out} .bank.main .carouselSlide .btnNext {background-position: -320px -176px;} .bank.main .carouselSlide .btnPrev:hover, .bank.main .carouselSlide .btnNext:hover, .bank.main .carouselSlide .btnPrev:focus, .bank.main .carouselSlide .btnNext:focus {background-color: rgba(255,255,255,0.4); border-color: rgba(210,210,210,1);} .bank.main .bbs.grid {margin:0 -10px; padding:10px 0;} .bank.main .bbs.grid > li {width:auto; margin:0; padding:0 10px;} .bank.main .bbs.grid > li .txt {letter-spacing:-0.05em;} .bank.main .cardList > li .cardWrap {width:268px; height:380px; border-color:#e7ebec; box-sizing: border-box;} .bank.main .cardList > li.on .cardWrap {top:0; left:0; box-shadow:5px 5px 5px rgba(0,0,0,0.07);} .bank.main .cardList > li.on .cardWrap .cardOver:before {opacity:1; background-color:#003895;} .bank.main .cardList > li .cardWrap .cardDefault > img {position:absolute; left:0; right:0; bottom:0;} .bank.main .cardList > li .cardWrap .cardDefault > *:not(img) {position:relative; z-index:1;} .bank.main .cardList > li .cardWrap .cardOver .btnCArea .dropMenuWrap.on .down, .bank.main .cardList > li .cardWrap .cardOver .btnCArea .down.hover, .bank.main .cardList > li .cardWrap .cardOver .btnCArea .down:hover {color:#003895;} .bank.main .hotKDB li > a {position:relative; display:block; width:364px; height:390px; background-color:#fff; border-radius: 10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.07); box-sizing:border-box; overflow: hidden;} .bank.main .hotKDB li > a .imgWrap {max-width:100%; max-height:190px;} .bank.main .hotKDB li > a .imgWrap img {position:static;} .bank.main .hotKDB li > a .imgWrap:before {content:none;} .bank.main .hotKDB li > a .contWrap ~ .imgWrap {max-height:390px;} .bank.main .hotKDB li > a .contWrap {position:absolute; top:75px; bottom:75px; left:60px; right:60px; display:block !important; width:auto; padding:40px 20px 20px 20px; z-index:1; text-align:center;} .bank.main .hotKDB li > a .contWrap:after {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:#fff; opacity:0.9;} .bank.main .hotKDB li > a .contWrap > * {position:relative; z-index:1;} .bank.main .hotKDB li > a .imgWrap ~ .contWrap {position:static !important; padding:30px; box-sizing:border-box; text-align:left;} .bank.main .hotKDB li > a .imgWrap ~ .contWrap:after {content:none;} .bank.main .hotKDB li > a .contWrap .tit {display:block; height:27px; margin-bottom:14px; font-size:22px; line-height:1.25em; letter-spacing:-0.025em; color:#333; -ms-line-clamp:1; -webkit-line-clamp:1;} .bank.main .hotKDB li > a > *:first-child.contWrap .tit {height:54px; -ms-line-clamp:2; -webkit-line-clamp:2;} .bank.main .hotKDB li > a .contWrap .txt {height:50px; -ms-line-clamp:2; -webkit-line-clamp:2;} /*.bank.main .hotKDB .icoNew, .bank.main .hotKDB .icoEvt {display:block; width:37px; height:12px; margin:0 auto 27px auto; background: url(../img/main/bp/ico_hot_kdb_new.png) no-repeat 0 0; text-indent:-9999px; overflow:hidden; vertical-align:top;} .bank.main .hotKDB .icoEvt {width:43px; background: url(../img/main/bp/ico_hot_kdb_event.png) no-repeat 0 0;} .bank.main .hotKDB li > a .imgWrap ~ .contWrap [class*=ico] {margin:0 0 27px 0;}*/ .bank.main .hotKDB li > a .moreArr {margin-top:16px;} .main .navyC {color:#003895;} .main .csCont .navyC{color:#001f5b;} .bank.main .csCont {margin-top:100px;} /*.main .links.bold > span {display:inline-block; margin-top:2px;}*//* 두번째 라인 100%로 생기는 문제로 주석처리 */ /* 기업뱅킹 */ .bank.main.enterprise .directMenu:after {background:url(../img/main/be/bg_directmenu.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico3 > a:before {background:url(../img/main/be/ico_direct3.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico4 > a:before {background:url(../img/main/be/ico_direct4.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico5 > a:before {background:url(../img/main/be/ico_direct5.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico6 > a:before {background:url(../img/main/be/ico_direct6.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico7 > a:before {background:url(../img/main/be/ico_direct7.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico8 > a:before {background:url(../img/main/be/ico_direct8.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico10 > a:before {background:url(../img/main/be/ico_direct2.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico11 > a:before {background:url(../img/main/be/ico_direct_daechul_hover.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico14 > a:before {background:url(../img/main/be/ico_direct14.png) no-repeat 0 0;} .bank.main.enterprise .directMenu .bottomBtn ul > li.ico15 > a:before {background:url(../img/main/be/ico_direct15.png) no-repeat 0 0;} /* 22.08.12 추가 */ .bank.main.enterprise .carouselSlide .btnPrev{left:-70px;} .bank.main.enterprise .carouselSlide .btnNext{right:-70px; left:auto;} /* 영문 개인뱅킹 */ html.en .bank.main .visualTop .copyArea .bigTit {font-size:58px; letter-spacing:0em;} html.en .bank.main .directMenu ul > li > a {letter-spacing:0;} html.en .bank.main .directMenu ul > li > a:hover > span, html.en .bank.main .directMenu ul > li > a:focus > span {text-decoration:underline;} html.en .bank.main .directMenu .bottomBtn ul > li {width:211px;} html.en .bank.main .directMenu .bottomBtn ul > li.ico3 > a:before {background:url(../img/main/bp/ico_direct9.png) no-repeat 0 0;} html.en .bank.main .directMenu .bottomBtn ul > li.ico4 > a:before {background:url(../img/main/bp/ico_direct10.png) no-repeat 0 0;} html.en .bank.main .directMenu .bottomBtn ul > li.ico5 > a:before {background:url(../img/main/bp/ico_direct11.png) no-repeat 0 0;} html.en .bank.main .directMenu .bottomBtn ul > li.ico6 > a:before {background:url(../img/main/bp/ico_direct8.png) no-repeat 0 0;} /* 영문 기업뱅킹 */ html.en .bank.main.enterprise .directMenu:after {background:url(../img/main/be/bg_directmenu_en.png) no-repeat 0 0;} html.en .bank.main.enterprise .directMenu .bottomBtn ul > li.ico3 > a:before {background:url(../img/main/bp/ico_direct9.png) no-repeat 0 0;} html.en .bank.main.enterprise .directMenu .bottomBtn ul > li.ico4 > a:before {background:url(../img/main/be/ico_direct10.png) no-repeat 0 0;} html.en .bank.main.enterprise .directMenu .bottomBtn ul > li.ico5 > a:before {background:url(../img/main/be/ico_direct11.png) no-repeat 0 0;} html.en .bank.main.enterprise .directMenu .bottomBtn ul > li.ico6 > a:before {background:url(../img/main/bp/ico_direct8.png) no-repeat 0 0;} /* 퇴직연금 */ .brMain .visualTop {position:relative; height:457px; text-align:center;} .brMain .visualTop .mainBg {position:absolute; top:0; bottom:0; left:0; right:0;} .brMain .visualTop .mainBg li {position:absolute; top:0; bottom:0; left:0; right:0; opacity:0; transition: opacity 0.45s linear;} .brMain .visualTop .mainBg li.on {opacity:1;} .brMain .visualTop .copyArea {position:relative; width:1132px; margin:0 auto; padding-top:80px; z-index:1;} .brMain .visualTop .copyArea .bigTit, .brMain .visualTop .copyArea .tit {color:#fff;} .brMain .directMenu {position:relative; width:1196px; margin:-161px auto -37px auto;} .brMain .directMenu .toggleRadio {display:inline-block; margin:30px auto;} .brMain .directMenu .toggleRadio:after {z-index:1;} .brMain .directMenu nav[class*=Btn] {position:relative; width:844px; min-height:220px; padding:11px 0 37px 32px; text-align:center; vertical-align:top;} .brMain .directMenu nav[class*=Btn]:after {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:url(../img/main/br/bg_shapebox_user.png) no-repeat 0 0;} .brMain .leftBtn .menuWrap {overflow: hidden;} .brMain .directMenu.stick .inner {min-height: 100px; transition:transform 0.5s; transform:translate(0,0); z-index: 100} .brMain .directMenu.stick nav.leftBtn .inner.rel > ul {position: absolute; top:0;} .brMain .directMenu.stick nav.leftBtn .inner.rel > ul.be {left:100%;} .brMain .directMenu.stick nav.leftBtn ul > li {width:20%;} /* 20.07.06 아이콘 추가 및 수정 (정현아)*/ .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico1 > a:before {background:url(../img/main/br/ico_direct_bp1.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico2 > a:before {background:url(../img/main/br/ico_direct_bp2.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico3 > a:before {background:url(../img/main/br/ico_direct_bp3.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico4 > a:before {background:url(../img/main/br/ico_direct_bp4.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico5 > a:before {background:url(../img/main/br/ico_direct_bp5.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico6 > a:before {background:url(../img/main/br/ico_direct_bp6_new.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.bp > li.ico7 > a:before {background:url(../img/main/br/ico_direct_bp7_new.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico1 > a:before {background:url(../img/main/br/ico_direct_be1.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico2 > a:before {background:url(../img/main/br/ico_direct_be2.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico3 > a:before {background:url(../img/main/br/ico_direct_be3.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico4 > a:before {background:url(../img/main/br/ico_direct_be4.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico5 > a:before {background:url(../img/main/br/ico_direct_be5.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico7 > a:before {background:url(../img/main/br/ico_direct_be7_new.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico8 > a:before {background:url(../img/main/br/ico_direct_be8_new.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico9 > a:before {background:url(../img/main/br/ico_direct_be9_new.png) no-repeat 0 0;} .brMain .directMenu.stick nav.leftBtn ul.be > li.ico10 > a:before {background:url(../img/main/br/ico_direct_be10_new.png) no-repeat 0 0;} .brMain .directMenu.stick nav.rightBtn {position:absolute; top:0; right:0; width:288px; height:220px; padding:11px 32px 37px 0;} .brMain .directMenu.stick nav.rightBtn:after {background:url(../img/main/br/bg_shapebox_user_bp.png) no-repeat center 0; transition: opacity 0.25s ease-out; opacity: 1; z-index: 2; transition-delay: 0.0s;} .brMain .directMenu.stick nav.rightBtn:before {content:''; top:0; bottom:0; left:0; right:0; position:absolute; background:url(../img/main/br/bg_shapebox_user_be.png) no-repeat center 0; opacity:0; border:none !important; transition: opacity 0.25s ease-out; z-index: 1; transition-delay: 0.2s;} .brMain .directMenu.stick nav.rightBtn .top li {height:125px; vertical-align: middle;} .brMain .directMenu.stick nav.rightBtn .top:after {content:''; position:absolute; bottom:-1px; left:20px; right:20px; border-bottom:1px solid #fff !important; opacity:0.1;} .brMain .directMenu.stick nav.rightBtn .bottom {position:relative; height:95px; padding:0 20px; box-sizing:border-box; z-index: 10} .brMain .directMenu.stick nav.rightBtn .bottom li {width:50%; line-height:1; vertical-align:middle; box-sizing:border-box;} .brMain .directMenu.stick nav.rightBtn .bottom li:first-child {width:auto;} .brMain .directMenu.stick nav.rightBtn .bottom li:before {content:none !important;} .brMain .directMenu.stick nav.rightBtn .bottom li > a {padding:0 10px;} .brMain .directMenu.stick nav.rightBtn .bottom li > a:before {content:''; position:absolute; top:0; bottom:0; left:-1px; border-left:1px solid #4765d0;} .brMain .directMenu.stick nav.rightBtn .bottom li:first-child > a:before {left:auto; right:0; border-left:none; border-right:1px solid #4765d0;} .brMain .directMenu.stick.be .inner {transform:translate(-100%,0)} .brMain .directMenu.stick.be nav.rightBtn:before {opacity: 1; z-index: 2; transition-delay: 0.0s;} .brMain .directMenu.stick.be nav.rightBtn:after {opacity: 0; z-index:1; transition-delay: 0.2s;} .main .boldBox .list.retire > li:before{top:11px !important;} /* 퇴직연금 추천상품 */ .brMain .recommendList .mallProduct .infoTit {padding-bottom: 15px;} .brMain .recommendList .mallProduct .txt {max-width:100%; margin-top:0; opacity:1;} .brMain .recommendList .itemBg01 {background-color:#ecebf7;} .brMain .recommendList .itemBg02 {background-color:#e6f1f7;} .brMain .recommendList .itemBg02:after {content: none;} .brMain .recommendList .itemBg03 {background-color:#f1e9ec;} .brMain .recommendList .itemBg03:after {width:153px; height:130px; background:url(/img/main/br/img_recom_01.png) no-repeat 0 0;} .brMain .openEvent {margin-bottom:-40px;} .brMain .recommendList .mallProduct.rel {border-radius: 8px; overflow: hidden;} /* 영문 퇴직연금 */ html.en .brMain .directMenu.stick ul.bp > li.ico4 > a {min-width:190px;} html.en .brMain .top.motion a:hover span, html.en .brMain .top.motion a:focus span {text-decoration: underline;} html.en .brMain .directMenu.stick ul > li > a:hover > span, html.en .brMain .directMenu.stick ul > li > a:focus > span {text-decoration:underline;} /* notoR */ .bank.main .copyArea .tit strong, .main .directMenu.stick a[class*=log], .main .directMenu.stick a[class*=cert] > span, .bank.main .visualTop .slide .notoR {font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important;} /*===================================== 기간산업안정기금 =====================================*/ .ks.main .sectionWrap{position:relative; height:754px; margin-bottom:85px;} .ks.main .copyArea{padding-top:150px;} .ks.main .navyBox .formContain{height:180px; padding:0; margin-top:335px; background-color: rgba(34, 87, 201, 0.9);} .ks.main .navyBox:after{background: url('/img/main/ks/bg_ks_search_edge.png') no-repeat 0 bottom;} .ks.main .directLink {width: 100%; height:100%; box-sizing: border-box; padding: 0; margin-left:26px; text-align: center;} .ks.main .directLink li {position:relative; float: left; width: 20%; margin-top:40px; text-align: center;} .ks.main .directLink li a {position:relative; display: inline-block; padding-top: 87px; color:#fff; font-size:17px;} .ks.main .directLink .ico {position: absolute; top:0; left:0; right:0; width: 68px; height: 66px; margin:0 auto; overflow: hidden; } .ks.main .directLink .link1 .ico {background: url(/img/main/ks/ks_main_ico1.png) no-repeat; } .ks.main .directLink .link2 .ico {width:71px; background: url(/img/main/ks/ks_main_ico2.png) no-repeat;} .ks.main .directLink .link3 .ico {width:65px;background: url(/img/main/ks/ks_main_ico3.png) no-repeat;} .ks.main .directLink .link4 .ico {width:64px;background: url(/img/main/ks/ks_main_ico4.png) no-repeat;} .ks.main .directLink .link5 .ico {width:56px; background: url(/img/main/ks/ks_main_ico5.png) no-repeat;} /*===================================== 메인공통 알림영역 =====================================*/ .notiCont {position:relative; margin-top:40px; width:530px; color:#fff; white-space: nowrap;} .notiCont strong.tit {position:relative; display:inline-block; padding-right: 22px; vertical-align: top;} .notiCont strong.tit:after {content:""; display:inline-block; position:absolute; top:5px; bottom:3px; right:10px; width:1px; border-right:1px solid #fff; opacity:0.2} .notiCont .list {display: inline-block; vertical-align: top;} .notiCont .list > li {position: relative;} .notiCont .list > li:not(.on) {display: none} .notiCont .list > li .txt{position:relative; display:inline-block; max-width:330px; text-shadow:none; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; box-sizing: border-box;} .notiCont .list > li .links{position:relative; display:inline-block; max-width:330px; color:#666; text-shadow:none; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; box-sizing: border-box;} .notiCont .list > li .links:after{display:none;} .notiCont .list > li .txt:hover, .notiCont .list > li .txt:focus{text-decoration:underline} .notiCont .list > li .links:hover, .notiCont .list > li .links:focus {color:#666; text-decoration:underline} .notiCont .list > li .date {display:inline-block; vertical-align: top; padding-left: 10px;} .notiCont .control {position: absolute; right: 0; top:0px;} .notiCont .control .btnStop, .notiCont .control .btnPlay , .notiCont .control .btnPrev, .notiCont .control .btnNext {position:relative; display:inline-block; width:23px; height:23px; padding:0; min-width:0; border:1px solid rgba(255,255,255,0.6); border-radius:3px; background: none; box-sizing: border-box; transition: border-color 0.15s ease-out, background-color 0.15s ease-out} .notiCont .control .btnStop:hover, .notiCont .control .btnPlay:hover, .notiCont .control .btnStop:focus, .notiCont .control .btnPlay:focus, .notiCont .control .btnPrev:hover, .notiCont .control .btnNext:hover, .notiCont .control .btnPrev:focus, .notiCont .control .btnNext:focus {background-color: rgba(255,255,255,0.2);border-color:#fff} .notiCont .control .btnStop:before, .notiCont .control .btnStop:after {content: ''; position: absolute; top: 6px; left: 7px; bottom: 6px; width:2px; background-color: rgba(255,255,255,0.6); transition: background-color 0.2s ease-out} .notiCont .control .btnStop:hover:before, .notiCont .control .btnStop:focus:before, .notiCont .control .btnStop:hover:after, .notiCont .control .btnStop:focus:after {background-color: rgba(255,255,255,1)} .notiCont .control .btnStop:after {left: auto; right: 7px;} .notiCont .control .btnPlay {display: none} .notiCont .control .btnPlay:after {content: ''; position: absolute; top: 6px; left: 8px; width: 0; height: 0; border-left: 7px solid rgba(255,255,255,0.6); border-right: 7px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0); border-top: 5px solid rgba(0,0,0,0); transition: border-color 0.2s ease-out} .notiCont .control .btnPlay:hover:after, .notiCont .control .btnPlay:focus:after {border-left-color: rgba(255,255,255,1)} .notiCont .control .btnPrev::before,.notiCont .control .btnNext::before, .notiCont .control .btnPrev::after,.notiCont .control .btnNext::after {content:''; display:block; position:absolute; background-size:100%;} .notiCont .control .btnPrev::before,.notiCont .control .btnNext::before {width:19px; height:19px; left:1px; top:1px;} .notiCont .control .btnPrev::before {background-image:url('/img/common/btn_slide_re_pre.png');} .notiCont .control .btnNext::before {background-image:url('/img/common/btn_slide_re_next.png');} .notiCont.c666 {margin-bottom:-5px;} .notiCont.c666 strong.tit {color:#333;} .notiCont.c666 strong.tit:after {border-right:1px solid #efefef; opacity: 1;} .notiCont.c666 .control .btnStop, .notiCont.c666 .control .btnPlay, .notiCont.c666 .control .btnPrev, .notiCont.c666 .control .btnNext {border-color:rgba(0,0,0,0.5)} .notiCont.c666 .control .btnStop:before, .notiCont.c666 .control .btnStop:after {background-color: rgba(0,0,0,0.5);} .notiCont.c666 .control .btnStop:hover:before, .notiCont.c666 .control .btnStop:hover:after, .notiCont.c666 .control .btnStop:focus:before, .notiCont.c666 .control .btnStop:focus:after {background-color: rgba(0,0,0,0.8);} .notiCont.c666 .control .btnPlay:after {border-left-color: rgba(0,0,0,0.5);} .notiCont.c666 .control .btnPlay:hover:after,.notiCont.c666 .control .btnPlay:focus:after {border-left-color: rgba(0,0,0,0.8);} .notiCont.c666 .control .btnStop:hover, .notiCont.c666 .control .btnPlay:hover, .notiCont.c666 .control .btnStop:focus, .notiCont.c666 .control .btnPlay:focus {background-color: rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.8)} .notiCont.c666 .control .btnPrev,.notiCont.c666 .control .btnNext {border-color:rgba(0,0,0,0.5); overflow:hidden;} .notiCont.c666 .control .btnPrev::before,.notiCont.c666 .control .btnNext::before {background-color:rgba(0,0,0,0);} .notiCont.c666 .control .btnPrev::after,.notiCont.c666 .control .btnNext::after {width:23px; height:23px; left:0; top:0; transition:all 0.15s ease-out; z-index:5;} .notiCont.c666 .control .btnPrev::before,.notiCont.c666 .control .btnNext::before {width:19px; height:19px; left:1px; top:1px;} .notiCont.c666 .control .btnPrev::before {background-image:url('/img/common/btn_slide_pre.png'); opacity:0.7;} .notiCont.c666 .control .btnNext::before {background-image:url('/img/common/btn_slide_next.png'); opacity:0.7;} .notiCont.c666 .control .btnPrev:hover::before,.notiCont.c666 .control .btnPrev:focus::before, .notiCont.c666 .control .btnNext:hover::before,.notiCont.c666 .control .btnNext:focus::before {opacity:1;} .notiCont.c666 .control .btnPrev:hover,.notiCont.c666 .control .btnNext:hover, .notiCont.c666 .control .btnPrev:focus,.notiCont.c666 .control .btnNext:focus {border-color:rgba(0,0,0,0.8)} .notiCont.c666 .control .btnPrev:hover::after,.notiCont.c666 .control .btnPrev:focus::after, .notiCont.c666 .control .btnNext:hover::after,.notiCont.c666 .control .btnNext:focus::after {background-color:rgba(0,0,0,0.1);} .moreArr {position:relative; display:inline-block; min-width:100px; padding:0 0 5px 0; text-align:left; box-sizing:border-box;} .moreArr:before {content:''; position:absolute; bottom:0; left:0; width:100%; border-bottom:1px solid #000; opacity:0.3;} .moreArr:after {content:''; position:absolute; bottom:0; right:0; width:9px; height:9px; border:0; background: url('/img/main/ico_btn_arrow.png') no-repeat 0 0; opacity:0.3;} .moreArr:hover, .moreArr:focus {color:#333;} .moreArr:hover:before, .moreArr:hover:after, .moreArr:focus:before, .moreArr:focus:after {opacity:0.6;} .recommendList .moreArr {position:absolute; left:30px; bottom:40px;} /* 20200421 배너추가 */ .main .footArea .rightArea.type_banner{margin-top:-13px; text-align:right} /* 20200424 접근성추가 */ .mainTxtSlide .hexagon:hover, .mainTxtSlide .hexagon:focus, .mainTxtSlide .hexagon:hover:before, .mainTxtSlide .hexagon:focus:before, .mainTxtSlide .hexagon:hover:after, .mainTxtSlide .hexagon:focus:after, .mainTxtSlide .hexagon:hover span, .mainTxtSlide .hexagon:focus span, .mainTxtSlide .hexagon:hover em, .mainTxtSlide .hexagon:focus em{background-color:#7230c8} /* 20230322 퇴직연금 공지사항 넓이 수정 */ .brMain .notiCont {width:630px;} /* KDB 컨설팅 플랫폼 202305 - 메인 변경 */ .main.kc .visual_esg {position:absolute;top:0;left:50%;width:1780px;min-width:1132px;height:685px;margin-left:-890px;background-position:50% 0;background-repeat:no-repeat;box-sizing:border-box;} .main.kc .visual_esg .txt_area {display:inline-block;position:absolute;top:138px;left:325px;color:#fff;font-size:20px;font-weight:bold;letter-spacing:-0.5px;line-height:60px;} .main.kc .visual_esg .txt_area img {display:inline-block;width:119px;height:45px;margin-top:-8px;vertical-align:middle;} .main.kc .visual_esg .txt_area strong {font-size:56px;display:block;letter-spacing:-4px;font-family:'NotoSans Medium', 'Malgun Gothic', '맑은 고딕';} .main.kc .sectionWrap {width:1132px;height:685px;margin:0 auto;padding:126px 0 0 762px;box-sizing:border-box;} .main.kc .sectionWrap .maincnt_area {color:#fff;font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕';font-size:18px;box-sizing:border-box;} .maincnt_area .login_box {width:370px;height:120px;padding:24px 40px 24px 46px;background-color:#1e445c;box-sizing:border-box;} .maincnt_area .login_box .lst_login {padding:22px 0 0;} .maincnt_area .login_box .lst_login li {display:inline-block;width:49%;height:30px;text-align:center;box-sizing:border-box;} .maincnt_area .login_box .lst_login li a {display:block;} .maincnt_area .login_box .lst_login li:first-child a {padding-left:20px;background:url(/img/main/kc/ico_main_login.png) 0 1px no-repeat;} .maincnt_area .login_box .lst_login li:last-child {border-left:#b6cfaa solid 1px;} .maincnt_area .login_box .lst_logout li {box-sizing:border-box;height:20px;font-size:16px;} .maincnt_area .login_box .lst_logout li a {display:block;line-height:1.2;} .maincnt_area .login_box .lst_logout li:nth-child(1) {height:36px;padding-bottom:16px;border-bottom:#4b697d solid 1px;line-height:1;white-space:nowrap;text-align:center;} .maincnt_area .login_box .lst_logout li:nth-child(2) {display:inline-block;width:49%;margin-top:16px;padding-left:40px;background:url(/img/main/kc/ico_main_logout.png) 10px 0 no-repeat;} .maincnt_area .login_box .lst_logout li:nth-child(3) {display:inline-block;width:49%;margin-top:16px;padding-left:46px;border-left:#b6cfaa solid 1px;} .maincnt_area .login_box .lst_logout li:nth-child(1) span+span {color:#81b4ff;} .maincnt_area .lst_esglink {width:370px;margin:22px 0 0;font-size:20px;clear:both;opacity: 0.8;} .maincnt_area .lst_esglink li {padding:0 0 10px;} .maincnt_area .lst_esglink li a {display:block;width:370px;height:90px;padding:30px 46px;letter-spacing:-0.3px;box-shadow:1.5px 2.598px 16px 0px rgba(0, 0, 0, 0.05);box-sizing:border-box;} .maincnt_area .lst_esglink li a:hover {box-shadow:1.5px 2.598px 6px 1px rgba(0, 0, 0, 0.3);} .maincnt_area .lst_esglink li a > span {position:relative;display:inline-block;} .maincnt_area .lst_esglink li a > span:after {content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #fff; transition: all 0.25s ease-out;} .maincnt_area .lst_esglink li a:hover > span:after, .maincnt_area .lst_esglink li a:focus > span:after {left:0; right: 0; width:auto} .maincnt_area .lst_esglink li:nth-child(1) a {background:#2d5b11 url(/img/main/kc/ico_main_esg01.png) 296px 50% no-repeat;} .maincnt_area .lst_esglink li:nth-child(2) a {background:#4c5b11 url(/img/main/kc/ico_main_esg02.png) 295px 50% no-repeat;} .maincnt_area .lst_esglink li:nth-child(3) a {background:#5b4e11 url(/img/main/kc/ico_main_esg03.png) 293px 50% no-repeat;} .kcMain{position:relative;margin-bottom:7px;} .kcMain .full{margin-bottom:0 !important;height:365px;} .kcMain .slideList li{margin-top:0;height:686px;} .kcMain .slideList .wrap{width:1132px;margin:0 auto;padding:156px 0 0;} .kcMain .slideList .wrap .titH1{color:#fff;font-family:"NotoSans Medium", "Malgun Gothic", "맑은 고딕";letter-spacing:-6px;} .kcMain .slideList .wrap p {padding:16px 0 0;font-size:20px;font-weight:bold;color:#fff;letter-spacing:-1px;} .kcMain .slideList .wrap img{display:inline-block;vertical-align:top;margin:9px 4px 0 0;} .kcMain .sectionWrap {margin-top:-239px;padding:0 0 0 16px;z-index:10;} .kcMain .sectionWrap .maincnt_area {float:right;color:#fff;font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕';} .kcMain .sectionWrap .maincnt_area .login_box, .kcMain .sectionWrap .maincnt_area .lst_esglink li a {box-shadow: 1.5px 2.598px 10px 0px rgba(0, 0, 0, 0.3);} .focus-in-expand-fwd { -webkit-animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes focus-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-800px); transform: translateZ(-800px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes focus-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-800px); transform: translateZ(-800px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .text-focus-in { -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both; animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both; } @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /***** 2023 매인개선 *****/ #content.renewal2023 * {box-sizing:border-box;} /* 폰트 */ .renewal2023 .big_tit strong, .renewal2023 .bigTit, .main_visual .main_visual_slide .link, .renewal2023 .main_direct_nav ul li a, .renewal2023 .main_news_event .layout_news_link > ul li a, .renewal2023 .main_news_event .layout_news_nav > div, .renewal2023 .layout_site_text h3, .renewal2023 .round_box .layout_site_text p:nth-child(1), .renewal2023 .round_box .layout_site_text .underline_txt, .renewal2023 .layout_family_site ul li a, .renewal2023 .layout_consult_slide .swiper-slide a > div {font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important;} /*메인 swiper 공통*/ .renewal2023 .swiper_container {position:relative;} .renewal2023 .swiper_container .swiper {width:100%; overflow:hidden;} .renewal2023 button[class^=swiper-button-] {border:none;} .renewal2023 button[class^=swiper-button-].swiper-button-lock {display:none;} .renewal2023 .swiper_container .swiper-button-next, .renewal2023 .swiper_container .swiper-button-prev {position:absolute; width:34px; height:34px; background-repeat:no-repeat; background-size:cover; transform:translateY(-50%); margin:0;} .renewal2023 .swiper_container .swiper-button-prev {left:-17px; background-image:url('/img/main/chhm/btn_new_slide_prev_2.png');} .renewal2023 .swiper_container .swiper-button-next {right:-17px; background-image:url('/img/main/chhm/btn_new_slide_next_2.png');} .renewal2023 button[class^=swiper-button-]:hover, .renewal2023 button[class^=swiper-button-]:focus {background-color:transparent; border-color:transparent;} .renewal2023 .swiper-notification {position: absolute; left:0; top:0; pointer-events:none; opacity:0; z-index: -1000;} /* 커튼배너 */ #content.renewal2023 .topNotice {position:absolute; left:0; top:0; display: block; z-index:500;} .renewal2023 .topNotice .top_notice_conts {width:950px; padding:20px 0; color:#FFFFFF; line-height:1.6;} .renewal2023 .topNotice .closeBtn {top:50%; transform:translateY(-50%);} .renewal2023 .topNotice .remindOff {bottom:auto; top:50%; right:45px; transform:translateY(-50%);} /* 메인배너 */ .renewal2023 .main_visual {position:relative; width:100%; height:750px;} .renewal2023 .main_visual::after {content:''; display:block; position:absolute; right:0; top:1px; width:125px; height:100%; background:url('/img/main/chhm/bg_new_main_edge.png') no-repeat right bottom; z-index:30;} .renewal2023 .main_visual .main_visual_slide .swiper-slide {background-color:#FFFFFF;} .renewal2023 .main_visual .main_visual_slide .sectionWrap {padding:190px 0 75px 0; display:flex; flex-direction:column; align-items:start; background-repeat:no-repeat; background-position:left top; background-size:100% auto;} .renewal2023 .main_visual .main_visual_slide .main_tit_area .big_tit {color:#000000; font-size:54px; line-height:1.3;} .renewal2023 .main_visual .main_visual_slide .main_tit_area .big_tit strong {font-size:58px; line-height:1;} .renewal2023 .main_visual .main_visual_slide .main_tit_area .subTit {color:#666666; margin-top:20px; font-size:18px; font-weight:bold;} .renewal2023 .main_visual .main_visual_slide .invert .main_tit_area .big_tit, .renewal2023 .main_visual .main_visual_slide .invert .main_tit_area .big_tit strong {color:#dedede;} .renewal2023 .main_visual .main_visual_slide .invert .main_tit_area .subTit {color:#dedede;} .renewal2023 .main_visual .main_visual_slide .link {position:relative; display:inline-block; height:35px; margin-top:35px; padding-left:45px; color:#000000;} .renewal2023 .main_visual .main_visual_slide .link::before {content:''; position:absolute; top:10px; left:0; width:33px; height:15px; background:url('/img/main/chhm/ico_link_arrow_indigo.png') no-repeat center center; overflow:hidden;} .renewal2023 .main_visual .main_visual_slide .link:hover:before, .main_visual .main_visual_slide .link:focus:before {animation: mainTxtSlideBtn 0.5s ease-out infinite; -webkit-animation: mainTxtSlideBtn 0.5s ease-out infinite;} .renewal2023 .main_visual .main_visual_slide .link::after {content: ''; position:absolute; top:0px; left:0px; width:33px; height:35px; background:url('/img/main/chhm/ico_link_indigo.png') no-repeat 0 0 ;} .renewal2023 .main_visual .main_visual_slide .link span {position:relative; line-height:35px; transition: color 0.15s ease-in-out;} .renewal2023 .main_visual .main_visual_slide .link span::after {content: ''; position:absolute; width:100%; height:1px; left:0; bottom:0; background:#4a44ce; transform:scaleX(0); transition:transform 0.15s ease-in-out;} .renewal2023 .main_visual .main_visual_slide .link:hover span::after, .main_visual .main_visual_slide .link:focus span::after {transform:scaleX(100%);} .renewal2023 .main_visual .main_visual_slide .link:hover span, .main_visual .main_visual_slide .link:focus span {color:#4a44ce;} .renewal2023 .main_visual .swiper-controls {position:absolute; left:0; bottom:125px; display:flex; flex-direction:row; justify-content:center; align-items:center;} .renewal2023 .main_visual .swiper-controls .swiper-button-prev, .main_visual .swiper-controls .swiper-button-next {position:static; width:23px; height:23px; margin:0; background-repeat:no-repeat; background-position:center center; background-size:auto;} .renewal2023 .main_visual .swiper-controls .swiper-button-prev {background-image:url('/img/main/chhm/btn_new_slide_prev_bl.png');} .renewal2023 .main_visual .swiper-controls .swiper-button-next {background-image:url('/img/main/chhm/btn_new_slide_next_bl.png'); margin-right:10px;} .renewal2023 .main_visual .swiper-controls .swiper-button-prev.swiper-button-disabled, .renewal2023 .main_visual .swiper-controls .swiper-button-next.swiper-button-disabled {opacity:1;} .renewal2023 .main_visual .swiper-controls .swiper-button-prev.swiper-button-disabled {background-image:url('/img/main/chhm/btn_new_slide_prev_dis.png') !important;} .renewal2023 .main_visual .swiper-controls .swiper-button-next.swiper-button-disabled {background-image:url('/img/main/chhm/btn_new_slide_next_dis.png') !important;} .renewal2023 .main_visual .swiper-controls .swiper-pagination {width:auto; margin:-1px 6px 0; color:#000000;} .renewal2023 .main_visual .swiper-controls .swiper-pagination span {margin:0 6px;} .renewal2023 .main_visual .swiper-controls .swiper-pagination .swiper-pagination-total {color:#999999;} .renewal2023 .main_visual .swiper-controls .swiper-button-stop:before, .main_visual .swiper-controls .swiper-button-stop:after {top:6px; left:6px; bottom:5px; width:4px; background-color:#767a7f;} .renewal2023 .main_visual .swiper-controls .swiper-button-stop:hover:before, .main_visual .swiper-controls .swiper-button-stop:hover:after, .renewal2023 .main_visual .swiper-controls .swiper-button-stop:focus:before, .main_visual .swiper-controls .swiper-button-stop:focus:after {background-color:#000000;} .renewal2023 .main_visual .swiper-controls .swiper-button-stop:after {left:auto; right:6px;} .renewal2023 .main_visual .swiper-controls .swiper-button-play:after {border-left:9px solid #767a7f; border-right:9px solid rgba(0,0,0,0); border-bottom:6px solid rgba(0,0,0,0); border-top:6px solid rgba(0,0,0,0);} .renewal2023 .main_visual .swiper-controls .swiper-button-play:hover:after, .main_visual .swiper-controls .swiper-button-play:focus:after {border-left-color:#000000;} .renewal2023 .main_visual .swiper-controls.invert .swiper-button-prev {background-image:url('/img/main/chhm/btn_new_slide_prev_wh.png');} .renewal2023 .main_visual .swiper-controls.invert .swiper-button-next {background-image:url('/img/main/chhm/btn_new_slide_next_wh.png');} .renewal2023 .main_visual .swiper-controls.invert .swiper-pagination {color:#FFFFFF;} .renewal2023 .main_visual .swiper-controls.invert .swiper-button-stop:before, .main_visual .swiper-controls.invert .swiper-button-stop:after {background-color:#FFFFFF;} .renewal2023 .main_visual .swiper-controls.invert .swiper-button-play:after {border-left:9px solid #FFFFFF;} .renewal2023 .main_visual .swiper-controls.invert .swiper-button-play:hover:after, .main_visual .swiper-controls.invert .swiper-button-play:focus:after {border-left-color:#FFFFFF;} /*애니메이션 모션*/ .renewal2023 .main_visual.slide_motion .main_visual_slide .sectionWrap {display:block; height:calc(100% - 92px); padding:0; overflow:hidden;} .renewal2023 .main_visual.slide_motion .main_visual_slide .main_tit_area {position:absolute; left:0; top:0; width:606px; height:100%; z-index:5; background-repeat:no-repeat; background-position:left top; background-size:100% auto; padding-top:216px;} .renewal2023 .main_visual.slide_motion .main_tit_area .big_tit_img {margin-bottom:42px; transform:translateX(20px); opacity:0;} .renewal2023 .main_visual.slide_motion .swiper-slide.active .main_tit_area .big_tit_img {animation: titleMotion 1s ease 0s 1 forwards running; -webkit-animation: titleMotion 1s ease 0s 1 forwards running; -moz-animation: titleMotion 1s ease 0s 1 forwards running;} .renewal2023 .main_visual.slide_motion .main_tit_area .sub_tit_img {opacity:0;} .renewal2023 .main_visual.slide_motion .swiper-slide.active .main_tit_area .sub_tit_img {animation: fadeMotion 0.8s ease-in-out 0.4s 1 forwards running; -webkit-animation: fadeMotion 0.8s ease-in-out 0.4s 1 forwards running; -moz-animation: fadeMotion 0.8s ease-in-out 0.4s 1 forwards running;} .renewal2023 .main_visual.slide_motion .main_tit_area .link_img {display:inline-block; opacity:0;} .renewal2023 .main_visual.slide_motion .swiper-slide.active .main_tit_area .link_img {animation: fadeMotion 0.8s ease-in-out 0.4s 1 forwards running;-webkit-animation: fadeMotion 0.8s ease-in-out 0.4s 1 forwards running; -moz-animation: fadeMotion 0.8s ease-in-out 0.4s 1 forwards running;} .renewal2023 .main_visual.slide_motion .main_visual_image {position:absolute; right:0; top:0; width:526px; height:100%;} .renewal2023 .main_visual.slide_motion .main_visual_image .base_image, .renewal2023 .main_visual.slide_motion .main_visual_image .object_image {position:absolute; right:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:100% 100%; background-position:right top;} .renewal2023 .main_visual.slide_motion .main_visual_image .base_image {opacity:0; z-index:1;} .renewal2023 .main_visual.slide_motion .main_visual_image .object_image {transform:translateY(-40px); opacity:0; z-index:2;} .renewal2023 .main_visual.slide_motion .swiper-slide.active .main_visual_image .base_image {animation: fadeMotion 1.5s ease-in-out 0s 1 forwards running; -webkit-animation: fadeMotion 1.5s ease-in-out 0s 1 forwards running; -moz-animation: fadeMotion 1.5s ease-in-out 0s 1 forwards running;} .renewal2023 .main_visual.slide_motion .swiper-slide.active .main_visual_image .object_image {animation: objectMotion 1.2s ease-in-out 0.8s 1 forwards running; -webkit-animation: objectMotion 1.2s ease-in-out 0.8s 1 forwards running; -moz-animation: objectMotion 1.2s ease-in-out 0.8s 1 forwards running;} @keyframes fadeMotion {from {opacity:0;} to {opacity:1;}} @-webkit-keyframes fadeMotion {from {opacity:0;} to {opacity:1;}} @-moz-keyframes fadeMotion {from {opacity:0;} to {opacity:1;}} @keyframes titleMotion {from {transform:translateX(20px); opacity:0;} to {transform:translateX(0); opacity:1;}} @-webkit-keyframes titleMotion {from {transform:translateX(20px); opacity:0;} to {transform:translateX(0); opacity:1;}} @-moz-keyframes titleMotion {from {transform:translateX(20px); opacity:0;} to {transform:translateX(0); opacity:1;}} @keyframes objectMotion {from {transform:translateY(-40px); opacity:0;} to {transform:translateY(0); opacity:1;}} @-webkit-keyframes objectMotion {from {transform:translateY(-40px); opacity:0;} to {transform:translateY(0); opacity:1;}} @-moz-keyframes objectMotion {from {transform:translateY(-40px); opacity:0;} to {transform:translateY(0); opacity:1;}} /* 메인 공지사항 영역 */ .renewal2023 .main_notice.notiWrap {position:absolute; top:658px; left:50%; width:1132px; height:110px; padding:0; border-radius:10px; transform:translateX(-50%); overflow:hidden; z-index:50;} .renewal2023 .main_notice.notiWrap::after {content:''; display:block; clear:both;} .renewal2023 .main_notice.notiWrap .noti {display:flex; width:50%; height:100%; padding:17px 40px; flex-direction:row; align-items:start;} .renewal2023 .main_notice.notiWrap .noti:nth-of-type(1) {background:#4a44ce; padding:17px 40px;} .renewal2023 .main_notice.notiWrap .noti:nth-of-type(2) {background:#a418c8;} .renewal2023 .main_notice.notiWrap .noti .bigTit {position:static; display:inline-block; padding:0; margin-right:25px;} .renewal2023 .main_notice.notiWrap .noti .bigTit:after {display:none;} .renewal2023 .main_notice.notiWrap .noti ul {width:100%; margin-top:-2px;} .renewal2023 .main_notice.notiWrap .noti li {width:100%; line-height:1.7;} .renewal2023 .main_notice.notiWrap .noti .links {width:320px; font-size:16px; vertical-align:top; color:#FFFFFF;} .renewal2023 .main_notice.notiWrap .noti:nth-of-type(1) .links {width:336px;} .renewal2023 .main_notice.notiWrap .noti .links > span:after {max-width:100%;} .renewal2023 .noti .date {top:3px; color:#e3e3e3; font-family:'Roboto Light', 'NotoSans Light', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important; font-weight: normal;} /* 메인 다이렉트 메뉴*/ .renewal2023 .main_direct_nav {margin-top:55px; padding:0 14px;} .renewal2023 .main_direct_nav ul {display:flex; flex-direction:row; justify-content:space-between;} .renewal2023 .main_direct_nav ul li a {position:relative;; display:block; padding-left:40px; line-height:32px; font-size:16px; color:#4a44ce;} .renewal2023 .main_direct_nav ul li a span {display:block; position:relative;} .renewal2023 .main_direct_nav ul li a:hover span::after {content:''; position:absolute; left:0; bottom:4px; width:100%; height:1px; background:#4a44ce;} .renewal2023 .main_direct_nav ul li a::before {content:''; display:block; position:absolute; left:0; top:0; width:50px; height:30px; background-repeat:no-repeat; background-position:left center;} .renewal2023 .main_direct_nav ul li a.login::before {background-image:url('/img/main/chhm/ico_new_direct_login.png');} .renewal2023 .main_direct_nav ul li a.logout::before {background-image:url('/img/main/chhm/ico_new_direct_logout.png');} .renewal2023 .main_direct_nav ul li a.ico01::before {background-image:url('/img/main/chhm/ico_new_direct_01.png');} .renewal2023 .main_direct_nav ul li a.ico02::before {background-image:url('/img/main/chhm/ico_new_direct_02.png');} .renewal2023 .main_direct_nav ul li a.ico03::before {background-image:url('/img/main/chhm/ico_new_direct_03.png');} .renewal2023 .main_direct_nav ul li a.ico04::before {background-image:url('/img/main/chhm/ico_new_direct_04.png');} .renewal2023 .main_direct_nav ul li a.ico05::before {background-image:url('/img/main/chhm/ico_new_direct_05.png');} .renewal2023 .main_direct_nav ul li a.ico06::before {background-image:url('/img/main/chhm/ico_new_direct_06.png');} /* news&event 영역 */ .renewal2023 .main_news_event {padding-top:130px;} .renewal2023 .main_news_event .secTitle {margin:0 0 60px 0; width:100%; height:44px; background:url('/img/main/chhm/img_new_title_01.png') no-repeat left top;} .renewal2023 .main_news_event .gridView {margin-bottom:80px;} .renewal2023 .main_news_event .gridView::after {content:''; display:block; clear:both;} .renewal2023 .main_news_event .bannerArea {position:relative; width:732px; height:360px; margin:0 40px 0 0; padding:0; border:none;} .renewal2023 .main_news_event .bannerArea .slideList {width:100%; overflow:visible;} .renewal2023 .main_news_event .bannerArea .slideList li a {display:block; height:360px; padding:0; border-radius:10px; background-color:#FFFFFF; background-repeat:no-repeat; background-size:cover; overflow:hidden;} .renewal2023 .main_news_event .bannerArea .swiper-controls {bottom:-37px;} .renewal2023 .main_news_event .swiper-pagination-bullet:before {background-color:#333333;} .renewal2023 .main_news_event .swiper-pagination-bullet.swiper-pagination-bullet-active:before {opacity:1;} .renewal2023 .main_news_event .swiper-button-stop:before {left:6px;} .renewal2023 .main_news_event .swiper-button-stop:before, .renewal2023 .main_news_event .swiper-button-stop:after {width:3px; height:10px; background-color:#333333;} .renewal2023 .main_news_event .swiper-button-play:after, .renewal2023 .main_news_event .swiper-button-play:hover:after, .renewal2023 .main_news_event .swiper-button-play:focus:after {border-left: 7px solid #333333;} .renewal2023 .main_news_event button[class^=swiper-button-]::after, .renewal2023 .main_news_event button[class^=swiper-button-]::before {top:7px;} .renewal2023 .main_news_event .bannerArea.effect_over .slideList a img {display:block; width:100%; height:100%; transition:transform ease-in-out 0.25s;} .renewal2023 .main_news_event .bannerArea.effect_over .slideList a:hover img, .renewal2023 .main_news_event .bannerArea.effect_over .slideList a:focus img {transform:scale(1.1);} .renewal2023 .notice_grid {float:right; width:360px; border-top:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;} .renewal2023 .notice_grid .noti {padding-top:40px; padding-bottom:40px;} .renewal2023 .notice_grid .noti .bigTit {display:block; margin-bottom:21px; padding:0 10px 0 0; border-bottom:none; color:#000000; background:url('/img/main/chhm/ico_new_notice_link.png') no-repeat right center;} .renewal2023 .notice_grid .noti .newsList li {display:flex; width:100%; margin-top:6px; flex-direction:row; align-items:center;} .renewal2023 .notice_grid .noti .newsList .links > span {color:#666666 !important;} .renewal2023 .notice_grid .noti li .date {margin-top:3px; color:#999999;} .renewal2023 .notice_grid .noti ~ .noti {margin-top:0;} .renewal2023 .layout_news_link {height:75px; display:flex; flex-direction:row;} .renewal2023 .layout_news_link > ul {width:660px; display:flex; flex-direction:row;} .renewal2023 .layout_news_link > ul li {flex-grow:1; border-right:1px solid #ccc; text-align:center;} .renewal2023 .layout_news_link > ul li a {display:block; width:60px; height:100%; margin:0 auto; padding-top:55px; color:#333333; transition:all 0.12s ease-out;} .renewal2023 .layout_news_link > ul li a:hover, .renewal2023 .main_news_event .layout_news_link > ul li a:focus {color: #0063cc;} .renewal2023 .layout_news_link > ul li:nth-child(1) a {background:url('/img/main/chhm/ico_new_news_01.png') no-repeat center 4px;} .renewal2023 .layout_news_link > ul li:nth-child(2) a {background:url('/img/main/chhm/ico_new_news_02.png') no-repeat center 4px;} .renewal2023 .layout_news_link > ul li:nth-child(3) a {background:url('/img/main/chhm/ico_new_news_03.png') no-repeat center 4px;} .renewal2023 .layout_news_link > ul li:nth-child(1) a:hover , .renewal2023 .layout_news_link > ul li:nth-child(1) a:focus {background:url('/img/main/chhm/ico_new_news_on_01.png') no-repeat center 4px;} .renewal2023 .layout_news_link > ul li:nth-child(2) a:hover, .renewal2023 .layout_news_link > ul li:nth-child(2) a:focus {background:url('/img/main/chhm/ico_new_news_on_02.png') no-repeat center 4px;} .renewal2023 .layout_news_link > ul li:nth-child(3) a:hover, .renewal2023 .layout_news_link > ul li:nth-child(3) a:focus {background:url('/img/main/chhm/ico_new_news_on_03.png') no-repeat center 4px;} .renewal2023 .layout_news_link .layout_news_nav {display:flex; flex-direction:row;} .renewal2023 .layout_news_link .layout_news_nav > div {width:205px; height:100%; padding-top:55px; color:#333333; text-align:center; background:url('/img/main/chhm/ico_new_news_04.png') no-repeat center 4px;} .renewal2023 .layout_news_link .layout_news_nav > ul {width:265px; height:100%; margin-top:5px; overflow-Y:auto; overflow-x:hidden;} .renewal2023 .layout_news_link .layout_news_nav > ul::-webkit-scrollbar {width:8px;} .renewal2023 .layout_news_link .layout_news_nav > ul::-webkit-scrollbar-thumb {border-radius:4px; background-color:#c12ee7;} .renewal2023 .layout_news_link .layout_news_nav > ul::-webkit-scrollbar-track {border-radius:4px; background-color:#f2f2f2;} .renewal2023 .layout_news_link .layout_news_nav > ul li {position:relative; padding-left:15px;} .renewal2023 .layout_news_link .layout_news_nav > ul li::before {content:''; display:block; position:absolute; left:0; top:50%; width:3px; height:3px; margin-top:-1.5px; background:#cccccc;} .renewal2023 .layout_news_link .layout_news_nav > ul li a {transition:all 0.12s ease-out;} .renewal2023 .layout_news_link .layout_news_nav > ul li a:hover, .renewal2023 .layout_news_link .layout_news_nav > ul li a:focus {color: #0063cc;} .renewal2023 .newsBottom .swiper-slide {display:flex; flex-direction:row; justify-content:space-between; background-color:#FFFFFF;} .renewal2023 .newsBottom .swiper-slide a {display:block; width:556px; height:130px; border-radius:18px; overflow:hidden;} .renewal2023 .newsBottom .swiper-slide a img {width:100%; height:100%;} .renewal2023 .newsBottom .swiper-controls {position:static; margin-top:13px;} .renewal2023 .newsBottom.effect_over .swiper-slide a img {transition:transform ease-in-out 0.25s;} .renewal2023 .newsBottom.effect_over .swiper-slide a:hover img, .renewal2023 .newsBottom.effect_over .swiper-slide a:focus img {transform:scale(1.1);} /* special KDB 영역 */ .renewal2023 .main_special {padding-top:123px;} .renewal2023 .main_special .secTitle {margin:0 0 50px 0; width:100%; height:55px; background:url('/img/main/chhm/img_new_title_02.png') no-repeat left top;} .renewal2023 .layout_site_box {width:100%; height:560px; display:flex; flex-direction:row; margin-bottom:90px;} .renewal2023 .layout_site_box .layout_site_col {width:395px; margin:0 40px 0 -44px; padding-left:44px; background-repeat:no-repeat; background-position:center; background-size:contain;} .renewal2023 .layout_site_box .layout_site_col a {display:block; width:100%; height:100%; padding:40px; border-radius:18px; color:#FFFFFF; overflow:hidden;} .renewal2023 .layout_site_box .layout_site_col .layout_site_text {letter-spacing:-0.5px;} .renewal2023 .layout_site_box .layout_site_col .layout_site_text p {margin-bottom:10px; font-size:18px;} .renewal2023 .layout_site_box .layout_site_col .layout_site_text h3 {margin-bottom:20px; font-size:42px;} .renewal2023 .layout_site_box .layout_site_col .layout_site_text p:nth-of-type(2) {font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important;} .renewal2023 .layout_site_text {letter-spacing:-0.5px;} .renewal2023 .layout_site_text h3 {line-height:1;} .renewal2023 .layout_site_box > ul {width:743px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-content:space-between; align-items:start; flex:1;} .renewal2023 .layout_site_box .round_box {width:350px; height:260px;} .renewal2023 .layout_site_box .round_box a {position:relative; display:block; width:100%; height:100%; padding:40px; box-shadow:0 0 0 1px inset #acafb2; border-radius:18px; background-color:#FFFFFF; background-repeat:no-repeat; background-size:contain; overflow:hidden; transition:all 0.2s ease-in-out;} .renewal2023 .layout_site_box .round_box .layout_site_text p:nth-child(1) {color:#0086cc; margin-bottom:8px;} .renewal2023 .layout_site_box .round_box .layout_site_text h3 {color:#000000; font-size:24px; margin-bottom:20px; transition:all 0.2s ease-in-out;} .renewal2023 .layout_site_box .round_box .layout_site_text h3 + p {color:#666666;} .renewal2023 .layout_site_box .round_box .layout_site_text .underline_txt {position:absolute; left:40px; bottom:40px; font-size:14px; color:#333333; border-bottom:1px solid #333333; letter-spacing:-1px;} .renewal2023 .layout_site_box > ul > li:nth-child(1) a:hover, .renewal2023 .layout_site_box > ul > li:nth-child(1) a:focus {box-shadow:0 0 0 2px inset #4fb4c8;} .renewal2023 .layout_site_box > ul > li:nth-child(1) a:hover h3, .renewal2023 .layout_site_box > ul > li:nth-child(1) a:focus h3 {color:#4fb4c8;} .renewal2023 .layout_site_box > ul > li:nth-child(2) a:hover, .renewal2023 .layout_site_box > ul > li:nth-child(2) a:focus {box-shadow:0 0 0 2px inset #2690d0;} .renewal2023 .layout_site_box > ul > li:nth-child(2) a:hover h3, .renewal2023 .layout_site_box > ul > li:nth-child(2) a:focus h3 {color:#2690d0;} .renewal2023 .layout_site_box > ul > li:nth-child(4) a:hover, .renewal2023 .layout_site_box > ul > li:nth-child(4) a:focus {box-shadow:0 0 0 2px inset #769c00;} .renewal2023 .layout_site_box > ul > li:nth-child(4) a:hover h3, .renewal2023 .layout_site_box > ul > li:nth-child(4) a:focus h3 {color:#769c00;} .renewal2023 .special_slide, .renewal2023 .special_slide .swiper {width:350px;} .renewal2023 .special_slide .swiper-controls {position:absolute; left:0; bottom:-40px; width:100%; height:40px; text-align:center;} .renewal2023 .special_slide .swiper-controls .swiper-pagination {display:inline-block; margin-top:6px;} .renewal2023 .special_slide .swiper-controls .swiper-pagination .swiper-pagination-bullet {width:10px; height:10px; margin-right:10px; vertical-align:bottom; background:#e5e5e5 !important; opacity:1;} .renewal2023 .special_slide .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#333333 !important;} .renewal2023 .special_slide .swiper-controls .swiper-button-stop, .renewal2023 .special_slide .swiper-controls .swiper-button-play {margin-top:10px;} .renewal2023 .special_slide .swiper-controls .swiper-button-stop:before, .renewal2023 .special_slide .swiper-controls .swiper-button-stop:after {width:3px; height:10px; background-color:#333333;} .renewal2023 .special_slide .swiper-controls .swiper-button-play:after, .renewal2023 .special_slide .swiper-controls .swiper-button-play:hover:after, .renewal2023 .special_slide .swiper-controls .swiper-button-play:focus:after {border-left: 7px solid #333333;} .renewal2023 .special_slide .swiper .swiper-slide a:hover, .renewal2023 .special_slide .swiper .swiper-slide a:focus {box-shadow:0 0 0 2px inset #5956d7;} .renewal2023 .special_slide .swiper .swiper-slide a:hover h3, .renewal2023 .special_slide .swiper .swiper-slide a:focus h3 {color:#5956d7;} .renewal2023 .layout_family_site.swiper_container .swiper {width:1066px; height:40px; margin:0 auto;} .renewal2023 .layout_family_site ul li {text-align:center;} .renewal2023 .layout_family_site ul li a {position:relative; display:inline-block; height:100%; line-height:40px; padding-left:50px; color:#333333; transition:all 0.15s ease-in-out;} .renewal2023 .layout_family_site ul li a img {position:absolute; left:0; top:50%; transform:translateY(-50%);} .renewal2023 .layout_family_site ul li a img.on {display:none;} .renewal2023 .layout_family_site ul li a:hover, .renewal2023 .layout_family_site ul li a:focus {color:#0063cc;} /*기업금융정보*/ .renewal2023 .section_line {border-bottom:1px solid #e7e7e7;} .renewal2023 .main_consult {padding:130px 0 130px 0;} .renewal2023 .mainCopyWrap {text-align:left; margin-bottom:60px; padding-top:130px; background:url('/img/main/chhm/img_new_title_03.png') no-repeat left top;} .renewal2023 .mainCopyWrap .comment {font-size:20px;} .renewal2023 .layout_search_box {position:relative; width:100%; min-height:280px; margin-bottom:60px; padding:80px 395px 80px 80px; border-radius:20px 20px 0 20px; background:#0063cc url('/img/main/chhm/bg_new_search_edge.png') no-repeat right bottom;} .renewal2023 .layout_search_box::after {content:''; position:absolute; display:block; width:377px; height:373px; right:37px; top:-135px; background:url('/img/main/chhm/obj_new_search.png') no-repeat center/100%;} .renewal2023 .layout_search_box .search {margin:0 0 15px 0; text-align:left;} .renewal2023 .layout_search_box .search .btnSearch {width:124px; border-radius:0 6px 6px 0; background:#003b7a;} .renewal2023 .layout_search_box .search .btnSearch::after {display:none;} .renewal2023 .layout_search_box .search .delete.rel, .renewal2023 .layout_search_box .search .btnSearch {box-shadow:10px 10px 30px 0 rgba(0,0,0,0.2);} .renewal2023 .layout_search_box > ul {text-align:left;} .renewal2023 .layout_search_box > ul > li {display:inline-block; margin-right:10px; margin-top:10px;} .renewal2023 .layout_search_box > ul > li > a {display:inline-block; padding:0 20px; line-height:38px; text-align:center; font-weight:bold; color:#333333; border-radius:19px; background:#FFFFFF;} .renewal2023 .layout_consult_slide .swiper {border-right:1px solid #f2f2f2;} .renewal2023 .layout_consult_slide .swiper-slide {min-height:190px; height:auto; border-left:1px solid #f2f2f2;} .renewal2023 .layout_consult_slide .swiper-slide a {position:relative; display:block; width:100%; height:100%; padding:150px 0 0 0; background-repeat:no-repeat; background-position:25px top;} .renewal2023 .layout_consult_slide .swiper-slide a > div {position:absolute; left:0; top:75px; width:100%; padding:10px 20px 10px 25px; color:#333333; background-color:transparent; background-image:url('/img/main/chhm/ico_new_consult_link.png'); background-repeat:no-repeat; background-position:right 15px center; transition:all 0.2s ease-in-out;} .renewal2023 .layout_consult_slide .swiper-slide a:hover > div, .renewal2023 .layout_consult_slide .swiper-slide a:focus > div {color:#FFFFFF; background-color:#0063cc; box-shadow:2px 2px 10px 2px rgba(0,0,0,0.2); z-index:10;} .renewal2023 .layout_consult_slide .swiper-slide a > p {width:100%; padding:0 20px 0 25px; font-size:16px; color:#666666;}