@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%}
#mainVisual .inner{display:flex;gap:30px;padding:0 20px} 
/* 메인 슬라이드 */
#mainVisual .fl-l{position:relative;max-width:1320px;width:100%}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{max-width:1320px;width:100% !important;height:775px;background-size:cover;background-position:center;opacity:0 !important;border-radius:var(--radius);overflow:hidden}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide-active{opacity:1 !important}
#mainVisual .main_img li.img01{background-image:url('./main_banner01.png')}
#mainVisual .main_img li.img02{background-image:url('./main_banner02.png')}
#mainVisual .main_img li.img03{background-image:url('./main_banner03.png')}
#mainVisual .main_img li.img04{background-image:url('./main_banner04.png')}
#mainVisual .main-control{z-index:1;position:absolute;bottom:30px;left:40px;display:flex;align-items:center;justify-content:center;gap:8px;width:168px;height:45px;border-radius:100px;color:#fff;background-color:rgba(0,0,0,0.7)}
#mainVisual .main-control button{all:unset;display:flex;align-items:center;justify-content:center;cursor:pointer}
#mainVisual .main-control button svg{stroke:#fff}
#mainVisual .main-control button.arrow.btn--play{display:none}
#mainVisual .main-control button.arrow.btn--pause svg{stroke:none;fill:#fff;width:20px}
#mainVisual .main-control button.arrow.btn--play svg{stroke:none;fill:#fff;width:20px;margin-top:4px}
#mainVisual .main-control button.arrow.btn--pause svg rect{width:3px !important}
#mainVisual .main-control .swiper-pagination-fraction{width:auto;font-family:var(--main-font)}
/* 정책 안내 박스 */
#mainVisual .fl-r{display:flex;flex-direction:column;gap:25px;width:410px}
#mainVisual .policy-box .link-policy{position:relative;display:flex;flex-direction:column;padding:35px;height:185px;border:1px solid #ddd;border-radius:var(--radius);transform:translateZ(0)}
#mainVisual .policy-box .link-policy .text-box{display:flex;flex-direction:column;gap:20px}
#mainVisual .policy-box .link-policy .text-box .tit{font-family:var(--main-font);font-size:24px;font-weight:700;color:#222;word-break:keep-all}
#mainVisual .policy-box .link-policy .text-box .desc{font-family:var(--sub-font);font-size:16px;line-height:1.56;color:#777;word-break:keep-all;white-space:pre-line}
#mainVisual .policy-box .link-policy .btn--link{all:unset;position:absolute;bottom:15px;right:15px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:100px;background-color:#e9e9e9;transition:background-color 0.2s}
#mainVisual .policy-box .link-policy .btn--link svg{width:20px;height:20px;transition:all 0.2s}
#mainVisual .policy-box .link-policy:hover .btn--link{background-color:var(--brand-color)}
#mainVisual .policy-box .link-policy:hover .btn--link svg{stroke:#fff;transform:rotate(45deg)}
/* 센터공간 + 청년 이야기 박스 */
#mainVisual .box-wrap{display:flex;gap:20px}
#mainVisual .box-wrap .policy-box{flex:1}
#mainVisual .box-wrap .link-policy{height:185px;padding:24px}
#mainVisual .box-wrap .link-policy .tit{font-size:22px !important}
/* 프로그램 참가자 모집 박스 */
#mainVisual .program-box{overflow:hidden}
#mainVisual .program-box .link-program{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:355px;padding:25px;background-color:#f5f7ff;border-radius:var(--radius)}
#mainVisual .program-box .link-program .tit{font-family:var(--main-font);padding-bottom:20px;font-size:28px;font-weight:700;color:var(--brand-color)}
#mainVisual .program-box .link-program .desc{font-family:var(--main-font);padding-bottom:15px;font-size:18px;font-weight:400;color:rgba(34,34,34,0.7)}
#mainVisual .program-box .link-program img{transition:transform 0.2s}
#mainVisual .program-box .link-program:hover img{transform:scale(1.05)}
#mainVisual .program-box .radius{position:absolute;right:0;bottom:0;z-index:10}
#mainVisual .program-box .radius::before{position:absolute;content:'';left:-44px;bottom:0;z-index:-1;width:25px;height:25px;border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#mainVisual .program-box .radius::after{position:absolute;content:'';right:0;bottom:62px;z-index:-1;width:25px;height:25px;border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#mainVisual .program-box .link-program .link-more{box-shadow:-5px -1px 0 15px #fff !important}
#mainVisual .program-box .link-program:hover .link-more{background-color:var(--brand-color)}

