PT_WEB/src/main/webapp/common/css/Exsting_style_org.css

@charset "utf-8";
/*!* Reset *!*/
/** {box-sizing:border-box;}*/
/*html,body{width:100%;height:100%;padding:0px; margin:0px;background:#e8edf4;}*/
/*body {font-size:14px;font-family:'Nanum Barun Gothic',Helvetica,sans-serif;line-height:100%;letter-spacing:-1px;}*/
/*body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; -webkit-text-size-adjust:none;line-height:100%;}*/
/*img,fieldset{border:0}*/
/*ul,ol,li{list-style:none;}*/
/*h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }*/
/*hr {display:none;}*/

/*!*전체메뉴  css 충돌로 주석처리함*!*/
/*!*a, a:link {color:inherit;text-decoration:none;}*!*/
/*!*a:visited {color:inherit;}*!*/
/*!*a:hover, a:active {color:inherit;text-decoration:none;}*!*/


/*address {font-style:normal; font-weight:normal;}*/
/*legend,caption {font-size:18px;padding:10px;text-align:left;}*/
/*input,textarea,select,button,table { font-size:inherit;font-family:inherit;line-height:inherit; }!**font-size:100%;*!*/
/*input,select {vertical-align:middle}*/
/*textarea, input {outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;}*/
/*textarea {resize:none;}*/
/*table {border-collapse:collapse}*/

/*button {border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0 none;background-color:transparent;border-radius:0;}*/

/*article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block;margin:0;}*/
/*command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display: inline; }*/

