:root {
	--box-bg: #021730;
	--box-bd: 2px solid #1A3D6D;
    --shadow-blue-inset: inset 0 4px 30px rgba(24, 111, 190, 0.4);
    --common-color : #00DEFA;
    --warning-color : 255, 56, 60;
    --watch-color : 255, 128, 0;
    --take-color : #FBE511;
    --clear-color : #fff;
    --state-bg1: 255, 128, 0;
    --state-bg2: 255, 56, 60;
}

.popBtn {top: 9px !important;}

/*** slide_popup ***/
.spopup_wrap {top:10.75rem !important;}
#wrap.scroll .spopup_wrap {top: 0 !important;}
.spopup_wrap {transition: margin-top 0.3s ease, left 0.3s !important;}
#wrap.openPop.scroll .spopup_wrap {top: -7rem !important;}
@media (max-width: 1540px) {
	.spopup_wrap {top:10.75rem !important;}
}
@media (max-width: 1200px) {
	.spopup_wrap {top:10.75rem !important;}
	#wrap.scroll .spopup_wrap {top: 0 !important;}
	#wrap.openPop.scroll .spopup_wrap {top: -7rem !important;}
}
@media (max-width: 1024px) {
	.spopup_wrap {top:6.5rem !important;}
	#wrap.scroll .spopup_wrap {top: 6.5rem !important;}
	#wrap.openPop.scroll .spopup_wrap,
    #wrap.openPop.scroll .up_pop + .spopup_wrap {top: 6.5rem !important;}
}
@media (max-width: 768px) {
	.spopup_wrap {top:3rem !important;}
	#wrap.scroll .spopup_wrap {top: 3rem !important;}
	#wrap.openPop.scroll .spopup_wrap,
    #wrap.openPop.scroll .up_pop + .spopup_wrap {top: 3rem !important;}
}
@media (max-width: 480px) {
	.spopup_wrap {top:3rem !important;}
	#wrap.scroll .spopup_wrap {top: 3rem !important;}
}
@media (max-width: 340px) {
   /* 좌측 팝업 : openPop */
   #wrap.openPop.scroll .up_pop + .spopup_wrap {top: 3rem !important;}
}

