* {box-sizing: border-box; font-size: 14px;}
html, body {height: 100%; margin: 0; padding: 0;}
hr {display: none; clear: both}
img,fieldset {border: 0 none;}
h1,h2,h3,h4,h5,dl,dt,dd,ul,li,ol,th,td,p,blockquote,form,fieldset,legend {margin: 0; padding: 0}
table {border-collapse: collapse}
form, p {margin: 0px}
a {color: #2b1811}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: none}
ul {list-style: none}
em {font-style: normal; font-weight: bold}
button{display: inline-block; cursor: pointer;}
input[type=text], input[type=number], input[type=password], select {padding: 10px; border: 1px solid #c8c8c8; border-radius: 3px}
input[type=radio] {vertical-align: middle; margin: 0 2px 3px}
input[type=checkbox] {vertical-align: middle; margin: 0 3px 3px}
input[readonly] {background-color: #e8e8e8}

:root{
    --color-point:#0076CB;
    --color-brown:#985B0C;
    --color-blue:#0080FF;
    --color-gray1:#333333;
    --color-gray2:#707070;
}


#wrap {height: 100%;}

.text_left {text-align: left !important}
.text_center {text-align: center !important}
.text_right {text-align: right !important}

.v_top {vertical-align: top}
.v_bottom {vertical-align: bottom}

.bold {font-weight: bold !important}

.mgt0 {margin-top: 0 !important}
.mgt10 {margin-top: 10px !important}
.mgt20 {margin-top: 20px !important}
.mgt30 {margin-top: 30px !important}
.mgt50 {margin-top: 50px !important}

.mgb0 {margin-bottom: 0 !important}
.mgb10 {margin-bottom: 10px !important}
.mgb20 {margin-bottom: 20px !important}
.mgb30 {margin-bottom: 30px !important}
.mgb50 {margin-bottom: 50px !important}

.mgl5 {margin-left: 5px !important}
.mgl10 {margin-left: 10px !important}
.mgl15 {margin-left: 15px !important}
.mgl30 {margin-left: 30px !important}
.mgl50 {margin-left: 50px !important}

.mgr5 {margin-right: 5px !important}
.mgr10 {margin-right: 10px !important}
.mgr15 {margin-right: 15px !important}
.mgr30 {margin-right: 30px !important}
.mgr50 {margin-right: 50px !important}

.fs10 {font-size: 10px !important}
.fs11 {font-size: 11px !important}
.fs12 {font-size: 12px !important}
.fs13 {font-size: 13px !important}
.fs14 {font-size: 14px !important}
.fs15 {font-size: 15px !important}
.fs20 {font-size: 20px !important; font-weight: bold;}
.fs25 {font-size: 25px !important}

.size1{width: 77px;}
.size2{width: 151px;}
.size3{width: 214px;}
.size4{width: 457px;}

#loginContainer { width: 100%; height: 100%; position: relative; z-index: 1 }
#loginContainer::after {background: url(/images/common/lh_view.jpg); width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0.4; background-size: cover; }

#loginWrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; border:1px solid #ddd; background: #fff; padding: 10px}
#loginWrap .logo {margin: 10px 20px}

#header {display: flex; justify-content: space-between; align-items: center;  background-color: #F6F8FA; width: 100%; height: 80px; box-shadow: rgba(0,0,0,0.1) 0px 2px 3px;}
#header:after {display: block; clear: both; content: ""}
#header .logo{width: 300px; display: flex; justify-content: center; align-items: center;}
#header .logo img{width: 150px; display: block;}
#header .menu {width: 100%;}
#header .menu a {color: #333; font-size: 16px; display: inline-block; padding: 0 20px}
#header .menu a.on {background: #006ebf;}
#header .info {display: flex; justify-content: center; align-items: center; margin-right: 60px;}


#container {height: 100%;}
#container:after {display: block; clear: both; content: ""}

#left {float: left; width: 12%; border-right: 1px solid #dadee5; background-color: #fff; height: 100%}
#left > .menu {}
#left > .menu > .p {}
#left > .menu > .p > li {padding: 10px 15px}
#left > .menu > .p > li:hover {background-color: #f4f4f5}
#left > .menu > .p > li > a {display: block; font-weight: bold}
#left > .menu > .p > li > .c {display: none; padding-top: 5px}
#left > .menu > .p > li > .c > li {padding-left: 10px}
#left > .menu > .p > li.on {background-color: #f4f4f5}

#right {width: 88%; float: left}

#contents {width:90%; max-width: 1320px; margin: 60px auto;}
#contents:after {display: block; clear: both; content: ""}
#contents .btn-group{
    width: fit-content;
    margin: 0 auto;
    display: flex;
    gap: 16px;
}
#contents .btn-group button{
    width: 150px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid var(--color-point);
    background-color: #fff;
    color: var(--color-point);
    font-weight: 600;
}
#contents .btn-group button.active{
    background-color: #0076CB;
    color: white;
}
#contents .btn-group button:hover{
    background-color: #0076CB;
    color: white;
}

