@charset "utf-8";

#inc02{padding-bottom:160px}
/* 프로그램 안내 */
#inc02 .cont__program{position:relative;padding-top:125px;background-color:#f5f6ff;overflow:hidden}
#inc02 .cont__program .inner{position:relative;z-index:1;padding:0 20px}
#inc02 .group-title{display:flex;flex-direction:column;align-items:center;gap:24px;padding-bottom:45px}
#inc02 .main-tit{font-family:var(--main-font);font-size:40px;font-weight:700;color:#222}
#inc02 .sub-tit{font-size:18px;font-weight:500;line-height:1.5;text-align:center;color:#777;word-break:keep-all}
/* 배경 애니메이션 */
#inc02 .cont__program .bg{position:absolute;pointer-events:none;animation:floatY var(--dur,0.2s) ease-in-out infinite alternate}
#inc02 .cont__program .bg-l{bottom:-85%;left:-60px;--dur:2s}
#inc02 .cont__program .bg-r{top:-72%;right:-130px;--dur:3s}
@keyframes floatY{0%{ transform:translateY(-40px)} 100%{ transform:translateY(40px)}}

/* 슬라이드 컨트롤 */
#inc02 .swiper-controll{display:flex;align-items:center;justify-content:center;gap:15px;padding-bottom:45px}
#inc02 .swiper-controll button{all:unset;display:flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:100px;background-color:#fff;cursor:pointer}
#inc02 .swiper-controll button svg{stroke:#000}
/* 슬라이드 */
#inc02 .gall_slide{padding-bottom:135px}
#inc02 .gall_slide .link-program{display:flex;flex-direction:column}
#inc02 .gall_slide .link-program .thumb-box{display:flex;max-width:560px;width:100%;height:390px;border-radius:var(--radius);overflow:hidden}
#inc02 .gall_slide .link-program .thumb-box .img{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;transition:transform 0.2s}
#inc02 .gall_slide .link-program:hover .thumb-box .img{transform:scale(1.05)}
#inc02 .gall_slide .link-program .program__info{position:relative;display:flex;flex-direction:column;gap:20px;padding:34px 24px 0}
#inc02 .gall_slide .link-program .program__info .atc__title{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--main-font);font-size:24px;font-weight:700;line-height:100%;color:#222}
#inc02 .gall_slide .link-program .program__info .metadata .dl{display:flex;align-items:center;gap:15px}
#inc02 .gall_slide .link-program .program__info .metadata .dl::before{content:'';width:5px;height:5px;border-radius:50px;background-color:var(--brand-color)}
#inc02 .gall_slide .link-program .program__info .metadata .dt{font-size:18px;font-weight:700;color:#222}
#inc02 .gall_slide .link-program .program__info .metadata .dd{font-size:16px;color:#777}
#inc02 .gall_slide .link-program:hover .link-more{background-color:var(--brand-color)}

/* 센터소식 + 청년기록관 배경 */
#inc02 .cont__board{position:relative;overflow:hidden}
#inc02 .cont__board .bg{z-index:-1;position:absolute;display:flex;width:100%;height:100%}
#inc02 .cont__board .bg .bg-l{flex:1;background:linear-gradient(to right, #ffffff 0%,#ffffff 80%,#f5f6ff 80%,#f5f6ff 100%)}
#inc02 .cont__board .bg .bg-r{position:relative;flex:1;height:480px;background-color:#f5f6ff;border-radius:0 0 0 134px;overflow:hidden}
#inc02 .cont__board .bg .bg-r .bg__marquee{position:absolute;bottom:150px;left:-17px}
#inc02 .cont__board .bg .bg-r .bg__marquee .marquee-block{display:flex;gap:50px;animation:marquee 15s infinite linear}
#inc02 .cont__board .bg .bg-r .bg-text{font-family:var(--main-font);font-size:110px;font-weight:800;letter-spacing:-2px;white-space:nowrap;color:rgba(109,134,236,0.12)}
#inc02 .cont__board .inner{display:flex}
#inc02 .cont__board .inner > *{flex:1}
@keyframes marquee{0% {transform:translateX(0)}100%{transform:translateX(-1536px)}}
@keyframes marqueeMo{0% {transform:translateX(0)}100%{transform:translateX(-1247px)}}

