@charset "utf-8";

/* 내용관리 */
.benefit{padding: 8.6rem 0;}
.bf_wrap{width: 100%; max-width: 160rem; margin: 0 auto;}
.bf_visual{height: 82.2rem; padding-left: 23rem; border-radius: 5rem; display: flex; align-items: center; justify-content: flex-start; width: 100%; background: url(/theme/template/img/sub/benefit_bg1.png) center center no-repeat; background-size: cover;}
.bf_visual .text{gap: 1rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
.bf_visual .text span{font-size: 2rem; line-height: 1.4; font-family: "SCDream5"; color: var(--white); opacity: 0.38; display: block; word-break: keep-all;}
.bf_visual .text p{font-size: 6rem; line-height: 1.167; font-family: "SCDream5"; color: var(--white); word-break: keep-all;}

.bf_inner{margin-top: 12rem; padding: 0 8rem; word-break: keep-all;}
.bf_inner > h5{margin-bottom: 12rem; font-size: 6rem; line-height: 1.167; font-family: "SCDream5"; color: var(--black); font-weight: normal; text-align: center;}
.bf_list{gap: 1.4%; display: flex; align-items: flex-start;}
.bf_items.ty1{padding: 9.6rem 0; height: 48.7rem; border-radius: 3rem 1rem 1rem 1rem; width: 43.3%; background: url(/theme/template/img/sub/benefit_bg2.png) center center no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden;}
.bf_items.ty1 p{font-size: 4rem; line-height: 1.25; font-family: "SCDream5"; border-bottom: 1px solid var(--white); color: var(--white); display: inline-flex;}
.bf_items.ty1 span{font-size: 2rem; line-height: 2.5; font-family: "SCDream5"; color: var(--white); display: block;}
.bf_items.ty2{gap: 2.2rem; width: 55.3%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
.bf_items.ty2 .bf_box{padding: 2rem 8rem; border-radius: 1rem; height: 22rem; width: 100%; background: url(/theme/template/img/sub/benefit_bg3.png) center center no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.bf_items.ty2 .bf_box.ty2{height: 27.5rem; border-radius: 1rem 1rem 3rem 1rem; background: url(/theme/template/img/sub/benefit_bg4.png) center center no-repeat; background-size: cover;}
.bf_items.ty2 .bf_box p{font-size: 4rem; line-height: 1.25; font-family: "SCDream5"; border-bottom: 1px solid var(--white); color: var(--white); display: inline-flex;}
.bf_items.ty2 .bf_box span{margin-top: 2rem; font-size: 2rem; line-height: 2.5; font-family: "SCDream5"; color: var(--white); display: block;}
.bf_btn{margin-top: 21rem; display: flex; justify-content: center;}
.bf_btn a{width: 40rem; height: 6rem; border-radius: 0.4rem; font-size: 2rem; line-height: 1.5; font-family: "SCDream5"; color: var(--white); background: var(--color-4472C4); display: flex; align-items: center; justify-content: center; text-align: center;}

@media (max-width: 1640px){
    .benefit{padding: 5.24vw 2rem;}
    .bf_wrap{max-width: 100%;}
    .bf_visual{height: 50.12vw; padding-left: 1.4vw; border-radius: 3.05vw;}
    .bf_visual .text{gap: 0.61vw;}
    .bf_visual .text span{font-size: 1.22vw;}
    .bf_visual .text p{font-size: 3.66vw;}

    .bf_inner{margin-top: 7.32vw; padding: 0 4.88vw;}
    .bf_inner > h5{margin-bottom: 7.32vw; font-size: 3.66vw;}
    .bf_items.ty1{padding: 5.85vw 0; height: 29.7vw; border-radius: 1.83vw 0.61vw 0.61vw 0.61vw;}
    .bf_items.ty1 p{font-size: 2.44vw;}
    .bf_items.ty1 span{font-size: 1.22vw;}
    .bf_items.ty2{gap: 1.34vw;}
    .bf_items.ty2 .bf_box{padding: 1.22vw 4.88vw; border-radius: 0.61vw; height: 13.41vw;}
    .bf_items.ty2 .bf_box.ty2{height: 16.77vw; border-radius: 0.61vw 0.61vw 1.83vw 0.61vw;}
    .bf_items.ty2 .bf_box p{font-size: 2.44vw;}
    .bf_items.ty2 .bf_box span{margin-top: 1.22vw; font-size: 1.22vw;}
    .bf_btn{margin-top: 12.8vw;}
    .bf_btn a{width: 24.39vw; height: 3.66vw; border-radius: 0.24vw; font-size: 1.22vw;}
}

@media (max-width: 1000px) {
    .benefit{padding: 4rem 2rem;}
    .bf_visual{height: 50vw; padding-left: 2rem; border-radius: 4rem;}
    .bf_visual .text{gap: 1rem;}
    .bf_visual .text span{font-size: 1.4rem;}
    .bf_visual .text p{font-size: 2rem;}

    .bf_inner{margin-top: 6rem; padding: 0;}
    .bf_inner > h5{margin-bottom: 6rem; font-size: 2rem;}
    .bf_list{gap: 1.4%; display: flex; align-items: flex-start;}
    .bf_items.ty1{padding: 6rem 0; height: 30rem; border-radius: 2rem 1rem 1rem 1rem;}
    .bf_items.ty1 p{font-size: 2rem;}
    .bf_items.ty1 span{font-size: 1.4rem;}
    .bf_items.ty2{gap: 1rem; width: 55.3%;}
    .bf_items.ty2 .bf_box{padding: 2rem; border-radius: 1rem; height: 15rem;}
    .bf_items.ty2 .bf_box.ty2{height: 17rem; border-radius: 1rem 1rem 2rem 1rem;}
    .bf_items.ty2 .bf_box p{font-size: 2rem;}
    .bf_items.ty2 .bf_box span{margin-top: 1rem; font-size: 1.4rem;}
    .bf_btn{margin-top: 6rem;}
    .bf_btn a{width: 20rem; height: 4rem; border-radius: 0.4rem; font-size: 1.4rem;}
}

@media (max-width: 770px) {
    .bf_visual{height: 30rem; border-radius: 2rem;}

    .bf_list{gap: 2rem; flex-direction: column; display: flex; align-items: flex-start;}
    .bf_items.ty1{width: 100%; padding: 4rem 2rem; height: auto; min-height: 20rem; border-radius: 2rem 1rem 1rem 1rem;}
    .bf_items.ty1 p{}
    .bf_items.ty1 span{line-height: 1.8; text-align: center;}
    .bf_items.ty2{gap: 2rem; width: 100%;}
    .bf_items.ty2 .bf_box{height: auto; min-height: 14rem; align-items: center;}
    .bf_items.ty2 .bf_box.ty2{height: auto; min-height: 16rem;}
    .bf_items.ty2 .bf_box p{}
    .bf_items.ty2 .bf_box span{line-height: 1.8; text-align: center;}

}