#map-group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 24px;
    
}
#map-group>div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #cecece;
    border-radius: 10px;
    position: relative;
}
#map-group>div:nth-child(1) h1,
#map-group>div:nth-child(1) .total_num
{color: var(--color-brown);}
#map-group>div:nth-child(2) h1,
#map-group>div:nth-child(2) .total_num
{color: var(--color-blue);}
#map-group h1{
    font-size: 2.5rem;
    position: absolute;
    top: 20px; left: 20px;
    text-align: center;
}
#map-group h1 span{
    font-size: 1.6rem;
    display: block;
    color: var(--color-gray2);
    font-weight: 400;
}
#map-group .total_num{
    position: absolute;
    bottom: 20px; right: 20px;
    font-size: 4rem;
    font-weight: bold;
}
#map-group .imgbox_map{
    position: relative;
}
#map1 .location-group .loca span
{
    color: var(--color-brown);
}
#map2 .location-group .loca span{
    color: var(--color-blue);
}
.map .location-group{
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}
.map .location-group .loca{
    position: absolute;
    width: fit-content;
}
.map .location-group .loca span{
    position: absolute;
    top: 5px; left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    font-weight: bold;
}
.map .location-group .loca1{top: 30px; left: 170px;}
.map .location-group .loca2{top: 73px; left: 130px;}
.map .location-group .loca3{top: 78px; left: 160px;}
.map .location-group .loca4{top: 70px; left: 260px;}
.map .location-group .loca5{top: 180px; left: 125px;}
.map .location-group .loca6{top: 165px; left: 168px;}
.map .location-group .loca7{top: 200px; left: 180px;}
.map .location-group .loca8{top: 150px; left: 220px;}
.map .location-group .loca9{top: 200px; left: 285px;}
.map .location-group .loca10{top: 260px; left: 275px;}
.map .location-group .loca11{top: 285px; left: 325px;}
.map .location-group .loca12{top: 270px; left: 160px;}
.map .location-group .loca13{top: 310px; left: 230px;}
.map .location-group .loca14{top: 325px; left: 310px;}
.map .location-group .loca15{top: 320px; left: 120px;}
.map .location-group .loca16{top: 345px; left: 150px;}
.map .location-group .loca17{top: 470px; left: 85px;}

