@charset "utf-8";
    #translate-info{display: inline-block;width: 25px;line-height: 25px;height: 25px;background: #4d459e;border-radius: 50%;text-align: center;}
.main-content {
    max-width: 100%; 
    min-height:500px;
    box-sizing: border-box;
}
.my-weatheraear{line-height:60px}
.content-mainarea {
    background-color: #d8eeff;
    width: 100%;
    /*height: 240px;*/
    padding:0 3%
}

/*
   오류번호 031
   일자: 2026-02-25
   작업자: 최연진
   변경이력: 메인- 배너 높이 및 날씨 정보 섹션 표시 정렬 문제 수정
*/
.content-mainarea {
    background-color: #d8eeff;
    width: 100%;
    height: auto;
    min-height: 240px;
    padding:0 3%;
    display:none
}
/***** 변경 내용 끝 *****/

/* 재난뉴스 슬라이드 */
ul{
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
}
.demo .item{
    padding-bottom: 0px;
    height: 100%;
    
}
.content-slider li{
    width: 100%;
    text-align: center;
    padding:80px 0 30px 0;
    box-sizing: border-box;    
}
.content-slider h3 {
    text-align: center;
    font-size: 36px;
    line-height: 1.4;
    color:#1f284a;
    padding-bottom:10px;
}
.content-slider .message-datetime {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 18px;
    color:#5c6279;
    padding:0px 20px;
    border-radius: 40px;
    background-color: #cde6fa;    
}
.message-detail {
    font-size: 16px;
    color:#8ba7bd;
    line-height: 1.3;
    /*padding-top:30px;*/
}
.demo{
    width: 100%;
    text-align: center;
    height: 100%;
}

/* 재난문자 슬라이드 */

/* 내지역 날씨, 재난정보 */
.main-disasterarea {
    display: flex;
    justify-content: center;
    padding-top:70px;
}
.my-weatheraear {
    margin-bottom:0px;
    padding-bottom:20px;
    border-bottom:#538bc5 0px solid;
}
.my-weatherinfor {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.my-locaname {
    font-size: 1.812rem;
    font-weight: 500;
    /*text-align: center;*/
    /*text-transform: uppercase;*/
    padding-right:10px;
    color:#fff;
    float:left
}
.my-weatherinfor .weather-infomore {
    display: inline-block;
}
.loca-weatherinfo {
    display: flex;
   
}
.temper-info {
    font-size: 46px;
    font-weight: 600;
    padding:0 20px 0 40px;
    color:#eee
}

.weather-infomore a {
    background-color: #00161c;
    font-size: 13px;
    font-weight: 500;
    color:#fff;
    padding:3px 10px;
    border-radius: 20px;
}
.weather-infomore a:hover {
    background-color: #fff;
    color:#000
}
.my-locaname span {
    display: block;
    font-size: 26px;
    color:#fff;/*color:#2963c4;*/
    font-weight: 500;
}

.disas-list {
	display:flex;
	gap:5px
}
.disas-list li {
    width:30%;
    background-color:#376fcd;
    padding:15px 12px;
    border-radius:10px;
    text-align:center
}
.disas-list li a {
    display: flex;
    justify-content:center;
    padding-right:0px;
    font-size: 16px;
    font-weight: 600;
    color:#eee;  
    margin:0 auto;  
}
.disas-list li a p {
    white-space: pre;
    position: relative;
    vertical-align:text-bottom;
}
.disas-list li a:hover p {
    color:#fff;
}
.disas-list li a:hover p img {
    filter: invert(18%) sepia(9%) saturate(7103%) hue-rotate(199deg) brightness(50%) contrast(93%);
}
.disas-list li a span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    text-align: center;
    line-height: 46px;
    background-color: #fff;
    transition: 0.3s;
    margin-right:10px;
}
.disas-list li a:hover span {
    display: inline-block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    text-align: center;
    line-height: 46px;
    background-color: #243367;
}
.disas-list li a:hover img {
    -webkit-filter: brightness(0) invert(1); 
    filter: brightness(0) invert(1);
}
/* 재난문자,뉴스 */
.main-boardarea {
    display: flex; 
    background:#2963c4;
    background:linear-gradient(90deg,rgba(41, 99, 196, 1) 50%, rgba(36, 50, 100, 1) 50%)  
}
.md_area{max-width:1600px;width:100%;position:relative;margin:0 auto;}
.disaster-text {
    width: 50%;
    padding:50px 3%;
    background-color: #2963c4;
    float:left
}
.safety-news {
    width: 50%;
    padding:50px 3%;
    background-color: #243264;
    float:right
}
.brd-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
}
.brd-title h3{
    color:#fff;font-size: 26px;
    font-weight: 500;
    text-transform: uppercase;
}
.brd-titinfo {
    width: 100%;
    padding:10px 0 20px 0
}
.brd-titinfo li {
    display: inline-block;
    font-size: 16px;
    color:#fff;
    padding-right:18px;
    font-weight: 500;
    background: url('../../images/eng/main/brd-titbar.png') no-repeat 100% 50%;
    margin-right:15px;
}

