@charset "utf-8";

@import url(common.css);

/* container */
#container { width:100%; position:relative; padding-top:105px}
#container:after {display:block; content:""; clear:both}

/* content */
.main_content {position:relative; width:100%}
.content_area_1{width:1200px; margin:50px auto 30px}
.content_area_1:after {display:block; content:""; clear:both; overflow:hidden}
.content_area_2{ position:relative; width:100%; background:#243356; padding:65px 0 }
.cont_box { width:1200px; margin:0 auto; overflow:hidden}
.content_area_3{width:100%; background:url('/images/template/00002/main/tour_bg.jpg') no-repeat 50% 0; background-size:cover; *background-size:100% auto; padding:65px 0 80px}

/*--------------------------------------- visual ---------------------------------------*/
.area_visual {position:relative; width:100%; height:478px; background-size:cover; *background-size:100% auto; overflow:hidden}
.area_visual .visual { position:relative; width:1200px; height:478px; margin:0 auto; text-align:center}

/* 슬로건 */
.area_visual .mVisual .visual h3 { position:absolute; top:133px; font-family:'NotoM'; color:#fff; font-size:40px; line-height:50px; letter-spacing:-2px; background:url('/images/template/00002/main/M_tit_line.png') no-repeat 50% 0; padding-top:20px}
.area_visual .mVisual .visual h3.sl1 { left:20px}
.area_visual .mVisual .visual h3.sl2 { right:20px}
.area_visual .mVisual .visual div.speed { position:absolute; top:24px; left:50%; margin-left:-122px; width:244px; height:245px; font-family:'NotoM'; color:#fff}
.area_visual .mVisual .visual div.speed .speed_txt { position:absolute; top:5px; left:50%; margin-left:-122px; width:244px; height:245px; }
.area_visual .mVisual .visual div.speed .speed_txt h4 { font-size:20px; margin-top:40px}
.area_visual .mVisual .visual div.speed .speed_txt p.sp_txt1 {font-size:80px; margin:20px 0}
.area_visual .mVisual .visual div.speed .speed_txt p.sp_txt2 {font-size:18px}

/* visual rolling */
.area_visual .mVisual{position:relative; width:100%; height:478px; overflow:hidden}
.area_visual .mVisual .rollU {position:absolute; top:0; left:0; width:100%; height:100%; }
.area_visual .mVisual .rollU.one {width:100%; height:100%; background:url('/images/template/00002/main/bg_M_visual1.jpg') no-repeat center 0; background-size:cover;}
.area_visual .mVisual .rollU.two {width:100%; height:100%; background:url('/images/template/00002/main/bg_M_visual2.jpg') no-repeat center 0; background-size:cover;}
.area_visual .mVisual .rollU.thr {width:100%; height:100%; background:url('/images/template/00002/main/bg_M_visual3.jpg') no-repeat center 0; background-size:cover;}

.area_visual .mVisual .rollU .obj{position:relative; width:100%; height:100%; margin:0 auto; text-align:center; font-family:"NanumSquareR";}
.area_visual .mVisual .rollU .obj .txt1 {position:absolute; left:0; top:50px; width:100%; font-size:30px; line-height:1.4; color:#fff; opacity:0; text-shadow:1px 2px 2px rgba(6,7,7,.77);  display:none;}
.area_visual .mVisual .rollU .obj .txt1 span {font-weight:600;}
.area_visual .mVisual .rollU .obj .txt2 {position:absolute; left:0; top:140px; width:100%; font-size:40px; line-height:1.4; color:#fff; opacity:0; font-weight:600; text-shadow:1px 2px 2px rgba(6,7,7,.77);  display:none;}

.area_visual .mVisual .rollU.one .txt1 {position:absolute; left:50%; margin-left:-600px; width:1120px; text-align:right; display:none;}
.area_visual .mVisual .rollU.one .txt2 {position:absolute; left:50%; margin-left:-600px; width:1120px; text-align:right; display:none;}

.area_visual .mVisual .btn_num_area {position:absolute; bottom:10px; left:0; width:100%; z-index:1; height:25px; line-height:25px; text-align:center; }
.area_visual .mVisual .btn_num_area a.btn_num {margin:10px 0 0 2px; width:16px; height:16px;}
.area_visual .mVisual .btn_num_area a.play {margin-left:10px;}

/* 문구 */
p.main_tit {text-align:center; font-size:24px; line-height:80px; font-family:"NanumSquareR"; color:#555;}
p.main_tit span {color:#2f8ff4; font-weight:600;}

/* 실시간교통정보 */
.traffic_info { position:absolute; bottom:0; width:100%; height:183px; background:url('/images/template/00002/main/traffic_bg.png') repeat; }
.info { position:relative; width:1200px; margin:0 auto}
.info > p { position:absolute; top:10px; left:0}
.info > p span {font-family:'NotoM'; color:#fff; font-size:14px; line-height:30px; letter-spacing:-1px; margin-left:20px; padding-left:20px}
.info > p span.stat1 { background:url('/images/template/00002/main/stat1.png') no-repeat 0 50%}
.info > p span.stat2 { background:url('/images/template/00002/main/stat2.png') no-repeat 0 50%}
.info > p span.stat3 { background:url('/images/template/00002/main/stat3.png') no-repeat 0 50%}


.realTime { position:relative; font-family:'NotoM'; color:#fff; letter-spacing:-2px;}
.realTime h4 {position:absolute; width:70px; height:70px; font-size:13px;}
.realTime h4.up { top:30px; right:0; text-align:left; background:url('/images/template/00002/main/arrow_down.png') no-repeat 100% 0 } /* 180111 */
.realTime h4.up span { position:absolute; top:20px; right:0} /* 180111 */
.realTime h4.down { top:80px; left:0; text-align:left; background:url('/images/template/00002/main/arrow_up.png') no-repeat 0 100%} /* 180111 */

.traffic_name { position:relative; width:100%; margin:0 auto; padding-top:50px; z-index:2}
.traffic_name li { width:11%; float:left; padding-top:30px; background:url('/images/template/00002/main/traffic_circle.png') no-repeat 50% 0}
.traffic_name li p {font-size:16px; line-height:20px; text-align:center;}
.traffic_name li span {font-size:13px; display:block}

.traffic_name2 { position:relative; width:100%; margin:0 auto; padding-top:50px; z-index:2}
.traffic_name2 li { width:10%; float:left; padding-top:30px; background:url('/images/template/00002/main/traffic_circle.png') no-repeat 50% 0}
.traffic_name2 li p {font-size:16px; line-height:20px; text-align:center;}
.traffic_name2 li span {font-size:13px; display:block}

.traffic_road{ position:absolute; top:52px; left:50%; margin-left:-530px; width:100%; height:18px}
.traffic_road ul.down{ position:absolute; top:0; width:100%; height:3px}
.traffic_road ul.up{ position:absolute; bottom:0; width:100%; height:3px}
.traffic_road ul li{ width:10%; height:3px; position:relative; float:left}
.traffic_road .lv_1{ background-color:#21b24b}
.traffic_road .lv_2{ background-color:#fcb700}
.traffic_road .lv_3{ background-color:#eb1c24}

/*--------------------------------------- 메인콘텐츠 ---------------------------------------*/

/* 더보기 */
.btn_more{ position:absolute; top:0; right:0; background:url('/images/template/00002/main/btn_more.png') no-repeat 0 0; width:33px; height:33px; text-indent:-10000px; z-index:10; cursor:pointer }

/* 바로가기 */
.M_link { border:1px solid #acacac; overflow:hidden; margin-left:-1px}
.M_link li { width:239px; float:left; text-align:center; }
.M_link li+li {border-left:1px solid #acacac;}
.M_link li a { height:240px; display:block}
.M_link li a h4 {font-family:'NotoM'; color:#18459f; font-size:22px; line-height:30px; letter-spacing:-1px; padding-top:20px}
.M_link li a dl { padding-top:90px}
.M_link li a dl dt {font-family:'NotoM'; color:#333; font-size:15px; line-height:30px; letter-spacing:-1px}
.M_link li a dl dd {font-family:'NotoR'; color:#777; font-size:13px; line-height:18px; letter-spacing:-1px}
.M_link li.L1 { background:#f9fbfe url('/images/template/00002/main/icon01.png') no-repeat 50% 72px}/* 171019 */
.M_link li.L2 { background:url('/images/template/00002/main/icon02.png') no-repeat 50% 70px}
.M_link li.L3 { background:url('/images/template/00002/main/icon03.png') no-repeat 50% 70px}
.M_link li.L4 { background:url('/images/template/00002/main/icon04.png') no-repeat 50% 65px}
.M_link li.L5 { background:url('/images/template/00002/main/icon11.png') no-repeat 50% 70px}
.M_link li:hover { background-color:#f1f4f9; transition:all 0.8s ease}

/* 공지사항 */ 
.notice { position:relative; width:30%; margin-top:30px; float:left}/* 171214 */
/* 공통 */
h3.notiTit {font-family:'NotoM'; color:#222; font-size:22px; line-height:30px; letter-spacing:-1px}
.noti_list { height:140px; overflow:hidden}
.noti_list li { margin-top:20px}
.noti_list li p { width:60px; height:55px; float:left; text-align:center; background:url('/images/template/00002/main/noti_line.png') no-repeat 0 100%; margin-right:20px}
.noti_list li p span { display:block; font-family:'NotoM'; letter-spacing:-1px}
.noti_list li p span.day {color:#1e62cc; font-size:30px; line-height:32px;}
.noti_list li p span.date {color:#888; font-size:13px;}
.noti_list li a { display:block; height:55px; font-family:'NotoM'; color:#222; font-size:16px; line-height:55px; letter-spacing:-1px; background:url('/images/template/00002/main/noti_dot.png') no-repeat 0 50%; border-bottom:1px solid #ddd; padding-left:15px; overflow-x:hidden; text-overflow:ellipsis; white-space:nowrap;}
.noti_list li:hover a { color:#1e62cc}

/* 교통통제 및 공사현황 */
.notice02 { position:relative; width:30%; margin-top:30px; float: right}/* 171214 */

/* 입찰공고 */
.notice03 { position:relative; width:30%; margin-top:30px; float:left; margin-left:5%}/* 171214 */

/* 팝업존 */
.pop{ position:relative; width:460px; height:212px; overflow:hidden; float:left}
.pop h3 { font-family:'NotoM'; color:#fff; font-size:22px; letter-spacing:-1px; margin-bottom:8px}
.pop .nss_pg{ position:absolute; top:0; right:0; }
.pop .nss_pg > span{ position:absolute; right:100px; width:50px; font-family:'돋움',Dotum; line-height:27px; color:#fff; font-size:14px; display:inline-block; *display:inline; zoom:1; text-align:right}
.pop .nss_pg > span strong{ color:#ffdb4f}
.pop .nss_pg a{ display:block; width:27px; height:27px; float:left; font-size:0; text-indent:-10000em; margin-left:2px;}
.pop .nss_pg a.pre{ background:url('/images/template/00002/main/btn_pop_prev.png') no-repeat; }
.pop .nss_pg a.stop{ background:url('/images/template/00002/main/btn_pop_stop.png') no-repeat; }
.pop .nss_pg a.next{ background:url('/images/template/00002/main/btn_pop_next.png') no-repeat; }
.pop .pop_img{ position:relative; }
.pop .pop_img li{ display:none; width:100%; height:176px}
.pop .pop_img li img{ width:460px; height:176px;}
.pop .pop_img li.on{ display:block}

/* 바로가기02 */
.M_link02 { position:relative; width:700px; height:212px; float:right}
.M_link02 ul li { position:relative; width:33.3%; height:212px; float:left}
.M_link02 ul li h4 {font-family:'NotoM'; color:#fff; font-size:20px; letter-spacing:-1px; background:url('/images/template/00002/main/tit_line.gif') no-repeat 0 0; padding-top:35px }
.M_link02 ul li p {font-family:'NotoR'; color:#aec1e1; font-size:12px; letter-spacing:-1px; line-height:19px; margin:35px 0}
.M_link02 ul li a { position:absolute; right:27px; bottom:0; width:74px; height:23px;}
.M_link02 ul li a:hover { opacity:0.8}
.M_link02 ul li.Ml1 { background:url('/images/template/00002/main/icon06.png') no-repeat 80% 0}
.M_link02 ul li.Ml2 { background:url('/images/template/00002/main/icon07.png') no-repeat 80% 0}
.M_link02 ul li.Ml3 { background:url('/images/template/00002/main/icon08.png') no-repeat 80% 0}

/* 도로교통정보 */
.road_traffic { width:460px; float:left; background:url('/images/template/00002/main/tit_line02.png') repeat-x 0 42px; margin-top:30px }
.road_traffic h3 {font-family:'NotoM'; color:#fff; font-size:18px; letter-spacing:-1px; background:url('/images/template/00002/main/tit_line02.gif') no-repeat 0 100%; padding-bottom:20px }
.road_traffic dl { width:50%; height:70px; float:left; margin-top:17px; letter-spacing:-1px;}
.road_traffic dl.rt1 { background:url('/images/template/00002/main/icon09.png') no-repeat 0 0}
.road_traffic dl.rt1 dt {margin-left:80px; font-family:'NotoR'; font-size:14px; color:#cad8f5; line-height:40px}
.road_traffic dl.rt1 dd {margin-left:80px; font-family:'NotoM'; font-size:22px; color:#acbee7}
.road_traffic dl.rt2 { background:url('/images/template/00002/main/icon10.png') no-repeat 0 0}
.road_traffic dl.rt2 dt {margin-left:80px; font-family:'NotoR'; font-size:14px; color:#fff2c4; line-height:40px}
.road_traffic dl.rt2 dd {margin-left:80px; font-family:'NotoM'; font-size:22px; color:#ffd894}

/* 바로가기03 */
.M_link03 { width:700px; float:right; margin-top:72px}
.M_link03 li { width:218px; height:73px; float:left; border:1px solid #9299ab}
.M_link03 li+li { margin-left:19px;}
.M_link03 li a { position:relative; display:block; font-family:'NotoM'; color:#fff; font-size:16px; letter-spacing:-1px; line-height:73px; text-align:center}
.M_link03 li span { position:absolute; top:-15px; *top:-40px; left:23px; width:80px; height:36px; font-size:0; line-height:0; background:url(/images/template/00002/main/report_img1.png) no-repeat}
.M_link03 li:hover {background-color:#0096ff; border:1px solid #0096ff; transition:0.3s ease-in-out}


.content_box_3 { width:1200px; margin:0 auto; overflow:hidden; }

/* 여행정보 */
.tour { position:relative;  width:600px; float:left; text-align:center}
.tour h3 {font-family:'NotoL'; color:#213152; font-size:38px; letter-spacing:-2px;}
.tour h3 strong {font-family:'NotoM';}
.tour ul.tour_list { height:310px; margin-top:50px; overflow:hidden}
.tour ul.tour_list li { width:266px; height:310px; float:left; background:#fff}
.tour ul.tour_list li+li { margin-left:45px}
.tour ul.tour_list li a p.img { position:relative; width:100%; height:190px; overflow:hidden}
.tour ul.tour_list li a p.img img { width:266px; height:190px; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.tour ul.tour_list li:hover a p.img img {transform:scale(1.3,1.3)}
.tour ul.tour_list li a p.img span { position:absolute; bottom:0; left:0; width:80px; height:30px; font-family:'NotoM'; color:#fff; font-size:14px; line-height:30px; letter-spacing:-1px; text-align:left; padding-left:15px}
.tour ul.tour_list li a p.img span.ruins { background:url('/images/template/00002/main/txt_bg1.png') no-repeat 0 0}/* 문화유적 */
.tour ul.tour_list li a p.img span.attraction { background:url('/images/template/00002/main/txt_bg2.png') no-repeat 0 0}/* 관광명소 */
.tour ul.tour_list li a p.img span.food { background:url('/images/template/00002/main/txt_bg3.png') no-repeat 0 0}/* 맛집 */
.tour ul.tour_list li a p.img span.facility { background:url('/images/template/00002/main/txt_bg4.png') no-repeat 0 0}/* 주요시설 */
.tour ul.tour_list dl { padding:20px; letter-spacing:-1px; text-align:left}
.tour ul.tour_list dl dt {font-family:'NotoM'; font-size:22px; color:#222; line-height:24px; overflow-x:hidden; text-overflow:ellipsis; white-space:nowrap}
.tour ul.tour_list dl dt span { font-size:14px; color:#3b9d40; margin-left:15px}
.tour ul.tour_list dl dd { height:32px; font-family:'NotoM'; font-size:12px; color:#555; line-height:16px; margin-top:10px; overflow:hidden}
.tour .tour_pg{ position:absolute; top:10px; left:0}
.tour .tour_pg a{ display:block; width:33px; height:33px; float:left; font-size:0; text-indent:-10000em; margin-right:2px;}
.tour .tour_pg a.pre{ background:url('/images/template/00002/main/btn_arrowL.png') no-repeat }
.tour .tour_pg a.next{ background:url('/images/template/00002/main/btn_arrowR.png') no-repeat }
.btn_more02 { position:absolute; top:10px; right:0; background:url('/images/template/00002/main/btn_more02.png') no-repeat 0 0; width:33px; height:33px; text-indent:-10000px; z-index:10; cursor:pointer }

/* 시민과의 소통 sns */
.snsStory { position:relative; width:553px; float:right; overflow:hidden; }
.snsStory h3 {font-family:'NotoL'; color:#213152; font-size:38px; letter-spacing:-2px;  text-align:center}
.snsStory h3 strong {font-family:'NotoM';}
.snsStory .SnsTxt { font-size:20px; color:#191919; margin-top:35px;  text-align:left}

.snsStory h4 {font-size:14px; font-family:'NanumBold'; line-height:30px; text-indent:-9999px; }
.snsStory h4 a { position:absolute; width:36px; height:36px; display:block; text-align:center;}

.snsStory h4.tit_1 a{width:36px; height:36px; top:80px; left:134px; background:url(/images/template/00002/main/tab_sns1_off.png) no-repeat center 0;}
.snsStory h4.tit_2 a{width:36px; height:36px; top:80px; left:181px; background:url(/images/template/00002/main/tab_sns2_off.png) no-repeat center 0;}
.snsStory h4.tit_3 a{width:36px; height:36px; top:80px; left:229px; background:url(/images/template/00002/main/tab_sns3_off.png) no-repeat center 0;}

.snsStory h4.tit_1 a.current { background:url(/images/template/00002/main/tab_sns1.png) no-repeat center 0;}
.snsStory h4.tit_2 a.current { background:url(/images/template/00002/main/tab_sns1.png) no-repeat center 0;}
.snsStory h4.tit_3 a.current { background:url(/images/template/00002/main/tab_sns1.png) no-repeat center 0;}

.snsStory .list_box.on {display:block; }
.snsStory .list_box {display:none; padding:20px 0 0; font-family:'돋움',Dotum; font-size:12px; overflow:hidden;}
.snsStory .top_list a {position:relative; display:block; padding:0 0 5px 0;}
.snsStory .top_list a dl {margin-left:24%;}
.snsStory .top_list a dl dt, 
.snsStory .top_list a dl dd {line-height:20px;  }
.snsStory .top_list a:hover { text-decoration:underline;}
.snsStory .top_list a dl dt {font-size:13px; padding-top:5px; font-family:'NotoM'; color:#111;}
.snsStory .top_list a dl dd.date { background:url(/images/template/00002/main/snsBul_clock.png) no-repeat 0 5px; margin-top:3px; padding-left:14px; letter-spacing:0; font-size:12px;font-family:'NotoL'; color:#445687; }
.snsStory .list_box ul.ul_list li {position:relative; font-family:'돋움',Dotum; line-height:25px; font-size:12px; overflow:hidden; }
.snsStory .list_box ul.ul_list li a {display:block; width:70%; padding-left:8px; float:left; color:#444; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:url("/images/template/00002/main/noti_dot01.gif") no-repeat 0 9px;}
.snsStory .list_box ul.ul_list li a:hover {text-decoration:underline;}
.snsStory .list_box ul.ul_list li span.date {display:block; width:25%; float:right; text-align:right; }
.snsStory .btn_more {position:absolute; right:0; top:83px; width:34px; height:33px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/00002/main/btn_more03.png) no-repeat center;}

.snsStory .bul_facebook li .last ,.snsStory .bul_twiter li .last ,.snsStory .bul_blog li .last { background:none !important;}
.snsStory .bul_facebook li a{ background:url(/images/template/00002/main/snsBul_facebook.png) no-repeat 0 0; }
.snsStory .bul_facebook li a span {   float:left; width:15%;  height:30px; display:block;  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:30px; margin:0 0 0 50px; font-family:'NotoM'; font-size:15px; color:#3253b9;}
.snsStory .bul_facebook li .top_list{ background:url(/images/template/00002/main/snsBur_facebook.png) repeat-y 0 bottom; }

.snsStory .bul_twiter li{ background:url(/images/template/00002/main/snsBul_twiter.png) no-repeat 0 0; }
.snsStory .bul_twiter li a span {   float:left; width:15%;  height:30px; display:block;  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:30px; margin:0 0 0 50px; font-family:'NotoM'; font-size:15px; color:#006ab4;}
.snsStory .bul_twiter li .top_list{ background:url(/images/template/00002/main/snsBur_twiter.png) repeat-y 0 bottom; }

.snsStory .bul_blog li{ background:url(/images/template/00002/main/snsBul_blog.png) no-repeat 0 0; }
.snsStory .bul_blog li a span {   float:left; width:15%;  height:30px; display:block;  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:30px; margin:0 0 0 50px; font-family:'NotoM'; font-size:15px; color:#266f29;}
.snsStory .bul_blog li .top_list{ /* background:url(/images/template/00002/main/snsBur_blog.png) repeat-y 0 bottom;  */}

/* 배너존 */
.bannerZoneWrap { width:100%}
.bannerZone {position:relative; width:1200px; height:80px; margin:0 auto; }
.bannerZone h3 {position:absolute; left:0; top:0; line-height:80px; color:#222; font-size:20px; font-family:"NotoM"; text-indent:-9999px;}
.bannerZone .control {position:absolute; left:0; top:25px; }
.bannerZone .control a {display:block; width:34px; height:35px; float:left;  text-indent:-10000em; }
.bannerZone .control a.prev {background:url("/images/template/00002/main/btn_banner_prev.gif") no-repeat; }
.bannerZone .control a.next {background:url("/images/template/00002/main/btn_banner_next.gif") no-repeat; }
.bannerZone .control a.stop {background:url("/images/template/00002/main/btn_banner_stop.gif") no-repeat; }
.bannerZone .control a.play {background:url("/images/template/00002/main/btn_banner_play.gif") no-repeat; }
.bannerZone .control a.list {background:url("/images/template/00002/main/btn_banner_list.gif") no-repeat; }
.bannerZone .obj {margin-left:155px; overflow:hidden;}
.bannerZone .obj li {width:170px; height:40px; margin-left:4px; padding:20px 0; float:left;}
.bannerZone .obj li img {width:100%; height:40px;}


@media screen and (max-width:800px) {				

	.M_link, .M_link li, .M_link03 li {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	.content_area_1, .content_area_2, .cont_box, .content_area_3,
	.area_visual, .area_visual .visual, .area_visual .visual h3,
	.info, .traffic_road, .M_link li, .notice, .notice02, .notice03,
	.pop, .road_traffic, .M_link02, .M_link03, .tour {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}/* 171214 */

	/* content */
	.content_area_1{width:96%; margin:2% auto}
	.content_area_2 { padding:6% 0}
	.cont_box { width:96%}
	.content_area_3{ padding:6% 0 7%}

	/*--------------------------------------- visual ---------------------------------------*/
	.area_visual {height:578px; overflow:hidden}
	/* visual rolling */
	.area_visual .mVisual{ height:578px}
	.area_visual .visual { width:100%; height:578px}
	
	/* 슬로건 */
	.area_visual .mVisual .visual h3 { font-size:28px; line-height:34px; text-shadow:1px 0 2px #111}
	.area_visual .mVisual .visual h3.sl1 { left:5%}
	.area_visual .mVisual .visual h3.sl2 { right:5%}
	.area_visual .mVisual .visual div.speed {top:50px}

	.area_visual .mVisual .one.rollU {background-position:95% 0}
	/* 실시간교통정보 */
	.info {width:96%}
	.traffic_name { width:90%}
	.traffic_name li p { font-size:14px}
	.traffic_name li span {font-size:12px}
	
    .traffic_name2 { width:90%}
	.traffic_name2 li p { font-size:14px}
	.traffic_name2 li span {font-size:12px}

	.traffic_road{ width:90%; box-sizing:border-box; margin-left:-40%}
	.traffic_road ul li { width:10%}
		
	/*--------------------------------------- 메인콘텐츠 ---------------------------------------*/
	/* 바로가기 */
	.M_link li { width:20%; height:150px}
	.M_link li a { height:150px}
	.M_link li a h4 {font-size:18px}
	.M_link li a dl { display:none}
	
	/* 공지사항 */
	.notice { width:100%; margin:2% 0; float:none; border-bottom:3px solid #4c4c4c; padding-bottom:30px}
	/* 공통 */
	h3.notiTit {font-size:18px}
	.noti_list li a { font-size:14px}
		
	/* 교통통제 및 공사현황 */
	.notice02 { width:100%; margin:0 0 2%; float:none}
	
	/* 입찰공고 */ /* 171214 */
	.notice03 { width:100%; margin:0 0 2%; float:none; border-bottom:3px solid #4c4c4c; padding-bottom:30px}
	
	/* 팝업존*/
	.pop{ width:60%; float:none}
	.pop h3 { font-size:18px}
	.pop .pop_img li img{ width:100%}
	
	/* 도로교통정보 */
	.road_traffic { position:absolute; top:38px; right:2%; width:32%; float:none; margin-top:0; overflow:hidden }
	.road_traffic dl { width:100%}
	
	/* 바로가기02 */
	.M_link02 { width:100%; float:none; margin:40px 0}
	
	/* 바로가기03 */
	.M_link03 { width:100%; float:none; margin:0}
	.M_link03 li { -webkit-width:calc(33.3% - 10px); -moz-width:calc(33.3% - 10px); -ms-width:calc(33.3% - 10px); width:calc(33.3% - 10px)}
	.M_link03 li + li { margin-left:2%}
	
	.content_box_3 { width:100%;}
	
	/* 여행정보 */
	.tour { width:96%; margin:0 2% 30px;}
	.tour h3 {font-size:32px}
	.tour ul.tour_list {margin-top:5%}
	.tour ul.tour_list li { -webkit-width:calc(50% - 10px); -moz-width:calc(50% - 10px); -ms-width:calc(50% - 10px); width:calc(50% - 10px)}
	.tour ul.tour_list li+li { margin-left:2%}
	.tour ul.tour_list li a p.img img { width:100%}
	
	/* 시민과의 소통 sns */
	.snsStory { float:none; width:96%; margin:0 2%;}
	.snsStory .SnsTxt { text-indent:-9999px;}
	.snsStory h4.tit_1 a{left:0;}
	.snsStory h4.tit_2 a{left:47px;}
	.snsStory h4.tit_3 a{left:95px;}

	.snsStory .top_list a dl dt {float:none; }
	.snsStory .bul_facebook li a{ background:none; }
	.snsStory .bul_facebook li { background:url(/images/template/00002/main/snsBul_facebook.png) no-repeat 0 0; }
	.snsStory .bul_facebook li a span , .snsStory .bul_twiter li a span , .snsStory .bul_blog li a span  { float:none; width:100%;}
	.snsStory .top_list a dl { margin-left:50px;}
	
	/* 배너존 */
	.bannerZone {width:96%; overflow:hidden}
	.bannerZone .obj li {width:48%; margin-left:2%;}

}

@media screen and (max-width:690px) {	

	/*--------------------------------------- visual ---------------------------------------*/
	.area_visual {background-position:70%}
	/* 슬로건 */
	.area_visual .mVisual .visual h3 { top:280px}
	.area_visual .mVisual .visual div.speed { top:30px}
	
	/*--------------------------------------- 메인콘텐츠 ---------------------------------------*/
	/* 바로가기 */
	.M_link li { width:33.3%; height:150px}
	.M_link li+li { border:0}
	.M_link li a h4 {font-size:16px}
	
	/* 팝업존*/
	.pop{ width:100%}
	
	/* 도로교통정보 */
	.road_traffic { position:absolute; top:280px; left:2%; width:96%}
	.road_traffic dl { width:50%}
	
	/* 바로가기02 */
	.M_link02 { width:100%; height:auto; float:none; margin:200px 0 2%; border:1px solid #737e94; box-sizing:border-box; overflow:hidden}
	.M_link02 ul li { width:100%; height:auto; padding:20px; box-sizing:border-box; background-position:96% 50% !important}
	.M_link02 ul li+li {border-top:1px solid #737e94}
	.M_link02 ul li h4 { font-size:16px; padding:20px 0; margin-bottom:20px}	
	.M_link02 ul li p { display:none}
	.M_link02 ul li a { left:20px; right:auto; bottom:20px}
	
	/* 바로가기03 */
	.M_link03 { width:100%; float:none; margin:0; border:1px solid #737e94; box-sizing:border-box; overflow:hidden}
	.M_link03 li { width:100%; border:0}
	.M_link03 li + li { margin-left:0; border-top:1px solid #737e94;}
	

	
	/* 여행정보 */
	.tour ul.tour_list li { -webkit-width:calc(50% - 7px); -moz-width:calc(50% - 7px); -ms-width:calc(50% - 7px); width:calc(50% - 7px)}
	.tour ul.tour_list li+li { margin-left:2%}
	.tour ul.tour_list li a p.img img { width:100%}
	
	/* 시민과의 소통 sns */
	.snsStory .top_list a dl dd { width:40%;}

	
	
}

@media screen and (max-width:480px) {
	
	/*--------------------------------------- visual ---------------------------------------*/
	.area_visual,
	.area_visual .visual,
	.area_visual .mVisual { height:378px}

	
	/* 슬로건 */
	.area_visual .mVisual .visual h3 { top:225px; font-size:22px}
	.area_visual .mVisual .visual div.speed { top:30px; margin-left:-100px; width:200px; height:201px}/* 171214 */
	.area_visual .mVisual .visual div.speed img { width:200px; height:201px}/* 171214 */
	.area_visual .mVisual .visual div.speed .speed_txt { top:-20px; margin-left:-100px; width:200px; height:200px}/* 171214 */
	
	.traffic_info { display:none; height:250px}
	.traffic_name li { text-align:center}
	.traffic_name li p { width:10px; display:inline-block}
	.traffic_name li span {display:inline-block; margin-left:-7px}

	.realTime h4.down { top:150px;}/* 180111 */
	/*--------------------------------------- 메인콘텐츠 ---------------------------------------*/
	/* 도로교통정보 */
	.road_traffic { top:260px }
	.road_traffic dl { width:100%}
	
	/* 바로가기02 */
	.M_link02 { margin:270px 0 2%}
	
	/* 여행정보 */
	.tour h3 { font-size:32px; margin-bottom:50px}
	.tour .tour_pg, .btn_more02 { top:45px}
	.tour ul.tour_list li { width:100%; margin:0 !important}
	
	/* 배너존 */
	.bannerZone .obj li {width:100%; margin-left:0;}	
	
		
}