/*실시간교통 문자 아이콘색상*/
.traffic소통원활{background-color:#0ebe39 !important;}/*소통원활*/
.traffic부분지체{background-color:#fea100 !important;}/*서행지체*/
.traffic정체{background-color:#f90000 !important;}/*정체*/
.traffic사고{background-color:#000 !important; color:#ffe400 !important;}/*사고*/


/*admin접속통계*/
.adminStatsWrap {margin-top:35px;}
/*.adminStatsWrap .searchBox {padding:15px 20px;border:solid 1px #d4d4d4;background-color:#f6f6f6;}*/
.adminStatsWrap .searchBox select {width:100px;height:35px;line-height:35px;padding:0 30px 0 10px;color:#333;border:solid 1px #ccc;background:#fff url("../images/select_arrow_small.png") right 10px top 13px no-repeat;}
.adminStatsWrap .searchBox .bt {display:inline-block;margin-left:5px;height:33px;padding:0 20px;line-height:33px;background-color:#00bbbe;color:#fff;border-radius:3px;vertical-align:middle;}
.adminStatsWrap .statsList {margin-top:35px;}
.adminStatsWrap .statsList .tabUI li {float:left;height:35px;width:80px;margin-right:1px;border:solid 1px #d4d4d4;border-bottom:0;text-align:center;line-height:35px;cursor:pointer;}
.adminStatsWrap .statsList .tabUI a li.on {background-color:#00bbbe;color:#fff !important; border:solid 1px #00bbbe;}
.adminStatsWrap .statsList table {width:100%;border-top:solid 1px #d4d4d4;border-left:solid 1px #d4d4d4;}
.adminStatsWrap .statsList table thead th {text-align: center;height:35px;background-color:#f6f6f6;font-size:12px;border-right:solid 1px #d4d4d4;border-bottom:solid 1px #d4d4d4;color:#666;}
.adminStatsWrap .statsList table tbody td {height:35px;font-size:12px;border-right:solid 1px #d4d4d4;border-bottom:solid 1px #d4d4d4;text-align:center;color:#666;}
.adminStatsWrap .statsList table tbody th {padding-left:5px;text-align:left;border-bottom:solid 1px #d4d4d4;border-right:solid 1px #d4d4d4;font-size:11px;background-color:#e8edf4;color:#666;}



/* 소통정보 마우스오버 오버레이 */
.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; font-weight: bold;}
.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:55px;height:20px;text-align:center;font-size:13px;line-height:20px;background-color:#24b841;color:#fff;border-radius:3px;}
.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;color:#eee;}
.traffic_LTC1 .head {border-color:#24b841 !important;color:#000;}
.traffic_LTC1 .head span.traffic {background-color:#24b841 !important;color:#eee;}
.traffic_LTC2 .head {border-color:#fead0e !important;color:#000;}
.traffic_LTC2 .head span.traffic {background-color:#fead0e !important;color:#eee;}
.traffic_LTC3 .head {border-color:#ED240D !important;color:#000;}
.traffic_LTC3 .head span.traffic {background-color:#ED240D !important;color:#eee;}
/* cctv팝업 */
.map_popup_cctv {width:calc(100% - 6px);min-width:320px;min-height:278px;height:calc(100% - 6px);left:0px;top:0px;background-color:#2e2c2c; clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}
.map_popup_cctv > dl {width: 100%;height: 100%;}
.map_popup_cctv > dl > dl {width: 100%; height: calc(100% - 56px);}
.map_popup_cctv dl dt {font-weight:600;display: flex; align-items: center; width: 100%; min-height: 30px; height: 50px;}
.map_popup_cctv dl dt #hlsPlayEx{width:320px;height:auto}
.map_popup_cctv dl dt video{width:100%}
.map_popup_cctv dl dt p {display:inline-block; margin: 0;}
.map_popup_cctv dl dt .lctn_nm {width:auto;color:#c8c8c8;padding-left:15px;font-size:20px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.map_popup_cctv dl dt .restTime{margin-left: auto; margin-right: 5px; width: 170px; min-width:125px; color:#c8c8c8;font-size:16px;font-family:굴림,Gulim}
.map_popup_cctv dl dt a{margin-right: 5px;}
.map_popup_cctv dl dt a img{z-index:20; height: 80%; width:80%;}
.map_popup_cctv dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}
.map_popup_cctv dl .video-box{margin: 0;width: 100%;height: 100%;}
.map_popup_cctv dl .video-js{width: 95%;height: 97%;}
.mapPop.traffic_LTC0,
.mapPop.traffic_LTC2,
.mapPop.traffic_LTC3,
.mapPop.traffic_LTC1 {
    position: absolute;top:121px;left:351px;z-index:999;
}

@media (max-width:992px) {
    .mapPop.traffic_LTC0,
    .mapPop.traffic_LTC2,
    .mapPop.traffic_LTC3,
    .mapPop.traffic_LTC1 {
        top:75px;
    }
}
@media (max-width:900px) {
    /*.systemWrapper .systemInfo li dl {width:100%;}*/
    /*.systemWrapper .systemInfo li figure {position:relative;top:auto;margin-top:10px;text-align:center;}*/
    /* 팝업 div */
    .popDetail {display:none;}
    .map_popup_cctv dl dt {height:50px}
    .map_popup_cctv > dl > dl{height:calc(100% - 56px);}
    .map_popup_cctv dl dt .lctn_nm {font-size: 20px;}
    .map_popup_cctv dl dt .restTime{font-size:15px; width: 160px;}
}

@media (max-width: 768px) {
    .mapPop.traffic_LTC0,
    .mapPop.traffic_LTC2,
    .mapPop.traffic_LTC3,
    .mapPop.traffic_LTC1 {
        top:165px; left:0px;
    }
}

@media (max-width:640px) {
    .map_popup_cctv dl dt {height:30px}
    .map_popup_cctv > dl > dl{height:calc(100% - 36px);}
    .map_popup_cctv dl dt .lctn_nm {font-size: 16px;padding-left: 5px;}
    .map_popup_cctv dl dt .restTime{font-size:12px; width: 135px;}
}

/*.map_popup_cctv {width:328px;height:278px;left:0px;top:0px;background-image:url(/images/cctv/cctvback.png);clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}*/
/*!*.map_popup_cctv dl {padding:1px 5px 5px 2px}*!*/
/*.map_popup_cctv dl dt {font-weight:600;margin:0 0 0 0;padding:5px 0 5px 0;}*/
/*.map_popup_cctv dl dt #hlsPlayEx{width:320px;height:auto}*/
/*.map_popup_cctv dl dt video{width:100%}*/
/*.map_popup_cctv dl dt p {display:inline-block}*/
/*.map_popup_cctv dl dt .lctn_nm {width:180px;color:#c8c8c8;padding-left:5px;font-size:15px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}*/
/*.map_popup_cctv dl dt .restTime{position:absolute;top:10px;color:#c8c8c8;font-size:12px;font-family:굴림,Gulim}*/
/*.map_popup_cctv dl dt a{position:absolute;top:5px;right:10px;}*/
/*.map_popup_cctv dl dt a img{z-index:20}*/
/*.map_popup_cctv dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}*/

/*@media (max-width:900px) {*/
/*    .systemWrapper .systemInfo li dl {width:100%;}*/
/*    .systemWrapper .systemInfo li figure {position:relative;top:auto;margin-top:10px;text-align:center;}*/
/*    !* 팝업 div *!*/
/*    .popDetail {display:none;}*/
/*}*/

/* cctv팝업 M */
.map_popup_cctv_m {width:100%;height:600px;left:0px;top:0px;
    position: relative;
    top: 400px;
    background: #3a3a3a;
    /*background-image:url(/images/cctv/cctvback.png);*/
    clear:both;margin:0 auto;z-index:9;box-shadow:3px 3px 3px #353535}
/*.map_popup_cctv dl {padding:1px 5px 5px 2px}*/
.map_popup_cctv_m dl dt {font-weight:600;height:60px;margin:0 0 0 0;padding:5px 0 5px 0;}
.map_popup_cctv_m dl dt #hlsPlayEx{width:320px;height:auto}
.map_popup_cctv_m dl dt video{width:100%}
.map_popup_cctv_m dl dt p {display:inline-block}
.map_popup_cctv_m dl dt .lctn_nm {
    width: 255px;
    height: 50px;
    line-height: 50px;
    position: relative;
    left: 10px;
    color:#c8c8c8;padding-left:5px;font-size:30px;font-family:굴림,Gulim;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.map_popup_cctv_m dl dt .restTime{position:absolute;top:10px;color:#c8c8c8;font-size:30px;font-family:굴림,Gulim;right:75px;}
.map_popup_cctv_m dl dt a{position:absolute;top:9px;right:15px;}
.map_popup_cctv_m dl dt a img{z-index:20; height: 40px;}
.map_popup_cctv_m dl dd {width:100%;padding:5px 0 0 0;color:#666;font-weight:600;line-height:20px}


/* VMS팝업 */
.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%}

/* 돌발정보 인포윈도우 */
.incdPop {width:325px;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:15px;padding-top:5px;}
.incdPop .head span.ellip {width:285px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height: 30px;}
.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}

.file-btn {display:flex; align-items: center;justify-content: center; margin-left: 10px;border: 1px solid #ccc; width: 80px; height: 36px;}
.file-btn:hover {cursor: pointer; background-color: #eee;}