/* 메인 컨텐츠 */
.main-contents {
    height: auto;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.5px;
}
.main-section {
    background: #f3faf5;
}
.main-wrap {
    margin-bottom: 30px;
}

.top-title {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 10px;
}
.top-title .txt {
    font-size: 16px;
    color:#000;
    margin-right: 20px;
    position: relative;
    z-index: 10;
}
.top-title .txt:after {
    content: "";
    position: absolute;
    top:13px;
    left:-5px;
    right: -5px;
    bottom: 0;
    background: #fffa97;
    z-index: -1;
}
.top-title .txt b {
    color: #4bb469;
}

.selectBox2 * { box-sizing: border-box; }
.selectBox2 {
    position: relative;
    width: 170px;
    padding:15px 20px 15px 20px;
    border:1px solid #4bb469;
    border-radius: 3px;
    background: url('../img/se-arrow.png') no-repeat 90% 50%/auto;
    cursor: pointer;
    max-height: 50px;
}

.selectBox2 .label {
    align-items: center;
    width: 130px;
    height: inherit;
    border: 0 none;
    outline: 0 none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    color:#4bb469;
    font-family: 'Noto Sans KR', sans-serif;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    position: relative;
    top: -4px;
}

.selectBox2 .optionList {
    position: absolute; 
    top: 49px;
    right: 0px;
    width: 200px;
    color: #000;
    list-style-type: none;
    overflow-Y: scroll;
    max-height: 200px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Noto Sans KR', sans-serif;
    z-index: 99;
    background: #fff;
    border:1px solid #e1e1e1;
    display: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.selectBox2.active .optionList {
    max-height: 400px;
    display: block;
}

.selectBox2 .optionItem {
    padding: 7px 15px 5px;
    transition: .1s;
}

.selectBox2 .optionItem:hover {
    background: #bcbcbc;
}

.selectBox2 .optionItem:last-child {
    border-bottom: 0 none;
}


.selectBox2 .optionList::-webkit-scrollbar-track {background: transparent; }

.selectBox2 .optionList::-webkit-scrollbar {
    width: 6px;
}

.selectBox2 .optionList::-webkit-scrollbar-track {
    background-color: #f4f4f4;
}

.selectBox2 .optionList::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #b1b1b1;
}

.selectBox2 .optionList::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}



/* 지도 부분 */
.contents-wrap {
    display: flex;
}


/* 옵션 설명 */
.option-wrap {
    border-top:1px solid #e1e1e1;
    padding-top:30px;
}
.option-wrap .txt2 {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}
.txt2 .op01, .txt2 .op02, .txt2 .op03, .txt2 .op04 {
    margin-right: 10px;
}
.op01, .op02, .op03, .op04 {
    font-size: 12px;
    font-family: "돋움", Dotum, "돋움체", DotumChe, sans-serif;
    padding:5px 3px;
    color:#fff;
    border-radius: 2px;
} 
.op01 {
    background: #4bb469;
}
.op02 {
    background: #5e7ef0;
}
.op03 {
    background: #f6892a;
}
.op04 {
    background: #ff1212;
}

.contents-wrap {
    padding:20px;
}
.map-wrap{
    width:750px;
}
.map-wrap .img{
    background: url(../img/map-img.png) 50% 20px no-repeat;
    width:100%;
    height:725px;
}
.table-wrap2 {
    position: relative;
}
.table-wrap2 table {
    width:282px;
    border-top:1px solid #000;
    text-align: center;
}
.table-wrap2 table th {
    background: #f6f6f6;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
}
.table-wrap2 table td{
    border-top:1px solid #e1e1e1;
    border-bottom:1px solid #e1e1e1;
    padding: 10px;
}
.table-wrap2 table td:first-child {
    border-right: 1px solid #e1e1e1;
}
.table-wrap2 table:last-child td {
    border-bottom:none;
}
.g-name {
    width:100px;
    font-size: 14px;
}
.g-name2 {
    width:176px;
}
.thead {
    display: table; /* to take the same width as tr */
    width: 100%;
  }
  
  .tbody {
    display: block; /* to enable vertical scrolling */
    height: 640px;
    overflow-y: scroll;
    /* keeps the scrollbar even if it doesn't need it; display purpose */
    border-top: none;
    border-bottom: 1px solid #e1e1e1;
  }
  
  .tbody::-webkit-scrollbar {
    width: 6px;
  }
  
  .tbody::-webkit-scrollbar-track {
    background-color: #f4f4f4;
  }
  
  .tbody::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #b1b1b1;
  }
  
  .tbody::-webkit-scrollbar-button {
    width: 0;
    height: 0;
  }


