.con_box{padding:20px; background:#f7f7f7;} .con_box_type{padding:35px 45px; background:#f7f7f7;} @media (max-width: 768px){ .con_box{padding:15px;} .con_box_type{padding:15px; background:#f7f7f7;} } .number_tit{font-size:28px; color:#335faa; font-weight: 500; margin:70px 0 0 0;} #cms-content .h3 + .number_tit{margin-top:-10px;} #cms-content .number_tit + .h4{margin:10px 0 15px 0;} #cms-content .h3 + ul[class^="list_ul02"]{margin-top: -20px;} @media (max-width: 768px){ #cms-content .h3 + ul[class^="list_ul02"]{margin-top:20px;} } .b-file-box{ margin-top:-1px;} .b-file-box ul{} .b-file-box ul li{background: #f2f2f2; margin-bottom: 3px; font-size: 16px; padding: 10px 16px; align-items: center; display: flex;} .b-file-box ul li a.file-down-btn{padding:0 0 0 25px;background:url(/_res/hf/ko/img/icon_file.gif) no-repeat 0 6px; display:inline-block; font-weight: 500;} .b-file-box ul li a:hover{color:#095d3b;} .b-file-box ul li a{color: #222; padding-left: 35px; position: relative; } .b-file-box .file_btn{margin-left:25px;} .b-file-box .file_btn a{padding-left:0; background:none;} .b-file-box .file_btn span{padding:0px 12px; border:1px solid #d7dae1; display:inline-block !important;} .b-file-box .file_btn span{ font-size:14px; color:#555555; display: inline-block; background:#fff url(/_res/hf/ko/img/icon_view.gif) no-repeat 9px center; padding-left:30px;} .b-file-box .file_btn span.file-down{margin-left:5px; display:inline-block; color:#fff; border:none; background:#0154a4 url(/_res/hf/ko/img/product_icon_down.png) no-repeat 9px center; } .bn-list-faq01.type01 .b-quest-box > div .b-btn-modify{min-width: 60px !important; color: #333 !important; font-weight: 500;} @media screen and (max-width: 768px){ .bn-list-faq01.type01 .b-ans-box_noqna > div{padding:30px !important;} .b-file-box ul li { padding: 10px 10px; display: block;} .bn-view-common01 .b-file-box ul li{padding: 13px 23px;display: block;} .bn-view-common01 .b-file-box ul li a{} } /*윗첨자*/ .superscript { vertical-align: super; font-size: 0.7em; /* 본문 글자 크기의 70% 수준으로 축소 */ } /*아래첨자*/ .subscript { vertical-align: sub; font-size: 0.7em; } /*(일반) 상품소개*/ .product_wrap{position: relative; background:#f0f1f4; border-radius:5px; /*20260309 임강은과장요청 padding:55px 55px 55px 26%;*/padding:55px; margin-bottom:70px; overflow: hidden;} .product_wrap:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img.png) no-repeat 0 0;*/background:none; position: absolute; top: 80px; left: 0px; display: block; width: 340px; height: 804px;} .product_wrap.bg_02:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img02.png) no-repeat 0 0;*/ background:none; position: absolute; top: 60px; left: 60px; display: block;} .product_wrap.bg_03:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img03.png) no-repeat 0 0;*/ background:none; position: absolute; top: 60px; left: 50px; display: block;} .product_wrap.bg_04:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img04.png) no-repeat 0 0;*/ background:none; position: absolute; top: 60px; left: 84px; display: block;} .product_wrap.bg_05:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img05.png) no-repeat 0 0;*/ background:none; position: absolute; top: 60px; left: 60px; display: block;} .product_wrap.bg_06:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img06.png) no-repeat 0 0;*/ background:none; position: absolute; top: 60px; left: 60px; display: block;} .product_wrap.bg_07:before{ content: ''; /*20260309 임강은과장요청 background: url(/_res/hf/ko/img/product_img07.png) no-repeat 0 0;*/ background:none; position: absolute; top: 50px; left: 37px; display: block;} .product_wrap .h2{margin: 30px 0 10px 0px !important; font-size:26px !important; color: #383b48 !important; font-weight: 600 !important;;} .product_top{display: inline-flex;} .product_top dl{position: relative; margin-right:20px;background:#fff; border-radius:10px; padding:130px 20px 25px 25px; width:calc(33.3% - 15px);} .product_top dl:after{content:''; background:url(/_res/hf/ko/img/product_icon.png); width:65px; height:65px; margin-left:-32px; position: absolute;top: 50px; left: 50%;} .product_top dl:nth-child(1):after{ background-position: -37px 0px;} .product_top dl:nth-child(2):after{ background-position: -203px 0px; width:60px; height:65px;} .product_top dl:nth-child(3):after{ background-position: -353px 0px; width:60px; height:70px;} .product_top dl:last-child{margin-right:0;} .product_top dt{color:#4078cc; font-weight: 600; font-size:23px; margin-bottom:20px; text-align: center; justify-content: space-evenly;} .product_top dd{font-size:17px; color:#333; line-height: 25px;} .product_top dd li{font-size:17px; line-height: 20px; padding-left: 10px; color:#333;} .product_top dd li:before{width: 3px; height: 3px; top:7px;} .product_wrap.bg_07 .product_top dd{text-align: center;} .product_wrap.bg_07 ol.list_onum02{padding-right:160px;} .product_wrap .btn_recommend{position: absolute;right: 50px; line-height: 123px; bottom: 140px; border-radius:50%; background:#5ea31e;width:123px; height:123px; color:#fff;} .product_wrap .btn_recommend a{display:block; color:#fff; font-size:22px; text-align: center;} .product_wrap .btn_recommend a span{line-height:24px; padding-bottom:22px; min-height:66px; background:url(/_res/hf/ko/img/btn_search_w.png) no-repeat bottom center; background-size:20px; display: block; transform: translateY(40%); font-weight: 500} .product_wrap .tbl_wrap{border:none;} .product_wrap .tbl thead tr:first-child th{background:#5991c6; color:#fff; padding:15px 0; border-bottom:none;} .product_wrap .tbl tbody th{background:#dee2e9; border-left:0; border-bottom:#c7d2dc;} .product_wrap .tbl td{padding:20px; border: 1px solid #c7d2dc;} .product_wrap .tbl thead th{border-right:1px solid #617286; border-top:0;} .product_wrap .tbl td:last-child, .tbl thead th:last-child { border-right: none;} .product_wrap p{line-height:28px;} .product_wrap ol[class^="list_onum02"] li {padding-left: 25px; margin-top: 5px; position: relative; line-height: 25px; color: #87888d;} /*연금상품일때*/ #content.annuity_layout .product_top dt{font-size:29px;} #content.annuity_layout .product_top dd{font-size:22px; line-height: 30px;} #content.annuity_layout .product_top .product_wrap .h2{font-size:34px;} #content.annuity_layout .product_wrap ol[class^="list_onum02"] li{line-height:33px} #content.annuity_layout .product_wrap ol[class^="list_onum02"] li:before{top:6px;} /*주택연금*/ .explanation_wrap { text-align: center;} .explanation_wrap .subject{font-size:57px; font-weight: 600; margin-bottom:35px; color:#000; text-align: center } .explanation_wrap .u-tab03{position:relative; margin-bottom:60px;} .explanation_wrap .u-tab03 ul{padding-top:1px;overflow:hidden; font-size:0 } .explanation_wrap .u-tab03 ul li{ text-align: center; display:inline-block; vertical-align:middle;position:relative; z-index:1; margin-right:6px;} .explanation_wrap .u-tab03 ul li a{border:2px solid #ddd; padding:20px 0; width:200px; border-radius:10px; display:block; font-size:29px; color:#333; font-weight: 600} .explanation_wrap .u-tab03 ul li a span {display:inline-block; vertical-align: middle;background-size: 78px;width:38px; height:38px; margin-right:10px; background:url(/_res/hf/ko/img/explanation_icon.png) no-repeat 0 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;} .explanation_wrap .u-tab03 ul li a span.img{background-position:-38px 0px;} .explanation_wrap .u-tab03 ul li a span.reserve{background-position:-76px 0px;} .explanation_wrap .u-tab03 ul li a span.search{background-position:-114px 0px;} .explanation_wrap .u-tab03 ul li a span.product{background-position:-155px 0px;} .explanation_wrap .u-tab03 ul li a span.diagram{background-position:-198px 0px;} .explanation_wrap .u-tab03 ul li.active a, .explanation_wrap .u-tab03 ul li a:hover{border:2px solid #0071e3; color:#0071e3; box-shadow: 0 0 0 4px #0071e3 inset;} .explanation_wrap .u-tab03 ul li.active a span.avi, .explanation_wrap .u-tab03 ul li a:hover span.avi{background-position:0 -38px;} .explanation_wrap .u-tab03 ul li.active a span.img, .explanation_wrap .u-tab03 ul li a:hover span.img{background-position:-38px -38px;} .explanation_wrap .u-tab03 ul li.active a span.reserve, .explanation_wrap .u-tab03 ul li a:hover span.reserve{background-position:-78px -38px;} .explanation_wrap .u-tab03 ul li.active a span.search, .explanation_wrap .u-tab03 ul li a:hover span.search{background-position:-114px -38px;} .explanation_wrap .u-tab03 ul li.active a span.product, .explanation_wrap .u-tab03 ul li a:hover span.product{background-position:-155px -38px;} .explanation_wrap .u-tab03 ul li.active a span.diagram, .explanation_wrap .u-tab03 ul li a:hover span.diagram{background-position:-198px -38px;} /*전략체계 및 노력용 탭*/ .explanation_wrap .u-tab05{position:relative; margin-bottom:60px;} .explanation_wrap .u-tab05 ul{padding-top:1px;overflow:hidden; font-size:0 } .explanation_wrap .u-tab05 ul li{ text-align: center; display:inline-block; vertical-align:middle;position:relative; z-index:1; margin-right:6px;} .explanation_wrap .u-tab05 ul li a{border:2px solid #ddd; padding:20px 0; width:250px; border-radius:10px; display:block; font-size:29px; color:#333; font-weight: 600} .explanation_wrap .u-tab05 ul li a span {display:inline-block; vertical-align: middle;background-size: 78px;width:38px; height:38px; margin-right:10px;} .explanation_wrap .u-tab05 ul li a span.img{background-position:-38px 0px;} .explanation_wrap .u-tab05 ul li a span.reserve{background-position:-76px 0px;} .explanation_wrap .u-tab05 ul li a span.product{background-position:-114px 0px;} .explanation_wrap .u-tab05 ul li.active a, .explanation_wrap .u-tab05 ul li a:hover{border:2px solid #0071e3; color:#0071e3; box-shadow: 0 0 0 4px #0071e3 inset;} .explanation_wrap .u-tab05 ul li.active a span.avi, .explanation_wrap .u-tab05 ul li a:hover span.avi{background-position:0 -38px;} .explanation_wrap .u-tab05 ul li.active a span.img, .explanation_wrap .u-tab05 ul li a:hover span.img{background-position:-38px -38px;} .explanation_wrap .u-tab05 ul li.active a span.reserve, .explanation_wrap .u-tab05 ul li a:hover span.reserve{background-position:-78px -38px;} .explanation_wrap .u-tab05 ul li.active a span.product, .explanation_wrap .u-tab05 ul li a:hover span.product{background-position:-114px -38px;} .service_movie .suject{font-size:44px; font-weight: 600; color:#000; margin-bottom:25px;} .service_wrap { margin-top:50px;} .service_wrap .service_tit{color:#000; font-size:50px; font-weight: 600; letter-spacing: -1px; line-height:55px; margin-bottom:20px;} .service_wrap ul{ margin:0 -8px;} .service_wrap ul li{float:left; width:calc(25% - 16px); margin:0 8px; margin-bottom:45px;} .service_wrap ul li span{display:block;} .service_wrap ul li span.img{} .service_wrap ul li span.img img{width:100%; height:157px;} .service_wrap ul li span.subject{font-size:20px; color:#333; overflow: hidden;word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; height: 55px; line-height: 28px; margin-top:10px; text-align: center;} .r_tit{font-size:32px; color:#000; text-align: center; margin-bottom:32px;} .consultation_wrap{display: flex;justify-content: center;align-items: center; margin-bottom:50px;} .consultation_wrap .consultation {width: 320px; padding: 56px 60px; margin: 0 10px; text-align: center;} .consultation_wrap .consultation .subject{font-size:36px; color:#333; font-weight: 600; margin-bottom:200px;} .consultation_wrap .consultation.bg_01{background:#f7f7f8 url(/_res/hf/ko/img/sub03_01_01_01_icon01.png) no-repeat 50% 150px } .consultation_wrap .consultation.bg_02{background:#f7f7f8 url(/_res/hf/ko/img/sub03_01_01_01_icon02.png) no-repeat 50% 150px } .consultation_wrap .consultation.bg_03{background:#f7f7f8 url(/_res/hf/ko/img/sub03_01_01_01_icon03.png) no-repeat 50% 150px } .consultation_btn{color:#fff; font-size:22px; background:#007ec7; font-weight: 600; display:block; padding:10px 0;} .btn_call{width:400px; color:#fff; text-align: center; padding:15px 0; background:#01407c; font-size:26px; margin:0 auto; line-height:22px;} .btn_call a{color:#fff; background:url(/_res/hf/ko/img/phone.png) no-repeat 0 5px; padding-left:35px; line-height:22px;} .consultation_btn:hover, .btn_call a:hover{color:#fff;} @media (max-width: 1150px){ #content.annuity_layout .product_top dt{font-size:22px;} #content.annuity_layout .product_top dd{font-size:17px; line-height: 25px;} #content.annuity_layout .product_top .product_wrap .h2{font-size:26px;} #content.annuity_layout .product_wrap ol[class^="list_onum02"] li{line-height: 25px;} #content.annuity_layout .product_wrap ol[class^="list_onum02"] li:before{top:3px;} .explanation_wrap .subject{font-size:40px;} .consultation_btn{font-size:17px;} .service_wrap ul li span.subject{font-size:16px; height: 40px; line-height: 20px;} .service_movie .suject{font-size:34px;} .service_wrap .service_tit{font-size:38px;} .explanation_wrap .u-tab03 ul li a{font-size:22px; width: 170px;} /*전략체계 및 노력용 탭*/ .explanation_wrap .u-tab05 ul li a{font-size:22px; width: 170px;} .product_wrap .btn_recommend a{font-size:17px;} .btn_call{font-size:20px; width:346px;} } @media (max-width: 1100px){ .product_wrap{padding:30px;} .product_wrap:before, .product_wrap.bg_02:before, .product_wrap.bg_03:before, .product_wrap.bg_04:before, .product_wrap.bg_05:before, .product_wrap.bg_06:before, .product_wrap.bg_07:before{display:none;} } @media (max-width: 900px){ .consultation_wrap{display:block;} .consultation_wrap .consultation{width:100%; margin: 0 0 20px 0; padding: 30px 30px 30px 130px;} .consultation_wrap .consultation .subject{margin-bottom:10px; font-size:20px;} .consultation_btn{ padding:5px 0;} .btn_call{width:100%;} .r_tit{font-size:18px;} .consultation_wrap .consultation.bg_01{background:#f7f7f8 url(/_res/hf/ko/img/sub03_01_01_01_icon01.png) no-repeat 36px center; background-size:54px;} .consultation_wrap .consultation.bg_02{background:#f7f7f8 url(/_res/hf/ko/img/sub03_01_01_01_icon02.png) no-repeat 36px center; background-size:54px;} .consultation_wrap .consultation.bg_03{background:#f7f7f8 url(/_res/hf/ko/img/sub03_01_01_01_icon03.png) no-repeat 36px center; background-size:54px;} } @media (max-width: 768px){ .product_wrap{padding:25px; margin-bottom: 30px;} .product_top{ display: block;} .product_top dl{padding:20px 20px 20px 25px; width:100%; margin-bottom:10px;} .product_top dl:after{display:none;} .product_top dt{margin-bottom: 10px; text-align: left; font-size:21px;} .product_explanation .memo{margin-right:20px;} .product_explanation .btn_viewer{padding:5px 10px; font-size:13px; width:109px; box-sizing: border-box; height: 45px;} .product_explanation .btn_viewer:after{margin-left:5px;} .product_wrap.bg_07 .product_top dd { text-align: left;} .product_wrap.bg_07 ol.list_onum02{padding-right:0;} .product_wrap .btn_recommend{ margin: 50px auto;position: relative; right: auto; bottom: auto;} .explanation_wrap .subject{font-size:26px; margin-bottom: 19px;} .explanation_wrap .u-tab03{margin-bottom: 40px;} .explanation_wrap .u-tab03 ul li a{font-size:17px; padding:10px 0; width:115px;} .explanation_wrap .u-tab03 ul li a span{width:26px; height:26px; background-size:104px;} /*전략체계 및 노력용 탭*/ .explanation_wrap .u-tab05{margin-bottom: 40px;} .explanation_wrap .u-tab05 ul li a{font-size:16px; padding:10px 0; width:150px;} .explanation_wrap .u-tab05 ul li a span{width:26px; height:26px; background-size:104px;} .service_movie .suject{font-size:20px; margin-bottom: 10px;} .service_movie img{width:100%} .service_wrap{display:block; margin-top:30px;} .service_wrap .service_tit{font-size:20px; line-height: 35px; margin-bottom:10px;} .service_wrap .service_tit br{display:none;} .service_wrap ul{width:100%;} .service_wrap ul li{width:calc(50% - 12px); margin-bottom:30px;} .service_wrap ul li:nth-child(2n){margin-right:0;} /* .explanation_wrap .u-tab03 ul li a span.img{background-position:-26px 0px;}*/ /* .explanation_wrap .u-tab03 ul li a span.avi{background-position:-0 0px;} .explanation_wrap .u-tab03 ul li a span.reserve{background-position:-52px 0px;} .explanation_wrap .u-tab03 ul li a span.product{background-position:-78px 0px;} .explanation_wrap .u-tab03 ul li a span.search{background-position:-114px -38px;} .explanation_wrap .u-tab03 ul li a span.product{background-position:-155px -38px;} .explanation_wrap .u-tab03 ul li a span.diagram{background-position:-198px -38px;}*/ /* .explanation_wrap .u-tab03 ul li.active a span.img, .explanation_wrap .u-tab03 ul li a:hover span.img{background-position:-26px -26px;}*/ /* .explanation_wrap .u-tab03 ul li.active a span.avi{background-position:0 -26px;} .explanation_wrap .u-tab03 ul li.active a span.reserve, .explanation_wrap .u-tab03 ul li a:hover span.reserve{background-position:-52px -26px;} .explanation_wrap .u-tab03 ul li.active a span.search, .explanation_wrap .u-tab03 ul li a:hover span.search{background-position:-114px -38px;} .explanation_wrap .u-tab03 ul li.active a span.product, .explanation_wrap .u-tab03 ul li a:hover span.product{background-position:-155px -38px;} .explanation_wrap .u-tab03 ul li.active a span.diagram, .explanation_wrap .u-tab03 ul li a:hover span.diagram{background-position:-198px -38px;}*/ .explanation_wrap .u-tab03 ul li a span.img{display: none;} .explanation_wrap .u-tab03 ul li a span.avi{display: none;} .explanation_wrap .u-tab03 ul li a span.reserve{display: none;} .explanation_wrap .u-tab03 ul li a span.product{display: none;} .explanation_wrap .u-tab03 ul li a span.search{display: none;} .explanation_wrap .u-tab03 ul li a span.product{display: none;} .explanation_wrap .u-tab03 ul li a span.diagram{display: none;} .explanation_wrap .u-tab03 ul li.active a span.avi{display: none;} .explanation_wrap .u-tab03 ul li.active a span.reserve, .explanation_wrap .u-tab03 ul li a:hover span.reserve{display: none;} .explanation_wrap .u-tab03 ul li.active a span.search, .explanation_wrap .u-tab03 ul li a:hover span.search{display: none;} .explanation_wrap .u-tab03 ul li.active a span.product, .explanation_wrap .u-tab03 ul li a:hover span.product{display: none;} .explanation_wrap .u-tab03 ul li.active a span.diagram, .explanation_wrap .u-tab03 ul li a:hover span.diagram{display: none;} } @media (max-width: 600px){ .service_wrap ul li span.img img{height:123px;} } @media (max-width: 550px){ .explanation_wrap .u-tab03 ul li a{ width:95px;} .explanation_wrap .u-tab03 ul li a span{margin:0 auto; display:block;} /*전략체계 및 노력용 탭*/ .explanation_wrap .u-tab05 ul li a{font-size:14px; padding:5px 0; width:140px;} .explanation_wrap .u-tab05 ul li a span{margin:0 auto; display:block;} } /*영상 신청절차*/ .mov_wrap{display: flex; justify-content: space-around; margin-top:30px} .mov_wrap .mov{width:48%;} .mov_wrap .mov span{text-align: center; display: block; font-size:22px; color:#333;} @media (max-width: 768px){ .mov_wrap{display: block;} .mov_wrap .mov{width:100%; margin-bottom:15px;} .mov_wrap .mov span{font-size:20px;} } /*top-box*/ .top_graybox{position: relative; background:#f0f1f4; border-radius:10px; border:1px solid #dfe3ee;} .top_graybox .box_inner{padding:57px 57px 57px 224px;} .top_graybox .box_inner .title{font-size:24px; color:#535f77; font-weight: 600; line-height: 40px;} .top_graybox:before{content:''; position: absolute; width:1px; height:66px; left:190px; top:calc(50% - 32px); background:#d0d2d5;} .top_graybox:after{content:''; position: absolute; width:64px; height:100px; left:90px; top:calc(50% - 30px); background-size:64px;} .top_graybox.icon_01:after{background:url(/_res/hf/ko/img/pro_icon_04.png) no-repeat; background-size:64px;} .top_graybox.icon_02:after{background:url(/_res/hf/ko/img/pro_icon_05.png) no-repeat; background-size:64px;} .top_graybox.icon_03:after{background:url(/_res/hf/ko/img/pro_icon_06.png) no-repeat; background-size:64px;} .top_graybox.icon_04:after{background:url(/_res/hf/ko/img/pro_icon_07.png) no-repeat; background-size:64px;} .top_graybox.icon_05:after{background:url(/_res/hf/ko/img/pro_icon_08.png) no-repeat; background-size:64px;} .top_graybox.icon_06:after{background:url(/_res/hf/ko/img/pro_icon_09.png) no-repeat; background-size:64px;} .top_graybox.icon_07:after{background:url(/_res/hf/ko/img/pro_icon_10.png) no-repeat; background-size:64px;} .top_graybox.icon_08:after{background:url(/_res/hf/ko/img/pro_icon_11.png) no-repeat; background-size:64px;} .top_graybox.icon_17:after{background:url(/_res/hf/ko/img/pro_icon_17.png) no-repeat; background-size:64px;} .top_graybox.icon_18:after{background:url(/_res/hf/ko/img/pro_icon_18.png) no-repeat; background-size:64px;} .top_graybox.icon_19:after{background:url(/_res/hf/ko/img/pro_icon_19.png) no-repeat; background-size:64px;} .top_graybox.icon_20:after{background:url(/_res/hf/ko/img/pro_icon_20.png) no-repeat; background-size:64px;} .top_graybox.icon_23:after{background:url(/_res/hf/ko/img/pro_icon_23.png) no-repeat; background-size:64px;} .top_graybox.icon_24:after{background:url(/_res/hf/ko/img/pro_icon_24.png) no-repeat; background-size:64px;} .top_graybox.icon_25:after{background:url(/_res/hf/ko/img/pro_icon_25.png) no-repeat; background-size:64px;} .top_graybox_type2{position: relative; background:#f0f1f4; border-radius:10px; border:1px solid #dfe3ee;} .top_graybox_type2 .box_inner{padding:47px;} .top_graybox_type2 .box_inner .title{font-size:22px; color:#535f77; font-weight: 600; line-height: 40px;} @media (max-width: 800px){ .top_graybox .box_inner{padding:30px 25px 30px 130px;} .top_graybox .box_inner .title{line-height: 30px; font-size:20px;} .top_graybox:before{left:105px;top:32px; height:45px;} .top_graybox:after{left:25px; top:25px; width:64px; height:64px;} .top_graybox.icon_01:after{background-size:100%;} .top_graybox_type2 .box_inner{padding:25px;} } /*절차 */ .process {display: flex; flex-wrap: wrap;} .process li{position: relative; width: calc(25% - 40px); margin: 0 40px 20px 0px; border: none; float: left;} .process li:after{display: block; position: absolute; top: 50%; right: -30px; content: ''; width: 20px; height: 22px; margin: -10px 0 0; background: url(/_res/hf/ko/img/step_arrow.png) no-repeat 50% 50%;} .process li .inner{background:#697691; color:#fff; text-align: center; padding:33px 10px; height: 100%;} .process li .inner span{position: absolute; background:#138ce2; width:30px; height:30px; left:0; top:0;} .process li .inner .process_text{line-height:28px; font-weight:500;} .process li .inner.line_2 .process_text{min-height: 50px; display: flex; align-items: center; align-content: flex-start; justify-content: space-around;} .process li .inner.line_3 { padding:25px 10px; height: 100%;} .process li .inner.line_3 .process_text{min-height: 84px; display: flex; align-items: center; align-content: flex-start; justify-content: space-around;} .process li:last-child:after{display:none;} .process.step5 li{width:calc(20% - 40px);} .process.step5 li .inner{/*min-height: 150px;*/} .process.step3 li{width:calc(33.3% - 40px);} .process dl{margin-top:20px;} .process dt{background:#6389ba; font-size:22px;} .process dd{background:#f7f7f8; height:100%; padding:20px 50px;} /*절차 */ .process_type2 {display: flex; flex-wrap: wrap;} .process_type2 .p_box{position: relative; width: calc(25% - 40px); margin: 0 40px 20px 0px; border: none; float: left;} .process_type2 .p_box:after{display: block; position: absolute; top: 50px; right: -30px; content: ''; width: 20px; height: 20px; margin: -10px 0 0; background: url(/_res/hf/ko/img/step_arrow.png) no-repeat 50% 50%;} .process_type2 .p_box .inner{background:#697691; color:#fff; text-align: center; padding:33px 10px; height: auto;} .process_type2 .p_box .inner span{position: absolute; background:#138ce2; width:30px; height:30px; left:0; top:0;} .process_type2 .p_box .inner .process_text{line-height:28px; font-weight:500} .process_type2 .inner.line_3 { padding:25px 10px;} .process_type2 .inner.line_3 .process_text{min-height: 84px; display: flex; align-items: center; align-content: flex-start; justify-content: space-around;} .process_type2 .p_box:last-child:after{display:none;} .process_type2 .p_box ul li{width:100%; margin:0;} .process_type2 .p_box ul li:after{display:none;} .process_type2.step5 .p_box{width:calc(20% - 40px);} /*.process_type2.step5 .p_box .inner{min-height: 150px;}*/ .process_type2.step2{display: flex; justify-content: center;} .process_type2.step2 .p_box{width:calc(50% - 40px);} .process_type2.step2 .p_box:after{background:none;} .process_type2 .p_box dd.mh720{min-height: 720px !important;} .process_type2 .p_box dd.mh200{min-height: 200px !important;} .process_type2.step3 .p_box{width:calc(33.3% - 40px);} .process_type2 .p_box dl{margin-top:20px; font-size:18px;} .process_type2 .p_box dt{position: relative; background:#6389ba; font-size:22px; color:#fff; text-align: center; padding:23px 0; line-height:28px; /*min-height:102px;*/ display: flex; align-items: center; justify-content: space-around;} .process_type2 .p_box dt::after{position: absolute; background:url(/_res/hf/ko/img/arr_img.png) no-repeat 0 0; content:''; bottom:-6px; left:50%; display:block; width:13px; height:7px;} .process_type2 .p_box dt.line_2{min-height:102px;} .process_type2 .p_box dd{background:#f7f7f8; height:100%; padding:36px 26px; color:#333333; line-height: 28px; min-height:1197px;} .process_type2 .p_box dd::after {display: inline-block; height: 100%; vertical-align: middle;} .process_type2 .p_box dd .sub_tit{width: 160px; margin: 30px auto 20px auto; background: #697691; color: #fff; text-align: center; border-radius: 30px; padding: 5px 0;} .process_type2 .p_box dd .sub_tit:first-child{margin: 0px auto 20px auto;} .process_type2 .p_box dd ul.step_arr li{font-size:20px; color:#333; font-weight: 500; text-align: center; padding-bottom:40px; margin-bottom:40px; background:url(/_res/hf/ko/img/arr_img2.png) no-repeat center bottom;} .process_type2 .p_box dd ul.step_arr li:last-child{background:none; padding-bottom:0px; margin-bottom:0px;} .process_type2 .box_bottom{margin-top:10px; text-align: center; font-size:24px; color:#535f77; background:#e9ebf3; font-weight: 600; padding:20px 0;} #content.annuity_layout .process_type2 .p_box dl{margin-top:20px; font-size:23px;} #content.annuity_layout .process_type2 .p_box dl dt{font-size:29px; line-height: 38px;} #content.annuity_layout .process_type2 .p_box .inner span{width: 50px; height: 40px;} #content.annuity_layout .process_type2 .p_box dt.line_2{min-height:122px;} /*#content.annuity_layout .process_type2 .p_box dd {min-height: 1450px;}*/ #content.annuity_layout .process_type2 .p_box dd {min-height: 1300px;} #content.annuity_layout .process_type2 .p_box dd ul.step_arr li{font-size:26px;} @media (max-width: 1150px){ #content.annuity_layout .process_type2 .p_box dl{ font-size:18px;} #content.annuity_layout .process_type2 .p_box dl dt{font-size:22px; line-height: 28px;} #content.annuity_layout .process_type2 .p_box .inner span{width: 30px; height: 30px;} #content.annuity_layout .process_type2 .p_box dt.line_2{min-height:102px;} #content.annuity_layout .process_type2 .p_box dd {min-height:1197px;} #content.annuity_layout .process_type2 .p_box dd ul.step_arr li{font-size:20px;} } @media (max-width: 1051px){ /*#cms-content .h3 + .process_type2{margin-top:-20px;}*/ .process_type2 .p_box, .process_type2.step5 .p_box, .process_type2.step3 .p_box{width: 100%; margin: 0 0px 40px 0px;} .process_type2 .p_box:after{top: auto;right: 50%;bottom: -30px; margin: 0 -10px 0 0; transform: rotate(90deg); -webkit-transform: rotate(90deg);} .process_type2 .p_box dd{min-height:auto;} } @media (max-width: 1000px){ .process li, .process.step5 li, .process.step3 li{width: calc(50% - 40px);} } @media (max-width: 600px){ .process li, .process.step5 li, .process.step3 li{ width:100%; margin: 0 0px 40px 0px;} .process li:after{top: auto;right: 50%;bottom: -30px; margin: 0 -10px 0 0; transform: rotate(90deg); -webkit-transform: rotate(90deg);} .process li .inner, .process.step5 li .inner {padding: 20px 0; min-height: auto;} #content.annuity_layout .process_type2 .p_box .inner span, .process li .inner span, .process_type2 .p_box .inner span{width:30px; height:30px; font-size:15px; line-height: 30px;} .process li .inner .process_text{padding:0 35px;} .process li .inner .process_text br{display:none;} .process li:last-child{margin: 0 0px 0px 0px;} .process li .inner.line_3 .process_text, .process_type2 .inner.line_3 .process_text{min-height:auto;} } @media (max-width: 600px){ .process .p_box .inner, .process.step5 .p_box .inner {padding: 20px 0; min-height: auto;} .process .p_box .inner span{width:20px; height:20px; font-size:15px; line-height: 19px;} .process .p_box .inner .process_text br{display:none;} .process_type2 .p_box dt.line_2{min-height:auto;} } .special{display: flex; flex-flow: wrap;justify-content: space-between; margin-top:50px;} .special dl{width:49%; float:left; border-radius:20px; border:9px solid #f4f5f7; padding:40px; margin-bottom:20px;} .special dl:nth-child(2n){float:right;} .special dl dt{color:#1274b8; font-size:28px;} .special dl dd ul.list_ul02{margin-top:30px;} .special dl dd ul.list_ul02 li strong{color:#333; font-weight: 600;} .special dl.borderColor{border-color:grey;} .special_one_line{display: flex; flex-flow: wrap;justify-content: space-between; margin-top:50px;} .special_one_line dl{width:100%; float:left; border-radius:20px; border:9px solid #f4f5f7; padding:40px; margin-bottom:20px;} .special_one_line dl:nth-child(2n){float:right;} .special_one_line dl dt{color:#1274b8; font-size:28px;} .special_one_line dl dd ul.list_ul02{margin-top:30px;} .special_one_line dl dd ul.list_ul02 li strong{color:#333; font-weight: 600;} .special_one_line dl.borderColor{border-color:grey;} @media (max-width: 768px){ .special{display:block;} .special dl{width:100%; padding:25px; border:4px solid #f4f5f7;} .special dl dd ul.list_ul02{margin-top:20px;} .special_one_line{display:block;} .special_one_line dl{padding:25px; border:4px solid #f4f5f7;} .special_one_line dl dd ul.list_ul02{margin-top:20px;} } .btns-area{display:none;} @media (max-width: 768px){ .btns-area{padding:0 20px; display:block; margin-top:30px} .btns-area a{position: relative; background-color:#247bdc; padding:12px 0; color:#fff; font-size:17px; display:block; text-align:center; margin-bottom:15px;} .btns-area a:before{content:''; display: block; background-image: url(/_res/hf/ko/img/btn_search_w.png); background-position: 0 0; background-size: 20px; width: 20px; height: 20px; position: absolute; left: 20px; top: 19px;} .btns-area a:nth-child(2){background-color:#247bdc;} .btns-area a:nth-child(3){background-color:#80bd54;} .btns-area a:nth-child(4){background-color:#eb873d;} } .product_explanation{margin-top:50px; display: flex; color:#333; justify-content: space-between; border-radius:10px; background:#f5f5f7; padding:25px; font-weight:500; align-items:center;} .product_explanation2{margin-top:20px; display: block; color:#333; justify-content: space-between; border-radius:10px; padding:25px; font-weight:500; align-items:center;} .product_explanation .memo,.product_explanation2 .memo{ line-height:28px; font-weight:600; padding-left:40px; position:relative; display:flex; align-items:center;} .product_explanation .memo:before,.product_explanation2 .memo:before {content:''; display:block; background:url(/_res/hf/ko/img/product_icon.png) no-repeat -38px -147px; width:30px; height:30px; position:absolute; top:calc(50% - 15px); left:0;} .product_explanation .btn_viewer, .product_explanation .btn_down{border-radius:5px; background:#382e25; color:#fff; font-size:16px; padding:10px 20px 10px 23px;} .product_explanation2 .btn_viewer, .product_explanation2 .btn_down{border-radius:5px; background:#382e25; color:#fff; font-size:20px; padding:20px 45px 20px 48px;} .product_explanation .btn_down,.product_explanation2 .btn_down{margin-left:5px;} .product_explanation .btn_viewer:after,.product_explanation2 .btn_viewer:after{content:''; margin-left:15px; display:inline-block; background:url(/_res/hf/ko/img/product_icon.png) no-repeat -283px -155px; width:15px; height:14px;} .product_explanation .btn_down:after,.product_explanation2 .btn_down:after{content:''; margin-left:15px; display:inline-block; background:url(/_res/hf/ko/img/product_icon_down.png) no-repeat 0 0; width:15px; height:15px;} @media (max-width: 768px){ .product_explanation,.product_explanation2{display:block;} .product_explanation .memo,.product_explanation2 .memo {width:100%; margin-right:0;} .product_explanation .btn_viewer, .product_explanation .btn_down,.product_explanation2 .btn_viewer, .product_explanation2 .btn_down{padding:2px 10px; font-size:13px; width:auto; box-sizing: border-box; height:auto; display:inline-block;} .product_explanation .btn_viewer:after, .product_explanation .btn_down:after,.product_explanation2 .btn_viewer:after, .product_explanation2 .btn_down:after {margin-left:5px;} .product_explanation .explanation_btn,.product_explanation2 .explanation_btn{margin:10px 0 0 40px;} } .step_wrap{position: relative; background:#6389ba; display:flex; align-items:center; margin-bottom: 53px;} .step_wrap::after{background:url(/_res/hf/ko/img/box_arr.gif) no-repeat 0 0; content:''; display:block; width:33px; height:20px; bottom:-30px; left:0; position: absolute; left:50%; margin-left:-16px;} .step_wrap.no_arr{margin-bottom: 0px;} .step_wrap.no_arr::after{display:none;} .step_wrap .step_title{text-align: center; color:#fff; font-size:22px; width:180px; font-weight: 500;} .detale_ddd{width:100%; background:#fff; box-sizing:border-box; padding-left:20px;} .step{position: relative; display: flex; align-items: center; background: #697691; letter-spacing: -1px;} .step:last-child:after{display:none;} .step .info_tit{position: relative; width: 400px; position: relative; text-align: center; font-weight: 500; color:#fff; font-size:22px;} .step .info_tit.type1{text-align: left; padding-left:55px;} .step .info_tit:after{content: ''; display: block; position: absolute; top: 50%; background:url(/_res/hf/ko/img/step_arrow_type01.png); right: -7px; width: 7px; height: 14px;transform: translateY(-50%);} .step span{position: absolute; left: 0; top: 0; text-align: center; width: 30px; height: 30px; background: #138ce2; line-height: 30px; font-weight: 600; color:#fff; font-size:18px;} .step .info_con{width:calc(100% - 399px); background: #f7f7f8; padding: 30px; box-sizing:border-box; font-size:18px; color:#333; line-height: 25px;} .step .info_con ul li{ line-height: 25px;} #content.annuity_layout .step_wrap .step_title{font-size:29px;} #content.annuity_layout .step .info_tit{font-size:29px;} #content.annuity_layout .step .info_con{font-size:23px; line-height: 30px;} #content.annuity_layout .step span{font-size:23px;} @media screen and (max-width:1150px){ #content.annuity_layout .step_wrap .step_title{font-size:22px;} #content.annuity_layout .step .info_tit{font-size:22px;} #content.annuity_layout .step .info_con{font-size:18px; line-height: 25px;} #content.annuity_layout .step span{font-size:18px;} } @media screen and (max-width:980px){ .step_wrap .step_title{width:100%; padding:15px 0; margin-bottom:10px; background: #6389ba;} .detale_ddd{padding-left:0;} .step_wrap{display:block; background:none;} .step{display: block;} .step .info_tit, .step .info_con{width:100%;} #content.annuity_layout .step .info_tit, .step .info_tit{padding:20px 0;font-size:18px;} #content.annuity_layout .step span, .step span{font-size:18px; width: 25px; height: 25px; line-height: 25px;} .step .info_con{border-top:0; padding:25px;} .step .info_tit:after{transform: rotateZ(90deg); top: auto; left:50%; bottom: -9px;} } /*load_map*/ .load_map{display: flex; margin-bottom:15px;} .load_map.arr{background:url(/_res/hf/ko/img/sub05_05_01_arr.png) no-repeat 72% bottom; padding-bottom:93px;} .load_map .map_tit{position: relative; background:#6389ba; width:240px; color:#fff; font-size:22px; text-align: center; padding:25px 0px; display: flex; align-items: center; justify-content: space-around;} .load_map .map_tit:after{content: ''; display: block; position: absolute; top: 50%; background:url(/_res/hf/ko/img/arr-img2.png); right: -7px; width: 7px; height: 14px;transform: translateY(-50%);} .load_map .map_info{background:#f7f7f8; padding:25px 0px; width:calc(100% - 240px); color:#333; text-align: center;} .load_map .sub_map{display: flex; justify-content: space-between; width:calc(100% - 240px);} .load_map .sub_map_info{width:calc(25% - 10px); background:#f7f7f8; padding:25px 20px; color:#333; text-align: center; line-height:32px; display: flex; align-items: center; justify-content: space-around; flex-direction: column;} .load_map .sub_map_info.ww33{width:calc(33.3% - 10px);} .load_map .sub_map_info span.type1{min-height:150px; display: flex; align-items: center;} .load_map .sub_map_info.c_b{background:#e9ebf3;} @media screen and (max-width:980px){ .load_map{font-size:18px;} .load_map .map_tit, .load_map .map_info, .load_map .sub_map_info, .load_map .sub_map, .load_map .sub_map_info.ww33{width:100%;} .load_map .sub_map_info{margin-bottom:5px;} .load_map .map_tit:after{transform: rotateZ(90deg); top: auto; left:50%; bottom: -9px;} .load_map, .load_map .sub_map, .load_map .sub_map_info{display:block;} .load_map .sub_map_info span.type1{display: block; min-height: auto;} .load_map .sub_map_info span.type1 br, .load_map .sub_map_info br{display:none;} .load_map img{max-width:90%;} .load_map.arr {background: url(/_res/hf/ko/img/sub05_05_01_arr.png) no-repeat center bottom;} .load_map.load_map_wrap .sub_map_info span.type1 br, .load_map.load_map_wrap .sub_map_info br{display:block;} .load_map.load_map_wrap .sub_map{display:flex; flex-wrap: wrap;} .load_map.load_map_wrap .sub_map_info.ww50{width:calc(50% - 5px);} .load_map.load_map_wrap .map_info span{display:block;} } /*소개*/ .intro_na {position:relative; height:260px;} .intro_na div {width:400px; border-radius:50px 0 0 0; position: absolute; height:240px; right: 84px; bottom: -42px;line-height:1.4; font-size:34px; color:#fff; background:#0053b0 url(/_res/hf/ko/img/intro_bg01.jpg) no-repeat 0 0; padding:64px 65px 30px 30px; box-sizing:border-box; text-align: right;} .intro_na div span {display:block; font-size:20px; color:#fff; letter-spacing: 5px; padding-bottom:10px; opacity: 0.8;} .intro_na p.tit { position: relative; font-size:40px; color:#fff; font-weight: bold;} .intro_na p.tit:after{content:''; position: absolute; display:block; height:1px; width:90%; background:rgba(255,255,255,0.5); right:-65px; bottom:-10px;} .intro_na p.txt { font-size:34px; color:#fff; margin-top:20px; font-weight: 400;} .intro_na.bg_img1 {background:url("/_res/hf/ko/img/intro_na.jpg") no-repeat center 0;} .intro_na.bg_img2 {background:url("/_res/hf/ko/img/intro_na02.jpg") no-repeat center 0;} @media only screen and (max-width: 768px) { .intro_na{height:174px;} .intro_na div{right:40px; width:254px; height:148px; padding:30px 30px 30px 30px;} .intro_na.bg_img1,.intro_na.bg_img2{background-size: cover;} .intro_na p.tit {font-size:30px;} .intro_na p.tit:after{right:-30px; bottom: -6px;} .intro_na p.txt {font-size:26px;margin-top: 10px;} } /**/ .edu_con{display: flex;} .edu_con > .load_map{width:33.3%; margin-bottom:10px;} .edu_con > .load_map .map_tit{width:140px;} .edu_con > .load_map .map_info{ width: calc(100% - 150px); text-align: left; box-sizing:border-box; padding: 20px 10px 20px 30px; box-sizing: border-box; align-items: center; align-content: center; flex-wrap: wrap; display: flex;} @media only screen and (max-width: 980px) { .edu_con{display:block;} .edu_con > .load_map{width:100%; display: flex;} .edu_con > .load_map .map_tit{width:30% } .edu_con > .load_map .map_info{width:70%;} .edu_con > .load_map .map_tit:after{ transform: translateY(-50%); bottom: auto; right: -7px; left: auto;} } /*주택금융공사란*/ .introduce{text-align: center;} .introduce .introduce_img img{max-width:100%;} .introduce .introduce_img.img_01{background:url("/_res/hf/ko/img/sub05_01_01.jpg") no-repeat top center; width:100%; height:530px;} .introduce_top{position: relative; background:#fff; padding:88px 20px 0 20px; width:80%; margin:-60px auto 80px auto; box-sizing: border-box;} .introduce_top .subject{font-size:30px; color:#000; font-weight: 600; margin-bottom:80px; line-height: 46px;} .introduce_top .subject span{color:#4078cc; font-size:30px; display:block;} .introduce_top .document dt{font-size:22px; color:#4078cc; font-weight: 600; margin-bottom:5px;} .introduce_top .document dd{margin-bottom:45px;} .introduce_top .div_text{font-size:20px; line-height:34px;} .introduce_bottom{display: flex; flex-wrap: wrap; justify-content: space-between;} .introduce_bottom dl{background:#f9faff; padding:68px 75px 55px 75px; letter-spacing: -2px; border-radius:20px; width: calc(50% - 10px); margin-bottom: 20px;} .introduce_bottom dl dt{font-size:22px; color:#4078cc; font-weight: bold; padding-left:140px; margin-bottom:35px; height:112px; display: flex; align-items: flex-end; padding-bottom: 10px;} .introduce_bottom dl dd{line-height:32px;} .introduce_bottom dl:nth-child(1) dt{background:url(/_res/hf/ko/img/intro_icon01.png) no-repeat 0 bottom;} .introduce_bottom dl:nth-child(2) dt{background:url(/_res/hf/ko/img/intro_icon02.png) no-repeat 0 bottom;} .introduce_bottom dl:nth-child(3) dt{background:url(/_res/hf/ko/img/intro_icon03.png) no-repeat 0 bottom;} .introduce_bottom dl:nth-child(4) dt{background:url(/_res/hf/ko/img/intro_icon04.png) no-repeat 0 bottom;} .introduce_bottom dl dt.intro_icon05{background:url(/_res/hf/ko/img/intro_icon05.png) no-repeat 0 bottom;} .introduce_bottom dl dt.intro_icon06{background:url(/_res/hf/ko/img/intro_icon06.png) no-repeat 0 bottom;} .introduce_bottom dl dt.intro_icon07{background:url(/_res/hf/ko/img/intro_icon07.png) no-repeat 0 bottom;} .introduce_bottom dl dt.intro_icon08{background:url(/_res/hf/ko/img/intro_icon08.png) no-repeat 0 bottom;} .vision{background:url(/_res/hf/ko/img/vision_bg.jpg) no-repeat center 0; color:#fff; padding:140px 0; margin-bottom:100px;} .vision div{display: flex; justify-content: space-between; width: 700px; margin: 0 auto;} .vision dl{width:300px;} .vision dt{font-size:36px; border-bottom:1px solid #748ccb; padding:0px 0 54px 0; margin-bottom:25px;} .vision dt span{color:rgba(255,255,255,0.5); font-size:16px; padding-bottom:23px; display:block; line-height: 16px; letter-spacing: 0;} .vision dd{ line-height:30px; color:rgba(255,255,255,0.7);} .vision2{background:url(/_res/hf/ko/img/vision_bg_02.jpg) no-repeat center 0; color:#fff; padding:30px 0px 325px 0px; margin-bottom:100px;} .vision2 div{display: flex; justify-content: space-between; width: 700px; margin: 0 auto;} .vision2 dl{width:700px;text-align: center;color:#005eb8} .vision2 dt{font-size:36px; padding:10px 0 30px 0; margin-bottom:25px; font-weight:bold;} .vision2 dt span{color:rgba(255,255,255,0.5); font-size:16px; padding-bottom:23px; display:block; line-height: 16px; letter-spacing: 0;} .vision2 dd{ line-height:50px; font-size:38px;} .vision2 dd span{font-weight:bold;} .introduce_3depth_img{display: flex;} .introduce_3depth_img dl{position:relative; width:calc(33.3% - 15px);padding: 40px 50px;margin:0 10px 30px 10px;border-radius: 20px;box-sizing:border-box;height:400px;font-size:24px;text-align:center;} .introduce_3depth_img dl dt{ color:#4078cc; font-weight: bold; margin-bottom:20px; display: flex; align-items: flex-end; padding-bottom: 10px;height: 200px;} .introduce_3depth_img dl dt.icon04{background:url(/_res/hf/ko/img/ceo_icon04.jpg) no-repeat 0 bottom;background-position: center;} .introduce_3depth_img dl dt.icon05{background:url(/_res/hf/ko/img/ceo_icon05.jpg) no-repeat 0 bottom;background-position: center;} .introduce_3depth_img dl dt.icon06{background:url(/_res/hf/ko/img/ceo_icon06.jpg) no-repeat 0 bottom;background-position: center;} .introduce_3depth_img dl dd{line-height:32px;} .introduce_3depth_img dl dd.btn_bottom{position: absolute; bottom: 20px;} .introduce_1depth_img{flex-wrap: wrap; justify-content: space-between;} .introduce_1depth_img dl{font-size:24px;padding: 0 60px;margin-bottom: 20px;height: 200px;display: grid;grid-template-columns: 200px 1fr;gap: 20px; align-items: start;} .introduce_1depth_img dl dt{color:#4078cc;font-weight: bold;margin-bottom:20px;overflow: hidden;} .introduce_1depth_img dl dt.icon01{background:url(/_res/hf/ko/img/ceo_icon01.jpg) no-repeat 0; padding: 20px 0px 20px 94px; width: 100%; height: 100%; display: block;} .introduce_1depth_img dl dt.icon02{background:url(/_res/hf/ko/img/ceo_icon02.jpg) no-repeat 0; padding: 20px 0px 20px 94px; width: 100%; height: 100%; display: block;} .introduce_1depth_img dl dt.icon03{background:url(/_res/hf/ko/img/ceo_icon03.jpg) no-repeat 0; padding: 20px 0px 20px 94px; width: 100%; height: 100%; display: block;} .introduce_1depth_img dl dd{line-height:32px;margin-left: 0;display: flex;flex-direction: column;justify-content: center;min-height: 200px;} .ceoMsg{background:url(/_res/hf/ko/img/ceo_message.jpg) no-repeat center 0; color:#333; padding:30px; margin-bottom:50px; font-weight: 500;} .ceoMsg div{width: 750px; margin: 20px;} .ceoMsg div .title{font-size:32px; border-bottom:1px solid #748ccb; padding:0px 0 54px 0; margin-bottom:25px; line-height: 50px;} .ceoMsg div .body{ line-height:30px; color:#333; margin-bottom: 90px;} .ceoMsg div .body span{color: #005eb8; font-size: 23px; padding-bottom: 23px; display: block; letter-spacing: 0; font-weight: bold; line-height: 38px;} .ceoName{font-size: 26px; font-weight: bold; color: #333;} #cms-content .vision + .management .h3{margin: 0px 0 40px 0px;} .management{display: flex; justify-content: space-between;} .management .h3{margin: 0px 0 40px 0px;} .management .management_first{display: flex;} .management .management_second{display: flex;} .management div{display: flex;} .management dl{margin-right:100px;} .management dt{color:#303238; font-weight: 600; font-size:24px; padding-bottom:20px;} @media only screen and (max-width: 1100px) { .management{display: block;} } @media only screen and (max-width: 1260px) { .ceoMsg div{width: 90%;} } @media only screen and (max-width: 900px) { .introduce_bottom{display: block;} .introduce_bottom dl{width:100%; padding:45px;} .introduce_bottom dl dt{height:83px; margin-bottom:15px; padding-left:95px;} .introduce_bottom dl dd{font-size:18px;} .introduce_bottom dl:nth-child(1) dt{background-size:80px;} .introduce_bottom dl:nth-child(2) dt{background-size:80px;} .introduce_bottom dl:nth-child(3) dt{background-size:80px;} .introduce_bottom dl:nth-child(4) dt{background-size:80px;} .introduce_bottom dl dt.intro_icon05, .introduce_bottom dl dt.intro_icon06, .introduce_bottom dl dt.intro_icon07, .introduce_bottom dl dt.intro_icon08{background-size:80px;} .vision div{width: 90%;} } @media only screen and (max-width: 786px) { .introduce .introduce_img.img_01{height:352px;background-size: cover;} .introduce_top{width:95%; padding:60px 15px 0 15px; margin:-60px auto 50px auto;} .introduce_top .subject{font-size:24px; margin-bottom:40px; line-height:35px; padding:0 20px;} .introduce_top .document dt{font-size:20px; color:#4078cc; font-weight: 600; margin-bottom:5px;} .introduce_top .document dd{margin-bottom:40px; font-size:18px;} .management .management_first{display: block;} .management .management_second{margin-top:30px;} .vision{padding:70px 0; background-size:cover;} .vision div{display:block; width:300px;} .vision dl{width:auto; margin-bottom:80px} .vision dl:last-child{margin-bottom:0px} .vision dt{font-size:30px; padding:0 0 40px 0; margin-bottom:20px;} .vision dt span{padding-bottom:20px;} .ceoMsg{padding:30px 0; background-size:cover;} .ceoMsg div .title {font-size: 28px; padding: 0px 0 40px 0; line-height: 40px;} .ceoMsg div .body {line-height: 30px;} .ceoMsg div .body span {font-size: 20px;line-height: 30px;} } @media only screen and (max-width: 500px) { .introduce .introduce_img.img_01{height:250px;background-size: cover;} .introduce_top{width:95%; padding:45px 15px 0 15px; margin:-45px auto 40px auto;} .introduce_top .subject{padding:0 10px;} .vision div{width:200px;} .vision div dd br{display:none;} .vision dd ul[class^="list_ul"] li{line-height:25px; font-size:18px;} .vision dd ul[class^="list_ul"] li:before{top:11px;} .ceoMsg div{width:250px;} } /*부서별 정보*/ .conTsearch_type {background:#f7f7f8; text-align:center; padding:30px 50px; margin-bottom:40px; font-size:16px; display:flex; align-items: center; justify-content: space-between;} .conTsearch_type select {min-width:160px; box-sizing:border-box; border:0; color:#000; margin:0 2px; background:#fff url(/_res/hf/ko/img/selarr_btn01.png) no-repeat 100% 50%;} .conTsearch_type input[type="submit"] {background:#666; color:#fff; min-width:100px; padding:0 10px; border:none;margin:0 2px; transition:all .2s; height:50px;} .conTsearch_type input[type="submit"]:hover {background:#444;} .conTsearch_type .subject {position: relative; font-size:24px; padding-left:25px; margin:0px 0 10px 0px; color: #333; font-weight: 500; letter-spacing:-0.1em; text-align: left;} .conTsearch_type .subject:before {content: ''; position: absolute; left: 0; top:9px; width:15px; height:16px; background:url('/_res/hf/ko/img/bul_h4.png') no-repeat 0 0;} @media only screen and (max-width: 786px) { .conTsearch_type {padding:20px; display:block;} .conTsearch_type input[type="submit"], .conTsearch_type select{min-width:100%;} .conTsearch_type .subject, .conTsearch_type select{margin-bottom:13px;} } /*조직도*/ .org_box{padding:25px 30px; background:#fff; border-radius:10px; box-shadow: 0 0 30px 0 rgb(191 194 206 / 28%);} .org_box li{float:left; padding-left:13px; margin-right:50px; position: relative;} .org_box li:after{content:''; display:block; width:4px; height:4px; background:#5a74db; position: absolute; top: 15px; left: 0;} /*임원*/ .officer-wrap{position: relative; border-top:1px solid #e9ecf3; padding:60px 6%; display: flex;} .officer-wrap .img{margin-right:45px;} .officer-wrap .officer-box{width:100%} .officer-wrap dl{display: flex;} .officer-wrap dl dt{color:#333; font-weight: 600; width:90px;} .officer-wrap dl dd{width: calc(100% - 90px);} .officer-wrap dl dd ul{margin-bottom:5px;} .officer-wrap .areer{display: flex; width:100%;} .officer-wrap .areer > dl{width:50%;} .officer-wrap .areer > dl dd{width:calc(100% - 85px);/* letter-spacing: -2px;*/} @media only screen and (max-width: 786px) { .officer-wrap, .officer-wrap .areer{display:block;} .officer-wrap{padding:40px 0;} .officer-wrap:first-child{border-top:0;} .officer-wrap .img{margin-right:0; text-align: center;} .officer-wrap .officer-box{margin-top:30px;} .officer-wrap .areer > dl{width:100%;} .officer-wrap .areer > dl:first-child{margin-bottom:40px;} } /*연혁*/ .history_wrap{display: flex; padding:60px 0; border-top:1px solid #e9ecf3;} .history_wrap:first-child{padding:0 0 60px 0; border-top:0px;} .history_wrap .img{margin-right:45px;} .history_wrap .history_year{color:#1c69be; font-size:36px; font-weight: 600; padding:18px 0 40px 0;} .history_wrap dl{display: flex; flex-wrap: wrap;} .history_wrap dl dt{width:110px; margin-bottom:45px; color:#333;} .history_wrap dl dd{width: calc(100% - 110px); margin-bottom:45px;} .u-tab01 ul.con03.his li{width:calc(33.3% - 4px)!important;} @media only screen and (max-width: 786px) { .history_wrap{display: block;} .history_wrap .img{text-align: center; margin-right:0px;} .history_wrap .history_year{font-size:30px; padding:15px 0 35px 0;} .history_wrap dl dt, .history_wrap dl dd{margin-bottom:40px; word-break: break-all;} .history_wrap dl dt{width:100px;} .history_wrap dl dd{width: calc(100% - 110px);} } /*콜센터*/ .call_center{background:#f7f7f7; padding:30px 50px;} .call_center span{margin-right:50px; display:inline-block;} @media only screen and (max-width: 786px) { .call_center{padding:25px 30px;} .call_center span{margin-right:0px; display:block;} } /**/ .graybox_type2{background:#f7f7f7; padding:30px; display:flex; justify-content: center;} .graybox_type2 .w{width:82px;} .graybox_type2 span{color:#2b6ce7; font-weight: 600;} @media only screen and (max-width: 700px) { .graybox_type2 .box_2w{width: calc(100% - 82px);} } /*고객헌장*/ .customer_charter{display: flex;flex-wrap: wrap;} .customer_charter dl{background:#f9faff; padding:55px 75px 55px 83px;letter-spacing: -2px; border-radius:20px;width: 31.2%; margin-right:3%; margin-bottom: 40px;} .customer_charter dl dt{font-size:22px; color:#4078cc; font-weight: 600; padding-left:120px; margin-bottom:35px; height:105px; padding-bottom: 10px; display: flex; align-items: flex-end;} .customer_charter dl dd{line-height:32px;} .customer_charter dl dd span{color:#000; position: relative;} .customer_charter dl dd span:after{content:''; height:9px; background:#c7f5fa; width:100%; left:0; bottom:0;} .customer_charter dl:nth-child(3n){margin-right:0%;} .customer_charter dl:nth-child(1) dt{background:url(/_res/hf/ko/img/sub05_02_03_01_02.png) no-repeat 0 bottom;} .customer_charter dl:nth-child(2) dt{background:url(/_res/hf/ko/img/sub05_02_03_01_03.png) no-repeat 0 bottom;} .customer_charter dl:nth-child(3) dt{background:url(/_res/hf/ko/img/sub05_02_03_01_04.png) no-repeat 0 bottom;} .customer_charter dl:nth-child(4) dt{background:url(/_res/hf/ko/img/sub05_02_03_01_05.png) no-repeat 0 bottom;} .customer_charter dl:nth-child(5) dt{background:url(/_res/hf/ko/img/sub05_02_03_01_06.png) no-repeat 0 bottom;} @media only screen and (max-width: 1100px) { .customer_charter dl{width:48%;} .customer_charter dl:nth-child(3n){margin-right:3%;} .customer_charter dl:nth-child(2n){margin-right:0%;} } @media only screen and (max-width: 768px) { .customer_charter dl{width:100%; margin-right:0%; padding:40px 50px} .customer_charter dl:nth-child(3n){margin-right:0%;} } /*윤리경영 연도별 추진일정*/ .historyarea{border-bottom:1px solid #e9ecf3; padding:0 25px 60px 25px; margin:0 0 60px 0; display: flex;} .historyarea h4{font-weight: 600; font-size:36px; color:#1c69be; margin-right: 60px;} .historybox{} .historybox dl{display: flex; justify-content: flex-start;} .historybox dt{margin-right:30px; font-weight: 500; color:#333; word-break: break-all;} @media only screen and (max-width: 786px) { .historyarea{display: block; padding:0 0px 45px 0px; margin:0 0 45px 0;} .historyarea h4{font-size:30px; margin-bottom:30px;} .historybox dt{margin-right:25px; width:120px;} .historybox dd{width: calc(100% - 145px)} } /*신탁방식 유의사항*/ .charter-list {border-top: 1px solid #dddeee} .charter-list li {position: relative;padding: 40px 40px 40px 80px;border-bottom: 1px solid #dddeee; font-weight: 500; COLOR:#333; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .charter-list li.bottom-none {border-bottom: 0;} .charter-list li .number {position: absolute;top: 40px;left: 20px;width: 30px;height: 30px; line-height: 30px;text-align: center;color: #fff;font-size: 15px;font-weight: 600; background: #148ce2; border-radius: 50%;} /*내게 맞는 주택연금 찾기*/ .question_wrap{width:800px; margin:0 auto;} .question_wrap.question_ok{display:block;} .question_wrap.question_no{display:none;} .question_wrap .question{background:#00a94e; color:#fff; border-radius:30px 30px 0 0; padding: 80px 25px 35px 25px; text-align: center; position: relative;} .question_wrap .question:after{/*접근성 위배로 임시 삭제 background: url(/_res/hf/ko/img/mark.png) no-repeat 0 0;*/ content:''; display:block; position: absolute; top:-35px; right:20px; width:294px; height:208px;} .question_wrap .question.result{background:#247bdc; color:#fff; border-radius:30px 30px 0 0; padding:55px 25px; text-align: center; position: relative; min-height: 211px; display: flex; justify-content: space-around; align-items: center;} .question_wrap .question.result .question_pre{right:20px;} .question_wrap .question.result .question_first{padding: 0px 15px; text-align: center; border: 2px solid #fff; cursor: pointer; background:none;} .question_wrap .question .question_step{position: absolute; right:20px; top:30px; font-size: 20px; border-radius: 30px; padding: 0px 0px; text-align: center; border: 2px solid #fff; width: 60px;} .question_wrap .question .question_first{position: absolute; left:20px; top:30px; font-size:20px; border-radius: 30px; padding: 0px 15px; text-align: center; background:#3b7f0b; border: 2px solid #35700b; cursor: pointer; z-index:9; color:#fff;} .question_wrap .question .question_pre{position: absolute; right:90px; top:30px; font-size: 20px; border-radius: 30px; padding: 0px 15px; text-align: center; border: 2px solid #fff; cursor: pointer; z-index:9; color:#fff;} .question_wrap .question .sub_memo{color:#FFFFD0; font-size:32px; font-weight: 600; margin-bottom:10px;} .question_wrap .question .question_A{font-weight: 600; font-size:52px; line-height:65px; padding-top:30px;} .question_wrap .question_select{background:#f5f5f5; padding:38px 0; display: flex; justify-content: space-evenly; border-radius:0 0 30px 30px;} .question_wrap .question_select .number_01{background:#1c8ee6; padding-top:32px; width:130px; height:130px; border-radius:50%; text-align: center;} .question_wrap .question_select .number_02{background:#E87010; padding-top:32px; width:130px; height:130px; border-radius:50%; text-align: center;} .question_wrap .btn_deposit{background:#00a94e url(/_res/hf/ko/img/btn_search.png) no-repeat 136px 12px; padding:5px 0px 5px 25px; color:#fff; font-weight: 300; margin-top:20px; display:block; border-radius:30px; width:177px; font-size:17px;} .question_wrap .question_result{color:#333; background:#f5f5f5; padding:38px 35px; border-radius:0 0 30px 30px; font-size:44px; text-align:center; line-height:55px; letter-spacing: -1px;} .question_wrap .question_result .btn_view{border-radius: 40px; background: #114b8b url(/_res/hf/ko/img/btn_search.png) no-repeat 40px 25px;; width: 196px; color: #fff; font-size: 26px; display: inline-block; text-align: left; padding: 0px 0 0px 68px; line-height: 70px;} .question_wrap .question_result .btn_annuity{border-radius: 40px; width: 196px; color: #114b8b; font-size: 26px; text-align: center; border:3px solid #114b8b; background:#fff; line-height: 64px; display: inline-block; margin-left:10px;} .question_wrap .bg_02{background-color:#0054a4 !important;} .question_wrap .bg_03{background-color:#4cac06 !important;} .question_wrap .bg_04{background-color:#ed6d02 !important;} .question_wrap .btn_annuity.cresult02{border:3px solid #ed6d02; color:#ed6d02;} .question_wrap .btn_annuity.cresult03{border:3px solid #4cac06; color:#4cac06;} .question_wrap .btn_annuity.cresult04{border:3px solid #0054a4; color:#0054a4;} .modal-wrapper.close{visibility: hidden;} @media only screen and (max-width: 1150px) { .question_wrap{width:400px;} .question_wrap .question .question_step{font-size:16px;} .question_wrap .question .sub_memo{font-size:24px;} .question_wrap .question .question_A{font-size:40px; line-height:55px;} .question_wrap .question_result{font-size:34px; line-height:45px;} .question_wrap .question_result .btn_annuity{margin-top:5px; margin-left:0px;} } @media only screen and (max-width: 500px) { .question_wrap{width:100%; margin:0 auto;} } /*주택연금 이용현황*/ .choise-location{display: flex; justify-content: space-between;} .choise-location .location_wrap{position: relative; border:1px solid #ddd; padding:30px 0; width:46%; height:697px;} .choise-location .location_map{position: relative; margin:0 auto; padding:30px 0; width:465px; height:697px; background:url(/_res/hf/ko/img/all_map.png) no-repeat center 30px; box-sizing:border-box;} .choise-location .selected-result-infomation{width:49%;} .choise-location .select_gi{width:calc(100% - 96px);} .choise-location .bbtn_gi{background:#5f6062; color:#fff; text-align: center; width:90px;} .selected-result-infomation ul.result-infomation {display: flex; justify-content: space-between; margin-bottom:38px;} .selected-result-infomation ul.result-infomation li{ border-radius:10px; padding:180px 0 40px 0; width:32%; text-align: center;} .selected-result-infomation ul.result-infomation li .tit{font-weight: 500; color:#000;} .selected-result-infomation ul.result-infomation li .an {font-size:18px; color:#000;} .selected-result-infomation ul.result-infomation li .an span{font-size:36px; font-weight: 500; color:#4078cc;} .selected-result-infomation ul.result-infomation li:nth-child(1){background:#f0f1f4 url(/_res/hf/ko/img/selected-resul_icon01.png) no-repeat center 40px;} .selected-result-infomation ul.result-infomation li:nth-child(2){background:#f0f1f4 url(/_res/hf/ko/img/selected-resul_icon02.png) no-repeat center 40px;} .selected-result-infomation ul.result-infomation li:nth-child(3){background:#f0f1f4 url(/_res/hf/ko/img/selected-resul_icon03.png) no-repeat center 40px;} .graph_box{border:1px solid #ddd; padding:30px; text-align: center} .White_box{background:#fff; padding:30px;} @media only screen and (max-width: 1150px) { .choise-location .location_wrap{width:468px;} /*.choise-location{display:block;} .choise-location .location_map{display:none;} .choise-location .selected-result-infomation{width:100%;} */ } @media only screen and (max-width: 970px) { .choise-location{display:block;} .choise-location .location_wrap{display:none;} .choise-location .selected-result-infomation{width:100%;} } @media only screen and (max-width: 600px) { .selected-result-infomation ul.result-infomation li{ padding:110px 0 20px 0; width:32%; text-align: center;} .selected-result-infomation ul.result-infomation li:nth-child(1){background:#f0f1f4 url(/_res/hf/ko/img/selected-resul_icon01.png) no-repeat center 20px;} .selected-result-infomation ul.result-infomation li:nth-child(2){background:#f0f1f4 url(/_res/hf/ko/img/selected-resul_icon02.png) no-repeat center 20px;} .selected-result-infomation ul.result-infomation li:nth-child(3){background:#f0f1f4 url(/_res/hf/ko/img/selected-resul_icon03.png) no-repeat center 20px;} .selected-result-infomation ul.result-infomation li:nth-child(1), .selected-result-infomation ul.result-infomation li:nth-child(2), .selected-result-infomation ul.result-infomation li:nth-child(3){background-size:80px;} .selected-result-infomation ul.result-infomation li .tit{font-size:18px;} /*.selected-result-infomation ul.result-infomation li .an{font-size:30px; } .selected-result-infomation ul.result-infomation li .an span{font-size:13px; color:#000;}*/ } /*BIFC금융강좌*/ .bifc_box{background:#335984; padding:50px 45px; color:#fff; margin-bottom:50px; position: relative;} .bifc_box:after{background: url(/_res/hf/ko/img/mark.png) no-repeat 0 0; content:''; display:block; position: absolute; top:-0px; left:-150px; width:294px; height:208px;} .bifc_box .subject{font-size:42px; margin-bottom:30px; text-align: center; font-weight: 500;} .bifc_box .subject span{margin-left:10px;background: linear-gradient(to right, #5aefce, #48e7f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .bifc_box ul{width:900px; margin:0 auto;} .bifc_box li{position: relative; padding-left:20px; margin-top:6px; font-size:20px; float:left; width:50%; line-height: 34px;} .bifc_box li:after {content: ''; position: absolute; border-radius:50%; border:5px solid #48e7f1; left: 0; top:10px; width:15px; height:15px;} @media only screen and (max-width: 680px) { .bifc_box .subject{font-size:26px; margin-bottom:20px; line-height: 30px;} .bifc_box ul{width:100%;} .bifc_box li{width:100%; font-size:16px; line-height: 22px;} .bifc_box li:after {top:5px;} } @media only screen and (max-width: 500px) { .bifc_box .subject span{display:block;} } /*윤리*/ .ethics .ethics_top{background:url(/_res/hf/ko/img/sub05_02_05_02_02.png) no-repeat center 0; padding:45px 0; text-align: center;} .ethics .ethics_top span.titl01{font-size:30px; color:#000; display:block; margin-bottom:20px;} .ethics .ethics_top span.titl02{font-size:50px; color:#003875;} .ethics .ethics_bottom{text-align: center; margin-bottom:30px;} /*윤리경영체계*/ .ethics_management{background:url(/_res/hf/ko/img/sub05_02_05_04_03.jpg) no-repeat center 0; color:#fff; padding:95px 130px 30px 130px;} .ethics_management div{justify-content: space-between; flex-wrap: wrap; display: flex;} .ethics_management dl{ width: 47%; margin-bottom:50px; line-height:29px;} .ethics_management dt{font-size:24px; margin-bottom:10px;} .ethics_management dd{ line-height:30px; color:rgba(255,255,255,0.7); font-size:19px;} @media only screen and (max-width: 1110px) { .ethics_management{padding:40px;} } @media only screen and (max-width: 768px) { .ethics_management{background-size:cover;} .ethics_management div{display:block;} .ethics_management dl{width:100%;} } .ci_wrap{} .ci_wrap .ci_box{border:1px solid #f5f6f9; padding:60px 0px; text-align: center; margin-bottom:50px;} .ci_wrap .img{margin-bottom:80px;} .ci_wrap .img img{max-width:100%;} .ci_wrap .img_notext img{max-width:100%;} .ci_wrap .img_div{display: flex; justify-content: space-evenly;} .ci_wrap .img_div .line_{border-bottom:1px solid #f5f6f9;} .ci_wrap .text{font-size:24px; color:#000; font-weight: 500;} .ci_wrap .ci_box_sub{/*width:850px; margin:0 auto;*/ text-align: center} .p_pic{} .m_pic{display:none;} @media only screen and (max-width: 900px) { .ci_wrap .ci_box{padding:55px 20px; margin-bottom:45px;} .ci_wrap .img{margin-bottom:60px;} .ci_wrap .text{font-size:22px;} .ci_wrap .ci_box_sub{width:100%; font-size:18px;} .ci_wrap .ci_box_sub .mo_bo{display:none;} .p_pic{display:none;} .m_pic{display:block;} } @media only screen and (max-width: 768px) { .ci_box .img img{max-width:240px;} .ci_wrap .img_div{display: block;} .ci_wrap .img_div p{margin-bottom:40px; padding-bottom:40px;} .ci_wrap .img_div p:last-child{margin-bottom:0px; padding-bottom:0;} .ci_wrap .blue_btn_down + .blue_btn_down{margin-left:0px;} .ci_wrap .blue_btn_down{width:100%; margin-bottom:10px;} } /*전시실소개*/ .exhibition_wrap ul{width:900px; margin:0 auto;} .exhibition_wrap ul li img{max-width:100%;} .exhibition_wrap ul.slick-dots { width:100%; text-align:center; margin-top:50px;} .exhibition_wrap ul.slick-dots li {display:block; width:30px; height:30px; text-align:center; line-height:20px; margin:0px 3px; display:inline-block; padding:0;} .exhibition_wrap ul.slick-dots li button {background:url(/_res/hf/ko/img/exhibition_bul.png) no-repeat -37px 0px; display:block; width:30px; height:30px; text-indent:-999999px;} .exhibition_wrap ul.slick-dots li.slick-active button {background:url(/_res/hf/ko/img/exhibition_bul.png) no-repeat 0px 0px; text-indent:-999999px;} .exhibition_wrap button{width:49px; height:22px; text-indent:-999999px;} .exhibition_wrap button.slick-prev{background:url(/_res/hf/ko/img/sub05_04_07_01_arr.png) no-repeat 0px 0px; text-indent:-999999px; position: absolute; left: -100px; top: 50%;} .exhibition_wrap button.slick-next{background:url(/_res/hf/ko/img/sub05_04_07_01_arr.png) no-repeat -49px 0px; text-indent:-999999px; position: absolute; right: -100px; top: 50%;} @media only screen and (max-width: 1000px) { .exhibition_wrap ul{width:100%; margin:0 auto;} } @media only screen and (max-width: 900px) { .exhibition_wrap ul.slick-dots { width:100%; text-align:center; margin-top:30px;} .exhibition_wrap ul.slick-dots li{margin:0px 1px; width:20px; height:20px;} .exhibition_wrap ul.slick-dots li button {background:url(/_res/hf/ko/img/exhibition_bul.png) no-repeat -23px 0px; display:block; width:20px; height:20px; text-indent:-999999px; background-size:43px;} .exhibition_wrap ul.slick-dots li.slick-active button {background:url(/_res/hf/ko/img/exhibition_bul.png) no-repeat 0px 0px; text-indent:-999999px; background-size:43px;} .exhibition_wrap button{width:32px; height:15px; text-indent:-999999px;} .exhibition_wrap button.slick-prev{background:url(/_res/hf/ko/img/sub05_04_07_01_arr.png) no-repeat 0px 0px; background-size:66px; text-indent:-999999px; position: absolute; left:0px; top: auto; bottom:13px} .exhibition_wrap button.slick-next{background:url(/_res/hf/ko/img/sub05_04_07_01_arr.png) no-repeat -34px 0px; background-size:66px; text-indent:-999999px; position: absolute; right: 0; top: auto; bottom: 13px;} } /*인재상*/ .talent_wrap{border-bottom:1px solid #ddd;} .talent_wrap .word-slogan{position: relative; text-align: center; font-size:30px; color:#335faa; font-weight: 500; padding:20px 0 80px 0; z-index:1;} .talent_wrap .word-slogan:after, .talent_wrap .word-slogan:before{content: ''; position: absolute; width: 40px; height: 40px; top:30px;} .talent_wrap .word-slogan:after{background:url(/_res/hf/ko/img/sub05_07_01_05.png) no-repeat 0 0; right:15%;} .talent_wrap .word-slogan:before{background:url(/_res/hf/ko/img/sub05_07_01_04.png) no-repeat 0 0; left:15%; top:0px; z-index:0;} .talent_wrap dl{display: flex; padding:47px 0 47px 19.84%; color:#333; border-top:1px solid #ddd; align-items: center; position: relative;} .talent_wrap dl dt { font-size:24px; margin-right:80px; position: relative;} .talent_wrap dl dt strong{margin-right:22px;} .talent_wrap dd li:before{content: ''; position: absolute; border-radius: 50%; width: 3px; height: 3px; left: 0; top: 15px; background: #000;} .talent_wrap dl dt:after{content:''; position: absolute; display:block; width:60px; height:78px;} .talent_wrap dl:nth-child(2) dt:after{ background:url(/_res/hf/ko/img/sub05_07_01_01.png) no-repeat 0 0; left:-150px; top:-20px; width:60px; height:78px;} .talent_wrap dl:nth-child(3) dt:after{ background:url(/_res/hf/ko/img/sub05_07_01_02.png) no-repeat 0 0; left:-150px; top:-20px; width:72px; height:67px;} .talent_wrap dl:nth-child(4) dt:after{ background:url(/_res/hf/ko/img/sub05_07_01_03.png) no-repeat 0 0; left:-160px; top:-20px; width:92px; height:66px;} @media only screen and (max-width: 900px) { .talent_wrap .word-slogan{font-size:26px; padding:20px 0 40px 0;} .talent_wrap .word-slogan span{display:block;} .talent_wrap dl{display: block;} .talent_wrap dl dt:after{left:-100px;} } @media only screen and (max-width: 768px) { .talent_wrap dl{padding:20px;} .talent_wrap dl dt{padding:10px 0 30px 82px;} .talent_wrap dl dt:after{left:-100px;} .talent_wrap dl:nth-child(2) dt:after{left:0px; top:0px; width: 52px; height: 54px; background-size: 40px;} .talent_wrap dl:nth-child(3) dt:after{ background-size: 49px; left:0; top:0px; width:49px; height:46px;} .talent_wrap dl:nth-child(4) dt:after{ background-size: 62px; left:0px; top:10px; width:62px; height:44px;} .talent_wrap .word-slogan:after{right:-10px;top:63px} .talent_wrap .word-slogan:before{left:20px;} } .tree_wrap{ display: flex;justify-content: space-between; flex-wrap: wrap;} .tree_wrap .tree{width:calc(20% - 11px); margin-bottom:35px;} .tree_wrap.st4 .tree{width:calc(25% - 11px);} .tree_wrap .tree .subject{padding:15px 0; background:#404e6f; text-align: center; color:#fff; font-weight: 500;} .tree_wrap .tree .sub_link{font-size:16px; background:#089ddc; color:#fff; border-bottom:1px solid #52bee8; font-weight: 500; position: relative; line-height:20px;} .tree_wrap .tree .sub_link:after{content:''; display:block; position: absolute; right:25px; top:50%; width:8px; height:15px; background:url(/_res/hf/ko/img/tree_arr.png) no-repeat 0 0; margin-top: -7px;} .tree_wrap .tree .sub_link a{color:#fff; padding:20px 25px; display:block;} .tree_wrap .tree .sub_link.on:after{content:''; display:block; position: absolute; right:25px; top:33px; width:16px; height:8px; background:url(/_res/hf/ko/img/tree_arr02.png) no-repeat 0 0;} .tree_wrap .tree .sub_link ul{border:2px solid #52bee8; background:#f0f1f4; padding:25px;} .tree_wrap .tree .sub_link ul li a{color:#666; padding:5px 0 5px 10px; position: relative; font-weight: 400;} .tree_wrap .tree .sub_link ul li a:after{position: absolute; content:''; width:4px; height:1px; background:#666; left:0; top:14px;} @media only screen and (max-width: 1027px) { .tree_wrap.st4 .tree, .tree_wrap .tree{width:calc(50% - 11px);} .tree_wrap .tree .subject{font-size:18px;} .tree_wrap .tree .sub_link a{padding:20px 20px;} } .btn_ALIO{position: relative; border-radius:30px; background:#7586a2; font-weight: 500; color:#fff; font-size:20px; padding:17px 25px 17px 25px; line-height:56px;} .btn_ALIO:after{content:''; display:inline-block; background:url(/_res/hf/ko/img/btn_ALIO_btn.png) no-repeat ; width:22px; height:18px; margin-left:15px; vertical-align: middle;} .btn_ALIO:hover{color:#fff; background:#225283;} @media only screen and (max-width: 768px) { .btn_ALIO{font-size:16px;line-height:40px; font-weight: 400; padding:10px 25px 10px 25px;} } /*대상비교그래프*/ .loans_wrap{display: flex;align-items: center; margin-bottom:30px; margin:0 -15px;} .loans_wrap .loans_Graph{padding: 35px 35px; border: 3px solid #f4f5f7; border-radius: 10px; width:calc(33.3% - 30px); box-sizing:border-box; margin:0 15px;} .loans_wrap .loans_Graph .suject{font-size:24px; color:#535f77; margin-bottom:15px;font-weight: 600; text-align: center;} .loans_wrap .loans_Graph .img img{max-width:100%; margin-bottom:20px;} .loans_wrap .loans_Graph ul{margin-left:10px;} .loans_wrap .loans_Graph ul li{padding-left:10px;} .loans_wrap .loans_Graph ul li:before{ content: ''; position: absolute; border-radius: 50%; width: 3px; height: 3px; left: 0; top: 15px; background: #333333;} .loans_wrap .loans_Graph ul li span{color:#555559; font-weight: 500;} @media only screen and (max-width: 1027px) { .loans_wrap{display: block;} .loans_wrap .loans_Graph{width:100%; margin-bottom:20px;} .loans_wrap .loans_Graph .img{text-align: center;} } /*설문조사*/ .Survey_memo{font-size:16px; line-height: 24px;} dl.Survey{border-top:2px solid #000;} dl.Survey dt{padding:30px; color:#000; background:#f9f9f9; border-bottom:1px solid #ddd;} dl.Survey dd{padding:15px 30px; border-bottom:1px solid #ddd; font-size:16px;} /*통합검색*/ .total_sch{background:#f1f4f7; padding:35px 10px 25px 10px;} .total_sch .sch_img{margin-right:20px;} .total_sch .search_chang{display:flex; width: 950px; margin: 0 auto; align-items: center;} .total_sch .search_chang_inner{width: 790px;} .total_sch .search_chang fieldset{display: flex;align-items: center;} .total_sch .search_chang .button_sch{color:#fff; background:#4586de; font-weight: 600; font-size:18px; width:100px; height:52px; text-align: center; margin-left:-1px;} .total_sch .search_chang .button_sch01{display:block; margin:0 18px 0 7px; color:#fff; background:#3e406d; font-weight: 600; font-size:18px; width:100px; height:52px; line-height:52px; text-align: center;} .total_sch .search_chang fieldset select{height:50px; border:1px solid #231815; width:calc(100% - 205px); border-right:0; background: #fff url(/_res/hf/ko/img/select_total.png)no-repeat 98% 50%;} .total_sch .result_chang{font-size:16px; color:#000;} .relation ul{padding-left:13%; margin-top:20px;} .relation li{float:left; margin-left:22px;} .relation li:first-child{color:#424242; font-size:18px; font-weight: 500;} .relation li a{color:#004166; font-size:16px;} .sch_tab{margin-bottom:50px; position:relative; margin:30px 0 50px 0;} .sch_tab:after{content:''; display:block; clear:both;} .sch_tab ul{/*overflow:hidden;*/} .sch_tab li{ vertical-align:top;position:relative; z-index:1; float: left; margin:0 2px 5px 2px; width:calc(20% - 4px);} .sch_tab li:last-child{margin-right:0;} .sch_tab li.active{z-index:6} .sch_tab li.active a{background:#006cc7; color:#fff; padding:0;} .sch_tab a{display:block; text-align:center; font-size:18px; letter-spacing:-0.07em; background:#f7f7f7; color:#111;line-height:50px; height:50px;} #result_wrap{display:flex; width:100%; justify-content: space-between;} #result_wrap .cLeft{width:calc(100% - 322px);} #result_wrap .search_result{padding-bottom:17px; border-bottom:1px solid #e5e5e5; margin-bottom:30px;} #result_wrap .search_result .main_tit{font-size:30px; font-weight: 600; color:#3c3c3c; margin-bottom:20px;} #result_wrap .cRight{width:265px; border-left:1px solid #e5e5e5; padding-left:20px; box-sizing:border-box;} #result_wrap h6{font-size:22px; color:#000; font-weight: 500; position: relative; padding-left:15px; margin-bottom:18px;} #result_wrap h6:after{position: absolute; content:''; display:block; width:7px; height:7px; background:#595eaf; left:0; top:12px; border-radius:50%;} #result_wrap .total_box{background:#f6f6f6; border:1px solid #ebebeb; padding:7px; margin-bottom:40px;} #result_wrap .total_box ul{background:#fff; padding:20px 35px;} #result_wrap .total_box ul li{float:left; width:25%;} #result_wrap .total_box ul li a{color:#666; font-size:16px; position: relative; padding-left:17px;} #result_wrap .total_box ul li a:after{position: absolute; content:''; display:block; width:5px; height:5px; background:#000; left:0; top:7px; border-radius:50%;} .search_inbox {padding-left:13px; border-bottom:1px solid #ddd; margin-bottom:43px;} .search_inbox .search_blist li{margin-bottom:25px;} .search_inbox .search_blist li p.stit {font-size:1.8rem; line-height:2.2rem; color:#003d91; font-weight:500; margin-bottom:10px;} .search_inbox .search_blist li p.stit span.date {color:#999; font-weight:300; display:inline-block; margin-left:10px;} .search_inbox .search_blist li p.scopy {display:block; overflow: hidden; text-overflow: ellipsis; height:4.4rem; line-height:2.2rem; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; font-weight: 300; font-size:16px;} .search_inbox .search_blist li p.sloca {position:relative; font-size:1.6rem;} .search_inbox .search_blist li p.sloca span {position:relative; display:inline-block; color:#9f1515; font-weight:500;} .search_inbox .search_blist li p.sloca span::after {content:'>'; display:inline-block; height:1rem; font-family: 'GmarketSans'; font-weight:200; padding:0 10px;} .search_inbox .search_blist li p.sloca span:last-child::after {display:none;} .search_inbox .search_blist li a:hover p.stit {color:#ff0000;} .search_inbox .search_blist li:last-child{margin-bottom:0px;} .search_inbox .search_more{ font-size:15px; text-align: right; margin:20px 0 10px 0;} .search_inbox .search_more a{color:#003d91; font-weight:500;} @media all and (max-width:1024px){ .search_inbox .search_blist li p.stit span.date {display:block; margin-left:0; margin-top:10px;} } .search_inbox .search_list li {position:relative; font-size:18px;} .search_inbox .search_list li span {position:relative; display:inline-block;} .search_inbox .search_list li span::after {content:'>'; display:inline-block; height:1rem; font-family: 'GmarketSans'; font-weight:200; padding:0 10px;} .search_inbox .search_list li span:last-child::after {display:none;} .search_inbox .more {position:absolute; top:-40px; right:0; background:url(/portal/images/common/searmore.png) no-repeat right 45%; padding-right:40px; font-size:1.6rem;} .ss_tab{position:relative; margin-bottom:20px} .ss_tab li{ vertical-align:top;position:relative; z-index:1; float: left; width:25%;} .ss_tab li:last-child{margin-right:0;} .ss_tab li:first-child a{border-left:1px solid #ddd;} .ss_tab li.active{z-index:6} .ss_tab li.active a{background:#003875; color:#fff; padding:0; border:1px solid #003875;} .ss_tab a{display:block; text-align:center; font-size:15px; letter-spacing:-0.07em; background:#f7f7f7; color:#111;line-height:33px; height:33px; border:1px solid #ddd; margin-left:-1px;} .top_text{border-bottom:1px solid #ddd; padding-bottom:20px;} .top_text h2{font-size: 17px; color:#333; font-weight: 500; margin-bottom:20px;} .top_sch li, .top_text li{line-height:24px;} .top_sch {border-bottom:1px solid #ddd; padding-bottom:20px; margin-top:40px;} .top_sch h2{font-size: 17px; color:#333; font-weight: 500; margin-bottom:20px;} .top_sch li .num, .top_text li .num{width: 13px; height: 13px; margin-right: 9px; border: 1px solid #e0e0e0; font-size: 11px; color: #666666; text-align: center; line-height: 13px; display: inline-block;} .top_sch li .txt, .top_text li .txt{cursor: pointer; vertical-align: middle; display:inline-block; font-size:16px;} .top_sch li .arrow_img {margin-left: 5px; font-size: 11px; color: #666; text-align: left; display: block; overflow: hidden; float: right; width: 40px;} .detail_wrap{padding: 30px 18%; font-size:16px; position: relative; display:none;} .detail_wrap .detail_btn{ position: absolute; right: 15%; top: 15px;} .detail_wrap ul{color:#68737e;} .detail_wrap ul li{display: flex; align-items: center; justify-content: flex-start;} .detail_wrap ul li span.title{width:47px; position: relative; display:inline-block; margin-right:14px; color:#575b5f; font-weight: 500;} .detail_wrap ul li span.title:after{content:''; display:block; height:12px; width:1px; background:#666; right:0px; top:10px; position: absolute;} .detail_wrap ul li span{width:100px; display:inline-block;} .detail_wrap ul li input[type="text"]{height:28px; border:1px solid #666; width:90px;} .detail_wrap ul li input[type="radio"]{width:19px; height:18px;} @media all and (max-width:1000px){ .total_sch{background:none; padding:0;} .total_sch .search_chang{width:100%; display:block;} .total_sch .search_chang fieldset{width:100%; justify-content: center;} .total_sch .search_chang .search_chang_inner{background:#f1f4f7; padding:20px; width:100%;} .total_sch .result_chang{text-align: right; border-bottom: 1px solid #ddd;} .relation li:first-child{width:100%; margin-left:0; margin-right:20px;} #result_wrap{display:block;} #result_wrap .cLeft, #result_wrap .cRight{width:100%;} #result_wrap .cRight{padding-left:0; border-left:none;} .sch_tab li{ width: calc(33.3% - 4px);} #result_wrap .total_box ul li{width:33.3%} .total_sch .sch_img{display:none;} .relation ul{padding-left:0;} .detail_wrap{padding: 15px 0; border-top:1px solid #ddd; margin-top:10px;} .detail_wrap ul li{display:block;} .detail_wrap ul li span.title{display:block;} .detail_wrap ul li span.title:after{display:none;} .detail_wrap ul li span{width:auto; margin-right:5px;} } @media all and (max-width:600px){ .sch_tab li{ width: calc(50% - 4px);} #result_wrap .total_box ul li{width:50%;} .detail_wrap ul li span{display:block;} } /*개인정보처리*/ .message{position:relative; margin-bottom:50px; margin-top:30px;} .message p.tit{font-weight: 500;color:#333; font-size:28px; margin-bottom:30px; text-align: center;} .message ul{display:flex; flex-wrap: wrap;} .message ul li{position:relative; border-radius:10px; width:calc(33.3% - 20px); float: left; border:4px solid #f4f5f7; margin:0 10px; box-sizing:border-box; padding:30px 0; height:310px; margin-bottom:30px; text-align: center;} .message ul li span{display:block;} .message:after{display:block; content:''; clear: both;} .message ul li span.title{margin-bottom:123px; font-weight: 600; font-size:24px; line-height: 25px; color:#535f77;} .message ul li span.sub_tit{font-size:18px; line-height: 30px; color:#333; font-weight: 500;} .message ul li span.sub_memo{font-size:18px; font-weight: 300; color:#666;} .message ul li:nth-child(1){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_01.png) no-repeat 50% 80px; background-size:74px;} .message ul li:nth-child(2){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_02.png) no-repeat 50% 80px; background-size:74px;} .message ul li:nth-child(3){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_03.png) no-repeat 50% 80px; background-size:74px;} .message ul li:nth-child(4){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_04.png) no-repeat 50% 80px; background-size:74px; margin-bottom:10px;} .message ul li:nth-child(5){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_05.png) no-repeat 50% 80px; background-size:74px; margin-bottom:10px;} .message ul li:nth-child(6){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_06.png) no-repeat 50% 80px; background-size:74px; margin-bottom:10px;} .con_list .a{color:#333; font-size:28px; text-align:center;} .con_list ul{padding:50px 100px; border:1px solid #ddd; border-radius:30px; margin-top:20px;} .con_list ul li{width:50%; float:left; margin-bottom:15px; display:flex;} .con_list ul li .img-ico{margin-right:15px; width:35px;} .con_list ul li .img-ico img{width:35px; max-width: 35px;} .con_list ul li span{width:calc(100% - 50px);} dl.personal{} dl.personal dt{font-weight:500; color:#333; font-size:24px; margin-bottom:10px; display:flex;} dl.personal dt span.img{margin-right:10px; width:40px;} dl.personal dt span.img img{vertical-align: middle; max-width: 40px;} dl.personal dt span.title{width:calc(100% - 50px);} dl.personal dd{margin-bottom:45px;} dl.personal dd .box{padding:0 40px 40px 40px; border:1px solid #ddd; border-radius:30px; margin-top:20px;} @media screen and (max-width:900px){ .message p.tit{ font-size:22px;} .message ul li{height:auto; width:100%; margin-bottom:10px; text-align: left; padding:30px 30px 30px 125px;} .message ul li span.title{margin-bottom:10px; font-size:22px; line-height: 25px; color:#535f77;} .message ul li:nth-child(1){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_01.png) no-repeat 43px 50%; background-size:50px;} .message ul li:nth-child(2){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_02.png) no-repeat 43px 50%; background-size:50px;} .message ul li:nth-child(3){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_03.png) no-repeat 43px 50%; background-size:50px;} .message ul li:nth-child(4){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_04.png) no-repeat 43px 50%; background-size:50px;} .message ul li:nth-child(5){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_05.png) no-repeat 43px 50%; background-size:50px;} .message ul li:nth-child(6){background: url(/_res/hf/ko/img/icon_sub05_sub03_01_big_06.png) no-repeat 43px 50%; background-size:50px;} .con_list ul{padding:30px;} .con_list ul li{width:100%;} } /*취급은행 리스트*/ .bank-list-area {text-align: center;} .bank-list-box {position: relative; float: left; width: 25%; margin-left: -1px; margin-bottom: -1px;} .bank-list-box span{position: absolute; left:10px; top:8px;} .bank-list-box span img {width:23px;} .bank-list-info {border: 1px solid #e5e5e5; padding: 28px 69px; height: 156px; box-sizing: border-box;} .bank-list-info .text{display: block; border: 1px solid #bec2c7; line-height: 38px; font-size: 17px; color: #333; font-weight: 500;} .bank-list-info img { display: block; width: 177px; height: 44px; margin: 0 auto 19px auto;} #content.annuity_layout .bank-list-info .text{font-size: 22px;} @media (max-width: 1150px){ #content.annuity_layout .bank-list-info .text{font-size: 17px;} } @media (max-width: 1100px){ .bank-list-box {width: 33.3%;} } @media (max-width: 800px){ .bank-list-box {width: 50%;} .bank-list-info{padding:15px 30px; height:120px;} .bank-list-info img {width:150px; height:auto; margin: 0 auto 10px auto;} .bank-list-box span{top:0px;} .bank-list-box span img{width:18px; height:18px;} .fweight{font-size:18px;} .fweight img{width:20px; height:20px;} } @media (max-width: 500px){ .bank-list-info img {width:100px;} .bank-list-info{padding:25px 20px; height:115px;} } /*패밀리사이트 리스트*/ .family_site-area {text-align: center;} .family_site-box {position: relative; float: left; width: 33.3%; margin-left: -1px; margin-bottom: -1px;} .family_site-box span{position: absolute; left:10px; top:8px;} .family_site-box span img {width:23px;} .family_site-info {border: 1px solid #e5e5e5; padding: 28px 25px; height: 220px; box-sizing: border-box;} .family_site-info .text{display: block; border: 1px solid #bec2c7; line-height: 38px; font-size: 17px; color: #333; font-weight: 500;} .family_site-info img { display: block; width: 307px; height: 88px; margin: 0 auto 19px auto;} @media (max-width: 800px){ .family_site-box {width: 50%;} .family_site-info{padding:15px 30px; height:120px;} .family_site-info img {width:177px; height:auto; margin: 0 auto 10px auto;} .family_site-box span{top:0px;} .family_site-box span img{width:18px; height:18px;} } @media (max-width: 500px){ .family_site-info img {width:100px;} .family_site-info{padding:25px 20px; height:115px;} } .border-link{display: inline-block; margin: 2px 0; padding: 0 10px; background: #329be8; color: #fff; font-weight: 400; font-size: 18px; } /* 예상연금조회, 예상대출조회 등 버튼 분기*/ ul.bunhal2 >li > div .bbtn.pc{display:block;} ul.bunhal2 >li > div .bbtn.mobile{display:none;} @media (max-width: 1024px){ ul.bunhal2 >li > div .bbtn.pc{display:none;} ul.bunhal2 >li > div .bbtn.mobile{display:block;} ul.bunhal2 >li > div .bbtn + input[type="text"] { width: calc(100% - 25px)!important; } } /*전세지킴보증 체크리스트*/ .question_wrap_rent{margin:0 auto;} .question_wrap_rent.question_ok{display:block;} .question_wrap_rent.question_no{display:none;} .question_wrap_rent .question{background:#00a94e; color:#fff; border-radius:30px 30px 0 0; padding: 40px 20px 30px 20px; text-align: center; position: relative;} .question_wrap_rent .question:after{background: url(/_res/hf/ko/img/mark.png) no-repeat 0 0; content:''; display:block; position: absolute; top:-35px; right:20px; width:294px; height:208px;} .question_wrap_rent .question.result{background:#247bdc; color:#fff; border-radius:30px 30px 0 0; padding:55px 25px; text-align: center; position: relative; min-height: 211px; display: flex; justify-content: space-around; align-items: center;} .question_wrap_rent .question.result .question_pre{right:20px;} .question_wrap_rent .question.result .question_first{padding: 0px 15px; text-align: center; border: 2px solid #fff; cursor: pointer; background:none;} .question_wrap_rent .question .question_step{position: absolute; right:20px; top:30px; font-size: 15px; border-radius: 30px; padding: 0px 0px; text-align: center; border: 2px solid #fff; width: 60px;} .question_wrap_rent .question .question_first{position: absolute; left:20px; top:30px; font-size: 16px; border-radius: 30px; padding: 0px 15px; text-align: center; background:#3b7f0b; border: 2px solid #35700b; cursor: pointer; z-index:9; color:#fff;} .question_wrap_rent .question .question_pre{position: absolute; right:90px; top:30px; font-size: 17px; border-radius: 30px; padding: 0px 15px; text-align: center; border: 2px solid #fff; cursor: pointer; z-index:9; color:#fff;} .question_wrap_rent .question .sub_memo{color:#FFFFD0; font-size:18px; font-weight: 600; margin-bottom:10px;} .question_wrap_rent .question .question_A{font-weight: 600; font-size:20px; line-height:31px; min-height: 125px;} .question_wrap_rent .question_select{background:#f5f5f5; display: flex; justify-content: space-evenly; border-radius:0 0 30px 30px;} .question_wrap_rent .question_select .select-01{border-right: 1px solid #00a94e; background: url(/_res/hf/ko/img/question_select_01.png); background-position: center; background-repeat: no-repeat;} .question_wrap_rent .question_select .select-02{background: url(/_res/hf/ko/img/question_select_02.png); background-position: center; background-repeat: no-repeat;} .question_wrap_rent .question_select .number_01{margin:25px; width:130px; height:130px; border-radius:50%; text-align: center; font-weight: 500;} .question_wrap_rent .question_select .number_02{margin:25px; width:130px; height:130px; border-radius:50%; text-align: center; font-weight: 500;} .question_wrap_rent .btn_deposit{background:#00a94e url(/_res/hf/ko/img/btn_search.png) no-repeat 136px 12px; padding:5px 0px 5px 25px; color:#fff; font-weight: 300; margin-top:20px; display:block; border-radius:30px; width:177px; font-size:20px;} .question_wrap_rent .question_result{color:#333; background:#f5f5f5; padding:38px 35px; border-radius:0 0 30px 30px; font-size:21px; text-align:center; line-height:55px; letter-spacing: -1px;} .question_wrap_rent .question_result .btn_view{border-radius: 40px; background: #114b8b url(/_res/hf/ko/img/btn_search.png) no-repeat 40px 25px;; width: 196px; color: #fff; font-size: 20px; display: inline-block; text-align: left; padding: 0px 0 0px 68px; line-height: 70px;} .question_wrap_rent .question_result .btn_annuity{border-radius: 40px; width: 196px; color: #114b8b; font-size: 23px; text-align: center; border:3px solid #114b8b; background:#fff; line-height: 64px; display: inline-block; margin-left:10px;} .question_wrap_rent .bg_02{background-color:#0054a4 !important;} .question_wrap_rent .bg_03{background-color:#4cac06 !important;} .question_wrap_rent .bg_04{background-color:#ed6d02 !important;} .question_wrap_rent .btn_annuity.cresult02{border:3px solid #ed6d02; color:#ed6d02;} .question_wrap_rent .btn_annuity.cresult03{border:3px solid #4cac06; color:#4cac06;} .question_wrap_rent .btn_annuity.cresult04{border:3px solid #0054a4; color:#0054a4;} @media only screen and (max-width: 1150px) { .question_wrap_rent{width:400px;} .question_wrap_rent .question .question_step{font-size:16px;} .question_wrap_rent .question .sub_memo{font-size:24px;} .question_wrap_rent .question .question_A{font-size:40px; line-height:55px;} .question_wrap_rent .question_result{font-size:34px; line-height:45px;} .question_wrap_rent .question_result .btn_annuity{margin-top:5px; margin-left:0px;} } @media only screen and (max-width: 500px) { .question_wrap_rent{width:100%; margin:0 auto;} } .product_rent{display: inline-flex;} .product_rent dl{position: relative; margin-right:20px;background:#fff; border-radius:10px; padding:25px; width:calc(33.3% - 15px);} .product_rent dl:last-child{margin-right:0;} .product_rent dt{color:#4078cc; font-weight: 600; font-size:23px; margin-bottom:20px; text-align: center; justify-content: space-evenly;} .product_rent dd{font-size:17px; color:#333; line-height: 25px;} .product_rent dd li{font-size:17px; line-height: 20px; padding-left: 10px; color:#333;} .product_rent dd li:before{width: 3px; height: 3px; top:7px;} .product_wrap.bg_07 .product_rent dd{text-align: center;} @media (max-width: 768px){ .product_rent {display: block;width: auto;height: auto;} .product_rent dl{position: relative; background: #fff; border-radius: 10px;padding: 25px;width: 100%;} .question_wrap_rent .question .question_A {font-size: 17px; line-height: 32px;} #question_none11{display:none;} /*#cms-content .h4 + ul[class^="list_ul"]{font-size:14px;}*/ ul[class^="list_ul03"] li >ul >li {font-size: 18px;} /*신고센터안내 화면 내 */ /* .modal-wrapper { position: fixed; top: 10px; right: 10px; bottom: 10px; left: 10px; z-index: 999; margin: 0 auto; display: none; height: auto; background-color: #fff; border-radius: 5px; } .modal-wrapper.open { display: block; } .modal-wrapper .head { position: relative; height: 50px; line-height: 50px; font-weight: bold; text-align: center; color: #fff; background-color: #ff0000; border-radius: 5px 5px 0 0; } .modal-wrapper .head .btn-close { position: absolute; top: 5px; right: 5px; display: block; } .modal-wrapper .content { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; } .modal-wrapper .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 20px 10px; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }*/ } /*시스템 점검안내 페이지용*/ .maintenance_type1 {display: flex; flex-wrap: wrap; margin-top:40px;} .maintenance_type1 .p_box{position: relative; width: calc(25% - 40px); margin: 0 40px 20px 0px; border: none; float: left;} .maintenance_type1 .p_box .inner{background:#697691; color:#fff; text-align: center; padding:33px 10px; height: auto;} .maintenance_type1 .p_box .inner span{position: absolute; background:#138ce2; width:30px; height:30px; left:0; top:0;} .maintenance_type1 .p_box .inner .process_text{line-height:28px; font-weight:500} .maintenance_type1 .inner.line_3 { padding:25px 10px;} .maintenance_type1 .inner.line_3 .process_text{min-height: 84px; display: flex; align-items: center; align-content: flex-start; justify-content: space-around;} .maintenance_type1 .p_box:last-child:after{display:none;} .maintenance_type1 .p_box ul li{width:100%; margin:0;} .maintenance_type1 .p_box ul li:after{display:none;} .maintenance_type1.step2{display: flex; justify-content: center;} .maintenance_type1.step2 .p_box{width:calc(50% - 40px);} .maintenance_type1.step2 .p_box:after{background:none;} .maintenance_type1 .p_box dd.mh450{min-height: 450px !important;} .maintenance_type1 .p_box dl{margin-top:20px; font-size:20px;} .maintenance_type1 .p_box dt{position: relative; background:#6389ba; font-size:32px; color:#fff; text-align: center; padding:23px 0; line-height:28px; display: flex; align-items: center; justify-content: space-around;} .maintenance_type1 .p_box dt.line_2{min-height:130px;} .maintenance_type1 .p_box dd{background:#f7f7f8; height:100%; padding:36px 26px; color:#333333; line-height: 28px; min-height:1197px;} .maintenance_type1 .p_box dd::after {display: inline-block; height: 100%; vertical-align: middle;} .maintenance_type1 .p_box dd .sub_tit{width: 160px; margin: 30px auto 20px auto; background: #697691; color: #fff; text-align: center; border-radius: 30px; padding: 5px 0;} .maintenance_type1 .p_box dd .sub_tit:first-child{margin: 0px auto 20px auto;} @media (max-width: 1024px){ .maintenance_type1 .p_box{width: 100%; margin: 0 0px 40px 0px;} .maintenance_type1 .p_box:after{top: auto;right: 50%;bottom: -30px; margin: 0 -10px 0 0; transform: rotate(90deg); -webkit-transform: rotate(90deg);} .maintenance_type1 .p_box dd{min-height:auto;} .maintenance_type1 .p_box dl{font-size:18px;} .maintenance_type1.step2{display: flex; flex-wrap: wrap;} .maintenance_type1.step2 .p_box{position: relative; width:calc(80% - 20px); margin: 20px; border: none;} .maintenance_type1.step2 .p_box:after{background:none;} } @media (max-width: 768px){ .maintenance_type1 .p_box dt{font-size:22px;} .maintenance_type1.step2 .p_box{position: relative; width: 100%; margin: 20px; border: none;} } /*동영상 목록 썸네일/제목 2개단위로*/ .service_wrap_half ul{ margin:0 -8px;} .service_wrap_half ul li{float:left; width:calc(50% - 16px); margin:0 8px; margin-bottom:20px;} .service_wrap_half ul li span{display:block;} .service_wrap_half ul li span.img{} .service_wrap_half ul li span.img img{width:100%; } .service_wrap_half ul li span.subject{font-size:20px; color:#333; overflow: hidden;word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 28px; margin-top:20px; text-align: center;} @media (max-width: 1150px){ .service_wrap_half ul li span.subject{font-size:16px; height: 40px; line-height: 20px;} } @media (max-width: 768px){ .service_wrap_half{display:block; margin-top:30px;} .service_wrap_half ul{width:100%;} .service_wrap_half ul li{width:calc(50% - 12px); margin-bottom:30px;} .service_wrap_half ul li:nth-child(2n){margin-right:0;} } @media (max-width: 600px){ .service_wrap_half ul li span.img img{height:123px;} } /*알기쉬운 개인정보처리방침 요약표*/ .message_summary{position:relative; margin-bottom:50px; margin-top:30px;} .message_summary p.tit{font-weight: 500;color:#333; font-size:28px; margin-bottom:30px; text-align: center;} .message_summary ul{display:flex; flex-wrap: wrap;} .message_summary ul li{position:relative; border-radius:10px; width:calc(33.3% - 20px); float: left; border:4px solid #f4f5f7; margin:0 10px; box-sizing:border-box; padding:30px 0; height:310px; margin-bottom:30px; text-align: center;} .message_summary ul li span{display:block;} .message_summary:after{display:block; content:''; clear: both;} .message_summary ul li span.title{margin: 110px 20px 20px 20px; font-weight: 600; font-size:24px; line-height: 30px; color:#535f77;} .message_summary ul li span.sub_tit{font-size:18px; line-height: 30px; color:#333; font-weight: 500; text-align: left; margin:20px;} .message_summary ul li span.sub_memo{font-size:17px; font-weight: 300; color:#666; text-align: left; margin:20px;} .message_summary ul li.title01{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_01.png) no-repeat 50% 10%; background-size:74px;} .message_summary ul li.title02{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_02.png) no-repeat 50% 10%; background-size:74px;} .message_summary ul li.title03{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_03.png) no-repeat 50% 10%; background-size:74px;} .message_summary ul li.title04{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_04.png) no-repeat 50% 10%; background-size:74px;} .message_summary ul li.title05{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_05.png) no-repeat 50% 10%; background-size:74px;} .message_summary ul li.title06{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_06.png) no-repeat 50% 10%; background-size:74px;} /*알기쉬운 개인정보처리방침 1뎁스*/ .introduce_1depth{flex-wrap: wrap; justify-content: space-between;} .introduce_1depth dl{background: #f9faff; padding: 50px 60px 40px 60px; letter-spacing: -2px; border-radius: 20px; margin-bottom: 20px;} .introduce_1depth dl dt{font-size:24px; color:#4078cc; font-weight: bold; margin-bottom:20px; display: flex; align-items: flex-end; padding-bottom: 10px;} .introduce_1depth dl dt.tit00{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_00.png) no-repeat 0; background-size:74px;padding: 20px 0px 20px 94px;} .introduce_1depth dl dt.tit01{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_07.png) no-repeat 0; background-size:74px;padding: 20px 0px 20px 94px;} .introduce_1depth dl dt.tit02{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_08.png) no-repeat 0; background-size:74px;padding: 20px 0px 20px 94px;} .introduce_1depth dl dt.tit03{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_06.png) no-repeat 0; background-size:74px;padding: 20px 0px 20px 94px;} .introduce_1depth dl dd{line-height:32px;} .introduce_3depth{display: inline-flex;} .introduce_3depth dl{position:relative; width:calc(33.3% - 15px);background: #f9faff;padding: 40px 50px;margin:0 10px 30px 10px;border-radius: 20px;box-sizing:border-box;height:400px;} .introduce_3depth dl dt{font-size:24px; color:#4078cc; font-weight: bold; margin-bottom:20px; display: flex; align-items: flex-end; padding-bottom: 10px;} .introduce_3depth dl dd{line-height:32px;} .introduce_3depth dl dd.btn_bottom{position: absolute; bottom: 20px;} /*알기쉬운 개인정보처리방침 4뎁스*/ .introduce_4depth{display: flex; flex-wrap: wrap; justify-content: space-between;} .introduce_4depth dl{background: #f9faff; padding: 50px 60px 40px 60px; letter-spacing: -2px; border-radius: 20px; width: calc(50% - 10px); margin-bottom: 20px;} .introduce_4depth dl dt{font-size:24px; color:#4078cc; font-weight: bold; margin-bottom:20px; display: flex; align-items: flex-end; padding-bottom: 10px;} .introduce_4depth dl dd{line-height:32px;} /*알기쉬운 개인정보처리방침 4뎁스*/ .introduce_4depth{display: flex; flex-wrap: wrap; justify-content: space-between;} .introduce_4depth dl{background: #f9faff; padding: 50px 60px 40px 60px; letter-spacing: -2px; border-radius: 20px; width: calc(50% - 10px); margin-bottom: 20px;} .introduce_4depth dl dt{font-size:24px; color:#4078cc; font-weight: bold; margin-bottom:20px; display: flex; align-items: flex-end; padding-bottom: 10px;} .introduce_4depth dl dd{line-height:32px;} @media only screen and (max-width: 900px) { /*알기쉬운 개인정보처리방침 요약표*/ .message_summary p.tit{ font-size:22px;} .message_summary ul li{height:auto; width:100%; margin-bottom:10px; text-align: left; padding:20px 0px 20px 94px;} .message_summary ul li span.title{margin:20px; font-size:22px; line-height: 25px; color:#535f77;} .message_summary ul li.title01{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_01.png) no-repeat 30px 50%; background-size:74px;} .message_summary ul li.title02{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_02.png) no-repeat 30px 50%; background-size:74px;} .message_summary ul li.title03{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_03.png) no-repeat 30px 50%; background-size:74px;} .message_summary ul li.title04{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_04.png) no-repeat 30px 50%; background-size:74px;} .message_summary ul li.title05{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_05.png) no-repeat 30px 50%; background-size:74px;} .message_summary ul li.title06{background: url(/_res/hf/ko/img/icon_sub05_09_01_05_06.png) no-repeat 30px 50%; background-size:74px;} /*알기쉬운 개인정보처리방침 1뎁스*/ .introduce_1depth{display: block;} .introduce_1depth dl{width:100%; padding:45px;} .introduce_1depth dl dt{margin-bottom:15px;} .introduce_1depth dl dd{font-size:18px;} /*알기쉬운 개인정보처리방침 4뎁스*/ .introduce_4depth{display: block;} .introduce_4depth dl{width:100%; padding:45px;} .introduce_4depth dl dt{background-size:80px; margin-bottom:15px;} .introduce_4depth dl dd{font-size:18px;} }