@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
@import url(basic.css); /* 초기화 */

/************************************************************************************
UI st.
*************************************************************************************/
/* Input, Select, Textarea */
input[type="text"],
input[type="search"],
input[type="password"] {height: 33px; padding: 0 15px;}
input[type="file"],
input[type="submit"],
input[type="button"] {height: 35px; padding: 0 15px; font-family: 'Noto Sans KR', sans-serif;}
select {height: 35px; padding: 0 25px 0 10px; font-size: 14px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('/images/common/ic_arrow_down.png') right 5px center no-repeat; font-family: 'Noto Sans KR', sans-serif;}
select::-ms-expand {display: none;}
textarea {width: calc(100% - 22px); padding: 10px; font-family: 'Noto Sans KR', sans-serif;}


/* Radio, Checkbox */  /*20240611 수정*/
.radio_style1 {position: relative; display: inline-block; vertical-align: top; padding-left: 23px;}
.radio_style1 input[type='radio'] {display: none;}
.radio_style1 label {display: inline-block; vertical-align: middle; height: 18px; line-height: 18px;}
.radio_style1 input + label.radio_img {/*position: absolute; top: 0; left: 0;*/ width: 18px; cursor: pointer; background: url('/images/common/img_radio_off.png') no-repeat;}
.radio_style1 input:checked + label.radio_img {background: url('/images/common/img_radio_on.png') no-repeat;}

.check_style1 {position: relative; display: inline-block; vertical-align: middle; padding-left: 20px;}
.check_style1 input[type='checkbox'] {display: none;}
.check_style1 label {display:inline-block; vertical-align: top; height: 15px; line-height: 15px;}
.check_style1 input + label.check_img {position: absolute; top: 0; left: 0; width: 15px; cursor: pointer; background: url('/images/common/img_check_off.png') no-repeat;}
.check_style1 input:checked + label.check_img {background: url('/images/common/img_check_on.png') no-repeat;}


