@charset "UTF-8";
[class^="imgTxt_st"].bgNo > ul > li > .imgWr { background-color: #fff;}

/* 소개 */ 
.greet_box .top { display: flex; justify-content: space-between; position: relative;}
.greet_box .top::before { content: ''; display: block; width: 23rem; height: 22.5rem; background: url(/images/web/seoulreferEng/sub/greet_ico02.png) no-repeat center / contain; position: absolute; left: 0; top: 0;}
.greet_box .top .txt {font-size: 1.8rem; color: #000; z-index: 1; margin-top: 2.7rem;}
.greet_box .top .txt strong {font-weight: 800; display: block;}
.greet_box .top .img {width: 34.85rem; height: 23.3rem; position: relative;}
.greet_box .top .img p { border-radius: 1rem; overflow: hidden; height: 100%; font-size: 0;}
.greet_box .top .img img {width: 100%; height: 100%; object-fit: cover;}
.greet_box .top .img::after { content: ''; display: block; width: 11.25rem; height: 14.45rem; background: url(/images/web/seoulreferEng/sub/greet_ico01.png) no-repeat center / contain; position: absolute; left:-9.2rem; bottom: 0; z-index: 5;}
.greet_box .bottom { margin-top: 1.7rem;}
.greet_box .bottom h5 { font-size: 1.2rem; font-weight: 700; color: #000; margin-bottom: 1rem;}
.greet_box .bottom p { font-size: 0.9rem; line-height: 1.4rem; color: #444;}
.greet_box .bottom p strong { font-weight: 600; color: #000;}
.greet_box.ver2 .top::before { display: none;}
.greet_box.ver2 .top .img { width: 100%; height: 20rem; border-radius: 1rem; overflow: hidden; font-size: 0;}
.greet_box.ver2 .top .img::after { display: none;}
.greet_box .call { border-top: 2px dotted #e0e0e0; padding-top: 0.5rem; margin-top: 1.5rem;}

/* 전원절차 */
.process_box > ul { display: flex; row-gap: 2rem; flex-wrap: wrap; margin-top: 1.3rem;}
.process_box > ul > li { width: 100%; position: relative; display: flex;gap: 2.5rem; align-items: center; border: 1px solid #e0e0e0; border-radius: 1rem; padding: 1.2rem 1rem 1.2rem 2rem;}
.process_box > ul > li + li::before { content: "\f2e1";display: flex; justify-content: center; align-items: center; font-family: 'remixicon'; font-size: 1.2rem; color: #000; position: absolute; bottom: 100%; left: 3.5rem; height: 2rem;}
.process_box > ul > li:first-child + li::before { display: none;}
.process_box > ul > li > span { color: #215c00; font-weight: 600; font-size: 1rem; white-space: nowrap;}
.process_box > ul > li .txt { color: #000; font-size: 0.9rem; line-height: 1.5rem;}
.process_box > ul > li .first_arrow { position: absolute; top: 100%; height: 2rem; font-size: 0.8rem; color: #000; left: 0.1rem; }
.process_box > ul > li .first_arrow i { font-size: 1.2rem;}

/* 보훈병원안내 */
.hosInfo { display: flex; justify-content: space-between;}
.hosInfo .left { width: 14.25rem;}
.hosInfo .left .img { border-radius: 0.5rem; overflow: hidden; font-size: 0;}
.hosInfo .left > a { display: flex; justify-content: space-between; line-height: 2.5rem; font-size: 0.9rem; font-weight: 600; color: #000; border-radius: 0.5rem; border: 1px solid #e0e0e0; padding: 0 0.8rem 0 1rem; margin-top: 0.5rem; }
.hosInfo .left > a i { font-size: 1rem;}
.hosInfo .cont { width: calc(100% - 16.25rem);}
.hosInfo .cont > p { font-size: 0.9rem; line-height: 1.4rem; color: #444;}
.hosInfo .cont > ul { background: #f4f4f4; border-radius: 0.5rem; padding: 0.7rem 1.2rem; display: flex; margin-top: 0.8rem;}
.hosInfo .cont > ul li { flex: 1; font-size: 0.9rem; color: #444;} 
.hosInfo .cont > ul li span { color: #000; font-weight: 600;}
.hosInfo .cont > ul li span i { font-size: 1.1rem; }

@media screen and (max-width:1640px) {
    /* 소개 */ 
    .greet_box .top::before { width: 17rem; height: 16.5rem; }
    .greet_box .top .img {width: 27rem; height: 23.3rem; position: relative;}

}

@media screen and (max-width:1280px) {  
    /* 소개 */ 
    .greet_box .top .txt {font-size: 1.5rem; margin-top: 1.5rem;}
    .greet_box .top .img { height: 18rem; position: relative;}
    .greet_box .top .img::after { width: 9.25rem; height: 10.45rem; left: -7.2rem; }
    .greet_box.ver2 .top .img {height: auto;}
    
    

}

@media screen and (max-width:1024px) {  
    .hosInfo .cont > ul { flex-wrap: wrap;}
    .hosInfo .cont > ul li { flex:auto; width: 100%;}
}
@media screen and (max-width:860px) { 
    /* 소개 */ 
    .greet_box .top { flex-direction: column; align-items: center;} 
    .greet_box .top::before { left: auto; right: 0;}
    .greet_box .top .txt { margin-top:0; text-align: center; margin-bottom: 0.7rem;}
    .greet_box .top .txt strong { display: inline-block;}
    
}

@media screen and (max-width:768px) { 
    /* 소개 */ 
    .greet_box .top { flex-direction: column; align-items: center;} 
    .greet_box .top::before { left: auto; right: 0; top: -1rem;}
    .greet_box .top .txt { margin-top:0; text-align: center; margin-bottom: 0.7rem;}
    .greet_box .top .txt strong { display: inline-block;}
    .greet_box .top .img::after { display: none;}
    .greet_box .bottom { margin-top: 1rem;}
    .greet_box .bottom h5 { font-size: 1rem; margin-bottom: 0.6rem;}
    .greet_box .bottom p { font-size: 0.8rem; line-height: 1.5;} 

    /* 전원절차 */
    .process_box > ul { margin-top: 1.3rem;}
    .process_box > ul > li { gap: 1.5rem; padding: 0.5rem 1rem;} 
    .process_box > ul > li > img { width: 4rem;}
    .process_box > ul > li span { font-size: 0.9rem;}
    .process_box > ul > li .txt { font-size: 0.8rem; line-height: 1.1rem;} 

    /* 보훈병원안내 */
    .hosInfo { flex-direction: column;align-items: center}
    .hosInfo .cont { width: 100%; margin-top: 1rem;}
}
@media screen and (max-width:540px) { 
    /* 소개 */  
    .greet_box .top { flex-direction: column; align-items: center;} 
    .greet_box .top::before { left: auto; right: 0; width: 14rem; height: 13.5rem; }
    .greet_box .top .txt { margin-top:0; text-align: center; margin-bottom: 0.7rem; font-size: 1.2rem; padding: 0 1rem;}
    .greet_box .top .txt strong { display: inline-block;}
    .greet_box .top .img {width: 100%; height: auto; }
    .greet_box .top .img::after { display: none;} 
    .greet_box .call .li_w30 > li {width: 100%;}

    /* 전원절차 */ 
    .process_box > ul > li > img { display: none;}

    
}
@media screen and (max-width:420px) { 
    .process_box > ul > li{ margin-bottom: 4rem;}
    .process_box > ul > li .first_arrow{ height: 6rem; display: flex; flex-direction: column; justify-content: center;}

    
}