@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}
#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;color:#777}
/* 배경 애니메이션 */
#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;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;font-family:var(--main-font);font-size:24px;font-weight:700;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)}}

/* 센터소식 */
#inc02 .cont__board .fl-l{position:relative;max-width:769px;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}
#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}
#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}
#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)}