@charset "utf-8";
.container{
    max-width:1440px; margin:0 auto;
}
.mainVisual{
    background-image: url(/humanframe/theme/busan815/assets/img/main/mainSlide_pc.png); background-repeat: no-repeat; background-size: cover; background-position: top center; display: grid; place-items: center; aspect-ratio:1920 / 1080;
}
.mainVisual > .txtBx{
    margin-top: -32rem; text-align: center; color: #fff;
}
.mainVisual > .txtBx .mainTitBx{
    overflow: hidden;
}
.mainVisual > .txtBx .mainVisualTit{
    font-size: 8.5rem; font-family: 'SangSangRock'; line-height:1em; margin-bottom:3.2rem;
}
.mainVisual > .txtBx > .mainVisualSubTit{
    font-family: 'KoPubWorldBatang'; font-weight: 500; font-size: 3rem; 
}

/* SECTION01 */
.mainBrd{
    padding: 10.7rem 0 13.7rem;
}
.mainBrd .tabWrap{
    padding-top:8.4rem; position: relative; width:100%; margin:0;
}
.mainBrd .tabWrap > .tab_btn{
    position: absolute; top:0; left:0; font-size: 3.8rem; line-height:1em; font-family: 'KoPubWorldBatang'; font-weight:500; color:#333;
}
.mainBrd .tabWrap > .tab_btn:nth-child(3){
    left:18.9rem;
}
.mainBrd .tabWrap > .tab_btn:not(:last-of-type){
    padding-right:2.4rem; margin-right:2.4rem;
}
.mainBrd .tabWrap > .tab_btn:not(:last-of-type)::after{
    display:block; content:''; width:1px; height:35px; background:#dbdbdb; position: absolute; top:50%; right:0; transform: translateY(-50%);
}
.mainBrd .tabWrap > .tab_btn.active{
    font-weight:700; color:#000;
}
.mainBrd .tabWrap > .board_content{
    display: none;
}
.mainBrd .tabWrap > .board_content.active{
    display: block;
}
.board_prev{
    display: grid; grid-template-columns: repeat(4, 1fr); gap:30px; align-items: stretch;
}
.board_prev > li{
    display: block; width:100%;
}
.board_prev > li > a{
    display: block; width:100%; height: 100%; background:#f0f0f0; border:1px solid #f0f0f0; padding:4.7rem 3rem 4rem; position:relative; transition: 0.4s;
}
.board_prev > li > a > .mainBrdBadge{
    margin-bottom:2rem; color:#1a38a4; font-weight: 700; line-height: 1em; display: block;
}
.board_prev > li > a > .mainBrdTit{
    font-size: 2.4rem; line-height: 1.2em; font-weight: 700; margin-bottom:3rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.board_prev > li > a > .mainBrdCont{
    margin-bottom:5.4rem; line-height:1.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.board_prev > li > a > .date{
    color:#555;
}
.board_content .board_viewmore{
    display: block; width:35px; height: 35px; position: absolute; top:0; right:0;
}
.board_content .board_viewmore::before,
.board_content .board_viewmore::after{
    display: block; content:''; width:0.2rem; height:100%; position:absolute; background:#242521; left:50%; top:0; margin-left:-0.1rem;
}
.board_content .board_viewmore::before{
    transform: rotate(90deg); margin-top:-0.1rem;
}

.board_prev > li > a:hover{
    box-shadow: 3px 0 7px rgba(0,0,0,0.1); border:1px solid #1a38a4; background:#fff; transition: 0.4s;
}



/* SECTION02 */
.section02{
    display: flex; flex-direction: column; justify-content: center; align-items: center; padding:7rem 0 3.2rem; background-image: url(/humanframe/theme/busan815/assets/img/main/bsPeopleBg.png); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.section02 > a{
    text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
}
.section02 > a > .subBannerTit{
    font-family: 'SangSangRock'; font-size: 6.57rem; line-height:1em; padding-left: 7.6rem; background-image: url(/humanframe/theme/busan815/assets/img/main/iconBsPeople.png); background-repeat: no-repeat; background-position: left center; background-size:auto;  margin-bottom:30px;
}
.section02 > a > .viewMore{
    font-family:'KoPubWorldBatang'; font-size: 2rem; line-height:1em; padding-right:2.8rem; background-image: url(/humanframe/theme/busan815/assets/img/main/iconBsPeople2.png); background-repeat: no-repeat; background-position: right top 3px; background-size:auto;
}


/* SECTION03 */
.section03 > .container{
    padding:110px 0 130px;
}
.section03 > .container > .mainTit{
    font-family: 'KoPubWorldBatang'; font-weight: 700; font-size: 5rem; line-height: 1em; margin-bottom:8rem; display: block; text-align: center;
}
.slideWrap{
    display: block; position: relative; width:calc(100% + 180px); margin-left:-90px;
}
.collList{
    display: grid; grid-template-columns: repeat(3, 1fr); gap:3rem; width:100%; align-items: stretch; overflow: hidden; max-width:1440px; margin:0 auto;
}
.collList .swiper-slide{
    display: block; width:100%;
}
.collList .swiper-slide > a{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border:1px solid #dbdbdb; width:100%; height:100%;
}
.collList .swiper-slide > a > .imgBx{
    aspect-ratio: 457 / 300; width: 100%; overflow: hidden; display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom:1px solid #dbdbdb; background-color: #e7eaf3;
}
.collList .swiper-slide > a > .imgBx > img{
    display: block; object-fit: contain; height:100%; width:100%;
}
.collList .swiper-slide > a > .txtBx{
    padding:3rem 2rem 2.7rem; text-align: center; width:100%;
}
.collList .swiper-slide > a > .txtBx > .cate{
    color: #1a38a4; font-weight:700; line-height: 1em; margin-bottom:1.3rem;
}
.collList .swiper-slide > a > .txtBx > .tit{
    font-size: 2.4rem; font-weight: 700; line-height: 1em;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.swiper-button-prev.collList-prev,
.swiper-button-next.collList-next{
    color:inherit; background-image: url(/humanframe/theme/busan815/assets/img/common/iconCtr.png);
    text-indent: -9999px; background-size: 100% auto; width:34px; height:62px; background-repeat: no-repeat; background-position: center;
}
.swiper-button-prev.collList-prev{
    transform: rotate(180deg);
}


/* 반응형 */


@media screen and (max-width: 1620px) {
    .slideWrap{
        width:calc(100% + 90px); margin-left:-45px;
    }
}
@media screen and (max-width: 1520px) {
    .slideWrap{
        width:100%; margin-left:0; padding:0 40px;
    }
    .swiper-button-prev.collList-prev{
        left: var(--swiper-navigation-sides-offset, 0px);
        right: auto;
    }
    .swiper-button-next.collList-next{
        right: var(--swiper-navigation-sides-offset, 0px);
        left: auto;
    }
}
@media screen and (max-width: 1440px) {
    
    .container{
        padding:0 20px;
    }
    .mainVisual > .txtBx{
        margin-top: -16rem;
    }
    .section02{
        background-position: right -100px center;
    }
    .section03 > .container{
        padding:100px 20px 110px;
    }
}
@media screen and (max-width: 1280px) {
    .mainVisual > .txtBx{
        margin-top:-11rem;
    }
    .mainVisual > .txtBx .mainVisualTit{
        font-size: 6.5rem; margin-bottom:1rem;
    }
    .mainVisual > .txtBx > .mainVisualSubTit{
        font-size: 2.4rem;
    }
}
@media screen and (max-width: 1180px) {
    .mainVisual{
        min-height: 580px;
    }
    .mainVisual > .txtBx > .mainVisualSubTit{
        font-size: 2.6rem;
    }
    .board_prev{
        grid-template-columns:repeat(2, 1fr);
    }
    .board_prev > li > a{
        padding:3.7rem 2rem 3rem;
    }
    .board_prev > li > a > .mainBrdCont{
        display: none;
    }
    .mainBrd .tabWrap > .tab_btn{
        font-size: 3.2rem;
    }
    .mainBrd .tabWrap > .tab_btn:nth-child(3){
        left:16.6rem;
    }
    .board_prev > li > a > .mainBrdTit{
        height:2.2em;
    }
    .section02 > a > .subBannerTit{
        font-size: 5.57rem; background-size: auto 100%;
    }
    .section03 > .container{
        padding:90px 20px 100px;
    }
    .section03 > .container > .mainTit{
        font-size: 4.2rem; margin-bottom:6rem;
    }
    .collList .swiper-slide > a > .txtBx{
        padding:2.4rem 2rem 2.4rem;
    }
    .collList .swiper-slide > a > .txtBx > .tit{
        font-size: 2.2rem;
    }
    .collList .swiper-slide > a > .txtBx > .cate{
        margin-bottom:10px;
    }
}
@media screen and (max-width: 1024px) {
    .section02 > a > .subBannerTit{
        font-size: 4rem; padding-left:5rem;
    }
    .section03 > .container{
        padding:60px 20px 60px;
    }
    .section03 > .container > .mainTit{
        font-size: 3.2rem;
    }
    .swiper-button-prev.collList-prev,
    .swiper-button-next.collList-next{
        width:24px; height:44px;
    }
}
@media screen and (max-width: 980px) {
    .mainVisual > .txtBx .mainVisualTit{
        font-size:5.5rem;
    }
    .mainVisual > .txtBx > .mainVisualSubTit{
        font-size:2rem;
    }
}
@media screen and (max-width: 768px) {
    .mainVisual{
        height:100vh; aspect-ratio: inherit; background-position: left -110px top;
    }
    .mainVisual > .txtBx{
        text-align: left; width:100%; padding-left:30px; margin-top:-22rem;
    }
    .mainVisual > .txtBx > .mainVisualSubTit,
    .mainVisual > .txtBx .mainVisualTit{
        white-space: pre-line; 
    }
    .mainVisual > .txtBx .mainVisualTit{
        font-size: 4.5rem; margin-bottom:1.6rem;
    }
    .mainVisual > .txtBx > .mainVisualSubTit{
        font-size: 1.8rem;
    }
    .mainBrd{
        padding:6rem 0;
    }
    .mainBrd .tabWrap{
        padding-top:5.4rem;
    }
    .mainBrd .tabWrap > .tab_btn{
        font-size: 2.4rem;
    }
    .mainBrd .tabWrap > .tab_btn:not(:last-of-type)::after{
        height:28px;
    }
    .mainBrd .tabWrap > .tab_btn:not(:last-of-type){
        padding-right:1.8rem; margin-right: 1.8rem;
    }
    .mainBrd .tabWrap > .tab_btn:nth-child(3){
        left:12.6rem;
    }
    .board_prev > li > a > .mainBrdTit{
        font-size: 2rem;
    }
    .board_content .board_viewmore{
        width:23px; height:23px; top:-2px;
    }
    .board_prev{
        gap:20px;
    }
    .section02{
        padding:6rem 0 3rem;
    }
    .section03 > .container{
        padding:60px 20px;
    }
    .section03 > .container > .mainTit{
        margin-bottom:4rem;
    }
    .collList{
        gap:20px;
    }
    .collList .swiper-slide > a > .txtBx > .tit{
        font-size: 2rem;
    }
}
@media screen and (max-width: 580px) {
    .board_prev{
        grid-template-columns: 1fr; gap:10px;
    }
    .board_prev > li > a{
        padding:17px 21px;
    }
    .board_prev > li > a > .date{
        position: absolute; top:17px; right:21px;
    }
    .board_prev > li > a > .mainBrdTit{
        margin-bottom:0;
    }
    .section03 > .container > .mainTit{
        text-align: left; margin-bottom:2rem;
    }
    .slideWrap{
        padding:0;
    }
    .slideWrap > .controls_bx {
        position: absolute; top:-25px; right:0;
    }
    .collList-button{
        display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap:20px; position: relative;
    }
    .collList-button::after{
        display: block; content:''; width:1px; height:20px; background:#dbdbdb; position:absolute; top:50%; left:50%; transform:translate(-0.5px, -100%);
    }
    .swiper-button-prev.collList-prev, .swiper-button-next.collList-next{
        position: inherit; width:10px; height:20px; background-size:100% auto;
    }
}
@media screen and (max-width: 480px) {
    .collList{
        grid-template-columns: 1fr;
    }
    .section02{
        background-position: right -130px center;
    }
}
@media screen and (max-width: 360px) {
    
    .mainBrd{
        padding:3.8rem 0;
    }
    .mainBrd .tabWrap{
        padding-top:4rem;
    }
    .mainBrd .tabWrap > .tab_btn{
        font-size: 2rem;
    }
    .mainBrd .tabWrap > .tab_btn:nth-child(3) {
        left: 9.8rem;
    }
    .mainBrd .tabWrap > .tab_btn:not(:last-of-type)::after{
        height:21px;
    }
    .mainBrd .tabWrap > .tab_btn:not(:last-of-type){
        padding-right:1.2rem; margin-right: 1.2rem;
    }
    .board_prev > li > a > .mainBrdBadge{
        margin-bottom:1.3rem;
    }
    .board_prev > li > a > .mainBrdTit{
        font-size: 1.8rem; -webkit-line-clamp: 1; height:1.2em;
    }
    .section02{
        padding:2.6rem 0 2rem;
    }
    .section02 > a > .subBannerTit{
        font-size:3rem; margin-bottom:15px; padding-left:3.8rem;
    }
    .section02 > a > .viewMore{
        font-size: 1.5rem; background-size: 12px auto; padding-right: 1.4rem;
    }
    .section03 > .container{
        padding:40px 20px;
    }
    .section03 > .container > .mainTit{
        font-size: 2rem
    }
    .collList .swiper-slide > a > .txtBx{
        padding:1.9rem 2rem 1.9rem;
    }
    .collList .swiper-slide > a > .txtBx > .cate{
        padding-bottom:7px;
    }
    .collList .swiper-slide > a > .txtBx > .tit{
        font-size: 1.8rem;
    }
    .slideWrap > .controls_bx{
        top:-20px;
    }

}