@charset "utf-8";
@import "default.css";


    #wrap {display:inline-block; width: auto; min-width:100%;} /* 배경이미지/사진 오버플로우 현상 */

/** header **/
    header {position: fixed; top: 0; left: 0; width: 100%; height: 72px; background-color: #fff; z-index: 9999;}
    header nav {width: 1200px; line-height: 72px; margin: 0 auto;}
    header .top_logo {float: left; width: auto; margin-top: 20px;}
    header .gnb {position: relative; float: right;}
    header .gnb li {float: left; margin-left: 50px; color: #c0c0c0; display: flex;}
    header .gnb li a {font-size: 16px; color: #383838;}
    header .top_login {position: relative; padding-left: 20px; background: no-repeat url(/images/nbill/common/login_ico.png) left center;}

    
/** section **/
    section {position: relative; width: 100%; height: 100%; margin: 0 !important;}
    .inner {position: relative; width: 1200px; margin: 0 auto; box-sizing: border-box;}
    .inner h1, .inner h2, .inner h3, .inner h4, .inner h5, .inner h6, .inner p, .inner strong, .inner input, .inner table, .inner span {position: relative; top: 0; left: 0; color: #383838;}
    section .btn {position: relative; display: inline-block;}
    section .btn a {display: inline-block; font-size: 17px; font-weight: bold; color: #383838; padding: 22px 92px 22px 30px; border: 1px solid #fff;}
    section .btn:before {content: ''; position: absolute; width: 14px; height: 1px; top: 50%; right: 24px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: #383838;}
    section .btn:after {content: ''; position: absolute; width: 1px; height: 14px; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: #383838;}
    section strong {position: relative; display: inline-block; font-size: 20px; line-height: 2; cursor: pointer;}
    section strong::after {content: ''; display: block; border-bottom: 1px solid #383838;}

    .main_visual {position: relative; background:  no-repeat url(/images/nbill/visual_bg.jpg) center / cover; padding-top: 192px; padding-bottom: 52px;}
    .main_visual h1 {font-size: 48px; font-weight: bold; color: #fff; line-height: 1.3; margin-bottom: 18px;}
    .main_visual .btn a {font-weight: normal; color: #fff}
    .main_visual .btn:before, .main_visual .btn:after {background-color: #fff}
    .main_visual p {font-size: 22px; color: #fff; line-height: 1.4; margin-bottom: 58px;}
    .main_visual .qaNum {position: relative; display: block; font-size: 17px; color: #fff; text-align: center; margin-top: 84px; box-sizing: border-box;}
    .main_visual .qaNum::before {content: ''; position: absolute; top: -55px; left: 50%; width: 34px; height: 38px; background: no-repeat url(/images/nbill/visual_ico.png); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
 
    .main_service li .inner {overflow: hidden; padding: 150px 0;}
    .main_service li .inner_img {width: 58%;}
    .main_service li .inner_txt {position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
    .main_service li:nth-child(even) > .inner {padding: 0 !important;}
    .main_service li:nth-child(even) .inner_img {float: right;}
    .main_service li:nth-child(even) .inner_txt {left: 0;}
    .main_service li h1 {font-size: 40px; font-weight: bold; line-height: 1.3;}
    .main_service li p {font-size: 17px; line-height: 1.6; margin-top: 30px;}
    .main_service li strong {margin-top: 55px;}

    .main_info {background-color: #f9f9f9;}
    .main_info .inner {padding: 65px 0;}
    .main_info .inner::after {content: ''; position: absolute; bottom: 0; right: 0; width: 338px; height: 322px; background:  no-repeat url(/images/nbill/info_img.png);}
    .main_info p {font-size: 17px; line-height: 1.6; margin-bottom: 30px;}
    .main_info strong::after {border-color: #383838;}

    .main_accodian  .inner {padding: 150px 0;}
    .main_accodian h1 {font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 52px;}
    .main_accodian li {float: left; width: 33.333%; text-align: center;}
    .main_accodian li .inner_img {position: relative; width: 100%; height: 420px;}
    .main_accodian li:nth-child(1) .inner_img {background: no-repeat url(/images/nbill/box01.jpg) center / cover;}
    .main_accodian li:nth-child(2) .inner_img {background: no-repeat url(/images/nbill/box02.jpg) center / cover;}
    .main_accodian li:nth-child(3) .inner_img {background: no-repeat url(/images/nbill/box03.jpg) center / cover;}
    .main_accodian li .inner_img span {position: absolute; width: 100%; font-size: 20px; font-weight: 500; color: #fff; line-height: 1.5; letter-spacing: -1px;; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
    .main_accodian li:nth-child(1) .inner_img span::before {content: ''; display: block; width: 34px; height: 38px; background: no-repeat url(/images/nbill/box_ico01.png); margin: 0 auto 17px;}
    .main_accodian li:nth-child(2) .inner_img span::before {content: ''; display: block; width: 34px; height: 38px; background: no-repeat url(/images/nbill/box_ico02.png); margin: 0 auto 17px;}
    .main_accodian li:nth-child(3) .inner_img span::before {content: ''; display: block; width: 34px; height: 38px; background: no-repeat url(/images/nbill/box_ico03.png); margin: 0 auto 17px;}
    .main_accodian li p {display: inline-block; font-size: 17px; line-height: 1.5; text-align: left; padding-top: 22px; box-sizing: border-box;}

    .main_overview {background: no-repeat url(/images/nbill/more_bg.jpg) center / cover;;}
    .main_overview .inner {padding: 82px 0;}
    .main_overview h1 {float: left; font-size: 30px; line-height: 65px;}
    .main_overview h1 span {font-size: 30px; font-weight: bold;}
    .main_overview ul {float: right;}
    .main_overview li {border: 1px solid #383838; box-sizing: border-box;}
    .main_overview li:first-child {margin-right: 20px;}

    
/** footer **/
    footer {background-color: #303235;}
    footer .inner {text-align: left; padding: 14px 0 40px !important; font-size: 12px;}
    footer .bott_logo {position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}
    footer .copyright {float: right; width: 80%;}
    footer .copyright li {float: left; margin-right: 30px; line-height: 42px;}
    footer .copyright li.no_login {float: right; width: 185px; text-align: center; border: 1px solid #fff; box-sizing: border-box; margin-right: 103px;}
    footer .copyright li.go-top {position: absolute; top: -14px; right: 0; width: 74px; line-height: 29px; text-align: center; background-color: #666; margin-right: 0; padding: 15px 0; cursor: pointer;}
    footer .copyright li.go-top::before {content: ''; display: block; width: 13px; height: 13px; background: no-repeat url(/images/nbill/common/go-top.png); margin: 0 auto; z-index: 1;}
    footer .copyright li a {font-size: 14px; color: #fff;}
    footer .copyright p {color: #959595; line-height: 2; padding-top: 20px; margin-top: 12px; border-top: 1px solid #45464a; box-sizing: border-box;}
    footer .copyright p > span {color: #606060;}


/* 210621 이준희 추가 */
.main_visual .btn:nth-of-type(n+2) {margin-left: 8px;}
.sub_qa .sub_tit01 { height: auto; text-align: center; border: 0; margin-bottom: 40px; }
.sub_qa .sub_tit01 h3 { font-size: 37px; font-weight: bold; }
.sub_qa .sub_tit01 p { font-size: 15px; margin-top: 25px; }
.sub_qa .bbs_top01 { display: table; width: 100%; height: auto;  margin-bottom: 8px; position: relative;}
.sub_qa .bbs_top01 p,
.sub_qa .bbs_top01 .search01 { display: table-cell; vertical-align: middle;  }
.sub_qa .bbs_top01 p.total_num { font-size: 13px; background: no-repeat 0 0 url(/images/common/board-sprite_icon.png); line-height: 12px; padding-left: 15px; }
.sub_qa .bbs_top01 p.total_num strong { font-weight: bold; color: #0f0f0f; }
.sub_qa .bbs_top01 .search01 { float: right; }
.sub_qa .bbs_top01 .search01::after { content: ''; display: table; clear: both; }
.sub_qa .bbs_top01 .search01 li { float: left; display: inline-block; margin-right: 5px; }
.sub_qa .bbs_top01 .search01 li:last-child { margin-right: 0; }
.sub_qa .bbs_top01 .search01 li select,
.sub_qa .bbs_top01 .search01 li input[type="text"],
.sub_qa .bbs_top01 .search01 li button[type="submit"] { height: 34px; line-height: 34px; }
.sub_qa .bbs_top01 .search01 li select,
.sub_qa .bbs_top01 .search01 li input[type="text"] { border: solid 1px #dedede; color: #787878; font-size: 13px; padding-left: 10px; }
.sub_qa .bbs_top01 .search01 li select { width: 110px; }
.sub_qa .bbs_top01 .search01 li input[type="text"] { width: 160px; }
.sub_qa .bbs_top01 .search01 li button[type="submit"] { width: 60px; padding: 0; }
.sub_qa .subject_w350 th,
.sub_qa .subject_w350 td,
.sub_qa .subject_w350 a { font-size: 13px; }
.sub_qa .faq_wrap { border-top: solid 2px #555555; }
.sub_qa .faq_wrap li .icon { float: left; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 25px; color: #fff; background-color: #008be0; margin-right: 20px; }
.sub_qa .faq_wrap li .icon.answer { background-color: #fff !important; color: #f96723 !important; }
.sub_qa .faq_wrap li .title_wrap { cursor: pointer; padding: 10px 18px 10px 30px; border-bottom: solid 1px #e9e9e9; }
.sub_qa .faq_wrap li .title_wrap::after { content: ''; display: table; clear: both; }
.sub_qa .faq_wrap li .title_wrap .title { float: left; font-size: 14px; color: #787878; line-height: 25px; width: 800px; }
.sub_qa .faq_wrap li .accodian_contents { max-height: 0; transition: all 0.35s ease-out; overflow: hidden; background: #f9f9f9; padding: 0 43px 0 30px; }
.sub_qa .faq_wrap li .accodian_contents::after { content: ''; display: table; clear: both; }
.sub_qa .faq_wrap li .accodian_contents .contents { float: left; }
.sub_qa .faq_wrap li .accodian_contents .contents p { font-size: 14px; color: #787878; line-height: 22px; }
.sub_qa .faq_wrap li .accodian_contents .contents strong { font-weight: bold; color: inherit; }
.sub_qa .faq_wrap li .accodian_contents .contents u { vertical-align: 3px; }
.sub_qa .faq_wrap li.active .title_wrap .title { text-decoration: underline; color: #383838; }
.sub_qa .faq_wrap li.active .accodian_contents { max-height: 1000px;  border-bottom: solid 1px #e9e9e9; padding: 20px 43px 20px 30px; }
.sub_qa .faq_wrap li.active .icon { background-color: #f96723; }
.sub_qa .faq_wrap li .title_wrap .arrow { position: relative; float: right; }
.sub_qa .faq_wrap li .title_wrap .arrow::after, 
.sub_qa .faq_wrap li .title_wrap .arrow::before { content: ''; position: absolute; right: 20px; margin-top: 6px; background-color: #aaa; width: 1px; height: 10px; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }  
.sub_qa .faq_wrap li .title_wrap .arrow::before { -webkit-transform: translate(-3px, 0) rotate(-45deg); transform: translate(-3px, 0) rotate(-45deg); }
.sub_qa .faq_wrap li .title_wrap .arrow::after { -webkit-transform: translate(3px, 0) rotate(45deg); transform: translate(3px, 0) rotate(45deg); } 
.sub_qa .faq_wrap li.active .title_wrap .arrow::before { -webkit-transform: translate(3px, 0) rotate(-45deg); transform: translate(3px, 0) rotate(-45deg); }
.sub_qa .faq_wrap li.active .title_wrap .arrow::after { -webkit-transform: translate(-3px, 0) rotate(45deg); transform: translate(-3px, 0) rotate(45deg); }
.sub_qa .paging { display: table; margin: 0 auto; margin-top: 40px; }
.sub_qa .paging .btn,
.sub_qa .paging .btn_number span { background: none; }

/** 231212 이준희 추가 **/
header { z-index: 998; } /* 레이어팝업 실행시 헤더가 떠있는 현상 */
.ui-widget-overlay { height: 100%; } /* 레이어팝업 실행시 높이 길어지는 오류 */
.tableSearch tr td { position: relative; }
.tableSearch tr td #btn_qmark { position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }


/* 241017 추가: 푸터 수정(그룹 ci 추가) */
footer .bott_logo { display: none; }
footer .inner { padding-bottom: 52px !important; background: no-repeat url(/images/nbill/common/symbol_wh.svg); background-size: 80px; background-position: bottom 52px right 0; }
footer .copyright { float: none; width: auto; }
footer .copyright p { line-height: 25px; }
footer .copyright .company {
	color: #959595;
	font-weight: bold;
	font-size: 13px;
}

footer .copyright .company-link {
    display: inline-block; /* 링크 영역이 텍스트의 길이만큼만 차지하도록 설정 */
    
}

footer .copyright .company:hover {
    text-decoration: underline; /* 마우스 호버 시 밑줄 표시 */
}