@charset "uft-8";
@font-face {font-family: 'Pretendard'; font-weight: 300; src: url('https://img.getju.co.kr/_skin/bona/img/etc/Pretendard-Light.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 400; src: url('https://img.getju.co.kr/_skin/bona/img/etc/Pretendard-Regular.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 500; src: url('https://img.getju.co.kr/_skin/bona/img/etc/Pretendard-Medium.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 600; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); font-style: normal;}
@font-face {font-family: 'Pretendard'; font-weight: 700; src: url('https://img.getju.co.kr/_skin/bona/img/etc/Pretendard-Bold.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 800; src: url('https://img.getju.co.kr/_skin/bona/img/etc/Pretendard-ExtraBold.woff') format('woff');}

html {font-family: 'Pretendard', sans-serif; scroll-behavior: smooth;}

html, body {display: block; margin: 0;}

* {margin: 0; padding: 0;box-sizing:border-box;}

body {margin: 0; padding: 0; list-style: none; font-size:1.0rem; background-color:#fff; color:#000; overflow-x: hidden; box-sizing:border-box;max-width: 100%;}
ul,li{list-style:none;}
a {color: inherit;text-decoration: none;}



/* scrollbar

body::-webkit-scrollbar {width: 5px;}
body::-webkit-scrollbar-thumb {height: 30%; background: #3074F1; border-radius: 10px;}
body::-webkit-scrollbar-track {background: #000;} */



#wrap {width: 100%; height: auto;}


.layout_header {position: fixed; top: 0; width: 100%; height: auto; z-index: 99; background-color: #fff; display: flex; align-items: center; justify-content: flex-end; border-bottom:2px solid #F9F9F9; padding-top:20px;}
.header_body {width:100%; max-width:1200px; margin: 0 auto; position: relative; display: flex; justify-content: space-between;  align-items: center;  padding:0 2%;}
.layout_etaxbill_logo img {width:110px;}

.layout_header_right{display:flex; justify-content: flex-end;}
.layout_header_right > a {padding: 10px 20px; color:#000; font-size:1.15rem; font-weight: 500; border-bottom:3px solid #fff;}
.layout_header_right > a:hover{color:#3074F1; font-weight: 600; border-bottom:3px solid #3074F1;}
.layout_header_menu-mobile{display:none;}

.section_body {width:100%; max-width:1200px; margin: 0 auto; position: relative; padding:0 2%;}
.sub_title {width:100%; font-size:1.8rem; font-weight:700; color:#3074F1; padding:1rem 0;}
.sub_title_list {width:100%; font-size:1rem; font-weight:400; color:#000; padding:0.8% ;}

.managebox {width:100%; background-color:#F0F3FA; border-radius: 0.5rem; padding:1.0rem; display: flex; gap:2%;}
.managebox_title {font-size:1.2rem; font-weight:700; color:#3074F1;}
.manager_form {display: flex; gap:0.8rem, border: 2px; border-color:#3074F1; border-radius: 0.3rem;}
.manager_form select {border:0; padding:1.0rem 3.0rem 1.0rem 0.5rem; border-radius: 0.3rem; -webkit-appearance: none;  /* 크롬 화살표 없애기 */    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */    appearance: none;  /* 화살표 없애기 */ outline: none;}
.manager_form select.selectbox{background: url(../images/select_arrow.png) no-repeat 90% 50%; background-size:0.4rem; background-color: #fff; }

.manager_input {width:90%; display: flex; gap:0.8rem; flex-direction: column;}
.manager_search {width:100%;}
.manager_search input {width:100%; border:0; background-color: #fff; padding:1.0rem 2.0rem 1.0rem 1.0rem; border-radius: 0.3rem; outline: none;}
.manager_search input {width:100%; border:0; background-color: #fff; padding:1.0rem 2.0rem 1.0rem 1.0rem; border-radius: 0.3rem; outline: none;}

.managerbtn {width:10%;}
.management {width:100%; margin-top:80px;}
.department {width:100%; display: flex; gap:0.5rem;}
.department input {width:100%; border:0; background-color: #fff; padding:0.6rem 1.0rem; border-radius: 0.3rem; outline: none;}
.department .depart_input {display: flex; gap:0.5rem; padding:1.0rem 0;}
.department .department_left {background-color: #F0F3FA; border-radius: 0.5rem; padding:1.2rem; width:30%;}
.department .department_right {background-color: #F0F3FA; border-radius: 0.5rem; padding:1.2rem; width:70%;}
.department .department_left .depart_list {padding:0.6rem 0.8rem 0.8rem;}
.department .department_left .depart_list img {width:1.0rem;}
.department .department_left .depart_list li {padding:0.2rem 0; display:flex; justify-content: space-between; align-items: center;}

.manager_select input[type=radio]{display: none;}
.manager_select input[type=radio]+label{
    display: inline-block;
    cursor: pointer;
    border:0;
    text-align: center;
    font-weight:bold;
    font-size: 0.8rem;
    border-radius: 3.0rem;
    padding:0.5rem 1.0rem;
}
.manager_select input[type=radio]+label{
    background-color: #fff;
    color: #111;
}
.manager_select input[type=radio]:checked+label{
    background-color: #3074F1;
    color: #fff;
}


.table_btn {width:100%; padding:2.0rem 1.0rem; display: flex; justify-content: flex-end; gap:0.5rem;}
.table_body {width: 100%;}
.table_body table {width:100%; border-collapse: collapse}
.table_body table tr.odd {background: rgba(240, 243, 250, 0.60);}
.table_body table th {text-align: center; padding:0.8rem 0; border-bottom:2px solid #000;}
.table_body table td {padding:0.8rem 0.5rem;}
.table_body table td:nth-child(1) {text-align:center;}
.table_body table td:nth-child(2) {text-align:center;}
.table_body table td:nth-child(3) {text-align:center;}
.table_body table td:nth-child(4) {text-align:center;}
.table_body table td:nth-child(5) {text-align:left;}
.table_body table td:nth-child(6) {text-align:center;}
.table_body table td:nth-child(7) {text-align:left;}
.table_body table td:nth-child(8) {text-align:center;}

.table_body2 {width: 100%;}
.table_body2 table {width:100%; border-collapse: collapse}
.table_body2 table tr.odd {background: rgba(240, 243, 250, 0.60);}
.table_body2 table th {text-align: center; padding:0.8rem 0; border-bottom:2px solid #000;}
.table_body2 table td {padding:0.8rem 0.5rem;}
.table_body2 table td:nth-child(1) {text-align:center;}
.table_body2 table td:nth-child(2) {text-align:center;}
.table_body2 table td:nth-child(3) {text-align:center;}
.table_body2 table td:nth-child(4) {text-align:center;}
.table_body2 table td:nth-child(5) {text-align:left;}
.table_body2 table td:nth-child(6) {text-align:center;}
.table_body2 table td:nth-child(7) {text-align:left;}
.table_body2 table td:nth-child(8) {text-align:center;}



.manager_body {width: 100%;}
.manager_body table {width:100%; border-collapse: collapse}
.manager_body table tr {background-color: #fff;}
.manager_body table tr.odd {background: rgba(240, 243, 250, 0.60);}
.manager_body table th {text-align: center; padding:0.8rem 0; border-bottom:2px solid #000; background-color: rgba(240, 243, 250, 0.60);}
.manager_body table td {padding:0.8rem 0.5rem; text-align:center;}

.section_body .table_number {text-align:center; display: flex; justify-content: center; padding:5% 0;}
.section_body .table_number a {padding:0.5rem 0.8rem; border:1px solid #DEE2E6;  color:#3074F1; display: flex; align-items: center;}
.section_body .table_number a.checked {padding:0.5rem 0.8rem; border:1px solid #DEE2E6;  background-color:#3074F1; color:#fff;}
.section_body .table_number a:first-child {border-radius:0.3rem 0 0 0.3rem;}
.section_body .table_number a:last-child {border-radius:0 0.3rem 0.3rem 0;}


/* 버튼 */
.manage_search {width:100%; height:100%; border:0; color:#fff; background-color: #3074F1; border-radius: 0.3rem; font-size: 1.05rem;}
.manage_search:hover {background-color: #30adf1;}
.button_gray {border:0; color:#111; background-color: #F0F3FA; border-radius: 0.3rem; font-size: 0.8rem; padding:0.5rem 1.0rem; }
.button_gray:hover {background-color: #3074F1; color:#fff;}
.button_blue {width:100%; border:0; color:#fff; background-color: #3074F1; border-radius: 0.3rem;}
.button_blue:hover {background-color: #30adf1;}
.button_blue2 {border:0; color:#fff; background-color: #3074F1; border-radius: 0.3rem; font-size: 0.8rem; padding:0.5rem 1.0rem; }
.button_blue2:hover {background-color: #30adf1; color:#fff;}
.btn_25 {width:25%;}
.btn_20 {width:20%;}


/* 선불충전 */
.price_list_big {
    margin: 4px;
    width: 25%;
    height: 100%;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center; /* 수직 중앙 정렬 */
    text-align: center; /* 텍스트 중앙 정렬 */
    font-size: 1.2rem;
    font-weight: 600;
}
.container {
    display: flex;
    justify-content: space-between;
}
.box {
    width: 100%;
    height: auto;
    display:flex;
    flex-direction: column;
    margin: 4px;
    width: 25%;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 20px;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.container_txt {
    display: flex;
    justify-content: space-between;
}

.box_txt {
    width: 100%;
    margin-top: 40;
    background: #F9F9F9;
    border-radius: 8px;
    padding: 20px;
    justify-content: center;
    align-items: center;
}




.container .box img {
    width: 110px;
    height: auto;
    max-width: 100%;
}
.box.type {
    font-size: 1.3rem;
    font-weight: bold;
    width: 25%;
    color: black;
}

.amount-info {
    width: 80px;
    margin-top: 10px; /* 금액과 '발급건당' 사이 여백 추가 */
    padding: 10px; /* 텍스트 주위 여백 */
    border: 2px solid #888888; /* 테두리 색상 */
    border-radius: 30px; /* 테두리 둥글게 */
    color: #888888;
    font-size: 1.0rem;
    font-weight: 500;
}

.Price-list-right{
    text-align: right;
    margin: 10px 10px 50px 10px;
}

.Price-list-title{
    color: #3074F1;
    font-size: 2rem;
    font-family: Pretendard;
    font-weight: 700;
    word-wrap: break-word
}

.skybox {
    width: 75%; /* 부모 요소의 25% 너비로 설정 */
    height: auto;
    padding: 30px;
    background-color: #F0F3FA; /* 배경색 파란색으로 설정 */
    border-radius: 8px; /* 모서리 둥글게 */
    text-align: left;
    padding: 0px 60 0px 60px;
    margin: 4px;
}

.sky ul li {
    margin-bottom: 4px;
}

.bluebox {
    width: 25%;
    background-color: #3074F1;
    border-radius: 8px;
    text-align: center;
    padding: 30px;
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    display: flex;
    flex-direction: column;
    margin: 4px;
    justify-content: center;
}

.notice_box {
    margin: 10px;
    width: 100%;
    height: 100px;
    background: #3074F1;
    font color: #white;
    border-radius: 8px;
    padding: 60px;
    display: flex;
    justify-content: center;
    align-items: center; /
text-align: center;
}

ul.common-list {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    text-align: left;
}

.highlight-text {
    color: #3074F1;
    font-weight: 600;
}

.low-text {
    color: #888888;
    font-size: 1.0rem;
    font-weight: 500;
}



.notice {
    width: 100%;
    height: 100%;
    background: #3074F1;
    border-radius: 8px
}

lined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}


@media (max-width:1100px) {

    .main_center_body {padding:0 10px 50px 10px;}

}


@media (max-width:768px) {

    .header_body {display: block;}
    .layout_header {padding:2% 0;}
    .layout_etaxbill_logo {position: absolute; width:100%; text-align: center; z-index: 10; left:0;}
    .layout_etaxbill_logo img {width:100px;}
    .layout_header_menu-pc{display:none;}
    .layout_header_menu-mobile{display:block;}
    .layout_header_mobileMenu {display:flex; justify-content: flex-end;}
    .layout_header_mobileMenu:before{content:''; display:inline-block; width:30px; height:30px; background:url(../images/mobile-menu-btn.png) no-repeat; background-size:cover; cursor:pointer; z-index:11;}
    .layout_header_mobileMenu.active:before {content:'';  display:inline-block; width:30px; height:30px; background:url(../images/mobile-menu-btn2.png) no-repeat; background-size:cover; cursor:pointer; z-index:11;}
    .layout_header_mobileSlide{position:absolute; top:46px; left:0; width:100%; z-index:3; background:#f7f7f7; display:none;}
    .layout_header_mobileSlide > div{display:flex; flex-direction:column; padding:10px 0;}
    .layout_header_mobileSlide > div img {vertical-align:middle;}
    .layout_header_mobileSlide > div > a{width:100%; border-bottom:1px solid #F9F9F9; padding:10px 20px 10px 20px; color:#111;}
    /* 이용요금표 */
    .price_list_big {display: none;}
    .material-symbols-outlined {display: none;}
    .box {width: 100%; margin-bottom: 4px;}
    .box.type {width: 100%; margin-bottom: 4px;}
    .bluebox {display: none;}
    .skybox {width: 100%; margin-bottom: 4px;}
    .amount-info {
        font-size: 0.9rem; /* 필요에 따라 텍스트 크기 조정 */
    }

    img {
        max-width: 100%; /* 이미지가 부모 요소 너비에 맞게 조정됨 */
        height: auto;
    }


    .section_body {padding:0 4%;}
    .management {margin-top:100px;}
    .sub_title {font-size: 1.5rem;}
    .managebox {flex-direction: column;}
    .manager_input {width:100%;}
    .managerbtn {width: 100%; padding-top:1.2rem;}
    .manage_search {padding:0.5rem 0;}

    .table_body {overflow-x: scroll;}
    .table_body table {width:200%;}

    .department {flex-direction: column;}
    .department .department_left {background-color: #F0F3FA; border-radius: 0.5rem; padding:1.2rem; width:100%;}
    .department .department_right {background-color: #F0F3FA; border-radius: 0.5rem; padding:1.2rem; width:100%;}
    .box blue type {padding:0.5rem 0;}


    footer {padding:10% 2%;}
    footer .footer_terms {display: flex; justify-content: center; padding-bottom:1.0rem;}
    footer .footer_customer ul {justify-content: center; text-align: center;}
    footer .copyright {justify-content: center;}

}

@media (max-width:350px) {

    .section_body .table_number a {padding: 0.3rem 0.5rem;}
    .table_body table {width:250%;}

}