@charset "utf-8";

body {background: #fff; font-size: 14px; letter-spacing: -0.4px; color:#151515;}
body, div ,ul ,ol, li, input, p, th, td{margin: 0; padding: 0; }
ul,ol {list-style:none;}
a {text-decoration: none; color: inherit;}
table {border-collapse: collapse}

/* 웹폰트 CSS */
@font-face{font-family:'Nanum Gothic'; src:url(/fonts/NanumGothic.eot)}
@font-face{font-family:'Nanum Gothic'; src:url(/fonts/NanumGothic.woff)}

/*지도 스타일*/
body#mapArea{width:100%; height:100vh;}
body#mapArea .map{width:100%; height:100vh;}
body#mapArea .legend_open{position:absolute; top:5%; right:5%;}
body#mapArea .legend_open img{width:50px;}

/* 홍수주의보 중간페이지 */
.flood_wrap {font-size: 1.3em; width: 100%; transition: all .3s ease; max-width: 1080px; margin: 0 auto;}
.flood_wrap .title {background: #104c9e; border: 5px solid #8bb6f0; border-radius: 45px; text-align: center;color: #fff;  font-size: 1.2em; font-weight: 500; margin: 1em;letter-spacing: -.1em; padding: .5em 1em; line-height: 1.4; word-break: keep-all;}
.flood_wrap .title > span {color: #fff000; font-weight: 600;}
.flood_wrap .content {padding: 0 1em;}
/* .flood_wrap .content ul li {position: relative; display: block; padding-left: 16px; word-break: keep-all; margin-bottom: 1em; line-height: 1.4; letter-spacing: -.1em; color: #666666;}
.flood_wrap .content ul li::before{position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; content: ''; background-color: #104c9e;}
.flood_wrap .content ul li > a {font-weight:bold; cursor: pointer; display: block; font-size: 1.1em; color: #262626;} */
.flood_wrap .content ul li {position:relative;display:block;padding-left:16px;word-break:keep-all;margin-bottom:8px;line-height:1.4;letter-spacing:-.1em;color:#666;font-size:16px;}
.flood_wrap .content ul li::before {position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:7px;content:'';background-color:#666;}
.flood_wrap .content ul li>a {font-size: 15px;}
.flood_wrap .content ul li .t_blue {font-weight: bold; color: #006cff;}
.flood_wrap .content ul li .img_click {width: 1.2em; vertical-align: middle; display: inline-block; margin-top: -4px;}
/* .flood_wrap .comment .img {background: #eaeaea; width: 100%; box-sizing: border-box; padding: 10px 10px 6px 10px;} */
.flood_wrap .comment .img {position: relative; background:#f6f6f6;width:100%;box-sizing:border-box;padding:6px;}
.flood_wrap .comment .img > p {position: absolute; right: 11px; bottom: 16px; color: rgba(255, 255, 255, .3); font-size: 12px; margin: 0; padding: 0;line-height: 1;font-weight: 600;}
.flood_wrap .comment .img img {width: 100%;}
/* .flood_wrap .comment p {font-size: .865em;color: #104c9e;display: block;margin-top: .5em;word-break: keep-all;letter-spacing: -.15em;position: relative;padding-left: 10px;} */
.flood_wrap .comment p {font-size:14px;color:#666;display:block;word-break:keep-all;letter-spacing:-.1em;position:relative;padding:0 10px 10px;margin-bottom:32px;}
/* .flood_wrap .content p::before{position: absolute; left: 0; top: 0; width: 7px; height: 7px; content: '* ';} */
.flood_wrap .comment p span {font-weight: bold;}

/* .li1,.li2 {padding:16px 60px 16px 16px;border-radius:8px;color:#fff;font-size:14px;}
.li1 {background:#1655AC;}
.li2 {background:#313855;} */

.li1, .li2 {color: rgba(255, 255, 255, .7) !important;  font-size: 14px !important; padding: 16px 60px 16px; border-radius: 8px;}
.li1 span, .li2 span {color: #fff000;}
.li1 {background: url(/images/01.png) calc(100% - 20px) 50% no-repeat #4384a5; background-size: 30px;  margin-top:24px; }
.li2 {background: url(/images/01.png) calc(100% - 20px) 50% no-repeat #436ca5; background-size: 30px; }
.li1 strong,.li2 strong {font-weight:bold;cursor:pointer;display:block;font-size:18px;color:#fff;margin-bottom:6px;}

.flood_wrap .content ul li.li1::before,.flood_wrap .content ul li.li2::before {display:none;}

.comment {background: #f6f6f6;}

/*edia all and (max-width:480px){
    .flood_wrap {font-size: 1.2em;}
    .flood_wrap .title {font-size: 1.1em;}
}
@media all and (max-width:380px){
    .flood_wrap {font-size: 1em;}
    .flood_wrap .content ul li {padding-left: 12px;}
    .flood_wrap .content ul li::before {width: 5px; height: 5px;}
    .flood_wrap .title {border:3px solid #8bb6f0;}
}*/

/* ios pop */
.ios_text {color: #FF0000; font-size: .9rem; font-weight: 600; text-decoration: underline; margin: 0 auto 1rem; cursor: pointer;}
#ios-con {display: none;}
.ios_content { position: fixed; left: 0; top: 0;  width: 100%; height: 100%; background-color: rgba(0,0,0, 0.5); backdrop-filter: blur(5px);}
.ios_content::before {display: block; width: 100%; height: 100%;}
.ios_content > div {width: 80%; height: 90%; padding: 1rem; box-sizing: border-box; background-color: #fff; border-radius: 8px; box-shadow: 0 10px 10px rgba(0,0,0, .5);letter-spacing: -.4px; position: absolute; left: 10%; top: 5%; overflow-y: auto;}
.ios_content .pop_close {position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; padding: 0; border: 0;background-color: #fff; cursor: pointer; z-index: 2;}
.ios_content .pop_close > img {width: 10px;}
.ios_content button:hover {cursor: pointer;}
.ios_content .pop-header {height: 50px;}
.ios_content h3 {font-size: 1rem; text-align: center; color: #121212; font-weight: 700; padding: 0; margin: 1rem 0 0;}
.ios_content h3 > span {width: 20px; height: 20px; display: inline-block; text-align: center; border-radius: 50%; vertical-align: middle  ; background: url(images/img_shelter.png) 50% 50% no-repeat #0075FF; background-size: auto 70%; margin: -4px 4px 0 0;}
.ios_content h3 > b {font-weight: 700; color: #104c9e; letter-spacing: -.05rem;}
.ios_content .pop-text {font-size: .9rem; line-height: 1.5; font-weight: 400; color:#666; word-break: keep-all; display:block; margin: 1rem 0; letter-spacing: -.05rem;}
.ios_content .pop-text > b { font-weight: 700; color: #121212; text-decoration: underline; }
.img_ios {display: block; margin: 2rem auto 0; width: 80%; max-width: 200px;}

.legend-wrap { display: flex; gap: 6px; position: absolute; right: 8px; top: 8px; z-index: 10; border-radius: 4px; flex-direction: column; }
.legend-wrap > div { display: flex; flex-direction: column; flex: 1; padding: 0; background: #172838; }
.legend-wrap > div > p { font-size: 10px; font-weight: 700; color: #7e8997; padding: 6px 8px; border-bottom: 1px solid #343a46; }
.legend-lavel { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.legend-lavel li.item {display: flex; align-items: center; gap: 0.375rem;}
.legend-lavel li.item span {display: inline-block; width: 1rem; height: 0.5rem; flex-shrink: 0; border-radius: 1px; }
.legend-lavel li.item2 span {height: 2px !important;}
.legend-lavel li.item p {font-size: 10px; color: #dde2ea; line-height: 1; letter-spacing: -.5px;}
.map-comment {position: absolute; bottom: 0; left: 0; font-size: 11px; background: rgba(0, 0, 0, .7); padding: 8px 4px; color: #fff; line-height: 1.4; font-weight: 200; word-break: keep-all;}