@charset "utf-8";
.deco-tit {display: flex; align-items: center; gap: 10px;}
.deco-tit:before {content: ''; display: block; width: clamp(18px, calc(24 / var(--inner) * 100vw), 24px); height: clamp(12px, calc(16 / var(--inner) * 100vw), 16px); background: url('/images/sub/deco-tit.png') no-repeat center center / contain;}

.page-greeting {gap: 25px 35px;}
.greeting-img {width: 41.5%; max-width: 580px;}
.vision-banner {padding: var(--space-80) var(--space-30); background: url('/images/sub/vision-banner.jpg') no-repeat center center / cover; border-radius: var(--radius-20);}
.sec-value {padding:var(--space-100) 0; background: #FAFAFA;}
.value-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40) var(--space-25);}
.value-item {display: flex; gap: var(--space-20); padding: 20px; background: #fff; border-radius: var(--radius-20);}
.value-item .icon {width: fit-content; padding: var(--space-20); background: rgba(0, 54, 104, .1); border-radius: 100%; height: fit-content;}
.check-box {padding: var(--space-40); border-radius: var(--radius-20); background: #fff; border: 1px solid #ddd;}
.check-box:not(:last-child) {margin-bottom: var(--space-20);}
.check-box h4 {position: relative; padding-left: calc(10px + clamp(24px, calc(40 / var(--inner) * 100vw), 40px));}
.check-box h4:before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: clamp(24px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(24px, calc(40 / var(--inner) * 100vw), 40px); background: url('/images/sub/check-box.png') no-repeat center center / contain;}
.type2 .check-box {position: relative; margin-bottom: calc(20px + clamp(16px, calc(24 / var(--inner) * 100vw), 24px)); background: rgba(0, 54, 104, 0.10);}
.type2 .check-box:not(:last-child):after {content: ''; position: absolute; left: 0; top:calc(100% + 10px);width: 100%; height: clamp(16px, calc(24 / var(--inner) * 100vw), 24px); background: url('/images/sub/arrow-down.svg') no-repeat center center / contain; }

.history-head h3 span {margin-right: var(--space-20);}

.history { display: flex; flex-direction: column; gap: var(--space-100); }
.history .decade { display: flex;}
.history .year {flex-shrink: 0; width: 12.86%; max-width: 180px; padding-right: clamp(20px, calc(30 / var(--inner) * 100vw), 30px); margin-right: clamp(20px, calc(80 / var(--inner) * 100vw), 80px); border-right: 1px solid #ddd; font-size: var(--font-size-32); font-weight: 700; color: var(--dark-color); position: relative; }
.history .list { flex: 1; display: flex; flex-direction: column; gap: var(--space-60); }
.history .item { padding-bottom: var(--space-40); border-bottom: 1px solid #ddd; }
.history .item:last-child { padding-bottom: 0; border-bottom: none; }
.history .item .tit { font-size: var(--font-size-24); font-weight: 600; color: var(--dark-color); margin-bottom: var(--space-15); }
.history .item ul { padding-left: 24px; line-height: 2; }
.history .item li { list-style: disc; }

.competition-choice-boxes {max-width: 840px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40);}
.competition-choice-box {position: relative; padding: clamp(30px, calc(90 / var(--inner) * 100vw), 90px) var(--space-30) clamp(20px, calc(60 / var(--inner) * 100vw), 60px); border-radius: var(--radius-20); background: #FFF;box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.16);}
.competition-choice-box:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; border-radius: var(--radius-20); border: 1px solid var(--secondary-color); opacity: 0; transition: .2s;}
.competition-choice-box:hover:after {opacity: 1;}
.competition-choice-box .icon {width: fit-content; margin-left: auto; margin-right: auto; padding: clamp(20px, calc(56 / var(--inner) * 100vw), 56px); background: rgba(1, 128, 223, .1); border-radius: 100%;}
.competition-choice-box .btn-arrow {margin: var(--space-15) auto 0;}
.competition-choice-box:hover .btn-arrow {color: var(--secondary-color);}

.apply-form { display: flex; flex-direction: column; gap: var(--space-20); }
.apply-form .form-box { padding: var(--space-40); margin-bottom: var(--space-20); background: #fff; border: 1px solid #ddd; border-radius: var(--radius-20); }
.apply-form .form-tit { font-size: var(--font-size-22); font-weight: 600; color: var(--dark-color); margin-bottom: var(--space-20); }
.apply-form .form-tit span { font-weight: 400; }
.apply-form .form-tit em { color: #c30a0a; font-style: normal; }
.apply-form .form-cont .desc { margin-bottom: var(--space-15); }
.apply-form .form-notice { font-size: var(--font-size-22); margin-bottom: var(--space-20); }
.apply-form .check-list { display: flex; flex-direction: column; gap: var(--space-20); }
.apply-form .input { width: 100%; max-width: 400px; height: 50px; padding: 13px 16px; background: #f8f8f8; border: 1px solid #ddd; border-radius: var(--radius-12); }
.apply-form .input::placeholder { color: #8f8f8f; }
.apply-form .form-submit { text-align: center; margin-top: var(--space-40); }
.apply-form .btn-submit { width: 200px; height: 64px; background: var(--primary-color); color: #fff; font-size: var(--font-size-18); font-weight: 600; border: none; border-radius: 64px; cursor: pointer; transition: .2s; }
.apply-form .btn-submit:hover { background: var(--secondary-color); }

.winner-list { width: 100%; }
.winner-head { display: flex; align-items: center; padding-right: calc(24px + var(--space-30)); background: #e6ebf0; font-size: var(--font-size-18); font-weight: 600; color: var(--dark-color); text-align: center; }
.winner-head span, .winner-row span {display: block; flex: 1; padding: clamp(8px, calc(13 / var(--inner) * 100vw), 13px) var(--space-15); }
.winner-item { border-bottom: 1px solid #ddd; }
.winner-row { display: flex; align-items: center; font-size: var(--font-size-16); font-weight: 500; color: #454545; text-align: center; cursor: pointer; }
.winner-row .btn-toggle { width: 24px; height: 24px; margin-left: auto; margin-right: var(--space-30); background: none; border: none; cursor: pointer; transition: .2s; }
.winner-item.active .btn-toggle { transform: rotate(180deg); }
.winner-cont { display: none; flex-wrap: wrap; padding: var(--space-20) var(--space-40); justify-content: center; gap: var(--space-60); border-top: 1px solid #ddd; }
.winner-item.active .winner-cont { display: flex; }
.winner-medal { display: flex; align-items: center; gap: var(--space-20); }
.winner-medal .team { font-size: var(--font-size-18); font-weight: 500; color: var(--dark-color); }
.winner-medal .name { font-size: var(--font-size-18); font-weight: 500; color: var(--dark-color); }

.donate-banner { position: relative; padding: var(--space-80) var(--space-30); background: url('/images/sub/donate-banner.jpg') no-repeat center center / cover; border-radius: var(--radius-20); text-align: center; color: #fff; line-height: 1.5; }
.page-donate .donate-banner {background: url('/images/sub/donate-banner2.jpg') no-repeat center center / cover;}
.donate-banner p { position: relative; z-index: 1; }
.donate-cards { display: flex; gap: var(--space-40); }
.donate-card {flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-40); background: #fff; border: 1px solid #ddd; border-radius: var(--radius-20); text-align: center; line-height: 1.4; }
.donate-card .icon {width: fit-content; margin-left: auto; margin-right: auto; padding: var(--space-20); background: rgba(1, 128, 223, .1); border-radius: 100%; }
.donate-steps { display: flex; align-items: center; justify-content: center; gap: var(--space-45); }
.donate-steps .step {flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 100%; text-align: center; }
.donate-steps .step:before {content:''; display: block; width: 100%; padding-bottom: 100%; border: 1px solid var(--primary-color); border-radius:100%;}
.donate-steps .step .wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.donate-steps .num { display: inline-block; padding: 0 10px; background: var(--primary-color); border-radius: 30px; color: #fff; line-height: 1.3125em; font-weight: 600; }
.donate-steps .arrow { width: clamp(16px, calc(32 / var(--inner) * 100vw), 32px); height: clamp(16px, calc(32 / var(--inner) * 100vw), 32px); background: url('/images/sub/arrow-right.svg') no-repeat center center / contain; }
.donate-list { display: flex; flex-direction: column; gap: var(--space-20); }
.donate-list li { display: flex; align-items: center; gap: 10px; padding: var(--space-20); background: rgba(0, 54, 104, .1); border-radius: var(--radius-12); font-size: var(--font-size-16); font-weight: 500; }
.donate-list li:before { content: ''; display: block; width: clamp(20px, calc(24 / var(--inner) * 100vw), 24px); min-width: clamp(20px, calc(24 / var(--inner) * 100vw), 24px); height: clamp(20px, calc(24 / var(--inner) * 100vw), 24px); background: url('/images/sub/check-circle.svg') no-repeat center center / contain; }

.donate-type { display: flex; align-items: center; gap: var(--space-25); }
.donate-type .radiobox { margin-top: 11px; }
.donate-type .food-date { display: flex; align-items: center; gap: 12px; }
.donate-type .food-date .label { padding: 0 10px; height: 44px; line-height: 44px; background: #f5f5f5; font-size: var(--font-size-16); font-weight: 700; color: #777; text-align: center; }
.donate-type .food-date .input { width: 123px; height: 44px; padding: 12px; }
.donate-type .food-date.disabled { opacity: .5; pointer-events: none; }

.page-donate .sec {margin-top: var(--space-100);}
.flex-txt {gap: var(--space-40);}
.donation-img {width: 50%;}
.example-box {padding: var(--space-40); border-radius: 10px; border: 1px solid #ddd;}
.tag-title {margin-left: auto; margin-right: auto; width: fit-content; line-height: 1.1875em; padding: 5px 10px; background: var(--primary-color); border-radius: 100px; font-size: var(--font-size-16); font-weight: 500; color: #fff; text-align: center;}
.example-category {gap: 30px 20px;}
.example-category .icon {width: fit-content; margin-left: auto; margin-right: auto; padding: clamp(15px, calc(28 / var(--inner) * 100vw), 28px); background: rgba(0, 54, 104, .1); border-radius: 100%;}
.example-txt {background: rgba(0, 54, 104, .1); border-radius: 10px; padding: var(--space-30);}

.page-regular .intro { line-height: 1.5; color: #454545; }
.mission-list { display: flex; flex-direction: column; gap: var(--space-40); }
.mission-item .head { display: flex; align-items: center; gap: 10px; padding: var(--space-20); background: rgba(0, 54, 104, .1); border-radius: var(--radius-12); }
.mission-item .num { display: inline-block; padding: 5px 10px; background: var(--primary-color); border-radius: 30px; color: #fff; font-size: var(--font-size-16); font-weight: 500; line-height: 1; }
.mission-item .tit { font-size: var(--font-size-16); font-weight: 500; color: var(--dark-color); }
.mission-item .desc { padding-top: var(--space-20); font-size: var(--font-size-16); color: var(--dark-color); line-height: 2; text-indent: -1em; padding-left: 1em;}
.support-cards { display: flex; gap: var(--space-40); }
.support-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-70) var(--space-20); background: #fff; border: 1px solid var(--primary-color); border-radius: var(--radius-20); text-align: center; }
.support-card .tag.support-card .tag { display: inline-block; padding: 5px 10px; background: var(--primary-color); border-radius: 30px; color: #fff; font-size: var(--font-size-18); font-weight: 600; }
.support-card .info { line-height: 1.5; }
.support-card .info .main { display: block; font-size: var(--font-size-16); font-weight: 600; color: var(--dark-color); }
.support-card .info .main em { font-style: normal; color: #8f8f8f; }
.support-card .info .sub { display: block; font-size: var(--font-size-16); font-weight: 500; color: #8f8f8f; }
.closing-banner { position: relative; padding: var(--space-80) var(--space-30); background: url('/images/sub/closing-banner.jpg') no-repeat center center / cover; border-radius: var(--radius-20); text-align: center; color: #fff; line-height: 1.5; }
.closing-banner p { position: relative; z-index: 1; }

.apply-form-wrap { display: flex; flex-direction: column; gap: var(--space-60); }
.apply-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--dark-color); border-bottom: 1px solid #ddd; }
.apply-table tbody th {padding: 8px var(--space-20); background: rgba(0, 54, 104, .1); font-size: var(--font-size-18); color: var(--dark-color); font-weight: 400; text-align: center; border: 1px solid #ddd; border-left: none; }
.apply-table tbody td { padding: 8px var(--space-20); border: 1px solid #ddd; border-right: none; }
.apply-table.type2 tbody td {text-align: left;}
.apply-table tbody td .input { max-width: 240px; height: 34px; padding: 8px 12px; border: 1px solid #ddd; }
.apply-table .radio-group {padding: var(--space-20) 0;; display: flex; flex-wrap: wrap; gap: var(--space-40); }
.apply-table .address-group { display: flex; align-items: center; gap: 8px; }
.apply-table .address-group .zip-wrap { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-18); color: #454545; }
.apply-table .address-group .input.zip { width: 100px; }
.apply-table .address-group .input.addr { width: 160px; }
.apply-table .btn-search { width: 100px; height: 34px; background: var(--primary-color); color: #fff; font-size: 15px; border: none; cursor: pointer; }
.apply-table thead th { height: 50px; background: #e6ebf0; font-size: var(--font-size-18); font-weight: 400; color: var(--dark-color); text-align: center; border: 1px solid #ddd; }
.apply-table thead th:first-child { border-left: none; }
.apply-table thead th:last-child { border-right: none; }
.apply-table tbody tr:last-child th, .apply-table tbody tr:last-child td { border-bottom: none; }
.apply-table thead + tbody td { padding: 8px; }
.apply-table thead + tbody td .input { width: 100%; max-width: 240px; }
.apply-section { text-align: center; }
.apply-section .sec-tit { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-20); }
.apply-section.agree { max-width: 800px; margin: 0 auto; }
.apply-section.agree .sec-tit { text-align: center; margin-bottom: var(--space-40); }
.apply-section.agree .check-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.file-upload { display: flex; align-items: center; gap: var(--space-20); padding: 8px var(--space-20); border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.file-upload .icon-upload { width: 24px; height: 24px; background: url('/images/sub/icon-upload.svg') no-repeat center center / contain; }
.file-upload .btn-file { display: inline-block; width: 100px; height: 34px; line-height: 34px; background: var(--primary-color); color: #fff; font-size: var(--font-size-18); text-align: center; cursor: pointer; }
.file-upload .file-name { font-size: var(--font-size-16); color: #454545; }