.s2{padding:170px 0 60px;}

.ci_bi_cont .contents{margin-bottom:75px; display:flex;}
.ci_bi_cont .contents .title{width:51.56%;}
.ci_bi_cont .contents .title h2{font-size:42px; font-weight:700; letter-spacing:-0.04em; line-height:1;}
.ci_bi_cont .contents .txt_area{width:48.44%;}
.ci_bi_cont .contents .txt_area p{margin-bottom:40px; font-size:18px; line-height:1.76; }
.ci_bi_cont .contents .txt_area .btn_area ul{display:flex; gap:20px;}
.ci_bi_cont .contents .txt_area .btn_area ul li a{
    display:flex; align-items:center; justify-content:center;
    border-radius: 7px; font-size:17px; font-weight:500; line-height:1;
    color:#321ea0; background: #3B0694;
    background: linear-gradient(-90deg, rgba(59, 6, 148, 1) 0%, rgba(0, 159, 227, 1) 100%);
    color:#fff; gap: calc(11/17*1em); box-sizing:border-box;
    width: calc(145/17*1em); height:calc(50/17*1em); padding:0 calc(20/17*1em);
}
.ci_bi_cont .contents .txt_area .btn_area ul li a:before{width:calc(16/17*1em); aspect-ratio: 16/17; content:''; display:block; background:url(/asset/img/sub/about/icon_download.png) no-repeat center center; }
.ci_bi_cont .contents .txt_area .btn_area ul li a.btn_border{background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, rgba(59, 6, 148, 1) 0%, rgba(0, 159, 227, 1) 100%) border-box; border:1px solid transparent; color:#321ea0; }
.ci_bi_cont .contents .txt_area .btn_area ul li a.btn_border:before{background:url(/asset/img/sub/about/icon_download_on.png) no-repeat center center; }

.ci_bi_cont .logo_area{padding:20px; height:358px; background-color:#F6F6F6; border-radius:15px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}

.s3{padding:60px 0 0;}
.s3 h2{padding:0 0 20px 20px; font-size:20px; font-weight:700; }
.s3 .color_box{padding:45px; height:276px; border-radius:15px; box-sizing:border-box;}
.s3 .color_box h3{margin-bottom:50px; font-size:26px; font-weight:700; letter-spacing:-0.04em; color:#fff;}
.s3 .color_box ul li{display:flex; line-height:2;}
.s3 .color_box ul li strong{min-width:75px; font-size:15px; color:#fff;}
.s3 .color_box ul li span{font-size:15px; color:#AF99D4;}
.s3 .color_box.purple{background-color:#3A0693;}
.s3 .color_box.black{background-color:#24232C;}
.s3 .color_box.gray{background-color:#5B6770;}
.s3 .color_box.sky{background-color:#009FE2;}
.s3 .color_list{margin-top:48px;}
.s3 .color_list>ul{display:flex; gap:22px;}
.s3 .color_list>ul>li{width:calc((100% - 44px)/3);}
.s3 .color_box.black ul li span{color:#c2c2c2;}
.s3 .color_box.gray ul li span{color:#c2c2c2;}
.s3 .color_box.sky ul li span{color:#c0d9e3;}


@media screen and (max-width:1200px) {
    .ci_bi_cont .contents{flex-direction: column;}
    .ci_bi_cont .contents .title h2{}
    .ci_bi_cont .contents .title{width:100%;}
    .ci_bi_cont .contents .txt_area{width:100%;}
}

@media screen and (max-width:960px) {
    .s3 .color_list>ul{flex-direction: column; gap:20px;}
    .s3 .color_list>ul>li{width:100%;}
}

@media screen and (max-width:768px) {
    .s2{padding:80px 0 40px;}
    .ci_bi_cont .contents .title h2{font-size:23px;}
    .ci_bi_cont .contents .txt_area p{font-size:14px; line-height: 1.42;}
    .ci_bi_cont .contents .txt_area p br{display:none;}
    .ci_bi_cont .logo_area{height:200px;}
    .ci_bi_cont .logo_area img{max-width:80%; margin:0 auto;}
    .s3 h2{padding:0 0 15px 10px; font-size:15px; }
    .s3 .color_box{padding:40px 50px; height:auto; }
    .s3 .color_box h3{font-size:17px;}
    .s3 .color_box ul li strong{font-size:12px;}
    .s3 .color_box ul li{line-height:1.66;}
    .s3 .color_list{}
}


@media screen and (max-width:500px) {
    .ci_bi_cont .contents .txt_area .btn_area ul{gap: 8px;}
    .ci_bi_cont .contents .txt_area .btn_area ul li a{font-size: 14px; border-radius: 4px;}
    .ci_bi_cont .logo_area{border-radius: 6px;}
    .s3 .color_box{border-radius: 10px; padding: 40px 30px;}
}



/* 간격 */
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1200px) {
    .s2{padding-top: 120px; padding-bottom: 0; margin-bottom: 120px;}
    .s3{padding: 0;}
    ._contents{padding-bottom: 120px;}
    .ci_bi_cont .contents{gap: 40px; margin-bottom: 60px;}
    .ci_bi_cont .s3 .contents .txt_area p{margin-bottom: 0;}
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
    .s2{padding-top: 80px; margin-bottom: 100px;}
    ._contents{padding-bottom: 80px;}
    .ci_bi_cont .contents{gap: 20px; margin-bottom: 20px;}
    .ci_bi_cont .s3 .contents{margin-bottom: 40px;}
    .s3 h2{padding-bottom: 10px; padding-left: 4px;}
    .s3 .color_list{margin-top: 40px;}
    .s3 .color_list>ul{gap: 10px;}
}
@media screen and (max-width:320px) {}