@media (max-width: 1200px) {
  /* 공통 */
  .inner_ly {width:100%;padding: 10px;}
  
  header {border-bottom: 0; height: 75px;border-bottom: none;}
  header .topUtil {display: none;}
  header .header_inner {width:100%; position: fixed; z-index: 999;top: 0; background: #fff;border-bottom: solid 1px #1c449c;}
  header .logo {text-align: center; width: 100%; top:10px;}
  header .logo .link {display: inline-block; width:280px;height:50px;background:url("../images/topLogo.png") 0 center no-repeat; background-size: contain;}
  
  nav .innerset {position: fixed; left: -300px; width: 300px; height: 100%; background: rgba(0, 0, 0, 0.8); transition:all .2s linear}

  nav .navtoggle {display:block; position:fixed; top:28px; left:20px; z-index: 9999;}
  nav .navtoggle .toggle {display:block}
  nav .navtoggle .toggle > span {width:30px; height:2px; background:#1b1b1b; display:block; transition:all .2s linear}
  nav .navtoggle .toggle > span + span {margin-top:8px}
  nav .navlist {margin-top:50px; overflow: hidden}
  nav .navlist > li {float:left; width:100%; border-bottom:1px solid #aaa;}

  nav .navlist > li + li {margin:0}
  nav .navlist > li > a {position:relative;color:#e8e8e8; height:50px; line-height: 50px; padding:0 20px;}
  nav .navlist > li > a:hover {color:#fff}
  nav .navlist > li > a:hover:before {display:none}
  nav .navlist > li.act > a:after {content:""; display:block; width: 13px; height: 7px;
  background-size:13px 14px; position:absolute; top:0; bottom:0; right:20px; margin:auto}
  nav .navlist > li.act.on > a:after {background-position:0 -7px}
  nav .navlist > li.on > a {color:#ebf3fe}
  nav .navlist > li.on > a:before {display:none}
  nav .navlist > li .dp2 {position: relative; left: 0; top:0; padding: 10px; transition:none; visibility: visible; opacity: 1; border:none}
  nav .navlist > li.on .dp2 {transition:none}
  nav .dp2 {display:none}
  nav .dp2 > li {text-align:left;background:transparent;}
  nav .dp2 > li > a {color:#fff; padding:10px 0 10px 25px;}
  nav .dp2 > li > a:before {content:""; display:inline-block; width:4px; height:1px; background:#fff; vertical-align: middle; margin-right:5px;
  margin-bottom:2px}
  
  nav .dp2 > li > a:hover {background:#1c449c;color:#fff;}
  nav .dp2 > li:first-child > a {border:none}

  nav .innerset {display: flex; flex-direction: column;}
  nav .innerset .navlist {order: 2; border-top: 1px solid #aaa;}

  nav.on .innerset {left:0}
  nav.on .navtoggle .toggle > span {background:#fff}
  nav.on .navtoggle .toggle > span:nth-child(1) {transform: translateY(10px) rotate(-45deg)}
  nav.on .navtoggle .toggle > span:nth-child(2) {opacity: 0; visibility: hidden}
  nav.on .navtoggle .toggle > span:nth-child(3) {transform: translateY(-10px) rotate(45deg)}

  nav .innerset .navlist {right:0; top:25px}
  .inner_ly {position:relative;width:100%;}
  
  /* 메인 */
  .mainContent .mapWrap .mapArea {height:500px;}
  .mainContent .infoWrap > ul > li {float:left;width:calc(33.33% - 10px);height:165px;padding:6px 20px;background-color:#fff;border:solid 1px #c9d4e4;}
  .mainContent .infoWrap > ul > li + li {margin-left:15px;}
   /* 팝업 div */
    .popDetail {display:none;}
  #wrap.sub #contents {width: 100%;padding:40px 30px 80px 30px;}
  .sVisual_wrap .inner {width:100%;height:200px;}
  .mapUIWrap .mapTop .commu_info{
  	display:none !important;
  }
}


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

@media (max-width:850px) {
  .familySiteWrap {display:none;}
    .centerWrapper .partBox ul {flex-flow:row wrap;}
    .centerWrapper .partBox ul li {width:50%;margin:0;padding:0 20px;flex:none !important;-webkit-flex:none !important;-ms-flex:none !important;}
    .centerWrapper .partBox ul li:nth-of-type(1), .centerWrapper .partBox ul li:nth-of-type(2) {margin-bottom:30px;} 

    .mapUIWrap.statistic .mapContent .mapRoadList .staticSearchArea.volume ul li:nth-of-type(2) {margin-top:10px;margin-left:55px;}
    .relateSiteWrapper ul li {width:100%;}
    .relateSiteWrapper ul li:nth-of-type(9) {border-bottom:solid 1px #e5e6e8;}
}

@media (max-width:768px) {

  header {height:75px}
  header .logo {text-align: center; width: 100%; top:20px;}
  header .logo .link {display: inline-block; width:200px;height:35px;background:url("../images/topLogo.png") 0 center no-repeat; background-size: contain;}
  header .header_inner {height:75px}
  nav .dp2 > li > a:hover {background:none}
  nav .innerset {width:calc(100vw - 60px); left: calc(100vw/-1 + 60px)}
  
  footer {padding:10px;}
  footer .footerLogo {}
  footer dl dt {clear:both;font-size:12px;text-align: center;}
  footer dl dd {font-size:12px;text-align: center;}

  /* 메인 */
  .mainContent .infoWrap {padding: 10px;}
  .mainContent .infoWrap > ul {margin-top: 0;}
  .mainContent .infoWrap > ul > li {float:none;width:100%;height:165px; margin: 10px 0;}
  .mainContent .infoWrap > ul > li + li {margin-left:0;}

  /* 교통정보관련 */
  .mapUIWrap .mapTop dl {display:none;}
  .mapUIWrap .mapTop .commu_info {position:relative;top:auto;left:auto;padding:0 20px;width:100%;display:flex;display:-webkit-flex;display:-ms-flexbox;flex-flow:row wrap;}
  .mapUIWrap .mapTop .commu_info dl {width:49%;float:none;}
  .mapUIWrap .mapTop .commu_info dl:nth-of-type(1) {margin-right:2%;}
  .mapUIWrap .mapTop .trafficListM {display:block;}
  .mapUIWrap .mapTop .trafficListM .trafficSelect {background-color:#293347 !important;}
  .mapUIWrap .mapContent .hideShowButton {display:none;}
  .mapUIWrap .mapTop .mapButton {right:50px;}
  .mapUIWrap .mapContent .hideShowButton {display:none;}
  .mapUIWrap .mapContent .sideInfoList {display:none !important;}
  .mapUIWrap.statistic .mapContent .staticMapRoadList {padding:50px 0 0 0;}
    
  .mapUIWrap .mapContent .mapRoadList {padding-left:20px;width:100%}
  /* .mapUIWrap .mapContent .mapRoadList .tableStyle .table tbody td {padding-left:10px;} */
  
  .mapUIWrap .mapContent .mapRoadList .tableStyle .table tbody td span {display:inline}

  .mapUIWrap.statistic .mapTop {width:100%;}
  .mapUIWrap.statistic .mapContent .staticMapRoadList .tableStyle {padding:25px;}
  .mapUIWrap.statistic .mapContent .mapArea {width:100%;height:calc(100% - 278px)}

  .centerWrapper .purpose dl dt {float:none;width:100%;text-align:center;}
  .centerWrapper .purpose dl dd {float:none;width:100%;padding-left:0;}
  .centerWrapper .purpose dl dd:before {display:none;}
  .centerWrapper .purpose dl dd p {left:0;}

  .mapUIWrap.statistic .mapContent .staticMapRoadList .staticSearchArea.volume ul li:nth-of-type(2) {margin-top:0;margin-left:0;}

  .siteMapWrap > ul > li {width:48%;margin:0 4% 40px 0;}
  .siteMapWrap > ul > li:nth-of-type(2n) {margin-right:0;}

  .sVisual_wrap {height: 160px;}
  .sVisual_wrap .inner {width:100%;height:160px;}
  .sVisual_wrap .title {position:absolute;top:0;left:0;margin-left:0;width:100%;height:160px;padding-top:40px;}
  .sVisual_wrap .title dt {padding-bottom:15px;font-size:36px;}
  .sVisual_wrap .title dd {position:relative;padding-top:18px;font-size:14px;color:rgba(255,255,255,0.7);}
  .sVisual_wrap .title dd:before {content:"";display:block;position:absolute;top:0;left:50%;margin-left:-25px;width:50px;height:1px;background-color:#fff;}


  .locationWrapper .locationMap figure {text-align: center; overflow: hidden;}
  .locationWrapper .locationMap figure img {width:auto; height: 100%;}
  .locationWrapper > div {margin:0 0 40px 0;}
  .locationWrapper .trafficInfo {padding:20px 0;}
  .locationWrapper .trafficInfo ul {display:block;}
  .locationWrapper .trafficInfo ul li {position:relative;padding:20px;min-height:100px;}
  .locationWrapper .trafficInfo ul li+li {border-left:0;}
  .locationWrapper .trafficInfo ul li:nth-child(1) {width:100%;}
  .locationWrapper .trafficInfo ul li:nth-child(2) {width: 100%;}
  .locationWrapper .trafficInfo ul li:nth-child(3) {width: 100%;}
  .locationWrapper .trafficInfo ul li:nth-child(1):before {content:"";display:inline-block;width:100px;height:100px; border-radius:50%;background:url("../images/traffic_icon_01.png") center center  no-repeat #fff;}
  .locationWrapper .trafficInfo ul li:nth-child(2):before {content:"";display:inline-block;width:100px;height:100px; border-radius:50%;background:url("../images/traffic_icon_02.png") center center  no-repeat #fff;}
  .locationWrapper .trafficInfo ul li:nth-child(3):before {content:"";display:inline-block;width:100px;height:100px; border-radius:50%;background:url("../images/traffic_icon_03.png") center center  no-repeat #fff;}
  .locationWrapper .trafficInfo ul li dl {width: 100%;}

  .siteMapWrap > ul > li {float: none;width:100%;margin-bottom: 30px;min-height:auto;}
  .siteMapWrap > ul > li+li {margin-left: 0;}
  
  
}

@media (max-width:670px) {
  .mapUIWrap.statistic .mapContent .staticMapRoadList .staticSearchArea.volume ul li:nth-of-type(2) {margin-top:10px;margin-left:55px;}
 
  .mapUIWrap .mapTop .mapButton {right:50px}
  
  .centerWrapper .partBox ul li {width:100%;margin:0;padding:0 20px;flex:none !important;-webkit-flex:none !important;-ms-flex:none !important;}
  .locationWrapper .trafficInfo ul {flex-flow:wrap}
  .locationWrapper .trafficInfo ul li {width:100% !important;text-align:center;}
  
  .boardWrapper {height:100%;}
  
  .adminLoginWrap fieldset {width:310px}
  .adminLoginWrap ul li input[type=text] {width:210px}
  .adminLoginWrap ul li input[type=password] {width:210px}
  
  .flexTable {margin:25px 25px;border-top:solid 2px #333;height:180px;overflow:auto;}
  .mapUIWrap .mapContent .mapRoadList .tableStyle .table tbody td strong{display:inline-block}
}

@media (max-width:640px) {
  /*.mapUIWrap .mapContent {height:450px}*/
  .mapUIWrap .mapContent .mapRoadList {height:450px}
  .mapUIWrap .mapContent .mapRoadList .tableStyle .table tbody td span+span {margin-left:0}
  .mapUIWrap.statistic .mapContent .mapArea {width:100%;height:calc(100% - 313px)}
  .mapUIWrap.statistic .mapContent .mapRoadList {height:calc(100% - 313px)}
  .mapUIWrap .mapTop .commu_info dl {width:100%;float:none;} 
  .mapUIWrap .mapTop .commu_info dl:nth-of-type(1) {margin-right:0 !important;margin-bottom:10px;}
  .mapUIWrap .mapTop .mapButton {right:50px}
  /* .mapUIWrap.statistic .mapContent #statsDay {margin-left:65px} */
  
  .mapUIWrap.statistic .mapContent .staticSearchArea ul li:nth-of-type(1) span {display:none !important}
  .mapUIWrap.statistic .mapContent .staticSearchArea ul li:nth-of-type(1) label:nth-of-type(1) {display:none}
  .mapUIWrap.statistic .mapContent .staticSearchArea ul li:nth-of-type(1) select:nth-of-type(1) {display:none}
  .mapUIWrap.statistic .mapContent #loading{left:30% !important}

  .flexTable {margin:25px 25px;border-top:solid 2px #333;height:180px;overflow:auto;}
  .flexTable .thead li:nth-of-type(1) {flex:0 1 70px;-webkit-flex:0 1 70px;-ms-flex:0 1 70px;text-align:center;}
  .flexTable .flexDataTable ul li:nth-of-type(1) {flex:0 1 70px;-webkit-flex:0 1 70px;-ms-flex:0 1 70px;text-align:center;}

  .waLink {bottom:-30px;right:0;left:0}
  .blind {display: none;}

  .relateSiteWrapper ul li a {font-size:14px;}
  .relateSiteWrapper ul li a span {display: block; text-align: center;}
  .relateSiteWrapper ul li a span:last-child {padding:10px 0 0 0;}


  .boardListWrap table thead {display: none;}
  .boardListWrap table tbody td.title{width:280px}
  .map_popup_cctv dl dt {height:30px}
  .map_popup_cctv > dl > dl{height:calc(100% - 36px);}  
  .map_popup_cctv dl dt .lctn_nm {font-size: 16px;padding-left: 5px;}
  .map_popup_cctv dl dt .restTime{font-size:12px; width: 120px;}
}

@media (max-width:320px) {
  .centerWrapper .purpose dl dt img {width:100%}
  .systemWrapper .systemInfo li dl {padding-left:0;padding-top:100px}
  .systemWrapper .systemInfo li figure img {width:100%}
  .mapUIWrap .mapContent {height:370px}
  .mapUIWrap .mapContent .mapRoadList {height:370px}
  .mapUIWrap.statistic .mapContent .mapArea{height:calc(100% - 293px)}
  
  .sVisual_wrap .title {width:294px}
  .adminLoginWrap fieldset {width:100%}
  .adminLoginWrap ul li input[type=text] {width:160px;padding:10px}
  .adminLoginWrap ul li input[type=password] {width:160px;padding:10px}
}