:root {
	--state-bg1 : 42, 255, 195;
    --state-bg2 : 255, 128, 105;
}

.Intro_box1 { width: 100%; height: 22.5rem;}
.Intro_box2 { width: 100%; height: 10.2rem; margin-top: 3rem;}
.Intro_box3 { width: 100%; margin-top: 3rem;}

/* common */
h2.intro_heading {display: flex; align-items: center; font-size: 1.6rem; font-weight: 700; color: #fff;}
h2.intro_heading img {margin-right: 0.4rem;}
h2.intro_heading span {font-size: 0.85rem; font-weight: 400; color: #ccc; margin-left: 0.8rem; word-break: keep-all;}
h3.intro_heading2 {margin-top: 4rem; margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 700; color: #fff;}
.safery_state + h3.intro_heading2 {margin-top: 0;}

/* 인트로 비주얼 */
.safety_intro_visual {position:relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 5rem; background: #000826 url("/images/web/safety/main/m_visual_01.png") no-repeat center right 13% / 45%; border: 3px solid #1A3D6D; border-radius: 1rem; overflow: hidden;}
.safety_intro_visual::before {content: ""; position:absolute; left: -1.6rem; bottom: 75%; width: 41.3rem; height: 41.3rem; background: radial-gradient(rgba(30, 167, 255, 1) 0, rgba(30, 167, 255, 0) 70%); border-radius: 50%;}
.safety_intro_visual::after {content: ""; position:absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0.85rem; box-shadow: inset 0 4px 100px rgba(24,111,190,0.5);}
.safety_intro_visual .txt {color: #fff;}
.safety_intro_visual .txt strong {font-size: 2.5rem; font-weight: 700; line-height: 130%;}
.safety_intro_visual .txt strong em {
  font-weight: 900;
  background: linear-gradient(180deg, #02EAF0 40%, #0168FF); /* 원하는 색상으로 변경 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* fallback */
}
.safety_intro_visual .txt > span {display: block; margin-top: 2.5rem; font-size: 1.4rem; font-weight: 500; line-height: 150%;}

/* 경상북도 전체 */
.safety_total {position:relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 2rem; background: linear-gradient(to right, #012D9A, #000826 55%); border: 3px solid #1A3D6D; border-radius: 1rem; color: #fff; overflow: hidden;}
.safety_total::before {content: ""; position:absolute; right: 6%; top: -25%; width: 50.9rem; height: 50.9rem; background: radial-gradient(rgb(30 214 255) 10%, rgba(30, 167, 255, 0) 65%); border-radius: 50%;}
.safety_total .tit_wrap {display: flex; align-items: center; gap: 1rem;}
.safety_total .tit_wrap .img {display: flex; align-items: center; justify-content: center; width: 4.1rem; height: 4.1rem; border-radius: 1rem; background: #0168FF;}
.safety_total .tit_wrap span {display: inline-flex; align-items: center; height: 1.6rem; border-radius: 0.8rem; border: 1px solid #fff; padding: 0 0.8rem; margin-left: 1rem;}
.safety_total .total_alert {display: flex; align-items: center; gap: 4rem; flex: 1; justify-content: end; margin-right: 5rem;}
.safety_total .total_alert li {position: relative; text-align: center;}
.safety_total .total_alert li ~ li::before {content: ""; position: absolute; left: -2rem; top: calc(50% - 2.5rem); width: 1px; height: 5rem; background: rgba(255,255,255,0.3);}
.safety_total .total_alert .tit {display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; font-weight: 700;}
.safety_total .total_alert .txt {margin-top: 0.2rem; font-size: 1.2rem;}
.safety_total .total_alert .txt strong {font-size: 2.5rem; font-weight: 700;}
.safety_total .go_total {display: flex; align-items: center; gap: 0.15rem; height: 3rem; border-radius: 0.5rem; padding: 0 1rem; background: linear-gradient(to right, #0168FF 50%, #02EAF0 120%); font-size: 1rem; z-index: 1;}
.safety_total .go_total em {font-weight: 700;}
.safety_total .go_total i {font-size: 1.2rem;}

/*** 지역선택 ***/
[class^="state"] {display: flex; align-items: center; background: rgba(var(--bg1-rgb), 0.15) !important; border: 2px solid rgba(var(--brd-bg), 1) !important;}
.state1 {--bg1-rgb: var(--state-bg1); --brd-bg: var(--state-bg1);}
.state2 {--bg1-rgb: var(--state-bg2); --brd-bg: var(--state-bg2);}
[class^="state"]::before {content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: rgba(var(--bg2-rgb), 1); box-shadow: 0 0 5px 3px rgba(var(--shadow-rgb), 0.5); margin-right: 0.6rem;}
.state1::before {--bg2-rgb: var(--state-bg1); --shadow-rgb: var(--state-bg1);}
.state2::before {--bg2-rgb: var(--state-bg2); --shadow-rgb: var(--state-bg2);}
[class^="state"] .txt {font-weight: 700; color: rgba(var(--txt-color), 1);}
[class^="state"] i {color: rgba(var(--txt-color), 1);}
.state1 .txt,
.state1 i {--txt-color: var(--state-bg1);}
.state2 .txt,
.state2 i {--txt-color: var(--state-bg2);}
.safety_region {padding: 2rem; border-radius: 1rem; background: #09274B; margin-top: 1.2rem;}
.safery_state {display: flex; align-items: center; justify-content: end; gap: 0.8rem;}
.safery_state .tit {font-size: 1rem; color: #ccc;}
.state_list {display: flex; align-items: center; gap: 0.5rem;}
.state_list::before {display: none;}
.state_list li {font-size: 1rem;}
.state_list .state_example {display: flex; align-items: center; height: 2.4rem; border-radius: 1.2rem; padding: 0 0.8rem;}

/* 지역리스트 */
.region_list {display: flex; gap: 1.2rem; flex-wrap: wrap;}
.region_list li {width: calc(20% - calc((1.2rem * 4)) / 5);}
.region_list li a {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 4.6rem; border-radius: 1rem; background: #021730; border: 2px solid #1A3D6D; font-size: 1.2rem; font-weight: 600; color: #fff; padding: 0 1.5rem; transition: all 0.2s;}
.region_list li a span {display: block; flex: 1;}
.region_list li a i {font-weight: 400; font-size: 1.4rem;}
/* 지역리스트 :active */
.region_list li a:hover,
.region_list li a:focus {background: #0168FF !important; border-color: #0168FF !important;}
.region_list li a:hover .txt,
.region_list li a:focus .txt,
.region_list li a:hover i,
.region_list li a:focus i {color: #fff !important;}

/* intro_footer */
.intro_footer {text-align: right; padding: 3rem 0 1.2rem; color: #fff;}

/* banner_zone */
.banner_zone {display: flex; align-items: center; gap: 1.5rem; max-width: 96rem; margin: 0 auto; padding: 1rem 2rem; border-radius: 2rem 2rem 0 0; background: #09274B;}
.banner_zone h2 {font-size: 1rem; font-weight: 700; color: #fff;}
.banner_zone .arwShow {display: flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.8rem; border-radius: 1rem; background: rgba(255,255,255,0.05);}
.banner_zone .arwShow a {color: #fff; font-size: 1.2rem;}
.banner_zone .arwShow a.play {display: none;}
.banner_zone .bnWrap {width: calc(100% - 15rem); margin-left: auto;}
.banner_zone .bnWrap .item {position: relative; text-align: center; background: #fff; overflow: visible;}
.banner_zone .bnWrap .item a {display: flex; align-items: center; justify-content: center; height: 2rem; padding: 0 0.25rem;}
.banner_zone .bnWrap .item img {max-width: 100%; vertical-align: middle;}
.banner_zone .bnWrap .item ~ .item::before {content: ""; position: absolute; left: -1.65rem; top: calc(50% - 0.15rem); width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #D9D9D9;}
.banner_zone .slick-slider {overflow: hidden;}
.banner_zone .slick-slide {margin: 0 1.5rem;}
.banner_zone .slick-list {margin: 0 -1.5rem;}


@media (max-width: 1440px) {
    /* 경상북도 전체 */
    .safety_total .tit_wrap h2.intro_heading {flex-direction: column; align-items: start;}
    .safety_total .tit_wrap span {margin-left: 0; margin-top: 0.5rem;}
}

@media (max-width: 1240px) {
    .Intro_box1 { height: 18rem;}
    .Intro_box2 {height: auto;}

    /* common */
    h3.intro_heading2 {margin-top: 2rem;}

    /* 인트로 비주얼 */
    .safety_intro_visual {padding: 0 3rem; background-position: center right 5%;}
    .safety_intro_visual .txt strong {font-size: 1.8rem;}
    .safety_intro_visual .txt > span {margin-top: 2rem; font-size: 1rem;}

    /* 경상북도 전체 */
    .safety_total {flex-wrap: wrap; padding: 1.5rem 2rem;}
    .safety_total::before {right: -22%; top: 30%; width: 46.2rem; height: 46.2rem;}
    .safety_total .total_alert {margin-right: 0;}
    .safety_total .go_total {justify-content: center; width: 100%; margin-top: 1.2rem;}
    .safety_total .go_total i {display: none;}

    /* 지역리스트 */
    .region_list li {width: calc(25% - calc((1.2rem * 3)) / 4);}
    .region_list li a {height: 4rem;}
}

@media (max-width: 1024px) {
    .Intro_box2 { margin-top: 2rem; }
    .Intro_box3 { margin-top: 2rem; }

    /* 경상북도 전체 */
    .safety_total {padding: 1.5rem;}

    /* 지역리스트 */
    .region_list li a {padding: 0 1rem;}

    /* intro_footer */
    .intro_footer {padding: 2rem 0;}

    /* banner_zone */
    .banner_zone {padding: 1rem 1.25rem;}
}

@media (max-width: 850px) {
    /* common */
    h2.intro_heading {flex-wrap: wrap; justify-content: center;}
    h2.intro_heading span {width: 100%; text-align: center; margin-top: 0.4rem; margin-left: 0;}

    /* 경상북도 전체 */
    .safety_total .total_alert {gap: 2rem;}
    .safety_total .total_alert li ~ li::before {left: -1rem;}

    /* 지역리스트 */
    .region_list li {width: calc(33.3% - calc((1.2rem * 2)) / 3);}

    /* banner_zone */
    .banner_zone h2 {display: none;}
    .banner_zone .bnWrap {width: calc(100% - 9rem);}
}

@media (max-width: 768px) {
    .Intro_box1 { height: 14rem;}

    /* common */
    h2.intro_heading {font-size: 1.2rem;}
    h2.intro_heading img {margin-right: 0.4rem;}
    h2.intro_heading span {font-size: 0.75rem;}
    h3.intro_heading2 {margin-top: 2rem; margin-bottom: 0.8rem; font-size: 1rem;}
    .safery_state + h3.intro_heading2 {margin-top: 1.5rem;}
    
    /* 인트로 비주얼 */
    .safety_intro_visual {padding: 0 2rem;}
    .safety_intro_visual .txt strong {font-size: 1.5rem;}
    .safety_intro_visual .txt > span {margin-top: 1.5rem; font-size: 0.8rem;}

    /* 경상북도 전체 */
    .safety_total {background: linear-gradient(to bottom, #012D9A, #000826 70%); border-radius: 0.5rem;}
    .safety_total::before {right: -10rem; top: 70%; width: 31.35rem; height: 31.35em;}
    .safety_total .total_alert {width: 100%; flex: none; justify-content: center; margin-top: 1.5rem; gap: 4rem;}
    .safety_total .total_alert li {flex: 1;}
    .safety_total .total_alert li ~ li::before {left: -2rem;}
    .safety_total .total_alert .tit {font-size: 0.9rem;}
    .safety_total .total_alert .tit img {width: 1.5rem; height: 1.5rem;;}
    .safety_total .total_alert .txt {font-size: 0.9rem;}
    .safety_total .total_alert .txt strong {font-size: 2rem;}
    .safety_total .go_total {justify-content: space-between; margin-top: 1.5rem; height: 2.5rem; font-size: 0.85rem;}
    .safety_total .go_total i {display: block;}
    .safety_total .tit_wrap span {height: 1.5rem; margin-top: 0.8rem;}

    /*** 지역선택 ***/
    [class^="state"]::before {width: 0.4rem; height: 0.4rem; margin-right: 0.35rem;}
    .safety_region {padding: 1.5rem 1rem; border-radius: 0.5rem; margin-top: 1rem;}
    .safery_state {gap: 0.4rem;}
    .safery_state .tit {font-size: 0.75rem;}
    .state_list {gap: 0.4rem;}
    .state_list li {font-size: 0.75rem;}
    .state_list .state_example {height: 1.7rem; padding: 0 0.6rem;}

    /* 지역리스트 */
    .region_list {gap: 0.5rem;}
    .region_list li {width: calc(33.3% - calc((0.5rem * 2)) / 3);}
    .region_list li a {justify-content: center; height: 2.7rem; border-radius: 0.5rem; font-size: 0.9rem; padding: 0 0.5rem; text-align: center;}
    .region_list li a span {flex: none;}
    .region_list li a i {display: none;}

    /* banner_zone */
    .banner_zone .arwShow {gap: 0.25rem; height: 2rem; padding: 0 0.5rem;}
    .banner_zone .arwShow a {font-size: 1rem;}
    .banner_zone .bnWrap {width: calc(100% - 7rem);}
    .banner_zone .bnWrap .item ~ .item::before {left: -1.15rem;}
    .banner_zone .slick-slide {margin: 0 1rem;}
    .banner_zone .slick-list {margin: 0 -1rem;}
}

@media (max-width: 580px) {
     .Intro_box1 { height: 20rem;}
     .Intro_box2 { margin-top: 1.5rem; }
     .Intro_box3 { margin-top: 1.5rem; }
    
    /* 인트로 비주얼 */
    .safety_intro_visual {align-items: start; padding: 1.5rem; background-position: bottom 10% center; background-size: 14rem;}
    .safety_intro_visual .txt strong {font-size: 1.5rem;}
    .safety_intro_visual .txt strong span {display: block;}
    .safety_intro_visual .txt strong br {display: none;}
    .safety_intro_visual .txt > span {margin-top: 0.8rem; font-size: 0.75rem;}

    /* intro_footer */
    .intro_footer {padding: 1.5rem 0; font-size: 0.7rem;}
}

@media (max-width: 480px) {
    /* 경상북도 전체 */
    .safety_total {padding: 1rem;}
    .safety_total .tit_wrap span {padding: 0 0.4rem;;}
    .safety_total .total_alert {gap: 2rem;}
    .safety_total .total_alert li ~ li::before {left: -1rem;}

}

@media (max-width: 380px) {

}

@media (max-width: 360px) {
    .Intro_box1 { height: 19rem;}

    /* 인트로 비주얼 */
    .safety_intro_visual {padding: 1rem 1.5rem; background-size: 12rem;}
    .safety_intro_visual .txt strong {font-size: 1.25rem;}
    .safety_intro_visual .txt > span {word-break: keep-all;}
    .safety_intro_visual .txt > span br {display: none;}

    /* 경상북도 전체 */
    .safety_total .tit_wrap {gap: 0.5rem;}
    .safety_total .tit_wrap .img {width: 3.25rem; height: 3.25rem;}
    .safety_total .tit_wrap .img img {max-width: 60%;}
    .safety_total .tit_wrap span {font-size: 0.7rem; margin-top: 0.5rem;}
    .safety_total .total_alert {gap: 1rem;}
    .safety_total .total_alert li ~ li::before {left: -0.5rem;}
    .safety_total .total_alert .tit {gap: 0.2rem;}

    /*** 지역선택 ***/
    .safery_state {flex-direction: column; align-items: end;}

    /* 지역리스트 */
    .region_list li {width: calc(50% - calc(0.5rem / 2));}
}