.brd-titinfo li span {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #114397;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color:#fff
}
.brd-titinfo li:last-child {
    padding-right:0;
    margin-right:0
}
.disaster-detail {
    padding-top:20px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color:#fff;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    box-sizing: border-box;
    -webkit-box-orient: vertical;
    max-height: 150px;
}
.disaster-detail a:hover{
    text-decoration: underline;
}
.news-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
    padding-bottom:20px;
    margin-bottom:20px;
}
.news-title h3{
    color:#fff;font-size: 26px;
    font-weight: 500;
    text-transform: uppercase;
}
.safety-newslist li {
    /*background: url('../../images/eng/main/board-arr.png') no-repeat 0 50%;*/
    font-size: 18px;
    color:#fff;
    font-weight: 300;
    /*overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;*/
    box-sizing: border-box;
    -webkit-box-orient: vertical;
    padding:0px 0 0px 15px;
    margin-bottom:12px;
    text-align:justify
}
.safety-newslist li a {
    font-weight: 300;
}
.safety-newslist li a:hover {
    text-decoration: underline;
}
.qiuick-menuarea h3 {
    display: block;
    text-transform: uppercase;
    font-size: 26px;
    color:#3c4963;
    padding-bottom:35px;
}
.qiuick-menuarea {
    width: 100%;
}
.quick-listarea {
    display: flex;
    padding:30px 50px;
    max-width:1600px;
    width:100%;
    position:relative;
    margin:0 auto
}
.quick-list li span{
    display: block;
    width: 70px;
    height:70px;
    padding-top:10px;
    margin:0 auto;
    text-align: center;
    transition: all 0.3s;    
}
.quick-list li:hover span{
    border-radius: 10px;
    background-color: #dadbe1;
    width: 70px;
    height:70px;
    text-align: center;   
    box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1); 
}
.quick-list li {
    display: inline-block;
    font-size: 16px;
    color:#222;
    font-weight: 500;
    text-align: center;
    padding:0 3%;
    background: url('../../images/eng/main/quick-bar.png') no-repeat 100% 50%;
}
.quick-list li:hover a {
    color:#222
}
.quick-list li img {
    margin:0 auto 5px auto;
    display: block;
}
.quick-list li:last-child {
    background-image: none;
}


.embassy-information {
    margin-top:20px; 
    padding:15px;
    box-sizing: border-box;
    width: 38%;
     height: 168px;
     border-radius: 10px;
     overflow: hidden;
     border:1px transparent solid;
     transition: all 0.3s;
     background: #e1f1f8 url('../../images/eng/main/popzone-img.png') no-repeat 50% 50%;
     background-size: contain;
}
.embassy-information:hover {
    box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1);
    border:1px #cfe4ed solid
}
.embassy-information p {
    font-size: 22px;
    font-weight: 500;
    color:#3657b2;
    font-size: 1.6em;
}
.embassy-information a {
    display: inline-block;
    width: 95px;
    height: 24px;
    font-size: 0;
    margin:5px 0 0 10px;
    vertical-align: top;
    background: url('../../images/eng/main/emb-arr.png') no-repeat;
    transform: translateX(0px);
   transition: 0.3s 
} 

    
.embassy-information:hover a {
    transform: translateX(5px);
}
/* 재난문자,뉴스 */