/* Basic calendar */
input.datepicker {padding-right: 35px; background: #fff url('/images/common/ic_calendar.png') right 5px center no-repeat; cursor: pointer;}
input.datepicker2 {padding-right: 35px; background: #fff url('/images/common/ic_calendar2.png') right 5px center no-repeat; cursor: pointer;}
.ui-widget.ui-widget-content {padding: 10px 15px; border: 1px solid #000;}
.ui-datepicker {z-index: 1000 !important;}
.ui-datepicker .ui-widget.ui-widget-content {border:0; color: #23abe7; background: #fff; border: 1px solid #000;}
.ui-datepicker .ui-widget-header {padding: 5px 0; font-size: 18px; color: #333; font-weight: 600; background: #fff; border: 0; border-radius: 0;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {top: 6px; width: 20px; height: 20px; cursor: pointer;}
.ui-datepicker .ui-state-hover.ui-datepicker-prev-hover {left: 2px; top: 6px; background: #666; border: 0;}
.ui-datepicker .ui-state-hover.ui-datepicker-next-hover {right: 2px; top: 6px; background: #666; border: 0;}
.ui-datepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-w {position: static; width: 20px; height: 20px; margin: 0; background: #fff url('/images/common/ic_arrow_left_white.png') center center no-repeat !important;}
.ui-datepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-e {position: static; width: 20px; height: 20px; margin: 0; background: #fff url('/images/common/ic_arrow_right_white.png') center center no-repeat !important;}
.ui-datepicker {padding: 0; width: auto; border-radius: 0 !important;}
.ui-datepicker .ui-datepicker-title {line-height: normal;}
.ui-datepicker .ui-datepicker-title select {height: 30px; padding: 0 15px 0 10px; font-size: 14px; color: #333; background: #fff url('/images/common/btn_down.png') right 5px center no-repeat; background-size: 12px !important;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {width: 38%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {width: 48%;}
.ui-datepicker table {margin-bottom: 0;}
.ui-datepicker th {width: 30px; height: 30px; font-weight: 400; font-size: 14px; color: #999; border-bottom: 0;}
.ui-datepicker td {width: 30px; height: 30px;}
.ui-datepicker td a.ui-state-default {width: 23px; height: 23px; line-height: 16px; font-size: 14px; color: #666; text-align: center; border: 0; background: #fff; letter-spacing: -1px;}
.ui-datepicker td a.ui-state-active {background: #35babc; border: 1px solid #35babc; color: #fff;}
.ui-datepicker td a.ui-state-highlight {background: #fff; color: #333; border: 1px solid #35babc;}


/* Color */
.white {color: #fff !important;}
.black {color: #000 !important;}
.darkgray {color: #333 !important;}
.gray{color: #404040 !important;}
.lightgray {color: #999 !important;}
.green {color: #31c231 !important;}
.yellow {color: #ffa200 !important;}
.red {color: #fa0302 !important;}
.mint {color: #35babc !important;}
.darkblue {color: #474256 !important;}
.blue {color: #3673ee !important;}

/* Background */
.bg_lightgray {background: #f9f9f9 !important;}
.bg_green {background: #31c231 !important;}
.bg_yellow {background: #ffa200 !important;}
.bg_red {background: #fa0302 !important;}
.bg_mint {background: #35babc !important;}
.bg_blue {background: #0054a6 !important;}
.bg_white {background: #fff !important;}


/* Btn */
.btn_wrap:after {display: block; visibility: hidden; clear: both; content: "";}
.btn {display: inline-block; height: 35px; padding: 0 15px; line-height: 35px; font-size: 14px; text-align: center; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; vertical-align: top; cursor: pointer;}

.btn_wrap .btn {padding: 0 30px;}

.btn_blue {color:#fff !important; background: #0054a6; border: 1px solid #0054a6 !important;}
.btn_mint {color:#fff !important; background: #3673ee; border: 1px solid #3673ee !important;}
.btn_gray {color:#fff !important; background: #666; border: 1px solid #666 !important;}
.btn_lightgray {color:#fff !important; background: #999; border: 1px solid #999 !important;}

.btn_round {border-radius: 50px;}

.btn_close {display: inline-block; width: 14px; height: 14px; padding: 0; line-height: 14px; background: url('/images/common/ic_close.png') center center no-repeat; vertical-align: middle;}


/* Icon */
.icon {display: inline-block; text-indent: -9999px; background-size: 100% !important;}

.ic_square {width: 10px; height: 10px;}
.ic_mark {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; color: #fff; background: url('/images/common/ic_mark.png') center center no-repeat; text-indent: 0 !important;} /* 도로번호 마크 */
.ic_mark_national {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; color: #fff; background: url('/images/common/ic_mark_national.png') center center no-repeat; text-indent: 0 !important;} /* 지방도번호 마크 */
.ic_mark_gibangdo{width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px;font-weight:bold;  color: blue; background: url('/images/main/ic_gibangdo.png') center center no-repeat; text-indent: 0 !important;} /* 지방도번호 마크 */
.ic_sk {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; background: url('/images/common/ic_sk.png') center center no-repeat;}
.ic_gs {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; background: url('/images/common/ic_gs.png') center center no-repeat;}
.ic_hd {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; background: url('/images/common/ic_hd.png') center center no-repeat;}
.ic_soil,.ic_so {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; color: #fff; background: url('/images/common/ic_soil.png') center center no-repeat;}
.ic_goodoil,.ic_no,.ic_ad {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; color: #fff; background: url('/images/common/ic_goodoil.png') center center no-repeat;}
.ic_lpg {width: 22px; height: 22px; background: url('/images/common/ic_lpg.png') center center no-repeat;}
.ic_charge {width: 28px; height: 28px; background: url('/images/common/ic_charge.png') center center no-repeat;}
.ic_hydrogen {width: 35px; height: 35px; background: url('/images/common/ic_hydrogen.png') center center no-repeat;}
.ic_rest {width: 25px; height: 25px; background: url('/images/common/ic_rest.png') center center no-repeat;}
.ic_food {width: 25px; height: 25px; background: url('/images/common/ic_food.png') center center no-repeat;}
.ic_star {width: 15px; height: 15px; background: url('/images/common/ic_star.png') center center no-repeat;}
.ic_file {width: 10px; height: 15px; background: url('/images/common/ic_file.png') center center no-repeat;}
.ic_big {width: 40px; height: 40px; background: url('/images/common/01.car_b_ico.png') center center no-repeat; vertical-align:center;}
.ic_small{width: 40px; height: 40px; background: url('/images/common/01.car_s_ico.png') center center no-repeat; vertical-align:center;}
.ic_rstroom{width: 40px; height: 40px; background: url('/images/common/01.wc_ico.png') center center no-repeat; vertical-align:center;}
.ic_spRstroom{width: 40px; height: 40px; background: url('/images/common/01.tlt_ico.png') center center no-repeat; vertical-align:center;}
.ic_active{width: 40px; height: 40px; background: url('/images/common/01_17.png') center center no-repeat; vertical-align:center;}
.ic_x{width: 20px; height: 20px; background:url('/images/common/02.x_ico.png') center center no-repeat; vertical-align:center;}
.ic_y{width: 20px; height: 20px; background:url('/images/common/02.crcl_ico.png') center center no-repeat; vertical-align:center;}
.icn_elct {width: 117px; height: 54px; background: url('/images/common/icn_elct.png') center center no-repeat;}
.icn_hdrg {width: 117px; height: 54px; background: url('/images/common/icn_hdrg.png') center center no-repeat;}
.ic_tel{width: 25px; height: 25px; background: url('/images/common/call_black_03.png') center center no-repeat;}

.ic_charge2 {width: 28px; height: 35px; background: url('/images/common/icon_ev2.png') center center no-repeat;}
.ic_hydrogen2 {width: 28px; height: 35px; background: url('/images/common/icon_h2.png') center center no-repeat;}
.ic_gasstation {width: 80px; height: 30px; line-height: 29px; text-align: center; font-size: 12px; color: #fff; background: url('/images/main/new/ic_gasstation.png') center center no-repeat;}
.ic_sk2 {width: 24px; height: 25px; line-height: 29px; text-align: center; font-size: 12px; background: url('/images/main/new/ic_sk2.png') center center no-repeat;}

/* Text wrap */
.line1_cut {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.line2_cut {display: -webkit-box; height: 40px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;}





/************************************************************************************
Header st.
*************************************************************************************/
header {position: relative; z-index: 9999;}

/* 배너 */

/* 상단배경색 */
.banner_wrap {height: 255px; background: #3673ee; overflow: hidden; transition: all.7s ease;}
/*.banner_wrap {height: 240px; background: url('/images/main/img_bgBack.png') ; overflow: hidden; transition: all.7s ease;}*/
/* 상단배경색 */
.banner_wrap.active {height: 5px;}

/* 배너 - 배너슬라이드 */
.banner_wrap .bx-wrapper {float: left; width: 520px; text-align: center;}

.banner_wrap .campaign .bx-wrapper .bx-viewport {width: 100% !important; height: 205px !important;}
.banner_wrap .bx-wrapper .bx-viewport {width: 100% !important; height: 95px !important; }
/* .banner_wrap .banner_slide {float: left; width: 520px; text-align: center;} */

/* 배너 - 사고, 작업 */
.banner_wrap .banner_cont {float: right; width: calc(100% - 520px); padding: 0 20px 0 50px; color: #000;}
.banner_wrap .banner_cont .box {float: left; width: calc((100% - 260px) / 2); margin: 0; margin-top: 18px; padding: 0 15px; box-sizing:border-box; }
.banner_wrap .banner_cont .box.work_latest {margin-right: 0;}
/* .banner_wrap .banner_cont {float: left; width: calc(100% - 920px); padding: 0 20px 0 50px; color: #000;} */
/* .banner_wrap .banner_cont .box { margin: 0; margin-top: 18px; margin-right: 3%;} */
/* .banner_wrap .banner_cont .box.work_latest {float: left; width: 50%; margin-right: 0;} */

/* .banner_wrap .banner_cont .box.accident_latest {float: left; width: 50%; margin-right: 0;} */
.banner_wrap .banner_cont .box .box_title {margin-bottom: 0; padding-left: 0; color: #333;}
.banner_wrap .banner_cont .box .box_title strong {font-size: 20px; font-weight: 500; color:#fff;}
.banner_wrap .banner_cont .box .box_cont {padding: 0; border: 0; box-shadow: none;}
.banner_wrap .banner_cont .box .box_cont ul li {width: 100% !important;}
.banner_wrap .banner_cont .box .box_cont ul li a {display: block; padding: 15px 0; text-align: left;}
.banner_wrap .banner_cont .box .box_cont ul li a:after {display: block; visibility: hidden; clear: both; content: "";}
.banner_wrap .banner_cont .box .box_cont ul li a .ic_wrap {float: left; width: 57px; text-align: center; font-size: 16px; font-weight: 500;}
.banner_wrap .banner_cont .box .box_cont ul li a .text_wrap {float: left; width: calc(100% - 70px); padding-left: 13px;}
.banner_wrap .banner_cont .box .box_cont ul li a .text_wrap>* {display: block; color: #c2d5fa; font-weight: 400; line-height: 26px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.banner_wrap .banner_cont .box .box_cont ul li a .text_wrap strong {font-size: 18px;}
.banner_wrap .banner_cont .box .box_cont ul li a .text_wrap span {font-size: 17px;}


/* 배너 - 사고, 작업 */
.banner_wrap .banner_cont {float: right; width: calc(100% - 520px); padding: 0 20px 0 50px; color: #000;}
/* .banner_wrap .banner_cont {float: left; width: calc(100% - 920px); padding: 0 20px 0 50px; color: #000;} */
.banner_wrap .banner_cont .box_emp {float: left; width: 48.5%; margin: 0; margin-top: 18px; margin-right: 3%;}
.banner_wrap .banner_cont .box_emp .work_latest_emp {margin-right: 0;}
.banner_wrap .banner_cont .box_emp .box_title_emp {margin-bottom: 0; padding-left: 0; color: #333;}
.banner_wrap .banner_cont .box_emp .box_title_emp strong {font-size: 20px; font-weight: 500;}
.banner_wrap .banner_cont .box_emp .box_cont_emp {padding: 0; border: 0; box-shadow: none;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li {width: 100% !important;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a {display: block; padding: 15px 0; text-align: left;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a:after {display: block; visibility: hidden; clear: both; content: "";}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a .ic_wrap {float: left; width: 57px; text-align: center; font-size: 16px; font-weight: 500;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a .text_wrap_emp {float: left; width: calc(100% - 70px); padding-left: 13px;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a .text_wrap_emp>* {display: block; color: #000; font-weight: 400; line-height: 26px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a .text_wrap_emp strong_emp {font-size: 18px;}
.banner_wrap .banner_cont .box_emp .box_cont_emp ul li a .text_wrap_emp span {font-size: 17px;}
.banner_wrap .banner_cont .box_emp .box_cont_emp .bx-wrapper_emp .bx-viewport {width: 100% !important; height: 82px !important;}

/* 콜센터 */
.banner_wrap .banner_cont .box.call_center { width: 260px; }
.banner_wrap .banner_cont .box.call_center .call_center_title_wrap { position: relative; padding-top: 50px; padding-right: 62px; padding-bottom: 35px; background: url(/images/main/icon_call_center.png) no-repeat right bottom 25px; }
.banner_wrap .banner_cont .box.call_center .call_time { position: absolute; left: 0; top: -5px; display: inline-block; vertical-align: top; border-radius:100px; font-weight: bold; color: #fff; background: #292c36; height: 35px; line-height: 35px; padding: 0 18px; }
.banner_wrap .banner_cont .box.call_center .call_time:before { content: ""; display: block; border-top: 10px solid #292c36; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid transparent; position: absolute; bottom: -10px; left: 15px; transform: rotate(90deg); }
.banner_wrap .banner_cont .box.call_center .call_center_title { font-size: 18px; font-weight: 500; color: #fff; line-height: 1; text-align: center; margin-top : -10px; margin-right : -12px; }
.banner_wrap .banner_cont .box.call_center .number { display: block; color: #ffde00; font-weight: bold; font-size: 30px; margin-top: 6px; }

/* 상단 배경색 */

/* 배너 - 공지 */
.banner_wrap .notice_latest {display: block; padding: 20px 15px; background: url('/images/main/bg_dotted_1.png') left top repeat-x; }

.banner_wrap .notice_latest ul li {width: 100% !important;}
.banner_wrap .notice_latest ul li a { height: 32px; line-height: 32px; display: block; padding-right: 100px; font-size: 18px; color: #000; text-align: left;  text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}

.banner_wrap .notice_latest ul li a strong {display: block;  position: relative; font-weight: 400; color: #c2d5fa; padding-left: 50px;}
.banner_wrap .notice_latest ul li a .nsokbo:before { content:""; width:34px; height:32px; display:block;  background: url('/images/main/ic_note_1.png') center no-repeat; background-size: contain; position: absolute; left:0; top:50%; margin-top: -16px; }
.banner_wrap .notice_latest ul li a .sokbo:before { content:""; width:34px; height:32px; display:block;  background: url('/images/common/ic_emergency.png') center no-repeat; background-size: contain; position: absolute; left:0; top:50%; margin-top: -16px; }
.banner_wrap .notice_latest ul li a span {position: absolute; right: 0; font-size: 17px; font-weight: 500; color:#c2d5fa;}
.banner_wrap .notice_latest .bx-wrapper {float: none; width: 100%; margin: 0 !important;}

.banner_wrap .notice_latest .bx-wrapper .bx-viewport {width: 100% !important; height: 32px !important;}

.banner_wrap.active .banner_slide {display: none;}
.banner_wrap.active .box {display: none;}
.banner_wrap.active .notice_latest {display: none;}

/* 헤더 */
.header_wrap {position: relative; background: #fff; border-bottom: 1px solid #ddd; /* box-shadow: 0 5px 10px rgba(7, 0, 2, 0.3) */;}
.header_wrap>div {margin: 0 auto;padding-right: 290px;}
.header_wrap.sub_header_wrap>div { position: relative; width:100%; padding: 0 8%; /*padding-right:0*/ }
.header_wrap.sub_header_wrap .logo { width:380px; left: 8%; position: absolute; background-size: 100%; }
.header_wrap.sub_header_wrap .gnb_wrap { width: calc(100% - 380px); }

/* 헤더 - 로고 */
.header_wrap .logo {display: block; float: left; width: 380px; height: 80px; background: url('/images/common/logo_1.png') center center no-repeat; background-size:contain;}
.header_wrap .logo.web_block {display: block; position: absolute; left: 0; top: 0; bottom: 0; width:500px; background-size:380px;}
.header_wrap .logo.web_none {display: none;}

/* 모바일헤더 - 로고 */
.header_wrap .m_home_logo {display: none;width: 30px;left: 40px;position: absolute;height: 50px;background: url('/images/mobile/common/home_icon.png') center center no-repeat;}
.header_wrap .m_main_logo {display: none;width: 221px;height: 50px;background: url('/images/mobile/common/callcenter_icon.png') center center no-repeat; background-size:contain;position: absolute;left: 50%;margin-left: -110.5px;top: 0;}
.header_wrap .m_main_logo.web_none {display: none;}

/* 헤더 - gnb */
.header_wrap .gnb_wrap {float: right; width: calc(100% - 500px); font-size:0; }
.header_wrap .gnb_wrap .gnb { display:flex; flex-wrap:wrap; }
.header_wrap .gnb_wrap .depth1>li {position: relative; flex: 1 1 0;}
.header_wrap .gnb_wrap .depth1>li>a {display: flex; height: 80px; align-items: center; font-size: 20px; font-weight: 500; text-align: center; line-height: 1.1; justify-content: center; letter-spacing: -1px; }
.header_wrap .gnb_wrap .depth1>li:hover>a,
.header_wrap .gnb_wrap .depth1>li.active>a {color: #3673ee;}

.header_wrap .gnb_wrap .depth2 {display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; text-align: center; background: #fff;}
/* .header_wrap .gnb_wrap .depth1>li:hover a.mobile_none + .depth2 {display: block;} */
.header_wrap .gnb_wrap .depth2>li>a {display: block; padding: 16px 10px; font-size: 16px; font-weight: 500; line-height: 22px; border: 1px solid #ddd; border-top: 0; -ms-word-break: keep-all; word-break: keep-all;}
.header_wrap .gnb_wrap .depth2>li:first-child>a {background: #fff; border-top: 1px solid #ddd;}
.header_wrap .gnb_wrap .depth2>li:hover>a,
.header_wrap .gnb_wrap .depth2>li.active>a {color: #fff; border-color: #3673ee; background: #3673ee;}

.header_wrap .gnb_wrap .depth2.open {display: block !important;}
.header_wrap .gnb_wrap .depth2.hide {display: none !important;}

/* 헤더 - 배너 버튼 */
.header_wrap .btn_head {position: absolute; right: 0; top: 0; bottom: 0; display: block; width: 80px; height: 80px; }
.header_wrap .btn_head.active {}
.header_wrap .btn_head span { display:block; width:45px; height:45px; border-radius:15px; background: #f3f3f3 url('/images/main/btn_head_up_1.png') center center no-repeat; margin:0 auto; margin-top:19px; }
.header_wrap .btn_head.active span { background-image: url('/images/main/btn_head_down_1.png'); }

/* 헤더 - 서브 헤더 레이아웃 */
.sub_header_wrap.header_wrap {border-top: 5px solid #3673ee;}
.sub_header_wrap.header_wrap .btn_head {display: none;}





/************************************************************************************
Footer st.
*************************************************************************************/
footer {}

.footer_wrap {position: relative; padding: 17px 0; text-align: center; color: #999; font-size: 14px; background: #e8eced;}
.footer_wrap .address {margin-bottom: 3px; font-weight: 400;}
.footer_wrap .address strong {font-weight: 400;}
.footer_wrap .copy {font-weight: 300;}

footer .btn_satisfction {position: absolute; right: 0; bottom: 0; display: block; width: 80px; height: 80px; background: url('/images/main/btn_head_down.png') center center no-repeat;}
footer .btn_satisfction.active {background: url('/images/main/btn_head_up.png') center center no-repeat;}


/* 홈페이지 콘텐츠 만족도 */
.satisfction_box {margin-top: 20px; background: #fff; text-align:left;}
.satisfction_box.box .box_cont {padding: 20px 25px;}

.satisfction_box.box .box_cont dl.radio_wrap {}
.satisfction_box.box .box_cont dl.radio_wrap dt {margin-bottom: 10px; font-size: 20px; color: #666; font-weight: 500;}
.satisfction_box.box .box_cont dl.radio_wrap dd {margin-bottom: 10px; font-size: 15px; color: #666; letter-spacing: -0.5px;}
.satisfction_box.box .box_cont dl.radio_wrap dd .radio_style1 {margin-right: 10px;}
.satisfction_box.box .box_cont dl.radio_wrap dd label {font-size: 14px; vertical-align: top; line-height: 14px; letter-spacing: -1px;}
.satisfction_box.box .box_cont dl.radio_wrap dd label span {margin-left: 3px;}

.satisfction_box.box .box_cont dl.comments_wrap {margin-top: 0; border-top: 0;}
.satisfction_box.box .box_cont dl.comments_wrap dt {margin-bottom: 8px; font-size: 18px; font-weight: 500;}
.satisfction_box.box .box_cont dl.comments_wrap dd textarea {float: left; width: calc(100% - 135px); height: 78px; border: 1px solid #dedede;}
.satisfction_box.box .box_cont dl.comments_wrap dd .btn {float: right; width: 100px; height: 100px; padding: 0; font-size: 16px;}
.satisfction_box.box .box_cont dl.comments_wrap dd p {margin-top: 5px; font-size: 16px; color: #666; line-height: 26px;}


footer .satisfction_box {display: none; width: 1380px; margin: 0 auto;}
footer .satisfction_box.box .box_cont {padding: 20px 0; border: 0; box-shadow: none;}
footer .satisfction_box.box .box_cont:after {display: block; visibility: hidden; clear: both; content: "";}
footer .satisfction_box.box .box_cont dl.radio_wrap {float: left; width: 50%;}
footer .satisfction_box.box .box_cont dl.radio_wrap dt {margin-bottom: 10px;}
footer .satisfction_box.box .box_cont dl.radio_wrap dd:last-child {padding-top: 20px; border-top: 1px solid #ddd;}
footer .satisfction_box.box .box_cont dl.comments_wrap {float: right; width: 47%;}
footer .satisfction_box.box .box_cont dl.comments_wrap dd textarea {width: calc(100% - 90px); height: 38px;}
footer .satisfction_box.box .box_cont dl.comments_wrap dd .btn {width: 60px; height: 60px; font-size: 14px;}
footer .satisfction_box.box .box_cont dl.comments_wrap dd p {font-size: 14px;}

/* 홈페이지 콘텐츠 만족도 */ /*20240613 수정*/
.satisfction_box_2 {margin-top: 20px; background: #fff; text-align:left;}
.satisfction_box_2.box .box_cont {padding: 20px 25px;}

.satisfction_box_2.box .box_cont dl.radio_wrap {}
.satisfction_box_2.box .box_cont dl.radio_wrap dt {word-break: keep-all; margin-bottom: 10px; font-size: 20px; color: #666; font-weight: 500;}
.satisfction_box_2.box .box_cont dl.radio_wrap dd {margin-bottom: 10px; font-size: 15px; color: #666; letter-spacing: -0.5px;}
.satisfction_box_2.box .box_cont dl.radio_wrap dd .radio_style1 {margin-right: 10px;}
.satisfction_box_2.box .box_cont dl.radio_wrap dd label {font-size: 14px; vertical-align: top; line-height: 14px; letter-spacing: -1px;}
.satisfction_box_2.box .box_cont dl.radio_wrap dd label span {margin-left: 3px;}

.satisfction_box_2.box .box_cont dl.radio_wrap .radio_style {margin: 20px 0 40px;}
.satisfction_box_2.box .box_cont dl.radio_wrap .radio_style table th,
.satisfction_box_2.box .box_cont dl.radio_wrap .radio_style table td {height: 30px;padding: 0;font-size: 14px;}

.satisfction_box_2.box .box_cont dl.radio_wrap .radio_style div {width: 100%;display: flex;justify-content: space-between;font-size: 11px;}
.satisfction_box_2.box .box_cont dl.radio_wrap .radio_style div span {width: 60px;text-align: center;}
.satisfction_box_2.box .box_cont dl.radio_wrap .radio_style div span:first-child {text-align: left;}


.check_style1 {position: relative; display: inline-block; vertical-align: middle; padding-left: 20px;}
.check_style1 input[type='checkbox'] {display: none;}
.check_style1 label {display:inline-block; vertical-align: top; height: 15px; line-height: 15px;}
.check_style1 input + label.check_img {position: absolute; top: 0; left: 0; width: 15px; cursor: pointer; background: url('/images/common/img_check_off.png') no-repeat;}
.check_style1 input:checked + label.check_img {background: url('/images/common/img_check_on.png') no-repeat;}




.satisfction_box_2.box .box_cont dl.comments_wrap {margin-top: 0; border-top: 0;}
.satisfction_box_2.box .box_cont dl.comments_wrap dt {margin-bottom: 8px; font-size: 18px; font-weight: 500;}
.satisfction_box_2.box .box_cont dl.comments_wrap dd textarea {float: left; width: calc(100% - 135px); height: 78px; border: 1px solid #dedede;}
.satisfction_box_2.box .box_cont dl.comments_wrap dd .btn {float: right; width: 100px; height: 100px; padding: 0; font-size: 16px;}
.satisfction_box_2.box .box_cont dl.comments_wrap dd p {margin-top: 5px; font-size: 16px; color: #666; line-height: 26px;}


footer .satisfction_box_2 {display: none; width: 1380px; margin: 0 auto;}
footer .satisfction_box_2.box .box_cont {padding: 20px 0; border: 0; box-shadow: none;}
footer .satisfction_box_2.box .box_cont:after {display: block; visibility: hidden; clear: both; content: "";}
footer .satisfction_box_2.box .box_cont dl.radio_wrap {float: left; width: 50%;}
footer .satisfction_box_2.box .box_cont dl.radio_wrap dt {margin-bottom: 10px;}
footer .satisfction_box_2.box .box_cont dl.radio_wrap dd:last-child {padding-top: 20px; border-top: 1px solid #ddd;}
footer .satisfction_box_2.box .box_cont dl.comments_wrap {float: right; width: 47%;}
footer .satisfction_box_2.box .box_cont dl.comments_wrap dd textarea {width: calc(100% - 90px); height: 38px;}
footer .satisfction_box_2.box .box_cont dl.comments_wrap dd .btn {width: 60px; height: 60px; font-size: 14px;}
footer .satisfction_box_2.box .box_cont dl.comments_wrap dd p {font-size: 14px;}



/************************************************************************************
Main st.
*************************************************************************************/
.main_contents {position: relative; height: 80vh; min-height: calc(100vh - 131px - 51px); overflow: hidden;}

/* 좌측 정보 박스 */
.main_contents .left_wrap {position: absolute; left: -500px; top: 0; bottom: 0; width: 500px; height: 100%; background: #252931; border-right: 1px solid #3c4047; transition: all.5s ease; z-index: 4;}
.main_contents .left_wrap.active {left: 0;}
.main_contents .left_wrap .left_wrap_content {position: relative; height: 100%; display: flex; flex-direction: column; z-index: 2;}

/* 좌측 정보 박스 - 탑버튼 */
.main_contents .left_tab_contents_wrap { flex: 1 1 auto; overflow:auto; }
/* .main_contents .left_wrap .top_menu li a {display: block; height: 100px; font-size: 16px; font-weight: 500; text-align: center; color: #fff; background: #373d51; border-right: 1px solid #585d6d;} */
.main_contents .left_wrap .top_menu { display: flex; flex: 0 0 auto; }
.main_contents .left_wrap .top_menu li { flex: 1 1 auto; }
.main_contents .left_wrap .top_menu li a { letter-spacing: -2px; display: flex; flex-direction: column; justify-content: center; padding: 0 5px; align-items: center; height: 100px; font-size: 16px; font-weight: 500; text-align: center; color: #fff; background: #373d51; border-right: 1px solid #585d6d;}
.main_contents .left_wrap .top_menu li:last-child a {border-right: 0;}
.main_contents .left_wrap .top_menu li:hover a,
.main_contents .left_wrap .top_menu li.active a {background: #3673ee; border-color: #3673ee;}
/* .main_contents .left_wrap .top_menu li a img {margin: 13px 0 5px;} */
.main_contents .left_wrap .top_menu li a img {margin-bottom: 5px;}
.main_contents .left_wrap .top_menu li a span {display: block;}

/* 좌측 정보 박스 - 탭버튼 */
.main_contents .left_wrap .tab_head {border-top: 1px solid #ddd; background: #fff;}
.main_contents .left_wrap .tab_head li a {display: flex; height: 60px; font-size: 16px; font-weight: 500; align-items: center; justify-content: center; text-align: center; border-right: 1px solid #ddd;}
.main_contents .left_wrap .tab_head li:last-child a {border-right: 0;}
.main_contents .left_wrap .tab_head li a .icon {width:35px; height: 32px; margin-right: 5px; vertical-align: middle; transition: all.2s ease; background-size: 35px !important;}
/* 190322 조병조 탭버튼 모바일, pc 구분 처리*/
@media all and (min-width : 768px){
    .main_contents .left_wrap .tab_head li a .icon.ic_car_accident { background: url('/images/main/ic_car_accident_off_1.png') center center no-repeat;} /* 사고 off */
    .main_contents .left_wrap .tab_head li:hover a .icon.ic_car_accident,
    .main_contents .left_wrap .tab_head li.active a .icon.ic_car_accident {background: url('/images/main/ic_car_accident_on_1.png') center center no-repeat;} /* 사고 on */
    .main_contents .left_wrap .tab_head li a .icon.ic_car_congestion { background: url('/images/main/ic_car_congestion_off_1.png') center center no-repeat;} /* 정체 off */
    .main_contents .left_wrap .tab_head li:hover a .icon.ic_car_congestion,
    .main_contents .left_wrap .tab_head li.active a .icon.ic_car_congestion {background: url('/images/main/ic_car_congestion_on_1.png') center center no-repeat;} /* 정체 on */
    .main_contents .left_wrap .tab_head li a .icon.ic_work { background: url('/images/main/ic_work_off_1.png') center center no-repeat;} /* 작업 off */
    .main_contents .left_wrap .tab_head li:hover a .icon.ic_work,
    .main_contents .left_wrap .tab_head li.active a .icon.ic_work {background: url('/images/main/ic_work_on_1.png') center center no-repeat;} /* 작업 on */
    .main_contents .left_wrap .tab_head li a .icon.ic_balloon { background: url('/images/main/ic_balloon_off_1.png') center center no-repeat;} /* 기타 off */
    .main_contents .left_wrap .tab_head li:hover a .icon.ic_balloon,
    .main_contents .left_wrap .tab_head li.active a .icon.ic_balloon {background: url('/images/main/ic_balloon_on_1.png') center center no-repeat;} /* 기타 on */
}
@media all and (max-width : 768px){
    .main_contents .left_wrap .tab_head li a .icon.ic_car_accident {width: 44px; background: url('/images/main/ic_car_accident_off_1.png') center center no-repeat;} /* 사고 off */
    .main_contents .left_wrap .tab_head li.active a .icon.ic_car_accident {background: url('/images/main/ic_car_accident_on_1.png') center center no-repeat;} /* 사고 on */
    .main_contents .left_wrap .tab_head li a .icon.ic_car_congestion {width: 35px; background: url('/images/main/ic_car_congestion_off_1.png') center center no-repeat;} /* 정체 off */
    .main_contents .left_wrap .tab_head li.active a .icon.ic_car_congestion {background: url('/images/main/ic_car_congestion_on_1.png') center center no-repeat;} /* 정체 on */
    .main_contents .left_wrap .tab_head li a .icon.ic_work {width: 31px; background: url('/images/main/ic_work_off_1.png') center center no-repeat;} /* 작업 off */
    .main_contents .left_wrap .tab_head li.active a .icon.ic_work {background: url('/images/main/ic_work_on_1.png') center center no-repeat;} /* 작업 on */
    .main_contents .left_wrap .tab_head li a .icon.ic_balloon {width: 29px; background: url('/images/main/ic_balloon_off_1.png') center center no-repeat;} /* 기타 off */
    .main_contents .left_wrap .tab_head li.active a .icon.ic_balloon {background: url('/images/main/ic_balloon_on_1.png') center center no-repeat;} /* 기타 on */

}

/* 좌측 정보 박스 - 탭콘텐츠 */
.main_contents .left_wrap .tab_cont {color: #fff;}
.main_contents .left_wrap .tab_cont .ic_mark {width: 28px; height: 27px; margin-right: 4px; padding: 0; line-height: 32px; color: #fff; font-size: 12px; background: url('/images/main/ic_mark_large.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_mark_national {width: 28px; height: 27px; margin-right: 4px; padding: 0; line-height: 32px; color: #fff; font-size: 12px; background: url('/images/main/ic_mark_national.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_mark_gibangdo {width: 28px; height: 28px; margin-right: 4px; padding: 0; line-height: 28px; font-weight:bold; color: blue; font-size: 12px; background: url('/images/main/ic_gibangdo.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_goodoil {width: 35px; height: 35px; padding: 0; background: url('/images/main/ic_goodoil.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_sk {width: 35px; height: 35px; padding: 0; background: url('/images/main/ic_sk.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_lpg {width: 35px; height: 35px; padding: 0; background: url('/images/main/ic_lpg.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_charge {width: 35px; height: 35px; padding: 0; background: url('/images/main/ic_charge.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_rest {width: 30px; height: 30px; padding: 0; background: url('/images/main/ic_rest.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .ic_food {width: 30px; height: 30px; padding: 0; background: url('/images/main/ic_food.png') center center no-repeat;}

.main_contents .left_wrap .tab_cont {padding: 10px;}
.main_contents .left_wrap .tab_cont .search_wrap input[type='text'] {width: calc(100% - 67px); height: 40px;}

.main_contents .left_wrap .route_list {}
.main_contents .left_wrap .route_list dl dt {position: relative; padding: 10px 0; text-align: center; font-size: 18px; font-weight: 500;}
.main_contents .left_wrap .route_list dl dt span {font-size: 14px; font-weight: 300;}
.main_contents .left_wrap .route_list dl dd {margin-bottom: 10px; background: #fff;}
.main_contents .left_wrap .route_list dl dd:last-child {margin-bottom: 0;}
.main_contents .left_wrap .route_list dl dd a {display: block; padding: 20px; font-size: 0;}
.main_contents .left_wrap .route_list dl dd a:after {display: block; visibility: hidden; clear: both; content: "";}
.main_contents .left_wrap .route_list dl dd a>* {display: inline-block !important; vertical-align: middle;}
.main_contents .left_wrap .route_list dl dd a .ic_wrap {width: 65px; text-align: center; font-size: 15px; font-weight: 500;}
.main_contents .left_wrap .route_list dl dd a .text_wrap {width: calc(100% - 170px); padding: 0 20px; font-size: 17px; line-height: 20px;}
.main_contents .left_wrap .route_list dl dd a .text_wrap span {display: block; text-overflow:ellipsis; word-wrap:normal; overflow:hidden;}
/*.main_contents .left_wrap .route_list dl dd a .text_wrap span {display: block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}*/
.main_contents .left_wrap .route_list dl dd a .img_wrap {float: right; width: 105px; height: auto; padding-bottom: 0; overflow: hidden;}
.main_contents .left_wrap .route_list dl dd a .img_wrap img {width: 100%;}
.main_contents .left_wrap .route_list dl dd a:hover,
.main_contents .left_wrap .route_list dl dd a:focus { background: #ebf2fe; }

.main_contents .left_wrap .tab_cont .title .btn_wrap {position: absolute; right: 15px; top: -5px; bottom: 0;}
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_map {width: 33px; height: 33px; margin-left: 2px; padding: 0; text-indent: -9999px; background-size: 100% !important;}
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_map {background: url('/images/main/btn_map_off.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_map.active {background: url('/images/main/btn_map_on.png') center center no-repeat;}
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_zoom,
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_weather { padding: 0; color: #fff; font-weight: 500; font-size: 14px; height: 30px; line-height: 30px; padding: 0 6px; border-radius: 5px; }
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_weather { background-color: #4c36ee; }
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_fogFreez { padding: 0; color: #fff; font-weight: 500; font-size: 14px; height: 30px; line-height: 30px; padding: 0 6px; border-radius: 5px; background-color: #9001cb;}
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_fogFreez.active{ background-color: #6e009b;}
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_zoom { background-color: #3673ee; }
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_zoom.active .txt { display:none; }
.main_contents .left_wrap .tab_cont .title .btn_wrap .btn_zoom.active:before { content:"간략"; }
.main_contents .left_wrap .route_list dl dt.title .btn_wrap {right: 0; top: 6px;}

/* 좌측 정보 박스 - 교통속보 */
.main_contents .left_wrap .news {padding: 0; overflow-y: auto;}
.main_contents .left_wrap .news .search_wrap {padding: 5px; background: #eef1f2;}
.main_contents .left_wrap .news .search_wrap input[type='text'] {width: calc(100% - 65px); height: 50px; background: #eef1f2; border: 0;}
.main_contents .left_wrap .news .search_wrap .btn_search {top: 5px; right: 10px; width: 50px; height: 50px;}

.main_contents .left_wrap .news_list {padding: 10px; background: #252931;}
.main_contents .left_wrap .news_list .search_wrap {padding: 5px; background: none;}
.main_contents .left_wrap .news_list .search_wrap input[type='text'] {background: #fff;}
.main_contents .left_wrap .news_list .search_wrap .btn_search {top: auto; bottom: 5px; }
.main_contents .left_wrap .news_list .btn_blue {width: 100%; height: 50px; margin-bottom: 10px; line-height: 50px;}
.main_contents .left_wrap .news_list .btn_blue img {margin-top: -3px; margin-right: 5px;}

/* 좌측 정보 박스 - 경로검색 */
.main_contents .left_wrap .route_search {padding: 0;overflow-y: auto;}
.main_contents .left_wrap .route_search .search_area {position: relative; padding: 5px 120px 5px 30px; background: #eef1f2 url('/images/main/ic_route_bar.png') left 30px top 51px no-repeat;}
.main_contents .left_wrap .route_search .search_area dl {padding-left: 30px; font-size: 0;}
.main_contents .left_wrap .route_search .search_area dl.start {background: url('/images/main/ic_route_start.png') left center no-repeat;}
.main_contents .left_wrap .route_search .search_area dl.end {background: url('/images/main/ic_route_start.png') left center no-repeat;}
.main_contents .left_wrap .route_search .search_area dl>* {display: inline-block;}
.main_contents .left_wrap .route_search .search_area dl.start>* {border-bottom: 1px solid #ddd;}
.main_contents .left_wrap .route_search .search_area dl dt {width: 50px; height: 55px; line-height: 55px; font-size: 16px; font-weight: 500; color: #333;}
.main_contents .left_wrap .route_search .search_area dl dd {width: calc(100% - 30px);}
.main_contents .left_wrap .route_search .search_area dl dd input {width: calc(100% - 67px); height: 53px; font-size: 16px; border: 0; background: none;}
.main_contents .left_wrap .route_search .search_area .btn_change {position: absolute; right: 85px; top: 50%; width: 30px; height: 55px; margin-top: -27.5px; padding: 0; background: url('/images/main/ic_route_change.png') center center no-repeat; text-indent: -9999px; border: 0;}
.main_contents .left_wrap .route_search .search_area .btn_help {position: absolute; right: 85px; top: 50%; width: 30px; height: 55px; margin-top: -27.5px; padding: 0; background: url('/images/main/ic_popup.png') center center no-repeat; text-indent: -9999px; border: 0;}
.main_contents .left_wrap .route_search .search_area .btn_mint {position: absolute; top: 50%; right: 10px; width: 70px; height: 70px; margin-top: -35px;}

.main_contents .left_wrap .search_list {background: #fff;}
.main_contents .left_wrap .search_list li a {display: block; padding: 10px 20px; font-size: 16px; color: #444; border-bottom: 1px solid #ddd;}
.main_contents .left_wrap .search_list li a:hover,
.main_contents .left_wrap .search_list li a:focus { background: #ebf2fe; }

.main_contents .left_wrap .route_search .type_tab li a {display: block; height: 50px; font-size: 18px; text-align: center; line-height: 43px; font-weight: 500; color: #555; border-top: 5px solid #fff; border-bottom: 1px solid #ddd;}
.main_contents .left_wrap .route_search .type_tab li:last-child a {border-left: 1px solid #ddd;}
.main_contents .left_wrap .route_search .type_tab li.active a {color: #47c0c2; font-weight: 500; border-top: 5px solid #47c0c2; border-bottom: 0;}

.main_contents .left_wrap .route_search p.title {display: inline-block; font-size: 18px; font-weight: 500; color: #333;}
.main_contents .left_wrap .route_search .simple_info {}
.main_contents .left_wrap .route_search .simple_info dl {display: inline-block; padding: 15px 20px; color: #333; font-size: 0;}
.main_contents .left_wrap .route_search .simple_info dl:after {display: block; visibility: hidden; clear: both; content: "";}
.main_contents .left_wrap .route_search .simple_info dl:last-child {border-bottom: 0;}
.main_contents .left_wrap .route_search .simple_info dl>* {display: inline-block; vertical-align: middle;}
.main_contents .left_wrap .route_search .simple_info dl dt {width: 140px; font-size: 16px; font-weight: 500; color: #222;}
.main_contents .left_wrap .route_search .simple_info dl dd {margin-left: 15px; font-weight: 500; font-size: 15px;}
.main_contents .left_wrap .route_search .simple_info dl dd strong {font-size: 30px; font-weight: 600;}
.main_contents .left_wrap .route_search .simple_info dl dd span {font-size: 18px;}

.main_contents .left_wrap .route_search .route_info .title_info {color: #333; background: #eef1f2; border-top: 1px solid #ddd; padding: 20px 25px;}
.main_contents .left_wrap .route_search .route_info .title { margin-bottom: 10px; font-size: 16px; font-weight: 500;}

.main_contents .left_wrap .route_search .route_info .icon_info { font-size: 0; text-align: center;display: flex; flex-wrap: wrap; margin: 0 -5px;}
.main_contents .left_wrap .route_search .route_info .icon_info li {width: 25%; padding: 0 5px; }
.main_contents .left_wrap .route_search .route_info .icon_info li:last-child {border-right: 0;}
.main_contents .left_wrap .route_search .route_info .icon_info li .item { background:#fff; border: 1px solid #ddd; border-radius: 20px; }
.main_contents .left_wrap .route_search .route_info .icon_info li .item.active { height:100%; border: 2px solid transparent;background-image: linear-gradient(#eef1f2, #eef1f2), linear-gradient(140deg, #c9c9c9, #ffffff, #ffffff);background-origin: border-box;background-clip: content-box, border-box;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: inset 6px 8px 13px 0 #c6c6c6; }
.main_contents .left_wrap .route_search .route_info .icon_info li .item_img { margin-bottom: 7px;margin-top:12px;}
.main_contents .left_wrap .route_search .route_info .icon_info li .item_img img {height: 35px;}
.main_contents .left_wrap .route_search .route_info .icon_info li .item_title { font-size: 15px;  font-weight:bold; }
.main_contents .left_wrap .route_search .route_info .icon_info li .item_cnt {font-size: 16px;  font-weight:bold; margin-bottom: 10px; }
.main_contents .left_wrap .route_search .route_info .icon_info li .active .item_title { font-weight:bold; }
.main_contents .left_wrap .route_search .route_info .icon_info li .active .item_cnt { font-weight:bold; text-decoration:underline; }

/* .main_contents .left_wrap .route_search .route_info .oiling_info {color: #333;padding: 20px 25px;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li {margin-bottom: 5px;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li:last-child { margin-bottom: 0; }
.main_contents .left_wrap .route_search .route_info .oiling_info ul li span {display: inline-block; vertical-align: middle; font-size: 16px; line-height: 35px;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li span.label {width: 35px; height: 35px; margin-right: 5px; border: 1px solid #ddd; color: #999;  background: #fff; text-align: center;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li span.label.red {color: #d21919;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li span.label.blue {color: #2385d1;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li span.price {width: 65px;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li span.name {width: 300px;}
.main_contents .left_wrap .route_search .route_info .oiling_info ul li .icon {width: 25px; background-size: 100% !important;} */

.main_contents .mobile_route_search {display: none; overflow-y: auto;}

/* 좌측 정보 박스 - 혼잡구간 */
.main_contents .left_wrap .conges {padding: 0;overflow-y: auto;}
.main_contents .left_wrap .conges .search_wrap {padding: 5px; background: #eef1f2;}
.main_contents .left_wrap .conges .search_wrap input[type='text'] {width: calc(100% - 65px); height: 50px; background: #eef1f2; border: 0;}
.main_contents .left_wrap .conges .search_wrap .btn_search {top: 5px; right: 10px; width: 50px; height: 50px;}

.main_contents .left_wrap .conges_result {padding: 10px; background: #252931;}
.main_contents .left_wrap .conges_result .search_wrap {padding: 15px; background: none;}
.main_contents .left_wrap .conges_result .search_wrap input[type='text'] {background: #fff;}
.main_contents .left_wrap .conges_result .search_wrap .btn_search {top: auto; right: 15px; bottom: 15px;}

.main_contents .left_wrap .nodata {padding: 30px 0; color: #999; font-weight: 500;}
.main_contents .left_wrap .nodata p {margin-top: 10px;}

.main_contents .left_wrap .conges_result div.title {position: relative; margin-bottom: 10px; text-align: center; font-size: 19px; font-weight: 500;}

.main_contents .left_wrap .conges_tab {padding: 0 15px;}
.main_contents .left_wrap .conges_tab li a {display: block; height: 50px; font-size: 18px; text-align: center; line-height: 50px; font-weight: 500; color: #777; background: #252931; border: 2px solid #373d51;}
.main_contents .left_wrap .conges_tab li.active a {color: #fff; border-color: #3673ee; background: #3f5685;}
.main_contents .left_wrap .conges_tab li:hover a {color: #fff; border-color: #3673ee; background: #3f5685;}

.main_contents .left_wrap .route_info .route {padding-bottom: 10px;}
.main_contents .left_wrap .route_info .route>li {position: relative; padding: 10px 25px 7.5px 50px; /*  border-bottom: 1px solid #3e4146;  */}
.main_contents .left_wrap .route_info .route>li>* {/* position: relative; */}
.main_contents .left_wrap .route_info .route>li.line3 + li.line3.last {border-bottom:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line3 + li.line3.last.line2-last {border-bottom:0; }
.main_contents .left_wrap .route_info .route>li.line4 + li.line3.last {border-bottom:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line4 + li.line3.last.line2-last {border-bottom:0; }
.main_contents .left_wrap .route_info .route>li.last.line2-last {border-bottom: 0; }
.main_contents .left_wrap .route_info .route>li.line2 { border-bottom:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line4 { border-bottom:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line3 + .line2 { border-top:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line3 + .line4 { border-top:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line3 .last { border-bottom:1px solid #3e4146; }
.main_contents .left_wrap .route_info .route>li.line4 { }
.main_contents .left_wrap .route_info .route>li.line4.active { border-bottom:0; }
.main_contents .left_wrap .route_info .route>li.line2-last { border-bottom:0;}
.main_contents .left_wrap .route_info .route>li.active:after,
.main_contents .left_wrap .route_info .route>li.active .bus_line:after,
.main_contents .left_wrap .route_info .route>li.line3:after,
.main_contents .left_wrap .route_info .route>li.line3 .bus_line2:after,
.main_contents .left_wrap .route_info .route>li.line2-last:after,
.main_contents .left_wrap .route_info .route>li.line2-last .bus_line:after,
.main_contents .left_wrap .route_info .route>li.line2-last .bus_line2:after { display:none; }
.main_contents .left_wrap .route_info .route>li.last:after,
.main_contents .left_wrap .route_info .route>li.last .bus_line2:after { display:block; }
.main_contents .left_wrap .route_info .route>li.line3:before,
.main_contents .left_wrap .route_info .route>li.line3 .bus_line2:before { border-radius:0; }
.main_contents .left_wrap .route_info .route>li.active:before,
.main_contents .left_wrap .route_info .route>li.active .bus_line:before { border-radius:50px 50px 0 0; }
.main_contents .left_wrap .route_info .route>li.arrow_none:after { display:none;  }
/* .main_contents .left_wrap .route_info .route>li.active { padding: 15px 25px 7.5px 80px !important; } */
/* .main_contents .left_wrap .route_info .route>li.line3 { padding: 7.5px 25px 15px 0 !important; border:0; } */
/* .main_contents .left_wrap .route_info .route>li.active { padding: 15px 25px 7.5px 80px !important; } */



.road_info .trffc_info_bx{position: absolute;right:100px; display: inline-block; padding: 2px 4px;font-size: 14px;}
.road_info .bx_accident{background-color: #cc0001;}
.road_info .bx_allblock{background-color: #cc0001;}
.road_info .bx_jeonghoi{background-color: #ff7200;}
.road_info .bx_work{background-color: #DF8900;}

.main_contents .left_wrap .route_info .route>li:before {position: absolute; left: 21px; top: 0; bottom: 0; width: 14px; background: #ddd; content: ""; z-index: 2; border-radius: 50px;border-bottom: 1px solid #252931;}
.main_contents .left_wrap .route_info .route>li:first-child:before {top: 10px;}
.main_contents .left_wrap .route_info .route>li:after {position: absolute; bottom: -7px; left: 15px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 3; }
.main_contents .left_wrap .route_info .route>li:last-child:after {display: none;}
.main_contents .left_wrap .route_info .route>li>p {margin-left: -40px; padding-bottom: 7px; font-size: 18px; color: #fff; font-weight: 500; line-height: 35px;}
.main_contents .left_wrap .route_info .route>li>p .icon {margin-right: 10px; }
.main_contents .left_wrap .route_info .route>li.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .route>li.green .road_info dd {color: #088d0e;}
.main_contents .left_wrap .route_info .route>li.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .route>li.yellow .road_info dd {color: #ffb400;}
.main_contents .left_wrap .route_info .route>li.red:before {background: #e81414;}
.main_contents .left_wrap .route_info .route>li.red .road_info dd {color: #e81414;}
.main_contents .left_wrap .route_info .route>li.gray:before {background: #404040;}
.main_contents .left_wrap .route_info .route>li.gray .road_info dd {color: #404040;}


/*  .main_contents .left_wrap .route_info .route>li:before {position: absolute; left: 21px; top: 0; bottom: 0; width: 14px; background: #ddd; content: ""; z-index: 2; border-radius: 50px;}
.main_contents .left_wrap .route_info .route>li:first-child:before {top: 10px;}
.main_contents .left_wrap .route_info .route>li:after {position: absolute; bottom: -7px; left: 15px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 3;}
.main_contents .left_wrap .route_info .route>li:last-child:after {display: none;}
.main_contents .left_wrap .route_info .route>li>p {margin-left: -40px; padding-bottom: 7px; font-size: 18px; color: #fff; font-weight: 500; line-height: 35px;}
.main_contents .left_wrap .route_info .route>li>p .icon {margin-right: 10px; }
.main_contents .left_wrap .route_info .route>li.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .route>li.green .road_info dd {color: #088d0e;}
.main_contents .left_wrap .route_info .route>li.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .route>li.yellow .road_info dd {color: #ffb400;}
.main_contents .left_wrap .route_info .route>li.red:before {background: #e81414;}
.main_contents .left_wrap .route_info .route>li.red .road_info dd {color: #e81414;}
.main_contents .left_wrap .route_info .route>li.gray:before {background: #404040;}
.main_contents .left_wrap .route_info .route>li.gray .road_info dd {color: #404040;} */


.main_contents .left_wrap .route_info .road_info {position: relative; min-height:70px; color: #fff;}
.main_contents .left_wrap .route_info .road_info dl {padding-right: 30%;}
.main_contents .left_wrap .route_info .road_info dt {margin-bottom: 5px; font-size: 17px; font-weight: 500;}
.main_contents .left_wrap .route_info .road_info dt span {font-weight: 400; margin-right:10px;}
.main_contents .left_wrap .route_info .road_info dd {font-size: 16px; line-height: 20px}
.main_contents .left_wrap .route_info .road_info dd strong {font-size: 16px; font-weight: 400;}
.main_contents .left_wrap .route_info .road_info dd span {display: none; height: 20px; margin-right: 5px; padding-left: 25px; vertical-align: top; font-weight: 500; color: #35babc; background-size: auto 84% !important;}
.main_contents .left_wrap .route_info .road_info dd span.bus_speed {background: url('/images/main/ic_bus.png') left center no-repeat;}
.main_contents .left_wrap .route_info .road_info dd span.pass_speed {background: url('/images/main/ic_bypass.png') left center no-repeat;}
.main_contents .left_wrap .route_info .road_info .thumb_wrap {position: absolute; right: 0; bottom: 0; height: 70px; text-align: right;}
.main_contents .left_wrap .route_info .road_info .thumb_wrap>* {display: inline-block; vertical-align: bottom; margin-left: 5px; font-size: 12px; font-weight: 400;}
.main_contents .left_wrap .route_info .road_info .thumb_wrap .thumb {height: 70px; cursor: pointer;}
.main_contents .left_wrap .route_info .road_info .weather_btn { position: absolute; left: 50%; bottom: 15px; width: 30px; height: 25px; text-align:center; line-height:1; margin-bottom:0; z-index:1; transform: translateX(-50%); }
.main_contents .left_wrap .route_info .road_info .weather_btn img { vertical-align:middle; }
.main_contents .left_wrap .route_info .road_info .weather { position: absolute; left: 50%; bottom: 15px; width: 30px; height: 25px; text-align:center; line-height:1; margin-bottom:0; z-index:1; transform: translateX(-50%); }
.main_contents .left_wrap .route_info .road_info .weather img { vertical-align:middle; }
.main_contents .left_wrap .route_info .issue_box {margin-top: 10px; padding: 5px 15px; background: #4d4f53; border-top: 1px solid #414449;}
.main_contents .left_wrap .route_info .issue_box p {padding-left: 35px; font-size: 14px; line-height: 30px; font-weight: 400; color: #fff;}
.main_contents .left_wrap .route_info .issue_box p.stagnate_line {background: url('/images/main/ic_car_orange.png') left top 5px no-repeat;}
.main_contents .left_wrap .route_info .issue_box p.accident_line {background: url('/images/main/ic_car_red.png') left top 5px no-repeat;}
.main_contents .left_wrap .route_info .issue_box p.block_line {background: url('/images/main/ic_allblock.png') left top 5px no-repeat;}

/* 좌측 정보 박스 - 버스전용노선 */
.main_contents .left_wrap .traffic .route_info .btn_wrap {padding: 10px 20px 0;}
.main_contents .left_wrap .traffic .route_info .btn_wrap .fl_left {display: none; margin: 20px 0 0 -5px;}
.main_contents .left_wrap .traffic .btn_bus {width: 45px; height: 45px; margin-right: 5px; padding: 0; background: url('/images/main/btn_bus_off.png') center center no-repeat;}
.main_contents .left_wrap .traffic .btn_bypass {width: 45px; height: 45px; padding: 0; background: url('/images/main/btn_bypass_off.png') center center no-repeat;}
.main_contents .left_wrap .route_info .route>li .bus_line {display: none;}
.main_contents .left_wrap .route_info .route>li .bus_line2 {display: none;}
.main_contents .left_wrap .route_info .route>li .pass_line {display: none;}

.main_contents .left_wrap .route_info .route.active>li {padding: 15px 25px 20px 80px}
.main_contents .left_wrap .route_info .route.active>li:before {left: 51px;}
.main_contents .left_wrap .route_info .route.active>li:after {left: 45px;}

.main_contents .left_wrap .traffic .route_info .btn_wrap .ic_bus.active {display: block;}
.main_contents .left_wrap .traffic .route_info .btn_wrap .ic_ilban.active {display: block;}
.main_contents .left_wrap .traffic .route_info .btn_wrap .ic_ilban.busactive {display: block; margin:20px 0 0 5px;}
.main_contents .left_wrap .traffic .route_info .btn_wrap .btn_bus.active {background: url('/images/main/btn_bus_on.png') center center no-repeat;}
.main_contents .left_wrap .route_info .route.busOnly>li .bus_line {display: block;}
.main_contents .left_wrap .route_info .route.busOnly>li .bus_line2 {display: block;}
.main_contents .left_wrap .route_info .route.busOnly>li {padding: 10px 25px 7.5px 80px}
.main_contents .left_wrap .route_info .route.busOnly>li:before {left: 51px;}
.main_contents .left_wrap .route_info .route.busOnly>li:after {left: 45px;}

.main_contents .left_wrap .route_info .road_info dd span.bus_speed.active {display: inline-block;}

.main_contents .left_wrap .traffic .route_info .btn_wrap .ic_pass.active {display: block;}
.main_contents .left_wrap .traffic .route_info .btn_wrap .btn_bypass.active {background: url('/images/main/btn_bypass_on.png') center center no-repeat;}
.main_contents .left_wrap .route_info .route.viewPass>li .pass_line {display: block;}
.main_contents .left_wrap .route_info .route.viewPass>li {padding: 15px 25px 20px 80px}
.main_contents .left_wrap .route_info .route.viewPass>li:before {left: 51px;}
.main_contents .left_wrap .route_info .route.viewPass>li:after {left: 45px;}

.main_contents .left_wrap .route_info .road_info dd span.pass_speed.active {display: inline-block;}

.main_contents .left_wrap .route_info .route>li .bus_line {position: absolute; left: 0;  bottom: 0; top: 0; width: 50px;}
.main_contents .left_wrap .route_info .route>li .bus_line:before {position: absolute; left: 21px; top: 0; bottom: 0; width: 14px; background: #ddd; content: ""; z-index: 4; border-radius: 50px; border-bottom: 1px solid #252931;}
.main_contents .left_wrap .route_info .route>li .bus_line2 {position: absolute; left: 0;  bottom: 0; top: 0; width: 50px;}
.main_contents .left_wrap .route_info .route>li .bus_line2:before {position: absolute; left: 21px; top: 0; bottom: 0; width: 14px; background: #ddd; content: ""; z-index: 4; border-radius: 50px;border-bottom: 1px solid #252931;}

.main_contents .left_wrap .route_info .route>li:first-child .bus_line:before {top: 10px;}
.main_contents .left_wrap .route_info .route>li .bus_line:after {position: absolute; bottom: -7px; left: 15px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 5; background-size: 100%;}
.main_contents .left_wrap .route_info .route>li .bus_line.line2-last:after {display: none;}
.main_contents .left_wrap .route_info .route>li .bus_line2:after {position: absolute; bottom: -7px; left: 15px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 5; background-size: 100%;}
.main_contents .left_wrap .route_info .route>li .bus_line2.line2-last:after {display: none;}

.main_contents .left_wrap .route_info .route>li .bus_line.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .route>li .bus_line.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .route>li .bus_line.red:before {background: #e81414;}
.main_contents .left_wrap .route_info .route>li .bus_line2.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .route>li .bus_line2.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .route>li .bus_line2.red:before {background: #e81414;}



.main_contents .left_wrap .route_info .route>li .pass_line {position: absolute; left: 0;  bottom: 0; top: 0; width: 50px;}
.main_contents .left_wrap .route_info .route>li .pass_line:before {position: absolute; left: 21px; top: 0; bottom: 0; width: 14px; background: #ddd; content: ""; z-index: 4; border-radius: 50px;}
.main_contents .left_wrap .route_info .route>li:first-child .pass_line:before {top: 10px;}
.main_contents .left_wrap .route_info .route>li .pass_line:after {position: absolute; bottom: -7px; left: 15px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 5; background-size: 100%;}
.main_contents .left_wrap .route_info .route>li:last-child .pass_line:after {display: none;}

.main_contents .left_wrap .route_info .route>li .pass_line.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .route>li .pass_line.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .route>li .pass_line.red:before {background: #e81414;}
.main_contents .left_wrap .route_info .route>li .bus_line.gray:before {background: #404040;}
.main_contents .left_wrap .route_info .route>li .bus_line2.gray:before {background: #404040;}

.main_contents .left_wrap .route_info .route li .detail_box {display: none; color: #fff;}
.main_contents .left_wrap .route_info .route li .detail_box .thumb_wrap {float: right; clear: both;}
.main_contents .left_wrap .route_info .route li .detail_box .thumb_wrap>* {display: inline-block; vertical-align: bottom; margin-left: 5px; font-size: 12px; font-weight: 400;}
.main_contents .left_wrap .route_info .route li .detail_box .thumb_wrap .thumb {height: 70px; cursor: pointer;}
.main_contents .left_wrap .route_info .route li .detail_box .rest_wrap {display: inline-block; padding: 2px 15px 2px 2px; line-height: 33px; font-size: 16px; color: #fff; background: #121418; border-radius: 50px; margin-top: 15px;}
/* .main_contents .left_wrap .route_info .route li .detail_box .rest_wrap .ic_service {width: 33px; height: 33px; margin-right: 5px; background: url('/images/main/ic_circle_rest.png') center center no-repeat;} */
.main_contents .left_wrap .route_info .route li .detail_box .rest_wrap .ic_service {width: 33px; height: 33px; margin-right: 5px; background: url('/images/main/new/ic_circle_restarea.png') center center no-repeat;}
.main_contents .left_wrap .route_info .route li .detail_box .road_wrap {position: relative; display: inline-block; margin: 10px 10px 0; padding: 5px 10px 5px 7px; font-size: 16px; color: #555; font-weight: 500; background: #fff; border-radius: 3px 3px 3px 0;}
.main_contents .left_wrap .route_info .route li .detail_box .road_wrap:before {position: absolute; left: -9px; bottom: 0; width: 12px; height: 7px; content: ""; background: url('/images/main/ic_tail.png') center center no-repeat;}
.main_contents .left_wrap .route_info .route li .detail_box .road_wrap img {margin-right: 5px;}

.main_contents .left_wrap .route_info .route li .detail_box.active {display: block;}


/* 좌측 정보 박스 - 좌측박스 버튼 */
.main_contents .left_wrap .btn_left {position: absolute; right: -31px; top: 50%; width: 30px; height: 70px; margin-top: -35px; background: url('/images/main/btn_left_open.png') center center no-repeat; background-size: 100% !important;}
.main_contents .left_wrap .btn_left.active {background: url('/images/main/btn_left_close.png') center center no-repeat;}

/* 좌측 정보 박스 - 교통속보 */
.main_contents .left_wrap .cctv {padding: 0;}
.main_contents .left_wrap .cctv .search_wrap {padding: 5px; background: #eef1f2;}
.main_contents .left_wrap .cctv .search_wrap input[type='text'] {width: calc(100% - 65px); height: 50px; background: #eef1f2; border: 0;}
.main_contents .left_wrap .cctv .search_wrap .btn_search {top: 5px; right: 10px; width: 50px; height: 50px;}

/* 교통속보 방송 팝업 */

#sokbovideoPop .popup_inner { width: 500px; margin: 40px auto 0; }
#sokbovideoPop .popup_header .sokbo_title { background: url("/images/main/extv_icon.png") left center no-repeat;  }
#sokbovideoPop .popup_contents { padding: 15px 20px; }
#accident_video {background: url("/images/main/bt_extv_on.png") left center no-repeat; width:100%; height:100%; position: relative;}

/* 지도 gis 지도 적용으로 인한 css 수정 */
/*
.main_contents .map_wrap {position: relative; width: calc(100% - 650px); margin-left: 500px; z-index: 1; transition: all.5s ease;}
.main_contents .map_wrap .map {width: 100%; height: 780px;}
*/
.main_contents .map_wrap {position: relative; width: calc(100% - 650px); margin-left: 500px; z-index: 1; transition: all.5s ease;}
.main_contents .map_wrap {position: absolute; top:0;left:0;height:100%;width: calc(100% - 500px); margin-left: 500px; z-index: 1; transition: all.5s ease;}

/* 지도 - 범례 */
/* .main_contents .map_wrap .legend {position: absolute; z-index: 2; left: 20px; bottom: 20px; font-size: 0;}
.main_contents .map_wrap .legend li {display: inline-block; vertical-align: top;}
.main_contents .map_wrap .legend li div {width: 100px; padding: 8px 5px; font-size: 17px; line-height: 18px; text-align: center; font-weight: 500; letter-spacing: -0.5px; background: #eee; border-top: 5px solid; margin-right: 33px;}
.main_contents .map_wrap .legend li div.green_line {border-color: #31c231;}
.main_contents .map_wrap .legend li div.yellow_line {border-color: #ffa200;}
.main_contents .map_wrap .legend li div.red_line {border-color: #fa0302;}
 */
.main_contents .map_wrap .legend {position: absolute; z-index: 2; left: 20px; bottom: 20px; font-size: 0;}
.main_contents .map_wrap .legend li {display: inline-block; vertical-align: top;}
.main_contents .map_wrap .legend li div {width: 100px; padding: 8px 5px; font-size: 17px; line-height: 18px; text-align: center; font-weight: 500; letter-spacing: -0.5px; background: #eee; border-top: 5px solid;}
.main_contents .map_wrap .legend li div.green_line {border-color: #31c231;}
.main_contents .map_wrap .legend li div.yellow_line {border-color: #ffa200;}
.main_contents .map_wrap .legend li div.red_line {border-color: #fa0302;}
.main_contents .map_wrap .legend li div.gray_line {border-color: #404040;}
.main_contents .map_wrap .legend li div span {display: block; font-size: 14px; color: #444; letter-spacing: -1px; margin-top:3px;}



/*2022/03/07 부로 범례 전면차단 삭제
.main_contents .map_wrap .legend li div.gray_line {border-color: #404040;}
*/

.main_contents .map_wrap .legend li div span {display: block; font-size: 14px; color: #444; letter-spacing: -1px; margin-top:3px;}

/* 작업예측지도 - 범례 */
/* 지도 - 범례 */
.map_wrap .legend {position: absolute; z-index: 2; left: 20px; bottom: 20px; font-size: 0;}
.map_wrap .legend li {display: inline-block; vertical-align: top;}
.map_wrap .legend li div {width: 100px; padding: 8px 5px; font-size: 17px; line-height: 18px; text-align: center; font-weight: 500; letter-spacing: -0.5px; background: #eee; border-top: 5px solid;}
.map_wrap .legend li div.green_line {border-color: #31c231;}
.map_wrap .legend li div.yellow_line {border-color: #ffa200;}
.map_wrap .legend li div.red_line {border-color: #fa0302;}
.map_wrap .legend li div.gray_line {border-color: #404040;}
.map_wrap .legend li div span {display: block; font-size: 14px; color: #444; letter-spacing: -1px; margin-top:3px;}

/* .map_wrap .map .icon_wrap {display: none;}
.map_wrap .map .icon_wrap .icon {position: absolute; background-size: 100% !important; z-index: 99; cursor: pointer;}
.map_wrap .map .ic_weather {width: 35px; height: 35px; background: url('/images/main/btn_weather.png') center center no-repeat;}
.map_wrap .map .ic_accident {width: 46px; height: 40px; background: url('/images/main/ic_trgl_accident_large.png') center center no-repeat;}
.map_wrap .map .ic_work {width: 46px; height: 40px; background: url('/images/main/ic_trgl_work_large.png') center center no-repeat;}
.map_wrap .map .ic_service {width: 40px; height: 40px; background: url('/images/main/ic_circle_rest.png') center center no-repeat;}
 */

.main_contents .map_wrap .icon_wrap {display: none;}
.main_contents .map_wrap .icon_wrap .icon {position: absolute; background-size: 100% !important; z-index: 99; cursor: pointer;}
.main_contents .map_wrap .ic_weather {width: 35px; height: 35px; background: url('/images/main/btn_weather.png') center center no-repeat;}
.main_contents .map_wrap .ic_accident {width: 46px; height: 40px; background: url('/images/main/ic_trgl_accident_large.png') center center no-repeat;}
.main_contents .map_wrap .ic_work {width: 46px; height: 40px; background: url('/images/main/ic_trgl_work_large.png') center center no-repeat;}
.main_contents .map_wrap .ic_service {width: 40px; height: 40px; background: url('/images/main/ic_circle_rest.png') center center no-repeat;}


.main_contents .map_wrap.active_left {width: 100%; margin-left: 0;}

/* 우측 메뉴 */
.main_contents .right_menu {position: absolute; right: 20px; top: 15px; bottom: 0; width: 160px; z-index: 2; }

.right_extv {position: absolute; right: 11%; top: 30px; bottom: 0; z-index: 2; }

/* 우측 메뉴 - CCTV */
.main_contents .right_menu .view_tab {font-size: 0; border-radius:10px 10px 0 0; overflow:hidden; background: #fff;}
.main_contents .right_menu .view_tab li {display: inline-block; width: 50%; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; vertical-align: top;}
.main_contents .right_menu .view_tab li:nth-child(2n+2) {border-right: 0;}
.main_contents .right_menu .view_tab li a {display:  flex; height: 37px; font-size: 15px; text-align: center; color: #333; align-items: center; justify-content: center; line-height: 1.1;}
.main_contents .right_menu .view_tab li .exTvTab {display:  flex;  background-color:#f7f7f7; height: 37px; font-size: 15px; text-align: center; color: #333; align-items: center; justify-content: center; line-height: 1.1;}
.main_contents .right_menu .view_tab li.active a {color: #fff; background-color: #3673ee; }

/* 2021_12_16_홍보채널 우측메뉴 탭 수정 */




/* 우측 메뉴 - 지역 */
.main_contents .right_menu .area {font-size: 0; border-radius:0 0 10px 10px; overflow:hidden; background: #fff; margin-bottom:10px; }
.main_contents .right_menu .area li {display: inline-block; width: 50%; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; vertical-align: top;}
.main_contents .right_menu .area li:nth-child(2n+2) {border-right: 0;}
.main_contents .right_menu .area li a {display:  flex; height: 35px; font-size: 15px; text-align: center; color: #333; align-items: center; justify-content: center;}
.main_contents .right_menu .area li:hover a,
.main_contents .right_menu .area li.active a {color: #3673ee; background-color: #d7e3fc; font-weight: bold; }
.main_contents .right_menu .area li.zoom {width: 100%; padding: 0; border: 0;}
.main_contents .right_menu .area li.zoom:hover,
.main_contents .right_menu .area li.zoom.active {border-left: 0;}
.main_contents .right_menu .area li.zoom button {height: 32px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.main_contents .right_menu .area li.zoom button:last-child {border-right: 0;}
.main_contents .right_menu .area li.zoom button.btn_zoomOut {background: url('/images/main/ic_minus.png') center center no-repeat;}
.main_contents .right_menu .area li.zoom button.btn_zoomIn {background: url('/images/main/ic_plus.png') center center no-repeat;}

/* 우측 메뉴 - 메뉴 */
.main_contents .right_menu .menu {position: relative; border-radius:10px; overflow:hidden; background:#fff; }
.main_contents .right_menu .menu .menu_list {font-size: 0;}
.main_contents .right_menu .menu .menu_list li {display: inline-block; width: 50%; vertical-align: top; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
.main_contents .right_menu .menu .menu_list li:nth-child(2n+2) {border-right: 0;}
.main_contents .right_menu .menu .menu_list li a {display: flex; flex-direction: column; height: 59px; text-align: center; font-size: 14px; font-weight: 500; letter-spacing: -0.5px; align-items: center; justify-content: center;}
.main_contents .right_menu .menu .menu_list li a.list1 { color: #e73d42 !important; }
.main_contents .right_menu .menu .menu_list li.active a {color: #3673ee; background-color : #d7e3fc;}
.main_contents .right_menu .menu .menu_list li.active a.list1 { background-color : #fdebec; }
.main_contents .right_menu .menu .menu_list li a .icon {display: block; width:50px; height: 35px; margin: 0 0 3px; background-repeat:no-repeat; background-position: center; background-size: 50px !important; }
.main_contents .right_menu .menu .menu_list li a .icon.icon1 { background-image:url(/images/main/right_menu_icon1.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon2 { background-image:url(/images/main/right_menu_icon2.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon3 { background-image:url(/images/main/right_menu_icon3.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon4 { background-image:url(/images/main/right_menu_icon4.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon5 { background-image:url(/images/main/right_menu_icon5.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon6 { background-image:url(/images/main/right_menu_icon6.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon7 { background-image:url(/images/main/right_menu_icon7.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon8 { background-image:url(/images/main/right_menu_icon8.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon9 { background-image:url(/images/main/new/new_right_menu_icon9.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon10 { background-image:url(/images/main/right_menu_icon10.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon11 { background-image:url(/images/main/right_menu_icon11.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon12 { background-image:url(/images/main/right_menu_icon12.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon13 { background-image:url(/images/main/right_menu_icon13.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon14 { background-image:url(/images/main/right_menu_icon14.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon17 { background-image:url(/images/main/right_menu_icon17.png); }
.main_contents .right_menu .menu .menu_list li a .icon.icon18 { background-image:url(/images/main/right_menu_icon18.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon2 { background-image:url(/images/main/right_menu_icon2_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon3 { background-image:url(/images/main/right_menu_icon3_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon4 { background-image:url(/images/main/right_menu_icon4_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon5 { background-image:url(/images/main/right_menu_icon5_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon6 { background-image:url(/images/main/right_menu_icon6_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon7 { background-image:url(/images/main/right_menu_icon7_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon8 { background-image:url(/images/main/right_menu_icon8_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon9 { background-image:url(/images/main/new/new_right_menu_icon9_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon10 { background-image:url(/images/main/right_menu_icon10_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon11 { background-image:url(/images/main/right_menu_icon11_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon12 { background-image:url(/images/main/right_menu_icon12_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon13 { background-image:url(/images/main/right_menu_icon13_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon14 { background-image:url(/images/main/right_menu_icon14_active.png); }
.main_contents .right_menu .menu .menu_list li.active a .icon.icon17 { background-image:url(/images/main/right_menu_icon17_active.png); }

/* 우측 기상영상 아이콘 */
.main_contents .right_menu .menu .menu_list li a .icon.ic_menu_satellite {background: url('/images/main/right_menu_icon4.png') center center no-repeat;} /* 레이더/위성영상 off */
/* .main_contents .right_menu .menu .menu_list li:hover a .icon.ic_menu_info, */
.main_contents .right_menu .menu .menu_list li.active a .icon.ic_menu_satellite {background: url('/images/main/right_menu_icon4_active.png') center center no-repeat;} /* 레이더/위성영상 on */
/* 우측 기상영상 아이콘 */

/* 수소차 아이콘 */
.main_contents .right_menu .menu .menu_list li a .icon.ic_menu_eleco {background: url('/images/main/ic_menu_elecoc_off.png') center center no-repeat;}
/* .main_contents .right_menu .menu .menu_list li:hover a .icon.ic_menu_info, */
.main_contents .right_menu .menu .menu_list li.active a .icon.ic_menu_eleco {background: url('/images/main/ic_menu_elecoc_on.png') center center no-repeat;}
/* 수소차 아이콘 */

.main_contents .right_menu .menu .menu_list li a .icon.ic_menu_dovms {background: url('/gis/images/common/icon_map_vms.png') center center no-repeat;} /* 도형식 off */
.main_contents .right_menu .menu .menu_list li.active a .icon.ic_menu_dovms {background: url('/gis/images/common/icon_map_vms.png') center center no-repeat;} /* 도형식 on */
.main_contents .right_menu .menu .menu_list li a .icon.ic_menu_munvms {background: url('/gis/images/common/btn_vms.png') center center no-repeat;} /* 문형식 off */
.main_contents .right_menu .menu .menu_list li.active a .icon.ic_menu_munvms {background: url('/gis/images/common/btn_vms.png') center center no-repeat;} /* 문형식 on */

.main_contents .right_menu .menu .menu_list li a .icon.ic_menu_elecoccar {background: url('/images/main/ic_menu_elecoc_off.png') center center no-repeat;} /* 전기수소차 off */
.main_contents .right_menu .menu .menu_list li.active a .icon.ic_menu_elecoccar {background: url('/images/main/ic_menu_elecoc_on.png') center center no-repeat;} /* 전기수소차 on */

/* Main layer popup */
.popup_wrap {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; transition: all.5s ease;}
.main_popup_wrap {position: absolute; left: 500px; z-index: 6;}
.main_popup_wrap.active {left: 0;}
.popup_inner {position: relative; margin: 100px auto 0; background: #fff; z-index: 2;}
.popup_inner .btn_close {position: absolute; right: 20px; top: 0; bottom: 0; width: 20px; height: 100%; background: url('/images/common/ic_popup_close.png') center center no-repeat; text-indent: -9999px; z-index: 99; background-size: 100%;}
.popup_inner .popup_header {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #35babc;}
.popup_inner .popup_header_sago {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #E81313;}
.popup_inner .popup_header_allblock {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #232323;}
.popup_inner .popup_header_service {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 16px; font-weight: 500; color: #fff; background: #ED7100;}
.popup_inner .popup_header_blackice {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #3d35e9;}
.popup_inner .popup_header_vms {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #404040;}
.popup_inner .popup_contents {}

.popup_bg {position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1;}

/* 레이어팝업 */
.layerPopup_inner {position: relative; background:rgba(0, 0, 0, 0); left:-500px; top:-280px; z-index: 2000;}
.popup_layerBg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1;}
.layerPop_img {position: absolute; width:300px; height:300px; z-index: 2000;}
.layerPop_today_close {position: relative; top: 350px; z-index: 2000;}
.layerPop_today_close_inner {position: relative; z-index: 2000;}
.layerCloseBtn {position: relative; left: 110px; cursor: pointer; }
/* 레이어팝업 */

/* WorkJam layer popup*/
/*.work_popup_wrap {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; transition: all.5s ease;}
.work_main_popup_wrap {position: absolute; left: 480px; z-index: 3;}
.work_main_popup_wrap.active {left: 0;}
*/
.work_popup_inner {position: relative; margin: 400px auto 0; background: #fff; z-index: 2; width:400px; height: 400px}
.work_popup_inner .btn_close {position: absolute; right: 20px; top: 0; bottom: 0; width: 20px; height: 100%; background: url('/images/common/ic_popup_close.png') center center no-repeat; text-indent: -9999px; z-index: 99; background-size: 100%;}
.work_popup_inner .popup_header {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #35babc;}
.work_popup_inner .popup_contents {}

.work_popup_bg {position: absolute; left: -18px; top: 250px; right: 85px; bottom: 137px; background: rgba(0, 0, 0, 0.5); z-index: 1;}

/* CCTV 팝업 */
/* #cctvPop .popup_inner {width: 500px;}
#cctvPop .popup_header .cctv_title {padding-left: 35px; background: url('/images/main/ic_camera.png') left center no-repeat; background-size : auto 15px;}
#cctvPop .popup_contents {padding: 20px;}
#cctvPop .popup_contents .video_wrap {position: relative;}
#cctvPop .popup_contents .video_wrap .video {position: relative; height: auto;}
#cctvPop .popup_contents .video_wrap .btn {position: absolute; width: 54px; height: 54px; text-indent: -9999px; border: 0;}
#cctvPop .popup_contents .video_wrap .btn_reload {left: 10px; top: 10px; background: url('/images/main/btn_reload.png') center center no-repeat;}
#cctvPop .popup_contents .video_wrap .btn_zoom {right: 10px; bottom: 10px; background: url('/images/main/btn_zoom.png') center center no-repeat;}
#cctvPop .popup_contents .btn_wrap {position: relative; padding: 0 30px; font-size: 0;}
#cctvPop .popup_contents .btn_wrap p {display: inline-block; width: 29%; height: 35px; line-height: 35px; font-size: 15px; font-weight: 500; text-align: center; color: #666;}
#cctvPop .popup_contents .btn_wrap p.mint {width: 42%; padding: 0 38px; font-size: 17px; background: url('/images/main/img_dotted.png') left center no-repeat, url('/images/main/img_dotted.png') right center no-repeat;}
#cctvPop .popup_contents .btn_wrap .btn {position: absolute; top: 0; bottom: 0; width: 35px; height: 35px; text-indent: -9999px;}
#cctvPop .popup_contents .btn_wrap .btn_prev {left: 0; background: url('/images/main/ic_left_way.png') center center no-repeat;}
#cctvPop .popup_contents .btn_wrap .btn_next {right: 0; background: url('/images/main/ic_right_way.png') center center no-repeat;}
 */

/* CCTV 팝업 */
#cctvPop .popup_inner { width: 500px; margin: 10px auto 0; max-height: 79vh; overflow: auto;}
#cctvPop .popup_header .cctv_title { padding-left: 35px; background: url("/images/main/ic_camera.png") left center no-repeat; background-size: auto 15px; }
#cctvPop .popup_contents { padding: 10px 20px; }
#cctvPop .content_bg { padding: 10px 20px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #f6f6f6; }
#cctvPop .video_wrap { position: relative; margin-bottom: 0; }
#cctvPop .video_wrap .video { position: relative; height: auto; }
#cctvPop .video_wrap .btn { position: absolute; width: 54px; height: 54px; text-indent: -9999px; border: 0; }
#cctvPop .video_wrap .btn_reload { top: 10px; left: 10px; background: url("/images/main/btn_reload.png") center center no-repeat; }
#cctvPop .video_wrap .btn_zoom { right: 10px; bottom: 10px; background: url("/images/main/btn_zoom.png") center center no-repeat; }
#cctvPop .btn_wrap { font-size: 0; position: relative; margin-bottom: 10px; padding: 0 30px; }
#cctvPop .btn_wrap p { font-size: 15px; font-weight: 500; display: inline-block; width: 29%; text-align: center; vertical-align: middle; color: #666; }
#cctvPop .btn_wrap p.mint { font-size: 16px; line-height: 1.1; position: relative; width: 42%; padding: 0 20px; }
#cctvPop .btn_wrap p.mint:before,
#cctvPop .btn_wrap p.mint:after { position: absolute; top: 50%; display: block; width: 15px; height: 1px; content: ""; background: #35babc; }
#cctvPop .btn_wrap p.mint:before { left: 0; }
#cctvPop .btn_wrap p.mint:after { right: 0; }
#cctvPop .btn_wrap .btn { position: absolute; top: 50%; bottom: 0; width: 18px; height: 35px; margin-top: -17.5px; padding: 0; text-indent: -9999px; }
#cctvPop .btn_wrap .btn_prev { left: 0; background: url("/images/main/ic_left_way.png") center center no-repeat; }
#cctvPop .btn_wrap .btn_next { right: 0; background: url("/images/main/ic_right_way.png") center center no-repeat; }
#cctvPop .rd_cctv_cntnts_Wrap2 { display: flex; flex-direction: row; width: 100%; margin-top: 15px; align-items: flex-start; justify-content: space-between; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 { display: flex; flex-direction: column; width: 32%; align-items: flex-start; justify-content: center; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 { display: flex; overflow: hidden; flex-direction: column; box-sizing: border-box; width: 100%; height: 89px; background-color: #1d1d1d; align-items: center; justify-content: center; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1 { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1.active { box-shadow: 0 0 0 5px #35babc; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2 { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2.active { box-shadow: 0 0 0 5px #35babc; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3 { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3.active { box-shadow: 0 0 0 5px #35babc; }
#cctvPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2.active { box-shadow: 0 0 0 5px #35babc; }
#cctvPop .weather_area { padding: 15px 0; padding-bottom: 10px; }
#cctvPop .weather_list { display: flex; }
#cctvPop .weather_list > li { position: relative; width: calc((100% / 6) - 0.1px); }
#cctvPop .weather_list > li:before { position: absolute; top: 50%; right: 0; display: block; width: 1px; height: 20px; margin-top: -10px; content: ""; background-color: #e5e5e5; }
#cctvPop .weather_list > li:last-child:before { display: none; }
#cctvPop .weather_list .weather_item { text-align: center; }
#cctvPop .weather_list .weather_time { font-family: "Poppins", "Noto Sans KR", sans-serif; font-size: 11px; font-weight: 500; line-height: 25px; display: inline-block; width: 50px; height: 25px; color: #222; border-radius: 100px; background-color: #f4f4f4; }
#cctvPop .weather_list > li.active .weather_time { color: #0069c0; background-color: #e6f4fc; }
#cctvPop .weather_list .weather_img { margin: 5px 0; height: 14px;}
#cctvPop .weather_list .weather_img img { vertical-align: top; }
#cctvPop .weather_list .weather_temp { font-family: "Poppins", "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 500; }
#cctvPop .content_bottom { padding: 0 20px; }
#cctvPop #play_tts {margin-top: -10px; float: right; background: #f0f0f0; border: 1px solid #ddd; height: 35px; padding: 0 13px; letter-spacing: -0.5px; font-weight: 350; font-family: 'Noto Sans KR', sans-serif, "맑은고딕", Malgun Gothic, dotum, verdana;}
#cctvPop #play_tts:before {content: "교통정보 음성안내";}
#cctvPop #play_tts:disabled {opacity: 0.7;}

/* 가이드 텍스트 */
.st_info { background: url('/images/common/ic_info.png') no-repeat left center; padding-left: 25px; font-size: 14px; color: #666; margin-bottom: 10px; }

/* 팝업내 도로공사 로고 */
.dogonglog { border-top: 1px solid #ddd; }
.dogonglog p { width: 100%; height:30px; background: url('/images/main/ic_dogong_logo.png') center no-repeat; background-size: 130px; }


/* 국도 CCTV 팝업 */
#ntrdCctvPop .popup_inner {width: 500px;}
#ntrdCctvPop .popup_header { position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500;color: #fff;background: #3773ef;}
#ntrdCctvPop .popup_header .cctv_title {padding-left: 35px; background: url('/images/main/ic_camera.png') left center no-repeat; background-size : auto 15px;}
#ntrdCctvPop .popup_contents {padding: 20px;}
#ntrdCctvPop .popup_contents .video_wrap {position: relative;}
#ntrdCctvPop .popup_contents .video_wrap .video {position: relative; height: auto;}
#ntrdCctvPop .popup_contents .video_wrap .btn {position: absolute; width: 54px; height: 54px; text-indent: -9999px; border: 0;}
#ntrdCctvPop .popup_contents .video_wrap .btn_reload {left: 10px; top: 20px; background: url('/images/main/btn_reload.png') center center no-repeat;}

/* CCTV 팝업(확대) */
#cctvfullPop {}
#cctvfullPop .popup_inner {width: 1145px; margin: 0 auto; background: none;}
#cctvfullPop .popup_contents {}
#cctvfullPop .popup_contents .video_wrap {position: relative; text-align: center;}
#cctvfullPop .popup_contents .video_wrap .video {position: relative; width: auto; max-width: 100%; height: 100%; max-height: 858px;}
#cctvfullPop .popup_contents .video_wrap .btn {position: absolute; width: 54px; height: 54px; text-indent: -9999px; border: 0;}
#cctvfullPop .popup_contents .video_wrap .btn_reload {left: 10px; top: 10px; background: url('/images/main/btn_reload.png') center center no-repeat;}
#cctvfullPop .popup_contents .video_wrap .btn_zoom {right: 10px; bottom: 10px; background: url('/images/main/btn_zoom.png') center center no-repeat;}
#cctvfullPop .popup_contents .video_wrap .closeMent {position: absolute; top: 100px; left: 50%; display: inline-block; width: 500px; height: 60px; margin-left: -250px; text-align: center; line-height: 60px; font-size: 20px; font-weight: 500; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 50px;}
#cctvfullPop .popup_contents .btn_wrap {}
#cctvfullPop .popup_contents .btn_wrap .btn {top: 50%; width: 116px; height: 216px; margin-top: -108px;}
#cctvfullPop .popup_contents .btn_wrap .btn_prev {left: 20px; background: url('/images/main/ic_arrow_prev_white.png') center center no-repeat;}
#cctvfullPop .popup_contents .btn_wrap .btn_next {right: 20px; background: url('/images/main/ic_arrow_next_white.png') center center no-repeat;}

/* 날씨 팝업  */
#weatherPop { font-family: "Poppins", "Noto Sans KR", sans-serif; }
#weatherPop .weather_title { position: relative; padding-left: 40px; }
#weatherPop .weather_title:before { position: absolute; top: 50%; left: 0; display: block; width: 31px; height: 24px; margin-top: -12px; content: ""; background: url(/gis/images/weather/ic_weatherPop.png) no-repeat center; }
#weatherPop .popup_inner { width: 100%; max-width: 500px; margin: 30px auto; }
#weatherPop .popup_header { background-color: #0069c0; }
#weatherPop .weather_ly_title_area { position: relative; display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; }
#weatherPop .weather_ly_title { font-size: 17px; font-weight: 500; }
#weatherPop .weather_item_top { padding: 15px 20px; }
#weatherPop .weather_view,
#weatherPop .weather_info { margin-bottom: 15px; }
#weatherPop .weather_view { display: flex; }
#weatherPop .weather_view .weather_img { margin-right: 30px; flex: 0 0 auto; }
#weatherPop .weather_view .weather_img img { max-width: 100%; }
#weatherPop .weather_view .weather_desc { position: relative; width: 100%; }
#weatherPop .weather_ly_title_area .weather_desc_update { font-size: 12px; color: #222; }
#weatherPop .weather_view .weather_desc_update { font-size: 12px; position: absolute; top: 0; right: 0; color: #222; }
#weatherPop .weather_ly_title_area .weather_desc_update .time,
#weatherPop .weather_view .weather_desc_update .time { color: #666; }
#weatherPop .weather_view .weather_data { display: flex; height: 100%; padding-top: 7px; align-items: center; }
#weatherPop .weather_view .weather_data .data_time { font-size: 14px; font-weight: 500; line-height: 35px; min-width: 90px; height: 35px; margin-top: 10px; margin-right: 20px; padding: 0 10px; text-align: center; color: #0069c0; border-radius: 100px; background: #e6f4fc; }
#weatherPop .weather_view .weather_data .data_weather { font-size: 20px; font-weight: 500; color: #222; }
#weatherPop .weather_view .weather_data .data_weather .temperature { font-size: 40px; margin-right: 10px;}
#weatherPop .weather_info { padding: 20px 0; border: 1px solid #e5e5e5; border-radius: 12px; }
#weatherPop .weather_info .info_list { display: flex; }
#weatherPop .weather_info .info_list > li { position: relative; width: 33.3%; padding: 0 20px; border-right: 1px solid #e5e5e5; }
#weatherPop .weather_info .info_list > li:before { position: absolute; top: 50%; right: 6px; display: block; width: 30px; height: 22px; margin-top: -11px; content: ""; background-repeat: no-repeat; background-position: center; }
#weatherPop .weather_info .info_list > li:last-child { border-right: 0; }
#weatherPop .weather_info .info_list .info_title { font-size: 14px; }
#weatherPop .weather_info .info_list .info_data { font-size: 15px; font-weight: 500; color: #2459c4;}
#weatherPop .weather_info .info_list .precipitation.type1:before { background-image: url(/gis/images/weather/ic_precipitation_type1.png); }
#weatherPop .weather_info .info_list .precipitation.type2:before { background-image: url(/gis/images/weather/ic_precipitation_type2.png); }
#weatherPop .weather_info .info_list .wind_speed:before { background-image: url(/gis/images/weather/ic_wind_speed_type1.png); }
#weatherPop .weather_info .info_list .humidity:before { background-image: url(/gis/images/weather/ic_humidity_type1.png); }
#weatherPop .weather_info .info_list .wind_chill:before { background-image: url(/gis/images/weather/ic_windchill.png); }
#weatherPop .weather_time_slide_wrap { position: relative; margin-bottom: 15px; padding: 0 15px; border: 1px solid #e5e5e5; border-radius: 12px; }
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-prev,
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-next { width: 35px; height: 35px; border: 1px solid #ddd; border-radius: 100%; background-color: #fff; background-repeat: no-repeat; background-position: center; }
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-prev:after,
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-next:after { display: none; }
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-prev { left: -7px; background-image: url(/gis/images/weather/ic_slide_prev.png); }
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-next { right: -7px; background-image: url(/gis/images/weather/ic_slide_next.png); }
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-next.swiper-button-disabled,
#weatherPop .weather_time_slide_wrap .weather_slide_control .swiper-button-prev.swiper-button-disabled { opacity: 0; }
#weatherPop .weather_time_slide .weather_list { display: flex; padding: 15px 0; padding-bottom: 10px; }
#weatherPop .weather_time_slide .weather_list > li { position: relative; width: 16.67%;}
#weatherPop .weather_time_slide .weather_list > li:before { position: absolute; top: 35px; right: -1px; display: block; width: 1px; height: 20px; content: ""; background-color: #e5e5e5; }
#weatherPop .weather_time_slide .weather_list > li:last-child:before { display: none; }
#weatherPop .weather_time_slide .weather_list .weather_item { text-align: center;}
#weatherPop .weather_time_slide .weather_list .weather_time { font-family: "Poppins", "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 500; line-height: 25px; display: inline-block; width: 50px; height: 25px; color: #222; border-radius: 100px; background-color: #f4f4f4; }
#weatherPop .weather_time_slide .weather_list > li.active .weather_time { color: #0069c0; background-color: #e6f4fc; }
#weatherPop .weather_time_slide .weather_list .weather_img { display: flex; height: 25px; margin: 10px 0 5px 0; align-items: center; justify-content: center; }
#weatherPop .weather_time_slide .weather_list .weather_img img { vertical-align: top; }
#weatherPop .weather_time_slide .weather_list .weather_temp { font-family: "Poppins", "Noto Sans KR", sans-serif; font-size: 15px; font-weight: 500; }
#weatherPop .weather_time_slide .weather_list .weather_humidity span { display: inline-block; padding-left: 18px; background-repeat: no-repeat; background-position: left center; }
#weatherPop .weather_time_slide .weather_list .weather_humidity.type1 span { background-image: url(/gis/images/weather/ic_humidity1.png); }
#weatherPop .weather_time_slide .weather_list .weather_humidity.type2 span { background-image: url(/gis/images/weather/ic_humidity2.png); }
#weatherPop .weather_time_slide .weather_list .weather_humidity.type3 span { background-image: url(/gis/images/weather/ic_humidity3.png); }
#weatherPop .weather_time_slide .weather_list .weather_humidity.type4 span { background-image: url(/gis/images/weather/ic_humidity4.png); }
#weatherPop .weather_dust .dust_list { display: flex; margin: 0 -5px; }
#weatherPop .weather_dust .dust_list > li { width: 50%; padding: 0 5px; }
#weatherPop .weather_dust .dust_list .dust_list_item { position: relative; display: flex; height: 90px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 12px; align-items: center; }
#weatherPop .weather_dust .dust_list .dust_data .dust_data_title { font-size: 14px; font-weight: 500; color: #222; }
#weatherPop .weather_dust .dust_list .dust_data .dust_data_val { font-size: 19px; font-weight: bold;}
#weatherPop .weather_dust .dust_list .dust_data .dustUnit{ font-size: 13px; margin-left:3px; color:#222; font-weight: 400;} /* font-size: 13px -> 17px */
#weatherPop .weather_dust .dust_list .dust_list_item.good .dust_data_val { color: #2459c4; }
#weatherPop .weather_dust .dust_list .dust_list_item.normal .dust_data_val { color: #18b56e; }
#weatherPop .weather_dust .dust_list .dust_list_item.bad .dust_data_val { color: #f9c515; }
#weatherPop .weather_dust .dust_list .dust_list_item.very_bad .dust_data_val { color: #e93237; }
#weatherPop .weather_dust .dust_list .dust_item_img { position: absolute; top: 50%; right: 10px; width: 123px; height: 65px; margin-top: -32.5px; background-repeat: no-repeat; background-position: center; background-size: contain; }
#weatherPop .weather_dust .dust_list .dust_item_img2 { position: absolute; top: 50%; right: 10px; width: 123px; height: 65px; margin-top: -32.5px; background-repeat: no-repeat; background-position: center; background-size: contain; }
#weatherPop .weather_dust .dust_list .dust_list_item.good .dust_item_img { background-image: url(/gis/images/weather/img_dust_good.png); }
#weatherPop .weather_dust .dust_list .dust_list_item.normal .dust_item_img { background-image: url(/gis/images/weather/img_dust_normal.png); }
#weatherPop .weather_dust .dust_list .dust_list_item.bad .dust_item_img { background-image: url(/gis/images/weather/img_dust_bad.png); }
#weatherPop .weather_dust .dust_list .dust_list_item.very_bad .dust_item_img { background-image: url(/gis/images/weather/img_dust_very_bad.png); }

#weatherPop .weather_dust .dust_list .dust_list_item.good .dust_item_img2 { background-image: url(/gis/images/weather/img_dust2_good.png); }
#weatherPop .weather_dust .dust_list .dust_list_item.normal .dust_item_img2 { background-image: url(/gis/images/weather/img_dust2_normal.png); }
#weatherPop .weather_dust .dust_list .dust_list_item.bad .dust_item_img2 { background-image: url(/gis/images/weather/img_dust2_bad.png); }
#weatherPop .weather_dust .dust_list .dust_list_item.very_bad .dust_item_img2 { background-image: url(/gis/images/weather/img_dust2_very_bad.png); }

#weatherPop .weather_item_bottom { line-height: 1.3; padding: 10px 20px; background: #f6f6f6; }
#weatherPop .weather_item_bottom .weather_desc { font-size: 13px; margin-bottom: 5px; word-break: keep-all; color: #555; }
#weatherPop .weather_item_bottom .weather_info2 { font-size: 12px; color: #555; }
#weatherPop .weather_item_bottom .weather_info2 .desc_label { font-weight: 500; line-height: 20px; display: inline-block; min-width: 60px; height: 20px; margin-right: 6px; padding: 0 5px; text-align: center; color: #555; border-radius: 3px; background: #e3e3e3; }

/* 상황 팝업 */
.issuePop .popup_inner {width:400px;}
.issuePop .popup_header p img {height: 26px; margin-top: -2px; margin-right: 5px;}
.issuePop .popup_header_sago p img {height: 26px; margin-top: -2px; margin-right: 5px;}
.issuePop .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd;}
.issuePop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
.issuePop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
.issuePop .popup_contents .cont {margin: 0; padding: 15px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}
.issuePop .popup_contents .notcont {margin: 0;  font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}
/* 도형식 VMS 팝업 */
#vmsType1Pop { z-index: 99; }
#vmsType1Pop .popup_inner { width: 425px; margin: 50px auto 0; }
#vmsType1Pop .popup_header { background: #383838; }
#vmsType1Pop .popup_header .header_title { padding-left: 30px; background: url('/gis/images/common/ic_vms_d.png') left center no-repeat; background-size: auto 20px; }
#vmsType1Pop .road_name { height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border: 0; border-bottom:1px solid #ddd; }
#vmsType1Pop .road_name strong { font-size: 18px; font-weight: 500; margin-left:5px }
#vmsType1Pop .road_info_txt_wrap { display: block; padding: 20px; padding-top: 0; }
#vmsType1Pop .road_info_name { padding: 15px 20px; padding-bottom: 0; font-size: 16px; }
#vmsType1Pop .vms_graphic_wrap { padding: 20px; }
#vmsType1Pop .vms_graphic_wrap .vms_graphic img { width:100%; }
/* 2210 백인범 도형식 VMS 하단 CCTV 추가 */
#vmsType1Pop .content_bg { background: #f6f6f6; padding-left: 12px; padding-right:12px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
#vmsType1Pop .btn_wrap {position: relative; font-size: 0; margin: 8px 0;}
#vmsType1Pop .btn_wrap p {display: inline-block; width: 31%; font-size: 13.5px; font-weight: 400; text-align: center; color: #666;vertical-align: middle;}
#vmsType1Pop .btn_wrap p.mint {position: relative; width: 38%; font-size: 13.5px; line-height: 1.1; color: #666666 !important}
#vmsType1Pop .btn_wrap p.mint:before,
#vmsType1Pop .btn_wrap p.mint:after  { content:""; display:block; width:10px; height:1px; position: absolute; top:50%; }
#vmsType1Pop .btn_wrap p.mint:before { left:0; }
#vmsType1Pop .btn_wrap p.mint:after {right:0;  }
#vmsType1Pop .btn_wrap .btn {position: absolute; top: 50%; margin-top:-17.5px; bottom: 0; width: 18px; height: 35px; text-indent: -9999px;padding:0;}
#vmsType1Pop .btn_wrap .btn_prev {left: 0; background: url('/images/main/ic_left_way.png') center center no-repeat;  background-size: 15px;}
#vmsType1Pop .btn_wrap .btn_next {right: 0; background: url('/images/main/ic_right_way.png') center center no-repeat;  background-size: 15px;}
#vmsType1Pop .rd_cctv_cntnts_Wrap2{width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-top:8px; margin-bottom: 12px}
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 {width: 30%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 .active { box-shadow: 0px 0px 0px 5px #35babc; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; height: 70px; width: 100%; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 img{width:100%;  cursor: pointer;}
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1.active { box-shadow: 0px 0px 0px 5px #35babc; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2.active { box-shadow: 0px 0px 0px 5px #35babc; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#vmsType1Pop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3.active { box-shadow: 0px 0px 0px 5px #35babc; }


/* 문형식 VMS 팝업 */
#vmsType2Pop .popup_inner { width: 400px; margin: 50px auto 0; }
#vmsType2Pop .popup_header { background: #383838; }
#vmsType2Pop .popup_header .header_title { padding-left: 50px; background: url('/images/common/ic_vms_m_w.png') left center no-repeat; background-size: auto 20px; }
#vmsType2Pop .road_name { height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border: 0; border-bottom:1px solid #ddd; }
#vmsType2Pop .road_name strong { font-size: 18px; font-weight: 500; margin-left:5px;}
#vmsType2Pop .road_info_txt_wrap { display: block; padding: 20px; padding-top: 0; }
#vmsType2Pop .road_info_name { padding: 15px 20px; font-size: 16px; }
#vmsType2Pop .road_info_txt{white-space: nowrap; overflow: hidden; }
#vmsType2Pop .road_info_txt_wrap .vms_txt_animation { width:359px; font-size: 18px; color: #f0ed3c; text-align: left; padding: 0px 15px; white-space: nowrap;
    -webkit-transform: translateX(100%); -webkit-animation: vms_animation 12s linear infinite;
    -ms-transform: translateX(100%); -ms-animation: vms_animation 12s linear infinite;  }
#vmsType2Pop .road_info_txt_wrap .vms_txt_shorts { width:359px; font-size: 18px; color: #f0ed3c; text-align: center; padding: 0px 15px; white-space: nowrap; transform: translateX(0%); }

/* #vmsType2Pop .road_info_txt_wrap .vms_txt_long { width:359px; font-size: 18px; color: #f0ed3c; text-align: center; padding: 0px 15px; white-space: nowrap; transform: translateX(15%); } */
#vmsType2Pop .road_info_txt_wrap .vms_txt_animation_long { width:359px; font-size: 18px; color: #f0ed3c; text-align: left; padding: 0px 15px; white-space: nowrap;
    -webkit-animation: vms_animation_long 10s 1s linear infinite;
    -ms-transform: translateX(100%); -ms-animation: vms_animation 8s linear infinite;  }

@-webkit-keyframes vms_txt_animation { from {-webkit-animation: translateX(100%); } to { -webkit-transform: translateX(-150%);  }  }
@-webkit-keyframes vms_animation_long { from {-webkit-animation: translateX(100%); } to { -webkit-transform: translateX(-200%);  }  }
@-ms-keyframes vms_txt_animation { from {-ms-animation: translateX(100%); } to { -ms-transform: translateX(-150%);  }  }



/* 전면차단 팝업 */
#allblockPop .popup_inner {width: 300px;}
#allblockPop .popup_header .allblock_title {padding-left: 35px; background: url('/images/main/ic_allblock.png') left center no-repeat; background-size : auto 15px;}
#allblockPop .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd;}
#allblockPop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
#allblockPop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
#allblockPop .popup_contents .road_gubun {margin: 0; padding: 15px 20px 8px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}
#allblockPop .popup_contents .road_date {margin: 0; padding: 0px 10px 15px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}
#allblockPop .popup_contents .cont {margin: 0; padding: 15px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}

/* 영업소차단 팝업 */
#agencyBlockPop .popup_inner {width: 400px;}
#agencyBlockPop .popup_header_allblock { height:60px;line-height: 60px; }
#agencyBlockPop .popup_header_allblock img { width:30px; }
#agencyBlockPop .popup_header .allblock_title {padding-left: 35px; background: url('/images/main/ic_allblock.png') left center no-repeat; background-size : auto 15px;}
#agencyBlockPop .popup_contents b { font-weight:500; }
#agencyBlockPop .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd;}
#agencyBlockPop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
#agencyBlockPop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
#agencyBlockPop .popup_contents .road_gubun {margin: 0; padding: 15px 20px 8px 20px; font-size: 16px; -ms-word-break: keep-all; word-break: keep-all;}
#agencyBlockPop .popup_contents .road_gubun span{color: red;}
#agencyBlockPop .popup_contents .road_dirnm {position: relative;margin: 0; padding: 0 20px 8px 20px; font-size: 16px; -ms-word-break: keep-all; word-break: keep-all;padding-left: 113px;}
#agencyBlockPop .popup_contents .road_dirnm span {position: absolute; left:20px; top:0;  }
#agencyBlockPop .popup_contents .road_date {margin: 0; padding: 0px 10px 15px 20px; font-size: 16px; -ms-word-break: keep-all; word-break: keep-all;}
#agencyBlockPop .popup_contents .cont {margin: 0; padding: 15px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}


/* 사고 팝업_20201112 */
.issuePop .popup_rszng{width:400px;}
.issuePop .popup_rszng .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border:0;}
.popup_contents .road_info_txt_wrap{display: flex;padding: 0 20px 20px 20px; border-bottom: 1px solid #ddd;}
.popup_contents .road_info_txt_wrap .road_info_txt{display: flex; justify-content: center; align-items: center;width: 100%; padding: 10px 20px; background-color:#1d1d1d; color:#ffc000; text-align: center; font-size: 22px;text-align: center; line-height: 30px;word-break: keep-all; white-space: normal;}
.popup_contents .road_info_txt_wrap .vms_info_txt{display: flex; justify-content: center; align-items: center;width: 100%; padding: 10px 20px; background-color:#1d1d1d; color:#ffc000; text-align: center; font-size: 22px;text-align: center; line-height: 30px;word-break: keep-all; white-space: normal;}

.popup_contents .road_cctv_wrap{width: 100%; padding: 0 20px 20px 20px; /* background-color: #f6f6f6; */border-bottom: 1px solid #ddd;}
.popup_contents .road_cctv_wrap.accident { padding-top: 0; }
.rd_cctv_ttl3{display: flex; align-items: center; width:130px; height: 28px; background-image:url(/images/main/cctv_ico.png);}
.rd_cctv_ttl{ display: flex; align-items: center; width:130px; height: 28px; background-image:url(../../images/main/cctv_ico2.png);}
.road_info_wrap { padding: 20px; background-color:#e0e3eb; }
.road_info_wrap .road_info_list { background-color: #fff; border-radius: 10px; overflow: hidden; font-size: 16px; letter-spacing: -1px; box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.1);  }
.road_info_wrap .road_info_title { padding: 10px 15px; background-color: #3c5fb5; color: #fff; font-weight: bold;  }
.road_info_wrap .road_info_desc_wrap { padding: 10px 15px; }
.road_info_wrap .road_info_desc { margin-bottom: 5px; }
.road_info_wrap .road_info_desc:last-child { margin-bottom:0; }
.vms_con_wrap { padding: 10px 15px; }
.road_cctv_wrap .rd_cctv_cntnts_Wrap{width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}

.cctv_box_wrap .cctv_box_txt{ line-height: 20px;word-break: keep-all; white-space: normal; text-align:center; align-items: center;}

.cctv_box_wrap{width:32%;display: flex; flex-direction: column; align-items: flex-start; justify-content:center; overflow: hidden; align-items: center;}
.cctv_box_wrap .cctv_box_blackBg{display: flex; flex-direction: column; align-items: center; justify-content:center;background-color:#1d1d1d;margin: 15px 0 10px 0;box-sizing: border-box;overflow: hidden;height:89px;width:100%;}
.cctv_box_wrap .cctv_box_blackBg .cctv_img_wrap{display: flex; flex-direction: column; align-items: center; justify-content:center;width:100%;height:100%;}
.cctv_box_wrap .cctv_box_blackBg .cctv_img_wrap > img{display: block; width:100%;cursor: pointer;height:100%;}

/* 20210928_후방VMS 팝업 */
.vms_con_wrap .vms_icon { text-align: right; }
.vms_con_wrap .vms_icon .icon { display: inline-block; vertical-align: top; width: 62px; height: 25px; background: url(/images/main/vms_open.png) no-repeat center; }
.vms_con_wrap .vms_icon.active .icon { background-image: url(/images/main/vms_close.png); }
.vms_con_wrap .vms_con { margin-top: 10px; overflow: hidden;}
.vms_con_wrap .vms_con .vms_txt { font-size: 18px; color: #f0ed3c; border: 3px solid #d6d1cd; background: #3d3d3d; text-align: center; padding: 20px 15px; }
.vms_con_wrap .vms_con .vms_txt_animation { font-size: 18px; color: #f0ed3c; text-align: center; padding: 0px 15px; white-space: nowrap;
    -webkit-transform: translateX(100%); -webkit-animation: vms_animation 10s linear infinite;
    -ms-transform: translateX(100%); -ms-animation: vms_animation 10s linear infinite;  }
.vms_con_wrap .vms_con .vms_txt_animation_long { font-size: 18px; color: #f0ed3c; text-align: left; padding: 0px 15px; white-space: nowrap;
    -webkit-animation: vms_animation_long 10s 1s linear infinite;
    -ms-animation: vms_animation 10s 1s linear infinite;  }

@-ms-keyframes vms_txt_animation { from {-ms-animation: translateX(100%); } to { -ms-transform: translateX(-150%);  }  }
@-webkit-keyframes vms_animation { from {-webkit-animation: translateX(100%); } to { -webkit-transform: translateX(-150%);  }  }
@-ms-keyframes vms_animation { from {-ms-animation: translateX(100%); } to { -ms-transform: translateX(-150%);  }  }

/* 작업정체_20210901 팝업 추가
.workPop .popup_inner {width:400px; }
*/
.workPop .popup_header p img {height: 26px; margin-top: -2px; margin-right: 5px;}
.workPop .popup_header_sago p img {height: 26px; margin-top: -2px; margin-right: 5px;}
.workPop .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd;}
.workPop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
.workPop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
.workPop .popup_contents .contents {margin: 0; padding: 15px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all;}
.workPop .popup_contents .contents_sub {height: 50px; padding: 0 20px; line-height: 25px; font-size: 15px; border-top: 1.5px solid #ddd; color:#ff0000;}

/* 메뉴정보 전소현 수정 */
.menu_cont_wrap {padding: 0 20px;display: flex; flex-wrap: wrap;gap: 10px;}
.menu_cont_wrap .menu_list {display: flex; border: 1px solid #eee;flex-direction: column;width: 48%;padding: 10px;}
.menu_cont_wrap .menu_list .menu_list_img {width: 100%; height: 120px; background-repeat: no-repeat; background-image: url(/images/main/new/menu_list_img.png);background-size: contain;}
.menu_cont_wrap .menu_list .menu_list_text {height: 52px; font-size: 18px; margin-top: 15px;font-weight: bold;text-align: center;}
.menu_cont_wrap .menu_list .menu_list_price {font-size: 18px;text-align: center; margin: 10px 0;}

/* 졸음쉼터 전소현 수정 */ /*0825 전소현수정2*/
.rst_cont_wrap .rst_parking {display: flex; width: 100%; justify-content: center;gap: 10px;}
.rst_cont_wrap .rst_parking>div {width: 33.33%; display: flex; gap: 10px; flex-direction: column; align-items: center;padding: 20px 29px;border: 1px solid #eee;background-color: #F3F9FE;}
.rst_cont_wrap .rst_parking>div>span {color: #198DEF;font-size: 18px;font-weight: 700;}
.rst_cont_wrap .rst_parking>div>p {text-align: center;font-weight: 500;}
.rst_cont_wrap .rst_list_wrap {display: flex;flex-direction: column; gap: 10px; }
.rst_cont_wrap .rst_list_wrap .rst_list {display: flex; align-items: center; width: 100%; background: #F3F9FE;border: 1px solid #eee;}
.rst_cont_wrap .rst_list_wrap .rst_list .rst_list_name {align-items: center; font-weight: 500; width: 100%; padding: 10px 30px; display: flex;gap: 10px;}
.rst_cont_wrap .rst_list_wrap .rst_list.on .rst_list_name {background: #F3F9FE;}
.rst_cont_wrap .rst_list_wrap .rst_list.off .rst_list_name {background: #F8f8f8;}
.rst_cont_wrap .rst_list_wrap .rst_list .rst_list_name i {display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: contain;}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(1) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_01.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(2) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_2.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(3) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_3.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(4) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_4.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(5) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_5.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(6) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_6.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on:nth-child(7) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_7.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(1) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_01_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(2) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_2_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(3) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_3_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(4) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_4_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(5) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_5_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(6) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_6_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.off:nth-child(7) .rst_list_name i {background-image: url('/images/main/new/rst_list_name_7_off.png');}
.rst_cont_wrap .rst_list_wrap .rst_list.on .rst_list_ic {display: block; width: 25px; height: 25px; background-image: url('/images/main/new/rst_list_ic_01.png'); background-repeat: no-repeat; background-size: contain;margin-right: 30px;}
.rst_cont_wrap .rst_list_wrap .rst_list.on:last-child .rst_list_ic {display: block; width: 100px; height: 25px; background-image: url('/images/main/new/elec_btn.png'); background-repeat: no-repeat; background-size: contain;margin-right: 30px;}
.rst_cont_wrap .rst_list_wrap .rst_list.off .rst_list_ic {display: block; width: 25px; height: 25px; background-image: url('/images/main/new/rst_list_ic_02.png'); background-repeat: no-repeat; background-size: contain;margin-right: 30px;}

/* 20201023_박민주 졸음쉼터  팝업 추가 */
.issuePop .rst_test {width:400px;}
/* 20210914_졸음쉼터 상단 코로나19 전용 명칭 표시에 따른 gisMainController에 분기 코딩 함으로 css 주석 표시 */
.rst_test .popup_header {position: relative; height: 45px; padding: 0 20px; line-height: 45px; font-size: 18px; font-weight: 500; color: #fff; background: #198DEF;}
.rst_test .popup_contents .cont .rst_cont_wrap{display: flex; flex-direction: column; padding: 0 2px; gap: 10px;}/*전소현 수정*/
.rst_test .popup_contents .cont .rst_cont_wrap .tr_lft{width: 45%;}
.rst_test .popup_contents .cont .rst_cont_wrap .tr_rght{width: 55%; padding-left: 20px;}
.rst_test .popup_contents .cont .rst_cont_wrap .rst_tr .rst_td{display: flex; flex-direction: row; align-items: center;margin-bottom:15px;}
.rst_test .popup_contents .cont .rst_cont_wrap .tr_lft .rst_bttm_p{margin-bottom: 0;}
.rst_test .popup_contents .cont .rst_cont_wrap .rst_tr .rst_td span{display: inline-block;line-height: 120%;}
.rst_test .popup_contents .cont .rst_cont_wrap .rst_tr .rst_td span:nth-child(1){margin-right: 10px;}
.rst_test .popup_contents .cont .rst_cont_wrap .rst_tr .rst_td span:nth-child(3){margin-left:auto; font-size: 17px; font-weight: bold; color:#35babc;text-align: right;}
.rst_td span .img_p{padding-top: 2px;}
.rst_adress{height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; border-top: 1px solid #ddd;}

/*
2021년 9월17일기상 영상 팝업
#weatherVideoPop .popup_inner { width: 500px; margin: 50px auto 0; }
#weatherVideoPop .popup_header { background: #252796; }
#weatherVideoPop .popup_header .header_title { padding-left: 35px; background: url(../../images/main/ic_wv.png) left center no-repeat; background-size: auto 23px; }
#weatherVideoPop .popup_contents { padding: 20px; }
#weatherVideoPop .st_tab1 { margin-top: -20px; }
#weatherVideoPop .wv_tab_content { display: none; padding-top: 15px; }
#weatherVideoPop .wv_tab_content:nth-child(1) { display: block; }
#weatherVideoPop .wv_video_wrap { position: relative; }
#weatherVideoPop .wv_video_wrap:before { content:""; display: block; padding-top: 97.61%; }
#weatherVideoPop .wv_video_wrap .wv_video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#weatherVideoPop .wv_video_txt { margin-top: 5px; font-size: 14px; color: #333; }
#weatherVideoPop .wv_video_time { margin-top: -18.5px; margin-left: 180px; font-size: 14px;}
#weatherVideoPop .wv_video_util { margin-top: 15px; align-items: center; }
#weatherVideoPop .wv_video_util .wv_play_icon { margin-right: 5px; width: 30px; height: 30px; background: url(/images/main/ic_play.png) no-repeat center; cursor: pointer; }
#weatherVideoPop .wv_video_util .wv_pause_icon {margin-right: 5px; display: none; width: 30px; height: 30px; background: url(/images/main/pauseBtn.png) no-repeat center;  cursor: pointer;}
#weatherVideoPop .wv_video_util .wv_play_bar { flex: 1 1 auto; height: 50px; } */

/* 기상 영상 팝업 */
#weatherVideoPop .popup_inner { width: 450px; margin: 50px auto 0; }
#weatherVideoPop .popup_header { background: #252796; }
#weatherVideoPop .popup_header .header_title { padding-left: 35px; background: url(../../images/main/ic_wv.png) left center no-repeat; background-size: auto 23px; }
#weatherVideoPop .popup_contents { padding: 20px; }
#weatherVideoPop .st_tab1 { margin-top: -20px; }
#weatherVideoPop .wv_tab_content { display: none; padding-top: 5px;}
#weatherVideoPop .wv_tab_content:nth-child(1) { display: block; }
#weatherVideoPop .wv_video_wrap { position: relative; margin-top: 10px;}
#weatherVideoPop .wv_video_wrap:before { content:""; display: block; padding-top: 97.61%; }
#weatherVideoPop .wv_video_wrap .wv_video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#weatherVideoPop .wv_video_wrap .rader_video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#weatherVideoPop .wv_video_wrap .satellite_video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#weatherVideoPop .wv_video_wrap .fog_video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#weatherVideoPop .wv_video_txt { position: absolute; margin-top: 5px; font-size: 14px; color: #333; }
#weatherVideoPop .rader_txt { position: absolute; margin-top: 5px; font-size: 15px; color: #333; }
#weatherVideoPop .satellite_txt { margin-top: 5px; font-size: 14px; color: #333; border: 2px solid #eef2f7;text-align: center;border-radius: 13px;}
#weatherVideoPop .fog_txt { margin-top: 5px; font-size: 14px; color: #333; border: 2px solid #eef2f7;text-align: center;border-radius: 13px;}
#weatherVideoPop .wv_video_util { display: flex; margin-top: 15px; align-items: center; }
#weatherVideoPop .wv_video_util .wv_play_icon { flex: 0 0 auto; margin-right: 5px; margin-top: 16px; display: block; width: 28px; height: 28px;  text-indent: 100%; overflow: hidden; white-space:nowrap; cursor: pointer; }
#weatherVideoPop .wv_video_util .wv_pause_icon { flex: 0 0 auto; margin-right: 5px; margin-top: 16px; display: none; width: 28px; height: 28px; text-indent: 100%; overflow: hidden; white-space:nowrap;cursor: pointer; }
#weatherVideoPop .wv_video_util .wv_play_bar { flex: 1 1 auto; height: 50px; }

/* 2021.09.24 플레이어 프로그레스 */
#weatherVideoPop .wv_video_util .wv_play_bar { padding: 0 0 0 15px; }
.plyer_bar_wrap { position: relative; width: 95%; margin-top: 26px; margin-left: 0px; }
.plyer_bar_wrap .plyer_bar.ui-widget.ui-widget-content { width: 100%; height: 4px; padding: 0; background: #cdd0d2; border: 0; border-radius: 50px; }
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-slider-range-min { background: #1f2020; }
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-state-default,
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-widget-content
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-state-default,
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-widget-header
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-state-default,
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-button,
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-button.ui-state-disabled:hover,
.plyer_bar_wrap .plyer_bar.ui-slider-horizontal .ui-button.ui-state-disabled:active { width: 12px; height: 12px; margin-top: 1px; background: #1f2020; border: 0; border-radius: 50%; outline: none; cursor: pointer; }
.plyer_bar_wrap .seek_text_time { position: absolute; bottom: -28px; pointer-events: none; filter: none; color: #333; font-size: 14px; transition: all .5s; white-space: nowrap; text-align: center; }
.plyer_bar_wrap .seek_play_time { left: 0;}
.plyer_bar_wrap .seek_playend_time { right: 0; }
.plyer_bar_wrap .seek_text_time { position: absolute; bottom: -28px; pointer-events: none; filter: none; color: #333; font-size: 14px; transition: all .5s; white-space: nowrap; text-align: center; }
.plyer_bar_wrap .seek_play_satelliteTime { left: 0; }
.plyer_bar_wrap .seek_playend_satelliteTime { right: 0; }
.plyer_bar_wrap .seek_play_fogTime { left: 0; }
.plyer_bar_wrap .seek_playend_fogTime { right: 0; }
#weatherVideoPop .rader_txt { position: absolute; margin-top: 5px; font-size: 14px; color: #333; }
/* // 2021.09.24 플레이어 프로그레스 */

/*211018_박민주 수소전기 팝업 추가*/
/*탭메뉴*/
/*.issuePop .chrg_test {width:400px;}*/
.issuePop .chrg_test {width:430px;}
.chrg_test .popup_contents{padding: 16px 20px;}
.chrg_test .popup_contents .sctTab ul{display: flex;justify-content: space-between}
.chrg_test .popup_contents .sctTab ul li a{display: inline-block; padding: 10px 68px; font-size: 18px; line-height: 130%; text-align: center; color:#ffffff; border:1px solid #e1e1e1;
    /* background: linear-gradient(to bottom,#ffffff,#e1e7e9);
    -webkit-background: linear-gradient(to bottom,#ffffff,#e1e7e9);
    -moz-background: linear-gradient(to bottom,#ffffff,#e1e7e9);
    -o-background: linear-gradient(to bottom,#ffffff,#e1e7e9);cursor: pointer;} */

    background: linear-gradient(to bottom,#2ec9f5,#18add7);
    -webkit-background: linear-gradient(to bottom,#2ec9f5,#18add7);
    -moz-background: linear-gradient(to bottom,#2ec9f5,#18add7);
    -o-background: linear-gradient(to bottom,#2ec9f5,#18add7);cursor: default;}
/*
.chrg_test .popup_contents .sctTab ul li a.active{ border:1px solid #47d6ff;color:#ffffff;
background: linear-gradient(to bottom,#2ec9f5,#18add7);
-webkit-background: linear-gradient(to bottom,#2ec9f5,#18add7);
-moz-background: linear-gradient(to bottom,#2ec9f5,#18add7);
-o-background: linear-gradient(to bottom,#2ec9f5,#18add7);cursor: pointer;}
 .chrg_test .popup_contents .sctTab ul li a.active:hover{
background: linear-gradient(to bottom,#4ac1e3,#2faccf);
-webkit-background: linear-gradient(to bottom,#4ac1e3,#2faccf);
-moz-background: linear-gradient(to bottom,#4ac1e3,#2faccf);
-o-background: linear-gradient(to bottom,#4ac1e3,#2faccf);}
.chrg_test .popup_contents .sctTab ul li a:hover{
background: linear-gradient(to bottom,#f6f6f6,#dbe2e4);
-webkit-background: linear-gradient(to bottom,#f6f6f6,#dbe2e4);
-moz-background: linear-gradient(to bottom,#f6f6f6,#dbe2e4);
-o-background: linear-gradient(to bottom,#f6f6f6,#dbe2e4);}
 */

/*충전통계*/
.tabCntt .chrgCnt{display: flex;justify-content: flex-end; padding: 16px 0;}
.tabCntt .chrgCnt div{display: flex; align-items: center;font-size: 16px; color:#333333;}
.tabCntt .chrgCnt div img{width: 5px; height: 5px; margin-right: 5px;}
.tabCntt .chrgCnt .cnt_r{margin-left: 10px;}
.tabCntt .chrgCnt .cnt_b span{color:#2ec9f5; font-weight: 500; margin: 0 3px;}
.tabCntt .chrgCnt .cnt_blc span{color:black; font-weight: 500; margin: 0 3px;}
.tabCntt .chrgCnt .cnt_r span{color:#ff3939;font-weight: bold; margin: 0 3px;}

/*디테일*/
.chrg_dtail{border:1px solid #d1d1d1; height: 288px; overflow-y: scroll; overflow-x:hidden;}
.chrg_dtail ul {border-bottom:1px solid #d1d1d1;}
.chrg_dtail ul li{padding: 10px;}
.chrg_dtail ul li .dprtmnt_wrap{display: flex;justify-content: flex-start; margin-bottom: 10px; align-content: center; align-items: center;}
/*.chrg_dtail ul li .dprtmnt_wrap{display: flex;justify-content: space-between;margin-bottom: 10px;}*/
.chrg_dtail ul li .dprtmnt_wrap span{font-size: 14px;  color:#000000;}
.chrg_dtail ul li .dprtmnt_wrap span:nth-child(2){font-size: 10px; color:#818181;}

.chrg_dtail ul li .detail{display: flex;align-items: center; justify-content:space-between;}
.chrg_dtail ul li .detail .text_chrg{padding: 0 10px 0 0; display: flex; flex-direction: column;}
.chrg_dtail ul li .detail .text_chrg .chrg_r{font-size: 17px; color:#ff3939; font-weight: 500;}
.chrg_dtail ul li .detail .text_chrg .chrg_b{font-size: 17px; color:#2ec9f5; font-weight: 500;}
.chrg_dtail ul li .detail .text_chrg .chrg_black{font-size: 17px; color:black; font-weight: 500;}

/*박민주 수정_211122*/
.chrg_dtail ul li .detail .text_chrg span{padding: 0 10px; text-align: center;font-size: 15px; color:#818181; text-align: center; word-break: keep-all;}

.chrg_dtail ul li .detail .img_chrg{display: flex; justify-content: flex-start; padding: 0;}
.chrg_dtail ul li .detail .img_chrg div{width:61px; height: 53px; padding:0; margin-right: 5px;}
.chrg_dtail ul li .detail .img_chrg div:last-child{margin: 0;}

.chrg_dtail ul li .detail .img_chrg div.dccb_on{background-image:url(/images/main/dccb_on.png);}
.chrg_dtail ul li .detail .img_chrg div.dc_on{background-image:url(/images/main/dc_on.png);}
.chrg_dtail ul li .detail .img_chrg div.ac_on{background-image:url(/images/main/ac_on.png);}
.chrg_dtail ul li .detail .img_chrg div.dccb{background-image:url(/images/main/dccb.png);}
.chrg_dtail ul li .detail .img_chrg div.dc{background-image:url(/images/main/dc.png);}
.chrg_dtail ul li .detail .img_chrg div.ac{background-image:url(/images/main/ac.png);}

/*정보*/
.chrg_info{margin-top: 16px;}
.chrg_info .chrg_info_ttl{font-size: 16px; font-weight: 600; margin-bottom: 10px;}
/*박민주 수정_211119*/
.chrg_info ul li{display: flex;flex-direction: row; align-items:flex-start;margin-bottom: 5px;}
.chrg_info ul li div{display: flex; align-items: center;}
/*박민주 추가_211119*/
.chrg_info ul li div img{margin-right: 10px;}
/*박민주 수정_211119*/
.chrg_info ul li span{font-size: 16px; color:#333333;}
.chrg_info ul li div span{width: 70px; color: #828282;}

/*충전통계*/
.chrg_info_Count{display: flex; flex-direction: row; padding: 14px 0px; border-top:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; background-color: #f6fbfc;}
.chrg_info_Count div{font-size: 16px; color:#333333; margin: 0 auto;}
.chrg_info_Count div img{margin-right: 5px;}
.chrg_info_Count div .Count_ttl{color:#818181; margin-right: 15px;}
/*박민주 수정_211122*/
.img_media_popup img{max-width: 100%; height: auto; margin-left: auto; margin-top: 10px;}
/*//211018_박민주 수소전기 팝업 추가*/

/* /* 서비스 팝업 */
#servicePop .popup_inner {width: 420px;}
#servicePop .popup_header p img {height: 26px; margin-top: -2px; margin-right: 5px;}
#servicePop .popup_contents .road_name {height: 30px; line-height: 50px; font-size: 15px; background: #fff;}
#servicePop .popup_contents .oil_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff;}
#servicePop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
#servicePop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
#servicePop .popup_contents .cont {margin-top: 0;}
#servicePop .popup_contents .cont .label {display: inline-block; width: 35px; height: 35px; line-height: 33px; text-align: center; font-size: 17px; border: 1px solid #ddd; background: #fff;}
#servicePop .popup_contents .cont .urea,.price {text-align: center; width : 60px;}  /* 220622 이다인 요소수 추가 */
#servicePop .popup_contents .cont .stock {text-align: center; width : 120px;}
#servicePop .popup_contents .cont .ureaPrice,.ureaStock {text-align: center; width : 70px;}
#servicePop .popup_contents .cont .simple_cont {padding: 0 20px; height: 50px; line-height: 50px; font-size: 17px;}
#servicePop .popup_contents .cont .simple_cont p {width: 100%;}
#servicePop .popup_contents .cont .simple_cont p.fl_right {text-align: right;}
#servicePop .popup_contents .cont .simple_cont p span {display: inline-block; vertical-align: middle; margin-left: 5px;}
#servicePop .popup_contents .cont .simple_cont p .label_round {height: 25px; padding: 0 7px; line-height: 25px; font-size: 14px; color: #fff; background: #dd2226; border-radius: 50px;}
#servicePop .popup_contents .cont .total_cont {padding: 15px 20px; background: white; border-bottom: 1px solid #ddd; }
#servicePop .popup_contents .cont .total_cont .service_list p {margin-bottom: 5px;}
#servicePop .popup_contents .cont .total_cont .service_list p>* {display: inline-block; font-size: 0; line-height: 30px;}
#servicePop .popup_contents .cont .total_cont .service_list .ic_rest {width: 30px; height: 30px; vertical-align: middle;}
#servicePop .popup_contents .cont .total_cont .service_list .ic_food {width: 30px; height: 30px; vertical-align: middle;}
#servicePop .popup_contents .cont .total_cont .service_list .ic_tel {width: 30px; height: 30px; vertical-align: middle;}
#servicePop .popup_contents .cont .total_cont .service_list p span {width: calc(100% - 35px); padding-left: 10px; font-size: 17px;}
#servicePop .popup_contents .cont .total_cont .oil_list {margin: 10px 0 5px 0px; border-bottom: 1px solid #ddd;}
#servicePop .popup_contents .cont .total_cont .oil_list .icon {display: inline-block; width: 35px; height: 35px; margin: 0 1px;}
#servicePop .popup_contents .cont .total_cont .charge_list li {display: inline-block; line-height: 33px; margin-bottom: 10px;}
#servicePop .popup_contents .cont .total_cont .charge_list li span {display: inline-block; line-height: 35px; vertical-align: top;}
#servicePop .popup_contents .cont .total_cont .charge_list li span.price,.stock {margin:0px 5px;}
#servicePop .popup_contents .cont .total_cont .charge_list2 li {display: inline-block; line-height: 33px; margin-right: 10px; margin-bottom: 10px;}
#servicePop .popup_contents .cont .total_cont .charge_list2 li input {display: inline-block; height:22px; margin-right:10px; padding: 0px 5px; cursor:pointer;  background: #fff; color:#3FC6C9;}  /* 220524 휴게소 상세보기 버튼 */
#servicePop .popup_contents .cont .total_cont .charge_list2 .icon {width:61px; height:27px; margin:0px 5px 3px 0px; vertical-align:middle;}
#servicePop .popup_contents .cont .total_cont .notice {margin: 10px auto; position: relative; }
#servicePop .popup_contents .cont .total_cont .noticeText {margin: 60px 41px 0px 40px; position: absolute;}
#servicePop .popup_contents .cont .total_cont #noticeText1 {margin-bottom: 5px; font-size:large;}
#servicePop .popup_contents .cont .total_cont #noticeText2 {margin: 0px 20px; font-size:large;}
#servicePop .popup_contents .cont .total_cont .notice img {width : 100%; height:100%; margin-bottom : 10px; }

/* 서비스 팝업 */
#sleepPop .popup_inner {width: 400px;}
#sleepPop .popup_header p img {height: 26px; margin-top: -2px; margin-right: 5px;}
#sleepPop .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd;}
#sleepPop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
#sleepPop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
#sleepPop .popup_contents .cont {margin-top: 0;}
#sleepPop .popup_contents .cont .label {display: inline-block; width: 35px; height: 35px; line-height: 33px; text-align: center; font-size: 17px; border: 1px solid #ddd; background: #fff;}
#sleepPop .popup_contents .cont .simple_cont {padding: 0 20px; height: 50px; line-height: 50px; font-size: 17px;}
#sleepPop .popup_contents .cont .simple_cont p {width: 50%;}
#sleepPop .popup_contents .cont .simple_cont p.fl_right {text-align: right;}
#sleepPop .popup_contents .cont .simple_cont p span {display: inline-block; vertical-align: middle; margin-left: 5px;}
#sleepPop .popup_contents .cont .simple_cont p .label_round {height: 25px; padding: 0 7px; line-height: 25px; font-size: 14px; color: #fff; background: #dd2226; border-radius: 50px;}
#sleepPop .popup_contents .cont .total_cont {padding: 15px 20px; background: #eee;}

/* 서비스 팝업 */
#servicePop { font-family: "Poppins", "Noto Sans KR", sans-serif; }
#servicePop .service_title { position: relative; }
#servicePop .service_title:before { position: absolute; top: 50%; left: 0; display: block; width: 17px; height: 28px; margin-top: -14px; content: ""; background: url(/images/main/ic_circle_rest2.png) no-repeat center; }
#servicePop .popup_inner { width: 100%; max-width: 500px; margin: 50px auto; }
#servicePop .popup_header { background-color: #1E4297; }
#servicePop .service_item { height: 540px; overflow-y: scroll; } /* 전소현 수정 */
.height-auto {  height: auto !important; }
#servicePop .service_item::-webkit-scrollbar { width: 7px; height: 7px; }
#servicePop .service_item::-webkit-scrollbar-thumb {border-radius: 0;background-color: #1E4297;}
#servicePop .service_item::-webkit-scrollbar-thumb:hover { background-color: #1E4297; }
#servicePop .service_item::-webkit-scrollbar-track { background-color: #fff; }
#servicePop .road_box_facility {/* border: 1px solid #e5e9f0; border-radius: 10px;*/ padding: 10px;} /* 전소현 수정 */
#servicePop .road_box_store {/* border: 1px solid #e5e9f0; border-radius: 10px;*/ padding: 10px;} /* 전소현 수정 */
#servicePop .info_ic { font-size: 15px; position: relative; /*margin-bottom: 10px;*/ width: 50%; } /* 전소현 수정 */
#servicePop .info_ic:before { position: absolute; top: 8px; left: 0; display: block; content: ""; }
#servicePop .info_ic:last-child { margin-bottom: 0; }
#servicePop .info_ic.nonrest { font-size: 15px; position: relative; margin-bottom: 0px; }
#servicePop .info_ic.ic_type1 { padding: 12px 0px 10px 50px; font-size: 16px;} /* 전소현 수정 */
#servicePop .info_ic.ic_type1:before { width: 35px; height: 35px; /*margin-top: -10px;*/ background-image: url('/images/main/new/ic_type1.png'); background-repeat: no-repeat;background-size: contain; }/* 전소현 수정 */
/* #servicePop .info_ic.ic_type2 { padding-left: 35px; }
#servicePop .info_ic.ic_type2:before { width: 20px; height: 20px; margin-top: -10px; background-image: url(../images/common/ic_rest2.gif); }
#servicePop .info_ic.ic_type3 { padding-left: 20px; }
#servicePop .info_ic.ic_type3:before { width: 12px; height: 12px; margin-top: -6px; background-image: url(../images/common/ic_parking2.gif); } *//* 전소현 수정 */

/* 전소현 수정 */
/* #servicePop .road_list_wrap {display: flex;background-color: #D4E3F4;}
#servicePop .road_list_wrap>div {width: 33.33%;text-align: center;font-size: 16px;padding: 10px 10px 10px 15px;border-bottom: 1px solid #1E4297;position: relative;}
#servicePop .road_list_wrap>div:nth-child(1) {background: #fff;border: none;color: #1E4297;font-weight: bold;}
#servicePop .road_list_wrap>div:nth-child(1)::after {display: block;content: '';width: 30px;height: 48px;position: absolute;background-image: url('/images/main/new/road_info_0.png');background-repeat: no-repeat;right: -29px;top: -1px;}
#servicePop .road_list_wrap>div:nth-child(2)::after {display: block;content: '';width: 30px;height: 48px;position: absolute;background-image: url('/images/main/new/road_info_00.png');background-repeat: no-repeat;right: -29px;top: -1px;}
#servicePop .road_info { display: flex; margin-bottom: 10px; justify-content: space-between;padding: 20px;}
 */
#servicePop .road_list_wrap {display: flex;background-color: #D4E3F4;}
#servicePop .road_list_wrap>div {width: 33.33%;height: 60px; text-align: center;font-size: 16px;padding: 10px 10px 10px 15px;border-bottom: 1px solid #1E4297;position: relative;line-height: 22px;}
#servicePop .road_list_wrap>div:nth-child(1) {background: #fff;border: none;color: #1E4297;font-weight: bold;line-height: 40px;}
#servicePop .road_list_wrap>div:nth-child(1)::after {display: block;content: '';width: 31px;height: 61px;position: absolute;background-image: url('/images/main/new/road_info_0.png');background-repeat: no-repeat;right: -29px;top: -1px;background-size: contain;background-repeat: no-repeat;}
#servicePop .road_list_wrap>div:nth-child(2)::after {display: block;content: '';width: 31px;height: 61px;position: absolute;background-image: url('/images/main/new/road_info_00.png');background-repeat: no-repeat;right: -29px;top: -1px;background-size: contain;background-repeat: no-repeat;}
#servicePop .road_info { display: flex; /*margin-bottom: 10px;*/ justify-content: space-between;padding: 20px;}

/* #servicePop .road_info .ic_mark { font-weight: 500; line-height: 40px; width: 35px; height: 35px; } *//* 전소현 수정 */
/* #servicePop .road_info .road_name { font-size: 18px; font-weight: 500; color: #222; } *//* 전소현 수정 */
/* #servicePop .road_info .road_type { font-size: 16px; font-weight: 500; color: #555; } *//* 전소현 수정 */
#restNameWrap .road_name_wrap .road_name_01 {font-size: 20px; font-weight: bold; color: #222;}
#restNameWrap .road_name_wrap .road_name_02 .ic_mark {font-weight: 500; line-height: 33px; width: 28px; height: 28px;margin-right: 3px;}
#restNameWrap .road_name_wrap .road_name_02>span {font-size: 16px; font-weight: 500; color: #222;}
#restNameWrap .road_name_wrap .road_name_03 {font-size: 13px;display: flex; align-items: center;/* margin-left: 7px; */gap: 8px;}
#restNameWrap .road_name_wrap .road_name_03>i {display: inline-block; width: 20px;height: 20px;background-size: contain; background-repeat: no-repeat; background-image: url('/images/main/new/pin.png');}
#restNameWrap .road_name_wrap .road_name_04 {font-size: 14px; background-color: #2A75CA;display: inline-block;padding: 5px 20px;border-radius: 50px;color: #fff;}
#restNameWrap .road_name_wrap .road_info .road_tel {margin-top: 5px; margin-left: -90px;}
#servicePop .road_info .tel_title { font-size: 14px; font-weight: 500; position: relative; padding-left: 35px; margin-top: 25px;}
#servicePop .road_info .tel_title:before { position: absolute; top: 50%; left: 0; display: block; width: 30px; height: 30px; margin-top: -15px; content: ""; border-radius: 100%; background-image: url('/images/main/new/phone.png'); background-color: #29B91D; background-repeat: no-repeat;background-position: center; }
#servicePop .road_info .tel_num { font-size: 16px; }
#servicePop .road_info_menu {position: relative; cursor: pointer; width: 100%; border-top: 1px solid #ddd; border-bottom: 10px solid #ddd;display: flex;padding: 10px 20px;align-items: center;}
#servicePop .road_info_menu > i {display: inline-block; width: 30px;height: 30px; background-size: contain;background-repeat: no-repeat;}
#servicePop .road_info_menu > i:first-child {background-image: url('/images/main/new/icon_shelter_new2.png');}
#servicePop .road_info_menu > i:last-child {width: 25px;height: 25px; background-image: url('/images/main/new/road_info_menu_2.png');position: absolute;right: 10px;}
#servicePop .road_info_menu > span { font-size: 18px; margin-left: 15px;}

#servicePop .road_info2 { display: flex; /* margin-bottom: 20px;  padding: 20px 0; */flex-direction: column;} /* 전소현 수정 */
#servicePop .road_info2 .road_info_item {border: 1px solid #1E4297; position: relative; display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; padding: 10px 20px; justify-content:left; align-items: center; } /* 전소현 수정 */
#servicePop .road_info2 .road_info_item_title {width: 100%; background-color: #1E4297;font-size: 18px;font-weight: bold;color: #fff;padding: 5px 20px;}
#servicePop .road_info2 .road_info_item3 { border: 1px solid #1E4297;display: flex;flex-direction: row; flex-wrap: wrap;}
#servicePop .road_info2 .road_info_item3 .ic_item1 {margin: 20px 9px; padding-top: 60px; width: 60px; text-align: center;line-height: 18px;}
#servicePop .road_info2 .road_info_item3 .ic_item1 .restFacility_img {width: 50px;height: 50px;border: 1px solid #555; background-image: url(/images/main/new/ic_item1.png);background-repeat: no-repeat;background-size: 80%;background-position: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}

/* #servicePop .road_info2 .road_info_item:before { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 1px; content: ""; background-color: #e5e9f0; } */
#servicePop .road_info2 .road_info_item:nth-child(2n+2):before { display: none; }
/* 220808 이다인 주차공간  */
#servicePop .road_info2 .road_info_item2 { position: relative; display: flex; flex-direction: column; padding: 0 20px; justify-content: center; flex:0 0 auto; }
#servicePop .road_info2 .road_info_item2:before { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 1px; content: ""; background-color: #e5e9f0; }
#servicePop .road_info2 .road_info_item2:nth-child(2n+2):before { display: none; }
#servicePop .road_info2 .road_info_item2 .parking_info { display: flex; flex-direction: column; align-items: center; }
/* 220808 이다인 주차공간-여유 */
/* #servicePop .road_info2 .parking_state { font-size: 14px; font-weight: 500; line-height: 30px; display: inline-block; min-width: 65px; height: 30px; margin-left: 5px; padding: 0 5px; text-align: center; color: #fff; border-radius: 5px; } */
#servicePop .road_info2 .parking_state { font-size: 16px; font-weight: 500; line-height: 30px; display: inline-block; min-width: 80px; height: 30px; margin: 5px 5px 0 0; padding: 0 5px; text-align: center; color: #fff; border-radius: 5px; }
#servicePop .road_info2 .parking_state.state1 { background-color: #09c23a; }

#servicePop .road_info2 .parking_state.state2 { background-color: #fa9c0d; }
#servicePop .road_info2 .parking_state.state3 { background-color: #ec2929; }
#servicePop .gas_station {padding: 10px;} /*2023-09-04 반응형 및 수정 요청*/
#servicePop .gas_station_info { display: flex; padding: 10px; justify-content: space-between; align-items: center; background-color: #0EAAEC;}/*전소현 수정*/
#servicePop .gas_station_info .gas_station_name { color: #fff; font-size: 18px; font-weight: 500; position: relative; padding-left: 5px; }/* 전소현 수정*/
/* #servicePop .gas_station_info .gas_station_name:before { position: absolute; top: 50%; left: 0; display: block; width: 80px; height: 30px; margin-top: -15px; content: ""; background: url('/images/main/new/ic_gasstation.png') no-repeat left center / contain; } *//* 전소현 수정*/
#servicePop .gas_station_info .tel_title { font-size: 14px; font-weight: 500; position: relative; padding-left: 37px; color: #fff;}/* 전소현 수정*/
#servicePop .gas_station_info .tel_num2 {color: #fff;}/*전소현 수정*/
#servicePop .gas_station_info .tel_title:before {position: absolute;top: 50%;left: 0;display: block;width: 30px;height: 30px;margin-top: -15px;content: "";border-radius: 100%;background-image: url(/images/main/new/phone.png);background-color: #29B91D;background-repeat: no-repeat;background-position: center;}/* 전소현 수정*/
#servicePop .gas_station_info .tel_num { font-size: 16px; }
#servicePop .gas_station_info2 {position: relative; padding: 0 10px 30px; border: 1px solid #0EAAEC; display: flex;}/*전소현 수정*/
#servicePop .gas_station_info2 .gas_price_info {margin-right: 10px; display: flex; /* margin: -5px 0;  */height: 196px;  padding: 15px 0; flex-wrap: wrap; width: 50%; align-items: center; }/*전소현 수정*/
#servicePop .gas_station_info2 .gas_price_info > li { width: 50%; padding: 5px 10px; }
#servicePop .gas_station_info2 .gas_price_info .gas_price_item { position: relative; display: flex; flex-direction: column; align-items: center;gap: 10px;}/*전소현 수정*/
#servicePop .gas_station_info2 .gas_price_info .gas_name {font-weight: bold; position: relative; font-size: 15px; padding-right: 10px; background: #fff; padding-left: 8px; }
/* #servicePop .gas_station_info2 .gas_price_info .gas_name:before { position: absolute; z-index: -1; top: 50%; right: 60px; left: 0; display: block; content: ""; border-bottom: 1px dashed #ddd; } */
/* #servicePop .gas_station_info2 .gas_price_info .gas_name:after { content:""; display: block; position:absolute; left: 0; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; border-radius: 100%; background-color: #222; } *//*전소현 수정*/
/* #servicePop .gas_station_info2 .gas_price_info .gas_price:before { position: relative; z-index: -1; top: 50%; right: 60px; left: 0; display: block; content: ""; border-bottom: 1px dashed #ddd; } *//*전소현 수정*/
#servicePop .gas_station_info2 .gas_price_info .gas_price { font-size: 15px; font-weight: bold; position: relative; color: #3673ee; }
#servicePop .gas_station_info2 .gas_station_location {width: 50%;}/*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list { display: flex; padding: 15px 0; flex-direction: column; }/*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list > li { cursor: pointer; /*width: 50%;*/ padding: 15px;  font-size: 13px; border-radius: 5px; border: 1px solid #ddd;display: flex;justify-content: space-between;align-items: center;}/*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list > li:first-child {margin-bottom: 10px;}
/* #servicePop .gas_station_info2 .gas_station_location_list .view { font-size: 13px; font-weight: 500; line-height: 27px; display: inline-block; min-width: 80px; height: 27px; margin-left: 5px; padding: 0 5px; text-align: center; color: #222; border-radius: 100px; background-color: #f6f6f6; } *//*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list .gas_station_ic { background-image: url(/images/main/new/gas_station_ic.png);display: block; width: 30px;height: 30px;background-size: contain;background-repeat: no-repeat; }/*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list .gas_station_ic2 { background-image: url(/images/main/new/gas_station_ic2.png);display: block; width: 30px;height: 30px;background-size: contain;background-repeat: no-repeat; }/*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list .gas_station_name { position: relative; font-size: 15px; background: #fff; text-align: center;display: block; }/*전소현 수정*/
#servicePop .gas_station_info2 .gas_station_location_list a {display: block; width: 20px; height: 20px;background-size: contain; background-repeat: no-repeat; background-image: url(/images/main/new/road_info_menu_2.png); }/*전소현 수정*/
/* #servicePop .gas_station_info2 .gas_station_location_list .gas_station_name:after {content:""; display: block; position:absolute; left: 0; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; border-radius: 100%; background-color: #222; } */ /*전소현 수정*/
#servicePop .gas_station_info2 .no_data { border-top: 0px; }
#servicePop .gas_station_info2 .source{ width:400px; height:20px; padding: 10px 0 0 10px;  font-size: 15px; background: #fff;}
#servicePop .warning { font-size: 15px; position: absolute; right: 10px;bottom: 0px;}/*전소현수정*/
#servicePop .warning2 { font-size: 15px; position: absolute; right: 10px;bottom: 20px;}/*전소현수정*/
.emergency_box { position: relative; display: flex; margin: 20px 10px; border: 2px solid #EF1919; border-radius: 10px; align-items: center;} /*전소현수정*/
.emergency_box:before { position: absolute; top: -25px;  /* top: 25%; */  right: 0; display: block; width: 90px; height: 81px; content: ""; background: url('/images/main/new/ic_character.png') no-repeat center;background-size: contain; }/*전소현 수정*/
.emergency_box .emergency_title_area { width: 100px; text-align: center; flex: 0 0 auto; background-color: #EF1919;border-radius: 5px 0 0 5px;padding: 10px 0; }/*전소현 수정*/
.emergency_box .emergency_title { font-size: 16px; font-weight: 500; position: relative; color: #fff; }/*전소현 수정*/
/* #servicePop .emergency_box .emergency_title:before { position: absolute; top: 50%; left: 0; display: block; width: 30px; height: 37px; margin-top: -18.5px; content: ""; background: url(../images/common/ic_emergency.gif) no-repeat left center; } *//*전소현 수정*/
.emergency_box .emergency_desc { font-size: 15px; width: 100%; padding-right: 90px; margin-left: 10PX;}/*전소현 수정*/
#servicePop .opinet_img { text-align: left;  margin-bottom: 10px; margin-top: -15px;}

/* 서비스 팝업 */
#sleepPop .popup_inner {width: 400px;}/*전소현 수정*/
#sleepPop .popup_header p img {height: 26px; margin-top: -2px; margin-right: 5px;}
#sleepPop .popup_contents .road_name {height: 50px; padding: 0 20px; line-height: 50px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd;}
#sleepPop .popup_contents .road_name .ic_mark {width: 27px; height: 27px; font-size: 13px; line-height: 30px; margin-right: 5px;}
#sleepPop .popup_contents .road_name strong {font-size: 18px; font-weight: 500;}
#sleepPop .popup_contents .road_name_wrap {padding: 20px;border-bottom: 10px solid #ddd;}/*전소현 수정*/
#sleepPop .popup_contents .road_name_wrap>div {margin-bottom: 10px;}/*전소현 수정*/
#sleepPop .popup_contents .road_name_wrap>div:last-child {margin-bottom: 0px;}/*전소현 수정*/
#sleepPop .popup_contents .cont {margin-top: 0; height: 400px; overflow: auto; }
#sleepPop .popup_contents .cont::-webkit-scrollbar { width: 7px; height: 7px; }
#sleepPop .popup_contents .cont::-webkit-scrollbar-thumb {border-radius: 0;background-color: #198DEF;}
#sleepPop .popup_contents .cont::-webkit-scrollbar-thumb:hover { background-color: #3673ee; }
#sleepPop .popup_contents .cont::-webkit-scrollbar-track { background-color: #ccc; }
#sleepPop .popup_contents .cont .label {display: inline-block; width: 35px; height: 35px; line-height: 33px; text-align: center; font-size: 17px; border: 1px solid #ddd; background: #fff;}
#sleepPop .popup_contents .cont .simple_cont {padding: 0 20px; height: 50px; line-height: 50px; font-size: 17px;}
#sleepPop .popup_contents .cont .simple_cont p {width: 50%;}
#sleepPop .popup_contents .cont .simple_cont p.fl_right {text-align: right;}
#sleepPop .popup_contents .cont .simple_cont p span {display: inline-block; vertical-align: middle; margin-left: 5px;}
#sleepPop .popup_contents .cont .simple_cont p .label_round {height: 25px; padding: 0 7px; line-height: 25px; font-size: 14px; color: #fff; background: #dd2226; border-radius: 50px;}
#sleepPop .popup_contents .cont .total_cont {padding: 15px 20px; background: #eee;}

/* 메뉴정보 팝업 - 전소현 수정 */
#menuPopup .road_name_wrap {padding: 20px; border-bottom: 10px solid #ddd;}
/* #menuPopup .popup_contents .road_name_wrap>div {margin-bottom: 10px;}전소현 수정 */
#menuPopup .popup_contents .road_name_wrap .road_name_01 {font-size: 20px; font-weight: bold; color: #222; margin-bottom: 10px;}
#menuPopup .popup_contents .road_name_wrap .road_name_03 {font-size: 13px;display: flex; align-items: center;margin-left: 7px;gap: 8px;}
#menuPopup .popup_contents .road_name_wrap .road_name_03>i {display: inline-block; width: 20px;height: 20px;background-size: contain; background-repeat: no-repeat; background-image: url('/images/main/new/pin.png');}
#menuPopup .popup_contents .road_name_wrap>div:last-child {margin-bottom: 0px;}/*전소현 수정*/
#menuPopup .popup_inner {width: 400px; bottom: 50px}
#menuPopup .popup_inner .popup_header {background-color: #1E4297;}
#menuPopup .popup_contents {height: auto;}
#menuPopup .popup_contents .cont {height: 530px;overflow-y: scroll;}
#menuPopup .popup_contents .cont::-webkit-scrollbar { width: 7px; height: 7px; }
#menuPopup .popup_contents .cont::-webkit-scrollbar-thumb {border-radius: 0;background-color: #1E4297;}
#menuPopup .popup_contents .cont::-webkit-scrollbar-thumb:hover { background-color: #7facdd; }
#menuPopup .popup_contents .cont::-webkit-scrollbar-track { background-color: #ffff; }


/************************************************************************************
Contents st.
*************************************************************************************/
html {min-width: 320px;}

.inner {width: 1024px; margin: 0 auto;}
.contents {}
.sub_contents {position: relative; width: 1366px; margin: 0 auto;}


/* shortcut */
.shortcut { position : fixed; top : 0; left : 0; width : 100%; overflow : hidden; z-index : 20 }
.shortcut a { display : block; height : 0; line-height : 0; text-align : center; background : #284ca0; color : #fff; font-size : 16px }


/* left menu */
.lnb_wrap {position: absolute; left: 0; top: 0; bottom: 0; width: 270px; height: 100%;}
.lnb_wrap .left_title {width: 100%; height: 130px; line-height: 130px; text-align: center; font-size: 20px; color: #fff; border-bottom: 1px solid #ddd; background: url('/images/common/bg_left_title.png') center center no-repeat;}

.lnb_wrap .left_menu li a {display: block; height: 60px; padding: 17px 20px; line-height: 24px; font-size: 16px; text-align: center; border-bottom: 1px solid #ddd; background: #fff;}
.lnb_wrap .left_menu li:hover a,
.lnb_wrap .left_menu li.active a {color: #fff; border-color: #3673ee; background: #3673ee;}


/* right contents */
.right_cont {float: right; width: 800px; min-height: 650px; margin-right: 85px; padding: 45px 0 100px;}
.cont {margin-top: 25px;}

/* Title */
.title_wrap {position: relative;}
.title_wrap .page_title {position: relative; margin-bottom: 15px; padding-bottom: 15px; font-size: 30px; font-weight: 400;}
.title_wrap .page_title:after {position: absolute; left: 0; bottom: 0; content: ""; width: 20px; height: 2px; background: #222;}

.title_wrap .page_title_text {font-size: 14px; -ms-word-break: keep-all; word-break: keep-all;}

.title_wrap .page_root {position: absolute; right: 0; top: 10px;}
.title_wrap .page_root a {position: relative; padding-left: 15px; font-size: 14px; color: #999;}
.title_wrap .page_root a:before {position: absolute; left: 5px; top: 50%; width: 4px; height: 7px; margin-top: -3.5px; content: ""; background: url('/images/common/ic_root_arrow.png') center center no-repeat;}
.title_wrap .page_root a:first-child:before {display: none;}


/* Search */
.search_wrap {position: relative;}
.search_wrap>* {display: inline-block; vertical-align: top; margin-right: 1px; font-size: 15px;}
.search_wrap select {width: 105px; border: 1px solid #ddd; background-size: 12px !important;}
.search_wrap input[type='text'] {width: 230px; padding-right: 50px;}
.search_wrap .btn {width: 90px;}
.search_wrap .btn_search {position: absolute; right: 0; top: 0; bottom: 0; width: 40px; height: 40px; background: url('/images/common/ic_search.png') center center no-repeat; border: 0;}


/* Tab */
.tab_wrap {}


/* Sort */
.sort_wrap>* {display: inline-block;}


/* Board */
.board_option {margin: 30px 0 10px;}

.board_list {margin-top: 30px;}
.board_list table {width: 100%; border-top: 1px solid #3673ee; border-bottom: 1px solid #ddd; table-layout: fixed;}
.board_list table th {height: 50px; font-weight: 500; text-align: center; font-size: 16px; color: #3673ee; border-bottom: 1px solid #ddd; background: #f9f9f9;}
.board_list table td {height: 50px; font-size: 14px; text-align: center; font-weight: 300; color: #444; border-bottom: 1px solid #ddd;}
.board_list table td.subject {text-align: left; padding: 0 10px 0 20px;}
.board_list table td a {display: inline-block; max-width: 100%; height: 50px; line-height: 50px; font-weight: 400; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; vertical-align: middle;}
.board_list .search_wrap {margin-top: 30px;}

.board_view .view_title {padding: 20px 0 0 0; font-size: 20px; line-height: 26px; border-top: 1px solid #3673ee; background: #fff;}
.board_view .view_info {padding: 10px 0; border-bottom: 1px solid #ddd; background: #fff;}
.board_view .view_info p {display: inline-block;}
.board_view .view_info p span {display: inline-block; height: 13px; padding: 0 10px; line-height: 13px; font-size: 13px; color: #888; border-right: 1px solid #ddd;}
.board_view .view_info p span:last-child {border-right: 0;}
.board_view .view_info dl dt {padding-right: 15px;}
.board_view .view_info dl dd {color: #666;}
.board_view .view_contents {min-height: 250px; padding: 20px; font-size: 14px; line-height: 26px; border-bottom: 1px solid #ddd;}
.board_view .view_contents img {max-width: 100%; margin: 10px 0;}
.board_view .view_file {position: relative; border-bottom: 1px solid #ddd;}
.board_view .view_file dl {display: table; width: 100%;}
.board_view .view_file dl dt {display: table-cell; width: 95px; height: 50px; text-align: center; font-size: 14px; font-weight: 500; vertical-align: middle; border-right: 1px solid #ddd;}
.board_view .view_file dl dd {display: table-cell; vertical-align: middle; padding: 10px 20px;}
.board_view .view_file dl dd a {display: block; position: relative; padding-left: 15px; font-size: 13px;}
.board_view .view_file dl dd a:before {position: absolute; left: 0; top: 0; bottom: 0; content: ""; width: 10px; background: url('/images/common/ic_file.png') center center no-repeat;}

.board_write {margin-top: 30px;}
.board_write table {width: 100%; border-top: 1px solid #222; border-bottom: 1px solid #ddd; table-layout: fixed;}
.board_write th {height: 50px; padding: 5px 20px; text-align: left; font-weight: 400; font-weight: 400; font-size: 15px; color: #555; border-bottom: 1px solid #ddd;}
.board_write td {height: 50px; padding: 5px 20px; font-size: 15px; font-weight: 300; color: #555; border-bottom: 1px solid #ddd;}
.board_write td select {width: 100%;}
.board_write td textarea {width: calc(100% - 22px); height: 150px;}
.board_write td input[type='text'] {width: calc(100% - 32px);}

.comments_wrap {margin: 50px 0 0; border-top: 1px solid #222;}
.comments_wrap .title {padding: 15px 0; font-size: 14px; font-weight: 600;}
.comments_wrap .write_com textarea {width: calc(100% - 117px); height: 50px; padding: 10px;}
.comments_wrap .write_com .btn_gray {width: 95px; height: 72px; font-size: 14px;}
.comments_wrap .list_com {margin: 10px 0 30px;}
.comments_wrap .list_com li {position: relative; padding: 10px 0; border-bottom: 1px solid #ddd;}
.comments_wrap .list_com li:last-child {border-bottom: 1px solid #ddd;}
.comments_wrap .list_com dt {margin-bottom: 10px; font-size: 15px;}
.comments_wrap .list_com dt .date {padding-left: 10px; font-size: 12px; color: #999;}
.comments_wrap .list_com dd {font-size: 14px; line-height: 16px;}
.comments_wrap .list_com li>.btn {position: absolute; right: 10px; top: 10px; min-width: 0; width: auto; height: auto; padding: 0; font-size: 12px; line-height: normal; color: #666; background: none; border: 0;}
.comments_wrap .list_com li>.btn.btn_delete {min-width: 12px; height: 12px; background: #fff url('/images/common/ic_delete.png') center center no-repeat; border: 0; text-indent: -9999px; background-size: 12px;}
.comments_wrap .list_com li.re_com {padding: 10px 0 10px 30px;}
.comments_wrap .list_com li.re_com:after {position: absolute; left: 5px; top: 10px; content: "└"; font-size: 19px; font-weight: 600;}


/* Form */
.form_write {margin-top: 30px;}

.form_write ul {border-top: 1px solid #222;}
.form_write ul li {width: 100%; border-bottom: 1px solid #ddd;}
.form_write ul li:after {display: block; visibility: hidden; clear: both; content: "";}
.form_write ul li dl {display: table; float: left; min-height: 62px;}
.form_write ul li.column1 dl {width: 100%;}
.form_write ul li.column2 dl {width: 50%;}
.form_write ul li dl>* {display: table-cell; vertical-align: middle; padding: 10px 20px}
.form_write ul li dl dt {width: 150px; font-size: 15px;}
.form_write ul li dl dd {width: calc(100% - 150px); font-size: 14px;}
.form_write ul li dl dd select {width: 100%;}
.form_write ul li dl dd select.type1 {width: 130px;}
.form_write ul li dl dd textarea {width: calc(100% - 22px); height: 100px;}
.form_write ul li dl dd input[type='text'] {width: calc(100% - 32px);}
.form_write ul li dl dd input[type='text'].type1 {width: 100%;}
.form_write ul li dl dd input[type='text'].type2 {width: 100%;}
.form_write ul li dl dd input[type='text'].type3 {width: 100%;}
.form_write ul li dl dd input[type='text'].type4 {width: 100%;}
.form_write ul li dl dd input[type='text'].type5 {width: 100%;}

.form_view ul li dl dd {color: #999;}


/* Paging */
.paging {margin-top: 30px; text-align: center; font-size: 0;}
.paging a {display: inline-block; vertical-align: top; width: 30px; height: 30px; margin: 0 2px; line-height: 28px; font-size: 14px; color: #999; border: 1px solid #e2e2e2; background: #fff;}
.paging a.active {color: #333; border-color: #333;}
.paging a.btn_prev {background: url('/images/common/ic_arrow_prev.png') center center no-repeat; text-indent: -9999px; margin: 0; margin-right: 5px;}
.paging a.btn_prev_db {background: url('/images/common/ic_arrow_prev_db.png') center center no-repeat; text-indent: -9999px; margin: 0; border-right: 0;}
.paging a.btn_next {background: url('/images/common/ic_arrow_next.png') center center no-repeat; text-indent: -9999px; margin: 0; margin-left: 5px; border-right: 0;}
.paging a.btn_next_db {background: url('/images/common/ic_arrow_next_db.png') center center no-repeat; text-indent: -9999px; margin: 0;}


/* 교통예보 - 주요 도시간 예상 소요시간 */
.predict {}

.box_tab {display: table; background: #eee;}
.box_tab li {display: table-cell; height: 60px; text-align: center; vertical-align: middle; background: #F3F7FE; transition: all.2s ease;}
.box_tab li a {position: relative; display: block; font-size: 16px; font-weight: 600; color: #3673EE;}
.box_tab li a:after {position: absolute; right: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: #ccc; content: "";}
.box_tab li:last-child a:after {display: none;}
.box_tab li:hover,
.box_tab li.active {background: #3673EE;}
.box_tab li:hover a,
.box_tab li.active a {color: #fff;}
.box_tab li:hover a:after,
.box_tab li.active a:after {display: none;}


.round_tab {font-size: 0;}
.round_tab li {display: inline-block; width: 50%;}
.round_tab li a {display: block;width: 60px;height: 60px;background-repeat: no-repeat;background-size: contain;}
.round_tab li:nth-child(odd) a {background-image: url(/images/forecast/new/timeType_01_off.png);}
.round_tab li:nth-child(even) a {background-image: url(/images/forecast/new/timeType_02_off.png);}
.round_tab li:hover:nth-child(odd) a,
.round_tab li.active:nth-child(odd) a {background-image: url(/images/forecast/new/timeType_01_on.png);}
.round_tab li:hover:nth-child(even) a,
.round_tab li.active:nth-child(even) a {background-image: url(/images/forecast/new/timeType_02_on.png);}

.predict .map_option {margin-bottom: 20px;}
.predict .box_tab {width: 390px;}
.predict .round_tab {width: 125px;}
.predict .round_tab.fl_right li a {text-indent: -9999px;}
.predict.cont>p {font-size: 18px;}
.predict form>p.predict_ic {position: relative;padding-left: 25px;}
.predict form>p.predict_ic::before {content: '';display: block;width: 20px;height: 18px;background-image: url(/images/forecast/new/predict_p.png);background-repeat: no-repeat;background-size: contain;position: absolute;top: 3px;left: 0;}


/*20230918 전소현 수정*/
.predict .map_wrap {position: relative; width: 720px; height: 939px; margin: 0 auto 20px; background-image: url('/images/forecast/new/new_img_map1.png');background-size: contain;background-repeat: no-repeat;}
.predict .map_wrap .time_box:after {display: block; visibility: hidden; clear: both; content: "";}
.predict .map_wrap .time_box {position: absolute; width: 224px;}
.predict .map_wrap .time_box dl {float: left; width: 50%; padding: 10px; text-align: center; letter-spacing: -0.5px;}
.predict .map_wrap .time_box dl:first-child {}
.predict .map_wrap .time_box dl dt {margin-bottom: 5px; font-size: 15px; color: #666; font-weight: 500; line-height: 17px;}
.predict .map_wrap .time_box dl dt>* {display: inline-block; vertical-align: middle;}
.predict .map_wrap .time_box dl dd {font-size: 26px; font-weight: 500; line-height: 32px;}
.predict .map_wrap .yangyang {top: 120px; right: 84px;}
.predict .map_wrap .gangneung {top: 276px; right: 154px;}
.predict .map_wrap .daejeon {top: 390px; left: 34px;}
.predict .map_wrap .daegu {top: 442px; right: 154px;}
.predict .map_wrap .gwangju {bottom: 282px; left: 36px;}
.predict .map_wrap .ulsan {bottom: 362px; right: 50px;}
.predict .map_wrap .busan {bottom: 146px; right: 154px;}
.predict .map_wrap .mokpo {bottom: 72px; left: 34px;}



/* 수정이미지 적용 css */
.predict .map_wrap_2 {position: relative; width: 720px; height: 939px; margin: 0 auto 20px; background: url('/images/forecast/new/new_img_map3.png');background-size: contain;background-repeat: no-repeat;}
.predict .map_wrap_2 .time_box:after {display: block; visibility: hidden; clear: both; content: "";}
.predict .map_wrap_2 .time_box {position: absolute; width: 224px;}
.predict .map_wrap_2 .time_box dl {float: left; width: 50%; padding: 10px; text-align: center; letter-spacing: -0.5px;}
.predict .map_wrap_2 .time_box dl:first-child {}
.predict .map_wrap_2 .time_box dl dt {margin-bottom: 5px; font-size: 15px; color: #666; font-weight: 500; line-height: 17px;}
.predict .map_wrap_2 .time_box dl dt>* {display: inline-block; vertical-align: middle;}
.predict .map_wrap_2 .time_box dl dd {font-size: 26px; font-weight: 500; line-height: 32px;}
.predict .map_wrap_2 .yangyang {top: 120px; right: 84px;}
.predict .map_wrap_2 .gangneung {top: 276px; right: 154px;}
.predict .map_wrap_2 .daejeon {top: 390px; left: 34px;}
.predict .map_wrap_2 .daegu {top: 442px; right: 154px;}
.predict .map_wrap_2 .gwangju {bottom: 282px; left: 36px;}
.predict .map_wrap_2 .ulsan {bottom: 362px; right: 50px;}
.predict .map_wrap_2 .busan {bottom: 146px; right: 154px;}
.predict .map_wrap_2 .mokpo {bottom: 72px; left: 34px;}

/* 주요도시간 소요시간 대전권 자가용, 버스 이미지 추가 */
.predict .map_wrap_3 {position: relative; width: 720px; height: 939px; margin: 0 auto 20px; background: url('/images/forecast/new/new_img_djmap1.png');background-size: contain;background-repeat: no-repeat;}
.predict .map_wrap_3 .time_box:after {display: block; visibility: hidden; clear: both; content: "";}
.predict .map_wrap_3 .time_box {position: absolute; width: 224px;}
.predict .map_wrap_3 .time_box dl {float: left; width: 50%; padding: 10px; text-align: center; letter-spacing: -0.5px;}
.predict .map_wrap_3 .time_box dl:first-child {}
.predict .map_wrap_3 .time_box dl dt {margin-bottom: 5px; font-size: 15px; color: #666; font-weight: 500; line-height: 17px;}
.predict .map_wrap_3 .time_box dl dt>* {display: inline-block; vertical-align: middle;}
.predict .map_wrap_3 .time_box dl dd {font-size: 26px; font-weight: 500; line-height: 32px;}
.predict .map_wrap_3 .yangyang {top: 95px; right: 135px; display: block !important;}
.predict .map_wrap_3 .gangneung {top: 323px; right: 114px;}
.predict .map_wrap_3 .daejeon {top: 390px; left: 34px;}
.predict .map_wrap_3 .daegu {top: 459px; right: 144px;}
.predict .map_wrap_3 .gwangju {bottom: 266px; left: 20px;}
.predict .map_wrap_3 .ulsan {bottom: 342px; right: 50px;}
.predict .map_wrap_3 .busan {bottom: 139px; right: 162px;}
.predict .map_wrap_3 .mokpo {bottom: 82px; left: 49px;}

.predict .map_wrap_4 {position: relative; width: 720px; height: 939px; margin: 0 auto 20px; background: url('/images/forecast/new/new_img_djmap2.png');background-size: contain;background-repeat: no-repeat;}
.predict .map_wrap_4 .time_box:after {display: block; visibility: hidden; clear: both; content: "";}
.predict .map_wrap_4 .time_box {position: absolute; width: 224px;}
.predict .map_wrap_4 .time_box dl {float: left; width: 50%; padding: 10px; text-align: center; letter-spacing: -0.5px;}
.predict .map_wrap_4 .time_box dl:first-child {}
.predict .map_wrap_4 .time_box dl dt {margin-bottom: 5px; font-size: 15px; color: #666; font-weight: 500; line-height: 17px;}
.predict .map_wrap_4 .time_box dl dt>* {display: inline-block; vertical-align: middle;}
.predict .map_wrap_4 .time_box dl dd {font-size: 26px; font-weight: 500; line-height: 32px;}
.predict .map_wrap_4 .yangyang {top: 120px; right: 84px;}
.predict .map_wrap_4 .gangneung {top: 276px; right: 154px;}
.predict .map_wrap_4 .daejeon {top: 173px; left: 34px;}
.predict .map_wrap_4 .daegu {top: 442px; right: 154px;}
.predict .map_wrap_4 .gwangju {bottom: 282px; left: 36px;}
.predict .map_wrap_4 .ulsan {bottom: 362px; right: 50px;}
.predict .map_wrap_4 .busan {bottom: 146px; right: 154px;}
.predict .map_wrap_4 .mokpo {bottom: 72px; left: 34px;}
/*//20230918 전소현 수정*/

/* 교통예보 - 주말예보 - 주말교통예보 */
.weekend_forecast {}

.weekend_forecast .forecast_img {display: table; width: 100%; min-height: 450px; table-layout: fixed;}
.weekend_forecast .forecast_img>div {display: none; height: auto; padding-bottom: 0; overflow: visible; vertical-align: middle; text-align: center; color: #333; font-size: 20px; font-weight: 500; background: #f9f9f9;}
.weekend_forecast .forecast_img>div.active {display: table-cell;}
.weekend_forecast .forecast_img>div.img_wrap img {width: 100%;}
.weekend_forecast .forecast_img>div.nodata p {margin-top: 40px; font-weight: 400;}
.weekend_forecast .forecast_img>div.nodata p img {margin-top: -5px; padding: 0 10px;}
.weekend_forecast .forecast_img>div.nodata p strong {color: #3673ee; font-size: 26px; font-weight: 500;}


/* 교통예보 - 주말예보 - 주말교통 예보방송 */
.weekend_broadcast {}

.weekend_broadcast .forecast_video {display: table; width: 100%; min-height: 450px; table-layout: fixed;}
.weekend_broadcast .forecast_video>div {display: none; height: auto; padding-bottom: 0; overflow: visible; vertical-align: middle; color: #333; font-size: 20px; font-weight: 500;}
.weekend_broadcast .forecast_video>div.active {display: table-cell;}
.weekend_broadcast .forecast_video>div.video_wrap .video {width: 100%;}
.weekend_broadcast .forecast_video>div.nodata {text-align: center; background: #f9f9f9;}
.weekend_broadcast .forecast_video>div.nodata p {margin-top: 40px; font-weight: 400;}
.weekend_broadcast .forecast_video>div.nodata p img {margin-top: -5px; padding: 0 10px;}
.weekend_broadcast .forecast_video>div.nodata p strong {color: #3673ee; font-size: 26px; font-weight: 500;}


/* 교통예보 - 정체예상 교통지도 */
.stagnation_map {}

.search_box {position: relative; padding: 10px 20px; border: 1px solid #ddd; box-shadow: 0px 4px 0 rgba(242, 242, 242, 0.9);}
.search_box div:after {display: block; visibility: hidden; clear: both; content: "";}
.search_box dl:after {display: block; visibility: hidden; clear: both; content: "";}
.search_box dl {position: relative; float: left; margin: 5px 0; font-size: 0;}
.search_box .col1 dl {width: 100%;}
.search_box .col2 dl:nth-child(1) {width: 40%;}
.search_box .col2 dl:nth-child(2) {width: 60%; padding: 0 13% 0 7%;}
.search_box dl dt {display: inline-block; width: 90px; height: 35px; line-height: 35px; font-size: 16px; vertical-align: top;}
.search_box dl dd {display: inline-block; width: calc(100% - 90px); min-height: 35px; font-size: 14px;}
.search_box dl dd .check_style1 {margin-top: 10px;}
.search_box dl dd input {width: calc(100% - 30px);}
.search_box dl dd input.datepicker {width: calc(100% - 52px);}
.search_box dl dd select {width: 100%;}
.search_box .btn_blue {position: absolute; right: 0; bottom: 0; width: 20%;}
.search_box .reload_wrap {position: absolute; right: 20px; top: 18px; font-size: 14px; color: #888;}
.search_box .reload_wrap .btn_reload {width: 18px; height: 18px; background: url('/images/common/ic_reload.png') center center no-repeat; border: 0; text-indent: -9999px;}

.search_box .date_move {position: relative; padding: 0 35px; text-align: center; border: 1px solid #ddd;}
.search_box .date_move input[type='text'] {width: 100%; padding: 0; color: #999; font-weight: 500; font-size: 14px; border: 0;}
.search_box .date_move input[type='text'].datepicker2 {width: 90px; padding-right: 30px; text-align: right; background-size: 20px;}
.search_box .date_move .btn {position: absolute; top: 0; bottom: 0; width: 33px; height: 33px; padding: 0; text-indent: -9999px; border: 0;}
.search_box .date_move .btn_prev {left: 0; background: url('/images/forecast/ic_arrow_prev.png') center center no-repeat;}
.search_box .date_move .btn_next {right: 0; background: url('/images/forecast/ic_arrow_next.png') center center no-repeat;}

.stagnation_map.cont>p {margin-bottom: 20px; font-size: 18px;}
.stagnation_map .map_wrap {position: relative; width: 100%; margin-top: 20px; border: 1px solid #ddd;}
.stagnation_map .map_wrap .map {width: 100%; height: 790px;}
.stagnation_map .map_wrap .btn_mint_circle {position: absolute; left: 20px; bottom: 20px; display: block; width: 90px; height: 90px; padding: 13px 15px; font-size: 16px; line-height: 20px; color: #fff; background: #35babc; border-radius: 50%; -ms-word-break: keep-all; word-break: keep-all}

/* 교통예보 - 작업정체 예상지도  */
.work_map {}

.work_search_box {position: relative; padding: 10px 20px; border: 1px solid #ddd; box-shadow: 0px 4px 0 rgba(242, 242, 242, 0.9);}
.work_search_box div:after {display: block; visibility: hidden; clear: both; content: "";}
.work_search_box dl:after {display: block; visibility: hidden; clear: both; content: "";}
.work_search_box dl {position: relative; float: left; margin: 5px 0; font-size: 0;}
.work_search_box .col1 dl {width: 100%;}
.work_search_box dl dt {display: inline-block; width: 120px; height: 35px; line-height: 35px; font-size: 16px; vertical-align: top;}
.work_search_box dl dd {display: inline-block; width: calc(50% - 90px); min-height: 35px; font-size: 14px;}
.work_search_box dl dd .check_style1 {margin-top: 10px;}
.work_search_box dl dd input {width: calc(100% - 30px);}
.work_search_box dl dd input.datepicker {width: calc(100% - 52px);}
.work_search_box dl dd select {width: 100%;}
.work_search_box .btn_blue {position: absolute; right: 0; bottom: 0; width: 20%;}
.work_search_box .reload_wrap {position: absolute; right: 20px; top: 18px; font-size: 14px; color: #888;}
.work_search_box .reload_wrap .btn_reload {width: 18px; height: 18px; background: url('/images/common/ic_reload.png') center center no-repeat; border: 0; text-indent: -9999px;}

.work_search_box .date_move {position: relative; text-align: center; border: 1px solid #ddd; width: 36%;}
.work_search_box .date_move input[type='text'] {width: 70%; padding: 0; color: #999; font-weight: 500; font-size: 14px; border: 0;}
/*
.work_search_box .date_move input[type='text'].datepicker2 {width: 90px; padding-right: 30px; text-align: right; background-size: 20px;}
.work_search_box .date_move .btn {position: absolute; top: 0; bottom: 0; width: 33px; height: 33px; padding: 0; text-indent: -9999px; border: 0;}
.work_search_box .date_move .btn_prev {left: 0; background: url('/images/forecast/ic_arrow_prev.png') center center no-repeat;}
.work_search_box .date_move .btn_next {right: 0; background: url('/images/forecast/ic_arrow_next.png') center center no-repeat;}
*/
.work_map.cont>p {margin-bottom: 20px; font-size: 18px;}
.work_map .map_wrap {position: relative; width: 100%; margin-top: 20px; border: 1px solid #ddd;}
.work_map .map_wrap .map {width: 100%; height: 790px;}
.work_map .map_wrap .btn_mint_circle {position: absolute; left: 20px; bottom: 20px; display: block; width: 90px; height: 90px; padding: 13px 15px; font-size: 16px; line-height: 20px; color: #fff; background: #35babc; border-radius: 50%; -ms-word-break: keep-all; word-break: keep-all}
/*.workPop .popup_bg {position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1;}*/

.work_map .work_etc {font-size: 16px; }

/* 교통예보 - 정체예상 교통지도 */
.tollgate {}

.tollgate.cont>p {margin-bottom: 20px; font-size: 18px;}
.tollgate .search_box .col1 {width: calc(100% - 92px);}
.tollgate .search_box dl {font-size: 0;}
.tollgate .search_box dl dt {width: 85px;}
.tollgate .search_box dl dd {display: inline-block; vertical-align: middle; min-height: 0;}
.tollgate .search_box dl dd.type1 {width: calc(50% - 102px);}
.tollgate .search_box dl dd.radio_style1 {width: 85px; margin: 0 17px; font-size: 16px; line-height: 16px;}
.tollgate .search_box .btn_blue {position: absolute; top: 15px; bottom: 15px; right: 20px; width: 80px; height: 80px; font-size: 16px; line-height: 20px; padding: 0; -ms-word-break: keep-all; word-break: keep-all;}
.tollgate .search_box .btn_blue span {display: block;}
.tollgate .map_wrap {width: 100%; margin-top: 20px; border: 1px solid #ddd;}
.tollgate .map_wrap .map {width: 100%; height: 669px;}

#tgPop .popup_inner {width: 400px; /*margin: 50px auto 0;*/}
#tgPop .popup_inner .search_box {box-shadow: none;}
#tgPop .popup_inner .search_box dl {width: 100%;}
#tgPop .popup_inner .search_box dl dd {position: relative; width: 48.5%; margin-right: 3%;}
#tgPop .popup_inner .search_box dl dd:last-child {margin-right: 0;}
#tgPop .popup_inner .search_box dl dd.radio_style1 {min-height: 18px; height: 18px; margin-top: 5px; margin-bottom: 5px; line-height: 15px;}
#tgPop .popup_inner .search_box dl dd.type1 {width: calc(100% - 90px);}
#tgPop .popup_inner .search_box dl dd input[type='text'] {width: calc(100% - 52px); padding: 0 35px 0 15px;}
#tgPop .popup_inner .search_box dl dd .btn_search {position: absolute; right: 0; top: 0; bottom: 0; width: 35px; height: 35px; padding: 0; background: url('/images/common/ic_search.png') center center no-repeat; background-size: 20px; border: 0; text-indent: -9999px;}
/* #tgPop .popup_inner .search_box dl dd input[type='text']:focus ~ .result_wrap {display: block;} */
#tgPop .popup_inner .search_box .result_wrap {display: none; position: absolute; top: 34px; left: 0; right: -2px; border: 1px solid #ddd; border-top: 1px solid #fff; background: #fff; z-index: 1;}
#tgPop .popup_inner .search_box .result_wrap ul li a {display: block; height: 35px; padding: 0 15px; line-height: 35px; font-size: 16px; color: #888;}
#tgPop .popup_inner .search_box .result_wrap ul li a:hover {background: #f5f5f5;}
#tgPop .popup_inner .btn_wrap {margin-top: 10px}
#tgPop .popup_inner .btn_wrap .btn_blue {position: static; width: 100%;}
#tgPop .popup_inner .search_result {margin: 8px 0 5px; font-size: 15px; text-align: center;}
#tgPop .popup_inner .search_result span {margin-right: 10px; font-size: 18px; font-weight: 500;}
#tgPop .popup_inner .search_result strong {font-size: 30px; font-weight: 500;}

#tgPop .satisfction_box {margin-top: 10px; background: #fff; text-align:left;}
#tgPop .satisfction_box.box .box_cont {padding: 10px 25px;}

#tgPop .satisfction_box.box .box_cont dl.radio_wrap {}
#tgPop .satisfction_box.box .box_cont dl.radio_wrap dt {margin-bottom: 10px; font-size: 18px; color: #666; font-weight: 500;}
#tgPop .satisfction_box.box .box_cont dl.radio_wrap dd {margin-bottom: 10px; font-size: 13px; color: #666; letter-spacing: -0.5px;}
#tgPop .satisfction_box.box .box_cont dl.radio_wrap dd .radio_style1 {margin-right: 10px;}
#tgPop .satisfction_box.box .box_cont dl.radio_wrap dd label {font-size: 14px; vertical-align: top; line-height: 14px; letter-spacing: -1px;}
#tgPop .satisfction_box.box .box_cont dl.radio_wrap dd label span {margin-left: 3px;}

#tgPop .satisfction_box.box .box_cont dl.comments_wrap {margin-top: 0; border-top: 0;}
#tgPop .satisfction_box.box .box_cont dl.comments_wrap dt {margin-bottom: 8px; font-size: 16px; font-weight: 500;}
#tgPop .satisfction_box.box .box_cont dl.comments_wrap dd textarea {float: left; width: calc(100% - 135px); height: 78px; border: 1px solid #dedede;}
#tgPop .satisfction_box.box .box_cont dl.comments_wrap dd .btn {float: right; width: 100px; height: 100px; padding: 0; font-size: 16px;}
#tgPop .satisfction_box.box .box_cont dl.comments_wrap dd p {margin-top: 5px; font-size: 14px; color: #666; line-height: 26px;}


/* 교통방송 - 교통방송보기 - exTV 교통방송 */
.exTV {}

.sub_tab {margin-bottom: 30px;}
.sub_tab ul {display: table; width: 100%; background: #eee;}
.sub_tab ul li {display: table-cell; position: relative; vertical-align: middle; height: 60px; border: 2px solid #eee; background: #eee; transition: all.2s ease;}
.sub_tab ul li:after {position: absolute; right: -2px; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: #ccc; content: "";}
.sub_tab ul li a {display: block; font-size: 16px; text-align: center; font-weight: 600; color: #999;}
.sub_tab ul li:last-child:after {display: none;}
.sub_tab ul li:hover,
.sub_tab ul li.active {border-color: #3673ee; background: #fff}
.sub_tab ul li:hover:after,
.sub_tab ul li.active:after {display: none;}
.sub_tab ul li:hover a,
.sub_tab ul li.active a {color: #3673ee;}

.video_wrap {width: 100%; margin-bottom: 20px;}
.video_wrap .video {width: 100%; height: 450px;}
.video_wrap .title {margin-top: 15px;}
.video_wrap .title p {display: inline-block; vertical-align: middle; line-height: 35px; font-size: 20px; font-weight: 500;}
.video_wrap .title span.date {display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 16px; color: #999; line-height: 36px; font-weight: 400;}

.tab_style1 {display: table; width: 100%; padding: 10px 0 20px; font-size: 0; text-align: center;}
.tab_style1 li {display: table-cell;}
.tab_style1 li a {display: block; position: relative; font-size: 16px; text-align: center; font-weight: 500; color: #999;}
.tab_style1 li a:after {position: absolute; right: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: #ddd; content: "";}
.tab_style1 li:last-child a:after {display: none;}
.tab_style1 li:hover a,
.tab_style1 li.active a {color: #000;}

.scroll-y {overflow-y: scroll;}
.scroll-x {overflow-x: scroll;}

.box {margin-bottom: 25px;}
/* .box .box_title {margin-bottom: 10px; padding-left: 20px; font-size: 20px; font-weight: 400; color: #444; background: url('/images/common/ic_bul.png') left center no-repeat;} */
.box .box_title {margin-bottom: 10px; padding-left: 20px; font-size: 20px; font-weight: 400; color: #444; }
.box .box_cont {padding: 20px; border: 1px solid #ddd; box-shadow: 5px 5px 0 rgba(242, 242, 242, 0.9);}

.box .box_title2 {margin-bottom: 10px; font-size: 20px; color: #444;}
.box .box_cont2 {}
.box table {width: 100%; table-layout: fixed; border-top: 1px solid #3673ee;}
.box table th {height: 50px; font-weight: 500; text-align: center; font-size: 16px; color: #3673ee; border-bottom: 1px solid #ddd; background: #f9f9f9;}
.box table td {height: 50px; padding: 10px; font-size: 14px; text-align: center; font-weight: 400; color: #444; border-bottom: 1px solid #ddd; -ms-word-break: keep-all; word-break: keep-all;}
.box table td.subject {text-align: left; padding: 10px 10px 10px 20px;}

.exTV .video_wrap {margin-bottom: 15px;}
.exTV .box .box_title2 p {display: inline-block; vertical-align: middle;}
.exTV .box .box_title2 .datepicker2 {width: 90px; padding-right: 40px; font-size: 16px; font-weight: 500; color: #999; text-align: right; border: 0;}
.exTV .box .scroll-y {width: calc(100% + 17px); height: 450px;}
.exTV .box .scroll-y table {border-top: 0;}


/* 교통방송 - 교통방송보기 - 교통안전캠페인 */
.campaign {}

.video_list {margin-top: 30px; font-size: 0; text-align: center;}
.video_list li {display: inline-block; width: 24%; margin-right: 1.3%; margin-bottom: 20px;}
.video_list li:nth-child(4n+4) {margin-right: 0;}
.video_list li a {display: block;}
.video_list li a .img_wrap {position: relative;}
.video_list li a .img_wrap>img {width: 100%;}
.video_list li a .img_wrap span.time {position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; font-size: 12px; color: #fff; background: #000;}
.video_list li a dl {text-align: left;}
.video_list li a dl dt {margin-top: 10px; font-size: 14px; line-height: 22px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden}
.video_list li a dl dd {font-size: 14px; color: #999;}

.btn_more_video {width: 40px; height: 40px; padding: 0; text-indent: -9999px; background: url('/images/broadcast/ic_more.png') center center no-repeat;}

/* 더보기 임시 */
.video_list li.moreHide {display: none;}


/* 교통방송 - 교통방송보기 - 고속도로뉴스 */
.news {}


/* 교통방송 - 교통방송 소개 */
.info {}

.info .info_box {margin-bottom: 25px; font-size: 0;}
.info .info_box>* {display: inline-block; vertical-align: top;}
.info .info_box .info_box_img p img{width: 334px;}
.info .info_box dl {width: calc(100% - 377px); padding-left: 50px; -ms-word-break: keep-all; word-break: keep-all;}
.info .info_box dl dt {margin-bottom: 15px; font-size: 16px;}
.info .info_box dl dt strong {display: block; font-size: 20px; font-weight: 500;}
.info .info_box dl dd {font-size: 16px; line-height: 25px; color: #777; font-weight: 400;}

.info .step_list {display: table; width: 100%; border: 1px solid #eee;}
.info .step_list li {display: table-cell; width: 25%; padding: 25px 20px; vertical-align: middle; text-align: center; background: #eee;}
.info .step_list li:nth-child(even) {background: #fff;}
.info .step_list li img {margin: 0 0 15px;}
.info .step_list li dl dt {height: 40px; margin-bottom: 15px; font-size: 16px; font-weight: 500; line-height: 20px;}
.info .step_list li dl dt.line1 {line-height: 40px;}
.info .step_list li dl dd {font-size: 14px; color: #666; font-weight: 400; line-height: 20px; -ms-word-break: keep-all; word-break: keep-all;}

.info .history {}
.info .history li {display: table; width: 100%;}
.info .history li>* {display: table-cell; vertical-align: middle; text-align: left;}
.info .history li strong {width: 100px; font-size: 36px; font-weight: 500; color: #3673ee;}
.info .history li:nth-child(even) strong {color: #ccc;}
.info .history li p {font-size: 16px; line-height: 26px; color: #666;}
.info .history li p span {font-weight: 500; color: #333;}


/* 교통방송 - 캐스터 프로필 */
.casters {}

.casters .casters_list li {position: relative; width: 185px; margin-bottom: 70px; margin-right: 20px; z-index: 1;}
.casters .casters_list li:nth-child(4n+4) {margin-right: 0;}
.casters .casters_list li .img_wrap {position: relative; z-index: 1;}
.casters .casters_list li .img_wrap img {width: 100%;}
.casters .casters_list li .cover {position: absolute; left: 0; bottom: 0; right: 0; width: 100%; z-index: 2; background: #fff; opacity: 0; transition: all.3s ease;}
.casters .casters_list li:hover .cover {opacity: 1;}
.casters .casters_list li .cover div {position: relative; padding: 0 10px 12px;}
.casters .casters_list li .cover div:before {position: absolute; top: -19px; left: 0; right: 0; content: ""; width: 100%; height: 19px; background: url('/images/broadcast/img_over.png') center center no-repeat; background-size: 100% 100%;}
.casters .casters_list li .cover span {display: block; margin-bottom: 3px; font-size: 14px; line-height: 20px; -ms-word-break: break-all; word-break: break-all;}


/* 고속도로이용안내 - 작업구간 사전안내 */
.advance {}

.advance .board_list table td a {height: auto; line-height: normal; text-overflow: inherit; white-space: normal; overflow: visible;}

.advance_view {}

.advance_view ul li {margin-bottom: 30px;}
.advance_view ul li table {width: 100%; border-bottom: 1px solid #ddd; table-layout: fixed;}
.advance_view ul li table th {height: 50px; font-weight: 500; text-align: center; font-size: 16px; color: #35babc; border-top: 1px solid #35babc; border-bottom: 1px solid #ddd; background: #f9f9f9; -ms-word-break: keep-all; word-break: keep-all;}
.advance_view ul li table td {height: 50px; padding: 5px 20px; font-size: 14px; font-weight: 300; color: #444; border-bottom: 1px solid #ddd; -ms-word-break: keep-all; word-break: keep-all;}
.advance_view ul li table .bold {font-weight: 500 !important;}
.advance_view ul li table .bd_right {border-right: 1px solid #ddd;}
.advance_view .btn_wrap {margin: 30px 0;}


/* 고속도로이용안내 - 휴게소/주유소 */
.service_area {}

.service_area .search_box .check_style1 {margin-right: 15px;}
.service_area .search_box dl dd span.nowTime {position: absolute; right: 0; bottom: 0; width: 195px; padding-right: 20px; border: 0; font-size: 14px; color: #888; font-weight: 500; text-align: right;}
.service_area .board_option .fl_left {font-size: 18px; font-weight: 400; color: #444;}
.service_area .board_option .fl_right {margin-top: 5px; font-size: 14px; color: #888;}
.service_area .btn_sort {width: 20px; height: 20px; margin-left: 5px; padding: 0; background: url('/images/common/ic_sort.png') center center no-repeat; text-indent: -9999px; vertical-align: text-bottom;}
.service_area .btn_sort_0 {width: 20px; height: 20px; margin-left: 5px; padding: 0; background: url('/images/common/ic_sort.png') center center no-repeat; text-indent: -9999px; vertical-align: text-bottom;}
.service_area .btn_sort_2 {width: 20px; height: 20px; margin-left: 5px; padding: 0; background: url('/images/common/ic_sort.png') center center no-repeat; text-indent: -9999px; vertical-align: text-bottom;}
.service_area .btn_sort_3 {width: 20px; height: 20px; margin-left: 5px; padding: 0; background: url('/images/common/ic_sort.png') center center no-repeat; text-indent: -9999px; vertical-align: text-bottom;}



.service_area .board_list ul {width: 100%; border-top: 1px solid #3673ee; table-layout: fixed;}
.service_area .board_list ul>li.table_head {display: table; width: 100%; border-bottom: 1px solid #ddd;}
.service_area .board_list ul>li.table_head div {display: table-cell; height: 50px; vertical-align: middle; font-weight: 500; text-align: center; font-size: 16px; color: #3673ee; background: #f9f9f9;}
.service_area .board_list ul>li.table_head div:nth-child(1) {}
.service_area .board_list ul>li.table_head div:nth-child(2) {width: 18%;}
.service_area .board_list ul>li.table_head div:nth-child(3) {width: 18%;}
.service_area .board_list ul>li.table_head div:nth-child(4) {width: 18%;}
.service_area .board_list ul>li.table_head div:nth-child(5) {width: 20%;}

.service_area .board_list ul>li {border: 1px solid #fff; border-bottom: 1px solid #ddd; border-top: 0;}
.service_area .board_list ul>li .title {display: table; width: 100%; cursor: pointer;}
.service_area .board_list ul>li .title>div {display: table-cell; height: 50px; padding: 5px 0; font-size: 14px; text-align: center; font-weight: 300; color: #444; vertical-align: middle;}
.service_area .board_list ul>li .title>div:nth-child(1) {}
.service_area .board_list ul>li .title>div:nth-child(2) {width: 18%;}
.service_area .board_list ul>li .title>div:nth-child(3) {width: 18%;}
.service_area .board_list ul>li .title>div:nth-child(4) {width: 18%;}
.service_area .board_list ul>li .title>div:nth-child(5) {width: 20%;}
.service_area .board_list ul>li .title>div.subject {text-align: left; padding: 0 10px 0 20px;}
.service_area .board_list ul>li .text {display: none; width: 100%; padding: 5px 20px; background: #f5f5f5;}
.service_area .board_list ul>li .text .icon {margin-right: 5px;}
.service_area .board_list ul>li .text p {margin: 5px 0; font-size: 14px; font-weight: 400; color: #444;}
.service_area .board_list ul>li .text p strong {margin-right: 5px; font-weight: 500;}

.service_area .board_list ul>li div.bg_arrow {padding-right: 40px; background: url('/images/useGuide/ic_arrow_down.png') right 20px center no-repeat;}

.service_area .board_list ul>li.active {border: 1px solid #38bbbd;}
.service_area .board_list ul>li.active div.bg_arrow {background: url('/images/useGuide/ic_arrow_up.png') right 20px center no-repeat;}
.service_area .board_list ul>li.active .text {border-top: 1px solid #ddd;}

.service_area .board_list ul>li.table_head div.bg_arrow {background: #f9f9f9;}

.emptyList{height: 50px;font-size: 14px;text-align: center;font-weight: 300;color: #444;border-bottom: 1px solid #ddd;line-height: 40px;}

/* 고속도로이용안내 - 버스전용차로 */
.bus {}

dl.info_text {margin-bottom: 20px; color: #444;}
dl.info_text dt {margin-bottom: 10px; font-size: 20px; font-weight: 400;}
dl.info_text dd {font-size: 14px; line-height: 20px;}
dl.info_text dd span {color: #000; font-weight: 500;}

dl.line_bul {margin-bottom: 15px;}
dl.line_bul dt {margin-bottom: 5px; font-size: 16px; font-weight: 500; color: #3673ee;}
dl.line_bul dd {position: relative; padding-left: 10px; font-size: 14px; line-height: 20px;}
dl.line_bul dd:before {position: absolute; top: 0; left: 0; content: "-";}

.bus .box .box_cont.fl_wrap {display: table; width: 100%;}
.bus .box .box_cont.fl_wrap>* {display: table-cell; vertical-align: middle;}
.bus .box .box_cont.fl_wrap dt {width: 145px; padding-left: 60px; font-size: 16px; color: #444; background: url('/images/useGuide/img_bus01.png') left center no-repeat;}
.bus .box .box_cont.fl_wrap dd {font-size: 14px; line-height: 22px; color: #666;}

.bus .box table td span {display: block;}


/* 고속도로이용안내 - 스마트폰 이용안내 */
.app_guide {}

.sign {margin-bottom: 20px; font-size: 20px; font-weight: 500; color: #3673ee; line-height: 35px;}

.sign span {display: inline-block; vertical-align: middle; width: 318px; height: 35px; margin-right: 5px; padding-left: 10px; color: #fff !important; font-size: 16px; line-height: 35px; background: url('/images/useGuide/img_sign.png') center center no-repeat;}

.app_guide dl.info_text dd.step1 {font-size: 18px;}

.number_list li {position: relative; margin-top: 20px; padding-left: 40px;}
.number_list li i {position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; font-size: 16px; color: #fff; font-weight: 500; line-height: 30px; text-align: center; border-radius: 50%; background: #3673ee;}
.number_list li dl dt {margin-bottom: 5px; padding-top: 4px; font-size: 16px; font-weight: 500;}
.number_list li dl dd {font-size: 14px; font-weight: 400; line-height: 17px; -ms-word-break: keep-all; word-break: keep-all;}

.app_guide .box .box_cont.fl_wrap {display: table; width: 100%; margin-bottom: 20px;}
.app_guide .box .box_cont.fl_wrap>* {display: table-cell; width: 50%; vertical-align: middle; font-size: 0;}
.app_guide .box .box_cont.fl_wrap div>* {display: inline-block; vertical-align: top;}
.app_guide .box .box_cont.fl_wrap div>img {margin-top: -5px; border: 1px solid #ddd;}
.app_guide .box .box_cont.fl_wrap div dl {width: calc(100% - 100px); padding-left: 15px; font-size: 0;}
.app_guide .box .box_cont.fl_wrap div dl dt {font-size: 16px; font-weight: 500;}
.app_guide .box .box_cont.fl_wrap div dl dt img {margin: -10px 3px 0 0;}
.app_guide .box .box_cont.fl_wrap div dl dd {font-size: 14px; font-weight: 400;}
.app_guide .box .box_cont.fl_wrap div dl dd span {display: block; margin-bottom: 5px;}
.app_guide .box .box_cont.fl_wrap div dl dd a {font-size: 14px; border-bottom: 1px solid #444;}

.app_guide dd.fl_wrap>div {width: 50%; margin-top: 30px;}
.app_guide dd.fl_wrap>div.step2 {float: left;}
.app_guide dd.fl_wrap>div.step3 {float: right; margin-top: 88px;}

/* .app_guide dd.fl_wrap>div.step3 .number_list {float: left;}
.app_guide dd.fl_wrap>div.step3 .number_list:nth-of-type(1) {width: 45%;}
.app_guide dd.fl_wrap>div.step3 .number_list:nth-of-type(2) {width: 55%; padding-right: 3%;} */


/* 공지사항 - 교통센터 소개 - 인사말 */
.greeting {}

.cont>p {font-size: 14px; line-height: 20px; color: #444; -ms-word-break: keep-all; word-break: keep-all;}

.greeting .img_box {position: relative; margin: 45px 0 30px;}
.greeting .img_box img {width: 100%;}
.greeting .img_box p {position: absolute; right: 0; top: -20px; width: 310px; height: 150px; padding: 45px 30px; color: #fff; font-size: 20px; line-height: 30px; background: #0054a6;}
.greeting .img_box p .bar {display: inline-block; width: 50px; height: 1px; margin-left: 20px; background: #fff; vertical-align: middle;}
.greeting>p {margin-bottom: 20px;}


/* 공지사항 - 교통센터 소개 - 연혁 */
.history {}

.history .history_line {position: relative; z-index: 1;}
.history .history_line:before {position: absolute; left: 50%; top: 0; width: 1px; height: 100%; margin-left: -0.5px; background: #888; content: ""; z-index: 1;}
.history .history_line li dl {position: relative; width: 80px; margin: 0 auto 25px; z-index: 2;}
.history .history_line li dl dt {width: 80px; height: 80px; line-height: 80px; color: #fff; font-size: 26px; font-weight: 500; text-align: center !important; border-radius: 50%; background: #ccc;}
.history .history_line li dl dd {position: absolute; top: 15px; left: 100px; width: 250px; font-size: 16px;}
.history .history_line li:nth-child(2n+2) dl dd {left: auto; right: 100px; text-align: right;}
.history .history_line li dl dd strong {display: block; font-weight: 500;}


/* 공지사항 - 교통센터 소개 - 일반현황 */
.general {}

.general .organization {margin-bottom: 40px;}
.general .organization .step1 {position: relative; width: 164px; margin: 0 auto 65px;}
.general .organization .step1>* {position: relative; z-index: 2;}
.general .organization .step1:after {position: absolute; left: 50%; top: 155px; width: 1px; height: 75px; margin-left: -0.5px; background: #ddd; content: ""; z-index: 1;}
.general .organization .step2 {position: relative; width: 700px; margin: 0 auto 20px; font-size: 0;}
.general .organization .step2:after {position: absolute; left: 110px; right: 109px; top: -40px; height: 1px; background: #ddd; content: ""; z-index: 1;}
.general .organization .step2 li {display: inline-block; vertical-align: top; position: relative; width: 220px; height: 210px; margin-right: 20px; padding: 0 20px; border: 1px solid #ddd; background: #fff; z-index: 2;}
.general .organization .step2 li:after {position: absolute; left: 50%; top: -43px; width: 1px; height: 41px; margin-left: -0.5px; background: #ddd; content: ""; z-index: 1;}
.general .organization .step2 li:last-child {margin-right: 0;}
.general .organization .step2 li dt {position: relative; height: 65px; margin-bottom: 10px; font-size: 18px; font-weight: 500; line-height: 65px; border-bottom: 1px solid #eee;}
.general .organization .step2 li dt:after {position: absolute; left: 50%; top: -8px; width: 9px; height: 9px; margin-left: -7.5px; border: 3px solid #eee; border-radius: 50%; background: #fff; content: ""; z-index: 3;}
.general .organization .step2 li dd {padding: 0 15px; font-size: 14px; line-height: 25px; text-align: left;}

.general .organization .step2 li:nth-child(1) {border-top: 3px solid #004588;}
.general .organization .step2 li:nth-child(1) dt {color: #004588;}
.general .organization .step2 li:nth-child(1) dt:after {border-color: #004588;}
.general .organization .step2 li:nth-child(2) {border-top: 3px solid #0091c7;}
.general .organization .step2 li:nth-child(2) dt {color: #0091c7;}
.general .organization .step2 li:nth-child(2) dt:after {border-color: #0091c7;}
.general .organization .step2 li:nth-child(3) {border-top: 3px solid #44aeff;}
.general .organization .step2 li:nth-child(3) dt {color: #44aeff;}
.general .organization .step2 li:nth-child(3) dt:after {border-color: #44aeff;}

.general .info ul {font-size: 0;}
.general .info ul li {position: relative; display: inline-block; width: 24.2%; height: 252px; margin-right: 1%; padding: 50px 0 0; vertical-align: top; border: 1px solid #ddd; background: #fff; cursor: pointer;}
.general .info ul li:last-child {margin-right: 0;}
.general .info ul li p {height: 40px; margin-top: 15px; line-height: 20px; font-size: 16px; font-weight: 500; -ms-word-break: keep-all; word-break: keep-all;}
.general .info ul li p.line1 {line-height: 40px;}
.general .info ul li p span {display: block;}

.general .info ul li .over_layer {position: absolute; left: -1px; right: -1px; top: 0; bottom: 0; display: table; width: calc(100% + 2px);height: 100%; background: #35babc; opacity: 0; transition: all.3s ease;}
.general .info ul li .over_layer p {display: table-cell; padding: 15px 10px; font-size: 14px; vertical-align: middle; letter-spacing: -0.5px; font-weight: 400; color: #fff;}
.general .info ul li:hover .over_layer {opacity: 1;}


/* 공지사항 - 교통센터 소개 - 견학안내 및 오시는길 */
.directions {}

.directions .excursions_info>ul {float: left; width: 50%;}
.directions .excursions_info>ul li {margin-bottom: 25px;}
.directions .excursions_info>ul li dl dt {position: relative; margin-bottom: 7px; padding-top: 15px; font-size: 16px; font-weight: 500; line-height: 17px;}
.directions .excursions_info>ul li dl dt:after {position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: #35babc; content: "";}
.directions .excursions_info>ul li dl dd {font-size: 14px; line-height: 20px;}
.directions .excursions_info>ul li dl dd strong {font-weight: 500;}
.directions .excursions_info>ul.list2 li {margin-bottom: 15px;}

.directions .map_box {font-size: 14px; line-height: 20px; -ms-word-break: keep-all; word-break: keep-all;}
.directions .map_box #daumRoughmapContainer1542806262410 {width: 100%; height: 300px; margin-bottom: 10px;}
.directions .map_box #daumRoughmapContainer1542806262410 .wrap_map {height: 268px;}

.directions .traffic>div {padding: 15px 0; font-size: 0; border-bottom: 1px solid #eee;}
.directions .traffic>div:last-child {border-bottom: 0;}
.directions .traffic>div:after {display: block; visibility: hidden; clear: both; content: "";}
.directions .traffic>div>* {display: inline-block; vertical-align: top;}
.directions .traffic>div>dl {width: calc(100% - 55px); padding-left: 15px;}
.directions .traffic>div>dl dt {margin: 0 0 5px; font-size: 16px; font-weight: 600; line-height: 20px;}
.directions .traffic>div>dl dd {font-size: 14px; line-height: 22px; -ms-word-break: keep-all; word-break: keep-all;}
.directions .traffic>div>dl dd strong {font-weight: 400;}


/* 공지사항 - 로드플러스 소개 */
.roadplus {position: relative; z-index: 1;}

.roadplus>.text_center>img {max-width: 100%;}

.roadplus .text1 {margin: 20px 0; font-size: 16px; line-height: 23px;}
.roadplus .text1 strong {font-weight: 400;}

.roadplus .bul_list {width: 500px; height: 120px; margin: 45px auto; padding: 20px 90px; background: url('/images/introduce/bg_roadplus.png') center center no-repeat;}
.roadplus .bul_list li {position: relative; text-align: left; padding-left: 15px; font-size: 16px; line-height: 26px; background: url('/images/introduce/ic_bul.png') left center no-repeat;}

.roadplus .progress_box {margin-bottom: 30px; font-size: 0;}
.roadplus .progress_box li {display: inline-block; width: 33.333333%; vertical-align: top;}
.roadplus .progress_box li dl dt {position: relative; height: 47px; margin: 0 5px 20px; font-size: 16px; font-weight: 500; color: #fff; line-height: 47px; text-align: center; border-radius: 50px;}
.roadplus .progress_box li dl dt:after {position: absolute; top: 11px; right: -22px; width: 24px; height: 25px; content: ""; z-index: 2;}
.roadplus .progress_box li dl dd {padding: 0 30px; text-align: left;}
.roadplus .progress_box li dl dd p {position: relative; margin-bottom: 5px; padding-left: 12px; font-size: 14px; line-height: 20px; -ms-word-break: keep-all; word-break: keep-all;}
.roadplus .progress_box li dl dd p:before {position: absolute; top: 0; left: 0; content: "-"; line-height: 17px;}

.roadplus .progress_box li:nth-child(1) dl dt {background: #35babc;}
.roadplus .progress_box li:nth-child(1) dl dt:after {background: url('/images/introduce/ic_arrow_mint.png') center center no-repeat;}
.roadplus .progress_box li:nth-child(2) dl dt {background: #0054a6;}
.roadplus .progress_box li:nth-child(2) dl dt:after {background: url('/images/introduce/ic_arrow_blue.png') center center no-repeat;}
.roadplus .progress_box li:nth-child(2) dl dd {border-left: 1px dashed #ddd; border-right: 1px dashed #ddd;}
.roadplus .progress_box li:nth-child(3) dl dt {background: #44aeff;}

.roadplus .table_box {display: table; width: 100%; margin-top: 40px;}
.roadplus .table_box dl {display: table-cell; border: 1px solid #ddd;}
.roadplus .table_box dl dt {height: 45px; margin: -1px; line-height: 45px; font-size: 16px; color: #fff;}
.roadplus .table_box dl dd {padding: 15px 20px; text-align: left;}
.roadplus .table_box dl dd p {position: relative; margin-bottom: 5px; padding-left: 12px; font-size: 14px; line-height: 20px; -ms-word-break: keep-all; word-break: keep-all;}
.roadplus .table_box dl dd p:before {position: absolute; top: 0; left: 0; content: "-"; line-height: 17px;}

.roadplus .table_box dl:first-child dt {background: #0054a6;}
.roadplus .table_box dl:last-child {border-left: 0;}
.roadplus .table_box dl:last-child dt {background: #44aeff;}


/* 공지사항 - 공지사항 */
.notice {}

.notice .btn_wrap {margin: 30px 0;}


/* 공지사항 - FAQ */
.faq {}

/* .faq .faq_list {margin-top: 30px; border-top: 1px solid #3673ee;}
.faq .faq_list ul li {border: 1px solid #fff; border-bottom: 1px solid #ddd;}
.faq .faq_list ul li.active {border-color: #3673ee;}
.faq .faq_list ul li dl {background: #fff ;}
.faq .faq_list ul li dl dt {padding: 13px 50px 13px 50px; font-size: 14px; color: #444; background: url('/images/introduce/ic_q.png') left 12px top 12px no-repeat, url('/images/introduce/ic_arrow_down.png') right 15px center no-repeat #fff; cursor: pointer;}
.faq .faq_list ul li.active dl dt {background: url('/images/introduce/ic_q.png') left 12px top 12px no-repeat,  url('/images/introduce/ic_arrow_up.png') right 15px center no-repeat #fff;}
.faq .faq_list ul li dl dd {display: none; padding: 13px 10px 50px 50px; font-size: 14px; line-height: 20px;background-image: url('/images/introduce/FAQ_03.png'),url('/images/introduce/faq_bg.png'); background-size: 25px 25px,216px 99px; background-position: left 12px top 12px, right 0 bottom 0; background-repeat: no-repeat; background-color: #f3f3f3;}
.faq .btn_wrap {margin: 30px 0;} */

/* .faq .faq_list {margin-top: 30px; border-top: 1px solid #3673ee;}
.faq .faq_list ul li {border: 1px solid #fff; border-bottom: 1px solid #ddd;}
.faq .faq_list ul li.active {border-color: #3673ee;}
.faq .faq_list ul li dl {background: #fff ;}
.faq .faq_list ul li dl dt {padding: 13px 50px 13px 50px; font-size: 14px; color: #444; background: url('/images/introduce/ic_q.png') left 12px top 12px no-repeat, url('/images/introduce/ic_arrow_down.png') right 15px center no-repeat #fff; cursor: pointer;}
.faq .faq_list ul li.active dl dt {background: url('/images/introduce/ic_q.png') left 12px top 12px no-repeat,  url('/images/introduce/ic_arrow_up.png') right 15px center no-repeat #fff;}
.faq .faq_list ul li dl dd {display: none; padding: 13px 10px 50px 50px; font-size: 14px; line-height: 20px;background-image: url('/images/introduce/FAQ_03.png'),url('/images/introduce/faq_bg.png'); background-size: 25px 25px,216px 99px; background-position: left 12px top 12px, right 0 bottom 0; background-repeat: no-repeat; background-color: #f3f3f3;}
.faq .btn_wrap {margin: 30px 0;} */
.faq .faq_list {margin-top: 30px;}
.faq .faq_list ul li {border: 1px solid #fff; border: 1px solid #ddd;position: relative;margin-bottom: 20px;}
.faq .faq_list ul li.active dl dt {border: 1px solid #3673ee;position:relative;}/*전소현수정*/
.faq .faq_list ul li dl {background: #fff ;}
.faq .faq_list ul li dl dt {padding: 21px 78px; font-weight: 500; font-size: 18px; color: #444; cursor: pointer;width: 100%;height: 100%;}/*전소현수정*/
.faq .faq_list ul li dl dt div.title_num {  /*전소현수정*/
    position: absolute;
    left: 30px;
    top: 50%;/*전소현수정*/
    transform: translateY(-50%);/*전소현수정*/
    color: #3673ee;
    background-color: #fff;
    border:1px solid #3673ee;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 31px;
    font-weight: 400;
}
.faq .faq_list ul li.active dl dt div.title_num {/*전소현수정*/
    position: absolute;
    left: 30px;
    top: 50%;/*전소현수정*/
    transform: translateY(-50%);/*전소현수정*/
    color: #fff;
    background-color: #3673ee;
    border:1px solid #3673ee;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 31px;
    font-weight: 400;
}
.faq .faq_list ul li dl dt::after {
    content: '';
    background-image: url(/images/broadcast/ic_more2.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-left: 1px solid #ddd;
    width: 70px;
    height: 100%; /*전소현수정*/
    position: absolute;
    right: 0;
    top: 0;
}
.faq .faq_list ul li.active dl dt::after {
    content: '';
    background-image: url(/images/broadcast/ic_on2.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #3673ee;
    border-left: 1px solid #3673ee;
    width: 70px;
    height: 100%; /*전소현수정*/
    position: absolute;
    right: 0;
    top: 0;
}
.faq .faq_list ul li dl dd {display: none; padding: 30px 30px 37px; font-size: 16px; line-height: 28px; background-color: #fafafa;}
.faq .btn_wrap {margin: 30px 0;}

.faq .faq_list img{width:100%;}


/* 공지사항 - 관련사이트 */
.site {}

.site .box .box_cont:after {display: block; visibility: hidden; clear: both; content: "";}
.site .box .box_cont {padding: 20px 20px 10px;}
.site .box .box_cont li {float: left; width: 31.3%; margin-right: 3%; margin-bottom: 10px; text-align: center; border: 1px solid #ddd;}
.site .box .box_cont li:nth-child(3n+3) {margin-right: 0;}
.site .box .box_cont li a {display: block;}


/* 공지사항 팝업 */
/* #noticePop .popup_inner {width: 600px; margin: 0; margin-left: 50px; margin-top: 50px; border: 1px solid #ddd;} */
#noticePop .popup_inner {margin: 0; margin-left: 50px; margin-top: 50px; border: 1px solid #ddd;}
#noticePop .popup_contents {position: relative; padding: 50px 50px 30px;}
#noticePop .popup_contents p span {display: block;}
#noticePop .popup_contents .text1 {font-size: 32px; color: #35babc; font-weight: 500; line-height: 38px;}
#noticePop .popup_contents .text2 {margin: 30px 0; font-size: 16px; color: #666; line-height: 24px;}
#noticePop .popup_contents .text3 {font-size: 16px; color: #333; font-weight: 500;}
#noticePop .popup_contents .btn_close {top: 15px; right: 15px; width: 25px; height: 25px; background: url('/images/common/ic_popup_close_mint.png') center center no-repeat;}
/* #noticePop .today_close {padding: 10px; text-align: right; background: #ddd;} */
#noticePop .today_close {padding: 10px; text-align: right; background: #ddd; bottom: 0; position: absolute; width: 100%;}

/* 에러페이지 추가 */
.error_wrap {width: 100%; height: 100vh; padding: 110px 0 0; background: #35bbbe;}
.error_wrap>div {}
.error_wrap>div .left_wrap {float: left; width: 20%; text-align: right;}

.error_wrap>div .right_wrap {float: right; width: 80%; padding-left: 200px;}

.error_wrap>div .right_wrap .text_wrap span {display: block; color: #fff;}
.error_wrap>div .right_wrap .text_wrap .text1 {margin-top: -17px; margin-bottom: 45px; font-size: 120px; font-weight: 600; line-height: 100px;}
.error_wrap>div .right_wrap .text_wrap .text2 {margin-bottom: 25px; font-size: 40px; font-weight: 600;}
.error_wrap>div .right_wrap .text_wrap .text3 {margin-top: 30px; font-size: 20px; font-weight: 500;}

.error_wrap>div .right_wrap .btn_wrap {margin: 100px 0;}
.error_wrap>div .right_wrap .btn_wrap .btn {width: 360px; height: 100px; line-height: 100px; font-size: 30px; font-weight: 600; color: #35bbbe; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none;}
.error_wrap>div .right_wrap .btn_wrap .btn_back {background: #fff url('/images/error/ic_prev.png') left 30px center no-repeat;}
.error_wrap>div .right_wrap .btn_wrap .btn_home {background: #fff url('/images/error/ic_next.png') right 30px center no-repeat;}

.error_wrap>div .right_wrap .logo_wrap {padding-right: 100px; text-align: right;}
.error_wrap>div .right_wrap .logo_wrap a {display: inline-block; vertical-align: middle; margin-left: 30px; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none;}

/* 로딩 추가 */
.loading_box {position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background: rgba(37, 41, 49, 1) url('/images/common/loading.gif') center 150px no-repeat; z-index: 4; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .2s ease; transition: all .5s ease;}
.main_contents .left_wrap + .map_wrap + .right_menu + .loading_box {left: 0; width: 100%;}
.main_contents .left_wrap.active + .map_wrap + .right_menu + .loading_box {left: 500px; width: calc(100% - 500px);}

.main_contents .left_wrap {z-index: 6;}

.loading_box.result_loading {top: 165px !important;width:96%;}
.loading_box.result_loading2 {top: 275px !important; display: none;width:96%;}

@media screen and (max-width: 640px) {
    .main_contents .left_wrap.active + .map_wrap + .right_menu + .loading_box {left: 0; width: 100%;}

    .loading_box.result_loading {top: 120px;}
    .loading_box.result_loading2 {top: 210px; display: none;}
}

/* 2021.07 교통안전 홍보채널 */
/* promotion banner */
.promotion_banner {position: absolute; top: 10px; right: 200px;transition: right ease 0.2s;}
.promotion_banner a {display: block;}
.promotion_banner a img {display: block; margin: 0 auto;}
.promotion_banner .pr_text_box {position: relative; margin-top: 3px; padding: 10px 12px; background: #111; border-radius: 50px;}
.promotion_banner .pr_text_box .text {display: block; font-size: 14px; color: #fff; letter-spacing: -0.5px; line-height: 1;}
.promotion_banner .pr_text_box .arrow {position: absolute; top: 0; left: 50%; display: inline-block; width: 8px; height: 8px; background: #111; transform: rotate(45deg) translateX(-50%);}
@media all and (max-width: 640px){
    .promotion_banner {top: 70px;}
    .promotion_banner a img {width: 70px;}
}

/* promotion */
.sub_tab_round {margin-bottom: 30px;}
.sub_tab_round ul {display: table; width: 100%; padding: 9px 0; background: #fff; border: 1px solid #dedede; border-radius: 5px; box-shadow: 2px 2px 4px 1px rgba(2, 2, 2, 0.15);}
.sub_tab_round ul li {display: table-cell; position: relative; height: 50px; vertical-align: middle; padding: 0 10px; transition: all .1s;}
.sub_tab_round ul li:after {position: absolute; right: -2px; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: #dfdfdf; content: "";}
.sub_tab_round ul li a {display: flex; align-items: center; justify-content: center; height: 100%; font-size: 20px; text-align: center; color: #888; border-radius: 5px;}
.sub_tab_round ul li:last-child:after {display: none;}
.sub_tab_round ul li:hover a,
.sub_tab_round ul li.active a {color: #fff; background: #3673ee;}

.promotion .video_wrap .video {width: 100%; height: 450px;}
.promotion .video_wrap .video iframe {width: 100%; height: 100%;}

.video_list_type2 {margin-top: 30px; font-size: 0; text-align: left;}
.video_list_type2 li {display: inline-block; width: calc((100% - 25px - 25px) / 3); margin-right: 25px; margin-bottom: 25px;}
.video_list_type2 li:nth-child(3n+3) {margin-right: 0;}
.video_list_type2 li a {display: block; background: #fff; border-radius: 0 0 50px 0; transition: 0.2s;}
.video_list_type2 li a .img_wrap {display: flex; align-items: center; justify-content: center; position: relative; height: 140px; background: #e0e0e0; overflow: hidden;}
.video_list_type2 li a .img_wrap > img {max-width: 100%; max-height: 100%;}
.video_list_type2 li a .img_wrap span.time {position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; font-size: 12px; color: #fff; background: #000;}
.video_list_type2 li a dl {height: 170px; padding: 20px 20px 18px; text-align: left; border: 1px solid #e0e0e0; border-radius: 0 0 50px 0;}
.video_list_type2 li a dl dt {height: 91px; padding-bottom: 18px; font-size: 18px; font-weight: 500; color: #222; line-height: 1.3; letter-spacing: -0.5px; transition: 0.2s;}
.video_list_type2 li a dl dt .label {display: inline-block; margin-bottom: 5px; padding: 4px 10px 5px; font-size: 14px; font-weight: 500; color: #fff; border-radius: 5px; border: 1px solid #fff; line-height: 1; transition: 0.2s;}
.video_list_type2 li a dl dt .label.label_video {background: #3773ef;}
.video_list_type2 li a dl dt .label.label_webtoon {background: #00c0b0;}
.video_list_type2 li a dl dt .label.label_cardnews {background: #FE812A;}

/* 2021_12_16 컨텐츠 신규이미지 추가 */
.video_list_type2 li a dl dt .dataType {display: inline-block; margin-bottom: 5px;  float: right; padding: 4px 10px 5px; font-size: 14px; font-weight: 500; color: #fff; border-radius: 5px; border: 1px solid #fff; line-height: 1; transition: 0.2s;}
.video_list_type2 li a dl dt .dataType.label_dataType {background: #f15151;}
/* 2021_12_16 컨텐츠 신규이미지 추가 */

.video_list_type2 li a dl dt p {height: 46px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: keep-all;}
.video_list_type2 li a dl dd {padding-top: 15px; padding-left: 25px; font-size: 16px; color: #777; background: url(../../images/promotion/icon_calendar_gray.png) no-repeat left top 20px; border-top: 1px solid #e0e0e0;}
.video_list_type2 li.moreHide {display: none;}

.video_list_type2 li:hover a {background: #3773ef;}
.video_list_type2 li:hover a dl {border-color: #3773ef;}
.video_list_type2 li:hover a dl dt {color: #fff;}
.video_list_type2 li:hover a dl dt .label.label_video {background: transparent;}
.video_list_type2 li:hover a dl dt .label.label_webtoon {background: transparent;}
.video_list_type2 li:hover a dl dt .label.label_cardnews {background: transparent;}
.video_list_type2 li:hover a dl dd {color: rgba(255, 255, 255, 0.7); background: url(../../images/promotion/icon_calendar_white.png) no-repeat left top 20px; border-color: rgba(249, 249, 249, 0.2);}

.video_list_type2 li a.sltr {background: #3773ef;}
.video_list_type2 li a.sltr dl {border-color: #3773ef;}
.video_list_type2 li a.sltr dl dt {color: #fff;}
.video_list_type2 li a.sltr dl dd {color: rgba(255, 255, 255, 0.7); background: url(../../images/promotion/icon_calendar_white.png) no-repeat left top 20px; border-color: rgba(249, 249, 249, 0.2);}

/* 2021.08.03 카드뉴스 */
.video_list_type2 li a.slct {background: #3773ef;}
.video_list_type2 li a.slct dl {border-color: #3773ef;}
.video_list_type2 li a.slct dl dt {color: #fff;}
.video_list_type2 li a.slct dl dt .label.label_video {background: transparent;}
.video_list_type2 li a.slct dl dt .label.label_webtoon {background: transparent;}
.video_list_type2 li a.slct dl dt .label.label_cardnews {background: transparent;}
.video_list_type2 li a.slct dl dd {color: rgba(255, 255, 255, 0.7); background: url(../../images/promotion/icon_calendar_white.png) no-repeat left top 20px; border-color: rgba(249, 249, 249, 0.2);}
/* // 2021.08.03 카드뉴스 */





.btn_more_round {display: inline-block; width: 160px; height: 50px; padding: 0 55px 0 40px; line-height: 46px; font-size: 18px; text-align:left; color: #222 !important; text-indent: 0; border: 1px solid #222; background: #fff url(../../images/promotion/ic_more.png) no-repeat right 40px center; border-radius: 50px;}

.btn_more_round2 {display: inline-block; width: 160px; height: 50px; padding: 0 55px 0 40px; line-height: 46px; font-size: 18px; text-align:left; color: #222 !important; text-indent: 0; border: 1px solid #222; background: #fff url(../../images/promotion/ic_hide.png) no-repeat right 40px center; border-radius: 50px;}

/* 웹툰 */
.webtoon_img {display: block; width: 690px; margin: 0 auto;}

@media all and (max-width: 1280px) {
    .promotion .video_wrap .video {width: 100%; height: 410px;}
    .video_list_type2 li {width: calc((100% - 20px - 20px) / 3); margin-right: 20px; margin-bottom: 20px;}
    .video_list_type2 li a .img_wrap {height: 129px}
    .video_list_type2 li:hover a {background: #3773ef;}
    .video_list_type2 li:hover a dl {border-color: #3773ef;}
    .video_list_type2 li:hover a dl dt {color: #fff;}
    .video_list_type2 li:hover a dl dt .label.label_video {background: transparent;}
    .video_list_type2 li:hover a dl dt .label.label_webtoon {background: transparent;}
    .video_list_type2 li:hover a dl dt .label.label_cardnews {background: transparent;}
    .video_list_type2 li:hover a dl dd {color: rgba(255, 255, 255, 0.7); background: url(../../images/promotion/icon_calendar_white.png) no-repeat left top 20px; border-color: rgba(249, 249, 249, 0.2);}

    .video_list_type2 li a.sltr {background: #3773ef;}
    .video_list_type2 li a.sltr dl {border-color: #3773ef;}
    .video_list_type2 li a.sltr dl dt {color: #fff;}
    .video_list_type2 li a.sltr dl dd {color: rgba(255, 255, 255, 0.7); background: url(../../images/promotion/icon_calendar_white.png) no-repeat left top 20px; border-color: rgba(249, 249, 249, 0.2);}
}
@media screen and (max-width: 640px) {
    .sub_tab_round ul {display: flex; flex-wrap: wrap;}
    .sub_tab_round ul li {display: inline-block;}

    .btn.btn_more_round {width: 160px; height: 50px; padding: 0 55px 0 40px; line-height: 46px; font-size: 18px; background-size:  auto;}

    .btn.btn_more_round2 {width: 160px; height: 50px; padding: 0 55px 0 40px; line-height: 46px; font-size: 18px; background-size:  auto;}
}
@media screen and (max-width: 480px) {
    .sub_tab_round ul li {width: auto !important; height: 35px; flex: auto;}
    .sub_tab_round ul li a {flex-direction: column; line-height: 1.2; font-size: 15px;}

    .video_list_type2 li a dl {height: auto;}
    .video_list_type2 li a dl dt {height: auto;}
    /* 2021.08.03 카드뉴스 */
    .video_list_type2 li a dl dt p {height: 40px;}
    .video_list_type2 li a dl dd {padding-top: 10px; background: url(../../images/promotion/icon_calendar_gray.png) no-repeat left top 15px;}
    .video_list_type2 li:hover a dl dd {background: url(../../images/promotion/icon_calendar_gray.png) no-repeat left top 15px;}
    .video_list_type2 li a.slct dl dd {color: rgba(255, 255, 255, 0.7); background: url(../../images/promotion/icon_calendar_white.png) no-repeat left top 15px;}
    /* // 2021.08.03 카드뉴스 */
}
/* 2021.08.03 */
/*사고잦은곳 팝업 */
#manyAccidentPop .popup_inner { width: 400px;}
#manyAccidentPop .popup_header { background: #ff7f27; }
#manyAccidentPop .popup_header .manyAccident_title { padding-left: 45px; background: url('../../images/main/ic_many_accident.png') left center no-repeat; background-size : auto 23px; }
#manyAccidentPop .popup_contents .road_name { padding: 11px 20px; font-size: 15px; background: #fff; border-bottom: 1px solid #ddd; }
#manyAccidentPop .popup_contents .road_name strong { font-size: 18px; font-weight: 500; }
#manyAccidentPop .popup_contents .cont { margin: 0; padding: 0 20px 10px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all; }
#manyAccidentPop .rd_cctv_ttl2 { display: flex; align-items: center; width:131px; height: 28px; background-image:url(../../images/main/cctv_ico2.png); margin-left: 20px; }
#manyAccidentPop .popup_contents .pop_padding { padding:10px 20px 10px 20px; max-height: 520px; overflow: auto; }
#manyAccidentPop .popup_contents .video_wrap {position: relative;}
#manyAccidentPop .popup_contents .video_wrap .video {position: relative; height: auto; width: auto;}
#manyAccidentPop .popup_contents .video_wrap .btn {position: absolute;  text-indent: -9999px; border: 0;} /*width: 54px; height: 54px;*/
#manyAccidentPop .popup_contents .video_wrap .btn_reload {left: 10px; top: 10px; background: url('../../images/main/btn_reload.png') center center no-repeat;  background-size : 30px}
#manyAccidentPop .popup_contents .video_wrap .btn_zoom {right: 10px; bottom: 10px; background: url('../../images/main/btn_zoom.png') center center no-repeat;}
#manyAccidentPop .popup_contents .video_wrap2 { display: flex; }
#manyAccidentPop .popup_contents .video_wrap2 .video { margin: 0 2.5px; }
#manyAccidentPop .popup_contents .btn_wrap p {display: inline-block; width: 27%; height: 35px; line-height: 35px; font-size: 17px; font-weight: 500; text-align: center; color: #666;}
#manyAccidentPop .popup_contents .btn_wrap p.mint1 {color: #35babc}
#manyAccidentPop .popup_contents .btn_wrap p.mint2 {width: 42%; padding: 0 38px; background: url('../../images/main/img_dotted.png') left center no-repeat, url('../../images/main/img_dotted.png') right center no-repeat; color: #35babc}
#manyAccidentPop .popup_contents .btn_wrap p.mint3 {width: 42%; padding: 0 38px; background: url('../../images/main/img_dotted.png') left center no-repeat, url('../../images/main/img_dotted.png') right center no-repeat;}
#manyAccidentPop .popup_contents .btn_wrap .btn {position: absolute; top: 0; bottom: 0; width: 35px; height: 35px; text-indent: -9999px;}
#manyAccidentPop .video_wrap2 { width: 100%; margin-bottom: 20px; }
#manyAccidentPop .video_wrap2 .video { position: relative; }
/* #manyAccidentPop .rd_cctv_cntnts_Wrap2{width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 {width: 32%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #1d1d1d; margin: 15px 0 10px 0; box-sizing: border-box; overflow: hidden; height: 89px; width: 100%; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 3px solid #35babc; }
 */
#manyAccidentPop .rd_cctv_cntnts_Wrap2{width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 {width: 32%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #1d1d1d; margin: 15px 0 10px 0; box-sizing: border-box; overflow: hidden; height: 89px; width: 100%; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid #35babc; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid #35babc; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#manyAccidentPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid #35babc; }

/* 리스트 스타일 */
.st_list1 { display: inline-flex; }
.st_list1 > li { position: relative; padding: 0 8px; font-size: 16px; color: #333; }
.st_list1 > li:before { content:""; position: absolute; display: block; width: 1px; height: 15px; background: #bdbdbd; right: 0; top: 50%; margin-top: -7.5px; }
.st_list1 > li:last-child:before { display: none; }
.st_list2 > li { font-size: 16px; color: #333;}

/* 기상영상 탭 스타일 */
.st_tab1 { display: flex; border-bottom:1px solid #c3c3c3; }
.st_tab1 > li { position: relative; flex: 1 1 0; }
.st_tab1 > li:before{ content:""; position: absolute; right: 0; top: 50%; margin-top: -10px; width: 1px; height: 20px; background: #c3c3c3; }
.st_tab1 > li:last-child:before { display: none; }
.st_tab1 > li > a { display: block; text-align: center; font-size: 18px; font-weight: 500; color: #666; padding: 0 10px; }
.st_tab1 > li.active > a { color :#3673ee; }
.st_tab1 > li > a span { display: inline-block; position: relative; padding: 15px 0; font-weight: bold;}
.st_tab1 > li.active > a span:before { content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: #3673ee; z-index: 1; }



/* 결빙취약구간 팝업 */
#blackicePop .popup_inner { width: 400px;}
#blackicePop .popup_header { background: #3d35e9; }
#blackicePop .popup_header .manyAccident_title { padding-left: 45px; background: url('../../images/main/ic_freezing_danger.png') left center no-repeat; background-size : auto 26px; }
#blackicePop .popup_contents .road_name { padding: 10px 20px; padding-bottom: 0; font-size: 18px; font-weight: 500; background: #fff; }
#blackicePop .popup_contents .road_name strong { font-size: 18px; font-weight: 500; }
#blackicePop .popup_contents .cont { margin: 0; margin-bottom: 15px; padding: 0 20px 10px 20px; font-size: 17px; -ms-word-break: keep-all; word-break: keep-all; border-bottom: 1px solid #ddd; }
#blackicePop .rd_cctv_ttl2 { display: flex; align-items: center; width:131px; height: 28px; background-image:url(../../images/main/cctv_ico2.png); margin-left: 10px; margin-top: 5px; }
#blackicePop .popup_contents .pop_padding { padding: 20px; max-height: 520px; overflow: auto; }
#blackicePop .popup_contents .video_wrap {position: relative;}
#blackicePop .popup_contents .video_wrap .video {position: relative; height: auto; width: auto;}
#blackicePop .popup_contents .video_wrap .btn {position: absolute;  text-indent: -9999px; border: 0;} /*width: 54px; height: 54px;*/
#blackicePop .popup_contents .video_wrap .btn_reload {left: 10px; top: 10px; background: url('../../images/main/btn_reload.png') center center no-repeat;  background-size : 30px}
#blackicePop .popup_contents .video_wrap .btn_zoom {right: 10px; bottom: 10px; background: url('../../images/main/btn_zoom.png') center center no-repeat;}
#blackicePop .popup_contents .video_wrap2 { display: flex; }
#blackicePop .popup_contents .video_wrap2 .video { margin: 0 2.5px; }
#blackicePop .popup_contents .btn_wrap {position: relative; font-size: 0;}
#blackicePop .popup_contents .btn_wrap p {display: inline-block; width: 29%; height: 35px; line-height: 35px; font-size: 18px; font-weight: 500; text-align: center; color: #666;}
#blackicePop .popup_contents .btn_wrap p.mint1 {color: #35babc}
#blackicePop .popup_contents .btn_wrap p.mint2 {width: 42%; padding: 0 38px; background: url('../../images/main/img_dotted.png') left center no-repeat, url('../../images/main/img_dotted.png') right center no-repeat; color: #35babc}
#blackicePop .popup_contents .btn_wrap p.mint3 {width: 42%; padding: 0 38px; background: url('../../images/main/img_dotted.png') left center no-repeat, url('../../images/main/img_dotted.png') right center no-repeat;}
#blackicePop .popup_contents .btn_wrap .btn {position: absolute; top: 0; bottom: 0; width: 35px; height: 35px; text-indent: -9999px;}
#blackicePop .video_wrap2 { width: 100%; margin-bottom: 20px; }
#blackicePop .video_wrap2 .video { position: relative; }
#blackicePop .rd_cctv_cntnts_Wrap2{width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 {width: 32%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #1d1d1d; margin: 15px 0 10px 0; box-sizing: border-box; overflow: hidden; height: 89px; width: 100%; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap1.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid #35babc; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap2.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid #35babc; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
#blackicePop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg2 .cctv_img_wrap3.active:before { content:""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 5px solid #35babc; }


@media screen and (max-width: 360px){
    #manyAccidentPop .popup_contents {max-height: 50vh;}
    #blackicePop .popup_contents {max-height: 50vh;}
}
/* // 2021.08.03 */


/* 스마트폰 이용안내 */
.cm_list01 { letter-spacing: -0.7px; word-break: keep-all; }
.cm_list01 > li { margin-bottom: 20px; }
.cm_list01 > li:last-child { margin-bottom: 0; }
.cm_list01 .cm_list_item { position: relative; padding-left: 45px; }
.cm_list01 .cm_list_item .cm_list_item_num { font-size: 15px; font-weight: bold; line-height: 28px; position: absolute; top: 0; left: 0; width: 30px; height: 30px; text-align: center; color: #fff; border: 1px solid #0f48b9; border-radius: 5px; background: #3673ee; }
.cm_list01 .cm_list_item .cm_list_item_title { font-size: 18px; font-weight: 500; margin-bottom: 5px; color: #222; }
.cm_list01 .cm_list_item .cm_list_item_content { font-size: 16px; color: #555; }
.app_guide_desc { font-size: 21px; margin-bottom: 45px; color: #444; }
.app_guide_list { margin-bottom: 48px; }
.app_guide_list .ag_list > li { margin-bottom: 45px; }
.app_guide_list .ag_list > li:last-child { margin-bottom: 0; }
.app_guide_list .ag_list .ag_list_item { position: relative; padding-top: 25px; }
.app_guide_list .ag_list .ag_list_item .ag_list_item_title { font-size: 17px; font-weight: 500; position: absolute; top: 0; left: 0; display: inline-flex; flex-direction: column; min-width: 310px; height: 45px; padding: 0 25px 0 20px; color: #fff; border-radius: 0 100px 100px 0; background: #3673ee; align-items: center; justify-content: center; }
.app_guide_list .ag_list .ag_list_item .ag_list_item_contents { display: flex; flex-direction: column; border: 1px solid #ddd; justify-content: center; }
.app_guide_list .ag_list .ag_list_item .ag_list_item_content1 { font-size: 18px; padding: 35px 20px; padding-top: 50px; color: #444; }
.app_guide_list .ag_list .ag_list_item .ag_list_item_content2 { padding: 40px; border-top: 1px solid #ddd; background: #f9fcff; }
.app_guide_list .ag_list .ag_list_item .img_list_wrap { display: flex; justify-content: center; }
.app_guide_list .ag_list .ag_list_item .img_list { width: 50%; padding: 0 15px; text-align: center; }
.app_guide_list .ag_list .ag_list_item .img_list img { max-width: 100%; }
.app_guide_list .ag_list_content { display: flex; flex-wrap: wrap; }
.app_guide_list .ag_list_content_item { width: 50%; }
.app_guide_list .ag_list_content_item .img_item { display: none; width: 30%; }
.app_guide_list .ag_list_content_item .img_item img { max-width: 100%; }


/* 경로검색 */
.new_route_info { background-color: #fff; }
.new_route_info .search_area { }
.new_route_info .type_cont.time { }
.new_route_info .route_info { color: #222; font-size: 16px; letter-spacing: -0.5px; }
.new_route_info .route_info_box1 { position: relative; padding: 5px 30px 5px 30px; border-bottom:1px solid #e3e3e3; }
.new_route_info .route_info_box2 { display: flex; padding: 10px 30px; justify-content: space-between; }
.new_route_info .route_info_box3 { padding: 20px 30px; padding-right: 20px; background-color: #eef1f2; }
.new_route_info .route_info_item1 { font-weight: 500; margin-bottom: 10px; }
.new_route_info .route_info_item1 .point { font-weight: bold; font-size: 34px; color:#3673ee; }
.new_route_info .route_info_item2 { display: flex; margin: 0 -15px; }
.new_route_info .route_info_item2 .point { color:#3673ee; }
.new_route_info .route_info_item2 > li { position: relative; padding: 0 15px; }
.new_route_info .route_info_item2 > li:before { position: absolute; right: 0; top: 6px; content:""; display: block; width: 1px; height: 14px; background-color: #b0b0b0; }
.new_route_info .route_info_item2 > li:last-child:before { display: none; }
.new_route_info .route_info_item3 { position: absolute; right: 10px; top: 20px; font-size: 14px; z-index: 1; background-color: #f1f1f1; border:1px solid #dcdcdc; height: 35px; border-radius: 5px; display: flex; align-items: center; padding: 0 15px; }
.new_route_info .route_info_item4 { font-size: 15px; color: #444; }
.new_route_info .route_info_item4 .point { font-weight: bold; }
.new_route_info .route_info_item5 { position: relative; font-size: 15px; padding-left: 20px; padding-right: 15px; }
.new_route_info .route_info_item5:before,
.new_route_info .route_info_item5:after { content:""; display: block; position: absolute; top:50%; }
.new_route_info .route_info_item5:before { left: 0; margin-top: -7.5px; width: 15px; height: 15px; background: url(/images/main/icon_set.png) no-repeat center / contain; }
.new_route_info .route_info_item5:after { right: 0; width: 6px; margin-top: -5.5px; height: 11px; background: url(/images/main/icon_arr_right.png) no-repeat center / contain; }
.new_route_info .route_info_item6 { display: flex; flex-wrap:wrap; margin: -5px; }
.new_route_info .route_info_item6 > li { width: 50%; padding: 5px; }
.new_route_info .route_info_item6 > li > a { display: flex; height: 60px; background-color: #fff; border-radius:5px; justify-content: space-between; align-items: center; padding: 0 15px; }
.new_route_info .route_info_item6_title { font-size: 17px; font-weight: 500; margin-bottom: 10px; }
.new_route_info .route_info_item6_list_title { position: relative; padding-left: 50px; font-size: 15px; }
.new_route_info .route_info_item6_list_title:before { position: absolute; left: 0; top: 50%; margin-top: -20px; border-radius:100%; background-repeat: no-repeat; background-position: center; background-size: contain; content:""; display: block; width: 40px; height: 40px; background-color: #ebf1fd; }
.new_route_info .route_info_item6_list_desc { font-size: 14px; }
.new_route_info .route_info_item6_list_desc .point { font-size: 22px; font-weight: bold; }
.new_route_info .route_info_item6 > li.list1 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info1.png); }
.new_route_info .route_info_item6 > li.list2 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info2.png); }
.new_route_info .route_info_item6 > li.list3 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info3.png); }
.new_route_info .route_info_item6 > li.list4 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info4_new.png); }
.new_route_info .route_info_item6 > li.list5 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info5.png); }
.new_route_info .route_info_item6 > li.list6 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info6.png); }
.new_route_info .route_info_item6 > li.list7 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info7.png); }
.new_route_info .route_info_item6 > li.list8 .route_info_item6_list_title:before { background-image: url(/images/main/icon_route_info8.png); }
.new_route_info .route_info_item6 > li.active {  }
.new_route_info .route_info_item6 > li.active > a { background-color: #3673ee; color: #fff; box-shadow: 4px 3px 10px 0px rgba(0, 0, 0, 0.15); }
.new_route_info .route_info_item6 > li.active .route_info_item6_list_title:before { background-color: #fff; }
.new_route_info .route_info_item6 > li.active .route_info_item6_list_desc { text-decoration: underline; }
.new_route_info .oiling_info {color: #333;padding: 20px 15px;}
.new_route_info .oiling_info ul li {margin-bottom: 5px;}
.new_route_info .oiling_info ul li:last-child { margin-bottom: 0; }
.new_route_info .oiling_info ul li span {display: inline-block; vertical-align: middle; font-size: 16px; line-height: 35px;}
.new_route_info .oiling_info ul li span.label {width: 35px; height: 35px; margin-right: 5px; border: 1px solid #ddd; color: #999;  background: #fff; text-align: center;}
.new_route_info .oiling_info ul li span.label.red {color: #d21919;}
.new_route_info .oiling_info ul li span.label.blue {color: #2385d1;}
.new_route_info .oiling_info ul li span.price {width: 65px;}
.new_route_info .oiling_info ul li span.name {width: 300px;}
.new_route_info .oiling_info ul li .icon {width: 25px; background-size: 100% !important;}
.new_route_info .oiling_info2 {color: #333;padding: 20px 25px;border-bottom: 1px solid #ddd;}
.new_route_info .oiling_info2 ul { margin-top: 5px; }
.new_route_info .oiling_info2 ul li {margin-bottom: 20px;}
.new_route_info .oiling_info2 ul li:last-child { margin-bottom: 0; }
.new_route_info .oiling_info2 ul li dl { position: relative; display: flex; flex-wrap: wrap; padding-left: 50px;}
.new_route_info .oiling_info2 ul li dl:before { background-repeat: no-repeat; background-position: center; content:""; display: block; position: absolute; left: 0; top: -5px; width: 35px; height: 35px; border:1px solid #ddd; }
.new_route_info .oiling_info2 ul li dt { position: relative; padding: 0 10px; font-size: 17px; }
.new_route_info .oiling_info2 ul li dt:after { content:""; display: block; position: absolute; right: 0; top: 7px; width: 1px; height: 14px; background-color: #ddd; }
.new_route_info .oiling_info2 ul li dd {  padding: 0 10px; color:#3673ee; }
.new_route_info .oiling_info2 ul li.type_elt dl:before { background-image: url(/images/main/icon_type_elt.png); }
.new_route_info .oiling_info2 ul li.type_h dl:before { background-image: url(/images/main/icon_type_h.png); }

/* 차종/연료 설정 팝업  */
#FuelPop { font-family: "Poppins", "Noto Sans KR", sans-serif; }
#FuelPop .header_fuel_title { position: relative; padding-left: 30px; }
#FuelPop .header_fuel_title:before { position: absolute; top: 50%; left: 0; display: block; width: 19px; height: 19px; margin-top: -9.5px; content: ""; background: url(/images/main/icon_fuel.png) no-repeat center; }
#FuelPop .popup_inner { width: 100%; max-width: 550px; margin: 30px auto; }
#FuelPop .popup_header { background-color: #3673ee; }
#FuelPop .popup_contents { padding: 20px; }
#FuelPop .fuel_chk1 input { clip: rect(0, 0, 0, 0); position: absolute; width: 1px; height: 40px; margin: -1px; padding: 0; overflow: hidden; border: 0; }
#FuelPop .fuel_chk1 { display: block; }
#FuelPop .fuel_chk1 .chk_label { position: relative; text-align: center; border-radius: 5px; border:1px solid #ddd; padding: 15px 10px; height: 100%; transition: 0.2s ease; }
#FuelPop .fuel_chk1 .chk_label .fuel_title { font-size: 14px; font-weight: bold; margin-bottom: 10px; }
#FuelPop .fuel_chk1 .chk_label .fuel_img { margin: 0 auto; margin-bottom: 10px; background-repeat:no-repeat; background-position: center; background-size:contain; }
#FuelPop .fuel_chk1 .chk_label .fuel_desc { font-size: 14px; line-height: 1.3; }
#FuelPop .fuel_chk1 input:checked + .chk_label { box-shadow: 4px 3px 10px 0px rgba(0, 0, 0, 0.15); color:#3673ee; }
#FuelPop .fuel_chk1 input:checked + .chk_label:before { border-radius: inherit; content:""; display: block; position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; border:2px solid #3673ee; }
#FuelPop .fuel_chk1 input:checked + .chk_label:after { content:""; display: block; width: 25px; height: 25px; border-radius: 100%; background-color: #3673ee; background-image: url(/images/main/icon_chk.png); background-repeat: no-repeat; background-position: center; right: 10px; position: absolute; top: 10px; }
#FuelPop .fuel_chk_list { display: flex; flex-wrap: wrap; margin: -7px; }
#FuelPop .fuel_chk_list > li { padding: 7px; width: 33.3%; }
#FuelPop .fuel_chk_list > li .fuel_chk1 { height: 100%; box-sizing: border-box; }
#FuelPop .fuel_con_title { font-size: 17px; font-weight: 500; margin-bottom: 10px; }
#FuelPop .fuel_con1 { margin-bottom: 20px; }
#FuelPop .fuel_btns { display: flex; align-items: center; justify-content: center; margin-top: 15px; }
#FuelPop .fuel_btn { width: 110px; height: 40px; line-height: 40px; border:0; cursor:pointer; background-color: #373d51; color: #fff; text-align: center; }
#FuelPop .fuel_chk_list > li.list1 .fuel_img { width: 31px; height: 26px; background-image: url(/images/main/icon_fuel1.png); }
#FuelPop .fuel_chk_list > li.list2 .fuel_img { width: 36px; height: 26px; background-image: url(/images/main/icon_fuel2.png); }
#FuelPop .fuel_chk_list > li.list3 .fuel_img { width: 33px; height: 26px; background-image: url(/images/main/icon_fuel3.png); }
#FuelPop .fuel_chk_list > li.list4 .fuel_img { width: 39px; height: 26px; background-image: url(/images/main/icon_fuel4.png); }
#FuelPop .fuel_chk_list > li.list5 .fuel_img { width: 57px; height: 26px; background-image: url(/images/main/icon_fuel5.png); }
#FuelPop .fuel_chk_list > li.list6 .fuel_img { width: 62px; height: 26px; background-image: url(/images/main/icon_fuel6.png); }
#FuelPop .fuel_chk_list > li.list7 .fuel_img { width: 24px; height: 26px; background-image: url(/images/main/icon_fuel7.png); }
#FuelPop .fuel_chk_list > li.list8 .fuel_img { width: 24px; height: 26px; background-image: url(/images/main/icon_fuel8.png); }
#FuelPop .fuel_chk_list > li.list9 .fuel_img { width: 24px; height: 26px; background-image: url(/images/main/icon_fuel9.png); }
#FuelPop .fuel_chk_list > li.list10 .fuel_img { width: 24px; height: 26px; background-image: url(/images/main/icon_fuel10.png); }
#FuelPop .fuel_chk_list > li.list11 .fuel_img { width: 24px; height: 26px; background-image: url(/images/main/icon_fuel11.png); }
#FuelPop .fuel_chk_list > li.list12 .fuel_img { width: 24px; height: 26px; background-image: url(/images/main/icon_fuel12.png); }
#FuelPop .fuel_chk_list > li.list1 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel1_active.png); }
#FuelPop .fuel_chk_list > li.list2 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel2_active.png); }
#FuelPop .fuel_chk_list > li.list3 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel3_active.png); }
#FuelPop .fuel_chk_list > li.list4 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel4_active.png); }
#FuelPop .fuel_chk_list > li.list5 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel5_active.png); }
#FuelPop .fuel_chk_list > li.list6 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel6_active.png); }
#FuelPop .fuel_chk_list > li.list7 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel7_active.png); }
#FuelPop .fuel_chk_list > li.list8 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel8_active.png); }
#FuelPop .fuel_chk_list > li.list9 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel9_active.png); }
#FuelPop .fuel_chk_list > li.list10 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel10_active.png); }
#FuelPop .fuel_chk_list > li.list11 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel11_active.png); }
#FuelPop .fuel_chk_list > li.list12 .fuel_chk1 input:checked + .chk_label .fuel_img { background-image: url(/images/main/icon_fuel12_active.png); }

/* 경로검색 구간별 상세 소통정보 */
.main_container { position: relative; z-index: 100; }
.main_contents .left_wrap .route_search_detail { visibility: hidden; display: flex; flex-direction: column; position: absolute; left: 0; transition: 0.3s ease transform; top: 0; width: 480px; bottom: 0; background: #252931; z-index: 1; }
.main_contents .left_wrap .route_search_detail_title { flex: 0 0 auto; line-height: 60px; height: 60px; color: #fff; text-align: center; font-size: 18px; font-weight: 500; background-color: #000; }
.main_contents .left_wrap .route_search_detail_content { flex: 1 1 auto; overflow: auto; }
.main_contents .left_wrap .route_search_detail_close { position: absolute; left: 100%; top: 20px; white-space: nowrap; overflow: hidden; text-indent: 100%; width: 45px; height: 45px; background-color: #fff; border: 1px solid #ddd; background: url(/images/common/ic_popup_close2.png) center no-repeat; }
.main_contents .left_wrap .route_search_detail_close2 { white-space: nowrap; overflow: hidden; text-indent: 100%; position: absolute; right: -30px; top: 50%; width: 30px; height: 70px; margin-top: -35px; background: url(/images/main/btn_left_open.png) center center no-repeat; z-index: 1; background-size: 100% !important; }
.main_contents .left_wrap .route_search_detail_close2.active { background: url(/images/main/btn_left_close.png) center center no-repeat; }
.main_contents .left_wrap .route_search_detail_section_title { background-color: #f1f1f1; font-weight: 500; font-size: 15px; padding: 5px 20px; }
.main_contents .left_wrap .route_search_detail_section_title .ic_mark { width: 35px; height: 35px; line-height: 40px; }
.main_contents .left_wrap .route_search_detail.open { visibility: visible; left: 100%; }
.main_contents .left_wrap .route_search_detail.active { left: 0; }
.main_contents .left_wrap .route_search_detail.active .route_search_detail_close { display: none; }
.main_contents .left_wrap .route_search_detail.active .route_search_detail_close2 { right: -50px; }

/* 우회도로 검색 및 목록 창 */
.main_contents .left_wrap .bypass_search_list {background: #fff;}
.main_contents .left_wrap .bypass_search_list li a {display: block; padding: 16px 20px; font-size: 18px; color: #444; border-bottom: 1px solid #ddd;}
.main_contents .left_wrap .bypass_search_list li a:hover,
.main_contents .left_wrap .bypass_search_list li a:focus { background: #ebf2fe; }
.main_contents .left_wrap .bypass_search_list li a>span{width: 18px; height: 10px; background-repeat: no-repeat; display: block; float: right; margin-top: 10px; background-image: url('/images/main/bypass/road_list_span_02.png');}
.main_contents .left_wrap .bypass_search_list li a>span.active{background-image: url('/images/main/bypass/road_list_span_01.png');}

.main_contents .left_wrap .tab_cont .ic_mark {width: 28px; height: 27px; margin-right: 4px; padding: 0; line-height: 32px; color: #fff; font-size: 12px; background: url('/images/main/ic_mark_large.png') center center no-repeat;}

/* 우회도로 상세 소통정보 */
.main_container { position: relative; z-index: 100; }
.main_contents .left_wrap .bypass_detail { visibility: hidden; display: flex; flex-direction: column; position: absolute; left: 0; transition: left 0.5s ease transform; top: 0; width: 511px; bottom: 0; background: #252931; z-index: 1; }
.main_contents .left_wrap .bypass_detail_title { flex: 0 0 auto; line-height: 60px; height: 60px; color: #fff; text-align: center; font-size: 23px; font-weight: 700; background-color: #000; }
.main_contents .left_wrap .bypass_detail_title .ic_mark {width: 30px; height: 31px; line-height: 36px; text-align: center; font-size: 12px; color: #fff; background: url('/images/common/ic_mark.png') center center no-repeat; text-indent: 0 !important;}
.main_contents .left_wrap .bypass_detail_title button.web_btn { position: absolute; right: 28px; top: 20px; width: 20px; height: 20px; background-repeat: no-repeat; background-image: url('/images/main/bypass/close.png'); }
.main_contents .left_wrap .bypass_detail_content { flex: 1 1 auto;}

.main_contents .left_wrap .bypass_detail_close { position: absolute; left: 100%; top: 20px; white-space: nowrap; overflow: hidden; text-indent: 100%; width: 45px; height: 45px; background-color: #fff; border: 1px solid #ddd; background: url(/images/common/ic_popup_close2.png) center no-repeat; }
.main_contents .left_wrap .bypass_detail_close2 { white-space: nowrap; overflow: hidden; text-indent: 100%; position: absolute; right: -30px; top: 50%; width: 30px; height: 70px; margin-top: -35px; background: url(/images/main/btn_left_open.png) center center no-repeat; z-index: 1; background-size: 100% !important; }
.main_contents .left_wrap .bypass_detail_close2.active { background: url(/images/main/btn_left_close.png) center center no-repeat; }
.main_contents .left_wrap .bypass_detail_section_title { background-color: #f1f1f1; font-weight: 500; font-size: 15px; padding: 5px 20px; }
.main_contents .left_wrap .bypass_detail_section_title .ic_mark { width: 35px; height: 35px; line-height: 40px; }
.main_contents .left_wrap .bypass_detail.open { visibility: visible; left: 100%; }
.main_contents .left_wrap .bypass_detail.active { left: 0; }
.main_contents .left_wrap .bypass_detail.active .bypass_detail_close { display: none; }
.main_contents .left_wrap .bypass_detail.active .bypass_detail_close2 { right: -50px; }




/* 우회도로 소통정보 바 */

/* 본선 */
.main_contents .left_wrap .route_info .route_speedBar {position: relative; min-height:70px; color: #fff;}
.main_contents .left_wrap .route_info .route_speedBar dl {padding-right: 30%;}
.main_contents .left_wrap .route_info .route_speedBar dt {margin-bottom: 5px; margin-right: 17px; float:right;  font-size: 17px; font-weight: 500; }
.main_contents .left_wrap .route_info .route_speedBar dt span {font-weight: 400; margin-right:10px;}
.main_contents .left_wrap .route_info .route_speedBar dd {font-size: 16px; line-height: 20px; margin-left: 102px;}
.main_contents .left_wrap .route_info .route_speedBar dd strong {font-size: 16px; font-weight: 400;}
.main_contents .left_wrap .route_info .route_speedBar dd span {display: none; height: 20px; margin-right: 5px; padding-left: 25px; vertical-align: top; font-weight: 500; color: #35babc; background-size: auto 84% !important;}
.main_contents .left_wrap .route_info .route_speedBar dd span.bus_speed {background: url('/images/main/ic_bus.png') left center no-repeat;}
.main_contents .left_wrap .route_info .route_speedBar dd span.pass_speed {background: url('/images/main/ic_bypass.png') left center no-repeat;}
.main_contents .left_wrap .route_info .route_speedBar {padding-bottom: 10px;}
.main_contents .left_wrap .route_info .route_speedBar>li {position: relative; padding: 10px 25px 7.5px 50px; /*  border-bottom: 1px solid #3e4146;  */}
.main_contents .left_wrap .route_info .route_speedBar>li.line2 { border-bottom:1px solid #3e4146;}
.main_contents .left_wrap .route_info .route_speedBar>li:before {position: absolute; left: 230px; top: 0; bottom: 0; width: 18px; background: #ddd; content: ""; z-index: 2; border-radius: 50px;border-bottom: 1px solid #252931;}
.main_contents .left_wrap .route_info .route_speedBar>li:first-child:before {top: 10px;}
.main_contents .left_wrap .route_info .route_speedBar>li:after {position: absolute; bottom: -7px; left: 226px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 3; }
.main_contents .left_wrap .route_info .route_speedBar>li:last-child:after {display: none;}
.main_contents .left_wrap .route_info .route_speedBar>li>p {margin-left: -40px; padding-bottom: 7px; font-size: 18px; color: #fff; font-weight: 500; line-height: 35px;}
.main_contents .left_wrap .route_info .route_speedBar>li>p .icon {margin-right: 10px; }
.main_contents .left_wrap .route_info .route_speedBar>li.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .route_speedBar>li.green .road_info dd {color: #088d0e;}
.main_contents .left_wrap .route_info .route_speedBar>li.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .route_speedBar>li.yellow .road_info dd {color: #ffb400;}
.main_contents .left_wrap .route_info .route_speedBar>li.red:before {background: #e81414;}
.main_contents .left_wrap .route_info .route_speedBar>li.red .road_info dd {color: #e81414;}
.main_contents .left_wrap .route_info .route_speedBar>li.gray:before {background: #404040;}
.main_contents .left_wrap .route_info .route_speedBar>li.gray .road_info dd {color: #404040;}

#bypassRouteList .thumb_wrap {position: absolute; right: 15px; bottom: 0; top: 40px; height: 70px; text-align: right;}
#bypassRouteList .thumb_wrap>* {display: inline-block; vertical-align: bottom; margin-left: 5px; font-size: 12px; font-weight: 400;}
#bypassRouteList .thumb_wrap .thumb {height: 80px; cursor: pointer;}

#bypassCctvList .thumb_wrap {position: absolute; right: 56px; top: 70px; height: 70px; text-align: right;}
#bypassCctvList .thumb_wrap>* {display: inline-block; vertical-align: bottom; margin-left: 5px; font-size: 12px; font-weight: 400;}
#bypassCctvList .thumb_wrap .thumb {height: 80px; cursor: pointer;}


/* 우회도로 */
.main_contents .left_wrap .route_info .bypass_speedBar {padding-bottom: 10px;}
.main_contents .left_wrap .route_info .bypass_speedBar>li {position: relative; padding: 10px 25px 7.5px 50px; /*  border-bottom: 1px solid #3e4146;  */}
.main_contents .left_wrap .route_info .bypass_speedBar>li.line2 { border-bottom:1px solid #3e4146; }
.main_contents .left_wrap .route_info .bypass_speedBar>li:before {position: absolute; left: 15px; top: 0; bottom: 0; width: 18px; background: #ddd; content: ""; z-index: 2; border-radius: 50px;border-bottom: 1px solid #252931;}
.main_contents .left_wrap .route_info .bypass_speedBar>li:first-child:before {top: 10px;}
.main_contents .left_wrap .route_info .bypass_speedBar>li:after {position: absolute; bottom: -7px; left: 11px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 3; }
.main_contents .left_wrap .route_info .bypass_speedBar>li:last-child:after {display: none;}
.main_contents .left_wrap .route_info .bypass_speedBar>li>p {margin-left: -40px; padding-bottom: 7px; font-size: 18px; color: #fff; font-weight: 500; line-height: 35px;}
.main_contents .left_wrap .route_info .bypass_speedBar>li>p .icon {margin-right: 10px; }
.main_contents .left_wrap .route_info .bypass_speedBar>li.green:before {background: #088d0e;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.green .bypass_info dd {color: #088d0e;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.yellow:before {background: #ffb400;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.yellow .bypass_info dd {color: #ffb400;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.red:before {background: #e81414;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.red .bypass_info dd {color: #e81414;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.gray:before {background: #404040;}
.main_contents .left_wrap .route_info .bypass_speedBar>li.gray .bypass_info dd {color: #404040;}

.main_contents .left_wrap .route_info .bypass_speedBar .bypass_info {position: relative; min-height:70px; color: #fff;}
.main_contents .left_wrap .route_info .bypass_speedBar .bypass_info dt {display:inline-block; vertical-align: top; margin-bottom: 5px; font-size: 17px; font-weight: 500;}
.main_contents .left_wrap .route_info .bypass_speedBar .bypass_info .label {margin-left: 5px; margin-bottom: 5px; padding: 2px 5px 3px; font-size: 12px; font-weight: 500; color: #fff; border-radius: 5px; border: 1px solid #fff; line-height: 1; transition: 0.2s;}
.main_contents .left_wrap .route_info .bypass_speedBar .bypass_info .bypass_label_video{background: #3773ef; cursor: pointer;}

.main_contents .left_wrap .route_info .route_speedBar .road_info {position: relative; min-height:70px; color: #fff;}
.main_contents .left_wrap .route_info .route_speedBar .road_info dt {display:inline-block; vertical-align: top; margin-bottom: 5px; font-size: 17px; font-weight: 500;}
.main_contents .left_wrap .route_info .route_speedBar .road_info .label {margin-left: 20px; margin-bottom: 5px; padding: 2px 5px 3px; font-size: 12px; font-weight: 500; color: #fff; border-radius: 5px; border: 1px solid #fff; line-height: 1; transition: 0.2s;}
.main_contents .left_wrap .route_info .route_speedBar .road_info .route_label_video{background: #00c0b0; cursor: pointer;}


.main_contents .left_wrap .route_info .route>li:after {position: absolute; bottom: -7px; left: 15px; width: 26px; height: 16px; background: url('/images/main/ic_arrow_bt.png') center center no-repeat; content: ""; z-index: 3; }

.main_contents .left_wrap .bypass_tab {padding: 0 15px;}
.main_contents .left_wrap .bypass_tab li a {display: block; height: 44px; font-size: 18px; text-align: center; line-height: 42px; font-weight: 1000; color: #ffffff; background: #252931;  margin-left: 15px; border: 1px solid #ddd; border-radius: 50px;}
.main_contents .left_wrap .bypass_tab li:hover a{color: #fff; border-color: #3673ee; background: #3f5685;}

.main_contents .left_wrap .bypass_speedTab li a {display: block; height: 107px; font-size: 18px; text-align: center; line-height: 55px; font-weight: 500; color: #777; background: url(/images/main/bypass/bubble.png) center center no-repeat;  background-size: 180px 90px; margin-left: 15px;}

.main_contents .left_wrap .bypass_detail_content .route_info { display: flex;}
.main_contents .left_wrap .bypass_detail_content .route_info .bypass_speedBar { flex:1;}

.main_contents .left_wrap .bypass_detail_content .route_info { display: flex; height: 559px; overflow-y: auto;}
.main_contents .left_wrap .bypass_detail_content .route_info::-webkit-scrollbar { width: 7px; height: 7px; }
.main_contents .left_wrap .bypass_detail_content .route_info::-webkit-scrollbar-thumb {border-radius: 0;background-color: #007aff;}
.main_contents .left_wrap .bypass_detail_content .route_info::-webkit-scrollbar-track { background-color: #252931; }

.main_contents .left_wrap .bypass_detail_content .route_info .route_speedBar { flex:1;}
/* 우회도로 상세 소통정보 끝*/

/* 상단 배너 */
.top_banner { display: flex; flex-wrap: wrap; font-size: 16px; letter-spacing: -1px; }
.top_banner .call_center { color: #fff; padding: 0 0 0 50px; min-height: 50px; display: flex; align-items: center; width: 500px; background-color: #3673ee; }
.top_banner .call_center_cate { height: 35px; line-height: 35px; border-radius: 100px; background-color: #1653cf; padding: 0 20px; }
.top_banner .call_center_cate .point { font-family: 'Play', sans-serif; font-weight: bold; }
.top_banner .call_center_desc { margin: 0 10px 0 10px; }
.top_banner .call_center_content { font-family: 'Play', sans-serif; font-size: 26px; font-weight: bold; color: #ffde00; }
.top_banner .banner_notice { width: calc(100% - 500px); color: #fff; }
.top_banner .banner_notice_list { height: 50px; overflow: hidden; line-height: 50px; }
.top_banner .banner_notice_list .swiper-slide { padding: 0 50px; padding-right: 80px; display: flex; align-items: center; }
.top_banner .banner_notice_list .swiper-slide a { display: flex; align-items: center; color:inherit; width: 100%; }
.top_banner .banner_notice_list .swiper-slide a:hover .notice_content { text-decoration: underline; }
.top_banner .banner_notice_list .swiper-slide.type1 { background-color: #1853cb; }
.top_banner .banner_notice_list .swiper-slide.type2 { background-color: #e52c31; }
.top_banner .banner_notice_list .swiper-slide.type3 { background-color: #e52c31; }
.top_banner .banner_notice_list .notice_cate { position: relative; padding-left: 30px; flex: 0 0 auto; font-size: 15px; font-weight: 500; margin-right: 25px; }
.top_banner .banner_notice_list .notice_cate:before { content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -9px; width: 20px; height: 18px; background: url(/images/common/icon_noti.png) no-repeat center; }
.top_banner .banner_notice_list .notice_content { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 500; }
.top_banner .banner_notice_list_control { position: absolute; right: 50px; top: 0; z-index: 1; height: 50px; display: flex; justify-content: center; flex-direction: column; }
.top_banner .banner_notice_list_control .control_btn { width: 12px; height: 7px; background-repeat: no-repeat; background-position: center; margin: 7px 0; background-size: contain; white-space: nowrap; overflow: hidden; text-indent: 100%; }
.top_banner .banner_notice_list_control .control_btn.prev { background-image: url(/images/common/icon_prev1.png); }
.top_banner .banner_notice_list_control .control_btn.next { background-image: url(/images/common/icon_next1.png); }
.header_wrap #gisColor { position: absolute; right: 50px; top: 50%; display: flex; margin-top: -22.5px; letter-spacing: -1px; height: 45px; border-radius: 100px; font-weight: 500; font-size: 15px; background-color: #f7f7f7; border: 1px solid #d3d3d3; padding: 0 25px; align-items: center; }
.header_wrap #gisColor span { position: relative; display: block; padding-left: 25px; }
.header_wrap #gisColor span:before { position: absolute; left: 0; top: 50%; margin-top: -6.5px; content:""; width: 17px; height: 15px; display: block; width: 17px; height: 15px; background: url(/images/common/icon_noti2.png) no-repeat center / contain; }
.header_wrap #gisColor span.changed:before { position: absolute; left: 0; top: 50%; margin-top: -6.5px; content:""; width: 17px; height: 15px; display: block; width: 17px; height: 15px; background: url(/images/common/icon_noti4.png) no-repeat center / contain; }
.header_wrap #gisColor .pc_none { display: none; }

/* 교통속보 팝업  */
#trafficNews { font-family: "Poppins", "Noto Sans KR", sans-serif; }
#trafficNews .header_traffic_news_title { position: relative; padding-left: 30px; }
#trafficNews .header_traffic_news_title:before { position: absolute; top: 50%; left: 0; display: block; width: 19px; height: 19px; margin-top: -9.5px; content: ""; background: url(/images/common/icon_noti3.png) no-repeat center; }
#trafficNews .popup_inner { width: 100%; max-width: 460px; margin: 100px auto; }
#trafficNews .popup_header { background-color: #e52c31; }
/* #trafficNews .popup_contents { padding: 20px; } */
#trafficNews .traffic_news_content_wrap { position: relative; width: 100%; }
/* #trafficNews .traffic_news_content_wrap:before { display: block; content:""; padding-top: 66.6%; } */
#trafficNews .traffic_news_content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }


/* 전기차 충전소 팝업 - 전소현 수정 kmk */
.road_name_04 {font-size: 16px; background-color: #2A75CA;display: inline-block;padding: 5px 20px;border-radius: 50px;color: #fff;}
#elecoccarPop .popup_inner {}
#elecoccarPop .popup_inner .popup_header {background-color: #3ABDB4;}
#elecoccarPop .popup_contents {height: 550px;overflow: hidden;}
#elecoccarPop .popup_contents .elec_scroll{height: 370px;overflow-y: scroll;}
#elecoccarPop .popup_contents .elec_scroll::-webkit-scrollbar { width: 7px; height: 7px; }
#elecoccarPop .popup_contents .elec_scroll::-webkit-scrollbar-thumb {border-radius: 0;background-color: #3ABDB4;}
#elecoccarPop .popup_contents .elec_scroll::-webkit-scrollbar-thumb:hover { background-color: #3ABDB4; }
#elecoccarPop .popup_contents .elec_scroll::-webkit-scrollbar-track { background-color: #ccc; }

#elecoccarPop .road_wrap {display: flex;align-items: center;justify-content: center;gap: 30px; padding: 20px;}
#elecoccarPop .road_wrap .road_img_wrap {background-repeat: no-repeat; width: 120px; height: 120px; background-size: contain; background-image: url(/images/main/new/road_img_wrap2.png);}
#elecoccarPop .road_wrap .road_name_wrap > div {margin-bottom: 10px;}
#elecoccarPop .road_wrap .road_name_wrap > div.road_name_04 {margin-bottom: 0px;background-color: #3ABDB4;}
#elecoccarPop .elec_status {display: flex;border-top: 1px solid #ddd;border-bottom: 10px solid #ddd;}
#elecoccarPop .elec_status>div {display: flex; width: 50%;padding: 10px 20px;font-size: 18px;font-weight: 500; justify-content: center;}
#elecoccarPop .elec_status>div:first-child {border-right: 1px solid #ddd;}
#elecoccarPop .elec_status>div>i {width: 30px;height: 30px;display: inline-block;background-size: contain;background-repeat: no-repeat;}
#elecoccarPop .elec_status>div>span {font-weight: bold;}
#elecoccarPop .elec_status>div:first-child>i {background-image: url(/images/main/new/elec_status_1.png);}
#elecoccarPop .elec_status>div:last-child>i {background-image: url(/images/main/new/elec_status_2.png);}
#elecoccarPop .elec_status>div:last-child>span {color: #198DEF;}
#elecoccarPop .elec_info {padding: 20px; border-bottom: 10px solid #ddd;}
#elecoccarPop .elec_info .elec_info_wrap{margin-top: 30px;}
#elecoccarPop .elec_info .elec_info_title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
#elecoccarPop .elec_info .elec_info_title>div:first-child {font-size: 20px;font-weight: bold;color: #3ABDB4;}
#elecoccarPop .elec_info .elec_info_title>div:last-child {font-size: 14px;}
#elecoccarPop .elec_info .elec_info_text {font-weight: bold;font-size: 18px;margin-bottom: 20px;}
#elecoccarPop .elec_info .elec_info_type {display: flex;gap: 10px;align-items: center;position: relative;margin-bottom: 10px;}
#elecoccarPop .elec_info .elec_info_type>div {padding: 8px 15px;border: 1px solid #eee;}
#elecoccarPop .elec_info .elec_info_type>span {position: absolute;right: 0px;color: #777;}
#elecoccarPop .elec_info .elec_info_type>span::before {background-repeat: no-repeat; position: absolute; left: -20px; top: 4px; content: ''; display: inline-block; width: 15px;height: 15px;background-size: contain; background-image: url(/images/main/new/elec_info_type_span.png);}
#elecoccarPop .elec_info .elec_info_list_wrap {display: flex;gap: 10px; flex-wrap: wrap;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list {width: 48%;padding: 20px 30px;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list.on {background: #F3F9FE;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list.off {background: #F8F8F8;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list .elec_info_list_text1 {font-size: 18px;font-weight: bold;display: flex;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list.on .elec_info_list_text1 {color: #198DEF;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list.off .elec_info_list_text1 {color: #555;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list .elec_info_list_text1>i {display: block;width: 30px;height: 30px;background-size: contain;background-repeat: no-repeat;}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list.on .elec_info_list_text1>i {background-image: url(/images/main/new/elec_status_2.png);}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list.off .elec_info_list_text1>i {background-image: url(/images/main/new/elec_status_1.png);}
#elecoccarPop .elec_info .elec_info_list_wrap .elec_info_list .elec_info_list_text2 {margin-top: 10px; font-size: 16px;font-weight: 500;color: #555;}
#elecoccarPop .elec_info2 {padding: 20px;}
#elecoccarPop .elec_info2 .elec_info_wrap{margin-top: 30px;}
#elecoccarPop .elec_info2 .elec_info_title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
#elecoccarPop .elec_info2 .elec_info_title>div {font-size: 20px;font-weight: bold;color: #3ABDB4;}
#elecoccarPop .elec_info2 .elec_info_title>span {cursor: pointer; margin-top: 6px; width: 20px;height: 20px;background-repeat: no-repeat;background-size: contain;}
#elecoccarPop .elec_info2 .elec_info_title>span.elec_info_title_btn1 {background-image: url(/images/main/new/elec_info2_span.png);}
#elecoccarPop .elec_info2 .elec_info_title>span.elec_info_title_btn2 {background-image: url(/images/main/new/elec_info2_span2.png);}
#elecoccarPop .elec_info2 .elec_info_list2 {display: flex;}
#elecoccarPop .elec_info2 .elec_info_list2>div {width: 50%;font-size: 16px;}
#elecoccarPop .elec_info2 .elec_info_list2>div>div {position: relative;margin-left: 30px;margin-bottom: 10px;}
#elecoccarPop .elec_info2 .elec_info_list2>div>div>strong {color: #198DEF;}
#elecoccarPop .elec_info2 .elec_info_list2>div>div::before {content: '';display: block; position: absolute; left: -30px; width: 25px;height: 25px;background-repeat: no-repeat; background-size: contain;}
#elecoccarPop .elec_info2 .elec_info_list2>div>div:first-child:before {background-image: url(/images/main/new/elec_info_offic1.png);}
#elecoccarPop .elec_info2 .elec_info_list2>div>div:last-child:before {background-image: url(/images/main/new/elec_info_offic2.png);}
#elecoccarPop .elec_info2 .elec_info_text2 {background-color: #EBF9FE;padding: 20px;margin-top: 10px;}

/* 수소차 충전소 - 전소현 kmk  */
#hydrocarPop .popup_inner {height:640px;}
#hydrocarPop .popup_inner .popup_header {background-color: #22A2D9;}
#hydrocarPop .popup_inner .popup_contents {height: 500px;}

#hydrocarPop .popup_inner .hydro_scroll{height: 415px;overflow-y: scroll;  }
#hydrocarPop .popup_inner .hydro_scroll::-webkit-scrollbar { width: 7px; height: 7px; }/* 2023-09-04 반응형 및 수정 요청 */
#hydrocarPop .popup_inner .hydro_scroll::-webkit-scrollbar-thumb {border-radius: 0;background-color: #22A2D9;}/* 2023-09-04 반응형 및 수정 요청 */
#hydrocarPop .popup_inner .hydro_scroll::-webkit-scrollbar-thumb:hover { background-color: #22A2D9; }/* 2023-09-04 반응형 및 수정 요청 */
#hydrocarPop .popup_inner .hydro_scroll::-webkit-scrollbar-track { background-color: #ccc; }/* 2023-09-04 반응형 및 수정 요청 */
#hydrocarPop .road_wrap {display: flex;align-items: center;justify-content: center;gap: 30px; padding: 20px;}
#hydrocarPop .road_wrap .road_img_wrap { width: 120px; height: 120px; background-size: contain; background-image: url(/images/main/new/road_img_wrap_hydro.png);background-repeat: no-repeat;}
#hydrocarPop .road_wrap .road_name_wrap > div {margin-bottom: 10px;}
#hydrocarPop .road_wrap .road_name_wrap > div.road_name_04 {margin-bottom: 0px;background-color: #22A2D9;}
#hydrocarPop .hydro_status {display: flex;border-top: 1px solid #ddd;border-bottom: 10px solid #ddd;}
#hydrocarPop .hydro_status>div {display: flex;padding: 10px 20px;font-size: 18px;font-weight: 500; justify-content: center;align-items: center;}
#hydrocarPop .hydro_status>div:first-child { width: 40%; border-right: 1px solid #ddd;background: #22A2D9;color: #fff;}
#hydrocarPop .hydro_status>div:last-child { width: 60%;}
#hydrocarPop .hydro_status>div>i {width: 30px;height: 30px;display: inline-block;background-size: contain;background-repeat: no-repeat;background-image: url(/images/main/new/ion_card-sharp.png);margin-right: 10px;}
#hydrocarPop .hydro_status>div>span {font-weight: bold;color: #222;}
#hydrocarPop .hydro_info {padding: 10px 20px 20px 20px; border-bottom: 10px solid #ddd;}
#hydrocarPop .hydro_info .hydro_info_title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;font-size: 20px;font-weight: bold;color: #22A2D9;}
#hydrocarPop .hydro_info .hydro_info_wrap {width: 100%;}/* 0825 전소현 수정 */
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_img {width: 100%;}/*0825 전소현 수정*/
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_img img {width: 100%; height:100%}/*0825 전소현 수정*/
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_text {display: flex;justify-content: space-between;font-weight: 500; font-size: 16px;padding: 15px 0 0;}
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_text .hydro_text_1 {padding-left: 30px;position: relative;}
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_text .hydro_text_1::before {content: '';display: block; left: 0px; width: 25px;height: 25px;position: absolute;background-image: url(/images/main/new/hydro_info_text1.png);background-repeat: no-repeat;background-size: contain;}
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_text .hydro_text_2 {display: flex;}
#hydrocarPop .hydro_info .hydro_info_wrap .hydro_info_text .hydro_text_2>span {padding: 0 8px; color: #22A2D9;font-weight: bold;}
#hydrocarPop .hydro_info2 {padding: 10px 20px 20px 20px;}
#hydrocarPop .hydro_info2 .hydro_info_wrap{margin-top: 30px;}
#hydrocarPop .hydro_info2 .hydro_info_title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
#hydrocarPop .hydro_info2 .hydro_info_title>div {font-size: 20px;font-weight: bold;color: #22A2D9;}
#hydrocarPop .hydro_info2 .hydro_info_title>span {cursor: pointer; margin-top: 6px; width: 20px;height: 20px;background-repeat: no-repeat;background-size: contain;}
#hydrocarPop .hydro_info2 .hydro_info_title>span.hydro_info_title_btn1 {background-image: url(/images/main/new/hydro_info2_span.png);}
#hydrocarPop .hydro_info2 .hydro_info_title>span.hydro_info_title_btn2 {background-image: url(/images/main/new/hydro_info2_span2.png);}
#hydrocarPop .hydro_info2 .hydro_info_list2 {display: flex;}
#hydrocarPop .hydro_info2 .hydro_info_list2>div {width: 100%;font-size: 16px;}
#hydrocarPop .hydro_info2 .hydro_info_list2>div>div {position: relative;margin-left: 30px;margin-bottom: 10px;}
#hydrocarPop .hydro_info2 .hydro_info_list2>div>div>strong {color: #198DEF;}
#hydrocarPop .hydro_info2 .hydro_info_list2>div>div::before {content: '';display: block; position: absolute; left: -30px; width: 25px;height: 25px;background-repeat: no-repeat; background-size: contain;}
#hydrocarPop .hydro_info2 .hydro_info_list2>div>div:first-child:before {background-image: url(/images/main/new/elec_info_offic1.png);}
#hydrocarPop .hydro_info2 .hydro_info_list2>div>div:nth-child(2):before {background-image: url(/images/main/new/elec_info_offic2.png);}
#hydrocarPop .hydro_info2 .hydro_info_list2>div>div:last-child:before {background-image: url(/images/main/new/elec_info_offic3.png);}
#hydrocarPop .hydro_info2 .hydro_info_text2 {background-color: #EBF9FE;padding: 10px;margin-top: 5px;}


/* 멀티 cctv */
.main_contents .left_wrap .search_list li input[type="checkbox"] { margin-right: 8px; appearance: none; width: 14px; height: 14px; border: 1px solid #D5D5D5; border-radius: 4px; outline: none; cursor: pointer; transition: all 0.3s ease-in-out; box-shadow: 1px 1px 3px dimgray; display: none;}
.main_contents .left_wrap .search_list li input[type="checkbox"]:checked { background-color: #007aff; border:1.5px solid #3673ee;}

.main_contents .left_wrap .toggleCCTV { background-color: #3673ee; color: #fff; cursor: pointer; width: 100%; height: 50px; font-size: 18px; position: sticky; top: 0px; z-index: 2;}

.togglePop {
    display: none;
    position: absolute;
    top: 311px;
    left: 715px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    width:430px;
}
.toggle_header{
    cursor: grab;
    position: relative;
    height: 45px;
    padding: 0 20px;
    line-height: 45px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: #35babc;
}
.toggle_cctv_title{
    padding-left: 35px;
    background: url(/images/main/ic_camera.png) left center no-repeat;
    background-size: auto 15px;
}
.toggle_contents{
    padding: 20px;
}
.toggle_header .btn_close {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 100%;
    background: url(/images/common/ic_popup_close.png) center center no-repeat;
    text-indent: -9999px;
}
.toggle_video_wrap{
    margin-top: 2px;
    position: relative;
}
.toggle_view_cctv{
    height: 280px;
}
.toggle_view_cctv:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.toggle_view_cctv.on:after {
    position: unset;
}
.toggle_contents .toggle_btn_reload{
    left: 10px;
    top: 10px;
    background: url(/images/main/btn_reload.png) center center no-repeat;
    position: absolute;
    width: 54px;
    height: 54px;
    text-indent: -9999px;
    border: 0;
    margin: 7px 10px;
    cursor: pointer;
}
.m_toggle_btn_reload{
    background: url(/images/main/btn_reload.png) center center no-repeat;
    width: 35px;
    background-size: 100% !important;
    position: absolute;
    z-index: 1;
    text-indent: -9999px;
    border: 0;
    margin: 10px;
    cursor: pointer;
}
#toggleCCTVOn{
    background: #373d51;
    transition: all ease 0.5s 0s;
    border:0;
}
.cctvSelectedA{
    position: relative;
    cursor: default;
}
.cctvSelectedA:hover{
    background: #fff
}
.cctvSelectedR{
    border: 1px solid #ddd;
    float: right;
    position: absolute;
    top: 1px;
    background: #fdebec;
    color: #e73d42;
    right: 0px;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: bold;
}
#popupContainer1{
    left:1150px;
}
#popupContainer2{
    top:750px;
}
#popupContainer3{
    top:750px;
    left:1150px;
}
.toggleMPop{
    height: 100%;
    z-index: 10000;
    position: fixed;
    background-color: #373d51;
    display: none;
    overflow: scroll;
    width: 100%;
    color: white;
}
.toggleMPopHeader{
    background: #3673ee;
    height: 40px;
    padding: 0 15px;
    line-height: 40px;
    font-size: 16px;
    position: relative;
}
.toggleMTilte{
    text-align: center;
}
.toggleMClose{
    right: 15px;
    width: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    background: url('/images/common/ic_popup_close.png') center center no-repeat;
    padding: 0;
    text-indent: -9999px;
}
#toggle_view_mcctv{
    padding: 0 15px;
}
.toggleMText{
    padding: 10px 0;
    font-size: 14px;
}
.M_cctv_list{
    display: inline-flex;
    margin-left: 5px;
}
.M_cctv_list > li {
    font-size: 13px;
    padding: 0 4px;
    position: relative;
}
.M_cctv_list > li:before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 15px;
    background: white;
    right: 0;
    top: 50%;
    margin-top: -7.5px;
}
.M_cctv_list > li:last-child:before {
    display: none;
}
.Map_search_menu{
    position: absolute;
    left: 520px;
    top: 20px;
    z-index: 2;
    display: inline-flex;
}
.clear-button {
    display: none;
    cursor: pointer;
    position: absolute;
    right: calc(100% - 98%);
    text-align: center;
    font-size: 20px;
    top:0;
}
.search_input{
    position: relative;
}
.search_input_text{
    width: 300px;
}
.search_result_list{
    border-radius: 0 0 10px 10px;
    max-height: 150px;
    overflow: auto;
    position: absolute;
    width: -webkit-fill-available;
    margin-right: 55px;
    display: block;
    border-top: none;
} /*20230901 전소현 수정*/
.search_result_list::-webkit-scrollbar {width: 7px; height: 7px; }
.search_result_list::-webkit-scrollbar-thumb {border-radius: 5px;background-color: #3673ee;}
.search_result_list::-webkit-scrollbar-thumb:hover {border-radius: 10px; background-color: #1954cb; }
.search_result_list::-webkit-scrollbar-track {border-radius: 10px; background-color: #ccc; }

.search_result_li{
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 15px;
    color: #444;
    border-bottom: 1px solid #ddd;
    background: white;
}
.search_result_li span{
    flex:6;
}
.search_result_li span:last-child{
    text-align: end;
    flex:4;
}
.search_result_li:hover,
.search_result_li:focus { background: #ebf2fe; }
.search_result_li span:last-child::before {
    content: "";
    position: absolute;
    width: 3px;
    left: 0;
    height: 25px;
    background-color: #007aff;
}
.search_result_li span:last-child {
    position: relative;
    padding-left: 10px;
}


/* 검색목록(신규) */
.road_list {background: #fff;}
.road_list {background: #fff;}
.road_list>li>a {display: block;padding: 16px 20px;font-size: 18px;color: #444;border-bottom: 1px solid #ddd;}
.road_list>li>a:focus,
.road_list>li>a:hover {background: #ebf2fe;}
.road_list>li>a>span {width: 18px;height: 10px;background-repeat: no-repeat;display: block;float: right;margin-top: 10px;background-image: url('/images/main/new/road_list_span_02.png');}
.road_list>li>a>span.active {background-image: url('/images/main/new/road_list_span_01.png');}
.road_sublist {background: #373D51;display: none;}
.road_sublist>li>a {padding: 16px 20px;font-size: 18px;color: #fff;border-bottom: 1px solid #ddd;display: flex;justify-content: center;align-items: center;}
.road_sublist>li>a:focus,
.road_sublist>li>a:hover {background: #198DEF;}
.road_sublist>li>a>span.sublist_text {width: 130px;text-align: center;}
.road_sublist>li>a>span.sublist_line {width: 20px;height: 1px;background: #D9D9D9;}


/* 통합검색(신규) */
.search_wrap_bar {position: absolute;left: 520px;top: 20px;z-index: 5;display: flex;background: #fff;border-radius: 10px;border: 1px solid #ddd;transition: all.5s ease;}
.search_wrap_bar .search_text {width: 70px;height: 50px;font-size: 18px;text-align: center;line-height: 50px;border-right: 1px solid #ddd;font-weight: bold;}
.search_wrap_bar .search_text p {color: #3673EE;}
.search_wrap_bar .search_inner {display: flex; justify-content: center; align-items: center; padding: 0 10px; gap: 10px; border-right: 1px solid #ddd; }
.search_wrap_bar .search_inner > div > select {width: 130px;font-size: 16px;}
.search_wrap_bar .search_inner > div > form {position: relative;}
.search_wrap_bar .search_inner > div > form > input {width: 350px;font-size: 15px;}
.search_wrap_bar .search_inner > div > form > button {display: block;width: 20px;height: 20px;position: absolute;right: 10px;top: 7px;background-image: url('/images/main/new/search.png');background-repeat: no-repeat;background-size: contain;}
.search_wrap_bar .search_btn {width: 45px;height: 50px;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.search_wrap_bar .search_btn i {display: block;background-size: contain;background-repeat: no-repeat;}
.search_wrap_bar .search_btn i.search_close_btn {width: 22px;height: 22px;background-image: url('/images/main/new/search_open_btn.png');}
.search_wrap_bar .search_btn i.search_open_btn {width: 13px;height: 22px;background-image: url('/images/main/new/search_close_btn.png');}
.search_wrap_bar.active {left:30px;}

/* 통합검색 결과목록 - 20230901 전소현 수정 */
.search_result_list > li > a {position: relative; display: flex;justify-content: space-between;background: #fff;padding: 10px 15px;font-size: 16px;border-bottom: 1px solid #ddd;border-top: none;}
.search_result_list > li > a:hover {background: #F3F9FE;}
.search_result_list > li > a > span:first-child::after {content: '';display: block;width: 2px;height: 20px;background-color: ;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

/* 위험기상 팝업 - 20231212 정우진 추가 */
#DangerWeatherPop .popup_inner { width: 500px; margin: 40px auto 0; }
#DangerWeatherPop .popup_inner .popup_header{ position: relative; height: 45px; padding: 0 20px; line-height: 45px; text-align: center; font-size: 18px; font-weight: 500; color: #fff; background: #3d35e9;}
#DangerWeatherPop .popup_contents { padding: 15px 20px; }
#DangerWeatherPop .popup_contents .road_name { padding: 11px 20px; font-size: 15px; text-align: center; background: #3E47CC1A; border-radius: 20px}
#DangerWeatherPop .popup_contents .road_name strong { font-size: 18px; font-weight: 700; color: #3d35e9;}

#DangerWeatherPop .popup_contents .dangerRoadSec { display: flex; justify-content: flex-start; width:100%; height: 40px;}
#DangerWeatherPop .popup_contents .dangerRoadSec .dangeRoadnm { font-size: 19px; font-weight: 800; color: #222; margin-left: 10px;}
#DangerWeatherPop .popup_contents .dangerRoadSec .ic_mark {font-weight: 500; line-height: 33px; width: 30px; height: 30px;margin-right: 3px; text-align: center; font-size: 12px; color: #fff;background: url(/images/common/ic_mark.png) center center no-repeat;}

#DangerWeatherPop .content_bg { padding: 15px 20px; padding-top: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #f6f6f6; }
#DangerWeatherPop .video_wrap { position: relative; margin-bottom: 0; }
#DangerWeatherPop .danWeatherStartNode { float:left; font-weight: 500; }
#DangerWeatherPop .danWeatherEndNode   { float:right; font-weight: 500; }
#DangerWeatherPop .video_wrap .video { position: relative; height: auto; }
#DangerWeatherPop .video_wrap .btn { position: absolute; width: 54px; height: 54px; text-indent: -9999px; border: 0; }
#DangerWeatherPop .video_wrap .btn_reload { top: 10px; left: 10px; background: url("/images/main/btn_reload.png") center center no-repeat; }
#DangerWeatherPop .video_wrap .btn_zoom { right: 10px; bottom: 10px; background: url("/images/main/btn_zoom.png") center center no-repeat; }

#DangerWeatherPop .btn_wrap { font-size: 0; position: relative; margin-bottom: 10px; padding: 0 30px; }
#DangerWeatherPop .btn_wrap p { font-size: 15px; font-weight: 500; display: inline-block; width: 29%; text-align: center; vertical-align: middle; color: #666; position: relative; }
#DangerWeatherPop .btn_wrap p .decoration:before,
#DangerWeatherPop .btn_wrap p .decoration:after { position: absolute; top: 50%; display: block; width: 15px; height: 1px; content: ""; background: #3d35e9; }
#DangerWeatherPop .btn_wrap p .decoration:before { left: 0; }
#DangerWeatherPop .btn_wrap p .decoration:after { right: 0; }
#DangerWeatherPop .btn_wrap p.fontActive { color: #3d35e9;font-size: 16px;line-height: 1.1;position: relative;width: 42%;padding: 0 20px;}

#DangerWeatherPop .btn_wrap .btn { position: absolute; top: 50%; bottom: 0; width: 18px; height: 35px; margin-top: -17.5px; padding: 0; text-indent: -9999px; }
#DangerWeatherPop .btn_wrap .btn_prev { left: 0; background: url("/images/main/ic_left_way.png") center center no-repeat; }
#DangerWeatherPop .btn_wrap .btn_next { right: 0; background: url("/images/main/ic_right_way.png") center center no-repeat; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 { display: flex; flex-direction: row; width: 100%; margin-top: 15px; align-items: flex-start; justify-content: space-between; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap1 { display: flex; flex-direction: column; width: 32%; align-items: flex-start; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2 { display: flex; flex-direction: column; width: 32%; align-items: flex-start; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap3 { display: flex; flex-direction: column; width: 32%; align-items: flex-start; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan { display: flex; overflow: hidden; flex-direction: column; box-sizing: border-box; width: 100%; height: 89px; background-color: #1d1d1d; align-items: center; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan.active { box-shadow: 0 0 0 5px #3d35e9;}
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan .cctv_img_wrap { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan .cctv_img_wrap .active { box-shadow: 0 0 0 5px #3d35e9;}
/*#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan .cctv_img_wrap2 { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan .cctv_img_wrap2.active { box-shadow: 0 0 0 5px #3d35e9; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan .cctv_img_wrap3 { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; align-items: center; justify-content: center; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_blackBg_dan .cctv_img_wrap3.active { box-shadow: 0 0 0 5px #3d35e9;} */

#DangerWeatherPop .rd_cctv_cntnts_Wrap1 .cctv_box_wrap1.active { box-shadow: 0 0 0 5px #3d35e9; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap2 .cctv_box_wrap2.active { box-shadow: 0 0 0 5px #3d35e9; }
#DangerWeatherPop .rd_cctv_cntnts_Wrap3 .cctv_box_wrap3.active { box-shadow: 0 0 0 5px #3d35e9; }

#DangerWeatherPop .content_bottom { padding: 0 20px; }

#DangerWeatherPop .rd_cctv_ttl2 { display: flex; align-items: center; width:93%; height: 40px; background-image:url(../../images/main/cctv_ico_danger.png); background-repeat: no-repeat;  margin-left: 20px; margin-top: 20px; justify-content: flex-end;}

#DangerWeatherPop .rd_cctv_ttl2 .DangerWeatherTtl { display: flex; justify-content: flex-end;}
#DangerWeatherPop .rd_cctv_ttl2 .DangerWeatherTtl img{height: 45px; margin-top: -20px; margin-left: auto; }
#DangerWeatherPop .rd_cctv_ttl2 .DangerWeatherTtl .text-notice1{margin-top: -13px; margin-left: 5px; font-weight: 700; font-size: 20px; color:#FFEA00; }
#DangerWeatherPop .rd_cctv_ttl2 .DangerWeatherTtl .text-notice2{margin-top: -13px; margin-left: 5px; font-weight: 700; font-size: 20px; color:#FF7F25; }
#DangerWeatherPop .rd_cctv_ttl2 .DangerWeatherTtl .text-notice3{margin-top: -13px; margin-left: 5px; font-weight: 700; font-size: 20px; color:#EC1C24; }

.left_wrap {
    position: relative;
}
/* 검색목록(신규) */
.road_list {
    background: #fff;
}
.road_list {
    background: #fff;
}
.road_list>li>a {
    display: block;
    padding: 16px 20px;
    font-size: 18px;
    color: #444;
    border-bottom: 1px solid #ddd;
}
.road_list>li>a:focus,
.road_list>li>a:hover {
    background: #ebf2fe;
}
.road_list>li>a>span {
    width: 18px;
    height: 10px;
    background-repeat: no-repeat;
    display: block;
    float: right;
    margin-top: 10px;
    background-image: url('/images/main/new/road_list_span_02.png');
}
.road_list>li>a>span.active {
    background-image: url('/images/main/new/road_list_span_01.png');
}
.road_sublist {
    background: #373D51;
    display: none;
}
.road_sublist>li>a {
    padding: 16px 20px;
    font-size: 18px;
    color: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}
.road_sublist>li>a:focus,
.road_sublist>li>a:hover {
    background: #198DEF;
}
.road_sublist>li>a>span.sublist_text {
    width: 130px;
    text-align: center;
}
.road_sublist>li>a>span.sublist_line {
    width: 20px;
    height: 1px;
    background: #D9D9D9;
}


/*전소현 2023-08-23 우회도로 정보(신규) */
.road_subcont {
    background: #fff;
    position: absolute;
    left: 500px;
    top: 0;
    width: 500px;
    height: 100%;
    border-right: 1px solid #3c4047;
    display: none;
}
.road_subcont.active {
    display: block;
}

.road_subcont .subcont_title {
    position: relative;
    width: 100%;
    height: 80px;
    background: #252931;
    text-align: center;
    font-size: 20px;
    line-height: 80px;
}
.road_subcont .subcont_title button.mobile_btn {
    position: absolute;
    left: 25px;
    top: 14px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(/images/main/new/mobile_Btn.png);
    display: none;
}
.road_subcont .subcont_title button.web_btn {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url('/images/main/new/close.png');
}
.subcont_tab {
    display: flex;
}
.subcont_tab>li {
    width: 50%;
    height: 60px;
}
.subcont_tab>li>a {
    display: block;
    height: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 60px;
    background-color: #eee;
}
.subcont_tab>li>a:focus,
.subcont_tab>li>a:hover
{
    color: #fff;
    background-color: #198DEF;
}
.subcont_wrap {
    width: 100%;
    height: calc(100% - 140px);
    position: relative;
    margin-bottom: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.subcont_wrap>.subcont_01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.subcont_wrap>.subcont_01>.subcont_subtitle {
    display: flex;
    color: #333;
    justify-content: space-around;
    margin-top: 20px;
}
.subcont_wrap>.subcont_01>.subcont_subtitle>div {
    width: 190px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50px;
    font-size: 16px;
}
.subcont_wrap>.subcont_01>.subcont_subtitle>div.subtitle_left {
    background: #Fafafa;
    border: 1px solid #ddd;
}
.subcont_wrap>.subcont_01>.subcont_subtitle>div.subtitle_right {
    border: 1px solid #198DEF;
    color: #198DEF;
}
.subcont_wrap>.subcont_01>.subcont_bub {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
.subcont_wrap>.subcont_01>.subcont_bub>div {
    margin-top: 20px;
    width: 180px;
    height: 84px;
    font-size: 16px;
    text-align: center;
    padding: 10px;
    background-repeat: no-repeat;
    background-image: url('/images/main/new/bubble.png');
}
.subcont_wrap>.subcont_01>.subcont_bub>div>strong.gn {
    color: #34971F;
}
.subcont_wrap>.subcont_01>.subcont_bub>div>strong.yw {
    color: #FFC000;
}
.subcont_wrap>.subcont_01>.subcont_bub>div>strong.red {
    color: #C00000;
}
.subcont_wrap>.subcont_01>.subcont_bub>div>p {
    font-size: 12px;
    color: #333;
}

.subcont_list {
    margin-bottom: 30px;
}
.subcont_list .list_wrap {
    color: #333;
    height: 180px;
}
.subcont_list .list_wrap {
    width: 100%;
    display: flex;
    gap: 20px;
}
.subcont_list .list_wrap .list {
    width: 50%;
    height: 100%;
    display: flex;
}
.subcont_list .list_wrap .list_left {
    justify-content: flex-end;
}
.subcont_list .list_wrap .list_right {
    justify-content: flex-start;
}
.subcont_list .list_wrap .list .cctv {
    float: left;
    width: 75%;
}
.subcont_list .list_wrap .list .cctv span {
    display: block;
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
}
.subcont_list .list_wrap .list .cctv div {
    width: 100%;
    height: 120px;
    background: #000;
}
.subcont_list .list_wrap .list .line {
    width: 20px;
    height: 100%;
    float: left;
    position: relative;
}
.subcont_list .list_wrap .list .line>div {
    width: 32px;
    height: 20px;
    background-image: url('/images/main/new/line_div.png');
    background-repeat: no-repeat;
    position: absolute;
    left: -6px;
    bottom: -8px;
    z-index: 10;
}
.subcont_list .list_wrap:last-child .list .line>div {
    display: none;
}
.subcont_list .list_wrap .list .line.gn {
    background-color: #34971F;
}
.subcont_list .list_wrap .list .line.yw {
    background-color: #FFC000;
}
.subcont_list .list_wrap .list .line.red {
    background-color: #C00000;
}
.subcont_list .list_wrap .list_left .line {
    margin-left: 20px;
}
.subcont_list .list_wrap .list_right .line {
    margin-right: 20px;
}
.subcont_list .list_wrap:first-child .list .line {
    border-radius: 50px 50px 0 0;
}
.subcont_list .list_wrap:last-child .list .line {
    border-radius: 0 0 50px 50px;
}
.toggleSwitch{
    width: 60px;
    height: 25px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: aliceblue;
    box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%);
    cursor: pointer;
    z-index: 2;
    margin-top: 1.5vh;
    margin-right: 1.5vh;
    margin-bottom: 1.5vh;
}
.toggleSwitchButton{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 51.5%;
    left: 3px;
    transform: translateY(-51.5%);
    border-radius: 50%;
    background: rgb(55, 61, 81);
    transition: left 0.5s ease
}
.toggleSwitch.active {
    background: aliceblue;
}
.toggleSwitch.active .toggleSwitchButton {
    left: calc(55%);
    background: #3673ee !important;
}
.toggleSwitchDiv{
    display: none;
    background: rgb(55, 61, 81);
    transition: all 0.5s ease 0s;
}

#view_ntrd_cctv #media::-webkit-media-controls-timeline {
    display: none;
}

#view_ntrd_cctv #media::-webkit-media-controls-current-time-display {
    display: none;
}

#view_ntrd_cctv #media::-webkit-media-controls-time-remaining-display {
    display: none;
}

#view_ntrd_cctv #media::-webkit-media-controls-mute-button {
    display: none;
}

.cctv_map_btns {
    line-height: 0px;border-radius: 15px; font-weight: 500; font-size: 15px;cursor: pointer;border: 1px solid #ddd; padding: 15px 8px; color: rgb(51, 51, 51);  position: absolute; background: rgb(247, 247, 247); right: 60px;top: 7px;transition: background-color 0.2s ease;
}
.cctv_map_btns.active{
    background:#35babc; color:#fff; border: 2px solid #ddd;border-radius: 15px; top: 6px;transition: background-color 0.2s ease;
}
.cctv_map_btns::after{
    content: "지도 보기";
}
.cctv_map_btns.active::after{
    content: "지도 닫기";
}

#cctv_maps {
    z-index:1; border: 1px solid #ccc;box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);border-radius: 20px;display: none; overflow: hidden; position: absolute; width: 100%;background-color: rgb(163, 189, 215);
}
.wv_source {
    position: absolute;
    right: 20px;
    border: 2px solid #eef2f7;
    border-radius: 13px;
    padding: 5px 8px;
}

/* 터널 팝업 20231122 */
#tunnelPop {z-index: 100;}

#tunnelPop .tunnel_title{text-align: center;}
#tunnelPop .popup_inner {width: 440px;}
#tunnelPop .popup_inner .popup_header {background-color: #FFCC09;color: #333;font-weight: bold;border-bottom: 1px solid #eee;}
#tunnelPop .popup_inner .popup_header button {display: none; position: absolute;left: 10px;top: 7px;border-radius: 50px;background-color: #FFF8DE;color: #555;padding: 6px 10px;font-weight: bold;box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);}
#tunnelPop .popup_inner .popup_header button.active {display: block;}
#tunnelPop .popup_inner .popup_header .btn_close {background: url('/images/common/ic_popup_close2.png') center center no-repeat;}
#tunnelPop .popup_inner .popup_tit {padding: 15px;font-size: 15px;}
#tunnelPop .popup_inner .popup_tit i {padding: 10px 20px;font-size: 14px;}
#tunnelPop .popup_inner .popup_contents {display: none;}
#tunnelPop .popup_inner .popup_contents.active {display: block;}
#tunnelPop1 ul {display: flex;}
#tunnelPop1 ul li {font-size: 16px;text-align: center;width: 50%;}
#tunnelPop1 ul li a {display: block;height: 46px;text-align: center;line-height: 46px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
#tunnelPop1 ul li a.active {background-color: #FFFAE7;border-bottom: 4px solid #FFCC09;font-weight: bold;}
#tunnelPop1 .tunnel_contents_wrap {max-height: 550px;   height: 480px;    overflow-y: scroll;overflow-x:hidden;}
#tunnelPop1 .tunnel_contents_wrap .tunnebox_wrap {padding: 20px;border-bottom: 10px solid #eee;}
#tunnelPop1 .tunnel_contents_wrap .tunnel_content {display: none;}
#tunnelPop1 .tunnel_contents_wrap .tunnel_content.active {display: block;}
#tunnelPop1 .tunnel_contents_wrap .tunnel_content .tunnel_cctv_box .video {width: 100%;height: 250px;margin-bottom: 10px;}
#tunnelPop1 .tunnel_contents_wrap .tunnel_content .vms_con_wrap {margin-top: 20px;}
#tunnelPop1 .video_wrap .btn { position: absolute; width: 54px; height: 54px; text-indent: -9999px; border: 0; }
#tunnelPop1 .video_wrap .btn_reload { position: absolute;  top: 10px; left: 10px; background: url("/images/main/btn_reload.png") center center no-repeat; }
#tunnelPop1 .video_wrap .video { position: relative; height:330px }

#tunnelPop2  {background-color: #E4EBEB;}
#tunnelPop2 ul {display: flex;flex-wrap: wrap;background: #fff;}
#tunnelPop2 ul li {font-size: 16px;text-align: center;width: 50%;}
#tunnelPop2 ul li a {display: block;height: 46px;text-align: center;line-height: 46px;border-top: 1px solid #eee;}
#tunnelPop2 ul li:nth-child(2n) a {border-left: 1px solid #eee;}
#tunnelPop2 li a.active {border-bottom: 4px solid #FFCC09;}
#tunnelPop2 .tunnel_contents_wrap {max-height: 410px;   height: 480px;    overflow-y: scroll;overflow-x:hidden;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content {display: none;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content.active {display: block;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box {}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tit {font-size: 16px; background-color: #115874;padding: 10px 25px;color: #fff;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab1 {margin: 20px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab1 img {width: 100%;margin-bottom: 10px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-1 .menual_block {display: flex; align-items: center; margin: 10px 20px;border-radius: 10px; padding: 10px; background-color: #fff;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-1 .menual_block img {width: 120px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-1 .menual_block p {display: flex; gap: 5px; font-size: 16px;padding: 10px 10px 10px 20px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-2 {display: flex;flex-wrap: wrap;background-color: #fff;margin: 20px;border-radius: 10px;padding: 10px 5px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-2 .menual_block {display: flex; flex-direction: column; align-items: center;border-radius: 10px; padding: 10px;width: 50%;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-2 .menual_block img {width: 100%;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab2-2 .menual_block p {display: flex; gap: 5px; font-size: 16px; padding: 10px 0;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab3 {margin: 20px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab3 img {width: 100%;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab4 {background: #fff; border-radius: 10px; margin: 20px;display: flex;flex-wrap: wrap;padding: 10px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab4 .tunnel2_img_wrap {width: 50%;padding: 15px;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab4 .tunnel2_img_wrap img {width: 100%;}
#tunnelPop2 .tunnel_contents_wrap .tunnel2_content .tunnel_menual_box .tunnel2_tab4 .tunnel2_img_wrap p {display: flex;gap: 5px;font-size: 16px;margin-top: 10px;}