.pc_menu{display:block;} .mobile_menu{display:none;} .no_write_input{background: #D2D2D2 !important;} @media (max-width: 1150px){ .pc_menu{display:none;} .header .mobile-gnb.on .mobile_menu{display:block;} } .con_wrap{max-width:1360px; margin: 0 auto;} /****** 상단팝업***/ .header-popup-area{position: relative; background:#fcfcfc;} .header-popup-area .header-popup-box{max-width:1520px; margin: 0 auto; position: relative; min-height:176px;} .header-popup-area #responsive-popup{ /*overflow: hidden; height:150px; */padding: 30px 60px 0 60px;} .header-popup-area #responsive-popup a {float:left; width:calc(33.3% - 60px); margin: 0 30px; position: relative;} .header-popup-area #responsive-popup a:after{content:''; display:block; border-right:1px dotted #aeb7bd; position: absolute; top:-10px; right:-30px; height:118px;} .header-popup-area #responsive-popup a:last-child:after{display:none;} .header-popup-area #responsive-popup a span{display:block;} .header-popup-area #responsive-popup a span.title{color:#388acf; font-size:22px;font-weight: 500; letter-spacing: -1px; margin-bottom:10px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; max-width:100%;} .header-popup-area #responsive-popup a span.submit{font-size:15px; color:#000; height: 38px; white-space: normal;text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;} .header-popup-area #responsive-popup a span.word-detail-view{border-radius:30px; padding:2px 5px; background:#74818f; color:#fff; width:90px; font-size:13px;text-align: center; margin-top:10px; } .header-popup-area .a_box{position: absolute; right:0; bottom:5px; font-size:15px;} .header-popup-area .a_box input[type="checkbox"]{width:18px; height:17px;} .header-popup-area .a_box .btn-close1{margin-left:5px; } .header-popup-area ul.slick-dots {position: relative; width:100%; text-align:center; margin-top:10px;} .header-popup-area ul.slick-dots li {display:block; width:10px; height:10px; text-align:center; line-height:20px; margin:0px 2px; display:inline-block; padding:0;} .header-popup-area ul.slick-dots li button {width:10px; height:10px; border-radius:50%; border:3px solid #83888c; text-indent:-999999px; margin:6px 0px; background:#fff;} .header-popup-area ul.slick-dots li.slick-active button{background:#1889ee; border:none;} .header-popup-box button{border-radius: 50%; text-indent: -9999px; top:50%; width:48px; height:48px;position: absolute; transform: translate(0%, -50%);z-index: 2; cursor: pointer;} .header-popup-box button.slick-next.slick-arrow{right:0px;background:#f0f0f0 url(/_res/hf/ko/img/next-arr.png)no-repeat center center;} .header-popup-box button.slick-arrow.slick-prev{left:0px;background:#f0f0f0 url(/_res/hf/ko/img/prev-arr.png)no-repeat center center;} @media all and (max-width: 680px) { .header-popup-area #responsive-popup a:after{display:none;} .header-popup-area #responsive-popup a {width:100%;} .header-popup-area ul.slick-dots{text-align:left;} } /****헤더***/ .header{position: fixed; background:#fff; min-height:170px; z-index: 9999; width: 100%; left: 0; top: 0;} .header .header-box{width:100%; } .header h1{left: 60px; position: absolute; top: 90px; z-index: 999; } .header h1 a{display:block; background:url(/_res/hf/ko/img/logo.png) no-repeat 0 0; width:240px; height:80px; text-indent: -9999999px;} .header .gnb-wrap{margin:0px auto; z-index:0;} .header .gnb-wrap:after{clear:both; content:""; display:block;} .header .gnb-wrap:before{position:absolute; left:50%;width: 100%; transform: translateX(-50%); content:""; background:#fff; border-bottom:solid 1px #e7e7e7;} .header .gnb-wrap.active{background:#fff;} .header.active .gnb-area{ color:#000; background:#fff; background: transparent url(https://researcher.hf.go.kr/_res/researcher/img/researcher/common/bg_gnb_line01.gif) repeat-x left bottom; background: -webkit-linear-gradient(transparent,transparent),url(https://researcher.hf.go.kr/_res/researcher/img/researcher/common/bg_gnb_line01@2x.gif) repeat-x left bottom; background: linear-gradient(transparent,transparent),url(https://researcher.hf.go.kr/_res/researcher/img/researcher/common/bg_gnb_line01@2x.gif) repeat-x left bottom; background-size: 1px 1px; } body.sub .header .gnb-wrap:before{background:#fff;} .header .gnb-wrap .gnb{position:relative;} .header .gnb-wrap .gnb .mobile-top{display:none;} .header .gnb-wrap .gnb .top_menulist{ height:120px; position:relative!important; box-sizing:border-box; } .header .gnb-wrap .gnb .top_menulist > li{text-align: center; display:inline-block; } .header .gnb-wrap .gnb .top_menulist > li:first-child{margin-left:20%;} .header .gnb-wrap .gnb .top_menulist > li > a{float:none; font-size:22px; color:#333; display:block; padding:53px 25px; letter-spacing:-0.02em; font-weight: 600; } .header .gnb-wrap .gnb .top_menulist li .nav:after{clear:both; content:""; display:block;} /* .header .gnb-wrap .gnb .top_menulist li .nav{ position:absolute; top:120px; left:0; display:none; height:502px; } */ .header .gnb-wrap .gnb .top_menulist li .nav{ position:absolute; top:120px; left:0; display:none; } /* 메뉴 테스트 20250306 .header .gnb-wrap.active .gnb .top_menulist li .nav{display:block!important; width:16.66%; box-sizing:border-box; border-right:1px solid #dedede; margin-left:-1px; padding:40px 0 40px 40px; text-align: left; } */ .header .gnb-wrap.active .gnb .top_menulist li .nav{display:block; width:100%; box-sizing:border-box; border-right:1px solid #dedede; margin-left:-1px; padding:0 0 0 40px; text-align: left; } .header .gnb-wrap.active .gnb .top_menulist li.over_h .nav{display:block!important; z-index:99999;} .header .gnb-wrap.active .gnb .top_menulist li .nav .nav-con{ display: grid; grid-template-columns: repeat(6, 1fr); /* 6개의 동일한 크기 열로 설정 */ height:100%; } .header .gnb-wrap.active .gnb .top_menulist li .nav .depth{ position: relative; padding: 2rem; overflow: auto; z-index: 999; } .header .gnb-wrap.active .gnb::before {content:'';display:block; position: absolute; top:119px; left:0%; width: 100%; content: ""; background: #fff; border-bottom: solid 1px #e7e7e7; border-top: solid 1px #e7e7e7; z-index:999;} /*.header .gnb-wrap .gnb .top_menulist li .depth{left:0; border-left:1px solid #dedede;}*/ .header .gnb-wrap .gnb .top_menulist li .depth{left:0; border-right:1px solid #dedede;} .header .gnb-wrap .gnb .top_menulist li .depth:nth-child(6) {border-right:none;} .header .gnb-wrap .gnb .top_menulist li .depth:nth-child(12) {border-right:none;} .header .gnb-wrap .gnb .top_menulist li .depth:nth-child(18) {border-right:none;} /* .header .gnb-wrap .gnb .top_menulist li:nth-child(1) .nav{left:0; border-left:1px solid #dedede;} .header .gnb-wrap .gnb .top_menulist li:nth-child(2) .nav{left:16.66%;} .header .gnb-wrap .gnb .top_menulist li:nth-child(3) .nav{left:33.32%;} .header .gnb-wrap .gnb .top_menulist li:nth-child(4) .nav{left:49.98%;} .header .gnb-wrap .gnb .top_menulist li:nth-child(5) .nav{left:66.64%;} .header .gnb-wrap .gnb .top_menulist li:nth-child(6) .nav{left:83.3%;} */ /* 메뉴 테스트 20250306 .header .gnb-wrap .gnb .top_menulist li:nth-child(7) .nav{display: none !important;} */ .header .gnb-wrap .gnb .top_menulist li:nth-child(7) .nav{display: none;} /* .header .gnb-wrap .gnb .top_menulist li .nav .nav-con .title {font-size:18px; color:#000; font-weight: 600; margin-bottom:15px; display:block;} .header .gnb-wrap.active .gnb .top_menulist li .nav:hover {background-color:#f4f7fa;} .header .gnb-wrap.active .gnb .top_menulist li .nav:hover .title{color:#0c4da2;} .header .gnb-wrap.active .gnb .top_menulist li.over_h .nav{background-color:#f4f7fa;} .header .gnb-wrap.active .gnb .top_menulist li.over_h .title{color:#0c4da2;} */ .header .gnb-wrap .gnb .top_menulist li .nav .nav-con .depth > a:first-child{font-size:18px; color:#000; font-weight: 600; margin-bottom:15px; display:block;} .header .gnb-wrap.active .gnb .top_menulist li .nav:hover {background-color:#fff;} .header .gnb-wrap.active .gnb .top_menulist li .nav:hover .nav-con .depth > a:first-child{color:#0c4da2;} .header .gnb-wrap.active .gnb .top_menulist li.over_h{background-color:#f4f7fa;} .header .gnb-wrap.active .gnb .top_menulist li.over_h .nav{background-color:#fff;} .header .gnb-wrap.active .gnb .top_menulist li.over_h .nav .nav-con .depth > a:first-child{color:#0c4da2;} /*오버 2차 타이틀 */ .header .gnb-wrap .gnb .top_menulist li .nav .nav-con a{position:relative; margin-bottom:12px; float:none; display:block; color:#888; font-weight: 300; font-size:16px; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; letter-spacing: -1px;} .header .gnb-wrap .gnb .top_menulist li .nav .nav-con a:before{display:none;} .header .gnb-wrap .gnb .top_menulist li .nav .nav-con a.newin span{padding-right:24px;} .header .gnb-wrap .gnb .top_menulist li .nav .nav-con a:hover{ color:#0c4da2; } .header .gnb-wrap .gnb .top_menulist li .nav .nav-con a:hover:after{content:''; display:block; width:6px; height:6px; background:#0c4da2; border-radius:50%; position:absolute; left:-15px; top:6px;} /*오버 3차 20250331 .header .gnb-wrap .gnb .top_menulist li .depth_03 {display:none;} */ .header .lnb{display: flex; font-size: 17px; position: absolute; right: 60px; top: 90px; align-items: center;} .header .pc-right .lnb_link{letter-spacing: -1px; position: relative; padding: 3px 35px 3px 20px; margin-right: 15px; background: #E87010; color: #fff; border-radius: 30px; line-height: 48px; font-size: 18px; font-weight: 800;} .header .pc-right .lnb_link:after{content:''; display:block; position: absolute; right:15px; height:15px; width:8px; background:url(/_res/hf/ko/img/tree_arr.png); top:8px;} .header .pc-right .lnb_eng{padding: 0 19px; line-height: 49px; color: #000;} .header.active .pc-right .lnb_link:after, .header.fixed .pc-right .lnb_link:after{content:''; display:block; position: absolute; right:15px; height:15px; width:8px; background:url(/_res/hf/ko/img/tree_arr.png); top:8px;} .header .pc-right .lnb_link2{letter-spacing: -1px; position: relative; padding: 3px 35px 3px 20px; margin-right: 15px; background: #1ba953; color: #fff; border-radius: 30px; line-height: 48px; font-size: 18px; font-weight: 800;} .header .pc-right .lnb_link2:after{content:''; display:block; position: absolute; right:15px; height:15px; width:8px; background:url(/_res/hf/ko/img/tree_arr.png); top:8px;} .header.active .pc-right .lnb_link2:after, .header.fixed .pc-right .lnb_link2:after{content:''; display:block; position: absolute; right:15px; height:15px; width:8px; background:url(/_res/hf/ko/img/tree_arr.png); top:8px;} .header .mobile-right{display:none;} @media all and (max-width: 1150px) { .header .mobile-right{display: block;} .header .mobile-right .lnb_link{letter-spacing: -1px; position: relative; padding: 3px 35px 3px 20px; margin-right: 15px; background: #E87010; color: #fff; border-radius: 30px; line-height: 48px; font-size: 18px; font-weight: 800;} .header .mobile-right .lnb_link:after{content:''; display:block; position: absolute; right:15px; height:15px; width:8px; background:url(/_res/hf/ko/img/tree_arr.png); top:8px;} .header .mobile-right .lnb_eng{padding: 0 19px; line-height: 49px; color: #000;} .header.active .mobile-right .lnb_link:after, .header.fixed .mobile-right .lnb_link:after{content:''; display:block; position: absolute; right:15px; height:15px; width:8px; background:url(/_res/hf/ko/img/tree_arr.png); top:8px;} .header .pc-right{display:none;} } .header .gnb-area .gnb-box .left li a {display: block;padding: 0 19px;height: 49px;line-height: 49px;color: #000;margin-right: -1px;} .header .lnb .lnb_eng{font-weight: bold;} .header .lnb .all_search {margin-left:35px;display:block; width:20px; height:20px; background:url(/_res/hf/ko/img/spr_spot.png); background-position: -431px -167px; text-indent: -9999999px;} .header .lnb .all_menu{margin-left:25px; display:block; width:30px; height:18px; background:url(/_res/hf/ko/img/spr_spot.png); background-position: -426px -56px; text-indent: -9999999px;} .mark_bg.active{background:rgba(0,0,0,0.5); width:100%; height:100%; position: fixed; z-index:-1;} /* sub nav */ .sub-nav{background:#005eb8; /*border-bottom:1px solid #ccc;*/ z-index:99; position: fixed; top: 170px; left: 0; width: 100%;} .sub-nav.fixed{box-shadow: 3px 3px 15px rgb(0 0 0 / 50%);} .sub-nav .con_wrap{display:flex; justify-content:space-between;} .sub-nav_list.msub{display:none;} .sub-nav_list{} .sub-nav_list > ul{display:flex;} .sub-nav_list > ul > li{position:relative;} .sub-nav_list > ul > li::after{content:''; display:block; width:1px; height:78px; background:#2173c1; position:absolute; right:0; top:50%; transform:translateY(-50%);} .sub-nav_list > ul > li.home{border-left:1px solid #2173c1;} .sub-nav_list > ul > li.home a{font-weight: 400; text-indent:-9999px; overflow:hidden; width:60px; height:78px; background:url('/_res/hf/ko/img/nav-icon.png') no-repeat center center; display:block;} .sub-nav_list > ul > li:not(.home) > a{padding:0 20px; height:78px; display:flex; align-items:center; justify-content:space-between; min-width:240px; font-size:18px; color:#fff; position:relative;} .sub-nav_list > ul > li:not(.home) > a::after{content:''; display:block; min-width:23px; height:23px; background-repeat:no-repeat; background-position:0 0; background-image:url('/_res/hf/ko/img/nav-arrow.png'); margin-left:20px;} .sub-nav_list > ul > li:not(.home) > a.active{color:#fff; background:#005287;} .sub-nav_list > ul > li:not(.home) > a.active::after{background-image:url('/_res/hf/ko/img/nav-arrow-active.png');} .sub-nav_list > ul > li:not(.home) > a.active + .depth{opacity:1; visibility:visible;} .sub-nav_list .depth{position:absolute; width:100%; top:calc(100% + 1px); border-width:0 1px 1px 1px; border-style:solid; border-color:#ccc; background:#e4e7eb; padding:0px; visibility:hidden; opacity:0; transition:all .4s; z-index:10; overflow-y: scroll; height: 394px;} .sub-nav_list .depth > li{border-bottom:1px solid #d3d8df;} .sub-nav_list .depth > li > a{font-size:16px; font-weight: 400; color:#555; text-decoration:none; position:relative; padding:23px 15px; display:block; font-weight: 400;} .sub-nav_list .depth > li > a:hover, .sub-nav_list .depth > li > a:focus{color:#fff; background:#0b5ea9; } .sub-nav_list.msub > ul > li.active > ul {display:none;} /*.sub-nav_list.msub > ul > li.active > a:hover + ul {display:block;} */ .msub {display:none;} @media all and (max-width: 1024px) { .msub {display:block; position:relative; width:100%;} .msub a {display:block; width:100%;} .msub > ul {width:100%;} .msub > ul > li {width:100%; position:relative;} .msub > ul > li > a {padding:20px; text-align:center; color:#fff; font-size:19px; font-weight:500;} .msub > ul > li > a:after {content:''; display:block; width:30px; height:30px; border-radius:50%; background:#48b32b url('/_res/hf/ko/img/submenubg.png') no-repeat 50% 50%; position:absolute; top:calc(50% - 15px); right:20px; background-size:14px; transform:rotate(180deg);} .msub > ul > li > a.on:after {transform:rotate(0deg);} .msub > ul > li > a + ul {display:none; position:absolute; top:100%; left:0; background: rgba(0,0,0,0.5); width:100%; overflow-y: auto; height: calc(100vh - 120px);} /*.msub > ul > li > a:hover + ul {display:block; }*/ .msub > ul > li > a + ul > li a {display:block; padding:20px; border-bottom:1px solid #ddd; font-size:18px; font-weight:500; background:#fff;} .msub > ul > li > a + ul > li a.active {color:#006fb6;} .msub ul.path-depth03{background:#006fb6; padding:20px} .msub ul.path-depth03 li a{color:#fff; border-bottom:none; padding:10px 0 10px 10px; font-weight: 300; position: relative; background: #006fb6;} .msub ul.path-depth03 li a:before {content: ''; position: absolute; width: 5px; height: 2px; left: 0; top: 17px; background: #fff;} .msub ul.path-depth03 li a.active{color:#9fdaff;} #depth2 li > ul:not(.active) {display: none;} #depth2 > li:not(.active) span.coll, #depth2 > li.active span.coll{width: 12px; height: 9px; position: relative; margin-top: 5px;} #depth2 > li.active span.coll:after {content: ''; background:url(/_res/hf/ko/img/triangle_up.png) no-repeat 0 0; width:12px; height:9px; position: absolute;} #depth2 > li:not(.active) span.coll:after {content: ''; background:url(/_res/hf/ko/img/triangle_down.png) no-repeat 0 0; width:12px; height:9px; position: absolute;} } .gloval_top{position:relative; display: flex; align-items: center; } .gloval_top .pgsize{position:relative; overflow:hidden; box-sizing:border-box; margin-right:40px;} .gloval_top .pgsize li{float:left; position: relative;} .gloval_top .pgsize li button{width:33px; height:33px; display:block; border-radius:50%; text-align:center; text-indent: -99999999px;} .gloval_top .pgsize li.redu button{background:#3f5574 url(/_res/hf/ko/img/pgsize_01.png) no-repeat 0 0;} .gloval_top .pgsize li.pageSize{line-height:33px; padding:0px 25px; font-size:18px; letter-spacing:-0.03em; color:#cdd3d9; font-weight: 600;} .gloval_top .pgsize li.expa button{background:#3f5574 url(/_res/hf/ko/img/pgsize_02.png) no-repeat 0 0;} .gloval_top .guide_book{background:#E87010;position:relative; } .gloval_top .guide_book a{position:relative; color:#fff; font-size:16px; padding:0 20px; height:78px; min-width: 145px; display: flex; align-items: center;} .gloval_top .guide_book a:after{content:''; margin-left:20px; display:block; min-width:16px; height:9px; background:url('/_res/hf/ko/img/guide_book_arr.png'); background-repeat:no-repeat;} .gloval_top .guide_book_list{position: absolute; width: 100%; top:calc(100% + 1px); border-width: 0 1px 1px 1px; border-style: solid; border-color: #ccc; background: #fff; padding: 0px; transition: all .4s; z-index: 10; box-shadow: 5px 5px 5px rgb(0 0 0 / 10%); visibility: hidden; opacity: 0; transition: opacity 300ms ease-in-out;} .gloval_top .guide_book_list a{font-size: 15px; color: #555; text-decoration: none; position: relative; padding: 15px 15px; display: block; height:auto;} .gloval_top .guide_book_list a:after{display:none;} .gloval_top .guide_book_list a:hover, .gloval_top .guide_book_list a:focus{color:#fff; background:#0b5ea9; } .gloval_top .guide_book.active .guide_book_list{visibility: visible; opacity: 1; } #lnb{display:none;} @media all and (max-width: 1024px) { .sub-nav_list, .gloval_top{display:none;} .sub-nav_list.msub{display:block; width: 100%;} .sub-nav_list > ul > li:not(.home) > a{min-width:100%;} .sub-nav_list.msub > ul{display:block; width:100%;} .sub-nav_list .depth{overflow-y: auto; height: auto;} .sub-nav_list .depth ul{display:none;} .sub-nav_list .depth li a.active ul{display:block;} } /***콘텐츠***/ #container{position: relative; background: #f5f5f7; margin-top:199px;} #container::before{content:''; display:block; background:url(/_res/hf/ko/img/con_bg.jpg); position:absolute;top:50px; right:0; width:641px; height:294px;} #subcontent{position: relative; padding:90px 0 150px 0; } #subcontent.promotion_layout_wrap{position: relative; padding:40px 0 50px 0; } #content{background:#fff; padding:85px 50px 50px 50px; border-radius:10px; font-size:20px;} #content.promotion_layout{background:#fff; padding:85px 0px 0px 0px; } #content .con_tit{text-align: center; margin-bottom: 55px; position: relative; } #content .con_tit h2{font-size:44px; font-weight: 600;line-height: 44px; position: relative;} #content .con_tit h2::after{content:''; display:block; height:2px; width:40px; background:#000; position: absolute; left:50%; bottom:-17px; transform: translateX(-50%); } #board_con{font-size:20px; color:#666; line-height:34px; margin-bottom:30px;} #cms-content{min-height:500px; font-size:20px; color:#666; line-height:34px; word-break: keep-all; letter-spacing: -0.8px; margin-bottom:120px;} #content.promotion_layout #cms-content{margin-bottom:50px;} #content.promotion_layout .sub_acc{ right: 25PX;} #content .h2{font-size:30px; color:#000; font-weight: 500; margin:80px 0 30px 0px; letter-spacing:-0.1em;} #content .h2.small{margin:40px 0 30px 0px;} #content .h3, #content .h4, #content .h5, #content .h4_type2 {position: relative; text-align: left; margin-bottom:5px;} #content .h3 {font-size:30px; padding-left:50px; margin:80px 0 30px 0px; color: #333; font-weight: 600; letter-spacing:-0.1em;} #content .h4 {font-size:24px; padding-left:25px; margin:50px 0 10px 0px; color: #333; font-weight: 500; letter-spacing:-0.1em;} #content .h4 span{font-size:20px; padding-left:15px; margin-left:15px; position: relative; /*display:inline-block;*/ color: #335faa; font-weight: 400; letter-spacing: -0.06em; } #content .h4 strong{font-weight: 500; float:left;} #content .h4 span:before{content: ''; display: block; width: 1px; height: 15px; background: #d0d0d0; position: absolute; left: 2px; top: 9px;} #content .h4_type2 {font-size:20px; padding-left:25px; margin:0px 0 15px 0px; color: #666; font-weight: 200; letter-spacing:-0.1em;} #cms-content .h4 > img {margin-top:-1px;} #cms-content > .h3:first-child{margin-top:0;} #cms-content > .h2:first-child{margin-top:0;} #cms-content .h3 + .h4{margin-top:0px;} #cms-content .h3 + p{margin-top:-20px;} #cms-content .h3 + .h4_type2{margin-top:-20px;} #content .h3:before {content: ''; position: absolute; left: 0; top:7px; width:39px; height:23px; background:url('/_res/hf/ko/img/bul_h3.png') no-repeat 0 0;} #content .h4: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;} #content .h4_type2: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;} #cms-content .h4 + .sub-con{margin-left:25px;} #cms-content .h4 + ul[class^="list_ul"], #cms-content .h4 + .process{margin-left:25px;} #cms-content .point_box + .h3{margin-top:50px;} #cms-content .point_box + .h2{margin-top:50px;} #cms-content .h4 + ol[class^="list_onum"] {margin-left:25px;} /*연금소개 콘텐츠 부분 글짜 130%키오기*/ #content.annuity_layout #cms-content{font-size:26px; line-height:40px;} #content.annuity_layout .u-tab01 a{display:block; text-align:center; font-size:23px; letter-spacing:-0.07em; background:#f7f7f7; color:#111;line-height:60px; height:60px;} #content.annuity_layout .u-tab01 li.active a {background: #003875; color: #fff; } #content.annuity_layout .top_graybox_type2 .box_inner .title{font-size:29px; margin-bottom:10px;} #content.annuity_layout .h2{font-size:36px;} #content.annuity_layout .h3{font-size:44px;} #content.annuity_layout .h3:before { top: 10px;} #content.annuity_layout .h4{font-size:31px} #content.annuity_layout .h4:before { top: 13px;} #content.annuity_layout .criteria{font-size:20px;} #content.annuity_layout .big{font-size:26px !important} #content.annuity_layout .font16{font-size:20px;} #content.annuity_layout .font18{font-size:22px;} #content.annuity_layout .product_explanation .btn_viewer, #content.annuity_layout .product_explanation .btn_down{font-size:20px; } #content.annuity_layout .product_explanation .btn_down{margin-left:5px;} #content.annuity_layout .point{background: url(/_res/hf/ko/img/exclamation.png) no-repeat 0 11px; line-height: 33px;} #content.annuity_layout ul[class^="list_ul"] >li, #content.annuity_layout ol[class^="list_num"] li ul li, #content.annuity_layout ol[class^="list_num02"] li ul li{line-height:40px;} #content.annuity_layout #cms-content .h3 + ul[class^="list_ul02"]{margin-top:-10px;} #content.annuity_layout .tbl{font-size:20px;} #content.annuity_layout .tbl td{line-height:34px;} #content.annuity_layout .tbl ul[class^="list_ul"] >li{line-height: 25px;} #content.annuity_layout ul[class^="list_ul02"] >li:before{top: 12px;} #content.annuity_layout ul[class^="list_ul02"] li >ul >li,#content.annuity_layout ul[class^="list_ul03"] li >ul >li{font:inherit;} /*프린터 sns 링크*/ .sub_acc {position:absolute; top:-43px; right:-25px; z-index:9;} .sub_acc a[class^=btn_] {position: relative; display:inline-block; width:40px;height:40px; background:#fff url('/_res/hf/ko/img/spr_spot.png') center center no-repeat;margin:0 2px;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;} .sub_acc .share{position: relative; display:inline-block;} .sub_acc .btn_print {background-position: -42px -47px!important;} .sub_acc .btn_share {background-position: -94px -47px!important;} .sub_acc .btn_link {background-position: -144px -47px!important;} .sub_acc .btn_print:hover {background-position: -42px -100px!important;} .sub_acc .btn_share:hover {background-position: -94px -100px!important;} .sub_acc .btn_link:hover {background-position: -144px -100px!important;} .sub_acc {position:absolute; top:-43px; right:-25px; z-index:9;} .sub_acc .brl_down{position: relative; display:inline-block;} .brl_down a[class^=btn_] {position: relative; display:inline-block; width:40px;height:40px; background:#fff url('/_res/hf/ko/img/brl_btn.png') center center no-repeat;margin:0 2px;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;} .sub_acc .brl_view{position: relative; display:inline-block;} .brl_view a[class^=btn_] {position: relative; display:inline-block; width:40px;height:40px; background:#fff url('/_res/hf/ko/img/brl_btn.png') center center no-repeat;margin:0 2px;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;} .sub_acc .btn_brl_down {background-position: -42px -47px!important;} .sub_acc .btn_brl_view {background-position: -94px -47px!important;} .sub_acc .btn_brl_down:hover {background-position: -42px -100px!important;} .sub_acc .btn_brl_view:hover {background-position: -94px -100px!important;} .share_list {width:170px; height:230px; overflow: hidden;opacity: 1;position: absolute;top:40px;right:-30px;z-index: 10;display: none;} .share_list > div {background: #fff; border:1px solid #000; padding:40px 20px 20px 20px;position: absolute;right: -170px;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s; box-sizing:border-box;} .share_list li{text-align: left; margin-top: 2px;} .share_list li > a {width:auto !important; background: url('/_res/hf/ko/img/spr_spot.png') 0 0 no-repeat; font-size:15px; color:#333333; padding-left:40px; line-height: 34px;display: block;} .share_list li > a.facebook{background-position: -50px -215px;} .share_list li > a.twitter{background-position: -50px -253px;} .share_list li > a.blog{background-position: -50px -327px;} .share_list li > a.kakaostory{background-position: -50px -290px;} .share_list button.close {position: absolute;top:15px;right: 5px;background:url('/_res/hf/ko/img/spr_spot.png') -202px -57px no-repeat; height:30px; width:30px} /* tab type */ .u-tab01{margin-bottom:50px; position:relative;} .u-tab01 ul{overflow:hidden;} .u-tab01 li{ vertical-align:top;position:relative; z-index:1; float: left; margin:0 2px 5px 2px;} .u-tab01 li:last-child{margin-right:0;} .u-tab01 li.active{z-index:6} .u-tab01 li.active a{background:#003875; color:#fff; padding:0;} .u-tab01 li a:focus{outline: none;} .u-tab01 li a:focus{box-shadow:0 0 0 2px #e87609 inset;} .u-tab01 a{display:block; text-align:center; font-size:18px; letter-spacing:-0.07em; background:#f7f7f7; color:#111;line-height:50px; height:50px;} .u-tab01 ul.con03.row02 li{width:calc(50% - 4px);} .u-tab01 ul.con03.row03 li{width:calc(33.3% - 4px);} .u-tab01 ul.con03.row04 li{width:calc(25% - 4px);} .u-tab01 ul.con03.row05 li, .u-tab01 ul.con03.row07 li, .u-tab01 ul.con03.row09 li{width:calc(20% - 4px);} .u-tab01 ul.con03.row06 li{width:calc(16.66% - 4px);} .u-tab01 ul.con03 li.tab_point span{position: relative;} .u-tab01 ul.con03 li.tab_point span:after{content:''; display:inline-block; background:url(/_res/hf/ko/img/tab_point_off.png) no-repeat; width:24px; height:34px; vertical-align: middle; margin-left: 10px;} .u-tab01 ul.con03 li.tab_point a.active span:after{content:''; display:inline-block; background:url(/_res/hf/ko/img/tab_point_on.png) no-repeat; width:24px; height:34px; vertical-align: middle; margin-left: 10px;} @media all and (max-width:780px){ .u-tab01{margin-bottom:25px;} } @media all and (max-width:680px){ .u-tab01{margin-bottom:20px;} .u-tab01 ul li:nth-child(1), .u-tab01 ul li:nth-child(2){margin-top:0} .u-tab01 ul li:nth-child(even) a{border-left:none !important} .u-tab01 li{width:calc(50% - 4px) !important; margin-bottom:5px;} .u-tab01 li.active a{} .u-tab01 a{font-size:16px; letter-spacing:-1px;} .u-tab01 a span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: inline-block;} } .u-tab02{margin-bottom:50px; padding-top:1px; position:relative; } .u-tab02 ul{padding-top:1px;overflow:hidden; font-size:0 } /*.u-tab02 ul:after{position:Absolute; left:0; top:0; width:1px ;background:#b9bfc7; height:100%; display:block; content:""; z-index:2}*/ .u-tab02 li{border:2px solid #ddd; display:inline-block; vertical-align:middle;position:relative; z-index:1} .u-tab02 li:first-child, .u-tab02 li.active:first-child a{border-radius: 10px 0 0 10px;} .u-tab02 li:last-child, .u-tab02 li.active:last-child a{border-radius: 0 10px 10px 0;} .u-tab02 li.active{z-index:6; border:1px solid #31395a; } .u-tab02 li.active a{ color:#fff; background:#31395a;} .u-tab02 li a:focus{outline: none;} .u-tab02 li a:focus{box-shadow:0 0 0 2px #e87609 inset;} .u-tab02 a{ display:block; text-align:center; font-size:26px; position:relative; letter-spacing:-0.07em; color:#919191; font-weight: 600; padding:20px 0;} .u-tab02 li.active span{background:#f4682b;} .u-tab02 li span{position: relative; margin-right:10px; width:29px; height:29px; color:#fff; background:#919191; border-radius:50%; font-size:18px; display: inline-block; font-weight: bold; font-family: Arial; vertical-align: middle;} .u-tab02 li:nth-child(1) span:before {content: '1';} .u-tab02 li:nth-child(2) span:before {content: '2';} .u-tab02 li:nth-child(3) span:before {content: '3';} .u-tab02 li:nth-child(4) span:before {content: '4';} .u-tab02 li:nth-child(5) span:before {content: '5';} .u-tab02 li:nth-child(6) span:before {content: '6';} .u-tab02 li:nth-child(7) span:before {content: '7';} .u-tab02 li:nth-child(8) span:before {content: '8';} .u-tab02 li:nth-child(9) span:before {content: '9';} .u-tab02 li:nth-child(10) span:before {content: '10';} .u-tab02 li span:before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .u-tab02 ul.con02 li{width:50%;} .u-tab02 ul.con04 li{width:25%;} .u-tab02 ul.con03 li{width:33.33333%;} @media all and (max-width:768px){ .u-tab02{margin-bottom:25px;} .u-tab02 li a{font-size:18px; padding: 8px 0; font-weight: 500;} .u-tab02 li span{font-size:16px; width:23px; height:23px;} .u-tab02 li:first-child, .u-tab02 li.active:first-child a{border-radius: 5px 0 0 5px;} .u-tab02 li:last-child, .u-tab02 li.active:last-child a{border-radius: 0 5px 5px 0;} } .u-tab04{margin-bottom:30px; padding-top:1px; position:relative;} .u-tab04 ul{padding-top:1px;overflow:hidden; display: flex; flex-wrap: wrap;} .u-tab04 ul:after{position:Absolute; left:0; top:0; width:1px;background:#b9bfc7; height:100%; display:block; content:""; z-index:2} .u-tab04 li{border-bottom:1px solid #b9bfc7; border-right:1px solid #b9bfc7; margin-left:-1px; margin-top:-1px; display:inline-block; vertical-align:top;position:relative; z-index:1} .u-tab04 a{ display:block; padding:15px 35px; box-sizing:border-box; text-align:left; font-size:20px; position:relative; letter-spacing:-0.07em; color:#444;} .u-tab04 a:before{position:Absolute; left:0; top:0; width:1px ;background:#b9bfc7; height:1px; display:block; content:""} .u-tab04 a:after{position:Absolute; left:0; top:0; width:100% ;background:#b9bfc7; height:1px; display:block; content:""} .u-tab04 ul.con03 li{width:33.33333%;} @media all and (max-width:780px){ .u-tab03{margin-bottom:25px;} .u-tab03 a{font-size:15px;} .u-tab04 ul.con03 li{width:50%;} .u-tab04 a{font-size:18px; padding: 15px 15px; line-height: 24px;} /*전략체계 및 노력용 탭*/ .u-tab05{margin-bottom:25px;} .u-tab05 a{font-size:15px;} } /**로케이션 **/ #location ul{margin-top:8px; float:right; overflow:hidden; font-family:'NotoKrL'; margin-bottom:20px;} #location li{position:relative; float:left; padding: 0px 5px 0px 18px;} #location li a { font-size:14px; color:#666; } #location li::before{position:absolute; top:50%; left:0px; margin-top:-5px; content:""; width:10px; height:10px; display:block; background:url(/_res/hf/ko/img/loca_bg.png) no-repeat 50% 50%;} #location li:last-child{} #location li:last-child a {font-weight:600;} #location li.home{padding-left:0px; background:url(/_res/hf/ko/img/home.png) no-repeat 0 2px; text-indent:-9999px; width:25px; height:17px; display:inline-block;} #location li.home a {font-weight:300; display:block;} #location li.home::before {display:none;} /*** 담당자 및 페이지 평가 **/ #depart-satisfy{font-size:17px;} .satisfaction_rank{border:1px solid #ddd; border-bottom:0; padding:35px 40px; font-weight: 200;} .satisfaction_rank p{color:#666; margin-bottom:5px; } .satisfaction_rank div{ display: flex; align-items: center; justify-content: space-between;} .satisfaction_rank div label{margin-right:20px;} .satisfaction_rank div.input_radio .check_box{position:relative;display:inline-block;margin-right:10px;height:29px;overflow:hidden;vertical-align:middle; font-weight: 200;} .satisfaction_rank div.input_radio .check_box input{position:absolute;top:1px;left:1px;z-index:0;width:20px;height:19px;background-color:#fff;border: none;} .satisfaction_rank div.input_radio .check_box input + label{display:block;height:26px;position:relative;} .satisfaction_rank div.input_radio .check_box input + label span{position:relative;display:inline-block;margin-right:5px;width:26px;height:26px;vertical-align:middle;border:1px solid #e7e7e7;border-radius:50%;background:#fff;} .satisfaction_rank div.input_radio .check_box input:checked + label {color:#000;} .satisfaction_rank div.input_radio .check_box input:checked + label span{border:8px solid #0055a2; color:#0055a2;} .satisfaction_rank div.input_radio .check_box input:checked + label span::before{content:''; display:block; position:absolute; left:3px; top:6px; width:14px; height:10px;} .satisfaction_rank div.input_radio .check_box input:focus,.satisfaction_rank div.input_radio .check_box input:checked{background:#0055a2;} /*.satisfaction_rank div.input_radio .check_box input:focus + label::after{content:"";display:inline-block;width:10px;height:10px;position:absolute;background:#ddd;}*/ .satisfaction_rank .opinion {display: flex; justify-content: space-between; width:50%;} .satisfaction_rank .opinion input[type="text"] { width:80%; border: none; height:54px; margin:0; padding:5px 10px; background:#f7f7f7; font-weight: 200; box-sizing: border-box;} .satisfaction_rank .opinion input[type="button"] {width: 19.5%; background-color: #0154a4; color: #fff; height:54px; padding:0; margin: 0;} .content-info_charge{border:1px solid #ddd; background:#fafafa; padding:25px 40px; font-size:17px; color:#666; letter-spacing: -0.5px;} .content-info_charge ul{margin-left:-20px;} .content-info_charge ul li{display:inline-block; margin:0 20px} .content-info_charge ul li strong{font-weight: 600; color:#000;} /****푸터 *****/ footer{padding:50px 0; background:#fff; position: relative; } footer > #footer{display:flex; max-width:1360px; margin:0 auto;} footer > #footer > div.foot_info {-webkit-flex: 2.9;-ms-flex: 2.9;flex: 2.9; font-family: 'NotoKrR';} footer > #footer > div.foot_info address {margin-bottom:10px; line-height:26px; color:#777777;} footer > #footer > div.foot_info address span {display:inline-block;} footer > #footer > div.foot_info p.copy {font-size:15px; color:#777; line-height:24px;} footer > #footer > div.foot_info .sns{margin-top:25px; line-height:36px;} footer > #footer > div.foot_info .sns .sns_img{display:inline-block;} footer > #footer > div.foot_info .sns .sns_img a{width:36px; height:36px; margin:0 2px 0 0; background-image:url(/_res/hf/ko/img/sns.png); display: inline-block; text-indent:-99999px;} footer > #footer > div.foot_info .sns .sns_img .icon-youtube{background-position: 0px 0px;} footer > #footer > div.foot_info .sns .sns_img .icon-instagram{background-position: -45px 0px;} footer > #footer > div.foot_info .sns .sns_img .icon-blog{background-position: -90px 0px;} footer > #footer > div.foot_info .sns .sns_img .icon-facebook{background-position: -135px 0px;} footer > #footer > div.foot_info .sns .sns_txt{display:inline-block; padding-left:17px; font-size:15px; color:#444; letter-spacing: -1px;} footer > #footer > div.foot_legal {-webkit-flex: 1;-ms-flex: 1;flex: 1} footer > #footer > div.foot_legal a {display:block; margin-bottom:14px;} footer > #footer > div.foot_legal a.per {color:#1568b6;} footer > #footer > div.foot_legal1 {-webkit-flex: 1.1;-ms-flex: 1.1;flex: 1.1} footer > #footer > div.foot_legal1 a {display:block; margin-bottom:14px;} footer > #footer > div.foot_site {-webkit-flex:1.7;-ms-flex:1.7;flex:1.7; } footer > #footer > div.foot_site > div {position:relative;} footer > #footer > div.foot_site > div select{border:1px solid #d2d2d2; padding:0 24px; line-height:54px; transition:all .2s; width:258px; box-sizing:border-box; height:54px;} footer > #footer > div.foot_site > div input{border:1px solid #292929; height:54px; box-sizing:border-box; width:73px; margin-left:-5px; background:#fff;} .mobile_copy {display:none;} footer > #footer > div.foot_site .mark {display: inline-block; width: 60px; height: 60px; margin-right: 10px;} footer > #footer > div.foot_site .mark .footer-mark {display: block; width: 100%; height: 100%; background:url(/_res/hf/ko/img/wa_mark.png) no-repeat center/contain; opacity: 0.8;} .header .mb-searchbtn, .header .toggle, .header .mobile-top{display:none;} @media (max-width:1650px){ .header .gnb-wrap .gnb .top_menulist > li:first-child{margin-left:25%;} .header .gnb-wrap .gnb .top_menulist > li > a{padding:50px 10px;} } @media (max-width: 1500px){ .header h1{left:20px;} .header .lnb{right:20px;} footer > #footer > div.foot_info{flex: 2.5;} footer > #footer > div.foot_legal1{flex:1;} } @media (max-width: 1360px){ #subcontent{padding: 40px 20px 150px 20px;} .header .lnb .all_search{margin-left:15px;} .header .gnb-wrap .gnb .top_menulist > li > a{padding:50px 5px;} /*.header .gnb-wrap .gnb .top_menulist > li:first-child{margin-left:22%;}*/ .satisfaction_rank div.input_radio .check_box input + label{font-size:16px;} .satisfaction_rank div label{margin-right:0px;} .gloval_top .pgsize{display:none;} } @media (max-width: 1325px){ .header .gnb-wrap .gnb .top_menulist > li > a{font-size:20px;} } @media (max-width: 1200px){ .header h1 a{width:200px; height:29px; background-size:100%;} .header .gnb-wrap .gnb .top_menulist > li:first-child{margin-left:250px;} .header .gnb-wrap .gnb .top_menulist > li > a { padding: 50px 4px;} footer > #footer{display:block; padding: 0 20px;} footer > #footer > div.foot_legal a, footer > #footer > div.foot_legal1 a{display:inline-block; margin-right:20px;} footer > #footer > div.foot_site{ position: absolute; top: 20px; right: 20px;} } @media (max-width: 1150px){ .header{min-height:125px;} .header h1{top:73px;} .sub-nav{top:125px;} .header .lnb{display:none;} .header .mb-searchbtn{display: block; width: 40px; height: 40px; background: url(/_res/hf/ko/img/spr_spot.png); background-position: -411px -156px; position: absolute; right: 70px;top: 73px; z-index: 1;} .header .toggle{display:block; width: 40px; height: 40px; background: url(/_res/hf/ko/img/spr_spot.png); background-position: -416px -45px; text-indent: -9999999px; position: absolute; right: 20px; top: 73px; z-index: 1;} .header .mobile-top{ background:#005eb8; min-height:82px; box-sizing:border-box; display:block; position: relative; padding:25px; display:flex; align-items:center;} .header .mobile-top a{position: relative; color:#fff; font-size:18px; line-height:23px; font-weight: 500; display:inline-block; margin-right:20px; padding-left:30px;} .header .mobile-top a.mlnb_link{background: url(/_res/hf/ko/img/mlnb_link.png) no-repeat 0 0;} .header .mobile-top a.mlnb_eng{ background: url(/_res/hf/ko/img/mlnb_eng.png) no-repeat 0 0; } .header .mobile-top .mb-closebtn{width:40px; height:40px; background: url(/_res/hf/ko/img/spr_spot.png) no-repeat -159px -400px; position: absolute; right:20px; top:25px;} .header .gnb-wrap{padding: 0px;} .top-wrap{padding:0px;} .header .gnb-wrap{border:none;height:auto;box-shadow:none; z-index:100;} .header .mobile-gnb{display:none; position:fixed; top:0px; right:-200%; height:100%; background:#fff; z-index:999;overflow-y:auto;transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;-moz-transition:all .3s ease;-webkit-transition:all .3s ease;z-index:99999} .header .mobile-gnb:before { content: ''; height: 100%; width: 150px; background: #e7ebee; display: block; position: absolute; top: 0; left: 0; z-index: 0;} .header .mobile-gnb.on{right:0; width:100%; display:block;} .header .mobile-gnb .top_menulist{z-index:50;} .header .mobile-gnb .top_menulist li{position:relative;} .header .mobile-gnb .top_menulist li a{display:block; text-align: center; } .header .mobile-gnb .top_menulist li a.depth1-1{font-size:21px; background:#e7ebee; color:#828282; border-bottom:1px solid #ddd; width: 150px; position: absolute; height:100px; line-height:100px; left:0;} .header .mobile-gnb .top_menulist li a.depth1-1.on{background-color:#fff; color:#000; font-weight: 600;} .header .mobile-gnb .top_menulist li a.depth1-1.on:after{background:#f2f2f2 url(/images/common/top_lang_up.png) 50% 50% no-repeat;} .header .mobile-gnb .top_menulist #mb_mn_01 .depth1-1{top:0; } .header .mobile-gnb .top_menulist #mb_mn_02 .depth1-1{top:100px} .header .mobile-gnb .top_menulist #mb_mn_03 .depth1-1{top:200px} .header .mobile-gnb .top_menulist #mb_mn_04 .depth1-1{top:300px} .header .mobile-gnb .top_menulist #mb_mn_05 .depth1-1{top:400px} .header .mobile-gnb .top_menulist #mb_mn_06 .depth1-1{top:500px} .header .mobile-gnb .top_menulist #mb_mn_07 .depth1-1{top:600px} .header .mobile-gnb .top_menulist li .nav{display:none; background:#fff; width: calc(100% - 150px); position: absolute; left: 150px; top: 0; padding:23px; box-sizing:border-box; overflow-y:auto; height:calc(100vh - 87px);} .header .mobile-gnb .top_menulist li .nav .depth a{position:relative; display:block; padding:15px 20px 15px 0; border-bottom:1px solid #f0f0f0; color:#555; font-size:18px; text-align: left; font-weight: 600; line-height:1.2em;} .header .mobile-gnb .top_menulist li .nav .depth a.has:before{position:absolute; right:5px; top:50%; width:10px; height:10px; margin-top:-5px; background:url(/_res/hf/ko/img/top_down.png) 50% 50% no-repeat; content:"";} .header .mobile-gnb .top_menulist li .nav .depth a.has.on:before{background:url(/_res/hf/ko/img/top_up.png) 50% 50% no-repeat;} .header .mobile-gnb .top_menulist li .nav .depth a.has.on{color:#006fb6; border-bottom:none;} .header .mobile-gnb .top_menulist li .nav .depth .depth_03{display:none; background:#fff; padding:0px 0px 15px 0px; border-bottom:1px solid #f0f0f0;} .header .mobile-gnb .top_menulist li .nav .depth .depth_03 li a{border:none; font-weight: 400; padding: 5px 0px;display:block;color:#777777; position:relative; text-align: left; font-size:16px;} .header .mobile-gnb .top_menulist li .nav .depth .depth_03 li a:before{display:none;} .header .mobile-gnb .top_menulist li a[target="_blank"] span {padding-right:15px; background:url(/_res/hf/ko/img/new_icon.png) right 50% no-repeat;} .header .mobile-gnb .top_menulist li .nav .nav-con .title {display:none;} #container{margin-top:153px;} #location, .gloval_top, #container::before, .sub_acc{display:none;} /*#subcontent {padding: 30px 20px 60px 20px; background: #fff;}*/ #subcontent {padding: 30px 10px 60px 10px; background: #fff;} #content{padding:50px 0px 0px 0px; } #cms-content{margin-bottom:40px;} #content .con_tit{margin-bottom: 26px;} #content .con_tit h2{font-size:30px; } #content .con_tit h2::after{bottom:-6px; background:#898989; width: 20px;} footer{padding: 0 0 50px 0;} footer > #footer{padding: 30px 20px; border-top:1px solid #ddd;} footer > #footer > div.foot_legal a, footer > #footer > div.foot_legal1 a{display:inline-block; margin-right:20px;} footer > #footer > div.foot_info p.copy{display:none;} footer > #footer > div.foot_site{ position: relative; top: 20px; right: auto;} footer > #footer > div.foot_site > div select{width:calc(100% - 74px);} footer > #footer > div.foot_legal, footer > #footer > div.foot_legal1{margin-bottom:25px;} footer > #footer > div.foot_legal a, footer > #footer > div.foot_legal1 a{margin-bottom:10px;} .mobile_copy {display:block; margin-top:3.0rem; color:#666; font-size:1.4rem;} .gnb-area .left{display:none;} .mobile-menu-family{display:block;} } @media (max-width: 1024px){ #container{margin-top:133px;} } @media (max-width: 1000px){ .satisfaction_rank div{display:block;} .satisfaction_rank div label{margin-right:10px;} .input_radio{margin:10px 0;} .satisfaction_rank{padding:20px;} .satisfaction_rank .opinion{width: 100%;} .satisfaction_rank div.input_radio .check_box{margin-bottom:10px;} .content-info_charge ul li{margin: 5px 20px;} } @media (max-width: 768px){ .satisfaction_rank .opinion{display:block;} .satisfaction_rank .opinion input[type="text"], .satisfaction_rank .opinion input[type="button"]{width:100%;} footer > #footer > div.foot_info .sns .sns_txt{display:block; padding-left:0;} } ul[class^="list_ul"] li, ol[class^="list_num"] li, ol[class^="list_num02"] li {/*line-height:24px;*/ position: relative; } ul[class^="list_ul"] >li, ol[class^="list_num"] li ul li, ol[class^="list_num02"] li ul li {padding-left:15px; margin-top:10px; line-height:34px;} ul[class^="list_ul"] >li:before, ol[class^="list_num"] li ul li:before {content: ''; position: absolute; width:5px; height:1px; left: 0; top:15px; background:#666666;} ul[class^="list_ul"] >li:first-child{margin-top:0;} ul[class^="list_ul"] >li >ul {margin-top:10px; margin-bottom:15px;} ul[class^="list_ul"] li > ul >li{padding-left:10px; margin-top:6px; font-size:18px;} ul[class^="list_ul"] >li >ul >li:before {content: ''; position: absolute; width:3px; height:3px; left: 0; top:14px; background:#666; } ul[class^="list_ul"] ul ul {margin-top: 8px !important; /*background: rgba(255,255,255,1); border: 1px dashed #b3d1df; border-radius: 10px; padding: 15px; box-sizing: border-box;*/} ul[class^="list_ul"] >li >ul >li >ul >li {padding-left:8px; margin-top:9px; font-size:15px;} ul[class^="list_ul"] >li >ul >li >ul >li:before, td >ul >li >ul >li:before {content: ''; position: absolute; width: 3px; height: 3px; left: 0; top: 9px; background:#bbb;} ul[class^="list_ul"] >li >ul >li >ul >li:first-child {margin-top:0;} ul[class^="list_ul"] li p, ol[class^="list_num"] li p {margin-top:10px;} ul[class^="list_ul"] ul ul.liNon {margin-top: 8px !important; background:none; border:none; border-radius:0; padding:0px; box-sizing: border-box;} ul[class^="list_ul"] >li >ul >li >ul.liNon >li {padding-left:0;} ul[class^="list_ul"] >li >ul >li >ul.liNon >li:before, td >ul >li >ul.liNon >li:before {display:none;} ul[class^="list_ul03"] >li{padding-left:15px; position: relative;} ul[class^="list_ul03"] >li:before{content: ''; position: absolute; border-radius:50%; width:5px; height:5px; left: 0; top:15px; background:#666;} ul[class^="list_ul03"] li >ul >li{padding-left:15px; font-size:20px; margin-top: 6px;} ul[class^="list_ul03"] >li >ul >li:before {content: ''; position: absolute; width:6px; height:2px; left: 0; top:15px; background:#666; } ol[class^="list_onum"] li, ol[class^="list_onum02"] li{ padding-left: 25px; margin-top: 10px; position: relative; line-height:34px;} ol[class^="list_onum"] >li:before, ol[class^="list_onum02"] >li:before {content: ''; position: absolute; left: 0; top:6px; width: 15px; height: 20px; line-height:18px; text-align: center; color: #666; font-size:20px; box-sizing: border-box;} ol[class^="list_onum03"] >li:before{width: 30px;} ol[class^="list_onum"] li:before{width:18px;} ol[class^="list_onum"] >li:nth-child(1):before {content: '1)';} ol[class^="list_onum"] >li:nth-child(2):before {content: '2)';} ol[class^="list_onum"] >li:nth-child(3):before {content: '3)';} ol[class^="list_onum"] >li:nth-child(4):before {content: '4)';} ol[class^="list_onum"] >li:nth-child(5):before {content: '5)';} ol[class^="list_onum"] >li:nth-child(6):before {content: '6)';} ol[class^="list_onum"] >li:nth-child(7):before {content: '7)';} ol[class^="list_onum"] >li:nth-child(8):before {content: '8)';} ol[class^="list_onum"] >li:nth-child(9):before {content: '9)';} ol[class^="list_onum"] >li:nth-child(10):before {content: '10)';} ol[class^="list_onum02"] >li:nth-child(1):before {content: '①';} ol[class^="list_onum02"] >li:nth-child(2):before {content: '②';} ol[class^="list_onum02"] >li:nth-child(3):before {content: '③';} ol[class^="list_onum02"] >li:nth-child(4):before {content: '④';} ol[class^="list_onum02"] >li:nth-child(5):before {content: '⑤';} ol[class^="list_onum02"] >li:nth-child(6):before {content: '⑥';} ol[class^="list_onum02"] >li:nth-child(7):before {content: '⑦';} ol[class^="list_onum02"] >li:nth-child(8):before {content: '⑧';} ol[class^="list_onum02"] >li:nth-child(9):before {content: '⑨';} ol[class^="list_onum02"] >li:nth-child(10):before {content: '⑩';} ol[class^="list_onum03"] >li:nth-child(1):before {content: '1.';} ol[class^="list_onum03"] >li:nth-child(2):before {content: '2.';} ol[class^="list_onum03"] >li:nth-child(3):before {content: '3.';} ol[class^="list_onum03"] >li:nth-child(4):before {content: '4.';} ol[class^="list_onum03"] >li:nth-child(5):before {content: '5.';} ol[class^="list_onum03"] >li:nth-child(6):before {content: '6.';} ol[class^="list_onum03"] >li:nth-child(7):before {content: '7.';} ol[class^="list_onum03"] >li:nth-child(8):before {content: '8.';} ol[class^="list_onum03"] >li:nth-child(9):before {content: '9.';} ol[class^="list_onum03"] >li:nth-child(10):before {content: '10.';} ol[class^="list_onum03"] >li:nth-child(11):before {content: '11.';} ol[class^="list_onum03"] >li:nth-child(12):before {content: '12.';} ol[class^="list_onum03"] >li:nth-child(13):before {content: '13.';} ol[class^="list_onum03"] >li:nth-child(14):before {content: '14.';} ol[class^="list_onum04"] >li:nth-child(1):before {content: '가.';} ol[class^="list_onum04"] >li:nth-child(2):before {content: '나.';} ol[class^="list_onum04"] >li:nth-child(3):before {content: '다.';} ol[class^="list_onum04"] >li:nth-child(4):before {content: '라.';} ol[class^="list_onum04"] >li:nth-child(5):before {content: '마.';} ol[class^="list_onum04"] >li:nth-child(6):before {content: '바.';} ol[class^="list_onum04"] >li:nth-child(7):before {content: '사.';} ol[class^="list_onum04"] >li:nth-child(8):before {content: '아.';} ol[class^="list_onum04"] >li:nth-child(9):before {content: '자.';} ol[class^="list_onum"] >li >ul li {padding-left:15px; margin-top:10px;} ol[class^="list_onum"] >li >ul li:before {content:''; position:absolute; width:5px; height:2px; background:#bbb; left:0; top:12px; } ol[class^="list_onum"] >li >ul >li >ul li{padding-left:8px; margin-top:3px;} ol[class^="list_onum"] >li >ul >li >ul li:before {content:''; position: absolute; width:3px; height:3px; background:#bbb; left:0; top:15px; } .tbl_wrap { border-top:2px solid #080808; margin-top:10px;} .tbl {margin-bottom:10px; width:100%; table-layout: fixed; font-size:16px; font-family: 'NotoKrR'; text-align:center;} .tbl th {text-align:center; color: #000;} .tbl th {padding:18px 28px; border:1px solid #ddd; line-height:26px; vertical-align: middle; box-sizing: border-box; } .tbl td {padding:18px 28px ; border:1px solid #ddd; border-top:0; line-height:26px; vertical-align: middle; box-sizing: border-box; } .tbl tr td:first-child, .tbl tr:first-child th:first-child {border-left: none;} .tbl td:last-child, .tbl th:last-child {border-right: none;} .tbl thead tr:first-child th {background:#f5f5f5;} .tbl thead th {background:#f5f5f5; color:#000; font-weight: 600;} .tbl tbody th {background:#f5f5f5; color:#000; font-weight: 600; border-left:0; border-top:0px;} .tbl td {background: #fff;} .tbl td.b_bg {background: #f4f8fc;} .tbl ol[class^="list_onum03"] li { margin-top: 0px;} .tbl ol.list_onum >li:before, .tbl ol[class^="list_onum03"] >li:before{font-size:16px;} .tbl td .point{background: url(/_res/hf/ko/img/exclamation.png) no-repeat 0 7px;} .tbl ul[class^="list_ul"] >li{line-height: 25px; padding-left:10px;} /*.tbl ul[class^="list_ul"] >li:before{top:10px;} 20260625 수정*/ .tbl ul[class^="list_ul"] >li:before{top:15px;} .tbl .bg-type01{background:#fffbdd} .tbl .bg-type02{background:#e7effd} .tbl .btn_round, .tbl .btn_round_down{width:100%; text-align: left; margin-bottom:5px;} @media all and (max-width:1024px) { .circle-graph-box, .location-information{width: 100%; overflow: hidden; overflow-x: scroll; padding-bottom:20px;} .circle-graph-box .circle-graph-info, .location-information .jqplot-target{width: 984px; } .tbl_wrap { width: 100%; overflow: hidden; overflow-x: scroll;} .tbl_guide+.tbl_wrap {margin-top:15px!important;} .tbl_wrap .tbl.over{width: 984px;} .tbl th, .tbl td {padding:10px 10px;;} } .point{color:#333; background:url(/_res/hf/ko/img/exclamation.png) no-repeat 0 9px; padding: 5px 0 0px 25px; line-height: 25px;} .point_red{color:#333; background:url(/_res/hf/ko/img/exclamation_red.png) no-repeat 0 9px; padding: 5px 0 0px 25px; line-height: 25px;} .reverse_point{color:#333; background:url(/_res/hf/ko/img/exclamation.png) no-repeat 0 9px; padding: 5px 0 0px 25px; line-height: 37px;} .reverse_point_red{color:#333; background:url(/_res/hf/ko/img/exclamation_red.png) no-repeat 0 9px; padding: 5px 0 0px 25px; line-height: 37px;} .point_question{color:#333; background:url(/_res/hf/ko/img/icon_question.png) no-repeat 0 9px; padding: 10px 0 0px 25px; margin: 0px 5px; line-height: 25px;} .point_question_big{color:#333; background:url(/_res/hf/ko/img/icon_question_big.png) no-repeat 0 9px; padding: 5px 0 0px 35px; margin: 0px 10px; line-height: 25px;} /* 임의반응형 - 모바일에서 이미지크게보기 링크 */ .img_respon{position: relative;} .img_respon img{max-width:100%;} .link_imgview{display: none;} @media all and (max-width:768px){ .link_imgview{position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.7); color: #fff; font-weight: 600; padding: 5px 10px; display: block;} .link_imgview:visited{color: #fff;} .img_respon img {width:100%;} } @media all and (max-width:600px){ .tbl_wrap .tbl.over_small{width: 600px;} } /*상단통합검색 모달*/ .top-search{display:none; background: #005aab; position: fixed; left: 0; top: 0; height: 204px; z-index: 999999999999; width: 100%;} .top-search .input-btn{width:659px; margin:30px auto;} .top-search .input-btn select{width: calc(100% - 80px); color:#888888; font-size:22px; margin-bottom:10px; height:66px; background: #fff url(/_res/hf/ko/img/top_select_t.png)no-repeat 95% 50%;} .top-search .input-btn .input_wrap{position: relative; width: calc(100% - 80px); height:66px; background:#fff; display: inline-block; vertical-align: middle;} .top-search .input-btn .input_wrap input[type="text"]{width: calc(100% - 60px); border:0; padding: 0 10px; height: 66px; color:#888888; font-size:22px; } .top-search .input-btn .input_wrap img{position: absolute; top: 50%; right: 25px; margin-top: -15px;} .top-search .input-btn .button-scarch{width:70px; height:66px; background:#029c59 url(/_res/hf/ko/img/btn_search_w.png) no-repeat center center;} .top-search .mo-btn{position:absolute; top:46px; right:3%; width:40px; height:40px; display:block; background:url("/_res/hf/ko/img/btn_close_w.png") no-repeat center; cursor:pointer; z-index:1; content:"";} @media all and (max-width:768px){ .top-search{padding:0 20px; height:122px;} .top-search .mo-btn{left:15px; right:auto; width:30px; height:30px; background-size:24px; top:24px;} .top-search .input-btn{width:calc(100% - 90px); margin:15px 15px 15px 42px;} .top-search .input-btn select, .top-search .input-btn .input_wrap input[type="text"], .top-search .input-btn .button-scarch, .top-search .input-btn .input_wrap {height:40px; font-size:14px;} .top-search .input-btn .button-scarch{background-size:18px;} .top-search .input-btn select {margin-bottom:5px;} } /*layout_pop*/ .layout_popup{ position: fixed; width: 100%; height: 100%;background: rgba(0,0,0,0.5); z-index:9999999; top: 0px; left: 0px; visibility:hidden; opacity:0;} .layout_popup.open{visibility:visible; opacity:1;} .layout_popup .poup_wrap{width:1360px; left:50%; top:50%; position: absolute; transform: translate(-50%, -50%); } .layout_popup .poup_wrap ul.po{margin:0 -15px;} .layout_popup .poup_wrap ul.po li{float:left; margin:0 10px;} .layout_popup .poup_wrap ul.slick-dots {position: absolute; bottom: -15%; left: 50%; display: block; height: 50px; width: auto; box-sizing: border-box; text-align: center; transform: translateX(-50%);} .layout_popup .poup_wrap ul.slick-dots li {display:block; width:20px; height:20px; text-align:center; line-height:20px; margin:0px 10px; display:inline-block; padding:0;} .layout_popup .poup_wrap ul.slick-dots li button {border-radius:50%; background:#fff; display:block; width:11px; height:11px; text-indent:-999999px; margin-top:3px;} .layout_popup .poup_wrap ul.slick-dots li.slick-active button {margin-top:0px;border-radius:50%; border:4px solid #93ce14; text-indent:-999999px; background:none; height:16px; width:16px; vertical-align: middle;} /* 20230525 width에 따른 닫기버튼 위치 조절로 인해 수정 text-align값 가운데정렬 .layout_popup .pop_top{ position: relative; margin-bottom:10px; color:#fff; text-align: right;} */ .layout_popup .pop_top{ position: relative; margin-bottom:10px; color:#fff; text-align: center; margin-top:60px;} .layout_popup .pop_top input[type="checkbox"]{width:28px; height:28px;} .layout_popup .pop_top .btn-close{position: relative; background:none; width: 30px; height: 30px;} @media all and (max-width:1360px){ .layout_popup .poup_wrap{width:90%;} .layout_popup .poup_wrap ul.po li img{width:100%;} } /* 모바일 팝업 2개이상일때 닫기버튼 안보이는 문제 st*/ @media all and (max-width:1360px){ .layout_popup.open{overflow: hidden;position: fixed;z-index: 9999999999;box-sizing: border-box;} .poup_wrap.layer-pop-main-inner{position: relative;overflow-y: auto;height: 100%;background-color: #fff;} .layout_popup .poup_wrap ul.po li {float: none;margin: 20px;} .layout_popup .pop_top {margin-top:0px;} } /* 모바일 팝업 2개이상일때 닫기버튼 안보이는 문제 ed*/ /*dictionary_wrap*/ .dictionary_wrap{left:50%; top:50%; position: fixed; transform: translate(-50%, -50%); width:350px; background:#fff; z-index:9999999999; display:none; box-shadow: 3px 3px 15px rgb(0 0 0 / 12%); border-radius: 5px 5px 5px 5px;} .dictionary_wrap.open{display:block;} .dictionary_wrap .head{padding:25px; background:#000; border-radius:5px 5px 0 0;position: relative; background: linear-gradient(to bottom, #43586b, #2c3e4f);} .dictionary_wrap .head .title{color:#fff; font-size:22px; margin-bottom:20px; font-weight:600} .dictionary_wrap .head div input{height:37px; width:calc(100% - 41px); } .dictionary_wrap .head div img{ vertical-align: middle;} .dictionary_wrap .dictionary_con{padding:25px; border-radius:0 0 5px 5px; height:400px; overflow-y: auto;} .dictionary_wrap .dictionary_con dt{font-size:18px; color:#333; padding-bottom:10px; font-weight:600} .dictionary_wrap .dictionary_con dd{font-size:14px; padding-bottom:35px; margin-bottom:35px; border-bottom:1px solid #ddd;} .dictionary_wrap .dictionary_con dd span{display:block; padding-bottom:10px;} .dictionary_wrap .head .btn_close{position: absolute; right:25px; top:23px; } .quick{ position: fixed; right:40px; bottom:60px; z-index:9999999999; width:70px; } .quick a{margin-bottom:10px; display:block; margin:0 auto;} .quick a img {width:100%;} .quick a:nth-of-type(2) {display:block; margin-top:10px;} /*.quick a:nth-of-type(1) img {width:60px;} .quick a:nth-of-type(2) {width:60px; display:block; margin-top:10px;} */ .quick .dictionary_mobile{display:none;} @media (max-width: 768px){ .quick {width:60px; right:15px; bottom:30px; z-index:999;} .quick a {width:60px; display:block;} .quick a img {width:100%;} .quick .dictionary_mobile{display:block;} .quick .dictionary_pc{display:none;} .dictionary_wrap .dictionary_con{height:250px;} } .btn_wrap{padding-top:60px;} @media (max-width: 768px){ .btn_wrap{padding-top:30px;} } .big{padding:20px 80px 20px 30px!important; background:#01407c; font-weight: 600; color:#fff; display: inline-block; font-size:20px !important; text-align: left;} .big:hover{color:#fff;} .big.icon{vertical-align: middle;} .big.icon.default::after {width: 28px; height: 22px; background: url(/_res/hf/ko/img/btn_link.png) no-repeat 90% 0!important; position: absolute; content: ''; display: block; right: 25px; top: 50%; transform: translateY(-50%);} .big.icon.down{background:#007ec7;} .big.icon.down::after { width:28px; height:22px;background:url(/_res/hf/ko/img/btn_down.png) no-repeat 0 0; } .big.icon.search::after { width:20px; height:20px;background:url(/_res/hf/ko/img/btn_search.png) no-repeat 0 0; position: absolute; content: ''; display: inline-block; right: 25px; top: 50%; transform: translateY(-50%);} @media (max-width: 768px){ .big{padding:10px 55px 10px 15px!important; font-size:18px !important;} .big.icon.search::after{width:15px; height:15px; right:15px; background-size:100%;} .big.icon.default::after{width:16px; height:13px; right:15px; background-size:100% !important;} } .btn_round{display:inline-block;border-radius:30px; color:#fff; font-size:15px; padding:1px 40px 1px 20px; background:#8592ac url(/_res/hf/ko/img/new_link.png) no-repeat 90% 50%;} .btn_round:hover{color:#fff;} .btn_round_down{display:inline-block; border-radius:30px; color:#fff; font-size:15px; padding:2px 40px 2px 20px; background:#8592ac url(/_res/hf/ko/img/btn_down.png) no-repeat 90% 50%; background-size:13px;} .btn_round_down:hover{color:#fff;} .icon_location{display:inline-block; border:1px solid #d7dae1; padding:7px 10px 7px 30px; font-size:14px; color:#555; background:url(/_res/hf/ko/img/icon_location.png) no-repeat 10px center;} .point_box p{position:relative; padding-left:25px;} .point_box p::after{content:'※'; display:block; color:#666; font-size:20px; position: absolute; top: 0; left: 0;} .blue_btn_down, .blue_btn_link{background:#007ec7; color:#fff; height:70px; display:inline-block; padding: 0 80px 0 33px; line-height:70px; font-weight: 600; position: relative; box-sizing:border-box; text-align: left;} .blue_btn_link{min-width:320px; } .blue_btn_down{min-width:320px; } .blue_btn_down::after { position:absolute; content:''; display:block; right:27px; top: 23px; width:28px; height:22px;background:url(/_res/hf/ko/img/btn_down.png) no-repeat 0 0; } .blue_btn_link::after { position:absolute; content:''; display:block; right:27px; top: 23px; width:28px; height:22px;background:url(/_res/hf/ko/img/btn_link.png) no-repeat 0 0;} .blue_btn_down + .blue_btn_down, .blue_btn_link + .blue_btn_link{margin-left:10px;} .blue_btn_down:hover, .blue_btn_link:hover{color:#fff; } .ws_btn_down{border:1px solid #ddd; padding:5px 15px 5px 30px; background:url(/_res/hf/ko/img/icon_down.gif) no-repeat 10px 8px; font-size:14px; font-weight: normal; letter-spacing: 0;} .img_mobile_box{display:none;} [v-cloak] { display: none; } @media all and (max-width:1150px){ #content.annuity_layout #cms-content{font-size:20px; line-height:34px;} #content.annuity_layout .u-tab01 a{font-size:18px;line-height:50px; height:50px;} #content.annuity_layout .tbl{font-size:16px;} #content.annuity_layout .top_graybox_type2 .box_inner .title{font-size:22px; margin-bottom:0px;} #content.annuity_layout .h2{font-size:30px;} #content.annuity_layout .font16{font-size:16px;} #content.annuity_layout .font18{font-size:18px;} #content.annuity_layout .h4{font-size: 24px;} #content.annuity_layout .h3{font-size: 34px;} #content.annuity_layout .product_explanation .btn_viewer, #content.annuity_layout .product_explanation .btn_down{font-size:16px;} #content.annuity_layout ul[class^="list_ul"] >li, #content.annuity_layout ol[class^="list_num"] li ul li, #content.annuity_layout ol[class^="list_num02"] li ul li{line-height:34px;} #content.annuity_layout ul[class^="list_ul02"] >li:before{top:9px;} #content.annuity_layout .big{font-size:20px !important; } #content.annuity_layout .criteria{font-size:16px;} } @media all and (max-width:980px){ .blue_btn_link, .blue_btn_down{margin-left:0; margin-bottom:10px; } .blue_btn_link + .blue_btn_link, .blue_btn_down + .blue_btn_down{margin-left:0px;} .blue_btn_down{min-width:346px; line-height:60px; height:60px;} .blue_btn_link{line-height:60px; height:60px; } .blue_btn_down::after, .blue_btn_link::after { top: 20px;} } @media all and (max-width:780px){ #content.annuity_layout #cms-content, #cms-content{font-size:18px; color:#666; line-height:30px;} #content.annuity_layout .h2, #content .h2{font-size:24px; margin:56px 0 20px 0px; line-height:34px;} #content.annuity_layout .h3, #content .h3 {font-size:26px; margin:56px 0 20px 0px; line-height:34px;} #content.annuity_layout .h4, #content .h4 {font-size:22px; margin:30px 0 10px 0px;} #content.annuity_layout .h3:before, #content .h3:before {top:5px; } #content.annuity_layout .h4:before, #content .h4:before {top:7px;} #cms-content .h3 + p{margin-top:0;} #content .h4 span:before{top:6px;} ul[class^="list_ul"] >li, ol[class^="list_num"] li ul li, ol[class^="list_num02"] li ul li{line-height:30px;} ol[class^="list_onum"] >li:before, ol[class^="list_onum02"] >li:before{font-size:18px;} #content.annuity_layout ul[class^="list_ul"] >li, #content.annuity_layout ol[class^="list_num"] li ul li, #content.annuity_layout ol[class^="list_num02"] li ul li{line-height:30px;} } @media all and (max-width:768px){ .img_mobile_box{display:block; padding:30px; background:#f7f7f8; text-align: center; margin-top:20px;} .img_mobile_box .title{font-size:30px; color:#000; letter-spacing: -1px; font-weight: 500;} .img_mobile_box .img_box{background: url(/_res/hf/ko/img/img_size.png) no-repeat center 0; padding-top: 100px; font-size: 16px; margin: 30px 0; line-height: 25px; } .blue_btn_link, .blue_btn_down{ line-height: 24px; height: auto; padding: 20px 70px 20px 25px; /*min-width:100%;*/} .blue_btn_down::after, .blue_btn_link::after {top: 50%; transform: translateY(-50%); right:25px;} } @media all and (max-width:500px){ .blue_btn_down{min-width:100%; } } .modal_memo{display:none; width: 75px; height: 75px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 999;} .modal_memo img{width:100%;} .btn_mobile{display:none;} @media all and (max-width:768px){ .modal_memo{display:block;} .btn_mobile{display:block;} } /* --- 팝업 컨테이너 (정렬 담당) --- */ .popup-container { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; justify-content: center; gap: 20px; width: 100%; pointer-events: none; } /* 팝업 전체 영역 클릭 가능하게 설정 */ .layer-popup-wrap { pointer-events: auto; } .layer-popup-wrap img { vertical-align: top; display: block; } /* 푸터 스타일 */ .pops_footer { width: 100%; background: #444; box-sizing: border-box; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; color: #333; text-align: center; } /* 체크박스, 라벨 스타일 */ .pops_footer span#layerCookie, .pops_footer label { background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; padding: 5px 10px; border: 0; font-size: 15px; } .pops_footer input[type="checkbox"] { margin-right: 8px; height: 40px; cursor: pointer; } /* 닫기 버튼 스타일 */ .pops_footer .pops_close { margin-right: 5px; padding: 5px 10px; border: 0; background: #393939; color: #fff; font-size: 15px; cursor: pointer; } /* 모바일 대응 */ @media screen and (max-width: 768px) { .popup-container { top: 18% !important; } /* 팝업 위치 및 크기 조정 */ div[id^="layer-popup-"] { position: fixed !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 85% !important; max-width: 400px !important; height: auto !important; margin: 0 !important; right: auto !important; bottom: auto !important; background-color: #444; z-index: 99999 !important; pointer-events: auto !important; } /* 이미지 스타일 */ div[id^="layer-popup-"] img { max-height: 75vh !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; display: block !important; vertical-align: top !important; } /* 푸터 스타일 */ div[id^="layer-popup-"] .pops_footer { position: relative !important; left: auto !important; bottom: auto !important; } /* 모바일에서 팝업 위치 조정 */ .popup-0, .popup-1, .popup-2 { left: 20px; } }