.main-container {
    position: relative;
    width: 100%;
    height: calc(100% - 90px);
    padding-top: 120px;
}
.fixed-top{
    width: 100%;
    height: 121px;
}
.sub-container {
    position: relative;
    width: 100%;
    min-height: calc(100% - 90px);
    padding-top: 120px;
}
.left-Area {
    position: absolute;
    z-index: 999;
    left: 0;
    top: 120px;
    bottom: 0;
    width: 350px;
}
.left-Tab {
    position: absolute;
    width: 60px;
    height: 100%;
    background: #fff;
    border-right: solid 1px #ccc;
}
.left-Tab button {
    width: 60px;
    height: 60px;
    font-size: 12px;
}
.left-Tab button.on {
    color: #fff;
    background: #EF3E6C;
}
.left-Tab button::before {
    content: "";
    display: block;
    height: 24px;
}


.left-Tab button.outbreak::before {
    background: url(/common/images/icon_outbreak.png) center center no-repeat;
}
.left-Tab button.outbreak.on::before {
    background: url(/common/images/icon_outbreak_on.png) center center no-repeat;
}
.left-Tab button.cctv::before {
    background: url(/common/images/icon_cctv.png) center center no-repeat;
}
.left-Tab button.cctv.on::before {
    background: url(/common/images/icon_cctv_on.png) center center no-repeat;
}
.left-Tab button.vms::before {
    background: url(/common/images/icon_vms.png) center center no-repeat;
}
.left-Tab button.vms.on::before {
    background: url(/common/images/icon_vms_on.png) center center no-repeat;
}
.left-list {
    position: absolute;
    left: 60px;
    width: 290px;
    height: 100%;
}
.list-button {
    width: 100%;
    height: 60px;
    background: #333;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
a:focus-visible {
    outline: 3px solid #009EA5;
}
a:focus:not(:focus-visible){
    outline: none;
}
button:focus-visible {
    outline: 3px solid #009EA5;
}
button:focus:not(:focus-visible) {
    outline: none;
}
button.sitemap:focus-visible {
    outline: 3px solid #fff;
}
button.sitemap:focus:not(:focus-visible) {
    outline: none;
}
.list-button::after {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../images/arrow_dropdown.png);
}
.sub-Tab + .left-list {
    left: 0;
    width: 350px;
    height: calc(100% - 50px);
}
.sub-Tab {
    display: flex;
    background: #fff;
    border-right: solid 1px #ccc;
}
.sub-Tab li {
    flex: 1;
    text-align: center;
    border-bottom: solid 1px #ccc;
}
.sub-Tab li>a {
    display: block;
    height: 47px;
    line-height: 45px;
}
.sub-Tab li.on {
    border-bottom: solid 3px #EF3E6C;
}
.sub-Tab li.on>a {
    color: #EF3E6C;
}
.road-list {
    display: block;
    height: 100%;
}
.road-list ul {
    height: calc(100% - 60px);
    background: #fff;
    border-right: solid 1px #ccc;
    overflow-y: auto;
}
.road-list li {
    border-bottom: solid 1px #ddd;
    background: url(../images/icon_next.png) right 10px center no-repeat;
}
.road-list a {
    display: block;
    padding: 15px;
}
.traffic-list-select {
    display: none;
}
.mapArea {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 120px;
    left: 0;
}
.mapContent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mapControls {
    position: absolute;
    z-index: 10;
    top: 10px;
}
.mapControls1 {
    right:90px;
}
.mapControls2 {
    right:15px;
}
.mapControls ul {
    margin-bottom: 20px;
}
.mapControls li {width: 60px; height:30px; line-height:30px; text-align:center; background: #fff; border:1px solid #ccc; margin-top: -1px; margin-left: -1px;}
.mapControls li a {display:block; color:#555; font-size:12px;}
.mapControls li:first-child {margin-top:0;}
.mapControls li.select {background-color:#000;}
.mapControls li.select a {color:#fff;}
.mapControls1 ul {
    display: flex;
}
.mapContent.statistics {
    left: 350px;
    top: 0;
}
.mapArea.traffic {
    width: calc(100% - 350px);
    height: calc(100% - 50px);
    margin-left: 350px;
    position: relative;
    margin-top : 50px;
    top: 0;
}
.atrd-map{
    width: calc(100%  - 350px);
    margin-left: 350px;
    height: calc(100% - 50px);
    margin-top : 50px;
}
.mapContent.traffic{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
}
.mapContent.traffic.mapRoadList{
    width: 100%;
    height: calc(100% - 50px);
}
.searchBox{
    width: calc(100% - 350px);
    height: 50px;

}
.searchBox {
    position: absolute;
    z-index: 20;
    left: 350px;
    top: 120px;
    right: 0;
    background: #f5f5f5;
    border-bottom: solid 1px #ddd;
}
.searchBox-cont {
    height: 50px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.searchBox-cont>div {
    font-size: 16px;
    margin-right: 50px;
}
.searchBox-cont>div::before {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    height: 24px;
    border-radius: 12px;
    width: 50px;
    text-align: center;
    margin-right: 10px;
}
.upload::before {
    content: "상행";
    background: #1C69FF;
}
.dnload::before {
    content: "하행";
    background: #EF3E6C;
}
.stmaptab {
    position: absolute;
    top: 9px;
    right: 15px;
    display: flex;
}
.stmaptab a {
    display: block;
    width: 80px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border:solid 1px #ccc;
    margin-left: -1px;
}
.stmaptab a.on {
    background: #009EA5;
    color: #fff;
}

#gtx-trans{display: none}
@media (max-width: 1250px) {
    .atrd-map{
        margin-top: 80px;
        height: calc(100% - 80px);
    }
    .searchBox{height: 80px !important;}
    .mapArea.traffic{margin-top: 80px;}
    .searchBox-cont{
        height: 80px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
    }
    .stmaptab{
        flex-direction: column;
        top: 5px;
    }
    .upload{
        margin-bottom: 10px;
    }
    .stmaptab > a:nth-child(1) {
        margin-bottom: 5px;
    }
    .mapContent.traffic.mapRoadList{
        height: calc(100% - 80px);
    }
    .road_info-box.sub-road_info{
        margin-top: 80px !important;
    }
}
@media (max-width: 992px) {

    .fixed-top{height: 70px;}
    .left-Area {
        top: 75px;
        border: 0;
    }
    .mapArea {
        top: 75px;
    }
    .searchBox {top: 75px;}
    .searchBox-cont {
        height: 80px;
        padding: 10px;
        display: block;
    }
    .searchBox-cont>div.upload {
        margin-bottom: 10px;
    }
    .stmaptab {
        top: 10px;
        right: 15px;
        display: block;
    }
    .stmaptab a {
        width: 60px;
        height: 30px;
        line-height: 28px;
        font-size: 12px;
        margin-left: 0;
        margin-top: -1px;
    }
}
@media (max-width: 768px) {
    .atrd-map{
        margin-top: 0;
        margin-left: 0;
        width: 100%;
        height: 100%;
    }
    .fixed-top{height: 65px;}
    .main-container {height: 100%;}
    .left-Area {
        top: 65px;
        bottom: unset;
        width: 100%;
    }
    .left-Tab {
        width: 100%;
        height: 50px;
        left: 0;
        display: flex;
    }
    .left-Tab button {
        flex: 1;
        line-height: 48px;
        height: 50px;
        font-size: 14px;
    }
    .left-Tab button::before {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        margin-right: 5px;
    }
    .sub-Tab {
        border: 0;
    }
    .left-list {
        width: 100%;
        height: 50px;
        top: 50px;
        left: 0;
    }
    .sub-Tab + .left-list {
        width: 100%;
        height: 50px;
    }
    .list-button {
        height: 50px;
    }
    .road-list {
        display: none;
    }
    .traffic-list-select {
        display: block;
        background: #262626;
        height: 50px;
    }
    .traffic-list-select select {
        width: 100%;
        height: 50px;
        color: #fff;
        outline: 0;
        background: #000 url(../images/arrow_dropdown.png) right 10px center no-repeat;
        border: 0;
        padding: 0 15px;
    }
    .mapArea {
        top: 165px;
        left: 0;
    }
    .mapArea.atrd{
        top: 242px;
    }
    .mapContent.statistics {
        left: 0;
        top: 230px;
    }
    .mapContent.traffic {
        left: 0;
    }
    .mapControls {
        top: unset;
        bottom: 0;
    }
    .searchBox {
        left: 0;
        top: 165px;
        width: 100%;
    }
    .searchBox-cont>div::before {
        margin-right: 5px;
    }
    .searchBox-cont>div {
        font-size: 14px;
    }
    .road_info-box.sub-road_info {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    .mapContent.traffic.mapRoadList{
        height: 100%;
    }
}

/* 도로상태 팝업 */
#mapTrafficPop{
    position:absolute; top:280px; left:50%; width:300px; transform: translateX(-50%); /*height:145px;*/background-color:#fff;
    -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
    box-shadow : 5px 5px 10px  rgba(0, 0, 0, .3), -1px 1px 10px  rgba(0, 0, 0, .1), 1px -1px 10px  rgba(0, 0, 0, .1), -1px -1px 5px  rgba(0, 0, 0, .1);
}
.traffic-pop-inner{padding:10px;}
.map-area-tit{overflow:hidden; border-bottom:1px solid #0060af; color:#555; font-size:14px; font-weight:400}
.map-area-tit.traffic-style1{border-bottom:1px solid #0ebe39}
.map-area-tit.traffic-style2{border-bottom:1px solid #fea100}
.map-area-tit.traffic-style3{border-bottom:1px solid #f90000}
.map-area-tit span{float: right; display:block; width:60px; height:25px; line-height:23px; text-align:center; color:#fff; font-weight:400; font-size:12px; *display:inline;*zoom:1;}
.map-area-tit span.time {color: #999; width: auto; line-height: 1;}
.road-to-from-txt{line-height:26px; color:#555; font-size:14px; padding:5px 5px 10px 5px; }
.road-traffic-stats{text-align:right;}
.road-traffic-stats dt,.road-traffic-stats dd{display:inline-block; font-size:14px; *display:inline;*zoom:1;}
.road-traffic-stats dt{padding-left:10px;}
.road-traffic-stats dd strong{font-weight:500}
/* CCTV 팝업 */
.cctv-inner-con{width:100%; height:185px; margin-top:10px; -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px; background-color:#000; overflow:hidden;}



/* 소통정보 도로 목록 */
.traffic-road-list li{height:41px;  border-bottom:1px dashed #ccc; padding:8px 5%; overflow:hidden;}
.traffic-road-list li a{display:block; overflow:hidden;}
.traffic-road-list li .road_info{float:left; width:70%;}
.traffic-road-list li .road_info p{line-height:1.6em; }
.traffic-road-list li .road_info p strong{color:#EF3E6C; font-weight:400;}
.traffic-road-list li .road_info p .arrow-icon{margin:0 15px; }
.traffic-road-list li .road_info p .arrow-icon img{vertical-align:middle; margin-top:-2px}
.traffic-road-list li .road-traffic{float:right; width:22%; margin-left:8%; padding:12px 0;}
.traffic-road-list li .road-traffic span{
    display:block; width:60px; height:25px; color:#fff; text-align:center; background-color:#ccc; line-height:25px; margin:0px auto;
    -webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
.no-info-box{text-align:center; width:100%;}
.no-info-box p{color:#333; padding-top:17px; font-size:19px; }
.no-info-box p strong{color:#dd6161; font-size:19px; font-weight:400}

.road_info-box {padding: 30px;}
.road_info-box.sub-road_info{height: 100%;overflow-y: auto;margin-top: 50px; margin-left: 350px; position:relative;padding: 5px;}
.sub-road_info.road_info-box li{padding:0; height:auto; max-width:1200px; margin:0px auto; border-bottom:1px solid #ccc;}
.sub-road_info.road_info-box li:first-child{border-top:2px solid #009EA5}
.sub-road_info.road_info-box li a{padding:0 2%;}
.sub-road_info.road_info-box li a:hover{background-color:#eee;}
.sub-road_info.road_info-box li p{float:left; margin-right:5%; line-height:49px;}
.sub-road_info.road_info-box li .road-traffic{width:auto;}

.info-road-list {
    width: 100%;
    margin-top: 30px;
}
.info-road-list th {
    position: sticky;
    top: 0;
    background: #222;
    color: #fff;
    font-weight: 100;
    text-align: center;
    padding: 10px 0;
    border-right: solid 1px #fff;
}
.info-road-list td {
    text-align: center;
    padding: 10px 0;
    border-bottom: solid 1px #ddd;
    border-right: dashed 1px #ddd;
}
.info-road-list tbody {
    border-right: solid 1px #ddd;
    border-left: solid 1px #ddd;
}
.info-road-list th:last-child,
.info-road-list td:last-child {
    border-right: 0;
}
.traffic1{background-color:#0ebe39 !important;}/*소통원활*/
.traffic2{background-color:#fea100 !important;}/*서행지체*/
.traffic3{background-color:#f90000 !important;}/*정체*/
.traffic4{background-color:#000 !important; color:#ffe400 !important;}/*사고*/

@media (max-width: 768px) {
    .sub-road_info.road_info-box li p{line-height:36px;}
}

/* -------- 공지사항 -------- */
/* search form */
.board_search {text-align:right;margin:0 auto;height:50px}
.board_search * {vertical-align:middle}
.board_search select {border:1px solid #ddd; width:105px; padding:9px;max-height:37px;}
.board_search input[type="text"] {border:1px solid #ddd; width:180px; padding:10px;}
/* LIST */
.board-form {min-width:320px;font-size:14px;padding:0 0 55px 0}
.board-form .write-btn {position:absolute;bottom:95px;right:0;}
.board-form .write-btn input {border:none;background-color:#000;padding:10px;font-size:14px;color:#fff;text-align:center;width:80px;cursor:pointer;border-radius:5px;}
.board-form .write-btn input:hover {background-color:#00bbbe}
.board-form .board-head {width:100%;border-top: solid 2px #333;border-bottom: solid 1px #ccc;text-align: center; background: #f5f5f5;}
.board-form .board-head span {position:absolute;top:0;right:15px}
.board-form .board-head dl {position:relative;overflow:hidden; display: flex;}
.board-form .board-head dl dt {text-align:left;text-indent:15px}
.board-form .board-head dl dd {text-align:center; line-height: 50px; font-size: 14px;}

.board-list {clear:both;width:100%;text-align:center;color:#555;}
.board-list dl {position: relative; overflow:hidden;border-bottom:1px solid #ccc;cursor:pointer}
.board-list dl:hover {background-color:#f5f5f5}
.board-list dl dd {position: relative; float:left;text-align:center;height:50px;line-height:50px; white-space: nowrap;}
.board-list dl dd.board-title {text-align: left;}
.board-list span{font-size: 12px;}
.board-list span.red {display:inline-block;background-color:#e2946d;color:#fff;line-height:24px;padding:0 10px 0 10px;border-radius:4px}
.board-list span.blue {display:inline-block;background-color:#00bbbe;color:#fff;line-height:22px;padding:0 10px 0 10px;border-radius:4px; margin-right: 5px;}
.board-list img {vertical-align:middle}
.width15.board-file {
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-no, .board-count {width: 10%;}
.board-title {width: 45%;}
.board-writer {width: 10%;}
.board-day {width: 20%;}
.board-noti {width: 5%;}

/* paging */
.paging {width:100%;margin:20px auto 20px auto;text-align:center}
.paging p {
    display:inline-block;vertical-align: middle;width:30px;height:30px;line-height:22px;
    margin:0 10px 0 10px;border:1px solid #ccc;
    text-align:center;font-weight:600;font-size:19px;
}
.paging p a {display:block;color:#aaa;line-height:28px;}
.paging > a {display:inline-block;width:30px;height:30px;line-height:30px;}
.paging .active {border-bottom:2px solid #777;font-weight:600;font-size:15px}

/* view */
.board-view-head {width:100%;text-align:center;color:#000;font-size:18px;font-weight:700; border-top: solid 2px #333; border-bottom: solid 1px #ccc;padding: 15px; margin-top: 20px;}
.board-view-head p {line-height: 24px;}
.board-view {position:relative;padding:0; width: 100%; line-height:20px;border-bottom:1px solid #ddd}
.board-view .view-form {height:calc(100% - 20px); display:flex; aling-items:center; padding:10px;border-bottom:1px solid #ddd;text-align:right; background: #f5f5f5;}
/*.board-view p {display:inline-block}*/
.board-view .writer {display:inline-block;padding:0 25px 0 17px}
.board-view .visited {display:inline-block;padding:0 25px 0 22px}
.board-view .day {margin-left: auto;}
.view-form .download{
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
}
/*.board-view .day {display:inline-block;padding:0 25px 0 17px}*/
/*.board-view .download {position: absolute;}*/
.board-view .download a {width:calc(100% / 3 - 20px); overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color:#00bbbe; text-decoration:underline}
.board-view .download a:hover {color:#00bbbe;text-decoration:underline}
.board-view .reple {margin:15px auto 0;padding:15px;border-top:1px solid #ddd;background-color:#fff}
.board-view .reple dt {position:relative;font-weight:600;line-height:26px;padding-right:80px;}
.board-view .reple input {margin:10px auto 0;border:1px solid #ddd;padding:9px}
.board-view .reple textarea {margin:10px auto 0;border:1px solid #ddd;width:100%}
.board-view .reple .reple-btn {position:absolute;top:0;right:0;}
.board-view .reple .reple-btn input {border:none;padding:10px;color:#fff;background-color:#333}
.board-view .reple .edit-btn {position:absolute;top:-10px;right:0;}
.board-view .reple .edit-btn input {border:none;margin-left:3px;padding:5px;color:#fff;background-color:#ccc}
.board-view .content{padding:20px 2% 30px;}/* 공지사항 - view */
.prevnext {margin:15px 0 50px 0;font-size:14px; display: flex; justify-content:space-between; align-items: flex-start;}
.prevnext span {display: inline-block;}
.prevnext a {display: inline-block; border:1px solid #ccc;min-width:40px;padding:15px;font-weight:600;text-align:center;color:#777;background-color:#fff}
.prevnext a:hover {text-decoration:none; color:#00bbbe;border:1px solid #00bbbe}

@media (max-width: 768px) {
    .road_info-box {padding: 15px;}
    .board-noti {width: 15%;}
    .board-title {width: 85%;}
    .board-no,
    .board-writer,
    .board-day,
    .board-count {display: none;}
    .board-list .board-view {display: none;}
    .board-view .download {position: relative; flex-direction: column;}
    .board-view .download a {width: calc(100% - 15px);}
    /*.board-view .download a {padding: 0 0 10px 0;}*/
    .board-view .view-form {text-align:left;}
    .board-view .writer {display:inline-block;padding:10px 10px 0 0;}
    .board-view .visited {display:inline-block;padding:10px 10px 0 0;}
    .board-view .day {display:inline-block;}

    /* paging */
    .paging {margin:10px auto 10px auto;}
    .paging p {
        display:inline-block;vertical-align: middle;width:24px;height:24px;line-height:22px;
        margin:0 5px 0 5px;font-size:14px;}
    .paging p>a {line-height: 22px;}
    .paging > a {width:24px;height:24px;line-height:24px;}
    .paging .active {font-size:14px}
}
.sub-container {
    position: relative;
    width: 100%;
    padding-top: 120px;
    min-height: calc(100% - 90px);
}
.contents-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 1200px;
    padding: 50px 0;
}
.menu-history {
    background: #f5f5f5;
    height: 40px;
}
.menu-history ul {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.menu-history a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    background: url(../images/icon_next.png) no-repeat;
    background-size: 24px;
}
.menu-history a.home:before {
    background: url(../images/icon_home.png) center center no-repeat;
    background-size: 16px;
}
.menu-history a {
    line-height: 40px;
    color: #777;
}
.title-box {
    margin-bottom: 50px;
    text-align: center;
}
.h2-title {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 15px;
    font-weight: bold;
}
.h3-title {
    color: #000;
    font-size: 24px;
    margin-bottom: 10px;
}
.title-info {
    font-size: 20px;
    color: #777;
    text-align: center;
    font-weight: 700;
}
.title-info>span {color: #00bbbe;}
.location-map {
    width: 100%; height: 450px; border: solid 1px #ddd; margin-bottom: 30px;
}

.waybox{display: flex; width: 100%; overflow: hidden;}
.waybox dl{flex: 1; height:155px; border: 1px solid #dadada; padding:30px 20px; margin-right: 30px; float: left; text-align:center;}
.waybox dl:last-child{margin-right: 0;}
.waybox dt::before {
    content: "";
    display:inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    margin-bottom: 5px;
}
.waybox dl.way1 dt:before{background: url(../images/way1.png) center 0 no-repeat; background-size:42px;}
.waybox dl.way2 dt:before{background: url(../images/way2.png) center 0 no-repeat; background-size:42px;}
.waybox dl.way3 dt:before{background: url(../images/way3.png) center 0 no-repeat; background-size:42px;}
.waybox dt {font-size: 24px; margin-bottom: 10px;}
.waybox dd {color: #777; font-size: 16px; line-height: 1.4; letter-spacing: -1px;}

/* -------- 관련사이트 -------- */
.relate-list{display: flex; flex-wrap: wrap; border-top:1px solid #ddd; border-left: solid 1px #ddd;}
.relate-list li{width: 33.33%; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; text-align: center;}
.relate-list .relate-site-logo{display:inline-block;}
.relate-list .relate-site-logo img{height: 100%; margin:10px 0;}
.relate-list li>p {border-top:1px solid #ddd; height:48px; line-height:48px; text-align: center;}
.relate-list li>p>a{color:#00bbbe; font-size:16px }


/* -------- 사이트맵 -------- */
.offcanvas-top {height: 40vh;}
.offcanvas-header {border-bottom: solid 1px #ccc;}
.off-title {font-size: 24px; color: #000;}
.sitemap-wrap {display: flex; align-items: flex-start;}
.sitemap-wrap dl {flex: 1; margin: 10px;}
.sitemap-wrap dt {font-size: 17px; font-weight: 700; color: #fff; padding: 15px 0; background: #00bbbe; text-align: center;}
.sitemap-wrap li {border-bottom: solid 1px #ccc;}
.sitemap-wrap li a {display: block; font-size: 16px; padding: 15px 10px; font-weight: 700}

@media (max-width: 1024px) {
    .sub-container {
        padding-top: 75px;
    }
    .contents-wrap {
        padding: 30px;
    }
    .h2-title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .h3-title {
        font-size: 18px;
    }
    .title-info {
        font-size: 16px;
    }
    .waybox{flex-wrap: nowrap;}
    .waybox dl{flex:unset; padding: 15px; margin-right: 15px;}
    .waybox dl.way1, .waybox dl.way2 {width: 25%;}
    .waybox dl.way3 {width: 50%;}
    .waybox dd {font-size: 14px;}

    /* 관련사이트 */
    .relate-list{width:80%; margin:0px auto; border-bottom:0; border-right:0;}
    .relate-list .relate-site-logo{float:none; width:100%; height:auto; box-sizing:border-box;}
    .relate-list .relate-site-logo img{width:100%; max-width:128px; margin:5% 0;}
}

@media (max-width: 768px) {
    .sub-container {
        padding-top: 65px;
        min-height: calc(100% - 122px);
    }
    .contents-wrap {
        width: 100%;
        padding: 20px 15px;
    }
    .waybox{flex-wrap: wrap;}
    .waybox dl{height: auto; padding: 15px; margin-right: 0; margin-bottom: 10px;}
    .waybox dl.way1, .waybox dl.way2 {width: 100%;}
    .waybox dl.way3 {width: 100%;}
    /* 관련사이트 */
    .relate-list{width:96%;}
    .relate-list li {width: 50%;}
    .relate-list .relate-site-logo span{font-size:12px;}

    /* 사이트맵 */
}

/*** admin ***/

input[type="button"]{cursor:pointer;}
/* -------- 관리자 - 로그인 -------- */
.login-form{max-width:600px; margin:0px auto; padding:40px 0; width:100%; background: #f5f5f5;}
.login-form h2{text-align:center; font-weight:400; font-size:18px; line-height: 28px;}
.login-form h2 strong{font-weight:500; color:#008cff}
.login-form ul {overflow:hidden;width:400px;min-width:320px;margin:30px auto;}
.login-form ul li {float:left;}
.login-form ul li>p {margin-bottom: 10px;}
.login-form ul li.id-save{float:none; margin-bottom:10px;}
.login-form ul li.id-save input {width: 20px; height: 20px; margin-right: 5px;}
.login-form ul li .inoff {width:96.5%;height:40px; text-indent:10px; border:0; border:1px solid #ccc;}
.login-form ul li .inoff:focus{height:40px; background-color:#fff;}
.login-form .mt-01 {margin-top:-1px}
.login-form .btn-login {width:100%;height:88px;background-color:#00bbbe;font-size:19px;color:#fff;border:none;}
.login-form .btn-login:hover {background-color:#222}

/* -------- 관리자 - 공지사항 -------- */
/* write */
.board-write-form {width:100%;min-width:320px;margin:20px auto;padding:20px 30px 40px 30px;border-top:1px solid #777;border-bottom:1px solid #ccc;background-color:#f5f5f5;}
.board-write-form input {padding:0 10px;border-radius:3px; border:1px solid #ccc;;}
.board-write-form textarea {width:90%;border:1px solid #ccc;padding:10px;border-radius:3px; resize:none;}
.board-write-form dl {clear:both;overflow:hidden;}
.board-write-form dl dt, .board-write-form dl dd {float:left;font-size:14px;padding:3px 0 3px 0;line-height:30px}
.board-write-form dl dt {width:15%;text-indent:15px}
.board-write-form dl dt span {display:inline-block;margin:0;font-weight:600;color:#00bbbe;}
.board-write-form dl dd {width:80%}
.board-write-form dl dd p {margin:5px 0 0 0;line-height:35px}
.board-form-btn {width:100%;margin:30px auto 0;text-align:center}
.board-form-btn .send {max-width:30%;min-width:150px;height:60px;border:none;background-color:#00bbbe;color:#fff;font-size:15px}
.board-form-btn .cancel {max-width:30%;min-width:150px;height:60px;border:none;background-color:#aaa;color:#fff;font-size:15px}
.board-form-btn .send:hover {background-color:#00bbbe}
.board-form-btn .cancel:hover {background-color:#555;}
/* -------- 관리자 - 팝업창관리 -------- */
.width5{width: 5%;}
.width10{width:10%;}
.width15{width:15%;}
.width20{width:20%;}
.width30{width:30%;}
.board-list .board-tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align: left;}
.board-list .board-use span{display:inline-block; width:70%; line-height:36px; background-color:#ccc; color:#fff;}
.board-list .board-use span.useY{
    display: inline-block;
    width: 70%;
    line-height: 36px;
    background-color:#00bbbe
}
.board-list .board-manage input[type="button"]{background-color:#333; padding:0 10px; border:0; color:#fff; height: 24px; line-height: 20px;}
.view-form .useY{display:inline-block; width:60px; line-height:20px; background-color:#EF3E6C; font-size: 12px; color:#fff; text-align:center;}
.view-form .useN{display:inline-block; width:60px; line-height:20px; background-color:#ccc; font-size: 12px; color:#fff; text-align:center;}

/* -------- 관리자 - 정보변경 -------- */
.login-form .btn-pwd {width:100%;height:124px;background-color:#00bbbe;font-size:19px;color:#fff;border:none;}
.login-form .btn-pwd:hover {background-color:#222}


@media all and ( max-width:1024px ) {
    .board-head {height: 2px; overflow: hidden;}
    .board-list dl dd {height:46px;line-height:46px;}
    /* 관리자 - 공지사항쓰기 */
    .board-write-form{max-width:auto; width:96%; padding:20px 2%;}
    /* 관리자 - 팝업창관리 */
    .board-list .board-tit{width:60%; font-size:15px; font-weight:600;}
    .board-list .board-term{clear:both;float:none; display:block; margin-left:90px; width:70%; text-align:left;}
    .board-list .board-term:before{float:none; content:"기간 : "; color:#888}
    .board-list .board-use{position:absolute; left: 0; top: 46px; width:50px; text-align:left;}
    .board-list .board-use span{width:80px; text-align:center;}
    .board-list .board-use span.useY{width:80px; text-align:center;}
    .board-list .board-file,.board-list .board-day{display:none;}
    .board-list .board-day:before{float:none; content:"등록일 : "; color:#888}
    .board-list .board-manage{float:none; display:block; width:15%; position:absolute; right:2%; line-height: 1;}
    .board-list .board-manage{
        top: 0px;
        display: flex;
        flex-direction: column;
        height: 95px;
        justify-content: space-between;
        padding: 10px 0;
    }
    .board-list .board-manage input[type="button"]{padding:2px 0; width:100%; height: 30px; line-height: 1; margin-bottom:3px; }

}
@media all and ( max-width:639px ) {
    /* 관리자 - 로그인 */
    .login-form{max-width:auto; width:100%; margin:0px auto; padding: 30px 15px;}
    .login-form ul{width:96%; max-width:400px; margin: 0;}
    .login-form h2{font-size:15px}
    /* 관리자 - 공지사항쓰기 */
    .board-write-form dl dt{text-indent:3px;}
    /* 관리자 - 팝업창쓰기 */
    .board-form{position:relative;}
    .view-form .useY{width: 30px;}
}

.condition-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-right: solid 1px #ccc;
    padding: 20px;
}
.condition-box>div>label {
    display: block;
    margin: 10px 0;
}
.condition-box>div>select {
    width: 100%;
}
.condition-box>div>span {
    display: inline-block;
    margin-bottom: 5px;
}
.btn-box {
    display: flex;
    text-align: center;
    margin-top: 5px;
}
.btn-box > button {
    flex: 1;
    height: 36px;
    border: none;
    background-color: #aaa;
    color: #fff;
    margin: 2px;
}
.btn-box > button.btn-main {
    background-color: #EF3E6C;
}
.btn-box > button.btn-sub {
    background-color: #00bbbe;
}
.btn-box > button.on {
    background-color: #000;
}
.datepicker {
    width: 110px;
    height:36px;
    padding:0 30px 0 5px;
    border:solid 1px #cbcbcb;
    border-radius: 4px;
    font-size:14px;
    color:#667080;
    background:url("../images/icon_date.png") right 8px center no-repeat #fff;
    outline: 0;
}

@media all and ( max-width:768px ) {
    .condition-box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        border-right: 0;
        padding: 10px;
        border-bottom: solid 1px #ccc;
    }
    .condition-box>div>label {
        margin: 5px 0;
    }
    .condition {
        width: calc(50% - 10px);
        margin: 0 10px 5px 0;
    }
    .condition2 {
        width: 100%;
        margin: 0 10px 5px 0;
    }
    .btn-box {
        width: 50%;
        padding: 0;
    }
}
.road-info-box {
    width: 100%;
    height: 600px;
    overflow-y: auto;
}

/* -------- 소개 -------- */
.intro-inner-con{padding-bottom:8%; text-align: center;}
.intro-inner-con h2{position: relative; display: inline-block;margin-bottom: 30px; padding:0 0 15px 0;font-size:24px;font-weight:500;}
.intro-inner-con h2 strong{font-weight:600;}
.intro-inner-con h2 span{width:100%; height:2px; background-color:#EF3E6C; display:block; position:absolute; bottom:0px;}
.sub-txt{font-size:30px; margin-bottom:20px; color:#333; font-weight:500; text-align:center;}
.sub-txt strong{font-weight:700;}
/* 소개 -  센터소개 */
.center-con1 {position: relative; margin: 0 auto; width: 89%;}
.center-con1 p {line-height:28px; font-size:18px; margin-top: 20px;}
.center-con1 p strong{font-size:18px; font-weight:500; color:#EF3E6C;}
.center-con2{display: flex; flex-wrap: wrap;}
.center-con2 li{position:relative; flex: 1; padding:60px 0 10px 0; text-align:center; background:#eee; margin: 10px;}
.center-con2 li .center-con2-txt strong{position:absolute; top:30px; left:0px; width:100%; font-size:20px; color:#555;}
.center-con2 li .center-con2-txt p{color:#555; font-size:16px; line-height:20px; padding:15px 20px; letter-spacing: -0.5px;}
.center-con2 li .center-con2-txt p span{display:block;}

/* 소개 -  서비스소개 */
.service-con {display: flex;}
.service-con li {flex: 1;padding: 15px;border:solid 1px #ccc;margin: 0 10px;}
.service-con li dt {background: #00bbbe;color: #fff;font-size: 18px;font-weight: 500;line-height: 42px;text-align: center;}
.service-con li dd {position: relative;height: 270px;padding: 15px;text-align: center;}
.service-con li dd h3 {display: inline-block;width: 80%;text-align: center;font-size: 18px;font-weight: 500;color: #000;margin-bottom: 10px;}
.service-con li dd>p {
    position: relative;
    text-align: left;
    margin-top: 5px;
    line-height: 1.2;
    padding-left: 12px;
}
.service-con li dd>p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: #00bbbe;
    border-radius: 50%;
    margin-right: 5px;
}
.service-con li dd>div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 10px;
}
.service-con li dd>div::before {
    content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url(../images/arrow_up.png) no-repeat;
    margin-bottom: 10px;
}
.service-con li dd>div>strong {display: block;font-size: 18px;margin-bottom: 10px;}

@media all and ( max-width:1250px ) {
    .service-con {flex-wrap: wrap;}
    .service-con li {width: calc(50% - 20px); flex: unset; margin:10px;}
    .service-con li dd {height: 240px;}
}
@media all and ( max-width:639px ) {
    .center-con1 img {width: 100%;}
    .service-con li {width: 100%; margin:5px;}
    .service-con li dd {height: auto;}
    .service-con li dd>div {
        position: relative;
        bottom: unset;
        width: 100%;
        padding-bottom: 0;
        padding-top: 10px;
    }
}

.service-img ul {display: flex; margin-bottom: 20px;}
.service-img li {flex: 1; margin: 10px; position: relative;}
.service-img li h3 {display: block;text-align: center;font-size: 16px;font-weight: 500;line-height: 1.2;color: #fff;background: #aaa;padding: 10px 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.service-img li p {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, .7);color: #fff;line-height: 36px; padding: 0px 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.service-img li img {width: 100%; height: calc(100% - 62px);}
@media all and ( max-width:1250px ) {
    /* 소개 - 센터안내 */
    .intro-inner-con{width:100%; margin:0px auto;}
    .center-con1-left,.center-con1-right{float:none; width:100%; text-align:center;}
    .center-con1-left img,.center-con1-right img{width:100%; max-width:500px; vertical-align:top;}
    .center-con2 li{flex: unset; width:100%;height:auto;text-align:left; overflow:hidden; padding: 20px;}
    .center-con2 li .icon{float:left; display:table; width:15%; margin-right:5%; text-align:center;}
    .center-con2 li .icon span{display:table-cell;  height:80px; vertical-align:middle;}
    .center-con2 li .icon img{width:100%; max-width:120px;}
    .center-con2 li .center-con2-txt{float:left; width:80%;}
    .center-con2 li .center-con2-txt strong{position:static; display:block; padding-top:2%; margin-bottom: 5px;}
    .center-con2 li .center-con2-txt p{padding:10px 0 0 0; }
    .center-con2 li .center-con2-txt p span{margin-right:5%; margin-bottom: 5px;}
    .center-con2 li .center-con2-txt p span:before{content:"·"; padding-right:1%;}
    /* 소개 - 서비스소개 */
    .service-img li h3 {font-size: 14px;}
    .service-img li p {font-size: 12px;}
}
@media all and ( max-width:639px ) {
    /* 소개 - 센터소개 */
    .intro-inner-con h2{font-size:18px; padding:0 0 13px 0;}
    .sub-txt{font-size:20px; line-height: 1.4;}
    .center-con1-right p{font-size:14px; line-height:24px;}
    .center-con1 p{line-height:20px; font-size:14px;}
    .center-con2 li .icon {}
    .center-con2 li{padding: 15px;display: flex;}
    .center-con2 li .center-con2-txt{width:100%;}
    .center-con2 li .center-con2-txt strong{font-size:14px;}
    .center-con2 li .center-con2-txt p{font-size:14px}
    .center-con2 li .center-con2-txt p span {display: block;}
    /* 소개 - 서비스소개 */
    .service-img ul {flex-wrap: wrap; margin-bottom: 10px;}
    .service-img li {flex: unset; width: 100%;}
}
.tab-btn {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.tab-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
}
.tab-btn p {margin-right: 5px;}
.tab-btn a {
    display: inline-block;
    border: 1px solid #ccc;
    min-width: 40px;
    padding: 15px;
    font-weight: 600;
    text-align: center;
    color: #777;
    background-color: #fff;
}
.tab-btn a.active {
    background: #000;
    border: solid 1px #000;
    color: #fff;
}
@media all and ( max-width:639px ) {
    .tab-btn p {margin-bottom: 5px;}
    .tab-btn::after {display: none;}
}


.admin-tab {width: 100%; display: flex;}
.admin-tab li {background: #f5f5f5; border: solid 1px #ccc; width: 100px; text-align: center; margin-left: -1px;}
.admin-tab li a {display: block; line-height: 42px;}
.admin-tab li a.selected, .admin-tab li a:hover {background: #00bbbe; color: #fff;}


#roadStatCon{margin-left:280px; margin-right:30px; padding-top:26px; }
.road-state-info{float:right;}
.road-state-info strong{font-size:16px; font-weight:400; color:#555; line-height:50px;}
.road-state-info span{display:inline-block; width:50px; height:50px; color:#fff; text-align:center; line-height:50px;margin-left:4px;}
.road-state-info .state1{background-color:#ff0000}
.road-state-info .state2{background-color:#eec400;}
.road-state-info .state3{background-color:#48cd00;}
.road-stats-table-con{width:100%;height: 640px;}
.stats-tit-tbl{float:left; width:150px; }
.stats-tit-tbl th{height:49px; border-bottom:1px solid #ccc; border-left:1px solid #ccc;background-color:#ebf7f7; text-align: center;}
.stats-tit-tbl td{height:49px; border-bottom:1px solid #ccc; border-left:1px solid #ccc; background-color:#fff; text-align: center;}
.stats-tit-tbl .stats-tit{border-top:1px solid #222; background-color: #eee;}
.stats-tit-tbl td>span {display: block;min-width: 40px;}
#statsContent {
    float:right;
    width: calc(100% - 150px);
    height: 640px;
    background: #fff;
    overflow-x: auto;
}
#scroller {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    height: 151px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

#statsContent ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    overflow:hidden;
}

#statsContent li {
    display: block;
    float: left;
    width: 4%;
    height: 49px;
    line-height:49px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fafafa;
    font-size: 14px;
}
#statsContent .time-tit li {
    border-top:1px solid #222;
    height:49px;
    background-color:#eee
}

.stats-content-tbl th,.stats-content-tbl td{border-left:1px solid #ccc; border-bottom:1px solid #ccc; width:50px; height:49px; text-align:center ; font-size:17.5px;}

.stats-content-tbl th{background-color:#eee; height:49px;}
.stats-content-tbl td{font-size:17.5px;}
#statsContent li.state3{color:#eec400;}
#statsContent li.state2{color:#48cd00}
#statsContent li.state1{color:#d60000}
.guide-text{display:none;}
.stats-text{clear:both; color:#555; font-size:15px; padding-top:15px; line-height:22px;}
.road-stats-map-con{position: relative; width:100%; height:450px; margin-bottom:50px; overflow:hidden; border:1px solid #ccc; }


@media all and ( max-width:639px ) {
    .road-stats-table-con{height: 521px;}
    .admin-tab li {flex:1;}
    .stats-tit-tbl {width: 100px;}
    .stats-tit-tbl .stats-tit {font-size: 12px;}
    #statsContent {
        width: calc(100% - 100px);
        height: 521px;
    }
    .stats-tit-tbl th {font-size: 12px; height: 40px;}
    .stats-tit-tbl td {height: 40px;}
    .stats-tit-tbl td>span {font-size: 12px;}
}

.system-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.system-box>div {
    position: relative;
    border:solid 1px #ccc;
    text-align: center;
    padding: 15px;
}
.system-box>div>h2 {
    display: block;
    background: #00bbbe;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 10px 0 12px 0;
    margin: 0;
}
.system-box>div.box1 {
    margin: 0 40px;
}
.system-box>div.box1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 40%;
    display: block;
    width: 38px;
    height: 38px;
    background: url(../images/arrow_up.png) no-repeat;
    margin-left: -39px;
    transform: rotate(90deg);
}
.system-box>div.box1::after {
    content: "";
    position: absolute;
    right: 0;
    top: 40%;
    display: block;
    width: 38px;
    height: 38px;
    background: url(../images/arrow_up.png) no-repeat;
    margin-right: -39px;
    transform: rotate(-90deg);
}
.system-box .img img {width: 100%;}
.system-box ul {
    background: #f1f1f1;
    padding: 15px;
}
.system-box ul li {
    line-height: 24px;
}
.system-box ul li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 5px;
    background-color: #333;
    border-radius: 50%;
    margin-right: 5px;
}
@media all and ( max-width:768px ) {
    .system-box {display: block;}
    .system-box>div {width: 100%;}
    .system-box>div.box1 {
        margin: 40px 0;
        padding-bottom: 20px;
    }
    .system-box>div.box1::before {
        left: 45%;
        top: 0;
        margin-top: -39px;
        margin-left: 0;
        transform: rotate(180deg);
    }
    .system-box>div.box1::after {
        content: "";
        position: absolute;
        right: unset;
        left: 45%;
        top:unset;
        bottom: 0;
        margin-right: 0;
        margin-bottom: -39px;
        transform: rotate(0deg);
    }
}