/* pad area */
@media all and (max-width:1280px) { 
    .main-content {
        max-width: 100%;
        width:100%;
        padding:0;
    }
    /* 내지역 날씨, 재난정보 */
    .main-disasterarea {
        display: flex;
        justify-content: center;
    }
    .my-weatheraear {
        margin-bottom:0px;
    }
    .my-weatherinfor {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        
    }
    .my-locaname {
       font-size: 1.812rem;
        font-weight: 500;
        text-align: center;
        /*text-transform: uppercase;*/
        padding-right:10px;
        display: block;
    }
    .my-weatherinfor .weather-infomore {
        display: block;
        /*margin-top:10px;*/ /* 메인에 wether information부분 UI틀어짐으로 마진 제거*/
        text-align: center;
    }
    .loca-weatherinfo {
        display: flex;
    }
    .temper-info {
        font-size: 46px;
        font-weight: 600;
        padding:0 20px 0 20px
    }

    .weather-infomore a {
        background-color: #2963c4;
        font-size: 13px;
        font-weight: 500;
        color:#fff;
        padding:5px 20px;
        border-radius: 20px;
    }
    .weather-infomore a:hover {
        background-color: #1348a0;
    }
    .my-locaname span {
        display: block;
        font-size: 26px;
        color:#2963c4;
        font-weight: 500;
    }
    .disaster-listarea {
        padding-left:0px
    }
    .disas-list li a {
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
        padding-right:0px;
        font-size: 16px;
        font-weight: 600;
    }
    .disas-list li a p {
        display: block;
        white-space: pre;
        width:100%;
        padding-top:10px;
    }
    .disas-list li a:hover p {
        color:#243367
    }
    .disas-list li a:hover p img {
        filter: invert(18%) sepia(9%) saturate(7103%) hue-rotate(199deg) brightness(50%) contrast(93%);
    }
    .disas-list li a span {
        display: block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        background-color: #fff;
        transition: 0.3s;
        margin-right:0px;
    }
    .disas-list li a:hover span {
        display: inline-block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        background-color: #243367;
    }
    .disas-list li a:hover img {
        -webkit-filter: brightness(0) invert(1); 
        filter: brightness(0) invert(1);
    }
    .quick-listarea {
        width: 100%;
        display: block;
    }
    .qiuick-menuarea h3 {
        display: block;
        text-align: center;
        text-transform: uppercase;
        font-size: 26px;
        color:#3c4963;
        padding-bottom:35px;
    }
    .qiuick-menuarea {
        width: 100%;
    }
    .quick-listarea {
        display: flex;
        padding:30px 0%;
    }
    .quick-list li span{
        display: block;
        width: 70px;
        height:70px;
        padding-top:0px;
        margin:0 auto;
        text-align: center;
        transition: all 0.3s;    
    }
    .quick-list li:hover span{
        border-radius: 10px;
        background-color: #dadbe1;
        width: 70px;
        height:70px;
        text-align: center;   
        box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1); 
    }
    .quick-list li {
        display: inline-block;
        font-size: 16px;
        color:#222;
        font-weight: 500;
        text-align: center;
        padding:0 2.5%;
        background: url('../../images/eng/main/quick-bar.png') no-repeat 100% 50%;
    }
    .quick-list li:hover a {
        color:#222
    }
    .quick-list li img {
        margin:0 auto 5px auto;
        display: block;
    }
    .quick-list li:last-child {
        background-image: none;
    }
    
}


/*
   오류번호 031
   일자: 2026-02-25
   작업자: 최연진
   변경이력: 메인- 배너 높이 및 날씨 정보 섹션 표시 정렬 문제 수정
*/
@media all and (max-width:1280px) { 
    .my-weatherinfor .weather-infomore {
        display: block;
        text-align: center;
        width: 184px;
        /* display: flex; */
        margin: auto;
    }
    .weather-infomore a {
        background-color: black;
        font-size: 13px;
        font-weight: 500;
        color:#fff;
        padding:5px 20px;
        border-radius: 20px;
    }
    .weather-infomore a:hover {
        background-color: #fff;
    }

    .my-locaname span {
        display: block;
        font-size: 26px;
        color:#fff;
        font-weight: 500;
    }
            
}
/***** 변경 내용 끝 *****/

