/**
 * ---------------------------------------------------------------------------------------------------------------------
 * .css
 * ---------------------------------------------------------------------------------------------------------------------
 * @VERSION     1.0.0
 * @AUTHOR      JB CORP ITST (CHOI JAE YOUNG)
 * @DESCRIPTION 보이는 ARS 스타일 시트 파일
 * ---------------------------------------------------------------------------------------------------------------------
 */
html, body {
    font-size: 13px;
    letter-spacing: -1px;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    font-weight: bold;
    color: var(--theme-primary);
}

a {
    position: relative;
    display: inline-block;
    color: var(--theme-black);;
    margin-left: 5px;
}

a:first-child {
    margin-left: 0;
}

a:hover {
    color: var(--theme-primary);
}

i {
    font-size: 25px;
}

em {
    font-style: normal;
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * CLASS
 * ---------------------------------------------------------------------------------------------------------------------
 */
.contents {
    opacity: 0;
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 페이지
 * ---------------------------------------------------------------------------------------------------------------------
 */
/**
 * @PAGE > TITLE
 */
.page_title {
    position: relative;
    text-align: center;
    min-height: 64px;
    padding: 20px;
    border-bottom: 1px solid var(--theme-gray01);
    z-index:1;
}

.page_title p {
    margin-top: 20px;
}

/**
 * @PAGE > DESC
 */
.page_desc {
    padding: 20px;
    border-bottom:1px solid var(--theme-gray01);
    background-color: var(--theme-white);
}

/**
 * @PAGE > TABS
 */
.page_tabs .row {
    display: flex;
    align-items:center;
    justify-content: space-around;
}

.page_tabs .row .col button {
    position: relative;
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
    border-right: 1px solid var(--theme-gray01);
    border-bottom: 2px solid var(--theme-gray01);
    text-align: center;
}

.page_tabs .row .col button.active {
    color: var(--theme-white);
    background-color: var(--theme-primary);
    border-bottom: 2px solid var(--theme-accent);
}

/**
 * @PAGE > CONTENTS
 */
.page_contents {
    position: relative;
    padding: 20px 20px 20px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 0;
    opacity: 0;
}

.page_contents.result {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/**
 * @PAGE > ACTIONS
 */
.page_actions {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 0;
}

.page_actions .btn_holder {
    font-size: 16px;
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 레이아웃
 * ---------------------------------------------------------------------------------------------------------------------
 */
#ars {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #eeeeee;

    opacity: 1;
    transform: scale(1.0);
}

#ars.index {
    /*opacity: 0;*/
    /*transform: scale(0.9);*/
}

#ars.popup,
#ars.external { /* 외부 링크(카카오 알림톡) | 20190923 | 최재영 */
    background-color: #ffffff;
}

/**
 * @ARS > HEADER
 */
#ars #header {
    position: absolute;
    width: 100%;
    height: 135px;
    top: 0;
    left: 0;
    z-index: 2;
}

#ars #header .ui_holder {
    color: #ffffff;
    padding: 20px 0;
}

#ars #header .ui_holder h1 {
    font-size: 18px;
}

#ars #header .ui_holder a {
    color: #ffffff;
}

/**
 * @ARS > CONTAINER
 */
#ars #container {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 71px;
    left: 0;
    z-index: 3;
}

#ars #container .container {
    position: relative;
    height: 100%;
    background-color: #ffffff;
}

/**
 * @ARS > FOOTER
 */
#ars #footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#ars #footer .ui_holder {
    padding: 10px 0;
}

#ars #footer .ui_holder a {
    font-size: 12px;
}

#ars #footer .ui_holder a i {
    font-size: 24px;
}

/**
 * @ARS > GNB
 */
#ars #gnb {
    position: relative;
    font-size: 14px;
    height: 100%;
}

#ars #gnb .ui-tabs-nav {
    float: left;
    width: 120px;
}

#ars #gnb .ui-tab a {
    width: 120px;
    color: #ffffff;
    background-color: #555555;
    border-bottom: 1px solid var(--theme-black);
    outline: none;
}

#ars #gnb .ui-tabs-active a {
    color: var(--theme-primary);
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

#ars #gnb .ui-tabs-panel {
    overflow: hidden;
}

#ars #gnb .ui-tabs-panel li a {
    /*position: relative;*/
    /*display: block;*/
    /*padding: 0 20px;*/
    border-bottom: 1px solid #eeeeee;
}

#ars #gnb .ui-tabs-panel li a:hover {
    border-bottom: 1px solid var(--theme-primary);
}

#ars #gnb .ui-tabs-panel li a i {
    right: 20px;
}

#ars #gnb #note {
    position: absolute;
    width: 100%;
    bottom: 10px;
    right: 20px;
}

#ars #gnb #note p {
    color: #bababa;
    font-size: 12px;
    margin-top: 10px;
}

/*!***/
/* * @SCREEN*/
/* * 연결비 화면*/
/* *!*/
/*#inc_fee_connect table tr:last-child td {*/
/*    border-bottom: none;*/
/*}*/