/* 센터소식 */
#inc02 .cont__board .fl-l{position:relative;max-width:769px;padding-left:20px;padding-right:112px;padding-top:124px;box-sizing:content-box;border-radius:0 134px 0 0;background-color:#fff}
#inc02 .cont__board .fl-l .area-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:5px;border-bottom:4px solid #222}
#inc02 .cont__board .fl-l .area-article .atc-list{border-bottom:1px solid #ddd}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc{display:flex;align-items:center;padding:30px;font-family:var(--main-font);font-weight:600}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject{display:flex;align-items:center;font-size:20px;line-height:1.4;word-break:keep-all}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject::before{content:'';width:5px;height:5px;background-color:var(--brand-color);border-radius:50px;margin-right:15px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__date{margin-left:auto;font-size:16px;color:#aaa;white-space:nowrap}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .new{width:20px;height:20px;margin-left:5px;border-radius:4px;font-size:12px;text-align:center;line-height:20px;color:#fff;background:var(--brand-color)}
/* 청년기록관 */
#inc02 .cont__board .fl-r{display:flex;justify-content:center;padding-top:60px;padding-right:20px;min-width:615px}
#inc02 .cont__board .fl-r .cont-wrapper{position:relative}
#inc02 .cont__board .fl-r .cont-wrapper .tip{z-index:1;position:absolute;top:-40px;right:-50px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:130px;height:130px;font-family:var(--main-font);font-weight:700;border-radius:100px;background:linear-gradient(129deg, #63cde3, #6d86ec)}
#inc02 .cont__board .fl-r .cont-wrapper .tip .year{font-size:15px;color:rgba(255, 255, 255, 0.6)}
#inc02 .cont__board .fl-r .cont-wrapper .tip .txt{font-size:19px;color:#fff}
#inc02 .cont__board .fl-r .cont-record{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:515px;background-color:#fff;border-radius:var(--radius);box-sizing:border-box;overflow:hidden;box-shadow:0 0 40px rgba(109, 134, 236, 0.2)}
#inc02 .cont__board .fl-r .cont-record .link-atc{display:flex;flex-direction:column;height:500px;padding:50px 50px 0}
#inc02 .cont__board .fl-r .cont-record .record__tit{display:flex;flex-direction:column;gap:15px;padding-bottom:20px;font-family:var(--main-font);word-break:keep-all}
#inc02 .cont__board .fl-r .cont-record .record__tit .cate{font-size:16px;font-weight:600;color:var(--brand-color)}
#inc02 .cont__board .fl-r .cont-record .record__tit .tit{font-size:28px;font-weight:700;line-height:1.28;color:#222}
#inc02 .cont__board .fl-r .cont-record .record__thumb{position:relative;height:188px;margin-bottom:25px;background-position:left -20px;background-repeat:no-repeat;border-radius:20px;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}
#inc02 .cont__board .fl-r .cont-record .record__thumb .img{display:block;width:100%;height:100%;background-size:cover;background-position:center -23px;background-repeat:no-repeat}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius{position:absolute;bottom:0;right:0}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius::before{position:absolute;content:"";left:-34px;bottom:0px;width:25px;height:25px;border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius::after{position:absolute;content:"";top:-34.5px;right:0px;width:25px;height:25px;border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius .btn--link{z-index:1;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:100px;background-color:#222;box-shadow:3px 2px 0 12px #fff ;transition:background-color 0.2s}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius .btn--link svg{stroke:#fff;transition:transform 0.2s}
#inc02 .cont__board .fl-r .cont-record .record__atc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.6;color:#777;word-break:keep-all}
#inc02 .cont__board .fl-r .cont-record .btn--view{display:flex;align-items:center;justify-content:center;gap:10px;height:65px;padding:20px;font-family:var(--main-font);font-size:18px;font-weight:600;color:#fff;background-color:var(--brand-color)}
#inc02 .cont__board .fl-r .cont-record .btn--view svg{width:18px;height:18px}
/* hover */
#inc02 .cont__board .fl-r .cont-record:hover .record__thumb .radius .btn--link{background-color:var(--brand-color)}
#inc02 .cont__board .fl-r .cont-record:hover .record__thumb .radius .btn--link svg{transform:rotate(45deg)}