@media all and (max-width:1170px) {
    .main-content {
        max-width: 100%;
        padding:0 0%;
        margin: auto; transition: margin-left 0.3s;
    }
    /* 내지역 날씨, 재난정보 */
    .main-disasterarea {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .my-weatheraear {
        margin-bottom:0px;
        width: 100%;
        display: flex;
    }
    .my-weatherinfor {
        display: flex;
        flex-wrap: wrap;  
        justify-content: center;      
    }
    .my-locationinfor {
        margin-right:40px;
    }
    .my-locaname {
        font-size: 1.812rem;
        font-weight: 500;
        text-align: center;
        /*text-transform: uppercase;*/
        padding-right:10px;
        display: inline-block;

    }
    .my-weatherinfor .weather-infomore {
        display: inline-block;
        /*margin-top:10px;*/ /* 메인에 wether information부분 UI틀어짐으로 마진 제거*/
        text-align: center;
    }
    .loca-weatherinfo {
        display: flex;
        padding-top:10px;
    }
    .temper-info {
        font-size: 42px;
        font-weight: 600;
        padding:0 10px 0 0px;

    }

    .weather-infomore a {
        background-color: #2963c4;
        font-size: 13px;
        font-weight: 500;
        color:#fff;
        padding:5px 20px;
        border-radius: 20px;
    }
    .weather-infomore a:hover {
        background-color: #1348a0;
    }
    .my-locaname span {
        display: block;
        font-size: 26px;
        color:#2963c4;
        font-weight: 500;
    }
    .disaster-listarea {
        padding-left:0px;
        margin-bottom:30px;
    }
    .disas-list li {
        display: inline-block;
    }
    .disas-list li a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-right:20px;
        font-size: 16px;
        font-weight: 600;
    }
    .disas-list li a p {
        display: block;
        white-space: pre;
    }
    .disas-list li a:hover p {
        color:#243367
    }
    .disas-list li a:hover p img {
        filter: invert(18%) sepia(9%) saturate(7103%) hue-rotate(199deg) brightness(50%) contrast(93%);
    }
    .disas-list li a span {
        display: block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        background-color: #fff;
        transition: 0.3s;
        margin-right:10px;
    }
    .disas-list li a:hover span {
        display: inline-block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        background-color: #243367;
    }
    .disas-list li a:hover img {
        -webkit-filter: brightness(0) invert(1); 
        filter: brightness(0) invert(1);
    }



    .qiuick-menuarea h3 {
        display: block;
        text-align: center;
        text-transform: uppercase;
        font-size: 26px;
        color:#3c4963;
        padding-bottom:35px;
    }
    .qiuick-menuarea {
        width: 100%;
    }
    .quick-listarea {
        display: flex;
        padding:30px 0%;
    }
    .quick-list li span{
        display: block;
        width: 70px;
        height:70px;
        padding-top:0px;
        margin:0 auto;
        text-align: center;
        transition: all 0.3s;    
    }
    .quick-list li:hover span{
        border-radius: 10px;
        background-color: #dadbe1;
        width: 70px;
        height:70px;
        text-align: center;   
        box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1); 
    }
    .quick-list li {
        display: inline-block;
        font-size: 15px;
        color:#222;
        font-weight: 500;
        text-align: center;
        padding:0 2%;
        background: url('../../images/eng/main/quick-bar.png') no-repeat 100% 50%;
    }
    .quick-list li:hover a {
        color:#222
    }
    .quick-list li img {
        margin:0 auto 5px auto;
        display: block;
    }
    .quick-list li:last-child {
        background-image: none;
    }
    
    
    .embassy-information {
        margin-top:20px; 
        padding:15px;
        box-sizing: border-box;
        width: 38%;
         height: 168px;
         border-radius: 10px;
         overflow: hidden;
         border:1px transparent solid;
         transition: all 0.3s;
         background: #e1f1f8 url('../../images/eng/main/popzone-img.png') no-repeat 50% 50%;
    }
    .embassy-information:hover {
        box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1);
        border:1px #cfe4ed solid
    }
    .embassy-information p {
        font-size: 20px;
        font-weight: 500;
        color:#3657b2;
    }
    .embassy-information a {
        display: inline-block;
        width: 95px;
        height: 24px;
        font-size: 0;
        margin:5px 0 0 10px;
        vertical-align: top;
        background: url('../../images/eng/main/emb-arr.png') no-repeat;
        transform: translateX(0px);
       transition: 0.3s 
    } 
    .embassy-information:hover a {
        transform: translateX(5px);
    }

}


