@charset "utf-8";


#volunteer {}
#volunteer .volunteer_title {
    border-radius: 30px;
    border: 5px solid rgba(123, 73, 146, 0.10);
    padding:60px;
    display:flex;
    flex-direction:column;
    gap:25px;
    background-image:url(./img/volunteer_bg.png);
    background-repeat:no-repeat;
    background-position:right center;
}
#volunteer .volunteer_title .volunteer_title_text {
    width:60%;
    display:flex;
    flex-direction:column;
    gap:10px;
}
#volunteer .volunteer_title .volunteer_title_text .title_ti {
    font-size:1.33em;
    font-weight:500;
    letter-spacing:-0.72px;
    line-height:1.4;
    color:#7B4992;
    font-family: "The Jamsil";
}
#volunteer .volunteer_title .volunteer_title_text .title_co {
    font-size:1em;
    font-weight:700;
    line-height:1.44;
    color:#444;
}
#volunteer .volunteer_title .volunteer_title_btn {
    display:block;
    width:205px;
    height:51px;
    border-radius: 30px;
    border-style: solid;
    border-width: 4px;
    border-radius:999px;
    border-image-source: linear-gradient(to top, #C95094, #7B4992);
    border-image-slice: 0;
    background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to top, #C95094, #7B4992);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
#volunteer .volunteer_title .volunteer_title_btn span {
    font-size:1em;
    font-weight:800;
    background: var(--point, linear-gradient(135deg, #C95094 16.43%, #7B4992 87.14%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}


#volunteer .cont {
    display:flex;
    flex-direction:column;
    gap:30px;
}

#volunteer .step_box {
    display:flex;
    align-items:flex-start;
    gap:26px;
}
#volunteer .step_box .step {
    flex:1;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:10px;
    position: relative;
}
#volunteer .step_box .step::after {
    content:'';
    width:6px;
    height:24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="24" viewBox="0 0 6 24" fill="none"><g clip-path="url(%23clip0_341_8458)"><path d="M1.71018 7.28982L5.71018 11.2898C5.80388 11.3828 5.87828 11.4934 5.92908 11.6152C5.97988 11.7371 6.00598 11.8678 6.00598 11.9998C6.00598 12.1318 5.97988 12.2625 5.92908 12.3844C5.87828 12.5062 5.80388 12.6168 5.71018 12.7098L1.71018 16.7098C1.61698 16.8031 1.50628 16.877 1.38448 16.9275C1.26258 16.9779 1.13208 17.0039 1.00018 17.0039C0.868324 17.0039 0.737754 16.9779 0.615934 16.9275C0.494114 16.877 0.383424 16.8031 0.290184 16.7098C0.196944 16.6166 0.122984 16.5059 0.072524 16.3841C0.022064 16.2622 -0.00390629 16.1317 -0.00390629 15.9998C-0.0039063 15.868 0.022064 15.7374 0.072524 15.6156C0.122984 15.4937 0.196944 15.3831 0.290184 15.2898L3.59018 11.9998L0.290184 8.70982C0.101884 8.52152 -0.00390663 8.26612 -0.00390664 7.99982C-0.00390666 7.73352 0.101884 7.47812 0.290184 7.28982C0.478494 7.10152 0.733884 6.99572 1.00018 6.99572C1.26648 6.99572 1.52188 7.10152 1.71018 7.28982Z" fill="%237B4992"/></g><defs><clipPath id="clip0_341_8458"><rect width="24" height="6" fill="white" transform="translate(0 24) rotate(-90)"/></clipPath></defs></svg>');
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    right:-16px;
    top:45px;
}
#volunteer .step_box .step:last-child::after {
    display:none;
}
#volunteer .step_box .step .step_num {
    width:20px;
    height:20px;
    margin:auto;
    border-radius:50%;
    background-color:#7B4992;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    letter-spacing:-0.42px;
    color:#fff;
}
#volunteer .step_box .step .step_text {
    display:flex;
    flex-direction:column;
}
#volunteer .step_box .step .step_text .step_ti {
    font-size:0.88em;
    font-weight:700;
    letter-spacing:-0.48px;
    line-height:1.37;
}
#volunteer .step_box .step .step_text .step_co {
    font-size:0.77em;
    font-weight:400;
    letter-spacing:-0.42px;
}


#volunteer .volun_kind {
    display:flex;
    flex-direction: column;
    gap:30px;
}
#volunteer .volun_kind .kind_title {
    font-size:1.22em;
    font-weight:400;
    letter-spacing:-0.66px;
    color:#7B4992;
    font-family: "The Jamsil";
    text-align:center;
}
#volunteer .volun_kind .kind_box {
    display:flex;
    flex-wrap: wrap;
    gap:20px;
}
#volunteer .volun_kind .kind_box .kind {
    border:1px solid #ddd;
    border-radius: 10px;
    width:calc(50% - 10px);
    padding:20px 30px;
    display:flex;
    align-items: flex-start;
    justify-content:space-between;
    gap:50px;
}
#volunteer .volun_kind .kind_box .kind .kind_text {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:5px;
}
#volunteer .volun_kind .kind_box .kind .kind_text .kind_ti {
    font-size:1em;
    font-weight:700;
    color:#7B4992;
}
#volunteer .volun_kind .kind_box .kind .kind_text .kind_co {
    font-size:0.88em;
    font-weight:400;
    line-height:1.50;
    letter-spacing:-0.48px;
}
#volunteer .volun_kind .kind_box .kind .kind_icon {
    align-self: flex-end;
}





