@import url('sub.css'); 
/* 기부안내 */
.donation_page .tit_area {margin-bottom: 30px;}
.donation_page .tit_area p {margin-top: 15px;}

.icon_box {padding: 25px 0; display: flex; justify-content: center; align-items: center;}
.donation_icon_list li:nth-child(1) .icon_box {background:var(--sub3);}
.donation_icon_list li:nth-child(2) .icon_box {background:var(--sub);}
.donation_icon_list li:nth-child(3) .icon_box {background:#104AB4;}
.donation_icon_list li:nth-child(4) .icon_box {background:var(--main);}


.donation_section + .donation_section {margin-top: 90px;}

.donation_page .donation_purpose_top {background:url('/donation/img/donation_purpose_top.jpg') center / cover no-repeat; padding: 140px 90px; margin-bottom: 30px;}
.donation_page .donation_purpose_top p.fs50 {margin-top: 10px;}
.donation_page .donation_purpose_top p:first-of-type {font-size: 1.556rem; line-height: 135.714%; letter-spacing: -0.04em; font-weight: 300;}

.donation_page .donation_info .donation_info_graphic {display: flex;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item {padding: 35px 40px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item h5 {margin-bottom: 12px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item .donation_info_icon {display: flex; margin-top: 15px; justify-content: flex-end;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item p.wh6 {color: rgba(255, 255, 255, 0.6);}

.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) {width: 50%; flex-shrink: 0; background:var(--grayBg);}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(2), 
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(3) {width: 25%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(2) {background:var(--sub);}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(3) {background:var(--main);}

.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) p.fsE36 {margin-bottom: 12px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) dl {display: flex; gap: 5px 8px; flex-wrap: wrap; align-items: center;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) dl dt {width: 121px; flex-shrink: 0; display: flex;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) dl dt img {width: 100%; height: auto;}

.donation_page .donation_benefits_list li {display: flex;}
.donation_page .donation_benefits_list li + li {margin-top: 5px;}
.donation_page .donation_benefits_list li .icon_box {width: 115px; flex-shrink: 0; border: 1px solid var(--border); border-right: 0; min-height: 115px; padding: 0;}
.donation_page .donation_benefits_list li .txtbox {display: flex; padding: 0 40px; align-items: center; border: 1px solid var(--border); flex: 1; border-left: 0;}
.donation_page .donation_benefits_list li .txtbox h5 {width: 190px; flex-shrink: 0;}
.donation_page .donation_benefits_list li .txtbox p {padding-top: 2px;}

.donation_page .donation_procedure_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;}
.donation_page .donation_procedure_list li {position: relative; display: flex; flex-direction: column;}
.donation_page .donation_procedure_list li::after {content:""; width: 24px; aspect-ratio: 24/15; background:url('/donation/img/donation_arrow.svg') no-repeat center/contain; position: absolute; right: -27px; top: 50%; transform: translateY(-50%);}
.donation_page .donation_procedure_list li:last-child::after {display: none;}
.donation_page .donation_procedure_list li .txtbox {padding: 25px 40px 30px; flex: 1;}
.donation_page .donation_procedure_list li .txtbox h5 {margin-bottom: 5px;}

.donation_page .donation_contact .dl_style span.ls0 {vertical-align: middle;}

.donation_page .donation_last .fs28 {font-weight: 800; margin-bottom: 10px; text-wrap: balance;}
.donation_page .donation_last .fs18 {text-decoration: underline; text-wrap: balance;}

/* 기부내역 */
.donation_details_top {margin-bottom: 50px;}
.donation_details_top > * {text-wrap: balance;}
.donation_details_top h4 {margin-bottom: 20px;}
.donation_details_top h4 span {line-height: inherit;}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* 기부안내 */    
.donation_page .donation_purpose_top p.fs50 br {display: none;}
.donation_page .donation_purpose_top p.fs50 {text-wrap: balance;}

/* 기부내역 */
.donation_details_top br {display: none;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item br {display: none;}
.donation_page .donation_procedure_list li .txtbox br {display: none;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 기부안내 */
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item {padding: 25px 30px;}

.donation_page .donation_procedure_list li .txtbox {padding: 20px 30px 25px;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 기부안내 */
.icon_box {padding: 15px 0;}

.donation_page .tit_area {margin-bottom: 20px;}
.donation_page .tit_area p {margin-top: 5px;}

.donation_section + .donation_section {margin-top: 60px;}

.donation_page .donation_purpose_top {padding: 100px 50px; margin-bottom: 15px;}
.donation_page .donation_purpose_top p.fs50 {margin-top: 5px;}

.donation_page .donation_info .donation_info_graphic {flex-wrap: wrap;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item {padding: 15px 20px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item h5 {margin-bottom: 8px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item .donation_info_icon img {width: 50px;}


.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) {width: 100%; padding: 20px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) p.fsE36 {margin-bottom: 8px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) dl dt {width: 100px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(2),
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(3) {width: 50%;}

.donation_page .donation_benefits_list li .icon_box {width: 90px; min-height: 90px;}
.donation_page .donation_benefits_list li .icon_box img {height: 50px; width: auto;}
.donation_page .donation_benefits_list li .txtbox {padding: 0 20px;}
.donation_page .donation_benefits_list li .txtbox h5 {width: 150px;}

.donation_page .donation_procedure_list {gap: 20px;}
.donation_page .donation_procedure_list li::after {width: 16px; right: -18px;}
.donation_page .donation_procedure_list li .icon_box img {height: 60px; width: auto;}
.donation_page .donation_procedure_list li .txtbox {padding: 15px 20px 20px;}


/* 기부내역 */
.donation_details_top {margin-bottom: 30px;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 기부안내 */
.icon_box {padding: 10px 0;}

.donation_section + .donation_section {margin-top: 40px;} 

.donation_page .donation_purpose_top {padding: 70px 30px;}

.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item h5 {margin-bottom: 5px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item .donation_info_icon {margin-top: 8px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item .donation_info_icon img {width: 40px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) dl dt {width: 80px;}
.donation_page .donation_info .donation_info_graphic .donation_info_graphic_item:nth-child(1) p.fsE36 {margin-bottom: 5px; font-size: 1.6rem;}

.donation_page .donation_benefits_list li .icon_box {width: 80px; min-height: 80px;}
.donation_page .donation_benefits_list li .icon_box img {height: 40px;}
.donation_page .donation_benefits_list li .txtbox {flex-direction: column; justify-content: center; padding: 10px 15px;}
.donation_page .donation_benefits_list li .txtbox h5 {width: 100%;}
.donation_page .donation_benefits_list li .txtbox p.fs18 {width: 100%; padding-top: 0;}

.donation_page .donation_procedure_list {grid-template-columns: 1fr; gap: 30px;}
.donation_page .donation_procedure_list li::after {right: 50%; transform: translateX(50%) rotate(90deg); top: auto; bottom: -21px;}
.donation_page .donation_procedure_list li .icon_box img {height: 50px;}
.donation_page .donation_procedure_list li .txtbox {padding: 10px 15px;}
.donation_page .donation_procedure_list li .txtbox h5 {margin-bottom: 0;}

    
/* 기부내역 */
.donation_details_top h4 {margin-bottom: 10px;}
}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){

}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){
}