@charset "utf-8";
#container.container-bf-none:before{
    display: none;
}

.cbcc-wrap{
    font-family: 'Pretendard';
    letter-spacing: -0.04em;
    background: url(../images/contents/cbcc_bg.png) center -100px;
    height: 2750px;
}

.cbcc-contbox{
    width: 1220px;
    padding-top: 80px;
    margin: 0 auto;
}

.cbcc-title-wrap{
    text-align: center;
}

.cbcc-title-wrap h2{
    font-family: 'Jalnan';
    line-height: 1.2em;
    font-size: 60px;
    color: #de584d;
}

.cbcc-title-wrap h2 span{
    color: #5d6dbe;
}

.cbcc-title-wrap p{
    font-size: 22px;
    line-height: 36px;
    letter-spacing: -0.04em;
}

.cbss-cont-wrap .cbss-cont{
    display: flex;
    justify-content: space-between;
    padding-top: 160px;
    padding-bottom: 30px;
}

.cbss-cont-wrap .cbss-cont.cbss-cont02{
    padding-top: 124px;
}

.cbss-cont-wrap .cbss-cont.cbss-cont03{
    padding-top: 134px;
}

.cbss-cont-wrap .cbss-cont>li{
    width: calc((100% - 80px) / 3);
}

.cbss-cont-wrap .cbss-cont .cont-tit{
    font-family: 'Jalnan';
    color: #fff;
    padding: 15px;
    border-radius: 25px;
    font-size: 24px;
    background-color: #de584d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.cbss-cont-wrap .cbss-cont .cbss-con2 .cont-tit, .cbss-cont-wrap .cbss-cont .cbss-con4 .cont-tit, .cbss-cont-wrap .cbss-cont .cbss-con8 .cont-tit{
    background-color: #5d6dbe;
}

.cbss-cont-wrap .cbss-cont .cbss-con3 .cont-tit, .cbss-cont-wrap .cbss-cont .cbss-con6 .cont-tit, .cbss-cont-wrap .cbss-cont .cbss-con9 .cont-tit{
    background-color: #6ba063;
}

.cbss-cont-wrap .cbss-cont .cont-tit span::after{
    content: "";
    display: inline-block;
    width: 1px;
    height: 17px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 10px;
}

.cbss-cont-wrap .cbss-cont > li{
    position: relative;
    z-index: 2;
}