/*
   오류번호 031
   일자: 2026-02-25
   작업자: 최연진
   변경이력: 메인- 배너 높이 및 날씨 정보 섹션 표시 정렬 문제 수정
*/
@media all and (max-width:1170px) {
    .my-weatherinfor {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        align-items: flex-start;
    }
    .loca-weatherinfo {
        display: flex;
        padding-top: 0;
    }    
    .my-weatherinfor .weather-infomore {
        display: inline-block;
        text-align: center;
        width: 80px;
    }    
    .weather-infomore a {
        background-color: #00161c;
        font-size: 13px;
        font-weight: 500;
        color:#fff;
        padding:5px 20px;
        border-radius: 20px;
    }
    .weather-infomore a:hover {
        background-color: #fff;
        color:#000
    }
    .my-locaname span {
        display: block;
        font-size: 26px;
        color:#fff;
        font-weight: 500;
    }    
}
/***** 변경 내용 끝 *****/

@media all and (max-width:1024px) { 
	.linemap{display:none}
    .disaster-text {
        width: 50%;
        padding:35px 3%;
        background-color: #2963c4;
    }
    .safety-news {
        width: 50%;
        padding:35px 3%;
        background-color: #243264;
    }
    .brd-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
    }
    .brd-title h3{
        color:#fff;font-size: 22px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .brd-titinfo {
        width: 100%;
        padding:10px 0 20px 0
    }
    .brd-titinfo li {
        display: inline-block;
        font-size: 14px;
        color:#fff;
        padding-right:18px;
        font-weight: 400;
        background: url('../../images/eng/main/brd-titbar.png') no-repeat 100% 50%;
        margin-right:10px;
    }
    .brd-titinfo li span {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #114397;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 600;
        color:#fff
    }
    .brd-titinfo li:last-child {
        padding-right:0;
        margin-right:0
    }
    .disaster-detail {
        padding-top:20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        color:#fff;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        max-height: 130px;
    }
    .news-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
        padding-bottom:20px;
        margin-bottom:20px;
    }
    .news-title h3{
        color:#fff;font-size: 22px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .safety-newslist li {
        background: url('../../images/eng/main/board-arr.png') no-repeat 0 50%;
        font-size: 16px;
        color:#fff;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        height: 23px;
        padding:0px 0 0px 15px;
        margin-bottom:12px;
    }
    .safety-newslist li a {
        font-weight: 400;
    }

    .quick-listarea {
        display: block;
        padding:30px 3%;
        width: 100%;
        text-align: center;
    }
    .qiuick-menuarea h3 {
        display: block;
        text-align: center;
        text-transform: uppercase;
        font-size: 22px;
        color:#3c4963;
        padding-bottom:15px;
    }
    .quick-list li {
        display: inline-block;
        font-size: 15px;
        color:#222;
        font-weight: 500;
        text-align: center;
        padding:2% 3% 2%;
        background: url('../images/eng/main/quick-bar1.png') no-repeat 100% 50%;
    }

    .embassy-information {
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        padding:20px
    }

    
}
@media all and (max-width:1000px) { 
    .main-boardarea {
        display: flex;   
        flex-wrap: wrap; 
    }
    .disaster-text {
        width: 100%;
        padding:30px 3%;
        box-sizing: border-box;
        background-color: #2963c4;
    }
    .safety-news {
        width: 100%;
        padding:30px 3%;
        box-sizing: border-box;
        background-color: #243264;
    }
    .brd-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
    }
    .brd-title h3{
        color:#fff;font-size: 22px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .brd-titinfo {
        width: 100%;
        padding:10px 0 10px 0
    }
    .brd-titinfo li {
        display: inline-block;
        font-size: 14px;
        color:#fff;
        padding-right:18px;
        font-weight: 400;
        background: url('../../images/eng/main/brd-titbar.png') no-repeat 100% 50%;
        margin-right:10px;
    }
    .brd-titinfo li span {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #114397;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 600;
        color:#fff
    }
    .brd-titinfo li:last-child {
        padding-right:0;
        margin-right:0
    }
    .disaster-detail {
        padding-top:10px;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.5;
        color:#fff;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        max-height: 100%;
    }
    .news-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
        padding-bottom:10px;
        margin-bottom:15px;
    }
    .news-title h3{
        color:#fff;font-size: 22px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .safety-newslist li {
        background: url('../../images/eng/main/board-arr.png') no-repeat 0 50%;
        font-size: 16px;
        color:#fff;
        font-weight: 300;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        height: 23px;
        padding:0px 0 0px 15px;
        margin-bottom:12px;
    }
    .safety-newslist li a {
        font-weight: 300;
    }
    .embassy-information {
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        padding:20px
    }
    
    
}

