/*@import url(http://fonts.googleapis.com/css?family=Engagement);*/
/* latin-ext */
@font-face {
  font-family: 'Engagement';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/engagement/v28/x3dlckLDZbqa7RUs9MFVbNMmshbs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Engagement';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/engagement/v28/x3dlckLDZbqa7RUs9MFVbN0msg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


#footer .ftinfo {color:#444; }
#footer { background: #efefef; }
#content {position:relative;display: flex;flex-flow: row wrap;justify-content: space-between; width:100%; max-width:1200px; margin:20px auto 0; letter-spacing:-1px; }
.map_title {position:absolute; top:-90px; right:380px; font-size:30px; font-weight:700; letter-spacing: -3px;}
@media only screen and (max-width:1023px) {
    .map_title {position:absolute; top:-90px; right:2%;}
}
@media only screen and (max-width:860px) {
    .map_title {font-size:26px;}
}
@media only screen and (max-width:639px) {
    .map_title {font-size:25px;right:25px;}
}



/***----------------------★ 좌측 테이블 ★-------------------***/
.sleft  { width:600px;} 

/*-----타이틀-----*/
.sleft_tit { width: 100%; border-bottom:2px solid #333; height:60px; line-height:60px; font-size:24px; font-weight:700; clear:both; }   
@media only screen and (max-width:639px) {
    .sleft_tit {font-size:26px;}
}


/*-----셀렉트박스-----*/
.selectbox {  position: relative;  width: 100%;  margin:17px auto; border: 1px solid #ddd;  z-index: 1; font-size:16px;  clear:both; }
.selectbox:before {  content: "";  position: absolute;  top: 50%;  right: 15px;  width: 0;  height: 0;  margin-top: -1px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 5px solid #333;}
.selectbox label {  position: absolute;  top: 1px;  left: 5px;  padding: 10px 10px 15px; height:30px; color: #333;  z-index: -1; font-size:16px; }
.selectbox select {  width: 100%;  height: auto;   padding: 5px 10px 10px; border: 0;  opacity: 0;  filter:alpha(opacity=0);  -webkit-appearance: none;  -moz-appearance: none;  appearance: none; font-size:16px; }   
@media only screen and (max-width:639px) {
    .selectbox {font-size:20px;}
    .selectbox select,.selectbox label  {font-size:20px;}
}
/*-----지도노출-----*/
.demo1 {width:600px; height:auto; position:relative;margin:0px auto 0; }
.preloader {background:url("") no-repeat center #fff;}/*사용안함*/
.marker {display:block;text-indent:-9999px;width:15px;height:23px;outline:none;background:url() }/*사용안함*/
.popup {width:auto;height:auto; position:absolute;padding:0px;padding-right:20px;background:transparent;}
.popup .close {display:block;text-indent:-9999px;position:absolute;top:2px;right:2px;width:16px;height:16px;outline:none;background:url("images/close01.png") no-repeat; cursor:pointer;}/*엑스버튼*/
.relative {position:relative;}   
.map_img03 {}
.arr{position: absolute; top:-13px; left:93px; color:#040000;}
.popup .close{}
/*.popup::after {content: '';position: absolute;bottom: -5px;right: 12px;width: 0;height: 0;border: 8px solid transparent;border-top: 8px solid #56576b;transform: rotate(-130deg);}*/
@media only screen and (max-width:639px) {
        .popup .close {top: 2px;right: -5px;width: 22px;height: 22px;}
}


/*-----지도노출 신호등표현-----*/
.red {background:#56576b ;width:auto ;padding: 3px 18px 3px 5px;height:auto; line-height:1.2; color:#fff;border-radius: 5px;font-size:0.8rem;} /*빨강*/
.yellow {background:#56576b ; width:auto ;padding: 3px 18px 3px 5px;height:auto;  line-height:1.2; color:#fff;border-radius: 5px;font-size:0.8rem;}/*노랑*/
.green {background: #56576b ;width:auto;padding:3px 18px 3px 5px;height:auto;line-height:1.2;color:#fff;border-radius: 5px;font-size:0.8rem;} /*초록*/
.red a, .yellow a, .green a {font-size:0.8rem;  color:#fff; font-weight:700; display:block; } /*글자색상*/
.red a:hover , .yellow a:hover , .green a:hover {text-decoration:underline} 

.red span, .yellow span, .green span {position:relative;display:block;}
.red span::after  {position: absolute;top: 2px;right: -15px;width: 10px;height: 10px;background: #ec2c2c;border-radius: 50%;content: '';display:block;}
.yellow span::after {position: absolute;top: 2px;right: -15px;width: 10px;height: 10px;background: #f9d45f;border-radius: 50%;content: '';display:block;}
.green span::after {position: absolute;top: 2px;right: -15px;width: 10px;height: 10px;background: #2cec2b;border-radius: 50%;content: '';display:block;}

@media only screen and (max-width:639px) {
    .red,.yellow ,.green {padding:3px 22px 3px 5px;} 
    .red span::after  {position: absolute;top: 2px;right: -15px;width: 13px;height: 13px;}
    .yellow span::after {position: absolute;top: 2px;right: -15px;width: 13px;height: 13px;}
    .green span::after {position: absolute;top: 2px;right: -15px;width: 13px;height: 13px;}
    .red a, .yellow a, .green a { font-size: 1.1rem;}
}



.ml02 {margin-left:2px;}
.ml05 {margin-left:7px;}
.ml10 {margin-left:12px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.fblack10 {color:#fff; background: #7d7c7c;padding:2px 10px; border-radius:10px;}
.fblack15 {color:#fff; background: #7d7c7c;padding:2px 15px; border-radius:10px;}
.fblack20 {color:#fff; background: #7d7c7c;padding:2px 20px; border-radius:10px;}
.lett_1 {letter-spacing: -1px;}
.lett_2 {letter-spacing: -2px;}

/***----------------------★ 우측 테이블 ★-------------------***/
.sright  {width: calc(100% - 620px);margin-left: 20px;margin-bottom: 30px;z-index: 1000;} 
.sright_inner { width:100%;}  

/*-----리스트테이블-----*/

ul.trail-status-list {list-style: none;padding: 0;margin: 0;}
li.trail-item {display: flex;flex-direction: column;justify-content: space-between;border-bottom: 1px solid #ccc;padding: 12px 0;font-family: 'Pretendard', sans-serif;font-size: 15px;gap: 4px;}
li.trail-item span {display: flex;justify-content: space-between;align-items: center;}    
li.trail-item.title {font-size:18px;border-bottom: 2px solid #333;font-weight: 700;padding:6px  0;}
li.trail-item.title span{text-align:center;justify-content: center;}
li.trail-item span.trail-length .km {display:block;}
li.trail-item span.trail-length .km small{display:block;font-size:12px;}
li.trail-item {flex-direction: row;align-items: center;gap: 0;}
li.trail-item span {justify-content: flex-start;}
li.trail-item span.trail-point {width: 150px;text-align: center;justify-content: center;}
li.trail-item span.trail-section {width: 170px;text-align: center;justify-content: center;}
li.trail-item span.trail-length {width: 70px;text-align: center;justify-content: center;}
li.trail-item span.trail-congestion {width: 80px;text-align: center;justify-content: center;}
li.trail-item span.trail-location {width: 100px;text-align: center;justify-content: center;}
li.trail-item span.trail-location a {display:block;height: 30px;line-height: 1.5;margin: 0 auto;padding: 5px 10px 5px 30px;text-decoration: none;background: #f0f0f0 url(/custom/map/images/arrow_bt.png) no-repeat 5px 5px;border-radius: 5px;color: #000;font-size: 14px;}
li.trail-item span.trail-location a:hover{background: #555 url(/custom/map/images/arrow_bt.png) no-repeat 5px 5px;color: #fff;}
@media only screen and (max-width:639px) {
        
    li.trail-item {font-size:19px;}
    li.trail-item span.trail-length .km small{display:block;font-size:13px;}
    li.trail-item span.trail-location a {font-size:18px;padding: 2px 10px 2px 30px;}
    li.trail-item span.trail-point {width: 180px;}
    li.trail-item span.trail-section {width: 180px;}
    li.trail-item span.trail-length {width: 60px;}
    li.trail-item span.trail-congestion {width: 70px}
    li.trail-item span.trail-location {width: 110px;}
}



/***----------------------★ 혼잡도별 관리기준 팝업 ★-------------------***/
#honjab {position:relative; width:100%; height:470px;  font-family: 'Nanum Gothic', sans-serif;background:url("/custom/map/images/mountains.gif") no-repeat right 50px; overflow: hidden; padding:0px; margin:0px;}
#honjab .honjab_inner { width:100%;}  

#honjab .tit { text-align:center; height:40px; line-height:40px; font-size:24px; clear:both; }
#honjab .tit strong {font-weight:800;}

/*-----리스트테이블-----*/
.honjab_01 { width:20%; float:left; margin-right:1%; } 
.honjab_02 { width:29%; float:left; } 
.honjab_03 { width:50%; float:left; } 

/*-----리스트테이블01 타이틀.리스트-----*/
.honjab_tit01 { width:80%; margin-right:320%; height:40px; line-height:40px; padding:20px 50px 0 0; margin:0px; font-size:16px;  font-weight:700; letter-spacing:-1px; text-align:right;  list-style:none;clear:both;}
.honjab_list01 { height:370px; background:url("images/honjap_back.png") no-repeat right top; ;} 

/*-----리스트테이블02,03 타이틀.리스트-----*/
.honjab_tit02 { width:94%; height:40px; line-height:40px; padding:20px 3% 2px 3%; margin:0px; font-size:16px;  font-weight:700; letter-spacing:-1px; text-align:left;  list-style:none; clear:both;background:url("images/bborder.gif")repeat-x center bottom;}
.honjab_list02 {width:94%; height:65px; padding:5px 3%; background:url("images/rborder01.gif") repeat-y right top; border-bottom:1px solid #ddd; font-size:14px; color:#666; line-height:20px; overflow:hidden; } 
.honjab_list03 {width:94%; height:67px; padding:5px 3%; background:url("images/rborder01.gif") repeat-y right top;border-bottom:1px solid #ddd; font-size:14px; color:#666; line-height:20px; overflow:hidden; } 
.honjab_list04 {width:94%; height:135px; padding:5px 3%; background:url("images/rborder01.gif") repeat-y right top; font-size:14px; color:#666; line-height:20px; overflow:hidden; } 

/*-----탑버튼----*/
.topbt {position:fixed;bottom:9%; right: 2%;; z-index: 9999;}
.topbt a { display: block; }
.topbt a img { width:50px; height:auto; opacity: 0.5;}
.bottombt {position:fixed;bottom:3%; right: 2%; z-index: 9999;}
.bottombt a { display: block; }
.bottombt a img { width:50px; height:auto;opacity: 0.5;}


@media screen and (max-width: 1200px) {  
    .sleft  { width:49%;margin-left:1%;}
    .sright  { width:47%; margin-left:2%; margin-right:1%; } 
    .topbt {bottom:10%; right: 1.5%;}
    .topbt a img { width:35px; }
    .bottombt {bottom:5%; right: 1.5%;}
    .bottombt a img { width:35px; }
}
@media screen and (max-width: 1023px) {  
    .sleft  { width:100%; margin-left:0; margin-right:0; padding:0 15px;clear:both; } 
    .sright  { width:100%;  margin-left:0; margin-right:0; margin-bottom:100px; padding:0 15px;clear:both; } 
    .controls .controls_bt  {padding-left:45px;}
}

@media screen and (max-width: 767px) {  
    .controls .controls_bt  {padding-left:5px;}
}
@media screen and (max-width: 600px) {  
    .demo1 {margin-left:-15px;margin-right:0;}
}



@media screen and (max-width: 479px) {  
    .sleft_tit { font-size:18px; height:50px; line-height:50px; } 
    .selectbox { font-size:14px; }
    .selectbox label {  padding: 10px 10px 10px; font-size:14px; }
    .selectbox select {  padding: 10px 10px 10px; font-size:14px; } 
    .sright_02 { width:23%; float:left; } 
    .sright_02_01 { width:30%; float:left; } 
    .sright_02_02 { width:12%; float:left; } 
    .sright_03 { width:14%; float:left; } 
    .sright_04 { width:21%; float:left;  position:relative;} 
    .sright_tit ,
    .sright_tit01 { font-size:14px;font-weight: 700;}
    .controls .controls_bt { height:50px; line-height:50px;margin:auto;padding:0 0 0 0px;}
    .controls .controls_bt a {height:20px; line-height:20px;margin:5px 0; padding:8px 3px;font-size:12px; initial-letter: -2px;}
    .controls .controls_bt a img{padding-right:1px; }
    .popup .close {display:none; } 
    .sright_list { height:50px; line-height:50px; font-size:12px; }
    .topbt {bottom:12%; right: 2.5%;}
    .topbt a img { width:35px; }
    .bottombt {bottom:7%; right: 2.5%;}
    .bottombt a img { width:35px; }

}