@charset "utf-8";

#mainVisual{overflow:hidden;position:relative;width:100%}
#mainVisual .inner{display:flex;gap:30px} 
/* 메인 슬라이드 */
#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;margin-top:2px}
#mainVisual .main-control button.arrow.btn--play svg{stroke:none;fill:#fff;width:20px;margin-top:2px}
#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;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)}