/* mobile area */
@media all and (max-width:780px) {
    .content-slider li{
        width: 100%;
        text-align: center;
        padding:80px 0 30px 0;
        box-sizing: border-box;    
    }
    /* 내지역 날씨, 재난정보 */
    .main-disasterarea {
        display: flex;
        justify-content: center;
        padding-top:0px;
    }
    .my-weatheraear {
	    margin-bottom:0px;
	    padding-bottom:0px;
	    border-bottom:#538bc5 0px solid;
	}
    .my-weatheraear {
        margin-bottom:10px;        
    }
    .my-weatherinfor {
        display: block;
        text-align: center;
    }
    .my-locaname {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        text-transform: uppercase;
        padding-right:10px;
        display: inline-block;
    }
    .my-weatherinfor .weather-infomore {
        display: inline-block;
    }
    .loca-weatherinfo {
        display: block;
        flex-wrap: wrap;
        margin-top:0px;
        margin-bottom:10px;
        text-align: center;
    }
    .temper-info {
        font-size: 40px;
        font-weight: 600;
        padding:0 20px 0 40px;
        display: inline-block;
    }
    .weather-icon {
        display: inline-block;
        vertical-align: bottom;
    }
    .weather-infomore a {
        background-color: #2963c4;
        font-size: 13px;
        font-weight: 500;
        color:#fff;
        padding:3px 10px;
        border-radius: 20px;
    }
    .weather-infomore a:hover {
        background-color: #1348a0;
    }
    .my-locaname span {
        display: block;
        font-size: 24px;
        font-weight: 500;
        color:#2963c4;
        font-weight: 500;
    }
    .disaster-listarea {
        padding-left:0px;
    }
    .disas-list li {
        display: inline-block;
    }
    .disas-list li a {
        display: flex;
        align-items: center;
        padding-right:30px;
        font-size: 16px;
        font-weight: 600;
    }
    .disas-list li:last-child a {
        padding-right:0
    }
    .disas-list li a p {
        white-space: pre;
        position: relative;
        vertical-align:text-bottom;
    }
    .disas-list li a:hover p {
        color:#243367
    }
    .disas-list li a:hover p img {
        filter: invert(18%) sepia(9%) saturate(7103%) hue-rotate(199deg) brightness(50%) contrast(93%);
    }
    .disas-list li a span {
        display: inline-block;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        text-align: center;
        line-height: 46px;
        background-color: #fff;
        transition: 0.3s;
        margin-right:10px;
    }
    .disas-list li a:hover span {
        display: inline-block;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        text-align: center;
        line-height: 46px;
        background-color: #243367;
        
    }
    .disas-list li a:hover img {
        -webkit-filter: brightness(0) invert(1); 
        filter: brightness(0) invert(1);
    }

    .content-slider h3 {
        text-align: center;
        font-size: 28px;
        line-height: 1.2;
        color:#1f284a;
        padding-bottom:20px;
    }
    .content-slider .message-datetime {
        display: inline-block;
        
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 14px;
        color:#5c6279;
        padding:0px 20px;
        border-radius: 40px;
        background-color: #cde6fa;    
    }
    .message-detail {
        font-size: 16px;
        color:#8ba7bd;
        line-height: 1.3;
        padding-top:30px;
    }




    .main-boardarea {
        display: flex;   
        flex-wrap: wrap; 
    }
    .disaster-text {
        width: 100%;
        padding:30px 3%;
        box-sizing: border-box;
        background-color: #2963c4;
    }
    .safety-news {
        width: 100%;
        padding:30px 3%;
        box-sizing: border-box;
        background-color: #243264;
    }
    .brd-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
    }
    .brd-title h3{
        color:#fff;font-size:20px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .brd-titinfo {
        width: 100%;
        padding:0px 0 10px 0
    }
    .brd-titinfo li {
        display: inline-block;
        font-size: 14px;
        color:#fff;
        padding-right:18px;
        font-weight: 400;
        background: url('../../images/eng/main/brd-titbar.png') no-repeat 100% 50%;
        margin-right:10px;
    }
    .brd-titinfo li span {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #114397;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 600;
        color:#fff
    }
    .brd-titinfo li:last-child {
        padding-right:0;
        margin-right:0
    }
    .disaster-detail {
        padding-top:10px;
        font-size: 15px;
        font-weight: 300;
        line-height: 1.4;
        color:#fff;
        text-overflow:clip;
        overflow: hidden;
        display: block;
    }
    .news-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom:1px rgba(225, 225, 225, 0.15) dashed;
        padding-bottom:10px;
        margin-bottom:15px;
    }
    .news-title h3{
        color:#fff;font-size: 22px;
        font-weight: 500;
        text-transform: uppercase;
    }
    .safety-newslist li {
        background: url('../../images/eng/main/board-arr.png') no-repeat 0 50%;
        font-size: 16px;
        color:#fff;
        font-weight: 300;
        overflow: hidden;
        text-overflow: clip;
        display: block;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        height: 100%;
        padding:0px 0 0px 15px;
        margin-bottom:12px;
    }
    .safety-newslist li a {
        font-weight: 300;
    }
}

