@charset "utf-8";
.volun_title {display:flex;align-items: center;justify-content: space-between;}
.volun_title > span {width:50%;text-align: center;background-color: #ba17d024;padding: 2rem 0;border-radius: 2rem;}
.volun_title > span img {height: 250px;object-fit:contain}
.vol_sec1 {width: 45%;}
.vol_sec1 h5 {
    margin-bottom: 2rem;
    color: var(--color-main);
    font-size: 35px;
    font-family: var(--font-point);
    font-weight: 800;
}
.vol_sec1 p {
    font-size: 20px;
    word-break: keep-all;
    margin-right: 10%;
}
.vol_sec1 p span {
    color: var(--color-main);
    font-weight: 600;
}
.vol_sec2 {}
.vol_type {
    /* margin-bottom: 5%; */
}
.vol_type dl {
    border-top: 2px solid var(--color-main);
    display: flex;
    flex-wrap: wrap;
}
.vol_type dt {
    background-color: var(--color-bg-gray);
    width: 25%;
    text-align: center;
    padding: 1rem;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vol_type dd {
    width: 75%;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}
.vol_type dd p {
    margin: .5rem 0;
}
.vol_flow {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vol_flow li {
    width: 16.6%;
    text-align: center;
}
.vol_flow li > div {
    background-color: #3fb8bc;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}
.vol_flow li > div:after {
    content:"\f4b5";
    position:absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%) rotate(90deg);
    background-size: cover;
    margin-right: -24%;
    font-family: 'Material Symbols Outlined';
    color: #a8a8a8;
    font-size: 24px;
}
.vol_flow li:last-child > div:after {display:none}
.vol_flow li:nth-child(2) > div {background-color: #41aeca;}
.vol_flow li:nth-child(3) > div {background-color: #459ee5;}
.vol_flow li:nth-child(4) > div {background-color: #3d87d7;}
.vol_flow li:nth-child(5) > div {background-color: #2f6fb5;}
.vol_flow li:nth-child(6) > div {background-color: #1d528b;}
.vol_flow li > div img {}
.vol_flow p {}
.vol_note {}
.vol_note2 {
    padding-top:0;
    background-color: #4797ef29;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    gap: 8rem;
}
.vol_note2 .favor {padding: 3rem 0;}
.vol_note2 .favor li {/* color: #fff; */}
.vol_note2 .favor li::marker {color: var(--color-main2);}
.favor strong {
    display: block;
    padding-bottom: 1rem;
    font-size: var(--sub-h4-size);
    font-weight: 600;
    color: #222;
}
.vol_note2 img {object-fit: contain;}
.boxlist {display:flex; gap:2rem}
.boxlist li {width:100%; border:1px solid #ddd; padding:2rem; border-radius:2rem}
.boxlist li p {margin-top:1rem}
.boxlist li .tit {font-weight:600;font-size:20px;margin:0 0 1rem;color: var(--color-main2);}
.boxlist li a {transition: .3s}
.boxlist li a:hover {color:var(--color-main2)}
.vol_sec3 {}
.supporters {
    background-color: var(--color-bg-gray);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
}
.supporters strong {
    font-size: 30px;
    color: var(--color-main);
    width: 100%;
    padding-left: 2rem;
}
.supporters dl {
    display: flex;
    width: 62%;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem 0;
}
.supporters dt {
    width: 15%;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--color-main);
    border-radius: 2rem;
    color: var(--color-main);
    font-weight: 500;
    margin: .5rem 0;
}
.supporters dd {
    width: 80%;
    margin-left: 1rem;
}
.supporters img {position: absolute;left: 0;bottom: -10%;}

.vol_btn {display: flex;justify-content: center;margin-top: var(--sub_pd_half);}
.vol_btn dl {
    width: 48%;
    text-align: center;
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
}
.vol_btn .inquiry {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    border-radius: 1rem;
    padding: 1rem;
}
.vol_btn .inquiry dt {
    font-size: 22px;
    font-weight: 600;
    margin-right: 2rem;
}
.vol_btn .inquiry dd {
    display: flex;
    align-items: center;
}
.vol_btn .inquiry strong {
    font-size: 30px;
    color: var(--color-main);
    padding-left: .5rem;
    }

.vol_btn .apply {
    border: 2px solid var(--color-main);
    border-radius: 1rem;
    /* background-color: var(--color-bg-gray); */
    transition: all .4s;
    box-shadow: 0 5px 15px #ff910030;
}
.vol_btn .apply dt {
    width: 100%;
    height: 100%;
}
.vol_btn .apply a {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-main);
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
}
.vol_btn .apply:hover {background-color: var(--color-main);}
.vol_btn .apply:hover a {color:#fff}

/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
	.vol_bg {background-size: 70%;/* height: 270px; */overflow: hidden;background-position-x: -25%;display: flex;align-items: flex-start;}
    .vol_sec1 {width: 50%;}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
	.volun_title {flex-wrap:wrap}
    .volun_title > span {width:100%}
    .volun_bg {
    background-size: 88%;
    background-position-x: -185%;
    height: 275px;
}
    .vol_sec1 {
    width: 100%;
    word-break: keep-all;
    margin-top:2rem
}
    .vol_sec1 p {word-break: keep-all;margin-right: 0;}
    .vol_flow {flex-wrap: wrap;gap: 1rem 0;}
    .vol_flow li {width: 33%;}
    .boxlist {gap:1rem}
    .boxlist li {padding:1.5rem;border-radius: 1rem;}
    .vol_btn .inquiry {
        display: flex;
        flex-wrap: wrap;
    }
    .vol_btn .inquiry dt {margin-right:0}
    .vol_btn .inquiry strong {font-size: 3vw;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	p, li, td, th {font-size:16px}
    .vol_sec1 h5 {font-size:26px;margin-bottom: 1rem;}
    .vol_sec1 p {font-size:17px}
    .volun_bg {display: flex;background-size: 170%;background-position: 60% top;height: 350px;flex-direction: column;justify-content: flex-end;}
    .volun_title > span {width:100%; height:auto;}
    .volun_title > span img {width:90%;height: auto;}
    .vol_flow li {width: 50%;}
    .vol_flow li > div {width: 120px;height: 120px;}
    .vol_flow li > div img {width:45%}
    .boxlist {flex-wrap:wrap; }
    .vol_note2 {flex-wrap:wrap;gap: 1rem;padding: 2rem 1rem;}
    .vol_note2 img {width:50%}
    .vol_note2 .favor {padding: 0;}
    .vol_note2 .favor strong {font-size: clamp(1.5rem, 5.5vw, 1.8rem);}
    .vol_btn {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .vol_btn dl{width: 100%;padding: .5rem;}
    .vol_btn .inquiry dt{font-size:5vw}
    .vol_btn .inquiry strong {font-size: 5vw;}
    .vol_btn .apply {padding:1rem}
	.vol_btn .apply a {font-size:5vw}
}