.cbss-cont-wrap .cbss-cont > li::before{
    content: "";
    display: block;
    width: 207px;
    height: 190px;
    background: url(../images/contents/person_ic_01.png) center no-repeat;
    position: absolute;
    left: 50%;
    top: -120px;
    transform: translateX(-50%);
    z-index: -1;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con2::before{
    background-image: url(../images/contents/person_ic_02.png);
    top: -132px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con3::before{
    background-image: url(../images/contents/person_ic_03.png);
    top: -136px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con4::before{
    background-image: url(../images/contents/person_ic_04.png);
    top: -132px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con5::before{
    background-image: url(../images/contents/person_ic_05.png);
    top: -130px;
    width: 232px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con6::before{
    background-image: url(../images/contents/person_ic_06.png);
    top: -162px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con7::before{
    background-image: url(../images/contents/person_ic_07.png);
    top: -148px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con8::before{
    background-image: url(../images/contents/person_ic_08.png);
    top: -132px;
}

.cbss-cont-wrap .cbss-cont > li.cbss-con9::before{
    background-image: url(../images/contents/person_ic_09.png);
    top: -150px;
    height: 235px;
}

.cbss-cont-wrap .cbss-cont .cont-box{
    box-sizing: border-box;
    height: 490px;
    border-radius: 20px;
    padding: 30px 20px 40px 30px;
    background-color: #fff;
    position: relative;
    margin-bottom: 100px;
}
.cbss-cont-wrap .cbss-cont > li .cont-box::before{
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 49px;
    background: url(../images/contents/cont_line01.png) center no-repeat;
    bottom: -49px;
    left: 50%;
    transform: translateX(-50%);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con2 .cont-box::before,
.cbss-cont-wrap .cbss-cont > li.cbss-con4 .cont-box::before,
.cbss-cont-wrap .cbss-cont > li.cbss-con8 .cont-box::before{
    background-image: url(../images/contents/cont_line02.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con3 .cont-box::before,
.cbss-cont-wrap .cbss-cont > li.cbss-con6 .cont-box::before,
.cbss-cont-wrap .cbss-cont > li.cbss-con9 .cont-box::before{
    background-image: url(../images/contents/cont_line03.png);
}

.cbss-cont-wrap .cbss-cont > li .cont-box::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: "01";
    width: 78px;
    height: 78px;
    box-sizing: border-box;
    border-radius: 50%;
    text-align: center;
    background: url(../images/contents/cont_ring01.png);
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    position: relative;
    bottom: -68px;
    left: calc(50% - 5px);
    transform: translateX(-50%);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con2 .cont-box::after{
    content: "02";
    background: url(../images/contents/cont_ring02.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con3 .cont-box::after{
    content: "03";
    background: url(../images/contents/cont_ring03.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con4 .cont-box::after{
    content: "04";
    background: url(../images/contents/cont_ring02.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con5 .cont-box::after{
    content: "05";
    background: url(../images/contents/cont_ring01.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con6 .cont-box::after{
    content: "06";
    background: url(../images/contents/cont_ring03.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con7 .cont-box::after{
    content: "07";
    background: url(../images/contents/cont_ring01.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con8 .cont-box::after{
    content: "08";
    background: url(../images/contents/cont_ring02.png);
}

.cbss-cont-wrap .cbss-cont > li.cbss-con9 .cont-box::after{
    content: "09";
    background: url(../images/contents/cont_ring03.png);
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list{
    height: 100%;
    padding: 0 20px 0 0;
    overflow-y: auto;
}


.cbss-cont-wrap .cbss-cont .cont-box .cont-list::-webkit-scrollbar{
    background-color: #ddd;
    width: 8px;
    border-radius: 4px;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list::-webkit-scrollbar-thumb{
    width: 8px;
    border-radius: 4px;
    background-color: #444;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit{
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: url(../images/contents/cbcc_mtit_deco.png);
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit span{
    font-size: 20px;
    color: #fff;
    padding: 10px;
    border-radius: 14px 14px 4px 14px;
    text-align: center;
    margin-right: 10px;
    background-color: #de584d;
}

.cbss-cont-wrap .cbss-cont .cbss-con2 .cont-box .cont-list .cont-mtit span,
.cbss-cont-wrap .cbss-cont .cbss-con4 .cont-box .cont-list .cont-mtit span,
.cbss-cont-wrap .cbss-cont .cbss-con8 .cont-box .cont-list .cont-mtit span{
    background-color: #5d6dbe;
}

.cbss-cont-wrap .cbss-cont .cbss-con3 .cont-box .cont-list .cont-mtit span,
.cbss-cont-wrap .cbss-cont .cbss-con6 .cont-box .cont-list .cont-mtit span,
.cbss-cont-wrap .cbss-cont .cbss-con9 .cont-box .cont-list .cont-mtit span{
    background-color: #6ba063;
}


.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list{
    padding: 15px 0 30px 0;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link{
    padding-left: 15px;
    position: relative;
    padding-bottom: 8px;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link:last-child{
    padding-bottom: 0;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dddddd;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a{
    font-size: 18px;
    font-weight: 500;
    color: #222;
    line-height: 1.5em;
    letter-spacing: -0.04em;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a:hover{
    color: #de584d;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a:hover::after{
    content: "";
    display: inline-block;
    width: 19px;
    height: 18px;
    background: url(../images/contents/link_arrow.png) center no-repeat;
    margin-left: 3px;
    position: relative;
    top: 3px;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a.link-on:hover::after{
    display: none;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a.color{
    color: #de584d;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box{
    width: 100%;   
    box-sizing: border-box;
    padding: 10px 15px;
    z-index: 10;
    border-top: 1px solid #f8f5f1;
    border-bottom: 1px solid #f8f5f1;
    background-color: #f8f5f17a;
    position: relative;
    left: -10px;
    margin-top: 6px;
    display: none;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box > ul > li{
    font-size: 15px;
    line-height: 1.3em;
    padding-left: 10px;
    position: relative;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box > ul > li::before{
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #777;
    position: absolute;
    left: 0;
    top: 8px;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box > ul > li span{
    font-weight: 700;
    padding-bottom: 5px;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box > ul > li li{
    position: relative;
}

.cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box > ul > li li::before{
    content: "";
    display: block;
    width: 4px;
    height: 1px;
    border-radius: 50%;
    background-color: #777;
    position: absolute;
    left: -10px;
    top: 10px;
}


@media all and (max-width: 1260px){
    .cbcc-wrap{
        /* background-image: none; */
        background-color: #f8f5f1;
    }
    
    .cbcc-contbox{
        width: calc(100% - 80px);
    }
}

@media all and (max-width: 1200px){
    .cbss-cont-wrap .cbss-cont>li{
        width: calc((100% - 40px) / 3);
    }

    .cbss-cont-wrap .cbss-cont .cont-box{
        padding: 25px 20px 35px 25px 
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit {
        font-size: 20px;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit span{
        font-size: 18px;
        padding: 8px 10px;
        border-radius: 12px 12px 4px 12px;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list{
        padding: 12px 0 20px 0;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link{
        padding-left: 12px;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link::before{
        top: 10px;
        width: 5px;
        height: 5px;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a{
        font-size: 16px;
        line-height: 1.5em;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a:hover::after{
        width: 17px;
        height: 17px;
        background-size: 15px;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link .link-box > ul > li{
        font-size: 14px;
    }
}

@media all and (max-width: 1000px){
    .cbcc-wrap{
        background-position-y: -146px;
    }

    .cbcc-title-wrap p img{
        width: 40%;
        min-width: 260px;
    }

    .cbcc-title-wrap h2{
        font-size: 54px;
    }

    .cbcc-title-wrap p{
        font-size: 18px;
    }    

    .cbcc-contbox{
        width: calc(100% - 50px);
        padding-top: 60px;
    }

    .cbss-cont-wrap .cbss-cont .cont-tit{
        font-size: 20px;
        padding: 10px;
    }

    .cbss-cont-wrap .cbss-cont{
        padding-top: 150px;
    }

    .cbss-cont-wrap .cbss-cont.cbss-cont02{
        padding-top: 130px;
    }

    .cbss-cont-wrap .cbss-cont.cbss-cont03{
        padding-top: 145px;
    }

    .cbss-cont-wrap .cbss-cont > li::before{
        width: 165px;
        height: 151px;
        background-size: contain;
        top: -100px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con2::before{
        width: 133px;
        height: 137px;
        top: -98px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con3::before{
        width: 112px;
        height: 104px;
        top: -84px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con4::before{
        width: 183px;
        height: 138px;
        top: -102px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con5::before{
        width: 202px;
        height: 93px;
        top: -77px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con6::before{
        width: 173px;
        top: -132px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con7::before{
        width: 170px;
        height: 117px;
        top: -102px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con8::before{
        width: 93px;;
        top: -102px;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con9::before{
        width: 212px;
        top: -146px;
    }

    .cbss-cont-wrap .cbss-cont > li .cont-box::after{
        font-size: 20px;
        width: 65px;
        height: 65px;
        background-size: contain;
    }

    .cbss-cont-wrap .cbss-cont > li.cbss-con2 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con3 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con4 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con5 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con6 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con7 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con8 .cont-box::after,
    .cbss-cont-wrap .cbss-cont > li.cbss-con9 .cont-box::after{
        background-size: contain;
    }

    .cbss-cont-wrap .cbss-cont .cont-box{
        padding: 20px 15px 25px 20px;
    }

    .cbss-cont-wrap .cbss-cont .cont-box .cont-list{
        padding-right: 15px;
    }
}

    @media all and (max-width: 860px){
        .cbcc-wrap{
            background-image: none;
            height: auto;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .cbcc-contbox{
            padding: 0;
        }

        .cbss-cont-wrap .cbss-cont{
            padding-top: 140px;
        }

        .cbss-cont-wrap .cbss-cont.cbss-cont02{
            padding-top: 40px;
        }
        .cbss-cont-wrap .cbss-cont.cbss-cont03{
            padding-top: 50px;
        }

        .cbss-cont-wrap .cbss-cont > li .cont-box::before,
        .cbss-cont-wrap .cbss-cont > li .cont-box::after{
            display: none;
        }

        .cbss-cont-wrap .cbss-cont.cbss-cont03{
            padding-bottom: 0;
        }

        .cbss-cont.cbss-cont02 .cbss-con4 { order: 1; }
        .cbss-cont.cbss-cont02 .cbss-con5 { order: 2; }
        .cbss-cont.cbss-cont02 .cbss-con6 { order: 3; }

        .cbss-cont-wrap .cbss-cont .cont-tit{
            font-size: 18px;
            padding: 8px;
        }

        .cbss-cont-wrap .cbss-cont .cont-box{
            height: 340px;
        }

        .cbss-cont-wrap .cbss-cont.cbss-cont03 .cont-box{
            margin-bottom: 0;
        }

        .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit{
            font-size: 18px;
        }

        .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-mtit span{
            font-size: 16px;
            padding: 4px 8px;
            border-radius: 10px 10px 3px 10px;
        }

        .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a{
            font-size: 15px;
        }

        .cbss-cont-wrap .cbss-cont .cont-box .cont-list .cont-link-list .cont-link a:hover::after{
            background-size: 14px;
            top: 4px;
        }
    }

     @media all and (max-width: 768px){
        .cbcc-contbox{
            width: calc(100% - 40px);
        }

        .cbcc-title-wrap h2{
            font-size: 46px;
        }

        .cbcc-title-wrap p{
            font-size: 16px;
        }

        .cbss-cont-wrap .cbss-cont{
            flex-wrap: wrap;
        }
        
        .cbss-cont-wrap .cbss-cont>li{
            width: 100%;
        }

        .cbss-cont-wrap .cbss-cont > li::before{
            display: none;
        }

        .cbss-cont-wrap .cbss-cont{
            padding-top: 50px;
            padding-bottom: 0;
        }

        .cbss-cont-wrap .cbss-cont .cont-box,
        .cbss-cont-wrap .cbss-cont.cbss-cont03 .cont-box{
            height: auto;
            max-height: 340px;
            margin-bottom: 30px;
            padding: 30px 20px 40px 30px;
        }

        .cbss-cont-wrap .cbss-cont .cont-box .cont-list{
            padding-right: 20px;
            max-height: 260px;
        }

        .cbss-cont-wrap .cbss-cont.cbss-cont02,
        .cbss-cont-wrap .cbss-cont.cbss-cont03{
            padding-top: 0px;
        }

        .cbss-cont-wrap .cbss-cont.cbss-cont03 .cbss-con9 .cont-box{
            margin-bottom: 0;
        }
    }

    @media all and (max-width: 520px){
        .cbcc-wrap{
            padding: 40px 0;
        }

        .cbcc-title-wrap h2{
            font-size: 38px;
            padding-top: 10px;
        }

        .cbcc-title-wrap p{
            font-size: 15px;
            line-height: 1.2em;
            padding-top: 10px;
        }

        .cbss-cont-wrap .cbss-cont{
            padding-top: 30px;
        }

        .cbss-cont-wrap .cbss-cont .cont-box, 
        .cbss-cont-wrap .cbss-cont.cbss-cont03 .cont-box{
            padding: 20px 15px 25px 20px;
        }
    }

    @media all and (max-width: 420px){
        .cbcc-title-wrap h2{
            font-size: 32px;
        }

        .cbcc-title-wrap p img{
            min-width: 240px;
        }
    }

    @media all and (max-width: 320px){
        .cbcc-title-wrap h2{
            font-size: 30px;
        }
    }