.info-list .fs20{text-align: right;}
.info-list .pagenum {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
  
.info-list .pagenum a {
    color: black;
    width: 25px; height: 25px;
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-list .pagenum .num.active{
    border-bottom: 2px solid #333;
    font-weight: bold;
}

.visitor-data{
    display: flex;
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 20px;
}
.visitor-data .text-box{
    display: flex;
    justify-content: space-between;
    align-items: last baseline;
}

.visitor-data .text-box p{
    color: var(--color-gray2);
}
.visitor-data .text-box span{
    color: var(--color-point);
    font-weight: bold;
    font-size: 1.6rem;
}
.visitor-data>div:nth-child(1){
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.visitor-data>div:nth-child(2){
    width: 70%;
    padding-left: 20px;
}
.visitor-data select{
    width: 100%;
    border-radius: 5px;
    margin:12px 0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.visitor-data input{
    width: 100%;
    border-radius: 5px;
    margin-bottom: 12px;
}
.visitor-data button{
    width: 100%;
    height: 40px;
    background-color: var(--color-point);
    border-radius: 5px;
}
.visitor-data .data2{
    display: flex;
    align-items:center;
    gap:12px;
}
.visitor-data .data2 .legend{
    width: 50px; height: 20px;
    display: block;
    background-color: #B1B1B3;
}
.visitor-data canvas{
    width: 100%;
    height: max-content;
    border: 1px solid #cecece;
}

#footer {width: 100%; margin-top: 50px; padding: 25px 15px; background-color: #fff; border-top: 2px solid #e3e5e9}
#footer em {color: #f55142}

.tbl_list {width: 100%; background-color: #fff}
.tbl_list th {background-color: #F6F8FA}
.tbl_list th, td {border: 1px solid #c8c8c8}
.tbl_list th {text-align: center; font-weight: bold; padding: 15px 10px}
.tbl_list td {padding: 10px; text-align: center}
.tbl_list td.txt_left {text-align: left}

.tbl_view {width: 100%; background-color: #fff;}
.tbl_view th {background-color: #ecf0f5;}
.tbl_view th, td {border: 1px solid #CECECE;}
.tbl_view th {text-align: center; font-weight: bold; padding: 15px 10px}
.tbl_view th em {color: red}
.tbl_view td {padding: 10px}
.tbl_view td em {color: red}
.tbl_view td.txt_left {text-align: left}
.tbl_view td textarea {width: 100%; height: 350px; resize: none}
.tbl_view td iframe {border: 0}

.faq_tbl {width: 100%; background-color: #fff}
.faq_tbl th, td {border: 1px solid #c8c8c8}
.faq_tbl th {text-align: center; font-weight: bold; padding: 15px 10px}
.faq_tbl td {padding: 10px; text-align: center}
.faq_tbl td.txt_left {text-align: left}
.faq_tbl td.question {background: url(/images/common/question_icon.png) 10px center no-repeat; padding-left: 30px}
.faq_tbl td.answer {background: url(/images/common/answer_icon.png) 10px 13px no-repeat; padding-left: 30px}

.search_btn_box {text-align: center; margin-top: 20px}

.btn_box {text-align: right; margin: 20px 0}
.btn_01 {background-color: #42c1f1; border: 1px solid #42bcdf; padding: 8px 25px 8px 27px; border-radius: 5px; color: #fff}
.btn_02 {background-color: #ec9b00; border: 1px solid #dd9000; padding: 8px 25px 8px 27px; border-radius: 5px; color: #fff}
.btn_03 {background-color: #f4f4f4; border: 1px solid #dfdfdf; padding: 8px 25px 8px 27px; border-radius: 5px}

.small_btn01 {display: inline-block; padding: 5px 15px; background-color: #005da4; color: #fff; border: 0; border-radius: 2px; font-weight: normal}
.small_btn02 {display: inline-block; padding: 5px 15px; background-color: #54a31a; color: #fff; border: 0; border-radius: 2px; font-weight: normal}
.small_btn03 {display: inline-block; padding: 5px 15px; background-color: #666; color: #fff; border: 0; border-radius: 2px; font-weight: normal}

.write_w {background-image: url(/images/common/write_white_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.write_b {background-image: url(/images/common/write_black_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.modify_w {background-image: url(/images/common/modify_white_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.modify_b {background-image: url(/images/common/modify_black_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.delete_w {background-image: url(/images/common/delete_white_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.delete_b {background-image: url(/images/common/delete_black_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.list_w {background-image: url(/images/common/list_white_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}
.list_b {background-image: url(/images/common/list_black_btn.png); background-repeat: no-repeat; background-size: 12px; background-position: 10px center}

.pagination_wrap {margin-top: 25px}
.pagination {text-align: center}
.pagination li {display:inline-block; margin: 0 2px; width: 30px; height: 30px; border: 1px solid #42bcdf; border-radius: 5px; text-align: center}
.pagination li a {display: block; line-height: 28px}
.pagination li a.selected {background-color: #42bcdf; color: #fff}

.date {width: 170px; background: url(/images/sub/icon_calender.png) no-repeat; background-size: 31px 28px; background-position: 130px center}

#contents .search_box {background-color: #fafafa; padding: 20px; margin-bottom: 30px}
#contents .search_box input, select {vertical-align: middle}
#contents .search_box .date {width: 170px; background: url(/images/sub/icon_calender.png) no-repeat; background-size: 31px 28px; background-position: 130px center}
#contents .search_box .submit {border: 0; background-color: #005da4; width: 80px; height: 36px; color: #fff; margin: 0 5px; cursor: pointer}
#contents .search_box .reset {border: 0; background-color: #666; width: 80px; height: 36px; color: #fff; margin: 0 5px; cursor: pointer}

#contents .search_box2 {margin-bottom: 30px; text-align: right}
#contents .search_box2 input, select {vertical-align: middle}
#contents .search_box2 .submit {border: 0; background-color: #005da4; width: 80px; height: 36px; color: #fff; margin: 0 5px; cursor: pointer}

/******* error *******/
div.error{padding:40px;width:400px;text-align:center;margin:80px auto 30px;background:#f2f2f2;border-radius:10px;-webkit-border-radius:10px;box-shadow:0 3px 5px #aaa;-webkit-box-shadow:0 3px 5px #aaa;}
div.error h2{font:bold 25px arial;color:#000;text-align:center;} 
div.error h2 img{width:25px;margin-top:-2px}
div.error p{text-align:center;font-size:12px;padding:20px 0}
div.error button{width:150px;height:35px;color:#fff;background:#2faefe;border:0;font:bold 14px arial;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;}

.con_tab {width: 100%; margin-bottom: 50px}
.con_tab:after {clear: both; content: ""; display: block}
.con_tab li {float: left; width: 281px; text-align: center; border: 1px solid #ddd; margin: 0 0 -1px -1px}
.con_tab li.on {background-color: #005da4}
.con_tab li.on a {color: #fff}
.con_tab li a {display: block; padding: 20px 0}
.con_tab02 {width: 100%; margin-bottom: 50px}
.con_tab02:after {clear: both; content: ""; display: block}
.con_tab02 li {float: left; width: 320px; text-align: center; border: 1px solid #ddd; margin: 0 0 -1px -1px}
.con_tab02 li.on {background-color: #005da4}
.con_tab02 li.on a {color: #fff}
.con_tab02 li a {display: block; padding: 20px 0}
.con_tab03 {width: 100%; margin-bottom: 50px}
.con_tab03:after {clear: both; content: ""; display: block}
.con_tab03 li {float: left; width: 50%; text-align: center; border: 1px solid #ddd; margin: 0 0 -1px -1px}
.con_tab03 li.on {background-color: #005da4}
.con_tab03 li.on a {color: #fff}
.con_tab03 li a {display: block; padding: 10px 0; font-size: 16px}
.tabCon {display: none}
.con_title {font-size: 30px; font-weight: bold; margin: 20px}
.con_sub_title {font-size: 24px; font-weight: bold; margin-bottom: 10px; margin-left: 20px;}
.con_sub_title .em {font-size: inherit; color: #005da4}
.con_sub_title .title_btn {float: right}
.con_sub_title .title_btn > a {margin-left: 10px}
.con_sub_title .title_btn > a img {margin-left: 5px}

.tbl_ellipsis {width: 100%; table-layout: fixed;}
.tbl_ellipsis tbody td {text-overflow:ellipsis; overflow:hidden; white-space: nowrap;}

.fcr {color: red}
.fc_gray {color: #a9a9a9;}

/* .address_list{margin-top: 13px;} */
.address_list li{float: left; font-size: 14px; color: #444; letter-spacing: -0.02em;}
.address_list li + li{margin-left: 11px;}
.address_list li button{display: inline-block; width: 19px; height: 19px; margin-left: 9px; background: url(/images/sub/delete.png) no-repeat; text-indent: -9999px; vertical-align: middle;}