@charset "utf-8";
#contents{
    font-size: 2.2rem;
}
#replyNotice,
#pageSatisfy{
    max-width:1440px; margin:0 auto; font-size: 1.6rem;
}
#pageSatisfy .manager dd + dt{
    margin-left:0;
}
#replyNotice{
    margin-bottom:20px;
}
#contents .content{
    padding:0 0 110px 0;
}
.h4Bl{
    font-size: 3.5rem; line-height: 1.2em; margin-bottom: 50px; font-weight:700; color:#000
}
.h4Section{
    margin:0;
}
.hBxWrap{
    display: grid; grid-template-columns: repeat(2, 1fr);
}
.hBxWrap > .hBx{
    padding:20px 0; position: relative;
}
.iconBx{
    padding-left:120px; position: relative;
}
.iconBx::after{
    display: flex; flex-direction:row; justify-content: center; align-items: center; content:''; width:75px; height:75px; background-color:#1a38a4; border-radius: 40px; position:absolute; top:50%; transform:translateY(-50%); left:0; background-size: 100%; background-position: center; background-repeat: no-repeat; color:#fff; text-align: center; font-weight: 700;
}

.badgeBx{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap:20px; 
}
.badgeBx > dt{
    color:#1a38a4; border:1px solid #1a38a4; line-height:1em; padding:15px 24px 14px; border-radius: 40px; font-weight:700;
}
.badgeBx > dd{
    padding-top:12px; flex:1 1 0;
}
.boxStyle{
    margin:0; font-size: 2.2rem;
}
.boxStyle > .smFt{
    font-size:1.8rem;
}
.btnType815{
    display:inline-block; font-size: 1.7rem; padding:10px 22px 10px 47px; line-height:1em; background-position: left 18px center; font-weight:600; background-repeat: no-repeat; background-size: auto;
}
.btnColorType21{
    background-color:#212846; color:#fff;
}
.down{
    background-image: url(/humanframe/theme/busan815/assets/img/common/iconDoc.png);
}
.txtLink{
    display: inline-block; padding-right:16px; background-image: url(/humanframe/theme/busan815/assets/img/common/btnJumpBk.png); background-position: right top 10px; background-size: auto; background-repeat: no-repeat;
}

.imgList{    
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; width: 100%;
}
.imgList > li{
    border: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
}
.imgList > li > .imgBx{
    border-bottom: 1px solid #dbdbdb;
}
.imgList > li > .infoBx{
    padding: 26px 20px 27px; text-align: center; font-size: 2rem; line-height: 1em; font-weight: 700;
}

.bxDlWrap{
    display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; width:100%; gap:30px;
}
.bxDlWrap > .bxList{
    display:flex; flex-direction: row; justify-content: flex-start; align-items:flex-start; width:100%; padding:30px 45px 31px; gap:26px; font-size: 2rem; background:#f5f5f5; border:1px solid #dbdbdb;
}
.bxDlWrap > .bxList > dt{
    font-weight: 700; color:#2440a8;
}
#pageSatisfy header{
    position: static;
}

@media screen and (max-width: 1440px) {
    #contents .content{
        padding:0 20px 110px; width:100%;
    }
    #replyNotice, #pageSatisfy{
        width:calc(100% - 40px);
    }
}
@media screen and (max-width: 1024px) {
    .h4Bl{
        font-size: 3.2rem;
    } 
}
@media screen and (max-width: 768px) {
    
    #contents{
        font-size: 2rem;
    }
    .h4Bl{
        font-size: 2.8rem; margin-bottom:24px;
    } 
    #contents .content{
        padding:0 20px 80px
    }
    .hBxWrap{
        grid-template-columns: 1fr;
    }
    .iconBx{
        padding-left:60px;
    }
    .iconBx::after{
        width:46px; height:46px;
    }
    .imgList > li > .infoBx{
        padding: 14px 16px 15px; font-size: 1.8rem;
    }
    .boxStyle{
        font-size: 2rem;
    }
    .btnType815{
        font-size: 1.5rem; padding:10px 16px 10px 35px; background-position: left 13px center; background-size: auto 15px;
    }    
    .bxDlWrap{
        grid-template-columns: 1fr; gap:20px;
    }
    .bxDlWrap > .bxList{
        padding:16px 20px 15px; gap:13px; font-size: 1.8rem;
    }
}
@media screen and (max-width: 580px) {
    .h4Bl{
        font-size: 2.4rem;
    } 
}
@media screen and (max-width: 480px) {
    .imgList{    
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 360px) {
    body{
        font-size:1.8rem;
    }
    .h4Bl{
        font-size: 2rem; margin-bottom:20px;
    } 
    .boxStyle,
    #contents{
        font-size: 1.8rem;
    }
    #contents .content{
        padding:0 20px 40px
    }
    .badgeBx{
        flex-direction: column; gap:0;
    }
    .badgeBx > dt{
        padding:10px 20px 9px;
    }
    .badgeBx > dd{
        padding-top:4px;
    }
    .imgList > li > .infoBx{
        font-size: 1.6rem;
    }
    .bxDlWrap > .bxList{
        flex-direction: column; gap:0px; font-size: 1.6rem;
    }

}