#volunteer .volun_benefit {
    border:1px solid #ddd;
    background-color:#FFFCF5;
    padding:30px 80px;
    display:flex;
    flex-direction:column;
    gap:30px;
}
#volunteer .volun_benefit .benefit_title {
    display:flex;
    flex-direction: column;
    gap:10px;
}
#volunteer .volun_benefit .benefit_title .benefit_ti {
    font-size:1.22em;
    font-weight:400;
    line-height:1.25;
    color:#F39052;
    text-align:center;
    font-family: "The Jamsil";
}
#volunteer .volun_benefit .benefit_title .benefit_ti_sub {
    font-size:1em;
    font-weight:400;
    line-height:1.44;
    color:#444;
    text-align:center;
}
#volunteer .volun_benefit .benefit_wrap {
    display:flex;
    align-items: flex-end;
    gap:60px;
}
#volunteer .volun_benefit .benefit_wrap .benefit_text {
    background-color:#fff;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:21px;
    flex:1;
}
#volunteer .volun_benefit .benefit_wrap .benefit_text ul {
    display:flex;
    align-items:center;
    gap:10px;
    position: relative;
}
#volunteer .volun_benefit .benefit_wrap .benefit_text ul::before {
    content:'';
    width:100%;
    height:0;
    border-top:1px dashed #ddd;
    position:absolute;
    left:0;
    top:-10px;
}
#volunteer .volun_benefit .benefit_wrap .benefit_text ul:first-child::before {
    display:none;
}
#volunteer .volun_benefit .benefit_wrap .benefit_text .benefit_num {
    width:30px;
    height:30px;
    background-color:#F39052;
    border-radius:50%;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.88em;
    font-weight:700;
    color:#fff;
}
#volunteer .volun_benefit .benefit_wrap .benefit_text .benefit_co {
    flex:1;
    font-size:0.88em;
    font-weight:400;
    letter-spacing:-0.48px;
} 

#volunteer .inquiry {
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
    gap:10px;
    padding:15px 20px;
    width: fit-content;
    margin: auto;
    margin-right: 0;
    border-radius:999px;
    border:1px solid #ddd;
    background: rgb(201,80,148);
    background: linear-gradient(135deg, rgba(201,80,148,1) 16.43%, rgba(123,73,146,1) 87.14%);
}
#volunteer .inquiry .inquiry_title {
    display:flex;
    align-items:center;
    gap:5px;
}
#volunteer .inquiry .inquiry_title .inquiry_icon {
    height:18px;
}
#volunteer .inquiry .inquiry_title .inquiry_ti {
    font-size:0.88em;
    font-weight:700;
    color:#fff;
    line-height:normal;
}
#volunteer .inquiry .inquiry_co {
    font-size:0.88em;
    font-weight:700;
    line-height:normal;
    text-align: center;
    color:#fff;
}





/* 반응형 미디어쿼리 css */
@media (max-width:1680px) {}
@media (max-width:1440px) {
    #volunteer .volunteer_title {
        background-size:45% auto;
        padding:40px;
    }

    #volunteer .volun_kind .kind_box .kind {
        flex-direction: column-reverse;
        align-items: center;
        gap:10px;
    }
    #volunteer .volun_kind .kind_box .kind .kind_text {
        width:100%;
    }
    #volunteer .volun_kind .kind_box .kind .kind_icon {
        align-self: center;
    }

    #volunteer .volun_benefit {
        padding:30px 40px;
    }
    #volunteer .volun_benefit .benefit_wrap {
        gap:40px;
    }
    #volunteer .volun_benefit .benefit_wrap img {
        width:200px;
    }
    
}
@media (max-width:1200px) {}
@media (max-width:1024px) {}
@media (max-width:991px) {
    
    #volunteer .volunteer_title {
        background-size:auto 55%;
        background-position:right bottom;
        padding:30px;
    }
    #volunteer .volunteer_title .volunteer_title_text {
        width:100%;
    }
}
@media (max-width:768px) {
    #volunteer .volun_benefit .benefit_wrap {
        flex-direction:column;
    }
    #volunteer .volun_benefit .benefit_wrap .benefit_text {
        width:100%;
    }
    #volunteer .volun_benefit .benefit_wrap img {
        margin:auto;
    }

    #volunteer .step_box {
        flex-wrap: wrap;
        gap:10px;
    }
    #volunteer .step_box .step {
        flex:none;
        max-width:auto;
        width:calc(33.333% - 6.6666px)
    }
    #volunteer .step_box .step::after {
        display:none;
    }
}
@media (max-width:640px) {
    #volunteer .volun_kind .kind_box .kind {
        flex-direction: row;
        width:100%;
    }

  
    #volunteer .volun_benefit {
        padding:30px;
    }

    #volunteer .inquiry {
        width:100%;
        justify-content: center;
    }
}
@media (max-width:480px) {
    #volunteer .volunteer_title {
        background-image:none;
    }

    #volunteer .inquiry {
        flex-direction:column;
        align-items: center;
    }
}
@media (max-width:320px) {}