@charset 'utf-8';

/*정렬*/
[class^=flex] {
    display:flex;
    align-items:center;
}
.flexStart {
    justify-content:flex-start;
}
.flexBetween {
    justify-content:space-between;
}
.flexCenter {
    justify-content:center;
}
.flexEnd {
    justify-content:flex-end;
}

/*button*/
button {
    cursor:pointer;
}
.btnGuide {
    position:relative;
    width:40px;
    height:40px;
    background:#ececec;
    border-radius:50%;
    transition:all .3s linear;
}
.btnGuide:before {
    content:"?";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color:#464646;
    font-size:22px;
    font-weight:bold;
}
.btnGuide:hover {
    background:#464646;
}
.btnGuide:hover:before {
    color:#fff;
}
/*table*/
.listTable {
    width:100%;
    background:#fff;
    table-layout:fixed;
}
.listTable thead th {
    background:#EBF3FD;
    color:#074D94;
    font-weight:500;
    padding:0.75rem 0.5rem;
}
.listTable thead th:first-child {
    border-right:1px dashed #ccc;
}
.listTable tbody tr {
    border-bottom:1px solid #ccc;
}
.listTable tbody th {
    border-right:1px dashed #ccc;
    font-weight:500;
}
.listTable tbody td {
    padding:0.75rem 0.5rem;
    font-weight:400;
    text-align:center;
}

/*input, select*/
.contWrap input[type=text] {
    height:40px;
    background:#fff;
    font-size:16px;
    color:#464646;
    padding:0 0.5rem;
    height:40px;
    border:1px solid #C4C8CE;
    border-radius:5px;
}
.contWrap select {
    appearance:none;
    background:url(../images/iconDownArrow.svg) no-repeat 95% center / 9px, #fff;
    width:100%;
    font-size:16px;
    color:#464646;
    padding:0 0.5rem;
    height:40px;
    border:1px solid #C4C8CE;
    border-radius:5px;
}

/*datepicker*/
.ui-datepicker {
    max-width:280px;
    border:1px solid #ececec;
    box-shadow:10px 10px 40px rgba(0, 0, 0, 0.1);
}
.ui-datepicker .ui-datepicker-prev span:before {
    content:"<";
    position:absolute;
    top:0;
    left:0;
    font-size:20px;
    color:#464646;
    text-indent:0;
    transform:scaleX(.7);
}
.ui-datepicker .ui-datepicker-next span:after {
    content:">";
    position:absolute;
    top:0;
    left:0;
    font-size:20px;
    color:#464646;
    text-indent:0;
    transform:scaleX(.7);
}


/*팝업*/
.dim {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.3);
    backdrop-filter:blur(4px);
    z-index:4;
    display:none;
}
.popWrap {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    max-width:1000px;
    width:100%;
    box-shadow:0 0 15px 0 rgba(0, 0, 0, .15);
    z-index:5;
    display:none;
}
.popWrap .popHeader {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#0073E8;
    padding:16px 20px;
}
.popWrap .popHeader h3 {
    color:#fff;
    font-size:20px;
    font-weight:bold;
    margin:0 !important;
}
.popWrap .popHeader h3:after {
    display:none;
}
.popWrap .popHeader .btnCls {
    width:32px;
    height:32px;
    font-size:26px;
    color:rgb(255,255, 255, .8);
    line-height:32px;
    background:#11579e;
    border-radius:50%;
}
.popWrap .popBody {
    background:#fff;
    padding:2rem 1.5rem;
}

/*폴리곤 지도*/
.polygon {
    position:relative;
}
.polygon:before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    background:url(../images/bgMap.svg) no-repeat center center / contain;
    transform:translate(-50%, -50%);
    z-index:-1;
}
.polygonMap .sigun {
    transition:all .15s linear;
    outline:0;
    cursor:pointer;
}
.polygonMap path {
    outline:0;
}
.polygonMap .sigun:hover {
    fill:#f2f3f5;
}
.polygonMap .sigun.active {
    fill:#ddeeff;
}
.polygonMap .sigun.taean {
    transition:all .15s linear;
}
.polygonMap .taean:hover ~ .taean {
    fill:#f2f3f5;
    transition:all .15s linear;
}
.polygonMap .taean.active  ~ .taean{
    fill:#ddeeff;
    transition:all .15s linear;
}