/*!***/
/* * @SCREEN*/
/* * 철거비 화면*/
/* *!*/
/*#inc_fee_connect table tr:last-child td {*/
/*    border-bottom: none;*/
/*}*/
/* */
/*!***/
/* * @SCREEN*/
/* * 고객 인증 확인 화면*/
/* *!*/
/*#auth_confirm .page_contents .text_holder p {*/
/*    font-size: 14px;*/
/*    margin-left: 10px;*/
/*}*/

/*!***/
/* * @SCREEN*/
/* * 콜센터 연결 화면*/
/* *!*/
/*#callcenter_connect .page_title p {*/
/*    text-align: center;*/
/*}*/

/*!***/
/* * @SCREEN*/
/* * 납부 내역 조회 화면*/
/* *!*/
/*#payment_history .page_title p {*/
/*    text-align: center;*/
/*}*/

/*#payment_history .paging_holder {*/
/*    display: none;*/
/*}*/

/*#payment_history .form_holder .btn_holder {*/
/*    margin-top: 10px;*/
/*}*/

/*!***/
/* * @SCREEN*/
/* * 이용정보 자동안내*/
/* *!*/
/*#useinfo .page_contents {*/
/*    padding: 0;*/
/*} */


/*.page_contents #result {
    display:none;
}*/

/*!*  --------------------------------------------------------------------------*/
/*	@ SCREEN - POPUP*/
/*	-------------------------------------------------------------------------- *!*/
/*.popup .page_title {*/
/*    color: #ffffff;*/
/*    border-bottom: 0;*/
/*    min-height: auto;*/
/*}*/

/*.popup .page_title .ui_holder i {*/
/*    font-size: 20px;*/
/*}*/

/*.popup .page_title .ui_holder a {*/
/*    color: #ffffff;*/
/*}*/

/*.popup .page_title .ui_holder h1 {*/
/*    font-size: 18px;*/
/*    line-height: 20px;*/
/*}*/

/*.popup .page_contents .desc_holder {*/
/*    padding: 0 20px 20px 20px;*/
/*    margin: 0 -20px 20px -20px;*/
/*    border-bottom: 1px solid #cccccc;*/
/*}*/

/*!*  --------------------------------------------------------------------------*/
/*	@ SCREEN - EXTERNAL*/
/*	--------------------------------------------------------------------------*/
/*	외부 링크(카카오 알림톡)*/
/*	20190923 | 최재영*/
/*	-------------------------------------------------------------------------- *!*/
/*.external .page_title {*/
/*    color: #ffffff;*/
/*    border-bottom: 0;*/
/*    min-height: auto;*/
/*}*/

/*.external .page_title .ui_holder i {*/
/*    font-size: 20px;*/
/*}*/

/*.external .page_title .ui_holder a {*/
/*    color: #ffffff;*/
/*}*/

/*.external .page_title .ui_holder h1 {*/
/*    font-size: 18px;*/
/*    line-height: 20px;*/
/*}*/

/*.external .page_contents .desc_holder {*/
/*    padding: 0 20px 20px 20px;*/
/*    margin: 0 -20px 20px -20px;*/
/*    border-bottom: 1px solid #cccccc;*/
/*}*/

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 퀵
 * ---------------------------------------------------------------------------------------------------------------------
 */
#ars.quick #header {
    height: calc(100vh);
}

#ars.quick #container .container {
    background: transparent;
}

#ars.quick #footer {
    display:none;
}

#ars.quick #quick {
    height: calc(100vh)
}


/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 챗봇 
 * ---------------------------------------------------------------------------------------------------------------------
 */
#ars.popup #header {
    height: 60px;
}

#ars.popup #header .ui_holder a i{
    font-size: 20px;
}

#ars.popup #desc {
    margin: 0 -40px;
    padding: 20px 40px;
    border-bottom:1px solid var(--theme-gray01);
    background-color: var(--theme-white);
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 외부경로
 * ---------------------------------------------------------------------------------------------------------------------
 */
#ars.external #header {
    height: 60px;
}

#ars.external #header .ui_holder a i{
    font-size: 20px;
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 세대 리스트
 * ---------------------------------------------------------------------------------------------------------------------
 */
#house_info .table_list td {
    height: 75px;
}

#house_info .table_list tr.past {
    color: var(--theme-gray);
}

#house_info .table_list tr.past .chips i {
    color: var(--theme-white) !important;
    background-color: var(--theme-gray);
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 카카오맵
 * ---------------------------------------------------------------------------------------------------------------------
 */
#kakao_map {
    width: 100%;
    height: 300px;
}

/**
 * ---------------------------------------------------------------------------------------------------------------------
 * 퀵 > 팝업 | DT 사업팀 최재영 | 20250415
 * ---------------------------------------------------------------------------------------------------------------------
 */
#quick_popup {
  display:none;
  position:absolute; 
  width: 100vw; 
  height: 100vh; 
  top:0; 
  left:0; 
  z-index:99999;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.75);
}

#quick_popup .contents {
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  padding: 20px;
}

#quick_popup .contents .img_holder img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}

#quick_popup .contents .btn_holder {
}

#quick_popup .contents .btn_holder a {
  font-size: 18px;
  color: #ffffff;
}