/*
   오류번호 031
   일자: 2026-02-25
   작업자: 최연진
   변경이력: 메인- 배너 높이 및 날씨 정보 섹션 표시 정렬 문제 수정
*/
@media all and (max-width:780px) {
    .my-weatherinfor {
        display: flex;
        flex-wrap: wrap;
        gap: 0px;
    }
    .loca-weatherinfo {
        display: flex;
        flex-wrap: wrap;
        margin-top:0px;
        margin-bottom:10px;
        text-align: center;
    }
    .temper-info {
        font-size: 40px;
        font-weight: 600;
        padding: 0 14px 0 20px;
        display: inline-block;
    }
    .weather-infomore a {
        background-color: #00161c;
        font-size: 13px;
        font-weight: 500;
        color:#fff;
        padding:3px 10px;
        border-radius: 20px;
    }
    .weather-infomore a:hover {
        background-color: #fff;
        color:#000
    }

    .my-locaname span {
        display: block;
        font-size: 24px;
        font-weight: 500;
        color:#fff;
        font-weight: 500;
    }    
    
}
/***** 변경 내용 끝 *****/

@media all and (max-width:640px) {
    .disaster-listarea {
        padding-left:0px;
        text-align: center;
    }
    .disas-list {
    	display: flex;  
    	flex-wrap:wrap
    }
    .disas-list li {
         width:45%
    }
    .disas-list li a {
        display: flex;
        justify-content: center;
        padding-right:0px;
        font-size: 16px;
        font-weight: 600;
    }
    .disas-list li:last-child a {
        padding-right:0
    }
    .disas-list li a p {
        white-space: normal;
        position: relative;
        text-align: center;
        width: calc(100% - 60px);
        
    }
    .disas-list li a:hover p {
        color:#243367
    }
    .disas-list li a:hover p img {
        filter: invert(18%) sepia(9%) saturate(7103%) hue-rotate(199deg) brightness(50%) contrast(93%);
    }
    .disas-list li a span {
        display: block;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        text-align: center;
        line-height: 46px;
        background-color: #fff;
        transition: 0.3s;
        margin:0px auto;
    }
    .disas-list li a:hover span {
        background-color: #243367;
    }


}


