@charset "utf-8";

/* 활동내역 - list */
.section-activity .section-label {font-size: 14px; font-weight: 600; margin-bottom: 16px;}
.section-activity .section-label span {width: 28px;}
.section-activity .activity-tit {margin-bottom: 20px; padding-bottom: 50px; border-bottom: 1px solid var(--color-border);}
.section-activity .activity-tit h2 {font-size: 72px; font-weight: 700;}
.section-activity .activity-filter {display:flex; align-items:center; gap:10px; margin-bottom: 80px; flex-wrap: wrap;}
.section-activity .activity-filter .filter {color: var(--color-text-gray); font-size: 11px; font-weight: 600; text-transform: uppercase;}
.section-activity .activity-filter button {padding: 8px 18px; border:1px solid var(--color-border); border-radius:999px; background:#fff; font-size:15px; font-weight:500; color:var(--color-text-gray); transition:all .2s ease;}
.section-activity .activity-filter button.active,
.section-activity .activity-filter button:hover {background: var(--color-secondary); border-color: var(--color-secondary); color:#fff;}

/* 활동내역 - view */
.section-activity-view .sub-breadcrumb {display: flex; align-items: center; column-gap: 10px; padding: 30px 0;}
.section-activity-view .sub-breadcrumb a {display: flex;}
.section-activity-view .sub-breadcrumb span {color: var(--color-text-gray); font-weight: 500; font-size: 14px; text-transform: uppercase;}
.section-activity-view .sub-breadcrumb .divider {font-size: 11px;}
.section-activity-view .sub-breadcrumb .activity-name {color: var(--color-secondary);}
.activity-view-visual {position:relative; display: flex; align-items: center; height:450px; overflow:hidden;}
.activity-view-visual .activity-view-bg {position:absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0;}
.activity-view-visual::before {position:absolute; width: 100%; height: 100%; left: 0; top: 0; background:rgba(0,0,0,0.5); z-index: 1;  content:""; }
.activity-view-visual .inner {position:relative; z-index:2; display:flex; flex-direction:column; row-gap: 16px;}
.activity-view-visual .activity-view-title .activity-category {width: fit-content; padding:8px 18px; border-radius:999px; border: 1px solid #fff; color:#fff; font-size:15px; font-weight:500;}
.activity-view-visual .activity-view-title .activity-date {color: #fff; font-weight: 500; font-size:14px;}
.activity-view-visual .activity-view-title h2 {font-size:56px; line-height:1.1; color:#fff; font-weight:700;}
.activity-view {padding:120px 0;}
.view-section + .view-section {margin-top:120px;}
.section-top {display:flex; align-items:center; justify-content:space-between; margin-bottom:32px;}
.section-label {display:block; margin-bottom:32px; font-size:12px; font-weight:700; color:#94A3B8; letter-spacing:.12em;}
.photo-navigation {display:flex; gap:10px;}
.photo-navigation button {width:44px; height:44px; border:1px solid #E2E8F0; border-radius:50%; background:#fff; transition:all .2s ease;}
.activity-photo-swiper {overflow:visible;}
.activity-photo-item {display:block; width:100%; border-radius:24px; overflow:hidden;}
.activity-photo-item img {width:100%; height:320px; object-fit:cover;}
.activity-video-box {border-radius:32px; overflow:hidden; background:#111827;}
.activity-video-player {display:flex; align-items:center; justify-content:center; height:720px; color:#fff; font-size:24px;}
.activity-editor-content p {font-size:17px; line-height:1.9; color:#475569;}
.activity-editor-content p + p {margin-top:24px;}
.activity-info-table {border-top:1px solid #E2E8F0;}
.info-row {display:grid; grid-template-columns:220px 1fr; gap:40px; padding:32px 0; border-bottom:1px solid #E2E8F0;}
.info-title {font-size:13px; font-weight:700; color:#94A3B8;}
.info-row p {font-size:16px; line-height:1.8; color:#334155;}
.photo-modal {position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.92); z-index:999999999;}
.photo-modal.active {display:flex;}
.modal-image img {max-width:80vw; max-height:80vh; border-radius:24px;}
.modal-close {position:absolute; top:40px; right:40px; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.1); backdrop-filter:blur(10px);}
.modal-close span {position:relative; display:block; width:100%; height:100%;}
.modal-close span::before {content:""; position:absolute; top:50%; left:50%; width:24px; height:2px; background:#fff; transform:translate(-50%,-50%) rotate(45deg);}
.modal-close span::after {content:""; position:absolute; top:50%; left:50%; width:24px; height:2px; background:#fff; transform:translate(-50%,-50%) rotate(-45deg);}
.modal-arrow {position:absolute; top:50%; transform:translateY(-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:24px; backdrop-filter:blur(10px);}
.modal-prev {left:40px;}
.modal-next {right:40px;}

/* contact */
.section-contact {margin: 80px 0; padding: 140px 0; background-color: var(--color-secondary);}
.section-contact .inner {max-width: 1160px; display: flex; column-gap: 80px;}
.section-contact .contact-l {width: 100%; max-width: 500px; display: flex; flex-direction: column; row-gap: 24px;}
.section-contact .contact-l h2 {color: #fff; font-weight: 700; font-size: 80px;}
.section-contact .contact-l h2 .primary {font-weight: 700;}
.section-contact .contact-l p {color: #D7D7D7; font-size: 15px;}
.section-contact .line {display: block; width: 1px; height: stretch; background: linear-gradient(90deg, rgba(191,211,234,0) 0%, rgba(191,211,234,.14) 20%, rgba(191,211,234,.14) 80%, rgba(191,211,234,0) 100%);}
.section-contact .contact-r {width: 100%; max-width: 500px;}
.section-contact .contact-r .circle-bullet {display: flex; align-items: center; column-gap: 8px; font-size: 15px; font-weight: 500; color: #D7D7D7;  text-transform: uppercase;}
.section-contact .contact-r .circle-bullet span {width: 7px; height: 7px; display: block; border-radius: 50%; background-color: #4ADE80;}
.section-contact .contact-r .primary {text-transform: uppercase; font-size: 15px; font-weight: 700; margin-top: 60px; margin-bottom: 12px;}
.section-contact .contact-r .mail {display: flex; align-items: center; column-gap: 20px; font-size: 32px; font-weight: 700; color: #fff;}
.section-contact .contact-r .mail svg {flex-shrink: 0;}
.contact-footer {border-top: 1px solid var(--color-border); background-color: #fff; padding: 32px 0;}
.contact-footer .inner {display: flex; justify-content: space-between;}
.contact-footer .inner .name {color: var(--color-secondary); text-transform: uppercase; font-size: 20px; font-weight: 600}
.contact-footer .inner .copyright {color: var(--color-text-gray); font-size: 15px;}



/* 반응형 */
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 1024px) {
    .section-activity  .activity-item {width: calc(100% / 2 - 15px);}

    .section-contact .inner {flex-direction: column; row-gap: 60px;}
    .section-contact .line {width: 100%; height: 1px;}

}
@media screen and (max-width: 768px) {
    .section-activity .activity-list {row-gap: 80px;}
    .section-activity  .activity-item {width: 100%;}
}
@media screen and (max-width: 640px) {
    
}
@media screen and (max-width: 500px) {
    
    .section-activity .activity-list {row-gap: 60px;}
    .section-activity .activity-tit h2 {font-size: 15vw;}
    .section-activity .activity-filter {margin-bottom: 60px;}
    .section-activity .activity-filter button {font-size: 12px; padding: 8px 14px;}
    
    .section-contact {padding: 100px 0;}
    .contact-footer .inner {flex-direction: column; row-gap: 4px;}
    .section-contact .contact-r .mail {font-size: 7vw;}
    .section-contact .contact-l h2 {font-size: 17vw;}
    
}
@media screen and (max-width: 375px) {
    
    .section-activity .activity-filter {margin-bottom: 40px;}
    .section-activity .activity-list {row-gap: 40px;}
    .section-activity .activity-item .activity-thumb {height: 72vw;}
    .section-activity .activity-item .activity-info {flex-wrap: wrap; row-gap: 4px;}
    .section-activity .activity-item .activity-content {padding: 24px 20px;}

}

/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
/*********/