/* 반응형 [s] */
@media (max-width:1500px){
#inc02{padding-bottom:100px}
#inc02 .main-tit{font-size:38px}
#inc02 .gall_slide .link-program .thumb-box{height:320px}
#inc02 .gall_slide .link-program .program__info{gap:16px;padding:30px 20px 0}
#inc02 .gall_slide .link-program .program__info .atc__title{font-size:22px}
#inc02 .program-item .link-more{width:114px;height:38px;font-size:14px}
#inc02 .cont__program .bg-l{bottom:-100%;left:-300px}
#inc02 .cont__program .bg-r{top:-95%;right:-110px}
#inc02 .cont__board .main-tit{font-size:30px}
#inc02 .cont__board .bg .bg-l{flex:none;width:45%;height:480px}
#inc02 .cont__board .bg .bg-r{width:55%;border-radius:0}
#inc02 .cont__board .fl-l{padding-right:100px;padding-top:105px}
#inc02 .cont__board .fl-l .area-title{padding:0 10px 10px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc{padding:30px 25px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject{font-size:18px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__date{font-size:15px}
#inc02 .cont__board .fl-r{padding-top:52px}
#inc02 .cont__board .fl-r .cont-record{width:485px}
#inc02 .cont__board .fl-r .cont-record .link-atc{height:auto;padding:45px 45px 30px}
#inc02 .cont__board .fl-r .cont-record .record__tit{gap:12px;padding-bottom:18px}
#inc02 .cont__board .fl-r .cont-record .record__tit .cate{font-size:15px}
#inc02 .cont__board .fl-r .cont-record .record__tit .tit{font-size:24px}
#inc02 .cont__board .fl-r .cont-record .record__thumb{margin-bottom:20px}
#inc02 .cont__board .fl-r .cont-wrapper .tip{top:-50px;right:-60px;width:120px;height:120px}
#inc02 .cont__board .fl-r .cont-wrapper .tip .txt{font-size:17px}
#inc02 .cont__board .fl-r .cont-record .btn--view{font-size:17px}
#inc02 .cont__board .fl-r .cont-record .btn--view svg{width:16px;height:16px}
}
@media (max-width:1200px){
#inc02 .group-title{gap:20px}
#inc02 .cont__program{padding-top:120px}
#inc02 .main-tit{font-size:34px}
#inc02 .sub-tit{font-size:16px}
#inc02 .gall_slide{padding-bottom:130px}
#inc02 .gall_slide .link-program .thumb-box{border-radius:18px}
#inc02 .gall_slide .link-program .program__info{gap:14px;padding:20px 14px 0}
#inc02 .gall_slide .link-program .program__info .atc__title{font-size:20px}
#inc02 .gall_slide .link-program .program__info .metadata .dl{gap:12px}
#inc02 .gall_slide .link-program .program__info .metadata .dt{font-size:16px}
#inc02 .gall_slide .link-program .program__info .metadata .dd{font-size:15px}
#inc02 .program-item .link-more{width:100px;height:34px;font-size:13px}
#inc02 .cont__board .main-tit{font-size:24px}
#inc02 .cont__board .bg .bg-l{width:10%}
#inc02 .cont__board .bg .bg-r{width:90%}
#inc02 .cont__board .fl-l{padding-right:65px;padding-top:75px;border-radius:0 114px 0 0}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc{padding:25px 20px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject{font-size:16px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__date{font-size:13px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject::before{margin-right:10px}
#inc02 .cont__board .fl-r{min-width:545px}
#inc02 .cont__board .fl-r .cont-wrapper .tip{top:-50px;right:-55px;width:110px;height:110px}
#inc02 .cont__board .fl-r .cont-wrapper .tip .year{font-size:14px}
#inc02 .cont__board .fl-r .cont-wrapper .tip .txt{font-size:16px}
#inc02 .cont__board .fl-r .cont-record{width:430px;border-radius:18px}
#inc02 .cont__board .fl-r .cont-record .link-atc{padding:35px 35px 25px}
#inc02 .cont__board .fl-r .cont-record .record__tit{gap:8px;padding-bottom:15px}
#inc02 .cont__board .fl-r .cont-record .record__tit .cate{font-size:14px}
#inc02 .cont__board .fl-r .cont-record .record__tit .tit{font-size:20px}
#inc02 .cont__board .fl-r .cont-record .record__thumb{height:150px}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius .btn--link{width:42px;height:42px}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius .btn--link svg{width:20px;height:20px}
}
@media (max-width:1024px){
#inc02{padding-bottom:80px}
#inc02 .group-title{gap:18px;padding-bottom:35px}
#inc02 .cont__program{padding-top:100px}
#inc02 .main-tit{font-size:32px}
#inc02 .sub-tit{font-size:15px}
#inc02 .gall_slide{padding-bottom:65px}
#inc02 .swiper-controll{gap:12px;padding-bottom:35px}
#inc02 .swiper-controll button{width:50px;height:50px}
#inc02 .swiper-controll button svg{width:22px;height:22px}
#inc02 .gall_slide .link-program .program__info .atc__title{font-size:18px}
#inc02 .cont__program .bg-l,#inc02 .cont__program .bg-r{display:none}
#inc02 .cont__board .inner{flex-direction:column-reverse}
#inc02 .cont__board .bg .bg-l{display:none}
#inc02 .cont__board .bg .bg-r{width:100%;height:370px}
#inc02 .cont__board .bg .bg-r .bg__marquee{bottom:unset;top:50%;transform:translateY(-50%)}
#inc02 .cont__board .fl-l{max-width:unset;padding:0 20px;border-radius:0}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject{font-size:15px}
#inc02 .cont__board .fl-r{min-width:0;padding-bottom:100px;padding-right:0}
#inc02 .cont__board .fl-r .cont-record .record__atc{font-size:15px}
}
@media (max-width:768px){
#inc02{padding-bottom:80px}
#inc02 .group-title{gap:14px;padding-bottom:30px}
#inc02 .cont__program{padding-top:60px}
#inc02 .main-tit{font-size:28px}
#inc02 .program-item{display:flex;justify-content:center}
#inc02 .swiper-controll{gap:10px;padding-bottom:30px}
#inc02 .gall_slide{padding-bottom:0px}
#inc02 .gall_slide .link-program{max-width:500px;width:100%}
#inc02 .gall_slide .link-program .thumb-box{height:320px;border-radius:10px}
#inc02 .gall_slide .link-program .program__info{gap:4px;padding:16px 14px 0}
#inc02 .gall_slide .link-program .program__info .atc__title{font-size:18px}
#inc02 .gall_slide .link-program .program__info .metadata .dt{font-size:15px}
#inc02 .cont__board .fl-r{padding-top:85px;padding-bottom:80px}
#inc02 .cont__board .fl-r .cont-record{width:100%;max-width:500px}
#inc02 .cont__board .fl-r .cont-wrapper{margin:0 55px}
#inc02 .cont__board .fl-r .cont-record{border-radius:10px}
#inc02 .cont__board .fl-r .cont-record .btn--view{height:55px;font-size:16px}
#inc02 .cont__board .fl-r .cont-record .btn--view svg{width:15px;height:15px}
#inc02 .cont__board .bg .bg-r{height:420px}
#inc02 .cont__board .bg .bg-r .bg__marquee{top:70%;transform:translateY(-70%)}
#inc02 .cont__board .bg .bg-r .bg__marquee .marquee-block{gap:40px;animation:marqueeMo 15s infinite linear}
#inc02 .cont__board .bg .bg-r .bg-text{font-size:90px}
#inc02 .cont__board .main-tit{font-size:22px}
}
@media (max-width:480px){
#inc02{padding-bottom:60px}
#inc02 .main-tit{font-size:24px}
#inc02 .swiper-controll button{width:46px;height:46px}
#inc02 .swiper-controll button svg{width:20px;height:20px}
#inc02 .gall_slide .link-program .thumb-box{height:260px}
#inc02 .gall_slide .link-program .program__info .atc__title{font-size:16px}
#inc02 .gall_slide .link-program .program__info .metadata .dl{gap:8px}
#inc02 .gall_slide .link-program .program__info .metadata .dt{font-size:14px}
#inc02 .gall_slide .link-program .program__info .metadata .dd{font-size:14px}
#inc02 .program-item .link-more{width:85px;height:30px;font-size:12px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc{padding:20px 15px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__subject{font-size:14px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__date{font-size:12px}
#inc02 .cont__board .fl-r{padding-top:0;padding-bottom:60px;padding-top:40px}
#inc02 .cont__board .fl-r .cont-wrapper .tip{display:none}
#inc02 .cont__board .fl-r .cont-wrapper .tip .year{font-size:12px}
#inc02 .cont__board .fl-r .cont-wrapper .tip .txt{font-size:14px}
#inc02 .cont__board .bg .bg-r{height:345px}
#inc02 .cont__board .main-tit{font-size:18px}
#inc02 .cont__board .fl-r .cont-wrapper{margin:0 20px}
#inc02 .cont__board .fl-r .cont-record .record__tit .cate{font-size:13px}
#inc02 .cont__board .fl-r .cont-record .record__tit .tit{font-size:18px}
#inc02 .cont__board .fl-r .cont-record .record__thumb{margin-bottom:15px}
#inc02 .cont__board .fl-r .cont-record .link-atc{padding:30px 30px 20px}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius .btn--link{width:36px;height:36px}
#inc02 .cont__board .fl-r .cont-record .record__thumb .radius .btn--link svg{width:16px;height:16px}
#inc02 .cont__board .fl-r .cont-record .btn--view{height:50px;font-size:14px}
#inc02 .cont__board .fl-r .cont-record .btn--view svg{width:14px;height:14px}
}
@media (max-width:390px){
#inc02 .gall_slide .link-program .thumb-box{height:220px}
#inc02 .gall_slide .link-program .program__info{gap:10px;padding:20px 14px 0}
#inc02 .program-item .link-more{display:none}
#inc02 .cont__board .fl-r .cont-record .record__thumb .img{background-position:center}
#inc02 .cont__board .fl-r .cont-record .record__atc{font-size:14px}
#inc02 .cont__board .fl-l .area-article .atc-list .link-atc .atc__date{display:none} 
}