/*
   오류번호 031
   일자: 2026-02-25
   작업자: 최연진
   변경이력: 메인- 배너 높이 및 날씨 정보 섹션 표시 정렬 문제 수정
*/
@media (max-width: 640px) {
    .disas-list li {
         width: 100%;
    }
}
/***** 변경 내용 끝 *****/


@media all and (max-width:540px) {

	.disas-list li {
		width:100%;
		display:block
	}
    .btn-totalsearch {
        width: 12%;
        background-size: 20px;
    }
    .total-searchtxt {
        text-align: center;
        padding-top:15px;
    }
    .search-textlist {
        padding-top:5px
    }
    .search-textlist li{
        display: inline-block;
        padding:5px 10px;
        border-radius: 80px;
        color:#878686;
        font-size: 14px;
        font-weight: 500;
        background-color: #ededed;
    }
    .main-thirdcon h3 {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        padding-bottom:30px
    }
    .quick-titarea .icon-setting {
        background:#222 url('../../images/eng/main/setting-icon.png') no-repeat 85% 50%;
        background-size: 15px;
        padding:3px 25px 3px 10px;
        border-radius: 50px;
        font-size: 14px;
        color:#fff;
        float:right;
        cursor: pointer;
    }
    .guide-title {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        margin-bottom:15px
    }
    .guideline-list li {
        width: 49%;
        margin:0 2% 2% 0;
        height: 105px;
        line-height: 1.4;
        text-align: center;
        border:1px #dfdfdf solid;
        border-radius: 20px;
        transition: 0.3s;
        box-sizing: border-box;
    }
    .guideline-list li:nth-child(2),
    .guideline-list li:nth-child(4),
    .guideline-list li:nth-child(6),
    .guideline-list li:nth-child(8) {
        margin-right:0
    }

    .guideline-list li:nth-child(7)
    .guideline-list li:nth-child(8) {
        margin-bottom:0
    }
    .guideline-list li a {
        font-size: 18px;
        color:#222;
        font-weight: 600;
        padding-left:0;
    }
    .guideline-list li a span {
        display: block;
        width: 40px;
        height: 40px;
        background-color: #f1f1f1;
        border-radius: 50%;
        margin:5px auto 2px auto;
        transition: 0.3s;
    }
    .guideline-list li:hover {
        border:1px #0074e5 solid;
        box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.15);
    }

    .onestop-list li {
        width: 100%;
        height: 70px;
        line-height: 70px;
        padding-left:20px;
        margin-right:0%;
        margin-bottom:1%;
        font-size: 20px;
    }
    .message-list li a {
        font-size: 16px;
        color:#222;
        padding-bottom:5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        max-height: 40px;
        -webkit-box-orient: vertical;
    }
    .news-list li {
        font-size: 16px;
        color:#222;
        font-weight: 500;
        padding:15px 0;
        border-bottom:1px #d9d9d9 dashed;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    
}

@media all and (max-width:480px) {
    .disaster-listarea {
        width: 100%;

    }
    .disas-list {
        display: flex;
    }
    .disas-list li {
        display: inline-block;
        padding:20px;
    }
    .disas-list li a {
        display: flex;
        justify-content: center;
        padding-right:0px;
        font-size: 14px;
        font-weight: 600;
    }
    .quick-list li {
        display: inline-block;
        font-size: 14px;
        color:#222;
        font-weight: 500;
        text-align: center;
        padding:2% 3% 2%;
        background: url('../../images/eng/main/quick-bar1.png') no-repeat 100% 50%;
    }
    .embassy-information {
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        padding:15px;
        background: #e1f1f8 url('../../images/eng/main/popzone-img.png') no-repeat 50% 100%;
        background-size:contain;

    }
    
}

@media all and (max-width:440px) {
   
}

@media all and (max-width:375px) {
    
    
}