@charset "utf-8";

:root {
    --hero-bg-pc: url(/pages/hospital/images/sub_visual_pc.png);
    --hero-bg-mo: url(/pages/hospital/images/sub_visual_mo.png);

    --h-sub-font-siz3: 2.8rem;

    --section-padding-block: 8.8em;
}
.hero .text_box{transform: translateY(-3em);}

.tab{max-width: var(--layout-max-width);width: var(--layout-width); position: absolute;  top:0; left: 50%; transform: translate(-50%, -98%);}
.tab .tab_list{display: grid; grid-template-columns: repeat(3, 1fr); gap:2rem; justify-content: center; align-items: center;}
.tab .tab_item{display:  flex;justify-content: center;align-items: center;border-radius: 2rem 2rem 0 0;background: #fff;opacity: .5;transition: .2s ease;}
.tab .tab_item.active{opacity:1;}
.tab .tab_btn{font-size: 4rem;font-weight: 800;letter-spacing: -0.04em;padding: .28em;display: block;width: 100%;height:  100%;}

.hospital .hospital_list{display: grid; grid-template-columns: repeat(3, 1fr);gap: 4rem;}
.hospital .hospital_item{ background-color: #F5F5F5; border-radius: 2rem; width: 100%; }
.hospital .hospital_card{display: flex; flex-direction: column; justify-content: center; align-items: center;gap: 1rem;padding-block: 5.8rem;position: relative;letter-spacing: -0.04em;font-size: clamp(22px, 3vw, 3rem); }
.hospital .hospital_card::after{content:'';display: block; --size: 13rem; width: var(--size);height: var(--size);background: url(../images/symbol_plan.svg) no-repeat center / contain; position: absolute; bottom: 7%; right: 5%;}
.hospital .hospital_name{font-size: 1.5em; font-weight: 800;}

.hospital .hospital_list.filtered .hospital_item { display: none; }
.hospital .hospital_list.filtered .hospital_item.active { display: block; }



/* 태블릿 (768px ~ 1024px) */
@media screen and (max-width: 1024px) {
     /* ~9px */

    .tab .tab_btn{font-size: 2.8rem;}
    
    .hospital .hospital_list{grid-template-columns: repeat(2, 1fr);gap: 30px; }
    
}
/* 모바일 (767px 이하) */
@media screen and (max-width: 767px) {
    /* 8px */
    
    .tab{position: relative;  top:0; left: 0; transform: translate(0, 0);margin: 6.2rem auto 0;}
    .tab .tab_list{ grid-template-columns: repeat(2, 1fr); gap:2.6rem;} 
    .tab .tab_item{border-radius: 100px; border: .1rem solid #165AED; opacity: 1;}
    .tab .tab_item.active{background-image: var(--gradient-03);}
    .tab .tab_item.active .tab_btn{color: #fff;}

    .hospital .hospital_list{grid-template-columns: 1fr;}
}