.map_box {position: relative; display: flex; width: 100%; height: 600px; background-color: #fff; margin-top: 20px;}
.map_box > .map {position: relative; width: 50%; height: 100%; background-image: url('./img/map_600.jpg'); background-size: cover;}
.map_box > .map > ul > li {position: absolute; width: 60px; height: 60px; background-color: #333; text-align: center; font-size: 16px; border-radius: 50%; line-height: 60px;}
.map_box > .map > ul > li:nth-child(1) {left: 200px; top: 130px;}
.map_box > .map > ul > li:nth-child(2) {left: 130px; top: 160px;}
.map_box > .map > ul > li:nth-child(3) {left: 220px; top: 370px;}
.map_box > .map > ul > li:nth-child(4) {left: 250px; top: 225px;}
.map_box > .map > ul > li:nth-child(5) {left: 330px; top: 310px;}
.map_box > .map > ul > li:nth-child(6) {left: 400px; top: 330px;}
.map_box > .map > ul > li:nth-child(7) {left: 390px; top: 400px;}
.map_box > .map > ul > li > a {color: #fff; display: block; width: 100%; height: 100%;}
.map_box > .search {position: relative; width: 50%; height: 100%; padding: 20px; box-sizing: border-box; font-size: 14px;}
.map_box > .search > p {border-bottom: 1px solid #ddd; margin: 20px 0px; padding-bottom: 10px;}
.map_box > .search > form > .form-group {display: flex; margin: 10px 0px;}
.map_box > .search > form > .form-group > label {width: 20%; align-self: center; margin-right: 10px;}
.map_box > .search > form > .form-group > select {border: 1px solid #ddd; padding: 5px 10px; outline: 0;}
.map_box > .search > form > .form-group > input[type="text"] {border: 1px solid #ddd; padding: 5px 10px; outline: 0;}
.map_box > .search > form > .form-group > input[type="submit"] {margin-left: 10px; border: 1px solid #333; background-color: #333; color: #fff; padding: 5px 10px;}

@media (max-width: 1024px) {
    .map_box {height: auto; flex-wrap: wrap;}
    .map_box > .map {width: 100%; height: 600px; background-position: center;}
    .map_box > .map > ul > li:nth-child(1) {left: 120px;}
    .map_box > .map > ul > li:nth-child(2) {left: 50px;}
    .map_box > .map > ul > li:nth-child(3) {left: 140px;}
    .map_box > .map > ul > li:nth-child(4) {left: 140px;}
    .map_box > .map > ul > li:nth-child(5) {left: 250px;}
    .map_box > .map > ul > li:nth-child(6) {left: 320px;}
    .map_box > .map > ul > li:nth-child(7) {left: 310px;}
    .map_box > .search {width: 100%;}

    #fboardlist {padding: 0px 20px;}
    #bo_list .tbl_head01 {overflow: auto;}
    #bo_list .tbl_head01 table {width: 600px;}
    #bo_list > div.map_box > div.search > form > div:nth-child(10) > label {margin-right: 5px;}
    .map_box > .search > form > .form-group > label {width: 20%;}
    .map_box > .search > form > .form-group > input[type="text"], .map_box > .search > form > .form-group > select {width: 60%;}
    .map_box > .search > form > .form-group > input[type="submit"] {width: 20%;}
}