/*공통*/
a {
    transform:rotate(-0.03deg);
}
.contWrap {
    max-width:1400px;
    width:100%;
    margin:2rem auto;
    padding-bottom:2rem;
}
.populTab {
    display:flex;
    align-items:center;
    border:1px solid #91B1DF;
}
.populTab > li {
    position:relative;
    width:20%;
    height:55px;
    border-left:1px solid #91B1DF;
}
.populTab > li:first-child {
    border-left:none;
}
.populTab > li a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    background:#F2F7FB;
    color:#464646;
    text-align:center;
    line-height:55px;
}
.populTab > li.active a {
    color:#fff;
    background:#0073E8;
}
.contHeader {
    margin:3.5rem 0 2.5rem 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #C4C8CE;
}
.contHeader .contTab {
    width:420px;
    display:flex;
    align-items:center;
    border-top:1px solid #C4C8CE;
    border-left:1px solid #C4C8CE;
}
.contHeader .contTab > li {
    position:relative;
    width:210px;
    height:65px;
}
.contHeader .contTab > li.active:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#0073E8;
    z-index:2;
}
.contHeader .contTab > li.active:after {
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:5px;
    background:#fff;
    z-index:2;
}
.contHeader .contTab > li a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    background:#F2F7FB;
    font-size:18px;
    color:#98A3B3;
    text-align:center;
    line-height:72px;
    border-right:1px solid #C4C8CE;
}
.contHeader .contTab > li.active a {
    background:#fff;
    color:#0073E8;
}
.contHeader .selectBox {
    display:flex;
}
.contHeader .selectBox > select {
    width:150px;
    margin:0 0.15rem;
}
.contHeader .selectBox .btnGuide {
    margin-left:0.5rem;
}
.sbjtBox {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.sbjtBox > .sbjt {
    position:relative;
    font-size:24px;
    margin-bottom:0.5rem;
    padding-left:2.5rem;
}
.sbjtBox > .sbjt:before {
    content:"";
    position:absolute;
    top:0;
    left:-0.35rem;
    width:26px;
    height:26px;
    background:rgba(0, 115, 232, .85);
    border-radius:0 18px;
}
.sbjtBox > .sbjt:after {
    content:"";
    position:absolute;
    top:0;
    left:0.5rem;
    width:26px;
    height:26px;
    background:rgba(96, 191, 53, .85);
    margin:0;
    border-radius:18px 0;
    z-index:-1;
}
.one:not(:first-of-type) {
    margin:2.75rem 0;
}
.half:not(:first-of-type) {
    margin:2.75rem 0;
}
.half {
    display:flex;
    justify-content:space-between;
}
.half > div[class$=t] {
    width:48%;
}
.chartBox {
    width:100%;
    min-height:400px;
    background:#FBFCFF;
    padding:1.5rem;
    border:1px solid #C9D0D9;
    border-radius:0 30px;
}
.chartBox .tableBox {
    max-height:38vh;
    overflow:auto;
    border-top:2px solid #0073E8;
}
.chartBox .listTable thead th {
    position:sticky;
    top:0;
    z-index:2;
}
.chartBox .listTable th:first-child {
    width:25%;
}
.polygon + .right .chartBox {
    min-height:500px;
}
.guidePop .listTable th:first-child {
    width:20%;
}
.guidePop .listTable td {
    text-align:left;
}
/*sub*/
.contBox .contBody > .half {
	position:relative;
	padding-top:5rem;
}
.contBox .contBody > .half p.populDesc {
	position:absolute;
	top:-1rem;
	right:0;
	width:50%;
	font-size:14px;
	color:#464646;
	text-align:right;
}
.contBox.popul07 .contTab {
    width:210.1px;
}
.contBox.popul08 .contTab {
    width:210.1px;
}
.contBox.popul08 .selectBox {
    align-items:center;
}
.contBox.popul08 .selectBox input[type=text] {
    width:150.2px;
    margin:0 0.25rem;
    padding-right:1.75rem;
    background-image:url(../images/iconDate.svg);
    background-repeat:no-repeat;
    background-size:20px;
    background-position:96% center;
}
.contBox.popul08 .selectBox input[type=text]::placeholder {
    font-family:'GmarketSans', sans-serif;
    font-size:12px;
}
.contBox.popul08 .half:first-of-type .chartBox {
    background:transparent;
    border:none;
}

/*올담 충돌 수정*/
.basic_tab li a {
	height:auto !important;
}
@media all and (min-width:1921px) {
    .chartBox .tableBox {
        max-height:34vh;
    }
}