/* common */
#gnb .depth01 > ul > li > a {word-break:keep-all;}
.safety_tit_wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.safety_tit_wrap h2.heading {flex: 1; margin-bottom: 0; padding-right: 1rem;}
h2.heading {display: flex; align-self: center; gap: 0.4rem; width: 100%; font-size: 1.4rem; color: #fff; font-weight: 700; margin-bottom: 1.6rem;}
h2.heading span{color: #0e88d4;}
.safety_circle::before {content: ""; position:absolute ; left: -6rem; bottom: 70%; width: 30rem; height: 30rem; background: radial-gradient(rgba(30, 167, 255, 1) 0, rgba(30, 167, 255, 0) 70%); border-radius: 50%;}
.btn_more { display: flex; align-items: center;  color:#fff;}
.btn_more i{font-size: 1rem;}

/* 지도영역  */
.safety_map_wrap {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 1rem; background: var(--box-bg); border: var(--box-bd); padding: 1.8rem 1.5rem; box-shadow: var(--shadow-blue-inset); overflow: hidden;}
.safety_map_wrap::before {left: -6rem; bottom: 88%;}
.safety_map {position: relative; flex: 1; min-height: 0; border-radius: 1rem; background: #fff; overflow: hidden; font-size: 0;}
.safety_map img {width: 100%; height: 100%; object-fit: cover;}
/* 지도 확대/축소 */
.safety_map .zoom_area{position:absolute; bottom: 1.4rem; right: 1.4rem;}
.safety_map .zoom_area button{display: flex; align-items: center; justify-content: center; width:2rem; height:2rem; overflow:hidden; border:1px solid rgba(0, 0, 0, 0.4); background: #fff; border-radius: 0.25rem; color: #000; font-size: 1.2rem;}
.safety_map .zoom_area .zoom_out{margin-top:5px;}

/*** 상단컬러라인 박스 영역 ** */
.safety_alert_wrap {width: 100%; height: 100%; border-radius: 1rem; background: linear-gradient(to right, var(--box-topbd-color1) 40%, var(--box-topbd-color2)); overflow: hidden; padding-top: 0.5rem;}
.MC_box3 .safety_alert_wrap { --box-topbd-color1: #0067FF; --box-topbd-color2: #31A9FF;}
.MC_box4 .safety_alert_wrap { --box-topbd-color1: #39D164; --box-topbd-color2: #12E050;}
.MC_box5 .safety_alert_wrap { --box-topbd-color1: #FF2349; --box-topbd-color2: #FF3385;}
.safety_alert_inner {position: relative; display: flex; flex-direction: column;  width: 100%; height: 100%; border-radius: 1rem; background: var(--box-bg); border: var(--box-bd); border-top: none; padding: 1.3rem 1.5rem 0.9rem; box-shadow: var(--shadow-blue-inset); overflow: hidden;}

/* 기상 상태별 클래스 */
.safety_bullet::before {content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; margin-right: 0.45rem;}
.warning::before,
.warning ::before {background: rgba(var(--warning-color), 1);}
.watch::before,
.watch ::before {background: rgba(var(--watch-color), 1);}
.safety_index {display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 100%; border-radius: 0.2rem; text-align: center; font-size: 0.75rem;}
.warning .safety_index {background: rgba(var(--warning-color), 1);}
.watch .safety_index {background: rgba(var(--watch-color), 1);}
.state {display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 1.3rem; border-radius: 0.2rem; border: 1px solid var(--state-color); font-weight: 600;}
.state.take {--state-color: var(--take-color); color: var(--take-color);}
.state.clear {--state-color: var(--clear-color); color: var(--clear-color);}

/* 기상 특보 */
.newsflash_list {flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.75rem;}
.newsflash_list li ~ li {border-top: 1px dashed #ddd;}
.newsflash_list li a {display: flex; align-items: center; justify-content: space-between; height: 1.3rem; margin: 0.8rem 0; color: #fff; font-weight: 600;}
.newsflash_list li:first-child a {margin-top: 0; }
.newsflash_list li a .tit {flex: 1; display: flex; align-items: center; gap: 0.4rem; height: 100%; font-size: 0.95rem;}
.newsflash_list li a .subject {flex: 1; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 1; overflow: hidden;}
.newsflash_list li a .date {display: flex; align-items: center; gap: 0.4rem; height: 100%; font-size: 0.75rem; font-weight: 400;}

/* 기상 현황 */
.condition_list {flex: 1; display: flex; flex-wrap: wrap; gap: 0 2rem;}
.condition_list li {display: flex; align-items: center; width: calc(50% - 1rem); border-bottom: 1px dashed #ddd;}
.condition_list li:last-child {border-bottom: none; width: 100%;}
.condition_list li .condition_item {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 1.5rem; margin: 0.8rem 0; color: #fff;}
.condition_list li:nth-child(-n+2) .condition_item {margin-top: 0;}
.condition_list li .condition_item .tit {display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 600;}
.condition_list li .condition_item .txt {display: flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; font-weight: 600;}
.condition_list li .condition_item .txt span {display: inline-flex; align-items: center; height: 1.2rem; padding: 0 0.4rem; border-radius: 0.6rem; color: #fff}
.condition_list li .condition_item .step1 {color: #65A3FF;}
.condition_list li .condition_item .step2 {color: #53D38D;}
.condition_list li .condition_item .step3 {color: #FFE063;}
.condition_list li .condition_item .step4 {color: #FF8974;}
.condition_list li .condition_item .step1 span {background: #0168FF;}
.condition_list li .condition_item .step2 span {background: #00A74B;}
.condition_list li .condition_item .step3 span {background: #FFCC01; color: #111;}
.condition_list li .condition_item .step4 span {background: #F54D2F;}

/* 산불 현황 */
.fire_list {flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.75rem;}
.fire_list li ~ li {border-top: 1px dashed #ddd;}
.fire_list li a {display: block; margin: 0.8rem 0; color: #fff;}
.fire_list li:first-child a {margin-top: 0; }
.fire_list li a .tit {display: flex; align-items: center; gap: 0.2rem; height: 1.3rem;}
.fire_list li a span {display: block;}
.fire_list li a .subject {flex: 1; font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fire_list li a .extinguish {display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 100%; border-radius: 0.2rem; border: 1px solid var(--extinguish-color); color: var(--extinguish-color); font-size: 0.75rem; font-weight: 600;}
.fire_list li a .step0 {--extinguish-color: #3CE7FF;}
.fire_list li a .step1 {--extinguish-color: #39D164;}
.fire_list li a .step2 {--extinguish-color: #fff;}
.fire_list li a .date {margin-top: 0.2rem; font-size: 0.75rem;}

/* 조치 사항 */
.MC_box6 .safety_alert_inner {padding-bottom: 1.8rem;}
.MC_box6 .safety_alert_inner .safety_controls {display: flex; gap: 0.4rem;}
.MC_box6 .safety_alert_inner button {display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid #fff; font-size: 1.2rem; color: #fff; cursor: pointer; transition: background 0.2s;}
.MC_box6 .safety_alert_inner button:hover {background: rgba(255, 255, 255, 0.2);}
.MC_box6 .safety_alert_inner button.slick-disabled {cursor: default; opacity: 0.35;}
.action_wrap .slide-page {display: flex; gap: 1rem; align-items: stretch;}
.action_wrap .item {display: flex; flex-direction: column; flex: 0 0 calc((100% - 2rem) / 3); border-radius: 0.5rem; border: 1px solid var(--action-bd1); padding: 1.2rem 1.2rem 1.8rem; color: #fff;}
.action_wrap .common {--action-bd1: #59797D; --action-bd2: #59797D;}
.action_wrap .warning {--action-bd1: #9C6869; --action-bd2: #FFADAE;}
.action_wrap .watch {--action-bd1: #8F7B5A; --action-bd2: #FFCF82;}
.action_wrap .item .tit_wrap {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 2px dotted var(--action-bd2);}
.action_wrap .item .tit_wrap .tit {flex: 1;  display: flex; align-items: center; height: 1.6rem;}
.action_wrap .item .tit_wrap .tit::before {width: 0.75rem; height: 0.75rem; box-shadow: 0 0 5px 3px rgba(var(--bul-shadow),  0.5);}
.action_wrap .warning .tit_wrap .tit::before {--bul-shadow: var(--warning-color);}
.action_wrap .watch .tit_wrap .tit::before {--bul-shadow: var(--watch-color);}
.action_wrap .common .tit_wrap .tit::before {content: "\EAE2"; font-family: "remixicon"; border-radius: 0; color: var(--common-color);}
.action_wrap .item .tit_wrap .safety_index {width: auto; font-size: 1rem; padding: 0 0.4rem; margin-right: 0.4rem;}
.action_wrap .item .tit_wrap .subject {flex: 1; font-size: 1.4rem; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 1; overflow: hidden;}
.action_wrap .item .tit_wrap .date {display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem;}
.action_wrap .item .action_list {margin-top: 1rem;}
.action_wrap .item .action_list li {display: flex; align-items: center; gap: 0.3rem; height: 1.2rem; font-size: 1.3rem; font-weight: 500;}
.action_wrap .item .action_list li::before {content: "\eb79"; font-family: "remixicon"; font-size: 0.8rem; background: none; color: var(--action-bul);}
.action_wrap .common .action_list li::before {--action-bul: var(--common-color);}
.action_wrap .warning .action_list li::before {--action-bul: rgba(var(--warning-color), 1);;}
.action_wrap .watch .action_list li::before {--action-bul: rgba(var(--watch-color), 1);;}
.action_wrap .item .action_list li ~ li {margin-top: 0.6rem;}
.action_wrap .item .action_list li .subject {display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 1; overflow: hidden;}
.MC_box6 .slick-list {width: calc(100% + 1rem); margin: 0 -0.5rem;}


@media (max-width: 1240px) {
    /* 기상 특보 */
    .newsflash_list li a {margin: 0.65rem 0;}

    /* 기상 현황 */
    .condition_list li {width: 100%;}
    .condition_list li .condition_item {margin: 0.6rem 0;}
    .condition_list li:nth-child(2) .condition_item {margin-top: 0.6rem;}

    /* 산불 현황 */
    .fire_list li a {margin: 0.6rem 0;}
}

@media (max-width: 1024px) {
    /* 조치 사항 */
    .MC_box6 .safety_circle::before {bottom: 90%;}
    .action_wrap { height: auto; }
    .action_wrap .slide-page { flex-direction: column; gap: 0.5rem; }
    .action_wrap .item { flex: none; width: 100%; height: 12.5rem; }
    .action_wrap .item .tit_wrap {padding-bottom: 0.8rem;}
    .action_wrap .item .action_list {margin-top: 0.8rem;}
    .MC_box6 .slick-list {width: 100%; margin: 0; padding-top: 1px;}
}

@media (max-width: 950px) {
}

@media (max-width: 768px) {
    /* common */
    .safety_tit_wrap {margin-bottom: 0.7rem;}
    .safety_tit_wrap h2.heading {padding-right: 0.5rem;}
    h2.heading {font-size: 1.1rem; margin-bottom: 0.7rem;}
    .btn_more { font-size: 0.7rem;}
    .btn_more i{font-size: 0.9rem;}

    /* 지도영역  */
    .safety_map_wrap {border-radius: 0.5rem; padding: 0.8rem;}
    .safety_map {border-radius: 0.5rem;}

    /*** 상단컬러라인 박스 영역 ** */
    .safety_alert_wrap {border-radius: 0.5rem; padding-top: 0.25rem;}
    .safety_alert_inner {border-radius: 0.5rem; padding: 0.8rem;}

    /* 기상 상태별 클래스 */
    .safety_index {width: 3.25rem; font-size: 0.65rem;}
    .state {width: 1.95rem; height: 1.2rem; font-size: 0.65rem;}

    /* 기상 특보 */
    .newsflash_list li a {height: 1.2rem; margin: 0.4rem 0;}
    .newsflash_list li a .tit {font-size: 0.8rem;}
    .newsflash_list li a .date {font-size: 0.7rem;}

    /* 기상 현황 */
    .condition_list li .condition_item {margin: 0.4rem 0;}
    .condition_list li .condition_item .tit {font-size: 0.8rem;}
    .condition_list li .condition_item .txt {font-size: 0.75rem;}

    /* 산불 현황 */
    .fire_list li a .tit {height: 1.2rem;}
    .fire_list li a .subject {font-size: 0.8rem;}
    .fire_list li a .extinguish {width: 3.25rem; font-size: 0.65rem;}
    .fire_list li a .date {font-size: 0.7rem;}

    /* 조치 사항 */
    .MC_box6 .safety_alert_inner {padding-bottom: 0.3rem;}
    .action_wrap .item {height: 10.5rem; padding: 0.8rem;}
    .action_wrap .item .tit_wrap {padding-bottom: 0.8rem;}
    .action_wrap .item .tit_wrap .tit {height: 1.5rem;}
    .action_wrap .item .tit_wrap .safety_index {font-size: 0.75rem;}
    .action_wrap .item .tit_wrap .subject {font-size: 0.9rem;}
    .action_wrap .item .tit_wrap .date {font-size: 0.7rem;}
    .action_wrap .item .action_list {margin-top: 0.8rem;}
    .action_wrap .item .action_list li {height: 0.9rem; font-size: 0.75rem;}
    .action_wrap .item .action_list li::before {font-size: 0.7rem;}
}

@media (max-width: 580px) {
}

@media (max-width: 480px) {
    /* 지도 확대/축소 */
    .safety_map .zoom_area{bottom: 0.8rem; right: 0.8rem;}
    .safety_map .zoom_area button{width:1.8rem; height:1.8rem;}

    /* 기상 특보 */
    .newsflash_list li a {flex-wrap: wrap; height: auto;}
    .newsflash_list li a .date {width: 100%; margin-top: 0.35rem; margin-left: 0.8rem;}
    .newsflash_list .safety_index {height: 1.2rem;}

    /* 산불 현황 */
    .fire_list li a .tit {height: auto; flex-wrap: wrap;}
    .fire_list li a .subject {width: 100%; flex: none; margin-bottom: 0.2rem;}
    .fire_list li a .extinguish {height: 1.2rem;}
 
    /* 조치 사항 */
    .action_wrap .item {height: 12rem;;}
    .action_wrap .item .tit_wrap {flex-wrap: wrap;}
    .action_wrap .item .tit_wrap .tit {height: 1.3rem;}
    .action_wrap .item .tit_wrap .date {width: 100%; margin-top: 0.4rem; margin-left: 1.2rem;}
}

@media (max-width: 380px){
   
}

@media (max-width: 360px){
    
}