@charset "utf-8";

#ci .cont {
    display: flex;
    flex-direction:column;
    gap:50px;
}
#ci .cont .cont_title {
    color:#173C7B;
    font-family: "Gmarket Sans";
    font-weight:500;
}

#ci .ci_img {
    width:100%;
    max-width:785px;
    background-image:url(./img/ci_bg.png);
    padding:15px;
    text-align:center;
    border:1px solid #E0E0E0;
    border-radius:20px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}
#ci .ci_img img {
    width:90%;
    max-width:490px;
    margin:0 auto;
}

#ci .mean_wrap {
    display:flex;
    align-items:flex-start;
    gap:20px;
}
#ci .mean_wrap .mean_box {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    gap:20px;
    position: relative;
}
#ci .mean_wrap .mean_box .mean_round {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
#ci .mean_wrap .mean_box .mean_round .round_ti {
    width:80px;
    height:80px;
    border:2px solid #ddd;
    border-radius:999px;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:46px;
    font-weight:700;
    font-family: "Gmarket Sans";
    text-align:center;
}
#ci .mean_wrap .mean_box .mean_round .round_co {
    font-size:1.22rem;
    font-weight:700;
    line-height:120%;
    text-align:center;
} 
#ci .mean_wrap .mean_box .mean_text {
    border:1px solid #E0E0E0;
    background-color:#F8F9FA;
    border-radius:20px;
    padding:25px 15px;
}
#ci .mean_wrap .mean_box .mean_text p {
    font-size:1rem;
    font-weight:400;
    line-height:144%;
    text-align:center;
}

#ci .mean_wrap .mean01 .mean_round .round_ti {
    border-color:#EF4043;
    color:#EF4043;
}
#ci .mean_wrap .mean01 .mean_round .round_co {
    color:#B83235;
}

#ci .mean_wrap .mean02 .mean_round .round_ti {
    border-color:#FDB812;
    color:#FDB812;
}
#ci .mean_wrap .mean02 .mean_round .round_co {
    color:#FF9434;
}

#ci .mean_wrap .mean03 .mean_round .round_ti {
    border-color:#0060A9;
    color:#0060A9;
}
#ci .mean_wrap .mean03 .mean_round .round_co {
    color:#0060A9;
}

#ci .mean_wrap .mean01 .mean_round::before {
    content:'';
    width:50%;
    height:3px;
    background-color:#EF4043;
    position:absolute;
    right:0;
    top:40px;
    z-index:-1;
}
#ci .mean_wrap .mean01 .mean_round::after {
    content:'';
    width:20px;
    height:20px;
    position:absolute;
    right:-20px;
    top:32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23paint0_linear_626_293)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_626_293' x1='0' y1='10' x2='20' y2='10' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF4043'/%3E%3Cstop offset='1' stop-color='%23FDB812'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat:no-repeat;
}
#ci .mean_wrap .mean02 .mean_round::before {
    content:'';
    width:100%;
    height:3px;
    background-color:#FDB812;
    position:absolute;
    left:0;
    top:40px;
    z-index:-1;
}
#ci .mean_wrap .mean03 .mean_round::before {
    content:'';
    width:50%;
    height:3px;
    background-color:#0060A9;
    position:absolute;
    left:0;
    top:40px;
    z-index:-1
}
#ci .mean_wrap .mean03 .mean_round::after {
    content:'';
    width:20px;
    height:20px;
    position:absolute;
    left:-20px;
    top:32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23paint0_linear_626_294)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_626_294' x1='20' y1='10' x2='-8.74227e-07' y2='10' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230060A9'/%3E%3Cstop offset='1' stop-color='%23FDB812'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat:no-repeat;
}

#ci .ci_ex_wrapper {
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
}
#ci .ci_ex_wrapper img {
    width: 100%;
}
#ci .ci_ex_wrapper .ci_ex_left,
#ci .ci_ex_wrapper .ci_ex_right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#ci .ci_ex_wrapper .ci_ex_left > p,
#ci .ci_ex_wrapper .ci_ex_right > p {
    text-align: center;
    color: #222;
    font-family: "Wanted Sans";
    font-size: 1.11rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}