.table-first {
    position: absolute;
    top:0;
    left:0;
    background: #fff;
    z-index: 10;
    display: block;
    width:282px;
    height: 685px;
    opacity: 0.8;
}

.table-first p {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-top: 280px;
}

  /* 지도 이미지 */
  article .map_contants svg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
  article .map_contants {
    position: relative;
    box-sizing: border-box;
    width: 838px;
    height: 735px;
    padding: 0;
    opacity: 1;
}
  article .map_contants svg {
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
    top:20px;
}
article .local-wrap {
    position: absolute;
    transform: translateX(10%);
}
/* 지도 색상 */
  article .local-wrap path.local-map {
    fill: #e3f3e8;
    stroke: #FFF;
    stroke-width: 3px;
    stroke-linejoin:round;
}


/* 지역 이름 */
article .name-wrap {
    position: absolute;
    top:0;
    left: 0;
}
.local-wrap .name-wrap text {
    font-size: 18px;
    fill: #666666;
    font-weight: 500;
}
.local-wrap circle {
    r: 4px;fill: #666;
}
.local-wrap line {
    stroke-width:1px;
    stroke: #666
}
/* article .local-wrap:hover text {
    fill:#4bb469;
}
article .local-wrap:hover circle {
    fill: #4bb469
}
article .local-wrap:hover line {
    stroke: #4bb469
} */

/* 지역 이름 위치 */
.local-wrap[local=L9] .name-wrap {
    transform: translate(292px, 147px); /* 강원도 */
}

.local-wrap[local=L7] .name-wrap {
    transform: translate(35px, 111px); /* 인천 */
}
.local-wrap[local=L7] .name-wrap circle {
    transform: translate(70px, 59px);
}
.local-wrap[local=L7] .name-wrap line {
    transform: translate(-3px, 7px);
}
.local-wrap[local=L8] .name-wrap {
    transform: translate(192px, 183px); /* 경기도 */ 
}
.local-wrap[local=L6] .name-wrap {
    transform: translate(144px, 45px); /* 서울 */
}
.local-wrap[local=L6] .name-wrap circle {
    transform: translate(3px, 122px);
}
.local-wrap[local=L6] .name-wrap line {
    transform: translate(-20px, -10px);
}
.local-wrap[local=L16] .name-wrap {
    transform: translate(115px, 320px); /* 충남 */
}
.local-wrap[local=L19] .name-wrap {
    transform: translate(45px, 230px); /* 세종 */
}
.local-wrap[local=L19] .name-wrap circle {
    transform: translate(119px, 81px);
}
.local-wrap[local=L19] .name-wrap line {
    transform: translate(-31px, 11px);
}
.local-wrap[local=L2] .name-wrap {
    transform: translate(16px,364px); /* 대전 */
}
.local-wrap[local=L2] .name-wrap circle {
    transform: translate(165px, -2px);
}
.local-wrap[local=L2] .name-wrap line {
    transform: translate(-25px, -52px);
}
.local-wrap[local=L11] .name-wrap {
    transform: translate(350px, 362px); /* 경북 */
}
.local-wrap[local=L3] .name-wrap {
    transform: translate(236px, 284px); /* 충북 */
}

.local-wrap[local=L10] .name-wrap {
    transform: translate(436px, 400px); /* 대구 */
}
.local-wrap[local=L10] .name-wrap circle {
    transform: translate(-109px, 52px);
}
.local-wrap[local=L10] .name-wrap line {
    transform: translate(2px, -1px);
}
.local-wrap[local=L4] .name-wrap {
    transform: translate(145px, 445px); /* 전북 */
}

.local-wrap[local=L17] .name-wrap {
    transform: translate(119px, 571px); /* 전남 */
}

