@charset "utf-8";
.vol_bg {background-image:url(/img/page/volunteer/vol.png);width: 100%;height: 380px;background-repeat: no-repeat;display: flex;align-items: center;position: relative;justify-content: flex-end;}
.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 {
    padding: 5% 0;
}
.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: #9DCB67;
    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:"";
    position:absolute;
    background-image:url(/img/common/next.png);
    width: 13px;
    height: 13px;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    background-size: cover;
    margin-right: -24%;
}
.vol_flow li:last-child > div:after {display:none}
.vol_flow li:nth-child(2) > div {background-color: #83BF67;}
.vol_flow li:nth-child(3) > div {background-color: #6DB467;}
.vol_flow li:nth-child(4) > div {background-color: #59AA67;}
.vol_flow li:nth-child(5) > div {background-color: #43A066;}
.vol_flow li:nth-child(6) > div {background-color: #2A9466;}
.vol_flow li > div img {
}
.vol_flow p {}
.vol_note {
    padding: 5% 0 0;
}
.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: space-between;margin-bottom: 10%;}
.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 #64b25940;
}
.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) {
	.vol_bg {
    background-size: 88%;
    background-position-x: -185%;
    height: 282px;
    display: flex;
    align-items: flex-start;
 }
    .vol_sec1 {
    width: 53%;
    word-break: keep-all;
    padding-top: 1rem;
 }
	.vol_sec1 h5 {font-size: 4vw;}
	.vol_sec1 p {word-break: keep-all;font-size: 1rem;}
    .vol_type {margin-bottom:5rem}
    .vol_flow li {
    width: 33%;
    margin: 1rem 0;
}
    .supporters strong {padding-left:0;text-align: center;}
    .supporters dl {width:100%;display: flex;align-items: flex-start;}
    
    .supporters dd {margin:.5rem 1rem;word-break: keep-all;}
    .supporters img {position:relative;margin: 0 auto;}
	.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, dd, dt {font-size:4.5vw}
    .vol_bg {display: flex;background-size: 150%;background-position: 70% top;height: 400px;flex-direction: column;justify-content: flex-end;}
    .vol_sec1 {width: 90%;text-align: center;margin: 0 auto;}
    .vol_sec1 h5 {font-size: 7vw;margin-bottom: 1rem;}
    .vol_sec1 p {font-size:4.5vw;margin-right: 0;}
    .vol_sec2 {padding: 3rem 0;}
    .vol_type dl {border:1px solid #ddd;border-top: 2px solid var(--color-main);}
    .vol_type dt {width: 100%;border-bottom: unset;border-top: 1px solid #ddd;}
    .vol_type dd {width: 100%;border-bottom: unset;}
    .vol_flow li {
    margin: 0 0 1rem;
}
    .vol_flow li > div {width: 85px;height: 85px;margin-bottom: .5rem;}
    .vol_flow li > div img {width:60%}
    .vol_flow li > div:after {width:10px; height:10px}
    .vol_note {padding-top:3rem}
    .supporters {padding:2rem 1rem}
    .supporters strong {font-size:6vw}
    .supporters img {width:100%}
    .supporters dt {width: 38%;margin: 0;}
    .supporters dd {width:100%;margin: .5rem 0 1.5rem;}
    .vol_btn {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4rem;
	}
    .vol_btn dl{width: 100%;padding: .5rem;}
    .vol_btn .inquiry {margin-bottom:1rem;padding: .5rem;}
    .vol_btn .inquiry strong {font-size: 5vw;}
    .vol_btn .apply a {font-size:5vw}
}