@charset "utf-8";

/*layout*/
#wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position:relative;
}
.mainWrap {
    background: url(/images/main/bg.png);
    background-size: cover;
}
.inner_ly {
    flex: 1 1 0%;
    position:relative;
    width:1600px; margin:0 auto; padding-left: 150px;
}

/* header css */
header {position: fixed; top:0; left: 0; bottom: 0; z-index: 10; width:150px; background-color: #222; min-height: 900px;}
header .topUtil {height:150px;background-color:#fff; padding: 0 20px; border-right: solid 1px #eee;}
header .topUtil .link {display: block; text-align: center;}
header .topUtil .logo {
    display: inline-block;
    width: 113px;
    height: 122px;
    background: url(/images/common/logo.png) 0 center no-repeat;
    background-size: 100%;
    font-size: 0;
}
header .link-mather {display: block; height: 40px; line-height: 38px; color: #fff; background: #0054a7; border-radius: 10px; text-align: center;}
header .header_inner {position:relative; width:100%; height: calc(100% - 150px);}

.header_inner .navtoggle {display:none}
.header_inner .innerset {position:relative}

.header_inner .navlist {width: 100%; display: flex; flex-direction: column;}
.header_inner .navlist > li {display: flex; flex-direction: column; justify-content: center; position: relative;}
.header_inner .navlist > li > a {position:relative; display:flex; flex-direction: column; row-gap: 10px; width: 100%; color: #fff; text-align: center; padding: 15px 0;}
.header_inner .navlist > li > a::before {content: ""; height: 40px; background-size: 40px; background-repeat: no-repeat; background-position: center center;}
.header_inner .navlist > li > a:before {background-image: url(/images/common/ico-nav01.svg);}
.header_inner .navlist > li:nth-of-type(1) > a:nth-of-type(2):before {background-image: url(/images/common/ico-nav02.svg);}
.header_inner .navlist > li:nth-of-type(3) > a:before {background-image: url(/images/main/ico-quick02.svg);}
.header_inner .navlist > li:nth-of-type(4) > a:before {background-image: url(/images/common/ico-nav03.svg);}
.header_inner .navlist > li:nth-of-type(5) > a:before {background-image: url(/images/common/ico-nav04.svg);}
.header_inner .navlist > li:nth-of-type(6) > a:before {background-image: url(/images/common/ico-nav05.svg);}
.header_inner .navlist > li:nth-of-type(7) > a:before {background-image: url(/images/common/ico-nav06.svg);}
.header_inner .navlist > li:after {content: "";position: absolute; left: 50%; transform: translateX(-50px); display: block; width: 100px; height: 1px; bottom: 0; background-color: #999;}

.header_inner .navlist > li.on:hover::after,
.header_inner .navlist > li:hover::after {height: 3px; background-color: #F83030;}

.header_inner .navlist > li .dp2 {position: absolute; left: 150px; top: 50%; transform: translateY(-50%); width: 100%; background-color: #3656BB; padding:0; visibility: hidden; opacity: 0;}
.header_inner .navlist > li .dp2 > li {border-top: solid 1px rgba(255,255,255,.2); text-align: center;}
.header_inner .navlist > li .dp2 > li > a {
    display:block;
    white-space: nowrap;
    font-size:.875rem; color: #eee;
    line-height: 1.8rem;
    margin-top: 2px;
    border:0;
}
.header_inner .navlist > li .dp2 > li > a:hover {color: #fff;}

.header_inner .navlist > li:hover .dp2 {visibility: visible; opacity: 1;}


.link-btn {
    position: absolute;
    bottom: 10px;
    left: 25px;
    display: block;
    width: 100px;
}
.familySite, .siteMapLink {
    display: block;
    width: 100px;
    font-size: .75rem;
    line-height:32px;
    color: rgba(255, 255, 255, .2);
    border-radius:20px;
    background-color: rgba(255, 255, 255, .1);
    text-align: center;
    margin-bottom: .5rem;
}
.familySite {display: none;}

footer {position: relative; height: 50px; background-color: #000; min-width: 1600px;}
footer .footer-con {padding: 10px 0; display: flex; justify-content: center; align-items: center; }
footer .footer-con>span:first-child {
    font-size: 0;
    width: 200px;
    height: 28px;
    background: url(/images/common/footer-logo.png) no-repeat;
    background-size: 100%;
    margin-right: 20px;
}
footer .footer-con > span:nth-child(2){
    font-size: .75rem;
    color: #888;
    line-height: 1.4;
    border-left: solid 1px #777;
    padding-left: 20px;
    padding-right: 20px;
}
footer .footer-con > span:nth-child(3) {
    color: #888;
    line-height: 1.4;
    border-left: solid 1px #777;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}
footer .footer-con > span:nth-child(4) > a{
    color: #888;
    line-height: 1.4;
    border-left: solid 1px #777;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
    font-size: 1rem;
}
.container {position:relative; flex: 1 1 0%; min-width: 1600px;}
.container.traffic{ max-height: 920px;}
.mainContent {width: 100%; padding: 0 10px 30px 10px;}
.greeting {font-size: 36px; font-weight: 500; padding: 50px 0 40px 0; color: #fff;}
.weather {position: absolute; right: 10px; top:40px; width: 340px; height: 70px; background: #fff; border-radius: 20px; margin-bottom: 10px;}
.weather-cont {display: flex; align-items: center; gap: .75rem; justify-content: center; font-size: .75rem; padding: .5rem;}
.weather-cont span {display: block; line-height: 1.5rem; color: #888;}
.w-text01 {width: 125px;}
.w-text01 span:last-child {font-size: 1.5rem; font-weight: 700; color: #0054a7;}
.w-text02 span:last-child {color: #3656BB;}
.w-text01.weather01 {background: url(/images/common/weather01.png) right center no-repeat; background-size: contain;}
.w-text01.weather02 {background: url(/images/common/weather02.png) right center no-repeat; background-size: contain;}
.w-text01.weather03 {background: url(/images/common/weather03.png) right center no-repeat; background-size: contain;}
.w-text01.weather04 {background: url(/images/common/weather04.png) right center no-repeat; background-size: contain;}
.w-text01.weather05 {background: url(/images/common/weather05.png) right center no-repeat; background-size: contain;}
.w-text01.weather06 {background: url(/images/common/weather06.png) right center no-repeat; background-size: contain;}

.contents {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;}

.mapArea {position:relative; width: calc(100% - 360px); height:600px; overflow:hidden; border-radius: 20px;}
.mapMenu {position:absolute;top:20px;left:20px;}
.mapMenu ul {display: flex; flex-direction: column; row-gap: .25rem;}
.mapMenu ul li button {
    width:60px;
    height:60px;
    margin-bottom: 5px;
    background: #fff;
    font-size: .75rem;
    color: #999;
    border-radius: 10px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.mapMenu ul li button::before {content: ""; display: block; height: 32px; filter:brightness(.7);}
.mapMenu ul li.m01 button::before {background: url("/images/common/ico-map01.svg") center center no-repeat;}
.mapMenu ul li.m02 button::before {background: url("/images/common/ico-map02.svg") center center no-repeat;}
.mapMenu ul li.m03 button::before {background: url("/images/common/ico-map03.svg") center center no-repeat;}
.mapMenu ul li.m04 button::before {background: url("/images/common/ico-map04.svg") center center no-repeat;}
.mapMenu ul li.on button {background: #3656BB; color: #fff;}
.mapMenu ul li.on button::before {filter: brightness(1);}

.traffic-info {width: 340px; height: 600px; background: #fff; border-radius: 20px; overflow: hidden;}
.traffic-tab {display: flex;}
.traffic-tab li {flex: 1; display: flex; align-items: center; justify-content: center; height: 60px; background: #eee; text-align: center;}
.traffic-tab li.active {background: #3656BB}
.traffic-tab li.active a {color: #fff;}
.rollingOuter {height: calc(100% - 60px); overflow: hidden;}
.rollingList {width: 100%;}
.rollingList li {display: flex; align-items: center; border-bottom: solid 1px #ddd; padding: 14px 16px;}
.rollingList li.notice-li {padding: 16px;}
.rollingList li:last-child {border-bottom: 0;}
.road-info {font-size: .875rem; padding-left: 1rem;}
.road-info > div,
.road-info>p+p {margin-top: .5rem;}
.road-info strong {color: #f58345;}
.road-info .arrow {display: inline-block; vertical-align: middle; width: 16px; height: 16px; background: url(/images/common/arrow_right.svg) center top no-repeat; margin: 0 5px;}
.traffic-bullet>p {width: 52px; height: 52px; border-radius: 50%; text-align: center; font-size: .75rem;}
.traffic-bullet>p::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 52px;
    width: 1px;
}
.traffic-bullet>p.slow {background: #f58345;}
.traffic-bullet>p.stop {background: #f83030;}
.traffic-bullet>p.smooth {background: #00b6be;}
.traffic-bullet>p.accident {background: #00235d;}
.traffic-bullet>p>span {display: inline-block; vertical-align: middle; width: 28px; line-height: 16px; color: #fff;}

.traffic-status {
    position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 30px;
}
.traffic-status span::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 5px;
}
.traffic-status span.smooth::before {background: #009F82;}
.traffic-status span.slow::before {background: #FAA500;}
.traffic-status span.stop::before {background: #F83030;}
.traffic-status span.nodata::before {background: #888888;}

.infoWrap {display: flex; align-items: flex-start; width:100%; margin-top: 50px;}
.infoWrap h2 {font-size: 30px; font-weight: 700; color: #00235d; margin-bottom: 20px;}
.infoWrap .btn-more {top: 0; right: 0;}
.infoWrap>div {width: 388px; position: relative;}
.infoWrap>div+div {margin-left: 18px;}
.outbreakList {height: 250px; overflow: hidden; border: solid 1px #ddd; border-radius: 0 24px 24px 24px; padding: 10px 20px;}
.outbreakList li {position: relative; border-bottom: solid 1px #ddd; padding: 15px 0;}
.outbreakList li:last-child {border-bottom: 0;}
.outbreakList li .traffic-bullet {right: 0;}

.noticeList li {width: 100%; border: solid 1px #ddd; border-radius: 0 24px 24px 24px; padding: 19px;}
.noticeList li+li {margin-top: 10px;}
.noticeList li span {display: block; color: #667080; margin-bottom: 5px;}
.noticeList li p {width: 100%; font-size: 18px; color: #000; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.quick-link {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    width:100%; height: 150px;
    background-color: #3656BB;
    border-radius: 20px;
}
.quick-link li {flex: 1; display: flex; align-items: center; column-gap: 1rem; padding: 1rem;}
.quick-link li+li {border-left: solid 1px rgba(255, 2555, 255, .2);}
.quick-link li::before {content: ""; width: 60px; height: 60px; background-size: 100%;}
.quick-link li:nth-of-type(1)::before {background-image: url(/images/main/ico-quick01.svg);}
.quick-link li:nth-of-type(2)::before {background-image: url(/images/main/ico-quick02.svg);}
.quick-link li:nth-of-type(3)::before {background-image: url(/images/main/ico-quick03.svg);}
.quick-link li:nth-of-type(4)::before {background-image: url(/images/main/ico-quick04.svg);}
.quick-link li>a {font-size: .875rem; color: #fff;}
.quick-link li strong {font-size: 1.5rem; font-weight: 500;}
.quick-link li p {margin-bottom: .5rem; line-height: 1.5rem;}
.quick-link li span {display: block; font-weight: 100;}

.traffic1{background-color:#0ebe39 !important;}	/*소통원활*/
.traffic2{background-color:#fea100 !important;}	/*서행지체*/
.traffic3{background-color:#f90000 !important;}	/*정체*/
.traffic4{background-color:#000 !important; color:#ffe400 !important;}	/*사고*/


.visual-con-box {width: 100%;height: 250px;}
.visual-title {width: 100%;height: 200px;}
.sub-relateSite {background: url(/images/sub_visual_relate.jpg) no-repeat; background-size: cover;}
.sub-admin {background: url(/images/sub_visual_admin.jpg) no-repeat; background-size: cover;}
.sub-intro {background: url(/images/sub_visual_center.jpg) no-repeat; background-size: cover;}
.visual-tit {position: relative; top: 50%; transform: translateY(-50%); text-align: center; padding: 20px; background: rgba(0, 0, 0, 0.2);}
.visual-tit strong {
    display: block;
    color: #fff;
    font-weight: 400;
    font-size: 32px;
    line-height: 28px;
    padding-bottom: 8px;
}
.visual-tit span {
    color: #fff;
    display: block;
    font-weight: 200;
    font-size: 17px;
}
.visual-con-box #subNavigation {
    border: solid 1px #ddd;
}
.visual-con-box #subNavigation .to-home-btn {border:0;}

.button {
    display: block;
    background-color: #fff;
    border: solid 1px #004EA2;
    color: #004EA2;
    font-weight: 500;
    min-height: 36px;
    line-height: 36px;
    border-radius: 4px;
    padding: 0 16px;
}
.button:hover {
    border: solid 1px #5172e0;
    color: #5172e0;
    cursor: pointer;
}


/*추가 된 css*/
.map_popup_vms { clear:both; top:50%; left:0; right:0; width:200px; margin:0 auto; padding-top:5px;
    background-image:url(/images/vms/vmsview.png); z-index:9; box-shadow:5px 5px 5px #353535;}
.map_popup_vms dl {padding:3px 5px 5px 5px}
.map_popup_vms dl dt {font-weight:600;margin:0 0 0 0}
.map_popup_vms dl dt p {display:inline-block;color:#c8c8c8;text-align:left;}
.map_popup_vms dl dt .vmsMenu{float:right}
.map_popup_vms dl dt .vmsPrev{float:right}
.map_popup_vms dl dt .vmsNext{float:right}
.map_popup_vms dl dt .vmsPause{float:right}
.map_popup_vms dl dt .vmsClose{float:right}
.map_popup_vms dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}
.map_popup_vms dl dd .nodata{text-align:center;background-color:black;width:220px;height:50px;padding-top:20px;color:#c8c8c8}
.map_popup_vms dl dd .vmsPic{display:none;height:100%}

/* 주차정보 팝업 */
.popupHeader {position:relative;background-color:#293347;height:50px;font-size:20px;font-weight:bold;color:#fff;line-height:50px;}
.popupHeader span{display:inline-block;padding-left:10px;width:230px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.popupHeader .bt_popClose {display:block;position:absolute;top:0;right:0;width:40px;height:50px;background:url("/images/common/btn_close.png") center center no-repeat;background-size:16px auto;}
.popupHeader h1 {padding-top:15px;}
.popupContent {width:300px;padding:10px;background-color:#f5f5f5; border:solid 1px #293347;}
.popupContent .parkingInfoTB table {width:100%;}
.popupContent .parkingInfoTB table tbody th {padding:5px 0; text-align: left; width: 90px;}

.popupContent .parkingInfoTB table tbody th label {display:inline-block;width:80px;height:30px;line-height:30px;border-radius:6px;background-color:#5f728b;text-align:center;color:#fff;}
.pkLabel{display:inline-block;width:80px;height:30px;line-height:30px;border-radius:6px;background-color:#5f728b;text-align:center;color:#fff;}
.popOnHeader {
    font-size: 18px;
    position: relative;
    line-height: inherit;
    height: 100%;
    font-weight: 300;
}
.popupContent .parkingInfoTB table tbody td {padding:0px 10px;min-height:30px;font-size:16px;}
.popupContent .parkingInfoTB table tbody tr:not(:last-child) td {border-bottom:solid 1px #d4d4d4;}
.popupContent .parkingInfoTB table tbody .chargeSize{padding:0}
.popupContent .parkingInfoTB table tbody .chargeSize table tbody tr td{border:0;padding:3px 10px}

.incdPop {width:300px;padding:10px;border:solid 1px #e1e1e1;border-radius:5px;box-shadow: 2px 2px 2px #d4d4d4;background-color:#fff;}
.incdPop .head {position:relative;height:30px;border-bottom:solid 1px #d8240d;}
.incdPop .head span {display:inline-block;}
.incdPop .head span.title {font-size:18px;padding-top:5px;}
.incdPop .head span.ellip {width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.incdPop .head img {position:absolute;right:5px;top:5px;cursor:pointer}
.incdPop .cont {padding:10px 0 0 0;}
.incdPop .cont dl dd {margin-bottom:5px;color:#666;line-height:20px;}
.incdPop .cont dl dd p{margin-left:30px}
.incdPop #incdClose {
    background-image: url('/images/incd/bt_close.gif');
    width: 14px;
    height: 13px;
    background-repeat: no-repeat;
}

/* 소통정보 마우스오버 오버레이 */
.mapPop {width:300px;padding:10px;border:solid 1px #e1e1e1;border-radius:5px;box-shadow: 2px 2px 2px #d4d4d4;background-color:#fff;}
.mapPop .head {position:relative;height:30px;border-bottom:solid 1px #24b841;}
.mapPop .head span {display:inline-block;}
.mapPop .head span.title {font-size:18px;padding-top:5px}

.mapPop .head span.traffic {position:absolute;top:0;right:0;width:50px;height:20px;text-align:center;font-size:13px;line-height:20px;background-color:#24b841;color:#ffffff; border-radius:2px;}
.mapPop .cont {padding:10px 0 0 0;}
.mapPop .cont dl dt {margin-bottom:10px;color:#666;line-height:20px;}
.mapPop .cont dl dd {color:#666;line-height:20px;}

.traffic_LTC0 .head {border-color:#888888 !important;color:#000;}
.traffic_LTC0 .head span.traffic {background-color:#888888 !important; font-weight: bold;}
.traffic_LTC1 .head {border-color:#24b841 !important;color:#000;}
.traffic_LTC1 .head span.traffic {background-color:#24b841 !important; font-weight: bold;}
.traffic_LTC2 .head {border-color:#fead0e !important;color:#000;}
.traffic_LTC2 .head span.traffic {background-color:#fead0e !important; font-weight: bold;}
.traffic_LTC3 .head {border-color:#ED240D !important;color:#000;}
.traffic_LTC3 .head span.traffic {background-color:#ED240D !important; font-weight: bold;}

.no-info-box{width:100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column}
.no-info-box p{color:#333; padding-top:17px; font-size:19px; text-align: center;}
.no-info-box p strong{color:#dd6161; font-size:19px; font-weight:400}
.notice-txt {color: #667080; font-size: 12px;}
.notice-name {font-weight: bold; font-size: 15px; margin-top: 5px;}
.notice-more-box{height: 50px; width: 100%; z-index: 3; position: relative; background-color: white; display: flex; justify-content: right; padding-right: 10px; align-items: center; border-bottom: solid 1px #ddd;}
.notice-more-btn{width: 70px; height: 30px; line-height: 28px; color: #81a1d4; font-weight: 500; border: solid 1px #81a1d4;border-radius: 15px; text-align: center;}
.notice-more-btn:hover{background-color: #81a1d4; color: white; border-color: white;}
.notice-li a{width: 100%;height: 100%;}
.notice-li:hover{cursor: pointer;}

.w-text01.DB01 {background: url("/images/weather/DB01.png") right center no-repeat; background-size: contain;}
.w-text01.DB02 {background: url("/images/weather/DB02.png") right center no-repeat; background-size: contain;}
.w-text01.DB03 {background: url("/images/weather/DB03.png") right center no-repeat; background-size: contain;}
.w-text01.DB04 {background: url("/images/weather/DB04.png") right center no-repeat; background-size: contain;}
.w-text01.DB05 {background: url("/images/weather/DB05.png") right center no-repeat; background-size: contain;}
.w-text01.DB06 {background: url("/images/weather/DB06.png") right center no-repeat; background-size: contain;}
.w-text01.DB07 {background: url("/images/weather/DB07.png") right center no-repeat; background-size: contain;}
.w-text01.DB08 {background: url("/images/weather/DB08.png") right center no-repeat; background-size: contain;}
.w-text01.DB00 {background: url("/images/weather/DB00.png") right center no-repeat; background-size: contain;}


.traffic-status span.LTC0::before, .trafficBullet > span.LTC0,.traffic-bullet>p.LTC0 {background: #888888;}
.traffic-status span.LTC1::before, .trafficBullet > span.LTC1,.traffic-bullet>p.LTC1 {background: #0ebe39;}
.traffic-status span.LTC2::before, .trafficBullet > span.LTC2,.traffic-bullet>p.LTC2 {background: #fea100;}
.traffic-status span.LTC3::before, .trafficBullet > span.LTC3,.traffic-bullet>p.LTC3 {background: #f90000;}

.mapMenu ul li.traf-btn button::before {background: url("/images/common/ico-map01.svg") center center no-repeat;}
.mapMenu ul li.incd-btn button::before {background: url("/images/common/ico-map02.svg") center center no-repeat;}
.mapMenu ul li.vms-btn button::before {background: url("/images/common/ico-map03.svg") center center no-repeat;}
.mapMenu ul li.parking-btn button::before {background: url("/images/common/ico-map04.svg") center center no-repeat;}

.siteBox .name a {color: #3656BB;}
.mapMenu{ z-index: 9;}

.header_inner .navlist > li .dp2 {background: none; min-height : 0px; height: 96px;}
.header_inner .navlist > li .dp2 > li {background-color: #3656BB;}

.road-empty{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.traffic-status{
    z-index: 2;
}
.main-map{
    width: 100%;
    height: calc(100% - 50px);
}

.road-info-name {width: 107px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}