.local-wrap[local=L5] .name-wrap {
    transform: translate(6px, 543px); /* 광주 */
}
.local-wrap[local=L5] .name-wrap circle {
    transform: translate(88px, -2px);
}
.local-wrap[local=L5] .name-wrap line {
    transform: translate(-25px, -52px);
}
.local-wrap[local=L12] .name-wrap {
    transform: translate(280px, 517px); /* 경남 */
}
.local-wrap[local=L13] .name-wrap {
    transform: translate(453px, 483px); /* 울산 */
}
.local-wrap[local=L13] .name-wrap circle {
    transform: translate(-43px, 19px);
}
.local-wrap[local=L13] .name-wrap line {
    transform: translate(-92px, -31px);
}
.local-wrap[local=L14] .name-wrap {
    transform: translate(427px, 534px); /* 부산 */
}
.local-wrap[local=L14] .name-wrap circle {
    transform: translate(-43px, 19px);
}
.local-wrap[local=L14] .name-wrap line {
    transform: translate(-92px, -31px);
}
.local-wrap[local=L15] .name-wrap {
    transform: translate(416px, 679px); /* 제주 */
}


/* 지역 상태 */

.local-wrap[local=L9] .op-path {
    transform: translate(-9px, 10px);
}
.local-wrap[local=L9] .op-text {
    transform: translate(-2px, 27px);
}
.local-wrap[local=L7] .op-path {
    transform: translate(-40px, 10px);
}
.local-wrap[local=L7] .op-text {
    transform: translate(-33px, 27px);
}
.local-wrap[local=L8] .op-path {
    transform: translate(-29px, 10px);
}
.local-wrap[local=L8] .op-text {
    transform: translate(-22px, 27px);
}
.local-wrap[local=L6] .op-path {
    transform: translate(-29px, 0px);
}
.local-wrap[local=L6] .op-text {
    transform: translate(-22px, 17px);
}
.local-wrap[local=L16] .op-path {
    transform: translate(-29px, 10px);
}
.local-wrap[local=L16] .op-text {
    transform: translate(-22px, 27px);
}
.local-wrap[local=L19] .op-path {
    transform: translate(-39px, 10px);
}
.local-wrap[local=L19] .op-text {
    transform: translate(-32px, 27px);
}
.local-wrap[local=L2] .op-path {
    transform: translate(-30px, 10px);
}
.local-wrap[local=L2] .op-text {
    transform: translate(-23px, 27px);
}
.local-wrap[local=L11] .op-path {
    transform: translate(-29px, 10px);
}
.local-wrap[local=L11] .op-text {
    transform: translate(-22px, 27px);
}
.local-wrap[local=L3] .op-path {
    transform: translate(-39px, 4px);
}
.local-wrap[local=L3] .op-text {
    transform: translate(-32px, 21px);
}
.local-wrap[local=L10] .op-path {
    transform: translate(10px, 10px);
}
.local-wrap[local=L10] .op-text {
    transform: translate(17px, 27px);
}
.local-wrap[local=L4] .op-path {
    transform: translate(-30px, 10px);
}
.local-wrap[local=L4] .op-text {
    transform: translate(-23px, 27px);
}

.local-wrap[local=L17] .op-path {
    transform: translate(-30px, 10px);
}
.local-wrap[local=L17] .op-text {
    transform: translate(-23px, 27px);
}

.local-wrap[local=L5] .op-path {
    transform: translate(-30px, 10px);
}
.local-wrap[local=L5] .op-text {
    transform: translate(-23px, 27px);
}
.local-wrap[local=L12] .op-path {
    transform: translate(-30px, 10px);
}
.local-wrap[local=L12] .op-text {
    transform: translate(-23px, 27px);
}
.local-wrap[local=L13] .op-path {
    transform: translate(10px, 30px);
}
.local-wrap[local=L13] .op-text {
    transform: translate(17px, 47px);
}
.local-wrap[local=L14] .op-path {
    transform: translate(10px, 30px);
}
.local-wrap[local=L14] .op-text {
    transform: translate(17px, 47px);
}
.local-wrap[local=L15] .op-path {
    transform: translate(-30px, 10px);
}
.local-wrap[local=L15] .op-text {
    transform: translate(-23px, 27px);
}






/* 면허 선택 지도 */