/* 반응형 [s] */
@media (max-width:1500px){
#mainVisual .inner{flex-direction:column;gap:20px}
#mainVisual .fl-l{max-width:var(--main-width)}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{max-width:none;height:710px}
#mainVisual .fl-r{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%}
#mainVisual .box-wrap{width:100%}
#mainVisual .program-box{width:100%;grid-row-start:1;grid-row-end:3}
#mainVisual .program-box .link-program{height:auto;padding:24px}
#mainVisual .program-box .link-program .tit{padding-bottom:16px;font-size:26px}
#mainVisual .program-box .link-program .desc{font-size:17px}
#mainVisual .program-box .link-program img{max-width:260px}
#mainVisual .policy-box{width:100%}
#mainVisual .policy-box .link-policy{height:100%;padding:24px}
#mainVisual .policy-box .link-policy .text-box .tit{font-size:22px !important}
#mainVisual .policy-box .link-policy .text-box .desc{white-space:normal}
#mainVisual .box-wrap{gap:20px}
}
@media (max-width:1200px){
#mainVisual .inner{gap:14px}
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{height:640px;border-radius:18px}
#mainVisual .main-control{gap:4px;width:140px;height:38px;left:30px}
#mainVisual .main-control button svg{width:20px;height:20px}
#mainVisual .main-control button.arrow.btn--pause svg{width:18px;margin-top:0}
#mainVisual .main-control button.arrow.btn--play svg{width:16px;margin-top:3px}
#mainVisual .main-control .swiper-pagination-fraction{font-size:12px}
#mainVisual .fl-r{gap:14px}
#mainVisual .policy-box .link-policy{border-radius:18px}
#mainVisual .program-box .link-program{border-radius:18px}
#mainVisual .program-box .link-program .tit{font-size:24px}
#mainVisual .program-box .link-program .desc{font-size:16px}
#mainVisual .box-wrap{gap:14px}
}
@media (max-width:1024px){
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{height:480px}
#mainVisual .main-control{width:120px;height:36px;bottom:20px;left:20px}
#mainVisual .main-control .swiper-pagination-fraction{font-size:11px}
#mainVisual .main-control button svg{width:16px;height:16px}
#mainVisual .main-control button.arrow.btn--pause svg{width:15px}
#mainVisual .main-control button.arrow.btn--play svg{width:15px}
#mainVisual .program-box .link-program{justify-content:center;height:100%}
#mainVisual .policy-box .link-policy .text-box{gap:12px}
#mainVisual .policy-box .link-policy .text-box .tit{font-size:20px !important}
#mainVisual .policy-box .link-policy{padding:24px 50px 24px 24px}
}
@media (max-width:768px){
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{height:365px;border-radius:10px}
#mainVisual .main-control{width:110px;height:30px}
#mainVisual .fl-r{grid-template-columns:repeat(1,1fr)}
#mainVisual .program-box .link-program{border-radius:10px}
#mainVisual .program-box .link-program .tit{font-size:20px}
#mainVisual .program-box .link-program .desc{font-size:15px}
#mainVisual .program-box .radius::after{bottom:54px}
#mainVisual .policy-box .link-policy{border-radius:10px}
#mainVisual .policy-box .link-policy .text-box .tit{font-size:18px !important}
#mainVisual .policy-box .link-policy .text-box .desc{font-size:15px}
}
@media (max-width:480px){
#mainVisual .swiper-container .swiper-wrapper .swiper-slide{height:230px}
#mainVisual .box-wrap{flex-direction:column}
#mainVisual .program-box .link-program .tit{padding-bottom:10px;font-size:18px}
#mainVisual .program-box .link-program .desc{padding-bottom:12px;font-size:14px}
#mainVisual .program-box .link-program img{max-width:215px}
#mainVisual .policy-box .link-policy{padding:20px 50px 20px 20px}
#mainVisual .policy-box .link-policy .text-box .tit{font-size:17px !important}
#mainVisual .policy-box .link-policy .btn--link{width:36px;height:36px}
#mainVisual .policy-box .link-policy .btn--link svg{width:16px;height:16px}
}
/* 반응형 [e] */