@charset "utf-8";

/* font */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select
{font-family:'MontserratR', 'NotoSansM', '맑은 고딕', Malgun Gothic, '돋움', Dotum, arial, apple Gothic;}

/* Common */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;}
img,fieldset{border:0}
ul,ol{list-style:none;}
* {margin:0; padding:0;}
body{ min-width: 320px; overflow-x: hidden;}
button{cursor: pointer;}
button:hover{text-decoration: underline;}
address{font-style: normal;}
a{text-decoration: none; cursor: pointer;}
a:hover{text-decoration: underline;}
table{border-collapse: collapse;}
/*체크박스 디자인*/
label{line-height: 20px; display: inline-block; font-size:12px; margin-right: 5px;}
input[type="checkbox"]{display: none;}
input[type="checkbox"] + span{padding-left: 20px; display: inline-block; background:url(../images/check_nml.png)left no-repeat; cursor: pointer; height: 15px; min-width: 15px; line-height: 15px; vertical-align: middle; font-weight: normal;}
input[type="checkbox"]:checked + span{background:url(../images/check_click.png)left no-repeat;}

.wrap{width:100%; height:100%; overflow: hidden; position: relative; min-height:600px; }
table caption{display: none;}

/*메뉴*/
.topgo{position: fixed; bottom:40px; right: 10px; width:55px; height:55px;  border-radius: 50%; background: rgba(234,234,234,0.7); border: none; z-index: 991; box-sizing: border-box; text-align: center; display: none;}
.topgo span{display: block; font-size: 12px; line-height: 12px; color: #5c2b0d;}
.m_menu{position: absolute; right: 20px; top:10px; width: 105px; height: 55px; border: none; background:url(../images/m_menu.png)left center no-repeat; font-size:14px; color:#000; display: block; text-indent: -99999px;}
.menubox{width:100%; border-bottom: 2px solid #7fbe26; box-sizing:border-box; background: #fff; height: 80px; position: relative; z-index: 9}
.menubox h1{box-sizing:border-box;width: 260px; height:  100%;}
.menubox h1 span{display: none;}
.menubox h1 a{display: block; width: 100%; height: 100%; background: url(../images/logo.png)center no-repeat;}
.menutop li{float: left; width: 50%; height: 33px; line-height: 32px;}
.menutop li a{display: block; width: 100%; height: 100%; text-align: center; color: #fff; font-size: 11px;}
.menutop li:first-child{background: #7fbe26;}
.menutop li:last-child{background: #9e9e9e; }
.menutop li button{border: none;  width: 100%; height:30px; color: #fff; font-size: 11px;background: #9e9e9e; vertical-align: top;}
.menuli{position: absolute; left: 50%; margin-left: -398px; top: 0;  }
.menuli li{height: 78px; float: left;  position:relative; width: 151px; text-align: center; box-sizing: border-box;}
.menuwrap{width:100%; margin: 0 auto; height: 78px; position: relative; padding: 0 20px; box-sizing: border-box;}
.menuli li > a{color: #000; font-size:19px; padding: 0 15px; line-height: 78px; font-weight: bold;}
.menuli li:hover .menu_sub{display: block; box-shadow: 0 0px 9px 0 rgba(0,0,0,0.1);}

.menuli li:hover .menu_sub{
-webkit-animation-name:down; animation-name:down;	
	-webkit-animation-iteration-count:1; animation-iteration-count:1; -webkit-animation-duration: 0.5s; animation-duration:0.5s;}
    
 @keyframes down {
0% {opacity:0;top:65px;}
100% {opacity:1; top:73px;}
}   

@-webkit-keyframes down {
0% {opacity:0; top:65px;}
100% {opacity:1; top:73px;}
}  

.select_site::-ms-expand{display: none;}
.select_site{position: absolute; bottom: 30px; right: 0; width:138px; height: 40px; background:url(../images/sel_arrow.png)95% 50% #37393e no-repeat; -webkit-appearance:none;-mox-appearance:none;appearance:none; color: #b8b8b8; border: none; font-size: 12px; padding-left: 5px; box-sizing:border-box; cursor: pointer;}
.select_site .title{font-size: 10px; color: #797979;}

.m_menu_back{display: none;}
.menuli .menu:focus .menu_sub{display: block!important;}

.on .m_menu_back{display: block;  background:#fff; z-index:7; position: absolute;width:1057px;left: 50%;margin-left: -403px; height: 252px; top:75px; border: 2px solid #7fbe26; border-radius: 10px; box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.1); box-sizing: border-box;}
.on .menu_sub{display: block; border: none; background: none; border-radius: 0; margin-top: 13px; height: 231px; border-right: 1px solid #eaeaea}
.on .menu:nth-child(5) .menu_sub{  border-left: 1px solid #eaeaea}
.on .menu:last-child .menu_sub{ border-right:none}
.on .menu:hover .menu_sub{-webkit-animation-name:no; animation-name:no; box-shadow: none;}
.on .menu_sub li{ border-bottom: none; height: 33px;}
.on .menu_sub li a{line-height: 32px; font-size: 14px; color: #3a3a3a; letter-spacing: -2px;}


.on .m_menu{background: url(../images/menu_close.png)left center no-repeat;}

.menu_sub{position: absolute; left:0; width:151px; box-sizing:border-box; z-index: 9; background: #fff; color: #000; border-radius: 5px; border: 1px solid #a9a9a9; top: 73px; display: none;}
.menu_sub li{height:40px; border-bottom: 1px dotted #cfcfcf; width: 100%;}
.menu_sub li:last-child{border-bottom: none;}
.menu_sub li a{width: 100%; height: 100%; display: block; color: #000; font-size: 13px; font-weight: bold; text-align:center; line-height: 40px; box-sizing: border-box; letter-spacing:-1px;}
.menu_sub li a:hover{background: #7fbe26; color: #fff;}

.w1200{width: 1200px; margin: 0 auto; position: relative; height:186px;}

/*메인*/
.wrap article{width: 100%; box-sizing:border-box; min-height: 750px; }
.mainh2{position: absolute; left: 50%; top: 29px; margin-left: -208px; height: 85px; width: 417px; z-index: 2;}
.wrap .mapBox .smartBox{width:650px; height:420px; margin:230px 0 0 -261px; left:45%; top:-31%; padding: 12px 0 0 0; overflow:hidden; display:none;}
.scrollbtn{position: absolute; width: 55px; height: 55px; left: 50%; margin-left: -25px; bottom:21px; z-index: 2; border-radius: 50%; background:rgba(234,234,234,0.7); line-height: 13px; font-size: 12px; color: #000; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); border: 1px solid #7fbe26}
.scrollbtn:hover{background:#7fbe26; color: #fff;}

/*메인날씨*/
.weatherBox{position: absolute; left:5px; bottom: 20px; width: 150px; height:150px;  z-index: 5; background: #fff; border-radius: 50%;}
.weather{width:125px; height: 76px; margin:4px auto 9px auto;;}
.weather01{background: url(../images/weather01.png)center top no-repeat; background-size:70px}
.weather02{background: url(../images/weather02.png)center top no-repeat;background-size:70px}
.weather03{background: url(../images/weather03.png)center top no-repeat;background-size: 70px}
.weather04{background: url(../images/weather04.png)center top no-repeat;background-size: 70px}
.weather05{background: url(../images/weather05.png)center top no-repeat;background-size:70px}
.weather06{background: url(../images/weather06.png)center top no-repeat;background-size: 70px}
.we_right{width:100%; text-align:center; color: #000; padding-top:53px; }
.we_right p{display: inline;}
.we_right .tem{font-size: 20px; line-height: 26px; }
.we_right .we_name{font-size: 13px; line-height: 15px;}
.dust{width: 75%; border-top: 1px dotted rgba(255,255,255,0.4); border-collapse: collapse; font-size: 12px; margin: 0 auto;}

.dust th{width: 50px; text-align: left; font-weight: normal; color: #000; height: 16px; letter-spacing:-2px; font-size: 12px; padding-right: 2px;}
.dust td{ text-align: right; height: 16px; letter-spacing:-1px; border-radius: 20px; text-align: center; color: #fff; border-bottom: 1px solid #fff;}
.dust1{background: #00aaed;}
.dust2{background: #558b0a;}
.dust3{background: #b3a400;}
.dust4{background: #c91e06;}
.dust5{background: #7f7f7f;}

/*메인 소통정보지도*/
.main1dan{width: 100%; height: 670px; position: relative; box-sizing:border-box;}
.main1dan .main_conten{height:100%;}
.main_conten{width: 100%; margin: 0 auto; position: relative;}
.mainMap_btn{position: absolute; right: 7px; top: 50%; z-index:2; width:52px; height: 370px;  margin-top: -184px; background:#fff; border-radius: 3px; -webkit-box-shadow:0 0px 2px rgba(0, 0, 0, 0.5); padding:2px;}
.mainMap_btn li{width: 100%; height: 60px; background:#fff; border-radius:2px; overflow: hidden; margin-bottom: 2px; box-sizing:border-box;}
.mainMap_btn li.click{background:#4e3326; }
.mainMap_btn li button{border: none; width: 100%; height: 100%; font-size: 11px; padding-top: 23px; color: #000; line-height: 11px;}
.mainMap_btn li.click button{color: #fff;}
.mainMap_btn li button.btn1{letter-spacing: -1px; background:url(../images/btn1_nml.png)center 3px no-repeat;}
.mainMap_btn li.click button.btn1{letter-spacing: -1px; background:url(../images/btn1_click.png)center 3px no-repeat;}
.mainMap_btn li button.btn2{letter-spacing: -1px; background:url(../images/btn2_nml.png)center 3px no-repeat;}
.mainMap_btn li.click button.btn2{letter-spacing: -1px; background:url(../images/btn2_click.png)center 3px no-repeat;}
.mainMap_btn li button.btn3{letter-spacing: -1px; background:url(../images/btn3_nml.png)center 3px no-repeat;}
.mainMap_btn li.click button.btn3{letter-spacing: -1px; background:url(../images/btn3_click.png)center 3px no-repeat;}
.mainMap_btn li button.btn4{letter-spacing: -1px; background:url(../images/btn4_nml.png)center top no-repeat;}
.mainMap_btn li.click button.btn4{letter-spacing: -1px; background:url(../images/btn4_click.png)center top no-repeat;}
.mainMap_btn li button.btn5{letter-spacing: -1px; background:url(../images/btn5_nml.png)center 3px no-repeat;}
.mainMap_btn li.click button.btn5{letter-spacing: -1px; background:url(../images/btn5_click.png)center 3px no-repeat;}
.mainMap_btn li button.btn6{letter-spacing: -1px; background:url(../images/btn6_nml.png)center 0 no-repeat;}
.mainMap_btn li.click button.btn6{letter-spacing: -1px; background:url(../images/btn6_click.png)center 0 no-repeat;}

.mapBox{width:100%; height: 100%; background: #f7f7f7; position: relative; box-sizing:border-box;}
.mapBox .map{position: absolute!important; top: 0; bottom: 0; left: 0; right: 0; z-index: 1}
.mapinfo{position: absolute;left: 5px;top: 5px; background: rgba(255,255,255,0.5); height: 40px; border: 1px solid #c6cbc2; z-index: 7; font-size: 11px; color: #000; padding-top: 12px; box-sizing:border-box; text-align: center; border-radius: 20px;}
.mapinfo li{display: inline-block; line-height:16px; margin-right: 5px;}
.mapinfo li img{vertical-align: middle; margin-top: -2px;}
.mapinfo ul{display: inline-block; padding: 0 10px}
.mapinfo .fast{border-right: 1px solid #d1d1d1;}
.mapinfo .fast p{width:14px; height: 14px; border-radius:50%; display: inline-block; vertical-align: middle; margin-top: -2px; margin-right: 2px;}
.o1{background: #52d83c; border: 1px solid #3e8932;}
.o2{background: #ff8d00; border: 1px solid #9e5b08;}
.o3{background: #ff0000; border: 1px solid #8c2f2f;}
.o4{background: #b9b9b9; border: 1px solid #909090;}


/*메인 지체정체구간*/
.main_trafficBox{width:100%; height: 280px; background: #fff; position: relative; border-bottom-right-radius:20px; border-bottom-left-radius:20px; box-sizing:border-box; padding:44px 0 }
.main_trafficBox h3{background: url(../images/title1.png)left center no-repeat; width:235px; height: 100px; text-indent: -99999px;}

.tr_play{position: absolute; height: 125px; right: 0; width: 40px; top: 50%; margin-top: -62.5px;}
.tr_play .bar{position: absolute; width: 171px; height: 2px; background: #4e3326; top: 9px;}
.playbtn li{width: 40px; height: 40px; border-radius: 50%; margin-bottom: 2px; overflow: hidden; background: #7fbe26}
.playbtn li:hover{background: #5c9c02}
.playbtn li button{width: 100%; height: 100%; border: none; }
.tr_play .up{background: url(../images/play_up.png)center no-repeat;}
.tr_play .stop{background: url(../images/play_stop.png)center no-repeat;}
.tr_play .down{background: url(../images/play_down.png)center no-repeat;}
.tr_play .play{background: url(../images/play_play.png)center no-repeat;}


.traffic_conten{width: 870px; overflow: hidden!important; box-sizing:border-box; height:208px!important; position: absolute!important; left: 265px; top: 0;}
.traffic_conten .trList{width: 100%; border-bottom: 1px dotted #f3f3f3; height:67px; font-size: 12px; padding: 10px 0; box-sizing:border-box;}
.traffic_conten li:nth-child(3n){border-bottom: none;}

.traffic_conten .trList p{width: 40px; height: 40px; color: #fff; float: left; border-radius:50%; text-align: center; line-height: 40px; margin-top: 2px}
.traffic_conten .trList.red p{background: #ff6954;}
.traffic_conten .trList.red .roadname{color: #e51c00;}
.traffic_conten .trList.yellow p{background: #fcbb20;}
.traffic_conten .trList.yellow .roadname{color: #e88e00;}
.traffic_conten .trList .road{float: left; width: 80%; margin: 4px 0 0 10px;}
.traffic_conten .trList .road li{line-height: 19px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.traffic_conten .trList .roadname{font-weight: bold;}
.traffic_conten .trList .roadname span{color: #000; margin-right: 5px;}

.main2dan{width: 100%; background-image: url(../images/main_bg2.jpg), url(../images/main_bg3.png); background-color:#f8f8f8; background-position:left top, right bottom; background-repeat:no-repeat; position: relative; box-sizing:border-box; overflow: hidden;}
.main_conten2{width: 1200px; overflow: hidden; margin: 0 auto; position: relative;}
.maingoBox{display: block; width: 100%;background: #7fbe26; padding:16px 0; height: 146px; box-sizing:border-box; border-bottom-left-radius:20px;}
.maingoBox li{float: left; width: 25%; height: 100%; }
.maingoBox li a{display: block; width: 100%; height: 100%; border-right: 1px solid #a1d068; padding:14px 0 0 121px; box-sizing:border-box; text-align: left;}
.maingoBox li:last-child a{border-right: none;}
.maingoBox li.go1{background: url(../images/main_go1.png)20px center no-repeat;}
.maingoBox li.go2{background: url(../images/main_go2.png)20px center no-repeat;}
.maingoBox li.go3{background: url(../images/main_go3.png)20px center no-repeat;}
.maingoBox li.go4{background: url(../images/main_go4.png)20px center no-repeat;}
.maingoBox .title{color: #000; font-size:20px; letter-spacing: -1px; line-height: 23px; font-weight: bold;}
.maingoBox .title span{display: block; font-size: 14px; color: #36540b; line-height: 17px; letter-spacing: 0; font-weight:normal;}
.maingoBox .txt{color: #fff; font-size: 13px; line-height: 17px; display: block; margin-top:10px;}

.main_conten3{width: 1200px; margin: 0 auto; position: relative; text-align: center; padding-top:95px; }
.service{width: 100%; margin-top: 59px;}
.service .box{width: 24%; margin-right: 1%; border-bottom-left-radius:20px; border-top-right-radius:20px; box-sizing:border-box; position: relative; height: 293px; float: left;}
.service .box:last-child{margin-right: 0;}
.service .box h4{text-align: left; font-size: 19px; }
.service .box1{border: 1px solid #c7c7c7; background: #fff; padding:20px;}
.service .box1 h4 span{background: url(../images/main_txtbg1.png)bottom repeat-x;}
.service .box2{background: #282828; padding:20px 10px 10px 10px; margin-top: 60px;}
.service .box2 h4{color: #fff; padding-left: 10px;}
.service .box2 h4 span, .service .box3 h4 span{background: url(../images/main_txtbg2.png)bottom repeat-x;}
.service .box3{background: #33454d; padding:20px;  margin-top: 60px;}
.service .box3 h4{color: #fff;}
.service .bar{position: absolute; left: -8px; width:19px; height: 5px; }
.service .bar1{ background:#1398a1;}
.service .bar2{ background:#ff6954;}
.service .bar3{ background:#212225;}

.service .playbtn{position: absolute; right:5px; height:20px; margin-right: 5px; top: 23px;}
.service .playbtn li{margin-left: 2px;}

.main_conten3 .service .playbtn{height: 20px; width: 68px; }
.main_conten3 .service .playbtn li{float: left; height: 20px; width: 20px;}
.main_conten3 .box1 .up{background: url(../images/play_up2.png)center no-repeat;}
.main_conten3 .box1 .up:hover{background: url(../images/play_up2_hover.png)center no-repeat;}
.main_conten3 .box1 .stop{background: url(../images/play_stop2.png)center no-repeat;}
.main_conten3 .box1 .stop:hover{background: url(../images/play_stop2_hover.png)center no-repeat;}
.main_conten3 .box1 .down{background: url(../images/play_down2.png)center no-repeat;}
.main_conten3 .box1 .down:hover{background: url(../images/play_down2_hover.png)center no-repeat;}
.main_conten3 .box1 .play{background: url(../images/play_play2.png)center no-repeat;}
.main_conten3 .box1 .play:hover{background: url(../images/play_play2_hover.png)center no-repeat;}

.main_conten3 .box2 .up{background: url(../images/play_up3.png)center no-repeat;}
.main_conten3 .box2 .up:hover{background: url(../images/play_up3_hover.png)center no-repeat;}
.main_conten3 .box2 .stop{background: url(../images/play_stop3.png)center no-repeat;}
.main_conten3 .box2 .stop:hover{background: url(../images/play_stop3_hover.png)center no-repeat;}
.main_conten3 .box2 .down{background: url(../images/play_down3.png)center no-repeat;}
.main_conten3 .box2 .down:hover{background: url(../images/play_down3_hover.png)center no-repeat;}
.main_conten3 .box2 .play{background: url(../images/play_play3.png)center no-repeat;}
.main_conten3 .box2 .play:hover{background: url(../images/play_play3_hover.png)center no-repeat;}

.box .conten{width: 100%;}
.box1 .conten{margin-top: 12px;}
.service .trList{width: 100%; border-bottom: 1px dotted #f3f3f3; height:70px; font-size: 12px; padding: 12px 0; box-sizing:border-box;}
.service .trList p{width: 40px; height: 40px; color: #fff; float: left; border-radius:50%; text-align: center; line-height: 40px; margin-top: 2px}
.service .trList.dol1 p{background: #6ac5d7;}
.service .trList.dol2 p{background: #2e89cf;}
.service .trList.dol3 p{background: #b55de2;}
.service .trList.dol4 p{background: #7fbe26;}
.service .trList .road{float: left; width: 184px; margin: 4px 0 0 10px; text-align: left;}
.service .trList .road li{line-height: 19px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.service .trList .roadname{font-weight: bold; }

.box2 .conten{margin-top: 23px; width: 100%; height: 205px; box-sizing:border-box;}
.box2 .conten .cctvView{width: 266px; height: 205px; background: #000; border: 1px solid #000; box-sizing:border-box;}

.stats_go{display: block; font-size: 14px; color: #000; line-height:17px; width: 100%; height:244px; background: url(../images/main_img.png)center 19px no-repeat; padding-top: 182px; box-sizing:border-box;}

.box3 .conten{margin-top: 12px;}
.btn_noti{position: absolute; right: 10px; top:26px; display:block; background: #ee5a45; color: #fff; font-size: 11px; width: 48px; height: 22px; border-radius:20px; line-height: 21px;}
.main_notili{border-bottom: 1px dotted #536268; height: 73px; padding:13px 0; text-align: left; box-sizing:border-box; position: relative;}
.main_notili a{display: block; width: 100%; color: #fff; font-size: 13px; line-height: 16px; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word;}
.main_notili .notiday{position: absolute; bottom: 10px; font-size: 12px; color: #898888; padding-left: 17px; background: url(../images/main_day.png)left center no-repeat;}

.main_bus{width:100%; padding-top:50px; overflow: hidden; text-align: center;}
.main_bus h4{display: inline-block; width:116px; text-align: left; background: url(../images/main_bus1.png)left 36px no-repeat; height: 96px; line-height:96px; vertical-align: top; font-size: 15px;}
.main_bus ul{display: inline-block;}
.main_bus ul li{display: inline-block; border-left: 1px solid #bcd6e5; width:177px; height: 96px; vertical-align: top; }
.main_bus ul li a{display: block; box-sizing:border-box; padding-top:72px; font-size: 16px; font-weight: bold; color: #000;}
.main_bus ul .mainbus1 a{background: url(../images/main_bus2.png)center top no-repeat;}
.main_bus ul .mainbus2 a{background: url(../images/main_bus3.png)center top no-repeat;}
.main_bus ul .mainbus3 a{background: url(../images/main_bus4.png)center top no-repeat;}

.mainbenner{width: 100%; overflow: hidden; margin-top: 60px; height: 76px; margin-bottom: 100px;}
.mainbenner li{float: left; width:213px; height: 74px; border: 1px solid #e8e8e8; border-radius:10px;  background: #fff; margin-right: 31px;}
.mainbenner li:last-child{margin-right: 0;}
.mainbenner li a{display: block; width: 100%; height: 100%; text-align: center; padding-top: 13px; box-sizing:border-box; }


/*푸터*/
footer{width: 100%; padding-left:139px; box-sizing:border-box; height: 150px; background:#212225; position: relative; text-align: center;}
footer h2{position: absolute; left: 50%; top: -49px; margin-left: -48px;}
footer address{font-size: 14px; color: #fff; padding-top: 68px; line-height: 17px;}
.ad1{line-height: 17px;}
.capy{line-height: 15px; margin-top: 5px; font-size: 13px;}
footer address a{color: #ea4200; font-weight: bold; margin-left: 5px;}
.wrap1260{width:1200px; position: relative; margin:0 auto;}

/*실시간교통정보 - 도로별소통정보*/
.wrap.wrap_100{position: absolute; left: 0; right: 0; top: 0; bottom: 0; min-height: 450px; min-width:320px; z-index: 1}
.wrap_100 article{position: absolute; left:0; right: 0; top:80px; bottom: 0; z-index: 1}
.leftBox{position: absolute; left: 0; width:364px; top: 0; bottom: 0; border-right: 1px solid #404040; box-sizing:border-box; z-index: 3;}
.leftBox .subtop{width: 100%; height: 40px; text-align:left; line-height: 47px; background: url(../images/sub_title_bg.png)left no-repeat; box-sizing:border-box; padding-left: 10px;}
.leftBox .subtop h2{display:inline-block; vertical-align: top; color: #000; font-size: 15px;}
.leftBox .subtop a{display: inline-block; vertical-align: top; width:47px; height: 29px; background: url(../images/home_arrow.png)right center no-repeat; margin-top:28px; text-align: left;}
.leftBox .subtop a img{vertical-align: top;}
.leftBox .tab{width: 100%; height: 38px; padding:0 10px; box-sizing:border-box;}
.leftBox .tab li{float: left; width:25%; height:38px; border-right: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2; box-sizing:border-box; color: #fff; text-align: center;}
.leftBox .tab li a{color: #464646; display: block; width: 100%; height: 100%; line-height: 37px; font-size: 14px; font-weight: bold;}
.leftBox .tab li:first-child{border-left: 1px solid #d2d2d2;}
.leftBox .tab li.click{background: #0db2ac; border: 1px solid #005c62;}
.leftBox .tab li.click a{color: #fff;}

.trbox{position: absolute; top:77px; left: 10px; right: 10px; bottom: 10px;}
.searchbox{width: 100%; height:42px; box-sizing:border-box; border: 1px solid #005c62; background: #f6f6f6; }
.searchbox .inner{width: 100%; height: 100%; overflow: hidden; position: relative;}
.tr1box.searchbox .inner{width: 73%; float: right;}
.tr1box .selbox{float:left; width: 27%; border-right: 1px solid #005c62; box-sizing:border-box; height:100%;}
.tr1box .selbox select{background: #f6f6f6; width: 100%; height:100%; border: none;}
.inner input{width: 100%; height: 41px; border: none; background: #f6f6f6; font-size: 13px; padding:0 10px; box-sizing:border-box;}
.inner .btn_search{position: absolute; right:4px; top: 3px; width:29px; height: 33px; border: none; background:url(../images/sub_search_btn.png)center no-repeat;  }

.tab2{width: 100%; height: 28px; margin:10px 0; text-align: center;}
.tab2 li{display: inline-block; width:123px; height: 34px; }
.tab2 li.click a{background:url(../images/sub_tab_click.png)no-repeat; color: #fff;}
.tab2 li a{display: block; width: 100%; height: 100%; color: #000; font-size: 14px; letter-spacing: -1px; line-height: 24px; background:url(../images/sub_tab_nml.png)no-repeat;}

.subTitlebox{width: 100%; height:80px; margin-top: 8px; padding-top: 6px;}
.subTitlebox h3{font-size:22px; line-height:25px; letter-spacing: -2px; margin-bottom:7px; }
.subTitlebox p{color: #9e9e9e; font-size: 12px; letter-spacing: -1px; line-height: 15px;}

.Titlebox1{background: url(../images/tr_img1.png)right top no-repeat;}
.Titlebox2{background: url(../images/tr_img2.png)right top no-repeat;}
.Titlebox3{background: url(../images/tr_img3.png)right top no-repeat;}
.Titlebox4{background: url(../images/tr_img4.png)right top no-repeat;}
.Titlebox5{background: url(../images/tr_img5.png)right top no-repeat;}
.Titlebox6{background: url(../images/tr_img6.png)right 10px no-repeat;}
.Titlebox7{background: url(../images/tr_img7.png)right top no-repeat;}


.trcontenBox{position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #ededed; border-bottom: 1px solid #000; top:135px;}
.count{width: 100%; height:26px; line-height:25px; font-size:12px; color: #000; position: relative; border-bottom: 1px solid #000; box-sizing:border-box;}
.count p span{color: #f26629; font-weight: bold;}
.mapview{position: absolute; right: 0; top: 4px; height: 15px; line-height:16px; border: none; padding-left: 10px; border-left: 1px solid #e5e5e5; background: #fff; font-size: 12px; display: none;}
.sub_list_line{position: absolute; top:26px; left: 0; right: 0; bottom: 0; overflow-x:auto;}
.sub_list_line li{width: 100%; border-bottom: 1px dotted #d3d3d3; box-sizing: border-box; padding:10px 7px; cursor: pointer; position: relative;}
.sub_list_line li .txttitle{line-height:19px; padding: 14px 34px 14px 5px; box-sizing: border-box; font-size: 15px; font-weight: bold;}
.sub_list_line .trtab li, .sub_list_line .bustab li{ padding:0;}

/*소통정보상세보기*/
.ans{display: none; overflow: hidden; padding: 10px; background: #f2f2f2;}
.trtab li p{width: 100%;}
.list_off{background: url(../images/tr_arrow_nml.png)97% center no-repeat; color:#0054ab;}
.list_off:hover{background: url(../images/tr_arrow_hover.png)97% center #f7f7f7 no-repeat; text-decoration: underline;}
.list_on{background: url(../images/tr_arrow_click.png)97% center #0db2ac no-repeat; color: #fff;}
.list_on:hover{background: url(../images/tr_arrow_click.png)97% center #0db2ac no-repeat; color: #fff;}

.sub_list_line li.trinfo{border-bottom: none;}
.ans li{font-size: 12px; overflow: hidden; width: 100%; box-sizing: border-box;}
.ans .trname{height:26px; background: #fff; border: 1px solid #c6c6c6; text-align: center; font-weight: bold; line-height: 24px; background: url(../images/tr_bg.jpg)repeat;box-sizing:border-box;}
.ans .trinfo{height: 26px; line-height: 26px;}
.ans .trinfo p{line-height: 26px; width:48%; box-sizing: border-box; font-weight: bold;}
.ans .trinfo .trleft{float: left; text-align: right; padding-right:20px;}
.ans .trinfo .trright{float: right; text-align: left; padding-left:20px;}
.ans .trinfo .trleft.red{background: url(../images/tr_arow1_red.png)right center no-repeat;}
.ans .trinfo .trleft.yellow{background: url(../images/tr_arow1_yellow.png)right center no-repeat;}
.ans .trinfo .trleft.green{background: url(../images/tr_arow1_green.png)right center no-repeat;}
.ans .trinfo .trleft.gray{background: url(../images/tr_arow1_gray.png)right center no-repeat;}

.ans .trinfo .trright.red{background: url(../images/tr_arow2_red.png)left center no-repeat;}
.ans .trinfo .trright.yellow{background: url(../images/tr_arow2_yellow.png)left center no-repeat;}
.ans .trinfo .trright.green{background: url(../images/tr_arow2_green.png)left center no-repeat;}
.ans .trinfo .trright.gray{background: url(../images/tr_arow2_gray.png)left center no-repeat;}

.ans .trinfo p.green{color: #5ea700}
.ans .trinfo p.red{color: #a70000}
.ans .trinfo p.yellow{color: #a79900}
.ans .trinfo p.gray{color: #9a9a9a}

/*지도*/
.m_map_top{display: none; z-index: 2; position: absolute; top: 0; background: #fff; left: 0; right: 0; height: 40px; line-height: 39px; border-bottom: 1px solid #bebebe; font-weight: bold; padding-left: 10px; box-sizing: border-box;}
.m_map_top .title{font-size: 14px;}
.map_box{position: absolute; z-index: 4; left: 364px; top:0; right: 0; bottom: 0;}
.delay_info{position: absolute; top: 0; left: 0; right: 0; height:34px; z-index: 2; background: rgba(23,23,23,0.7);}
.delay_info_left{float: left; padding-left: 5px; box-sizing: border-box; width: 50%; height: 34px; line-height: 34px; text-overflow:ellipsis; white-space: nowrap;}
.delay_info_left p{color: #fff; font-size: 13px;}
.delay_info_left p span, .delay_info_left p span.yellow{color: #ffff00; margin-right: 3px;}
.delay_info_left p span.red{color: #ff7f4c;}
.delay_info .comment{float: right; margin: 8px;}
.delay_info .comment li{float: left; font-size: 11px; color: #fff; margin-left: 5px;}
.delay_info .comment li img{vertical-align: middle; margin-top: -3px; margin-right: 2px;}
.mapConten{z-index: 1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #f7f7f7;}
.trmapbox{width: 100%; height: 100%;}
.m_map_top .btn_list{position: absolute; right: 3px; top: 5px; border:none; background:#7fbe26; height: 30px; line-height:30px; border-radius:20px; padding: 0 10px; color: #fff; background-size:100%; letter-spacing: -1px; font-size: 12px;}


/*소통정보 팝업*/
.pop_tr{position: absolute; z-index: 9; padding:6px; height:37px; border: 1px solid #212121; background: #454545; font-size: 11px; border-radius:10px;}
.pop_tr h3{color: #fff; letter-spacing: -1px; line-height: 19px;}
.pop_tr h3 span{font-weight: normal;}
.pop_tr .trtxt{font-weight: bold; line-height: 17px; font-size: 12px;  text-align:left;}
.pop_tr .trtxt .color{width:15px; height: 15px; border-radius:10px; display: inline-block; vertical-align: middle; margin-top: -2px;}
.pop_tr .yellow{color: #ffb400;}
.pop_tr .yellow .color{background: #ffae00; }
.pop_tr .red{color: #ff7f46;}
.pop_tr .red .color{background: #ff4e00; }
.pop_tr .green{color: #c3ff33;}
.pop_tr .green .color{background: #c3ff33; }
.pop_tr .gray{color: #a7a7a7;}
.pop_tr .gray .color{background: #a7a7a7; }

/*CCTV*/
.sub_list_line .listarrow li{padding: 13px 7px 14px 7px; letter-spacing: -1px; background: url(../images/tr_arrow.png)97% center no-repeat; color: #0054ab; font-size: 15px; font-weight: bold;}
.listarrow li:hover{background:url(../images/tr_arrow2_hover.png)97% center #f7f7f7 no-repeat; text-decoration: underline;}
.cctvinfo .delay_info_left{width: 100%;}

/*팝업 공통*/
.popupBox{background: #454545; border-radius:10px; position: absolute; z-index: 9; padding:12px 12px 0 12px; box-sizing:border-box;}
.popupBox .title{width: 100%; height:32px; text-align: center;}
.popupBox .pop_close{position: absolute; right: 5px; top: 5px; width: 25px; height: 25px; background: url(../images/pop_close.png)center no-repeat; border: none; z-index: 2;}
.popupBox .title h3{color: #fff; font-size:15px; line-height: 15px;}
/*CCTV팝업*/
.pop_scctv{width: 320px; height: 232px;  top:100px; left:100%; transform: translate(-50%, -50%);background-color: #fff;}
.pop_cctv{width: 320px; height:309px; }
.cctvVidio{width: 294px; height: 215px; border: 1px solid #000; margin: 0 auto; background: #000;}
.cctvBottom{height: 48px; width: 100%; position: relative;}
.cctvBottom p{color: #ff8429; font-size: 12px; line-height: 45px;}
.popbtnset {position: absolute; bottom:2px; right:0;}
.popbtnset li{float: left; margin-left: 3px;}
.popbtnset li button {width:38px; height: 38px; border: none; }
.popbtnset li button.left{background:url(../images/pop_left_nml.png)center no-repeat;}
.popbtnset li button.left:hover{background:url(../images/pop_left_hover.png)center no-repeat;}
.popbtnset li button.left:active{background:url(../images/pop_left_click.png)center no-repeat;}
.popbtnset li button.left:disabled{background:url(../images/pop_left_be.png)center no-repeat; cursor: auto;}
.popbtnset li button.right{background:url(../images/pop_right_nml.png)center no-repeat;}
.popbtnset li button.right:hover{background:url(../images/pop_right_hover.png)center no-repeat;}
.popbtnset li button.right:active{background:url(../images/pop_right_click.png)center no-repeat;}
.popbtnset li button.right:disabled{background:url(../images/pop_right_be.png)center no-repeat; cursor: auto;}


/*스마트스쿨*/
.pop_smart{width: 1100px; height: 700px; top: 50%; left:50%; margin-top: -332px; margin-left:-435px }
/* .pop_scctv{width: 320px; height: 232px;  top:100px; left:100%; transform: translate(-50%, -50%);background-color: #fff;} */
/* .pop_scctv .cctv{width: 100%; height: 170px;  background: #000;}  */
.cctvbox{height: 169px; border: 1px solid #000; background: #000; box-sizing: }
.cctvtxt{width: 100%; font-size: 12px; color: #CC4700; text-align: center; position: absolute; bottom: 0; height:23px; }
.option{position: absolute; right: 10px; top: 10px; width:50px; background:#fff; z-index: 2; border-radius: 5px; border: 1px solid #c3c3c3; box-shadow: 0 0px 2px 1px rgba(0,0,0,0.1); overflow: hidden;}
.option li{width: 100%; height: 50px; border-bottom: 1px solid #ededed;}
.option li button{width: 100%; height: 100%; font-size: 11px; text-align: center; padding:13px 0 0 0;}
.option li button.btn_cctv{background: url(../images/cc_nml.png)center 8px no-repeat;}
.option li button.btn_cctv.click{background: url(../images/cc_click.png)center 8px #3b3b3b no-repeat; color: #fff;}
.option li button.btn_replay{background: url(../images/cc_re_nml.png)center 8px no-repeat;}
.option li button.btn_replay.click, .option li button.btn_replay:active{background: url(../images/cc_re_click.png)center 8px #3b3b3b no-repeat; color: #fff;}
.singleclose {position: absolute; right: 0; top: 0; width: 35px; height: 35px; background: url(../images/pop_close.png)center no-repeat; z-index: 2;}
.singleclose:hover{ background: url(../images/pop_close.png)center #4f4f4f no-repeat;}
/*팝업*/
.popup{position: absolute; z-index: 3; border-radius: 10px; border: 1px solid #3b3b3b; overflow: hidden; background-color: #fff;}
.popup h5{width: 100%; background: #3b3b3b; color: #fff; font-size: 14px; font-weight: bold; text-align: left; padding-left: 10px; height: 35px; line-height: 35px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.popup .btnclose{position: absolute; right: 0; top: 0; width: 35px; height: 35px; background: url(../images/pop_close.png)center no-repeat; z-index: 2;}
.popup .btnclose:hover{ background: url(../images/pop_close.png)center #4f4f4f no-repeat;}
.pop_conten{background: #f5f5f5; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position: absolute; top: 35px; width: 100%; bottom: 0;}
.popup .poparrow{position: absolute; left: 50%; bottom: -18px; margin-left: -7px;}

.pop_traffic{width: 220px; height: 120px; left: 50%; margin-left: -110px; bottom: 10px;}
.pop_traffic .popupspeed{position: absolute; z-index: 2; display: block; padding: 2px 5px; border-radius: 10px; right: 36px; top: 6px; font-size: 12px; color: #000;}
.popupspeed.green{background: #d7fb2e;}
.popupspeed.yellow{background: #ffc600;}
.popupspeed.red{background: #ff7b7b;}
.popupspeed.gray{background: #cbcbcb;}
.roadname{font-size: 12px; line-height: 20px; width: 100%; padding:5px 10px;}
.roadtime{width: 100%; font-size: 12px; font-weight: bold; text-align: center; line-height: 20px;}

.popup.pop_accessibility .btnclose{text-indent:1px; color: #fe8f1d; font-size: 14px; font-weight: bold; width: 55px; background: url(../images/close.png)center left no-repeat;}
.pop_accessibility{width:786px; height: 180px; right: 348px; bottom: 0; display:none; }
.pop_accessibility .pop_conten{background: #292929; padding: 10px; color: #fff; font-size: 13px; line-height: 18px; text-align: left; overflow-y:scroll; }


/*vms팝업*/
.pop_vms{max-width: 364px; right: 5px; top:38px;}
.vmsVeiw{border: 1px solid #000; margin: 0 auto; background: #000; padding: 5px; box-sizing:border-box;}
.vmsVeiw img{max-width:334px;}

/*DSRC팝업*/
.pop_dsrc{position: absolute; z-index: 9; padding:5px 6px 6px 6px; height:17px; border: 1px solid #212121; background: #454545; font-size: 11px; border-radius:10px; width: 133px; text-align: center;}
.pop_dsrc .th{display: inline-block; font-size: 11px; line-height: 17px; color: #c1c1c1; vertical-align: middle;}
.pop_dsrc .trtxt{font-weight: bold; line-height: 17px; font-size: 12px; display: inline-block; vertical-align: middle;}
.pop_dsrc .trtxt .color{width:15px; height: 15px; border-radius:10px; display: inline-block; vertical-align: middle; margin-top: -2px; margin-right: 2px}
.pop_dsrc .yellow{color: #ffb400;}
.pop_dsrc .yellow .color{background: #ffae00; }
.pop_dsrc .yellow{color: #ffb400;}
.pop_dsrc .red{color: #ff7f46;}
.pop_dsrc .red .color{background: #ff4e00; }
.pop_dsrc .green{color: #c3ff33;}
.pop_dsrc .green .color{background: #c3ff33; }
.pop_dsrc .gray{color: #a7a7a7;}
.pop_dsrc .gray .color{background: #a7a7a7; }

/*VDS팝업*/
body .pop_vds{padding:10px 5px 5px 5px; width: 320px;}
.vdsVeiw{width: 308px; border: 1px solid #000; margin: 0 auto; background: #fff; overflow: hidden;}
.vdsVeiw .left{float: left; width: 50%; font-size: 11px;}
.vdsVeiw .right{float: right; width: 50%; box-sizing:border-box; border-left: 1px solid #a3a3a3; font-size: 11px;}
.vdsVeiw dt{width: 100%; height: 25px; background: #f6f6f6; text-align: center; line-height: 24px; border-bottom: 1px solid #e3e3e3; color: #000; letter-spacing: -1px; font-weight:bold; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.vdsVeiw table{border-collapse: collapse; width: 100%; margin: 3px 0;}
.vdsVeiw table th{width: 39px; height:19px; color: #858585; font-size: 11px; text-align: left; padding-left: 5px; box-sizing:border-box; letter-spacing: -1px; font-weight: normal;}
.vdsVeiw table td{font-size: 12px; font-weight: bold;}
.vdsVeiw table td .color{width:15px; height: 15px; border-radius:10px; display: inline-block; vertical-align: middle; margin-top: -2px; margin-right: 2px;}
.vdsVeiw table td.green{color:#0dbe00; }
.vdsVeiw table td.green .color{background:#0dbe00;}
.vdsVeiw table td.yellow{color:#e2a700; }
.vdsVeiw table td.yellow .color{background:#ffbc00;}
.vdsVeiw table td.red{color:#e20000; }
.vdsVeiw table td.red .color{background:#e20000;}
.vdsVeiw table td.gray{color:#969696; }
.vdsVeiw table td.gray .color{background:#969696;}

/*돌발상황*/
.sub_list_line .listarrow_un li{padding: 10px 39px 11px 7px; letter-spacing: -1px; background: url(../images/tr_arrow.png)97% center no-repeat; color: #000; font-size: 14px; line-height: 20px;}
.listarrow_un li:hover{background:url(../images/tr_arrow2_hover.png)97% center #f7f7f7 no-repeat; text-decoration: underline;}
.listarrow_un p{display: inline-block; width:30px; height: 20px; color: #fff; font-size: 11px; border-radius:20px; line-height: 20px; text-align: center; vertical-align: middle; margin: -3px 2px 0 0}
.listarrow_un p.un1{background: #5cbacd; }
.listarrow_un p.un2{background: #2e89cf; }
.listarrow_un p.un3{background: #b55ee3; }
.listarrow_un p.un4{background: #f38125; }
body .pop_un{padding:10px 5px 5px 5px; width: 320px; height: 205px;}
body .pop_un.popdol{height: 208px;}
.popdol .td3{height:50px; letter-spacing: -1px;}
.popupBox.pop_un.popdol .title{height:28px; }
.unVeiw{width: 308px; border: 1px solid #000; margin: 0 auto; background: #fff; overflow: hidden;}
.unVeiw table{border-collapse: collapse; width: 100%; font-size: 12px;}
.unVeiw table tr{border-bottom: 1px solid #e3e3e3; }
.unVeiw table th{width:58px; font-size: 11px; border-right: 1px solid #e3e3e3; background: #f6f6f6; text-align: left; padding-left:7px; box-sizing:border-box; height:28px; font-weight: normal; }
.unVeiw table td{text-align: left; padding-left: 7px; box-sizing:border-box; font-weight: bold; } 
.unVeiw table td.red{color: #f57300;}

/*스마트교차로*/
.mainsmart .cctv1,.mainsmart .cctv2,.mainsmart .cctv3,.mainsmart .cctv4,.mainsmart .cctv5{top: 5px!important; left: 50%!important; right:auto!important; bottom:auto!important; margin-top:0!important; margin-left:-160px!important; display: none;}
.unbox{top:39px;}
.smartBox{width:1103px; height: 807px; margin:-403px 0 0 -551px; left: 50%; top: 50%; padding:12px 0 0 0; overflow: hidden; display:none;}
.smartBox.mainsmart{width: 869px; height: 541px; margin: -197px 0 0 -585px; z-index: 991; }
body .smartBox .smartmap{position: absolute; left: 1px; right:1px; top: 41px; bottom: 1px; border-bottom-left-radius:9px; border-bottom-right-radius:9px;}
.crossicon{position: absolute; z-index: 2; left: 50%; top: 50%; margin:-20px 0 0 -20px; width: 41px; height: 41px; display: none;}
.smartmap .map_btn{z-index: 7; position: absolute; left: 2px; top: 2px;}
.mainsmart .smartmap .map_btn{display: none;}
.smartmap .map_btn li{width: 45px; height: 45px; background: #fff;  border-radius:2px; overflow: hidden; border: 1px solid #c6c6c6;}
.smartmap .map_btn li button{width: 100%; height: 100%; box-sizing:border-box; background:url(../images/btn2_nml.png)center 4px no-repeat; border: none; font-size: 11px; padding-top: 18px;}
.smartmap .map_btn li.click{background:#1398a1;  border: 1px solid #008e89; }
.smartmap .map_btn li.click button{color: #fff; background:url(../images/btn2_click.png)center 4px no-repeat; }
/* .smart_traffic{} */
.smart_traffic ul{width:86px; height:37px; position: absolute; z-index: 3; display: block;}
.smart_traffic ul li{position: absolute; top: 0; width: 37px; height: 114px;}
.smart_traffic ul li:nth-child(1){left: 0; bottom: 0;}
.smart_traffic ul li:nth-child(2){left:25px; bottom: 0;}
.smart_traffic ul li:nth-child(3){right:0; bottom: 0;}
.smart_traffic li.st_right.green{background:url(../images/smart_green_right.png)no-repeat;}
.smart_traffic li.st_left.green{background:url(../images/smart_green_left.png)no-repeat;}
.smart_traffic li.st_center.green{background:url(../images/smart_green_center.png)no-repeat;}
.smart_traffic li.st_right.red{background:url(../images/smart_red_right.png)no-repeat;}
.smart_traffic li.st_left.red{background:url(../images/smart_red_left.png)no-repeat;}
.smart_traffic li.st_center.red{background:url(../images/smart_red_center.png)no-repeat;}
.smart_traffic li.st_right.yellow{background:url(../images/smart_yellow_right.png)no-repeat;}
.smart_traffic li.st_left.yellow{background:url(../images/smart_yellow_left.png)no-repeat;}
.smart_traffic li.st_center.yellow{background:url(../images/smart_yellow_center.png)no-repeat;}
.smart_traffic li.st_right.gray{background:url(../images/smart_gray_right.png)no-repeat;}
.smart_traffic li.st_left.gray{background:url(../images/smart_gray_left.png)no-repeat;}
.smart_traffic li.st_center.gray{background:url(../images/smart_gray_center.png)no-repeat;}


.smart_traffic .st1{right: 50%; top: 50%;}
.smart_traffic .st2{left: 50%; top: 50%;}
.smart_traffic .st3{left: 50%; top: 50%;}
.smart_traffic .st4{right: 50%; top: 50%;}
.smart_traffic .st5{right: 50%; top: 50%;}

.smart_cctvset{display: none;}
.mainsmart .smart_cctvset{display: block;}
.smart_cctvset li{position: absolute; z-index: 4; width:30px; height: 30px;}
.smart_cctvset li button{width:100%; height:100%; border: none; background: url(../images/smart_cctv_nml.png)center no-repeat; }
.smart_cctvset li button.click{background: url(../images/smart_cctv_click.png)center no-repeat; }
.smart_cctvset li.CC1{right: 50%; top: 50%;}
.smart_cctvset li.CC2{left: 50%; top: 50%;}
.smart_cctvset li.CC3{left: 50%; top: 50%;}
.smart_cctvset li.CC4{right: 50%; top: 50%;}
.smart_cctvset li.CC5{right: 50%; top: 50%;}

.smartBox .pop_cctv{height: 201px; padding:10px 0 0 0;}
.smartBox .pop_cctv .cctvVidio{width:315px; height: 136px;}
.smartBox .pop_cctv .cctvBottom{height: 25px; text-align: center;}
.smartBox .pop_cctv .cctvBottom p{line-height: 25px;}
.smartBox .s_popupBox .title{width:100%; border: none; z-index: 2; height: 24px; background: none;}
.smartBox .s_popupBox .title h3{font-size: 12px;  color: #fff; line-height: 15px;}

.s_popupBox{background: #454545; border-radius:10px; position: absolute; z-index: 9; padding:12px 12px 0 12px; box-sizing:border-box;}
.s_popupBox .s_pop_close{position: absolute; right: 5px; top: 5px; width: 25px; height: 25px; background: url(../images/pop_close.png)center no-repeat; border: none; z-index: 2;}
.s_pop_close{display: none;}
.mainsmart .s_pop_close{display: block;}

/*1.강서사거리*/
.s_map1{background:url(../images/s_map1.jpg)center no-repeat;}
.s_map1 .st1{margin:-78px -12px 0 0; transform:rotate(160deg);}
.s_map1 .st2{margin:-42px 0 0 21px; transform:rotate(-124deg);}
.s_map1 .st3{margin:24px 0 0 -24px; transform:rotate(-35deg);}
.s_map1 .st4{margin:-7px 26px 0 0; transform:rotate(78deg);}
.s_map1 .CC1{margin:-104px 27px 0 0;;}
.s_map1 .CC2{margin:-56px 0 0 78px;}
.s_map1 .CC3{margin:58px 0 0 23px;}
.s_map1 .CC4{margin:4px 87px 0 0;}
.s_map1 .CC5{margin:36px 76px 0 0;}

.s_map1 .cctv3{top: 5px; left: 50%; margin-left:-242px; }
.s_map1 .cctv0{top: 50%; right:5px;  margin-top: -310px;}
.s_map1 .cctv2{bottom: 5px; left: 50%; margin-left:-90px; }
.s_map1 .cctv1{top: 50%; left:5px; margin-top: -140px;}
.s_map1 .cctv5{top: 50%; left:5px; margin-top: 70px;}

/*2.내덕칠거리*/
.s_map2{background:url(../images/s_map2.jpg)center no-repeat;}
.s_map2 .st1{margin:-99px -19px 0 0; transform:rotate(166deg);}
.s_map2 .st2{margin:-80px 0 0 5px; transform:rotate(-136deg);}
.s_map2 .st3{margin:0px 0 0 34px; transform:rotate(-91deg);}
.s_map2 .st4{margin:41px -48px 0 0; transform:rotate(-11deg);}
.s_map2 .st5{margin:3px 16px 0 0; transform:rotate(87deg);}
.s_map2 .CC1{margin:-132px 19px 0 0;}
.s_map2 .CC2{margin:-107px 0 0 61px;}
.s_map2 .CC3{margin:3px 0 0 98px;}
.s_map2 .CC4{margin:82px -26px 0 0;}
.s_map2 .CC5{margin:8px 82px 0 0;}

.s_map2 .cctv3{top: 5px; left: 50%; margin-left:-233px; }
.s_map2 .cctv4{top:65px; right:101px;}
.s_map2 .cctv0{top:287px; right:5px}
.s_map2 .cctv2{left: 50%; bottom:5px;  margin-left:-129px;}
.s_map2 .cctv1{left:5px; top: 302px; }

/*3.월곡사거리*/
.s_map3{background:url(../images/s_map3.jpg)center no-repeat;}
.s_map3 .st1{margin:-63px -86px 0 0; transform:rotate(219deg);}
.s_map3 .st2{margin:0px 0 0 48px; transform:rotate(-82deg);}
.s_map3 .st3{margin:26px 0 0 -56px; transform:rotate(6deg);}
.s_map3 .st4{margin:-25px 18px 0 0; transform:rotate(99deg);}
.s_map3 .CC1{margin:-88px -79px 0 0;}
.s_map3 .CC2{margin:9px 0 0 113px;}
.s_map3 .CC3{margin:64px 0 0 -34px;}
.s_map3 .CC4{margin:-27px 83px 0 0;}

.s_map3 .cctv3{top: 5px; left: 50%; margin-left:20px; }
.s_map3 .cctv0{top:50%; right:5px; margin-top:-49px;}
.s_map3 .cctv2{bottom: 5px; left: 50%; margin-left:-198px;}
.s_map3 .cctv1{left:5px; top:50%; margin-top:-136px;}

/*4.개신성화사거리*/
.s_map4{background:url(../images/s_map4.jpg)center no-repeat;}
.s_map4 .st1{margin:-75px -19px 0 0; transform:rotate(155deg);}
.s_map4 .st2{margin:-49px 0 0 12px; transform:rotate(-112deg);}
.s_map4 .st3{margin:31px 0 0 -21px; transform:rotate(-27deg);}
.s_map4 .st4{margin:14px 6px 0 0; transform:rotate(60deg);}
.s_map4 .CC1{margin:-104px 24px 0 0;}
.s_map4 .CC2{margin:-60px 0 0 73px;}
.s_map4 .CC3{margin:67px 0 0 22px;}
.s_map4 .CC4{margin:36px 67px 0 0;}

.s_map4 .cctv3{top: 5px; left: 50%; margin-left:-246px; }
.s_map4 .cctv0{top:50%; right:5px; margin-top:-238px;}
.s_map4 .cctv2{bottom: 5px; left: 50%; }
.s_map4 .cctv1{left:5px; top:50%; margin-top:76px;}

/*5.장암사거리*/
.s_map5{background:url(../images/s_map5.jpg)center no-repeat;}
.s_map5 .st1{margin:-79px -1px 0 0; transform:rotate(148deg);}
.s_map5 .st2{margin:-30px 0 0 19px; transform:rotate(-102deg);}
.s_map5 .st3{margin:38px 0 0 -5px; transform:rotate(-27deg);}
.s_map5 .st4{margin:-4px 19px 0 0; transform:rotate(80deg);}
.s_map5 .CC1{margin:-105px 45px 0 0;}
.s_map5 .CC2{margin:-34px 0 0 79px;}
.s_map5 .CC3{margin:71px 0 0 36px;}
.s_map5 .CC4{margin:6px 82px 0 0;}

.s_map5 .cctv3{top: 5px; left: 50%; margin-left:-278px; }
.s_map5 .cctv0{top:50%; right:5px; margin-top:-145px;}
.s_map5 .cctv2{bottom: 5px; left: 50%;  margin-left:-35px; }
.s_map5 .cctv1{left:5px; top:50%; margin-top:-49px;}

/*6.봉명사거리*/
.s_map6{background:url(../images/s_map6.jpg)center no-repeat;}
.s_map6 .st1{margin:-76px -86px 0 0; transform:rotate(210deg);}
.s_map6 .st2{margin:-12px 0 0 36px; transform:rotate(-88deg);}
.s_map6 .st3{margin:45px 0 0 -64px; transform:rotate(30deg);}
.s_map6 .st4{margin:-21px 14px 0 0; transform:rotate(93deg);}
.s_map6 .CC1{margin:-103px -74px 0 0;}
.s_map6 .CC2{margin:-9px 0 0 96px;}
.s_map6 .CC3{margin:75px 0 0 -53px;}
.s_map6 .CC4{margin:-19px 76px 0 0;}

.s_map6 .cctv3{top: 5px; left: 50%; margin-left:-41px; }
.s_map6 .cctv0{top:50%; right:5px; margin-top:-89px;}
.s_map6 .cctv2{bottom: 5px; left: 50%;  margin-left:-267px; }
.s_map6 .cctv1{left:5px; top:50%; margin-top:-118px;}

/*7.상당사거리*/
.s_map7{background:url(../images/s_map7.jpg)center no-repeat;}
.s_map7 .st1{margin:-90px -38px 0 0; transform:rotate(175deg);}
.s_map7 .st2{margin:-44px 0 0 8px; transform:rotate(-99deg);}
.s_map7 .st3{margin:37px 0 0 -29px; transform:rotate(-7deg);}
.s_map7 .st4{margin:-15px 9px 0 0; transform:rotate(80deg);}
.s_map7 .CC1{margin:-121px -6px 0 0;}
.s_map7 .CC2{margin:-47px 0 0 71px;}
.s_map7 .CC3{margin:75px 0 0 2px;}
.s_map7 .CC4{margin:-5px 73px 0 0;}

.s_map7 .cctv3{top: 5px; left: 50%; margin-left:-179px; }
.s_map7 .cctv0{top:50%; right:5px; margin-top:-151px;}
.s_map7 .cctv2{bottom: 5px; left: 50%;  margin-left:-130px; }
.s_map7 .cctv1{left:5px; top:50%; margin-top:-52px;}

/*8.분평사거리*/
.s_map8{background:url(../images/s_map8.jpg)center no-repeat;}
.s_map8 .st1{margin:-66px -67px 0 0; transform:rotate(-146deg);}
.s_map8 .st2{margin:5px 0 0 -6px; transform:rotate(-59deg);}
.s_map8 .st3{margin:17px 0 0 -70px; transform:rotate(36deg);}
.s_map8 .st4{margin:-56px 3px 0 0; transform:rotate(130deg);}
.s_map8 .CC1{margin:-91px -56px 0 0;}
.s_map8 .CC2{margin:26px 0 0 52px;}
.s_map8 .CC3{margin:50px 0 0 -64px;}
.s_map8 .CC4{margin:-72px 57px 0 0;}

.s_map8 .cctv3{top: 5px; left: 50%; margin-left:-31px; }
.s_map8 .cctv0{top:50%; right:5px; margin-top:-23px;}
.s_map8 .cctv2{bottom: 5px; left: 50%;  margin-left:-306px; }
.s_map8 .cctv1{left:5px; top:50%; margin-top:-305px;}

/*9.산업단지육거리*/
.s_map9{background:url(../images/s_map9.jpg)center no-repeat;}
.s_map9 .st1{margin:-105px -36px 0 0; transform:rotate(-178deg);}
.s_map9 .st2{margin:-34px 0 0 59px; transform:rotate(-96deg);}
.s_map9 .st3{margin:27px 0 0 67px; transform:rotate(-65deg);}
.s_map9 .st4{margin:-85px 55px 0 0; transform:rotate(136deg);}
.s_map9 .st5{margin:-8px 59px 0 0; transform:rotate(79deg);}
.s_map9 .CC1{margin:-128px -8px 0 0}
.s_map9 .CC2{margin:-34px 0 0 124px;}
.s_map9 .CC3{margin:45px 0 0 124px;}
.s_map9 .CC4{margin:-102px 103px 0 0;}
.s_map9 .CC5{margin:2px 116px 0 0;}

.s_map9 .cctv3{top: 5px; left: 50%; margin-left:-160px; }
.s_map9 .cctv0{top:50%; right:5px; margin-top:-128px;}
.s_map9 .cctv2{top:50%; right:5px; margin-top: 79px;}
.s_map9 .cctv5{left:5px; top:50%; margin-top:-305px;}
.s_map9 .cctv1{left:5px; top:50%; margin-top:-59px;}

/*10.사창사거리*/
.s_map10{background:url(../images/s_map10.jpg)center no-repeat;}
.s_map10 .st1{margin:-86px -21px 0 0; transform:rotate(-192deg);}
.s_map10 .st2{margin:-22px 0 0 15px; transform:rotate(-95deg);}
.s_map10 .st3{margin:42px 0 0 -24px; transform:rotate(-14deg);}
.s_map10 .st4{margin:-8px 21px 0 0; transform:rotate(85deg);}
.s_map10 .CC1{margin:-95px 11px 0 0;}
.s_map10 .CC2{margin:-22px 0 0 77px;}
.s_map10 .CC3{margin:78px 0 0 10px;}
.s_map10 .CC4{margin:-2px 84px 0 0;}

.s_map10 .cctv3{top: 5px; left: 50%; margin-left:-214px; }
.s_map10 .cctv0{top:50%; right:5px; margin-top:-118px;}
.s_map10 .cctv2{bottom: 5px; left: 50%;  margin-left:-88px; }
.s_map10 .cctv1{left:5px; top:50%; margin-top:-76px;}

/*11.산남사거리*/
.s_map11{background:url(../images/s_map11.jpg)center no-repeat;}
.s_map11 .st1{margin:-70px -9px 0 0; transform:rotate(-210deg);}
.s_map11 .st2{margin:-54px 0 0 6px; transform:rotate(-127deg);}
.s_map11 .st3{margin:24px 0 0 -13px; transform:rotate(-34deg);}
.s_map11 .st4{margin:1px 19px 0 0; transform:rotate(87deg);}
.s_map11 .CC1{margin:-97px 36px 0 0}
.s_map11 .CC2{margin:-70px 0 0 59px;}
.s_map11 .CC3{margin:55px 0 0 32px;}
.s_map11 .CC4{margin:6px 82px 0 0;}

.s_map11 .cctv3{top: 5px; left: 50%; margin-left:-270px; }
.s_map11 .cctv0{top:50%; right:5px; margin-top:-293px;}
.s_map11 .cctv2{bottom: 5px; left: 50%;  margin-left:-14px; }
.s_map11 .cctv1{left:5px; top:50%; margin-top:-70px;}

/*12.석교육거리*/
.s_map12{background:url(../images/s_map12.jpg)center no-repeat;}
.s_map12 .st1{margin:-74px -35px 0 0; transform:rotate(-185deg);}
.s_map12 .st2{margin:-24px 0 0 34px; transform:rotate(-79deg);}
.s_map12 .st3{margin:51px 0 0 2px; transform:rotate(-26deg);}
.s_map12 .st4{margin:46px -10px 0 0; transform:rotate(33deg);}
.s_map12 .CC1{margin:-97px -5px 0 0}
.s_map12 .CC2{margin:-15px 0 0 93px;}
.s_map12 .CC3{margin:81px 0 0 42px;}
.s_map12 .CC4{margin:72px 33px 0 0;;}

.s_map12 .cctv3{top: 5px; left: 50%; margin-left:-176px; }
.s_map12 .cctv0{top:50%; right:5px; margin-top:-74px;}
.s_map12 .cctv2{bottom: 5px; left: 50%;  margin-left:-9px; }
.s_map12 .cctv1{left:5px; bottom: 5px; margin-left:168px; }

/*13.상리사거리*/
.s_map13{background:url(../images/s_map13.jpg)center no-repeat;}
.s_map13 .st1{margin:-68px -8px 0 0; transform:rotate(-219deg);}
.s_map13 .st2{margin:-45px 0 0 1px; transform:rotate(-122deg);}
.s_map13 .st3{margin:23px 0 0 -17px; transform:rotate(-27deg);}
.s_map13 .st4{margin:0px 18px 0 0; transform:rotate(75deg);}
.s_map13 .CC1{margin:-89px 39px 0 0}
.s_map13 .CC2{margin:-59px 0 0 57px;}
.s_map13 .CC3{margin:55px 0 0 24px;}
.s_map13 .CC4{margin:11px 76px 0 0;}

.s_map13 .cctv3{top: 5px; left: 50%; margin-left:-358px; }
.s_map13 .cctv0{top:50%; right:5px; margin-top:-315px;}
.s_map13 .cctv2{bottom: 5px; left: 50%;  margin-left:-55px; }
.s_map13 .cctv1{left:5px; top:50%; margin-top:-59px;}


/*14.송절교차로*/
.s_map14{background:url(../images/s_map14.jpg)center no-repeat;}
.s_map14 .st1{margin:-65px -21px 0 0; transform:rotate(-217deg);}
.s_map14 .st2{margin:-57px 0 0 4px; transform:rotate(-129deg);}
.s_map14 .st3{margin:31px 0 0 -31px; transform:rotate(-1deg);}
.s_map14 .st4{margin:-2px 3px 0 0; transform:rotate(58deg);}
.s_map14 .CC1{margin:-90px 29px 0 0}
.s_map14 .CC2{margin:-75px 0 0 58px;}
.s_map14 .CC3{margin:67px 0 0 -4px;}
.s_map14 .CC4{margin:21px 61px 0 0;}

.s_map14 .cctv3{top: 5px; left: 50%; margin-left:-292px; }
.s_map14 .cctv0{top:50%; right:5px; margin-top:-315px;}
.s_map14 .cctv2{bottom: 5px; left: 50%;  margin-left:-135px; }
.s_map14 .cctv1{left:5px; top:50%; margin-top:6px;}

/*15.솔밭공원사거리*/
.s_map15{background:url(../images/s_map15.jpg)center no-repeat;}
.s_map15 .st1{margin:-68px -42px 0 0; transform:rotate(-179deg);}
.s_map15 .st2{margin:-18px 0 0 6px; transform:rotate(-89deg);}
.s_map15 .st3{margin:27px 0 0 -45px; transform:rotate(2deg);}
.s_map15 .st4{margin:-23px 6px 0 0; transform:rotate(93deg);}
.s_map15 .CC1{margin:-95px -14px 0 0}
.s_map15 .CC2{margin:-14px 0 0 66px;}
.s_map15 .CC3{margin:64px 0 0 -18px;}
.s_map15 .CC4{margin:-21px 69px 0 0;}

.s_map15 .cctv3{top: 5px; left: 50%; margin-left:-164px; }
.s_map15 .cctv0{top:50%; right:5px; margin-top:-97px;}
.s_map15 .cctv2{bottom: 5px; left: 50%;  margin-left:-167px; }
.s_map15 .cctv1{left:5px; top:50%; margin-top:-121px;}

/*16.주성사거리*/
.s_map16{background:url(../images/s_map16.jpg)center no-repeat;}
.s_map16 .st1{margin:-76px -60px 0 0; transform:rotate(-160deg);}
.s_map16 .st2{margin:15px 0 0 21px; transform:rotate(-67deg);}
.s_map16 .st3{margin:62px 0 0 -48px; transform:rotate(6deg);}
.s_map16 .st4{margin:-11px 25px 0 0; transform:rotate(85deg);}
.s_map16 .CC1{margin:-99px -40px 0 0}
.s_map16 .CC2{margin:31px 0 0 75px;}
.s_map16 .CC3{margin:97px 0 0 -24px;}
.s_map16 .CC4{margin:-3px 85px 0 0;}

.s_map16 .cctv3{top: 5px; left: 50%; margin-left:-81px; }
.s_map16 .cctv0{top:50%; right:5px; margin-top:39px;}
.s_map16 .cctv2{bottom: 5px; left: 50%;  margin-left:-174px; }
.s_map16 .cctv1{left:5px; top:50%; margin-top:-75px;}

/*17.흥덕사거리*/
.s_map17{background:url(../images/s_map17.jpg)center no-repeat;}
.s_map17 .st1{margin:-56px -21px 0 0; transform:rotate(-214deg);}
.s_map17 .st2{margin:-42px 0 0 2px; transform:rotate(-119deg);}
.s_map17 .st3{margin:24px 0 0 -18px; transform:rotate(-27deg);}
.s_map17 .st4{margin:8px -2px 0 0; transform:rotate(60deg);}
.s_map17 .CC1{margin:-79px 25px 0 0}
.s_map17 .CC2{margin:-55px 0 0 62px;}
.s_map17 .CC3{margin:61px 0 0 26px;}
.s_map17 .CC4{margin:27px 53px 0 0;}

.s_map17 .cctv3{top: 5px; left: 50%; margin-left:-304px; }
.s_map17 .cctv0{top:50%; right:5px; margin-top:-245px;}
.s_map17 .cctv2{bottom: 5px; left: 50%;  margin-left:-74px; }
.s_map17 .cctv1{left:5px; top:50%; margin-top:52px;}

/*18.정하사거리*/
.s_map18{background:url(../images/s_map18.jpg)center no-repeat;}
.s_map18 .st1{margin:-56px 15px 0 0; transform:rotate(-240deg);}
.s_map18 .st2{margin:-44px 0 0 14px; transform:rotate(-116deg);}
.s_map18 .st3{margin:28px 0 0 16px; transform:rotate(-50deg);}
.s_map18 .st4{margin:17px 12px 0 0; transform:rotate(62deg);}
.s_map18 .CC1{margin:-68px 69px 0 0}
.s_map18 .CC2{margin:-54px 0 0 69px;}
.s_map18 .CC3{margin:52px 0 0 67px;}
.s_map18 .CC4{margin:35px 67px 0 0;}

.s_map18 .cctv3{top: 5px; left: 50%; margin-left:-441px; }
.s_map18 .cctv0{top:50%; right:5px; margin-top:-212px;}
.s_map18 .cctv2{bottom: 5px; left: 50%;  margin-left:45px; }
.s_map18 .cctv1{left:5px; top:50%; margin-top:52px;}

/*19.LG로*/
.s_map19{background:url(../images/s_map19.jpg)center no-repeat;}
.s_map19 .st1{margin:-69px -44px 0 0; transform:rotate(-177deg);}
.s_map19 .st2{margin:-21px 0 0 4px; transform:rotate(-94deg);}
.s_map19 .st3{margin:31px 0 0 -45px; transform:rotate(2deg);}
.s_map19 .st4{margin:-16px 3px 0 0; transform:rotate(83deg);}
.s_map19 .CC1{margin:-97px -18px 0 0;}
.s_map19 .CC2{margin:-19px 0 0 60px;}
.s_map19 .CC3{margin:61px 0 0 -19px;}
.s_map19 .CC4{margin:-9px 64px 0 0;}

.s_map19 .cctv3{top: 5px; left: 50%; margin-left:-152px; }
.s_map19 .cctv0{top:50%; right:5px; margin-top:-116px;}
.s_map19 .cctv2{bottom: 5px; left: 50%;  margin-left:-169px; }
.s_map19 .cctv1{left:5px; top:50%; margin-top:-69px;}

/*20.내덕사거리*/
.s_map20{background:url(../images/s_map20.jpg)center no-repeat;}
.s_map20 .st1{margin:-69px -36px 0 0; transform:rotate(-192deg);}
.s_map20 .st2{margin:-32px 0 0 4px; transform:rotate(-106deg);}
.s_map20 .st3{margin:37px 0 0 -33px; transform:rotate(-7deg);}
.s_map20 .st4{margin:2px 8px 0 0; transform:rotate(55deg);}
.s_map20 .CC1{margin:-97px -2px 0 0;}
.s_map20 .CC2{margin:-38px 0 0 63px;}
.s_map20 .CC3{margin:71px 0 0 -2px;}
.s_map20 .CC4{margin:23px 60px 0 0;}

.s_map20 .cctv3{top: 5px; left: 50%; margin-left:-185px; }
.s_map20 .cctv0{top:50%; right:5px; margin-top:-155px;}
.s_map20 .cctv2{bottom: 5px; left: 50%;  margin-left:-121px; }
.s_map20 .cctv1{left:5px; top:50%; margin-top:74px;}

/*21.제2운천교동편 오거리*/
.s_map21{background:url(../images/s_map21.jpg)center no-repeat;}
.s_map21 .st1{margin:-63px -20px 0 0; transform:rotate(-218deg);}
.s_map21 .st2{margin:-44px 0 0 2px; transform:rotate(-125deg);}
.s_map21 .st3{margin:49px 0 0 -44px; transform:rotate(-24deg);}
.s_map21 .st4{margin:5px -99px 0px 0; transform:rotate(-27deg);}
.s_map21 .st5{margin:19px 11px 0 0; transform:rotate(55deg);}

.s_map21 .CC1{margin:-73px 18px 0 0;}
.s_map21 .CC2{margin:-51px 0 0 45px;}
.s_map21 .CC3{margin:50px 0 0 -2px;}
.s_map21 .CC4{margin:25px -75px 0 0;}
.s_map21 .CC5{margin:30px 50px 0 0;}

.s_map21 .cctv5{top: 5px; left:229px;}
.s_map21 .cctv4{top: 130px; right:5px;}
.s_map21 .cctv2{bottom: 5px; left:378px }
.s_map21 .cctv6{bottom: 29px; left:703px;}
.s_map21 .cctv7{left:5px; top:454px;}

/*22.금천굿모닝빌딩사거리*/
.s_map22{background:url(../images/s_map22.jpg)center no-repeat;}
.s_map22 .st1{margin:-28px -1px 0 0; transform:rotate(-247deg);}
.s_map22 .st2{margin:-51px 0 0 -32px; transform:rotate(-154deg);}
.s_map22 .st3{margin:1px 0 0 -5px; transform:rotate(296deg); }
.s_map22 .st4{margin:26px -19px 0 0; transform:rotate(25deg);}

.s_map22 .CC1{margin:-26px 39px 0 0;}
.s_map22 .CC2{margin:-63px 0 0 3px;}
.s_map22 .CC3{margin:11px 0 0 35px;}
.s_map22 .CC4{margin:43px 16px 0 0;}

.s_map22 .cctv1{top:169px; left: 5px;}
.s_map22 .cctv3{top:5px; left: 485px;}
.s_map22 .cctv0{top:410px; right: 5px; }
.s_map22 .cctv2{bottom:5px; left: 252px;}

/*23.서청주교 사거리*/
.s_map23{background:url(../images/s_map23.jpg)center no-repeat;}
.s_map23 .st1{margin:-15px -88px 0 0; transform:rotate(-86deg);}
.s_map23 .st2{margin:25px 0 0 -42px; transform:rotate(4deg);}
.s_map23 .st3{margin:-22px 0 0 -86px; transform:rotate(96deg); }
.s_map23 .st4{margin:-69px -36px 0 0; transform:rotate(-178deg);}

.s_map23 .CC1{margin:-8px -91px 0 0;}
.s_map23 .CC2{margin:60px 0 0 -17px;}
.s_map23 .CC3{margin:-22px 0 0 -91px;}
.s_map23 .CC4{margin:-95px -9px 0 0;}

.s_map23 .cctv0{top:298px; right: 5px;}
.s_map23 .cctv2{bottom:5px; left: 382px;}
.s_map23 .cctv1{top:273px; left: 5px; }
.s_map23 .cctv3{top:5px; left: 382px;}

/*24.시외버스터미널사거리*/
.s_map24{background:url(../images/s_map24.jpg)center no-repeat;}
.s_map24 .st1{margin:-5px -11px 0 0; transform:rotate(-294deg);}
.s_map24 .st2{margin:-56px 0 0 -59px; transform:rotate(-207deg);}
.s_map24 .st3{margin:-36px 0 0 -1px; transform:rotate(244deg); }
.s_map24 .st4{margin:22px -67px 0 0; transform:rotate(-29deg);}

.s_map24 .CC1{margin:-1px 37px 0 0;}
.s_map24 .CC2{margin:-67px 0 0 -38px;}
.s_map24 .CC3{margin:-38px 0 0 38px;}
.s_map24 .CC4{margin:38px -46px 0 0;}

.s_map24 .cctv1{top:368px; left: 5px;}
.s_map24 .cctv3{top:5px; left: 306px;}
.s_map24 .cctv0{top:169px; right: 5px; }
.s_map24 .cctv2{bottom:5px; left: 514px;}

/*25.오창 LG화학 사거리*/
.s_map25{background:url(../images/s_map25.jpg)center no-repeat;}
.s_map25 .st1{margin:-53px -85px 0 0; transform:rotate(224deg);}
.s_map25 .st2{margin:19px 0 0 -5pxx; transform:rotate(-44deg);}
.s_map25 .st3{margin:18px 0 0 -70px; transform:rotate(42deg); }
.s_map25 .st4{margin:-52px -8px 0 0; transform:rotate(-227deg);}

.s_map25 .CC1{margin:-63px -70px 0 0;}
.s_map25 .CC2{margin:34px 0 0 36px;}
.s_map25 .CC3{margin:34px 0 0 -54px;}
.s_map25 .CC4{margin:-62px 35px 0 0;}

.s_map25 .cctv4{top:5px; right: 156px;}
.s_map25 .cctv6{bottom:5px; right: 5px;}
.s_map25 .cctv7{bottom:5px; left:241px; }
.s_map25 .cctv5{top:5px; left: 147px;}

/*26.죽림교 사거리*/
.s_map26{background:url(../images/s_map26.jpg)center no-repeat;}
.s_map26 .st1{margin:-58px -70px 0 0; transform:rotate(205deg);}
.s_map26 .st2{margin:4px 0 0 -25px; transform:rotate(-44deg);}
.s_map26 .st3{margin:-3px 0 0 -70px; transform:rotate(42deg); }
.s_map26 .st4{margin:-61px -21px 0 0; transform:rotate(-218deg);}

.s_map26 .CC1{margin:-69px -44px 0 0;}
.s_map26 .CC2{margin:18px 0 0 14px;}
.s_map26 .CC3{margin:15px 0 0 -51px;}
.s_map26 .CC4{margin:-75px 20px 0 0;}

.s_map26 .cctv4{top:5px; right: 231px;}
.s_map26 .cctv6{bottom:5px; right: 5px;}
.s_map26 .cctv7{bottom:5px; left:241px; }
.s_map26 .cctv5{top:5px; left: 165px;}

/*27.가마육교 사거리*/
.s_map27{background:url(../images/s_map27.jpg)center no-repeat;}
.s_map27 .st1{margin:4px -82px 0 0; transform:rotate(-61deg);}
.s_map27 .st2{margin:-67px 0 0 -27px; transform:rotate(-160deg);}
.s_map27 .st3{margin:24px 0 0 -59px; transform:rotate(19deg); }
.s_map27 .st4{margin:-50px 13px 0 0; transform:rotate(-240deg);}

.s_map27 .CC1{margin:15px -70px 0 0;}
.s_map27 .CC2{margin:-80px 0 0 7px;}
.s_map27 .CC3{margin:43px 0 0 -36px;}
.s_map27 .CC4{margin:-55px 57px 0 0;}

.s_map27 .cctv0{top:413px; right: 5px;}
.s_map27 .cctv3{top:5px; left: 476px;}
.s_map27 .cctv2{bottom:5px; left: 300px;}
.s_map27 .cctv1{top:102px; left: 5px;}

/*28.오창 창리 사거리*/
.s_map28{background:url(../images/s_map28.jpg)center no-repeat;}
.s_map28 .st1{margin:-3px -88px 0 0; transform:rotate(-67deg);}
.s_map28 .st2{margin:25px 0 0 -82px; transform:rotate(35deg);}
.s_map28 .st3{margin:-40px 0 0 -101px; transform:rotate(111deg); }
.s_map28 .st4{margin:-53px -70px 0 0; transform:rotate(-138deg);}

.s_map28 .CC1{margin:-8px -91px 0 0;}
.s_map28 .CC2{margin:60px 0 0 -17px;}
.s_map28 .CC3{margin:-22px 0 0 -91px;}
.s_map28 .CC4{margin:-95px -9px 0 0;}

.s_map28 .cctv0{top:298px; right: 5px;}
.s_map28 .cctv2{bottom:5px; left: 382px;}
.s_map28 .cctv1{top:273px; left: 5px; }
.s_map28 .cctv3{top:5px; left: 382px;}

/*29.오동분기점*/
.s_map29{background:url(../images/s_map29.jpg)center no-repeat;}
.s_map29 .st1{margin:-38px -88px 0 0; transform:rotate(-119deg);}
.s_map29 .st2{margin:31px 0 0 -19px; transform:rotate(-24deg);}
.s_map29 .st3{margin:10px 0 0 -79px; transform:rotate(60deg); }
.s_map29 .st4{margin:-57px -27px 0 0; transform:rotate(-208deg);}

.s_map29 .CC1{margin:-43px -76px 0 0;}
.s_map29 .CC2{margin:50px 0 0 15px;}
.s_map29 .CC3{margin:22px 0 0 -67px;}
.s_map29 .CC4{margin:-70px 9px 0 0;}

.s_map29 .cctv0{top:144px; right: 5px;}
.s_map29 .cctv2{bottom:5px; left: 492px;}
.s_map29 .cctv1{bottom:5px; left: 5px; }
.s_map29 .cctv3{top:5px; left: 304px;}

/*30.효성병원(하상도로)*/
.s_map30{background:url(../images/s_map30.jpg)center no-repeat;}
.s_map30 .st1{margin:-52px -75px 0 0; transform:rotate(-80deg);}
.s_map30 .st2{margin:-26px 0 0 -107px; transform:rotate(100deg);}
.s_map30 .st3{margin:2px 0 0 -25px; transform:rotate(-59deg); }

.s_map30 .CC1{margin:-36px -61px 0 0;}
.s_map30 .CC2{margin:-38px 0 0 -100px;}
.s_map30 .CC3{margin:27px 0 0 10px;}

.s_map30 .cctv0{top:281px; right: 5px;}
.s_map30 .cctv1{left:5px; top: 209px;}
.s_map30 .cctv6{bottom:5px; left: 550px; }

/*31.청주대교(하상도로*/
.s_map31{background:url(../images/s_map31.jpg)center no-repeat;}
.s_map31 .st1{margin:-25px -64px 0 0; transform:rotate(-168deg);}
.s_map31 .st2{margin:-33px 0 0 -78px; transform:rotate(177deg);}
.s_map31 .st3{margin:110px 0 0 -37px; transform:rotate(6deg); }

.s_map31 .CC1{margin:-31px -58px 0 0;}
.s_map31 .CC2{margin:-43px 0 0 -24px;}
.s_map31 .CC3{margin:127px 0 0 -20px;}

.s_map31 .cctv4{top:5px; right: 146px;}
.s_map31 .cctv3{left:267px; top:5px;}
.s_map31 .cctv2{bottom:5px; left: 550px; }

/*센터소개*/
.subtopBox{width: 100%; height: 187px; color: #fff; text-align: center; box-sizing:border-box; padding-top: 55px;}
.subtopBox h2{font-size: 34px; line-height: 51px;}
.subtopBox p{font-size: 15px; line-height: 22px;}
.subtop2{ background: url(../images/subbg2.jpg)no-repeat; background-size:100% 100%;}
.centerli li{width: 33.3%;}
.subtab{width: 100%; height:63px; background: #7fbe26;}
.subtabBox{width: 1400px; margin: 0 auto;}
.subtab li{border-right:1px solid #9fce5c; box-sizing:border-box; float: left;}
.subtab li:first-child{border-left:1px solid #9fce5c; }
.subtab li a{display: block; width: 100%; height: 100%; color: #fff; font-size: 17px; line-height: 63px; text-align: center;}
.subtab li a img{vertical-align: middle; margin-top: -3px;}
.subtab li.click a{font-size: 20px; font-weight: bold; background: #609f08;}
.subtab li.click a img{margin-left: 10px;}
.subtab .stli .libox li{width: 50%; float: left; height: 100%; }

.h3box{width: 100%; height:41px; margin-bottom: 19px; text-align: center;}
.h3box h3{font-size:35px; color: #000; line-height: 40px;}
.sub1200{padding:40px 0 100px 0; position: relative; margin: 0 auto; width: 1200px;}
.submax{padding:40px 30px 100px 30px; position: relative; margin: 0 auto; width:100%; box-sizing: border-box;}
.submax .h3box h3{text-align: left;}

.center1list{width: 100%; overflow: hidden; margin: 45px 0;}
.center1list li{float: left; position: relative; width:19.5%; height:301px; margin-right: 0.5%;}
.center1list li:last-child{ margin-right: 0;}
.CLli{position: absolute; border: 1px solid #dedede; padding:56px 10px 22px 10px; border-radius:2px; box-sizing:border-box; text-align: center; width: 100%; bottom: 0; z-index: 1; height: 255px;}
.center1list li img{position: absolute; top:0; left:50%; margin-left:-45px; z-index: 2;}
.CLli .CLtitle{color: #01937e;}
.CLli .CLtitle h5{font-size: 15px; line-height: 25px; background:url(../images/center_bg.jpg)bottom repeat-x; display: inline-block;}
.CLli .CLtitle p{font-size: 13px; line-height: 14px; letter-spacing: -1px;}
.CLli .txt{color: #595959; font-size: 13px; margin-top:13px; letter-spacing: -1px; line-height: 18px;}

.centerinfo{font-size: 19px; line-height: 23px; display: inline-block; padding-top: 10px;}

.h3box.centerh3{height:78px; }
.centerBox{min-height:370px;}
.centerBox1{width: 100%; box-sizing: border-box; overflow: hidden; border: 1px solid #d5d5d5;}
.ctitle{border: 5px solid #fff; width: 289px;height: 89px; line-height: 82px; box-sizing: border-box; color: #fff; font-size: 27px; font-weight: bold; text-align: center;}
.cinfo{color: #fff; font-size: 15px; line-height: 20px; box-sizing: border-box; letter-spacing: -0.5px; margin-top: 23px;}
.cinfo .img1{padding-right: 3px;}
.cinfo .img2{padding-left: 3px;}
.Cleft{width: 413px; height: 290px;  box-sizing: border-box; padding:47px 40px 44px 44px; background: url(../images/center_bg1.jpg); background-size:cover; float: left; }
.Cright{float:right; width: 784px; height: 89px; box-sizing: border-box; padding: 42px; }
.cr_title{width: 100%; border-bottom: 2px solid #000; background: url(../images/center_car.jpg)90% bottom no-repeat; height: 87px; font-size: 29px; text-align: center; line-height: 96px; padding-right:50px; box-sizing: border-box;}
.cr_title span{font-size: 30px; color: #1e5ebd; font-weight: bold; }
.cr_info{font-size:14px; color: #444; line-height: 22px; letter-spacing: -1px; text-align: center; margin-top: 15px;}

.centerBox2{width: 100%; overflow: hidden; margin: 30px 0;}
.sistem{width: 100%; overflow: hidden; margin-top: 10px;}
.sistem dl{float: left; margin-right: 24px; width: 384px; height:156px; border: 1px solid #c3c3c3; box-sizing: border-box; border-radius: 10px; overflow: hidden;}
.sistem dl:last-child{margin-right: 0;}
.sistem dl dt{text-align: center; height: 31px; background: #f1f1f1; border-bottom: 1px solid #e4e4e4; font-size: 15px;  line-height: 30px;}
.sistem dl dd{font-size: 13px; line-height: 25px; padding:0 12px;}
.sistem dl dd:nth-child(2){padding-top: 10px;}
.sistem dl dd:last-child{padding-bottom: 12px;}
.imgBox{border: 1px solid #c3c3c3; margin-top: 10px; height: 673px;}
.vibox{width: 100%; margin-top: 10px; display: inline-block;}
.videobox{width: 100%; background: #000; overflow: hidden; text-align: center;}

body .wrap5 .h3box2{position: relative;}
.stmapbtn{position: absolute; right: 0; top: 14px; border-radius:20px;font-size: 12px; height: 27px; box-sizing:border-box; font-weight: bold;}
.stmapbtn span{top: -1px; width: 27px; height: 27px; line-height:26px; text-align:center; display:block; float: right; border-radius:50%; position: absolute; }
.mapoff{background: #eaeaea; border: 1px solid #ccc;  color:#828282; padding:0 9px 0 30px;}
.mapoff span{background: #b7b7b7; color: #fff; left: -1px; }
.mapon{color:#1398a1; border: 1px solid #64b6bb; padding:0 30px 0 9px;}
.mapon span{color: #fff; background:#1398a1; right: -1px; }

.chartmapBox{display: none; position: absolute; z-index: 2; left: 0; right:0; height: 460px; background: #f5f5f5; border-bottom: 1px solid #e2e2e2}
.chartmapBox .chartmap{width: 100%; height: 100%;}


/*공지사항*/
.notisearchBox{border: 1px solid #e2e2e2; width: 100%; padding: 18px; text-align: center; box-sizing:border-box; margin-bottom: 10px;}
.notisearchBox select{width: 143px; height:37px; background: #e9e9e9; font-size: 14px; padding-left: 10px; box-sizing:border-box; border: none; vertical-align: top;}
.notisearchBox input{width:513px; height:37px; background: #e9e9e9; font-size: 14px; padding:0 10px; box-sizing:border-box; border: none; vertical-align: top;}
.notisearchBox button{width:142px; height:37px;  background:#0db2ac; background-size:100%; border: none;  border-radius:3px;
 vertical-align: top; color: #fff; font-size: 14px; }
.notisearchBox button img{vertical-align: top; margin-top:3px; margin-right: 3px;}
.notiBox .noticount{font-size: 14px; height:50px; line-height: 50px;}
.notiBox .noticount span{color: #dd5800; font-weight: bold;}
.notiBox table{border-collapse: collapse; width: 100%; border-top: 2px solid #737373;}
.notiBox table th{background: #f9fbfb; text-align: center; height:49px; font-size: 14px;}
.notiBox table td{text-align: center; font-size:14px; height:49px;}
.notiBox table tr{border-bottom: 1px solid #efefef;}
.notiBox table tr.notitop{background:#f9fbfb;}
.notiBox table tr.notitop td{ font-weight: bold;}
.notiBox table tr.notitop td:first-child{background:url(../images/noti_first.png)center no-repeat; }

.notilist td:nth-child(1), .notilist th:nth-child(1){width:7%;}
.notilist td:nth-child(2), .notilist th:nth-child(2){width: 63%; text-align: left;}
.notilist td:nth-child(3), .notilist th:nth-child(3){width: 10%;}
.notilist td:nth-child(4), .notilist th:nth-child(4){width: 10%;}
.notilist td:nth-child(5), .notilist th:nth-child(5){width: 10%;}
.notilist tbody tr{cursor: pointer;}
.notilist tbody tr:hover{text-decoration: underline;}
.notilist td a{color: #000;}
.notilist th{border-bottom: 1px solid #bdbdbd; }

.board_bottom{width: 100%; overflow: hidden; margin-top: 33px; text-align: center; padding-bottom: 3px;}
.page{display: inline-block;}
.btn_jump, .btn_num{float: left;}
.btn_jump li, .btn_num li{float: left; width: 32px; height: 32px; border:1px solid #d5d5d5; margin: 0 2px; font-size: 13px; }
.btn_first{background:url(../images/noti_arrow_left1.png)center no-repeat;}
.btn_prev{background:url(../images/noti_arrow_left2.png)center no-repeat;}
.btn_next{background:url(../images/noti_arrow_right2.png)center no-repeat;}
.btn_last{background:url(../images/noti_arrow_right1.png)center no-repeat;}
.btn_num .on, .btn_num .on:hover{background: #7fbe26; border: 1px solid #7fbe26;}
.btn_num .on a{color: #fff;}
.page li a{display:block; width: 100%; height: 100%; color: #707070; line-height: 30px;}

.notiBox .notiview .title th{text-align: center; height: 49px;font-size: 15px}
.notiBox .notiview th{width: 10%; text-align: left; padding: 0 10px; box-sizing:border-box; height: 46px;}
.notiBox .notiview td{text-align: left; padding: 3px 10px; box-sizing:border-box;  height: 46px;}
.notiBox .notiview tbody td{padding: 20px;  box-sizing:border-box;}
#text_cont{min-height: 350px;}
.btn_noti_list{background:#0db2ac; color: #fff; font-size: 14px; font-weight: bold; width:107px; height: 36px; border: none; border-radius:3px;}
.file a{color: #3d90c1; border: 1px solid #4ca3e0; background: #e2f0f8; display: inline-block; font-size: 13px; letter-spacing: -0.5px; border-radius:5px; padding: 2px 5px; margin:2px;}

/*찾아오시는길*/
.waymap{border: 1px solid #c3c3c3; width: 100%; height: 548px; box-sizing:border-box;}
.wayinfo{width: 100%; overflow: hidden; height: 87px; position: relative;}
.wayleft{position:absolute; width:229px; height: 87px; left: 0;}
.wayright{position:absolute; left:229px; height: 87px; right: 0; background: #f7f7f7; border: 1px solid #c3c3c3; box-sizing:border-box; border-top: none; border-left: none; font-size: 13px; color: #404040; padding:15px; }
.wayright dl{clear: both;}
.wayright dt{float: left; width: 86px; height: 27px; line-height: 27px;}
.wayright dt img{vertical-align: middle; margin-top: -2px; margin-right: 2px;}
.wayright dd{float: left; height: 27px; line-height: 27px;}
.wayright dd a{color: #404040;}
.centerWay{width: 100%; margin-top: 30px;}
.centerWay h4{background:url(../images/center_img5.png)left center no-repeat; padding-left: 27px; font-size: 15px; line-height: 23px; color: #5d9909; margin: 10px 0 5px 0}
.centerWay h4 span{color: #fa5f13;}
.centerWay p{font-size: 13px; color: #000; line-height: 28px; padding-left: 27px; margin-bottom: 20px}
 
        
/*체크박스 디자인*/
.popupBottom label{line-height: 20px; display: inline-block; font-size:12px; margin-right: 5px;}
.popupBottom input[type="checkbox"]{display: none;}
.popupBottom input[type="checkbox"] + span{display: inline-block; background:url(../images/check_nml_pop.png)left no-repeat; cursor: pointer; height: 15px; min-width: 15px; line-height: 15px; vertical-align: middle; font-weight: normal; padding-left: 20px;}
.popupBottom input[type="checkbox"]:checked + span{background:url(../images/check_click_pop.png)left no-repeat; }

.popupTitle{width: 100%; height: 47px; box-sizing: border-box; background: #242424;}
.popupTitle h3{color: #fff; font-size: 15px; font-weight: bold; line-height: 47px; padding-left: 10px;}
.popupTitle button{width: 29px; height: 29px; position: absolute; right: 10px; top: 8px;  background:url(../images/main_pop_close_pop.png)center no-repeat; border: none; cursor: pointer;}
.popupBottom{position: absolute; bottom: 0; width: 100%; height: 26px; text-align: center; background: #000; font-size: 12px; color: #fff; line-height:23px;}
.popupConten{width: 100%;  box-sizing: border-box; min-height: 100px; padding-bottom:22px; text-align: center;}

/*주차정보*/
.pop_parking{padding: 10px 5px 5px 5px; width: 320px; height:100%; }
.tmapgo{width: 100%; background: #7fbe26; height: 30px; border:1px solid #454545; color: #fff; font-size: 13px; display: none;}
.tmapgoquBox{position: absolute; left: 50%; top:50px; margin-left: -115px; width: 230px; height: 175px; border: 1px solid #000; z-index: 9997; background: #f2f2f2; text-align: center; box-sizing: border-box; padding: 15px;
box-shadow:inset 0 0 4px #919191; -webkit-box-shadow:inset 0 0 4px #919191;}
.tmapgoquBox p{font-size: 13px; line-height: 17px; padding-top: 10px;}
.tmapgoquBox p span{font-size: 14px;}
.tmapgoquBox .tmapok{background: #7fbe27; height: 35px; color: #fff; font-size: 15px; border: none; width: 100%; margin-top: 15px;}

.cunt{background: #effeff; border: 1px solid #444; font-size: 10px; color: #00259f; font-weight: bold; height: 12px; line-height: 10px; text-align: center; position: absolute; z-index: 99999999; padding: 0 2px; border-radius: 2px; width:40px; left:-5px;}
.cunt span{color: #e72626;}

/*통계*/
.subtop1{ background: url(../images/subbg1.jpg)no-repeat; background-size:100% 100%;}
/* .statsli li{width: 25%;} */
.statsli li{width: 16.5%;}
.stBox{width: 100%; overflow: hidden; position: relative;}
.st{border: 1px solid #cdcdcd;  box-sizing:border-box; float: left; position: relative;}
.st h3{width: 100%; font-size: 14px; text-align: center; background:url(../images/st_icon_bg.png)#ededed repeat; border-bottom: 1px solid #cdcdcd; height: 29px; line-height: 28px;}
.stBox .st1{width: 24%; margin-right: 1%; height:240px;}
.stBox .st2{width: 24%; margin-right: 1%; height:240px;}
.stBox .st3{width: 50%; height:240px;}
.stBox .st4{width: 49%; margin-right: 1%; height: 408px; margin-top: 1%}
.stBox .st5{width: 50%; height: 408px; margin-top: 1%}

.stconten{position: absolute; left:0; right:0; bottom:0; top:29px; text-align: center; padding: 10px;}
.st1 .stconten{top:30px;}
.stBox .st1 .stconten{ padding:0;}
.stBox .st1 .stconten .name{font-size: 12px; font-weight: bold; line-height: 15px; text-align: center; display: block; width: 100px; position: absolute; left: 50%; margin-left: -50px; top: 151px;}
.stBox .st1 .stconten p{width: 100%; height: 100%;}
.p0{background: url(../images/st_img0.jpg)center 27px no-repeat;}
.p1{background: url(../images/st_img1.jpg)center 27px no-repeat;}
.p2{background: url(../images/st_img2.jpg)center 27px no-repeat;}
.p3{background: url(../images/st_img3.jpg)center 27px no-repeat;}
.p4{background: url(../images/st_img4.jpg)center 27px no-repeat;}
.p5{background: url(../images/st_img5.jpg)center 27px no-repeat;}
.p6{background: url(../images/st_img6.jpg)center 27px no-repeat;}
.p7{background: url(../images/st_img7.jpg)center 27px no-repeat;}
.p8{background: url(../images/st_img8.jpg)center 27px no-repeat;}
.p9{background: url(../images/st_img9.jpg)center 27px no-repeat;}
.p10{background: url(../images/st_img10.jpg)center 27px no-repeat;}
.p11{background: url(../images/st_img11.jpg)center 27px no-repeat;}
.p12{background: url(../images/st_img12.jpg)center 27px no-repeat;}
.p13{background: url(../images/st_img13.jpg)center 27px no-repeat;}
.p14{background: url(../images/st_img14.jpg)center 27px no-repeat;}
.p15{background: url(../images/st_img15.jpg)center 27px no-repeat;}
.p16{background: url(../images/st_img16.jpg)center 27px no-repeat;}
.p17{background: url(../images/st_img17.jpg)center 27px no-repeat;}
.p18{background: url(../images/st_img18.jpg)center 27px no-repeat;}
.p19{background: url(../images/st_img19.jpg)center 27px no-repeat;}
.p20{background: url(../images/st_img20.jpg)center 27px no-repeat;}
.p21{background: url(../images/st_img21.jpg)center 27px no-repeat;}
.p22{background: url(../images/st_img22.jpg)center 27px no-repeat;}
.p23{background: url(../images/st_img23.jpg)center 27px no-repeat;}
.p24{background: url(../images/st_img24.jpg)center 27px no-repeat;}
.p25{background: url(../images/st_img25.jpg)center 27px no-repeat;}
.p26{background: url(../images/st_img26.jpg)center 27px no-repeat;}
.p27{background: url(../images/st_img27.jpg)center 27px no-repeat;}
.p28{background: url(../images/st_img28.jpg)center 27px no-repeat;}
.p29{background: url(../images/st_img29.jpg)center 27px no-repeat;}
.p30{background: url(../images/st_img30.jpg)center 27px no-repeat;}
.p31{background: url(../images/st_img31.jpg)center 27px no-repeat;}
.p32{background: url(../images/st_img32.jpg)center 27px no-repeat;}
.p33{background: url(../images/st_img33.jpg)center 27px no-repeat;}
.p34{background: url(../images/st_img34.jpg)center 27px no-repeat;}
.p35{background: url(../images/st_img35.jpg)center 27px no-repeat;}
.p36{background: url(../images/st_img36.jpg)center 27px no-repeat;}
.p37{background: url(../images/st_img37.jpg)center 27px no-repeat;}
.p38{background: url(../images/st_img38.jpg)center 27px no-repeat;}
.p39{background: url(../images/st_img39.jpg)center 27px no-repeat;}
.p40{background: url(../images/st_img40.jpg)center 27px no-repeat;}

.st3Title{padding-left:50px; background: url(../images/st_icon1.png)left center no-repeat; font-size: 16px; color: #7fbe26; height: 42px; line-height: 42px; display: inline-block; margin: 10px 0 15px 0}
.st3Title span{font-weight: bold; color: #f08526;}
.st3car{width: 100%; background: #f7f7f7; height: 120px; border-radius:10px; box-sizing:border-box; padding: 18px 0}
.st3car li{float: left; width: 33.3%; border-right: 1px solid #e9e9e9; box-sizing:border-box; text-align: center;}
.st3car li:last-child{border-right: none;}
.st3car li p{font-size: 14px; color: #000; line-height: 16px;}

.st .title{font-size: 13px; line-height: 16px; margin: 10px 0; font-weight: bold;}
.st table{border-collapse: collapse; font-size: 12px; width: 100%;}
.st table thead th{height: 32px; border: 1px solid #f2f2f2; border-bottom: 1px solid #d7d7d7; width: 14%;}
.st table tbody th{border:1px solid #f2f2f2; font-weight: normal;}
.st table td{border: 1px solid #f2f2f2; height: 32px; color: #fff; }
.st4 .info{position: absolute; right: 10px; top: 20px;}
.st4 .grap{width: 100%; height:320px; overflow-y:auto; border-top: 1px solid #000; border-bottom: 1px solid #000}
.info li{float: left; font-size: 11px; margin-right: 6px;}
.info li p{width:11px; height: 11px; display: inline-block; vertical-align: middle; margin-top: -3px; margin-right: 2px}
.st .red{background: #cf3d3d}
.st .orange{background: #efa736;}
.st .green{background: #94d931;}
.st .sky{background: #4aa8ff;}
.st .gray{background: #cbcbcb;}
.st .yellow{background: #ffe065;}
.st .blue{background: #2c76f2;}


.searchBox{width: 100%; border: 1px solid #e2e2e2; box-sizing:border-box; padding: 15px; overflow: hidden;}
.search_btn{float: right; width: 10%; margin-top: 30px; text-align: right;}
.search_btn li{ width: 70%; height:45px; text-align: right; margin-bottom: 2px; display: inline-block; vertical-align: middle;}
.search_btn li button {width: 100%; height:100%; font-size: 12px;}
.btnok{background: #7fbe26; color: #fff; border-radius:5px; border: none;}
.btnsave{background: #fff; color: #000; border-radius:5px; border: 1px solid #bfbfbf;}

.searchBox table input.day{background: url(../images/main_day.png)93% center #e9e9e9 no-repeat;}
.w100{width: 100px;}
.w100p{width: 100%;}
.w220{width: 220px;}
.doroBox{width:100%; background: #f1f1f1; height:107px; padding: 10px; box-sizing:border-box; overflow-y:auto;}
.doroBox li{width: 50%; float: left; height:22px; text-align: left;}
.all{float: right;}
label.blue{color: #3a64ec}
label.red{color: #e01212}

.chart{width: 100%; border: 1px solid #e2e2e2; box-sizing:border-box; padding: 15px; overflow: hidden; border-top: none; height: 460px;}
.chartDetail{width: 100%; border: 1px solid #e2e2e2; box-sizing:border-box; padding: 15px; overflow: hidden; border-top: none; padding-bottom: 50px;}
.chartDetail h4{font-size:18px; text-align: left; line-height: 30px;}
.chartDetail table{/* border-top: 1px solid #000; */ border-collapse: collapse;font-size: 12px;}
.chartDetail table.tbefore{width:100%; position: relative; height: 219px; border-bottom: 1px solid #000;}
.chartDetail table.tafter{ width:max-content;}
.tbefore thead{/* position: absolute;  */padding-right: 18px; height: 30px; left: 0; right: 0; background: #f9fbfb;  /* border-bottom: 1px solid #efefef;  */top: 0; box-sizing:border-box;}
.tbefore tr{/* display: table;  */width: 100%;  border-bottom: 1px solid #efefef;}
.tbefore tbody{/* position: absolute;  */top:29px; left: 0; right: 0; bottom:0; overflow-y:scroll;}
.chartDetail table th{height:30px; background: #f9fbfb; text-align: center; font-weight: normal;  border-right: 1px solid #efefef; border-top: none; /* width: 88px; */  box-sizing:border-box; min-width:35px;   }
.chartDetail table th:last-child{border-right:none;}
.chartDetail table td{height:30px;  text-align: center; border-right: 1px solid #efefef; width:88px;  box-sizing:border-box; }
.chartDetail table td:last-child{border-right:none;}
.chartDetailBox{width: 100%; height: 219px; overflow: auto; border-top: 1px solid #000;background: url(../images/tbeforetable.jpg)top repeat-x; border-bottom: 1px solid #000;}

.chartDetailbgnone .chartDetailBox{background: none;}
.chartDetail table th.w130{width: 130px; min-width: 100px;}
.chartDetail table th.w80{width: 80px; min-width: 60px;}
.chartDetail table th.w60{width: 60px; min-width: 40px;}

.smart_info{float: right;  width:50%; margin-top: 10px;}
.smart_info ul{float: right;}
.smart_info li{float: left; font-size: 14px; margin-right: 12px;}
.smart_info li p{width: 20px; height: 20px; border-radius:50%; display: inline-block; vertical-align: middle; margin-top: -2px; margin-right: 4px;}
.smart_info li p.red{background: #ff7878; border: 1px solid #ff1f1f;}
.smart_info li p.yellow{background: #fff478; border: 1px solid #f2ce06;}
.smart_info li p.green{background: #cef1a8; border: 1px solid #73e32f;}

.stBox .search_btn3{margin-top:0; float: left; width: 30%; }

.smartSt_map{width: 100%; height:460px;  border: 1px solid #e2e2e2; box-sizing:border-box; overflow: hidden; border-top: none; height: 480px; position: relative;}
.popsmartSt{width: 170px; height:105px; background:#454545; border-radius:5px; position: absolute; z-index: 9; padding:2px 5px 5px 5px; box-sizing:border-box; text-align: center;}
.popsmartSt .title h3{color: #fff; font-size: 11px; text-align: center; line-height: 20px; letter-spacing: -1px;}
.popsmartSt .pop_close{background:url(../images/mapSt_close.png)center no-repeat; width:15px; height: 15px; position: absolute; right: 5px; top: 5px; border: none;  }
.popsmartStcon{width: 100%; height:78px; border: 1px solid #000; background: #fff; box-sizing:border-box;}
.smartStarrow{position: absolute;bottom: -9px; left: 50%; margin-left:-4px; }
.popsmartStcon table{border-collapse: collapse; width: 100%; font-size: 11px; }
.popsmartStcon table tr{border-bottom: 1px solid #e5e5e5;}
.popsmartStcon table tr:last-child{border-bottom: none;}
.popsmartStcon table th{width:50px; border-right: 1px solid #e5e5e5; background: #f6f6f6; color: #868686; font-weight: normal; text-align: left; padding: 0 5px; box-sizing:border-box; letter-spacing: -1px;}
.popsmartStcon table td{text-align: left; padding: 0 5px; box-sizing:border-box; height: 19px; font-weight: bold;}
.popsmartStcon table tr:first-child td{color: #d43700;}

.searchleft{width: 90%; float: left;}
.trdep{width: 25%; float: left;}
.trdep dt{color: #474e81; font-size: 14px; text-align: left; font-weight: normal; height: 30px; width: 100%; line-height: 28px;}
.trdep dd{font-size: 14px; height: 42px; vertical-align: top; width: 100%;}
.trdep dd select {background: #e9e9e9; height:36px; border: none; }
.trdep dd input{background: #e9e9e9; height:36px; border: none; }
.trdep dd input.day { border: 1px solid #b5b5b5; background:url(../images/main_day.png)95% center #efefef no-repeat; box-sizing: border-box; border-radius:5px; vertical-align: middle; padding-left: 5px; font-size: 13px; font-weight: bold;}
/* {background: url(../images/main_day.png)93% center #e9e9e9 no-repeat; font-size: 15px; font-weight: bold;} */

.searchleft .dep50p{width:50%; }
.searchleft .dep50p .doroBox li{width: 30%;}

.stats4 .searchleft{width: 50%}
.stats4 .trdep{width: 70%;}
.stats4 .trdep dt{width: 80px; float: left; height: 39px; line-height: 39px;}
.stats4 .trdep dd{float: left; width: 120px; height: 39px; line-height: 39px;}
/* .stats4 .trdep dd select {background: #e9e9e9; height:36px; border: none; }
.stats4 .trdep dd input{background: #e9e9e9; height:36px; border: none; }
.stats4 .trdep dd input.day { border: 1px solid #b5b5b5; background:url(../images/main_day.png)95% center #efefef no-repeat; box-sizing: border-box; border-radius:5px; vertical-align: middle; padding-left: 5px; font-size: 13px; font-weight: bold;}
 */



.stBox .stats4 .search_btn3 li{margin-bottom: 0; width: 44%; height: 37px; margin-top: 3px;}
.trdep .dorodd{height: 107px;}
.chartDetail.Detail4 table{width: 100%}
.chartDetail.Detail4 table th, .chartDetail.Detail4 table td{width: 20%;}

.st2Box .searchBox{width: 253px; float: left; height: 738px;}
.st2Box .searchleft{width: 100%; float: none;}
.st2Box .search_btn{width: 100%; text-align: center; float: none; margin-top: 20px;}
.st2Box .search_btn li{width: 47%; }
.st2Box .trdep{width: 100%; float: none;}
.st2Box .w220{width: 100%;}
.st2Box .stchart{position:absolute; right:0; top:0; bottom:0; left:253px; border: 1px solid #e2e2e2; border-left:none; box-sizing:border-box;}
.st2Box .chart{border-left:none; border-right: none;}
.st2Box .chartDetail{border:none; height: 276px;}

.stats1day{ position:absolute; right:30px; top:53px; color: #474e81; font-size: 14px; line-height: 30px;}
.stats1day input{ width: 145px; height:30px; border: 1px solid #b5b5b5; background:url(../images/main_day.png)95% center #efefef no-repeat; box-sizing: border-box; border-radius:5px; vertical-align: middle; padding-left: 5px; font-size: 15px; font-weight: bold;} 
.stats1day button{background: #7fbe26; color: #fff; font-size: 12px; border-radius:5px; border: none; width: 50px; height: 31px; vertical-align: middle;}
 
.stBox .st3 .grapBox1{position: absolute; left:10px; top:10px; bottom: 10px; right: 410px; text-align: center;}
.stBox .st3 .grapBox2{position: absolute; right: 10px; top: 10px; bottom: 10px; width:390px;}
.grapBox1 .grap{width: 100%; height: 152px; text-align: center; position: absolute; bottom: 0;}
.stBox .st3 .grapBox2 .title{color: #7fbe26; font-size: 14px; font-weight: bold; margin: 5px 0 8px 0;}
.stBox .st3 .grapBox2 .title span{vertical-align:middle; line-height: 20px; display: inline-block;}
.stBox .st3 .grapBox2 .title .num{color: #f08526; font-size: 18px; }
.stBox .st3 .grapBox2 .title img{vertical-align:middle; display: inline-block; margin-right: 5px;}
.grapBox2 .grap{background: #f7f7f7; border-radius: 5px; border: 1px solid #e6e6e6; width: 100%; height: 140px; box-sizing: border-box;}
.grapBox2 .grap li{float: left; background: url(../images/st_icon_bar.png)right no-repeat; width: 127px; height: 135px; box-sizing: border-box; padding-top: 17px;} 
.grapBox2 .grap li:last-child{background: none;  width: 130px; }
.grapBox2 .grap li div{font-size: 14px; line-height: 17px; margin-top:5px;}

.stBox .st5 .dan1{background:url(../images/st_icon5.png)10px top #f7f7f7 no-repeat; border: 1px solid #d8d8d8; border-radius: 5px; box-sizing: border-box; width: 100%; height:148px; position: relative;}
.stBox .st5 .dan1 .all2{width: 290px; box-sizing: border-box; text-align: right; padding: 45px 15px 10px 0; height: 145px;}
.stBox .st5 .dan1 .all2 img{margin-bottom: 3px;}
.stBox .st5 .dan1 .all2 p{color: #7fbe26; font-size: 14px; line-height: 16px;}
.stBox .st5 .dan1 .all2 .allnum{font-size:18px; color: #f08526; font-weight: bold; line-height: 18px;}
.stBox .st5 .dan1 .allgrap{position: absolute; left: 290px; right: 5px; top: 5px; bottom: 5px; background: #fff; border-radius:3px; height: 136px; 
box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.3);}
.stBox .st5 .grapBox{float: left; width: 49.5%; height: 211px; margin-right:1%;}
.stBox .st5 .grapBox:last-child{margin-right: 0;}
.stBox .st5 .grapBox .grap{width: 100%; height: 173px;}
  
.wrap5 .submax .h3box h3{font-size:30px; font-weight: 500; letter-spacing: -1px; padding-left:37px; background: url(../images/title_point.png)left 10px no-repeat;}
.wrap5 .submax .h3box h3 span{color: #609f08;}
.wrap5 .submax .info{display: inline-block; font-size: 16px;}
.st .sttitle1{background: url(../images/title_bg2.png)center no-repeat; width: 238px; height: 18px; color: #fff; position: relative; margin: 10px auto; box-sizing: border-box; padding-right: 155px;}
.st .sttitle1 span{color: #7fbe26; position: absolute; right: 15px;}
.st .sttitle2{background: url(../images/title_bg.png)center no-repeat; width: 227px; height: 18px; color: #fff; position: relative; margin: 10px auto; box-sizing: border-box; padding-right: 41px;}
.st .sttitle2 span{color: #7fbe26; position: absolute; right: 12px;}
.st .sttitle3{background: url(../images/title_bg.png)center no-repeat; width: 227px; height: 18px; color: #fff; position: relative; margin: 10px auto; box-sizing: border-box; padding-right: 41px;}
.st .sttitle3 span{color: #7fbe26; position: absolute; right:8px;}
  
.chartText{background: url(../images/semple2.png)center no-repeat; width: 100%; height: 100%;}  
  
/*사이트맵*/
.sitemapBody{position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000; box-sizing:border-box; display: none;}
.sitemapconten{position:fixed; width: 1200px; height:480px; left: 50%; top: 50%; margin: -300px 0 0 -600px; text-align: center; z-index: 2}
.sitemapclose{width:67px; height: 67px; background: url(../images/sitemap_close.png)center no-repeat; border: none; }
.contenSite{ width: 100%; height:363px; margin-top: 50px}
.contenSite .box{float: left; width: 16.6%; height:100%; box-sizing:border-box; border-right: 1px solid rgba(255,255,255,0.2);}
.contenSite .box:first-child{border-left: 1px solid rgba(255,255,255,0.2)}
.contenSite .box h2{color: #94e71a; font-size: 27px; line-height: 50px;}
.contenSite .box h2 span{font-size: 20px; display: block;margin: 0 auto; }
.contenSite .box ul{margin-top: 34px;}
.contenSite .box ul a{color: #fff; font-size: 17px; line-height: 35px; height: 35px;}
.siteback{position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(39,39,39,0.7);  z-index: 1}

.co_way{position: absolute; top: -65px; left: -10px; width:105px; background: #D4F4FA; text-align: center; border: 1px solid #6b6f81; font-size: 11px;  color: #000; border-radius: 2px; padding: 0 2px;letter-spacing: -0.5px;}

#time_container{height:197px;}

.main_popupBox{max-width:880px; min-width: 230px; box-sizing: border-box; position: absolute; z-index: 999; border-radius: 5px; overflow: hidden; right: 20px; top:20px;
        box-shadow:0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.5);}

/*메인화면 리모컨 시안2*/
.mainlimo{position: fixed; top: 50%; right:0; z-index: 100; transition-property:top, bottom; transition-duration:0.2s; transition-timing-function:ease-in-out; transform:translateY(-50%); z-index: 9999}
.mainlimo button {position: relative; display: block; padding:8px 42px 9px 0; width:153px; z-index:3;  border: none; color: #242424; margin: 10px 0; height: 45px; outline: none; background: none; line-height: 20px;}
.mainlimo .textbox{position: absolute; top:0; right:20px; display:block; width:118px; text-align: left; font-size: 13px; color: #fff; font-weight: bold; padding-left:10px; border-radius:50px; height: 45px; line-height:45px; z-index:1;
content:""; transform-origin:right center; transform:scaleX(0); transition-property:background-color, transform; transition-duration:300ms; transition-timing-function:ease-in-out;}

.mainlimo .active .textbox{background: #242424; transform:scaleX(1);}
.mainlimo .nav-link.active:hover .textbox{background: #242424;}
.mainlimo .nav-link:hover .textbox{background: #242424; transform-origin:right center; transform:scaleX(1); transition-property:background-color, transform; transition-duration:300ms; transition-timing-function:ease-in-out;}

.mainlimo .back{position: absolute; top: 0; right: 10px; display: block; width: 45px; height: 45px; border-radius:50px;  z-index:2;}

.mainlimo .active .back1{background: url(../images/limo1_nml.png)-1px center #242424 no-repeat;}
.mainlimo .back1{background: url(../images/limo1_nml.png)-1px center #242424 no-repeat;}
.mainlimo .active .back2{background: url(../images/limo2_nml.png)-1px center #242424 no-repeat;}
.mainlimo .back2{background: url(../images/limo2_nml.png)-1px center #242424 no-repeat;}

#toast {display:none; min-width: 250px; background-color: #abda68; color: #fff; text-align: center; border-radius: 45px; padding: 16px; position: fixed; left: 50%; z-index: 999; bottom: 50px; font-size: 12px; margin-left:-151px;}
#toast.show {visibility: visible; -webkit-animation: fadein 0.5s; animation: fadein 1s;}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 50px; opacity: 1;}
}

.highcharts-credits{display:none;}

.loader {text-align: center; position: absolute; top: 0; left: 0; right:0; bottom:0; z-index: 999999; display: none;}
.loader .loaderwrap{position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -15px; z-index: 2}
.loader .loaderwrap img{width: 35px; height:35px;}
.loader .loaderwrap p{color: #fff; font-size: 13px;}
.loaderBg{position: absolute;  z-index: 1; left: 0; right: 0; top:0; bottom: 0; background-color: #000000; opacity: 0.1;}

.none {font-weight:bold; margin-top: 50px;}

#daily_traf_info {width:100%; height: 100%;}