.hidden {
    display: none;
}
.show {
    display: block;
}
article .map_contants02 svg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:20px;
}
  article .map_contants02 {
    position: relative;
    box-sizing: border-box;
    width: 838px;
    height: 735px;
    padding: 0;
    opacity: 1;
}
  article .map_contants02 svg {
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
}
article .map_contants02 .local-wrap:hover path.local-map {
    opacity: 0.7;
}
article .map_contants02 .local-wrap {
    cursor: pointer;
}


/* option01 독점가능 */

.local-wrap.local-op01 path.local-map {
    fill: #e2fcea;
}
.g-op01.op-path {
    fill:#4bb469;
}
.g-op01.op-text{
    font-size: 12px !important;
    font-family: "돋움", Dotum, "돋움체", DotumChe, sans-serif;
    fill:#fff !important;
}
article .local-wrap.local-op01:hover text.name-text {
    fill:#4bb469 !important;
}
article .local-wrap.local-op01:hover circle {
    fill:#4bb469 !important;
}
article .local-wrap.local-op01:hover line {
    stroke:#4bb469 !important;
}


/* option02 선점가능 */

.local-wrap.local-op02 path.local-map {
    fill: #e5ebff;
}
.g-op02.op-path {
    fill:#5e7ef0;
}
.g-op02.op-text{
    font-size: 12px !important;
    font-family: "돋움", Dotum, "돋움체", DotumChe, sans-serif;
    fill:#fff !important;
}
article .local-wrap.local-op02:hover text.name-text {
    fill:#5e7ef0 !important;
}
article .local-wrap.local-op02:hover circle {
    fill:#5e7ef0 !important;
}
article .local-wrap.local-op02:hover line {
    stroke:#5e7ef0 !important;
}

/* option03 가입가능 */

.local-wrap.local-op03 path.local-map {
    fill: #ffeedf;
}
.g-op03.op-path {
    fill:#f6892a;
}
.g-op03.op-text{
    font-size: 12px !important;
    font-family: "돋움", Dotum, "돋움체", DotumChe, sans-serif;
    fill:#fff !important;
}

article .local-wrap.local-op03:hover text.name-text {
    fill:#f6892a !important;
}
article .local-wrap.local-op03:hover circle {
    fill:#f6892a !important;
}
article .local-wrap.local-op03:hover line {
    stroke:#f6892a !important;
}

/* option04 가입불가 */

.local-wrap.local-op04 path.local-map {
    fill: #ffe3e3;
}
.g-op04.op-path {
    fill:#ff1212;
}
.g-op04.op-text{
    font-size: 12px !important;
    font-family: "돋움", Dotum, "돋움체", DotumChe, sans-serif;
    fill:#fff !important;
}

article .local-wrap.local-op04:hover text.name-text {
    fill:#ff1212 !important;
}
article .local-wrap.local-op04:hover circle {
    fill:#ff1212 !important;
}
article .local-wrap.local-op04:hover line {
    stroke:#ff1212 !important;
}




/* 관내선택 */

#map03 .local-wrap path.local-map {
    fill:#f4f4f4;
}
#map03 .local-wrap.local-op01 path.local-map {
    fill: #e2fcea !important;
}
#map03 .local-wrap.local-op02 path.local-map {
    fill: #e5ebff !important;
}
#map03 .local-wrap.local-op03 path.local-map {
    fill: #ffeedf !important;
}
#map03 .local-wrap.local-op04 path.local-map {
    fill: #ffe3e3 !important;
}

article .map_contants03 .local-wrap:hover text {
    fill:#4bb469;
}
article .map_contants03 .local-wrap:hover circle {
    fill: #4bb469
}
article .map_contants03 .local-wrap:hover line {
    stroke: #4bb469
}

article .map_contants03 svg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:20px;
}
  article .map_contants03 {
    position: relative;
    box-sizing: border-box;
    width: 838px;
    height: 735px;
    padding: 0;
    opacity: 1;
}
  article .map_contants03 svg {
    position: absolute;
    left: 45%;
    transform: translateX(-50%);
}
article .map_contants03 .local-wrap:hover path.local-map {
    opacity: 0.7;
}
article .map_contants03 .local-wrap {
    cursor: pointer;
}