#ci .ci_ex_wrapper .ci_ex_left .ci_ex_left_img {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#ci .cont.color_system {
    gap: 30px;
}
#ci .cont.color_system .cont_title + p {
    text-align: center;
    color: #222;
    font-family: "Wanted Sans";
    font-size: 1.11rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
    letter-spacing: -0.6px;
}
#ci .cont.color_system .color_system_par_wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
}
#ci .cont.color_system .color_system_par_wrapper .color_system_chi {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#ci .color_system_chi.chi_left { gap: 50px; }
#ci .color_system_chi.chi_left p { text-align: center; }
#ci .color_system_chi.chi_left > p,
#ci .color_system_chi.chi_left > div {
    width: 100%;
}
#ci .color_system_chi.chi_right { gap: 30px; justify-content: center; }
#ci .cont.color_system .chi_left .color_box_wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}
#ci .cont.color_system .chi_left .color_box_wrapper > div {
    flex: 1;
}
#ci .cont.color_system .chi_left p img {
    width: 100%;
    max-width: 400px;
}
#ci .cont.color_system .chi_right .chi_right_child {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}
#ci .cont.color_system .chi_right .chi_right_child > div {
    flex: 1;
}
#ci .cont.color_system .chi_right .chi_right_child > p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    flex: 1;
    max-width: 430px;
    padding: 0 50px;
}
#ci .cont.color_system .chi_right .chi_right_child > p img {
    width: 100%;
    max-width: 289px;
}
#ci .cont.color_system .color_box {
    height: 104px;
    border-radius: 20px;
}
#ci .cont.color_system .color_text {
    text-align: center;
    padding: 25px 15px;
    border-radius: 20px;
    border: 1px solid #E0E0E0;
    color: #333;
    font-family: "Wanted Sans";
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 144.444%;
}
#ci .cont.color_system .color_text span {
    font-weight: 700;
}
#ci .color_system .color_red { background: #EE3D43; }
#ci .color_system .color_yel { background: #FCB814; }
#ci .color_system .color_blu { background: #0161AA; }
#ci .color_system .color_gol { background: #BE9443; }
#ci .color_system .color_sil { background: #A3AFB2; }

#ci .emblem_wrapper {
    display: flex;
    justify-content: center;
    gap: 100px;
}
#ci .emblem_wrapper img {
    width: 100%;
}
.cont + .cont {
    margin-top: 80px;
}

/****************************************/
/* 반응형 미디어 쿼리 css                 */
/***************************************/
@media (max-width:1680px) {}
@media (max-width:1440px) {}
@media (max-width:1200px) {
    #ci .cont.color_system .chi_right .chi_right_child > p {
        padding: 0;
    }
}
@media (max-width:1024px) {}
@media (max-width:991px) {
    #ci .ci_ex_wrapper {
        gap: 30px;
    }
    #ci .cont.color_system .color_system_par_wrapper {
        flex-direction: column;
    }
    #ci .emblem_wrapper {
        gap: 50px;
    }
    #ci .cont.color_system .color_text {
        padding: 20px 10px;
    }
    #ci .cont.color_system .color_box {
        height: 100px;
    }
    #ci .cont {
        gap: 30px;
    }
    #ci .color_system_chi.chi_left {
        gap: 30px;
    }
    #ci .cont.color_system .color_system_par_wrapper {
        gap: 35px;
    }
    #ci .color_system_chi.chi_right {
        gap: 20px;
    }
    .cont + .cont {
        margin-top: 45px;
    }
    #ci .cont.color_system{
        gap: 25px;
    }
}
@media (max-width:768px) {
    #ci .ci_ex_wrapper {
        flex-direction: column;
    }
    #ci .mean_wrap {
        flex-direction:column;
    }
    #ci .mean_wrap .mean_box {
        width:100%;
    }
    #ci .mean_wrap .mean01 .mean_round::before ,
    #ci .mean_wrap .mean01 .mean_round::after,
    #ci .mean_wrap .mean02 .mean_round::before,
    #ci .mean_wrap .mean03 .mean_round::before,
    #ci .mean_wrap .mean03 .mean_round::after {
        display:none;
    }
    #ci .ci_ex_wrapper {
        gap: 20px;
    }
    #ci .emblem_wrapper {
        gap: 30px;
    }
    #ci .cont.color_system .color_system_par_wrapper {
        gap: 20px;
    }
    #ci .color_system_chi.chi_right {
        gap: 15px;
    }
    .cont + .cont {
        margin-top: 30px;
    }
    #ci .cont {
        gap: 20px;
    }
    #ci .cont.color_system {
        gap: 20px;
    }
}
@media (max-width:640px) {
    #ci .cont.color_system .chi_right .chi_right_child > p {
        padding-right: 0;
    }
    #ci .ci_ex_wrapper {
        gap: 15px;
    }
    #ci .emblem_wrapper {
        gap: 20px;
    }
    #ci .mean_wrap .mean_box .mean_text {
        padding: 20px 15px;
    }
    #ci .cont.color_system .color_box {
        height: 85px;
    }
    #ci .cont.color_system .color_text {
        padding: 15px 10px;
    }
    #ci .cont.color_system .color_system_par_wrapper {
        gap: 10px;
    }
    #ci .cont.color_system .chi_right .chi_right_child > p img {
        padding: 15px;
    }
    #ci .color_system_chi.chi_right {
        gap: 0;
    }
    #ci .cont {
        gap: 15px;
    }
    #ci .cont.color_system {
        gap: 15px;
    }
}
@media (max-width:540px) {
    #ci .cont.color_system .color_box {
        height: 80px;
    }
    #ci .cont.color_system .color_text {
        padding: 10px;
    }
}
@media (max-width:480px) {
    #ci .mean_wrap .mean_box .mean_text {
        padding: 15px;
    }
    #ci .cont.color_system .chi_right .chi_right_child > p img {
        padding: 0;
    }
    #ci .color_system_chi.chi_right {
        gap: 10px;
    }
    #ci .cont.color_system .color_system_par_wrapper {
        gap: 15px;
    }
    #ci .cont.color_system .color_box {
        height: 75px;
    }
}