/* 웹/앱 제작 페이지 */
/* 공통 타이틀 */
#agency .title h2 { font-family: 'Pretendard'; font-size: 60px; font-style: normal; font-weight: 800; line-height: 74px; letter-spacing: -1.2px; }
#agency .title h2 strong { font-weight: 800; }
#agency .title .eyebrow { font-family: 'Pretendard'; font-size: 24px; font-style: normal; font-weight: 800; line-height: normal; }
#agency .title .description { font-family: 'Pretendard'; font-size: 22px; font-style: normal; font-weight: 500; line-height: 31px; letter-spacing: -0.44px; }

@media screen and (max-width:1600px) {
    #agency .title h2 { font-size: 52px; line-height: 64px; }
    #agency .title .eyebrow { font-size: 21px; }
    #agency .title .description { font-size: 20.5px; line-height: 29px; }
}
@media screen and (max-width:1280px) {
    #agency .title h2 { font-size: 47px; line-height: 58px; }
    #agency .title .eyebrow { font-size: 19px; }
    #agency .title .description { font-size: 19px; line-height: 27px; }
}
@media screen and (max-width:1024px) {
    #agency .title h2 { font-size: 42px; line-height: 52px; }
    #agency .title .eyebrow { font-size: 17px; }
    #agency .title .description { font-size: 17.5px; line-height: 25px; }
}
@media screen and (max-width:768px) {
    #agency .title h2 { font-size: 36px; line-height: 45px; }
    #agency .title .eyebrow { font-size: 15px; }
    #agency .title .description { font-size: 16px; line-height: 23px; }
}
@media screen and (max-width:640px) {
    #agency .title h2 { font-size: 32px; line-height: 41px; }
    #agency .title .eyebrow { font-size: 13.5px; }
    #agency .title .description { font-size: 14px; line-height: 21px; }
}





#agency .hero { position: relative; padding: 250px 0 405px; background-image: url('../img/agency/hero_bg.png'); background-position: center; background-size: cover; }
#agency .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; }
#agency .hero .container { position: relative; z-index: 1; }
#agency .hero .content { display: flex; flex-direction: column; align-items: flex-start; }
#agency .hero .eyebrow { color: #000; font-family: 'Pretendard'; font-size: 24px; font-style: normal; font-weight: 800; line-height: normal; letter-spacing: -0.96px; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9); }
#agency .hero h1 { color: #000; font-family: 'Pretendard'; font-size: 60px; font-style: normal; font-weight: 800; line-height: 74px; letter-spacing: -1.2px; margin: 24px 0 0; text-shadow: 0 1px 10px rgba(255, 255, 255, 0.9); }
#agency .hero h1 strong { display: inline-block; background: linear-gradient(90deg, #A275FF 0%, #003CFF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; text-shadow: none; }
#agency .hero .description { color: #333; font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 500; line-height: 28px; letter-spacing: -0.4px; margin: 25px 0 0; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95); }
#agency .hero .service-list { display: flex; gap: 30px; margin: 23px 0 0; }
#agency .hero .service-list li { width: 90px; text-align: center; }
#agency .hero .service-list .icon { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 17px; background: #FFF; overflow: hidden; }
#agency .hero .service-list .icon img { display: block; width: 50px; height: 50px; }
#agency .hero .service-list .text { display: block; color: #000; font-family: 'Pretendard'; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.6px; margin: 8px 0 0; }

@media screen and (max-width:1600px) {
    #agency .hero { padding: 225px 0 365px; }
    #agency .hero .eyebrow { font-size: 22px; }
    #agency .hero h1 { font-size: 55px; line-height: 68px; margin-top: 22px; }
    #agency .hero .description { font-size: 19px; line-height: 27px; margin-top: 23px; }
    #agency .hero .service-list { gap: 27px; margin-top: 21px; }
    #agency .hero .service-list li, #agency .hero .service-list .icon { width: 84px; }
    #agency .hero .service-list .icon { height: 84px; border-radius: 16px; }
    #agency .hero .service-list .icon img { width: 47px; height: 47px; }
    #agency .hero .service-list .text { font-size: 14.5px; }
}
@media screen and (max-width:1280px) {
    #agency .hero { padding: 203px 0 329px; background-position: 58% center; }
    #agency .hero .eyebrow { font-size: 20px; }
    #agency .hero h1 { font-size: 50px; line-height: 62px; margin-top: 20px; }
    #agency .hero .description { font-size: 18px; line-height: 26px; margin-top: 21px; }
    #agency .hero .service-list { gap: 24px; margin-top: 19px; }
    #agency .hero .service-list li, #agency .hero .service-list .icon { width: 78px; }
    #agency .hero .service-list .icon { height: 78px; border-radius: 15px; }
    #agency .hero .service-list .icon img { width: 44px; height: 44px; }
    #agency .hero .service-list .text { font-size: 14px; }
}
@media screen and (max-width:1024px) {
    #agency .hero { padding: 183px 0 296px; background-position: 62% center; }
    #agency .hero::before { display: block; background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.08) 72%); }
    #agency .hero .eyebrow { font-size: 18px; }
    #agency .hero h1 { font-size: 45px; line-height: 56px; margin-top: 18px; }
    #agency .hero .description { font-size: 17px; line-height: 24px; margin-top: 19px; }
    #agency .hero .service-list { gap: 21px; margin-top: 17px; }
    #agency .hero .service-list li, #agency .hero .service-list .icon { width: 72px; }
    #agency .hero .service-list .icon { height: 72px; border-radius: 14px; }
    #agency .hero .service-list .icon img { width: 41px; height: 41px; }
    #agency .hero .service-list .text { font-size: 13.5px; }
}
@media screen and (max-width:768px) {
    #agency .hero { padding: 150px 0 240px; background-position: 67% center; }
    #agency .hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0) 100%); }
    #agency .hero .content { align-items: center; text-align: center; }
    #agency .hero .eyebrow { font-size: 16px; word-break: keep-all; }
    #agency .hero h1 { font-size: 40px; line-height: 50px; margin-top: 16px; }
    #agency .hero .description { font-size: 16px; line-height: 23px; margin-top: 17px; }
    #agency .hero .service-list { gap: 18px; margin-top: 15px; }
    #agency .hero .service-list li, #agency .hero .service-list .icon { width: 66px; }
    #agency .hero .service-list .icon { height: 66px; border-radius: 13px; }
    #agency .hero .service-list .icon img { width: 38px; height: 38px; }
    #agency .hero .service-list .text { font-size: 13px; }
}
@media screen and (max-width:640px) {
    #agency .hero { padding: 130px 0 190px; background-position: 70% center; }
    #agency .hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 46%, rgba(255, 255, 255, 0.2) 76%, rgba(255, 255, 255, 0) 100%); }
    #agency .hero .eyebrow { font-size: 14px; }
    #agency .hero h1 { font-size: 35px; line-height: 44px; margin-top: 14px; }
    #agency .hero .description { font-size: 15px; line-height: 22px; margin-top: 15px; }
    #agency .hero .service-list { gap: 15px; margin-top: 14px; }
    #agency .hero .service-list li, #agency .hero .service-list .icon { width: 60px; }
    #agency .hero .service-list .icon { height: 60px; border-radius: 12px; }
    #agency .hero .service-list .icon img { width: 35px; height: 35px; }
    #agency .hero .service-list .text { font-size: 12.5px; }
}





/* 맞춤 제작 */
#agency .custom { position: relative; padding: 188px 0 200px; background-color: #18004D; background-image: url('../img/agency/custom_bg.jpg'); }
#agency .custom .title { width: 634px; margin: 0 auto; color: #FFF; }
#agency .custom .title .eyebrow { color: #FFF; letter-spacing: -0.96px; }
#agency .custom .title h2 { color: #FFF; margin: 13px 0 0; }
#agency .custom .title h2 strong { background: linear-gradient(90deg, #00FFEA 0%, #3EA2FF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; }
#agency .custom .title .description { color: #FFF; margin: 36px 0 0; }
#agency .custom .content { margin: 75px 0 0; }
#agency .custom .card-list { display: flex; width: max-content; margin-left: -250px; animation: agencyCustomMarquee 45s linear infinite; }
#agency .custom .card-list li { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 285px; padding: 52px 0; margin-right: 20px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 40px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.12), 0 8px 24px rgba(221, 213, 236, 0.2); color: #FFF; text-align: center; overflow: hidden; }
#agency .custom .card-list li:nth-child(odd) { transform: translateY(53px); }
#agency .custom .card-list .icon { display: block; flex: 0 0 auto; width: 122px; height: 122px; }
#agency .custom .card-list .icon img { display: block; width: 122px; height: 122px; }
#agency .custom .card-list h3 { color: #FFF; font-family: 'Montserrat', 'Pretendard'; font-size: 28px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.56px; }
#agency .custom .card-list .line { display: block; flex: 0 0 auto; width: 262px; height: 1px; background-image: url('../img/agency/custom_line.svg'); background-position: center; background-repeat: no-repeat; background-size: 262px 1px; }
#agency .custom .card-list p { color: #FFF; font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 500; line-height: 30px; letter-spacing: -0.8px; }
#agency .custom .card-list p strong { color: #17DDF1; font-weight: 800; }

@keyframes agencyCustomMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media screen and (max-width:1600px) {
    #agency .custom { padding: 169px 0 180px; }
    #agency .custom .title { width: 571px; }
    #agency .custom .title h2 { margin-top: 12px; }
    #agency .custom .title .description { margin-top: 32px; }
    #agency .custom .content { margin-top: 68px; }
    #agency .custom .card-list li { gap: 18px; width: 257px; padding: 47px 0; margin-right: 18px; border-radius: 36px; }
    #agency .custom .card-list li:nth-child(odd) { transform: translateY(48px); }
    #agency .custom .card-list .icon, #agency .custom .card-list .icon img { width: 110px; height: 110px; }
    #agency .custom .card-list h3 { font-size: 26px; }
    #agency .custom .card-list .line { width: 236px; background-size: 236px 1px; }
    #agency .custom .card-list p { font-size: 19px; line-height: 28px; }
}
@media screen and (max-width:1280px) {
    #agency .custom { padding: 152px 0 162px; }
    #agency .custom .title { width: 514px; }
    #agency .custom .title h2 { margin-top: 11px; }
    #agency .custom .title .description { margin-top: 29px; }
    #agency .custom .content { margin-top: 61px; }
    #agency .custom .card-list { margin-left: -225px; }
    #agency .custom .card-list li { gap: 16px; width: 231px; padding: 42px 0; margin-right: 16px; border-radius: 32px; }
    #agency .custom .card-list li:nth-child(odd) { transform: translateY(43px); }
    #agency .custom .card-list .icon, #agency .custom .card-list .icon img { width: 99px; height: 99px; }
    #agency .custom .card-list h3 { font-size: 24px; }
    #agency .custom .card-list .line { width: 212px; background-size: 212px 1px; }
    #agency .custom .card-list p { font-size: 18px; line-height: 26px; }
}
@media screen and (max-width:1024px) {
    #agency .custom { padding: 137px 0 146px; }
    #agency .custom .title { width: min(100%, 463px); }
    #agency .custom .title h2 { margin-top: 10px; }
    #agency .custom .title .description { margin-top: 26px; }
    #agency .custom .content { margin-top: 55px; }
    #agency .custom .card-list { margin-left: -203px; }
    #agency .custom .card-list li { gap: 15px; width: 208px; padding: 38px 0; margin-right: 15px; border-radius: 29px; }
    #agency .custom .card-list li:nth-child(odd) { transform: translateY(39px); }
    #agency .custom .card-list .icon, #agency .custom .card-list .icon img { width: 89px; height: 89px; }
    #agency .custom .card-list h3 { font-size: 22px; }
    #agency .custom .card-list .line { width: 191px; background-size: 191px 1px; }
    #agency .custom .card-list p { font-size: 17px; line-height: 24px; }
}
@media screen and (max-width:768px) {
    #agency .custom { padding: 116px 0 124px; }
    #agency .custom .title { width: min(100%, 417px); }
    #agency .custom .title h2 { margin-top: 9px; }
    #agency .custom .title .description { margin-top: 23px; word-break: keep-all; }
    #agency .custom .content { margin-top: 50px; }
    #agency .custom .card-list { margin-left: -183px; }
    #agency .custom .card-list li { gap: 14px; width: 187px; padding: 34px 0; margin-right: 14px; border-radius: 26px; }
    #agency .custom .card-list li:nth-child(odd) { transform: translateY(35px); }
    #agency .custom .card-list .icon, #agency .custom .card-list .icon img { width: 80px; height: 80px; }
    #agency .custom .card-list h3 { font-size: 20px; }
    #agency .custom .card-list .line { width: 172px; background-size: 172px 1px; }
    #agency .custom .card-list p { font-size: 15.5px; line-height: 22px; }
}
@media screen and (max-width:640px) {
    #agency .custom { padding: 99px 0 105px; }
    #agency .custom .title { width: min(100%, 375px); }
    #agency .custom .title h2 { margin-top: 8px; }
    #agency .custom .title .description { margin-top: 21px; }
    #agency .custom .content { margin-top: 45px; }
    #agency .custom .card-list { margin-left: -165px; }
    #agency .custom .card-list li { gap: 13px; width: 168px; padding: 31px 0; margin-right: 13px; border-radius: 23px; }
    #agency .custom .card-list li:nth-child(odd) { transform: translateY(32px); }
    #agency .custom .card-list .icon, #agency .custom .card-list .icon img { width: 72px; height: 72px; }
    #agency .custom .card-list h3 { font-size: 18px; }
    #agency .custom .card-list .line { width: 155px; background-size: 155px 1px; }
    #agency .custom .card-list p { font-size: 14px; line-height: 20px; }
}





/* 고객 고민 */
#agency .worry { padding: 190px 0; background: #FBF8FF; }
#agency .worry .container { display: grid; grid-template-columns: 784px 617px; gap: 84px; }
#agency .worry .image { position: relative; width: 784px; height: 840px; border-radius: 50px; background: #DDEAFF; overflow: hidden; }
#agency .worry .image img { position: absolute; left: -39px; top: -14px; display: block; width: 881px; height: 861px; max-width: none; object-fit: cover; backface-visibility: hidden; }
#agency .worry .worry-info { display: flex; flex-direction: column; justify-content: center; }
#agency .worry .title h2 { color: #000; }
#agency .worry .title h2 strong { display: inline-block; background-image: linear-gradient(90deg, #7700FF 0%, #FF0080 100%); background-position: left top; background-repeat: no-repeat; background-size: 617px 100%; background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; }
#agency .worry .content { margin: 44px 0 0; }
#agency .worry .worry-list { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
#agency .worry .worry-list li { width: max-content; padding: 20px 25px; border: 2px solid #E3E3E3; border-radius: 999px; background: #FFF; color: #333; font-family: 'Pretendard'; font-size: 25px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.5px; }
#agency .worry .worry-list li:last-child { width: 100%; }
#agency .worry .worry-list li strong { color: #8500E2; font-weight: 800; }
#agency .worry .description { color: #333; font-family: 'Pretendard'; font-size: 26px; font-style: normal; font-weight: 500; line-height: 40px; letter-spacing: -0.52px; margin: 44px 0 0; }
#agency .worry .description strong { font-weight: 800; }

@media screen and (max-width:1600px) {
    #agency .worry { padding: 171px 0; }
    #agency .worry .container { grid-template-columns: minmax(0, 784px) minmax(0, 617px); gap: 76px; }
    #agency .worry .image { width: 100%; height: auto; aspect-ratio: 784 / 840; border-radius: 45px; }
    #agency .worry .image img { left: -5%; top: -1.7%; width: 112.4%; height: 102.5%; }
    #agency .worry .content { margin-top: 40px; }
    #agency .worry .worry-list { gap: 18px; }
    #agency .worry .worry-list li { padding: 18px 23px; font-size: 23px; }
    #agency .worry .description { font-size: 24px; line-height: 37px; margin-top: 40px; }
}
@media screen and (max-width:1280px) {
    #agency .worry { padding: 154px 0; }
    #agency .worry .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 42px; }
    #agency .worry .image { border-radius: 41px; }
    #agency .worry .content { margin-top: 36px; }
    #agency .worry .worry-list { gap: 16px; }
    #agency .worry .worry-list li { width: 100%; padding: 16px 20px; font-size: 20px; }
    #agency .worry .description { font-size: 21px; line-height: 33px; margin-top: 36px; }
}
@media screen and (max-width:1024px) {
    #agency .worry { padding: 139px 0; }
    #agency .worry .container { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 34px; }
    #agency .worry .image { border-radius: 37px; }
    #agency .worry .content { margin-top: 32px; }
    #agency .worry .worry-list { gap: 14px; }
    #agency .worry .worry-list li { padding: 14px 18px; font-size: 17px; }
    #agency .worry .description { font-size: 18px; line-height: 29px; margin-top: 32px; }
}
@media screen and (max-width:768px) {
    #agency .worry { padding: 118px 0; }
    #agency .worry .container { grid-template-columns: 1fr; gap: 45px; }
    #agency .worry .image { width: min(100%, 520px); margin: 0 auto; border-radius: 33px; }
    #agency .worry .title h2 { text-align: center; }
    #agency .worry .content { margin-top: 29px; }
    #agency .worry .worry-list { gap: 13px; }
    #agency .worry .worry-list li { padding: 13px 16px; font-size: 15px; }
    #agency .worry .description { font-size: 16px; line-height: 26px; margin-top: 29px; text-align: center; }
}
@media screen and (max-width:640px) {
    #agency .worry { padding: 100px 0; }
    #agency .worry .container { gap: 38px; }
    #agency .worry .image { border-radius: 30px; }
    #agency .worry .content { margin-top: 26px; }
    #agency .worry .worry-list { gap: 12px; }
    #agency .worry .worry-list li { padding: 12px 14px; font-size: 13px; }
    #agency .worry .description { font-size: 14px; line-height: 23px; margin-top: 26px; }
}





/* 선택 이유 */
#agency .reason { padding: 67px 0; background-color: #F3F5FF; background-image: url('../img/agency/reason_bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
#agency .reason .container { display: grid; grid-template-columns: 617px 877px; gap: 106px; }
#agency .reason .title { margin: 112px 0 0; }
#agency .reason .title h2 { color: #000; }
#agency .reason .title h2 strong { background: linear-gradient(90deg, #00C8FF 0%, #0004FF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; }
#agency .reason .content { display: grid; grid-template-columns: repeat(2, 419px); gap: 39px; }
#agency .reason .card-column { display: flex; flex-direction: column; gap: 68px; }
#agency .reason .reason-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 419px; padding: 50px 40px; border-radius: 30px; background: #FFF; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1); overflow: hidden; }
#agency .reason .reason-card.primary { background: #444AFF; color: #FFF; }
#agency .reason .experience-card { align-self: start; margin: 200px 0 0; }
#agency .reason .card-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#agency .reason .card-title h3 { color: #000; font-family: 'Pretendard'; font-size: 34px; font-style: normal; font-weight: 800; line-height: normal; letter-spacing: -0.68px; }
#agency .reason .card-title p { color: #333; font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 800; line-height: 30px; letter-spacing: -0.8px; }
#agency .reason .reason-card .line { display: block; width: 100%; height: 1px; background: #E1E1E1; }
#agency .reason .reason-card .description { color: #666; font-family: 'Pretendard'; font-size: 20px; font-style: normal; font-weight: 500; line-height: 30px; letter-spacing: -0.8px; }
#agency .reason .reason-card.primary .card-title h3, #agency .reason .reason-card.primary .card-title p, #agency .reason .reason-card.primary .description { color: #FFF; }
#agency .reason .reason-card.primary .line { background: rgba(255, 255, 255, 0.2); }

@media screen and (max-width:1600px) {
    #agency .reason { padding: 60px 0; }
    #agency .reason .container { grid-template-columns: minmax(0, 617px) minmax(0, 877px); gap: 72px; }
    #agency .reason .title { margin-top: 101px; }
    #agency .reason .content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; }
    #agency .reason .card-column { gap: 61px; }
    #agency .reason .reason-card { gap: 18px; width: 100%; padding: 45px 36px; border-radius: 27px; }
    #agency .reason .experience-card { margin-top: 180px; }
    #agency .reason .card-title { gap: 9px; }
    #agency .reason .card-title h3 { font-size: 31px; }
    #agency .reason .card-title p, #agency .reason .reason-card .description { font-size: 19px; line-height: 28px; }
}
@media screen and (max-width:1280px) {
    #agency .reason { padding: 54px 0; }
    #agency .reason .container { grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr); gap: 45px; }
    #agency .reason .title { margin-top: 91px; }
    #agency .reason .content { gap: 28px; }
    #agency .reason .card-column { gap: 55px; }
    #agency .reason .reason-card { gap: 16px; padding: 41px 32px; border-radius: 24px; }
    #agency .reason .experience-card { margin-top: 162px; }
    #agency .reason .card-title { gap: 8px; }
    #agency .reason .card-title h3 { font-size: 28px; }
    #agency .reason .card-title p, #agency .reason .reason-card .description { font-size: 17px; line-height: 26px; }
}
@media screen and (max-width:1024px) {
    #agency .reason { padding: 90px 0; }
    #agency .reason .container { grid-template-columns: 1fr; gap: 55px; }
    #agency .reason .title { margin-top: 0; text-align: center; }
    #agency .reason .content { gap: 25px; }
    #agency .reason .card-column { gap: 25px; }
    #agency .reason .reason-card { gap: 15px; padding: 37px 29px; border-radius: 22px; }
    #agency .reason .experience-card { align-self: center; margin-top: 0; }
    #agency .reason .card-title h3 { font-size: 26px; }
    #agency .reason .card-title p, #agency .reason .reason-card .description { font-size: 16px; line-height: 24px; }
}
@media screen and (max-width:768px) {
    #agency .reason { padding: 80px 0; }
    #agency .reason .container { gap: 50px; }
    #agency .reason .content { gap: 22px; }
    #agency .reason .card-column { gap: 22px; }
    #agency .reason .reason-card { padding: 33px 26px; border-radius: 20px; }
    #agency .reason .card-title h3 { font-size: 23px; }
    #agency .reason .card-title p, #agency .reason .reason-card .description { font-size: 15px; line-height: 22px; }
}
@media screen and (max-width:640px) {
    #agency .reason { padding: 70px 0; }
    #agency .reason .container { gap: 44px; }
    #agency .reason .content { grid-template-columns: 1fr; gap: 20px; }
    #agency .reason .card-column { gap: 20px; }
    #agency .reason .reason-card { padding: 30px 23px; border-radius: 18px; }
    #agency .reason .experience-card { align-self: stretch; }
    #agency .reason .card-title h3 { font-size: 21px; }
    #agency .reason .card-title p, #agency .reason .reason-card .description { font-size: 14px; line-height: 21px; }
}





/* 디지털 경험 */
#agency .experience { position: relative; padding: 144px 0 6px; background: #000; overflow: hidden; }
#agency .experience .container { position: relative; }
#agency .experience .title { position: relative; z-index: 3; color: #FFF; }
#agency .experience .title .eyebrow { color: #FFF; letter-spacing: -0.96px; }
#agency .experience .title h2 { color: #FFF; margin: 13px 0 0; }
#agency .experience .title h2 strong { display: inline-block; background-image: linear-gradient(90deg, #1E00FF 0%, #C72CFF 100%); background-position: center; background-repeat: no-repeat; background-size: 920px 100%; background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; }
#agency .experience .title .description { color: #FFF; margin: 34px 0 0; }
#agency .experience .content { position: relative; margin: -213px 0 0; }
#agency .experience .visual { position: relative; z-index: 1; display: block; width: 1588px; height: 1059px; max-width: none; margin: 0 0 0 6px; }
#agency .experience .experience-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 15px; width: 319px; padding: 56px 20px 56px 25px; border: 1px solid #47454F; border-radius: 23px; background: linear-gradient(180deg, #0C0B1B 0%, #07060E 100%); }
#agency .experience .experience-card.performance { top: 272px; left: 0; }
#agency .experience .experience-card.responsive { top: 690px; left: 0; }
#agency .experience .experience-card.scalability { top: 272px; right: 0; }
#agency .experience .experience-card.maintenance { top: 690px; right: 0; }
#agency .experience .experience-card .icon { display: block; flex: 0 0 auto; width: 74px; height: 71px; }
#agency .experience .experience-card .icon img { display: block; width: 74px; height: 71px; mix-blend-mode: screen; }
#agency .experience .card-text { display: flex; flex-direction: column; justify-content: center; gap: 15px; color: #D9D9D9; }
#agency .experience .card-text h3 { color: #D9D9D9; font-family: 'Pretendard'; font-size: 23px; font-style: normal; font-weight: 700; line-height: 24px; letter-spacing: -0.69px; }
#agency .experience .card-text p { color: #D9D9D9; font-family: 'Pretendard'; font-size: 19px; font-style: normal; font-weight: 300; line-height: 25px; letter-spacing: -0.57px; }
#agency .experience .connector { position: absolute; z-index: 5; display: block; width: 315px; height: 27px; max-width: none; }
#agency .experience .connector-left { left: 305px; }
#agency .experience .connector-right { right: 305px; transform: rotate(180deg); }
#agency .experience .connector.top { top: 351.5px; }
#agency .experience .connector.bottom { top: 769.5px; }

@media screen and (max-width:1600px) {
    #agency .experience { padding-top: 130px; }
    #agency .experience .title h2 { margin-top: 12px; }
    #agency .experience .title .description { margin-top: 31px; }
    #agency .experience .content { margin-top: -192px; }
    #agency .experience .visual { width: 100%; height: auto; margin-left: 0; }
    #agency .experience .experience-card { gap: 14px; width: 287px; padding: 50px 18px 50px 23px; border-radius: 21px; }
    #agency .experience .experience-card.performance, #agency .experience .experience-card.scalability { top: 24%; }
    #agency .experience .experience-card.responsive, #agency .experience .experience-card.maintenance { top: 63%; }
    #agency .experience .experience-card .icon, #agency .experience .experience-card .icon img { width: 67px; height: 64px; }
    #agency .experience .card-text { gap: 14px; }
    #agency .experience .card-text h3 { font-size: 21px; line-height: 22px; }
    #agency .experience .card-text p { font-size: 18px; line-height: 23px; }
    #agency .experience .connector { width: 19.7%; height: auto; }
    #agency .experience .connector-left { left: 19%; }
    #agency .experience .connector-right { right: 19%; }
    #agency .experience .connector.top { top: 32%; }
    #agency .experience .connector.bottom { top: 71%; }
}
@media screen and (max-width:1280px) {
    #agency .experience { padding-top: 117px; }
    #agency .experience .title h2 { margin-top: 11px; }
    #agency .experience .title .description { margin-top: 28px; }
    #agency .experience .content { margin-top: -150px; }
    #agency .experience .experience-card { gap: 13px; width: 258px; padding: 41px 16px 41px 20px; border-radius: 19px; }
    #agency .experience .experience-card .icon, #agency .experience .experience-card .icon img { width: 60px; height: 58px; }
    #agency .experience .card-text { gap: 12px; }
    #agency .experience .card-text h3 { font-size: 19px; line-height: 20px; }
    #agency .experience .card-text p { font-size: 16px; line-height: 21px; }
}
@media screen and (max-width:1024px) {
    #agency .experience { padding: 105px 0 90px; }
    #agency .experience .title h2 { margin-top: 10px; }
    #agency .experience .title .description { margin-top: 25px; }
    #agency .experience .content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 45px; }
    #agency .experience .visual { display: none; }
    #agency .experience .experience-card { position: static; width: 100%; padding: 37px 24px; }
    #agency .experience .experience-card .icon, #agency .experience .experience-card .icon img { width: 54px; height: 52px; }
    #agency .experience .card-text h3 { font-size: 18px; line-height: 19px; }
    #agency .experience .card-text p { font-size: 15px; line-height: 20px; }
    #agency .experience .connector { display: none; }
}
@media screen and (max-width:768px) {
    #agency .experience { padding: 95px 0 80px; }
    #agency .experience .title h2 { margin-top: 9px; }
    #agency .experience .title .description { margin-top: 23px; word-break: keep-all; }
    #agency .experience .content { gap: 18px; margin-top: 40px; }
    #agency .experience .experience-card { padding: 33px 21px; }
    #agency .experience .experience-card .icon, #agency .experience .experience-card .icon img { width: 49px; height: 47px; }
    #agency .experience .card-text h3 { font-size: 16px; line-height: 18px; }
    #agency .experience .card-text p { font-size: 14px; line-height: 19px; }
}
@media screen and (max-width:640px) {
    #agency .experience { padding: 85px 0 70px; }
    #agency .experience .title h2 { margin-top: 8px; }
    #agency .experience .title .description { margin-top: 20px; }
    #agency .experience .content { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
    #agency .experience .experience-card { padding: 30px 19px; }
    #agency .experience .experience-card .icon, #agency .experience .experience-card .icon img { width: 44px; height: 42px; }
    #agency .experience .card-text h3 { font-size: 15px; line-height: 17px; }
    #agency .experience .card-text p { font-size: 13px; line-height: 18px; }
}





/* 프로젝트 맞춤 제작 */
#agency .project { padding: 190px 0; background-color: #F4EDFF; background-image: url('../img/agency/project_bg.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; }
#agency .project .title .eyebrow { display: inline-block; background: linear-gradient(90deg, #8400FF 0%, #BF00FF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.48px; }
#agency .project .title h2 { color: #000; margin: 24px 0 0; }
#agency .project .content { display: flex; flex-direction: column; gap: 40px; margin: 104px 0 0; }
#agency .project .project-card { display: flex; align-items: center; gap: 40px; width: 100%; padding: 48px 80px; border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 40px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 8px 24px rgba(221, 213, 236, 0.2); overflow: hidden; }
#agency .project .project-card:first-child { background: rgba(255, 255, 255, 0.3); }
#agency .project .image { flex: 0 0 auto; width: 565px; height: 331px; border-radius: 30px; background: #FEFEFE; overflow: hidden; }
#agency .project .image img { display: block; width: 565px; height: 331px; }
#agency .project .card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
#agency .project .card-info h3 { background-image: linear-gradient(120deg, #9401E9 9.673%, #100183 92.662%); background-clip: text; -webkit-background-clip: text; color: transparent; font-family: 'Pretendard'; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.8px; }
#agency .project .card-info p { color: #000; font-family: 'Pretendard'; font-size: 24px; font-style: normal; font-weight: 400; line-height: 38px; }
#agency .project .card-info p strong { font-weight: 700; }

@media screen and (max-width:1600px) {
    #agency .project { padding: 171px 0; }
    #agency .project .title h2 { margin-top: 22px; }
    #agency .project .content { gap: 36px; margin-top: 94px; }
    #agency .project .project-card { gap: 36px; padding: 43px 72px; border-radius: 36px; }
    #agency .project .image { width: 508px; height: auto; aspect-ratio: 565 / 331; border-radius: 27px; }
    #agency .project .image img { width: 100%; height: 100%; object-fit: cover; }
    #agency .project .card-info { gap: 36px; }
    #agency .project .card-info h3 { font-size: 37px; }
    #agency .project .card-info p { font-size: 22px; line-height: 35px; }
}
@media screen and (max-width:1280px) {
    #agency .project { padding: 154px 0; }
    #agency .project .title h2 { margin-top: 20px; }
    #agency .project .content { gap: 32px; margin-top: 85px; }
    #agency .project .project-card { gap: 32px; padding: 39px 45px; border-radius: 32px; }
    #agency .project .image { width: 42%; border-radius: 24px; }
    #agency .project .card-info { gap: 32px; }
    #agency .project .card-info h3 { font-size: 33px; }
    #agency .project .card-info p { font-size: 19px; line-height: 31px; }
}
@media screen and (max-width:1024px) {
    #agency .project { padding: 139px 0; }
    #agency .project .title h2 { margin-top: 18px; }
    #agency .project .content { gap: 29px; margin-top: 76px; }
    #agency .project .project-card { gap: 29px; padding: 35px; border-radius: 29px; }
    #agency .project .image { width: 40%; border-radius: 22px; }
    #agency .project .card-info { gap: 29px; }
    #agency .project .card-info h3 { font-size: 30px; }
    #agency .project .card-info p { font-size: 17px; line-height: 28px; }
    #agency .project .card-info p br { display: none; }
}
@media screen and (max-width:768px) {
    #agency .project { padding: 118px 0; }
    #agency .project .title { text-align: center; }
    #agency .project .title h2 { margin-top: 16px; }
    #agency .project .content { gap: 26px; margin-top: 68px; }
    #agency .project .project-card { flex-direction: column; align-items: flex-start; gap: 26px; padding: 32px; border-radius: 26px; }
    #agency .project .image { width: 100%; border-radius: 20px; }
    #agency .project .card-info { gap: 26px; }
    #agency .project .card-info h3 { font-size: 27px; }
    #agency .project .card-info p { font-size: 15px; line-height: 25px; }
}
@media screen and (max-width:640px) {
    #agency .project { padding: 100px 0; }
    #agency .project .title h2 { margin-top: 14px; }
    #agency .project .content { gap: 23px; margin-top: 61px; }
    #agency .project .project-card { gap: 23px; padding: 28px 20px; border-radius: 23px; }
    #agency .project .image { border-radius: 18px; }
    #agency .project .card-info { gap: 23px; }
    #agency .project .card-info h3 { font-size: 24px; }
    #agency .project .card-info p { font-size: 13px; line-height: 22px; }
}





/* 제작 프로세스 */
#agency .process { padding: 190px 0; overflow: hidden; background-image: url('../img/agency/process_bg.png');}
#agency .process .container { position: relative; }
#agency .process .title { position: relative; z-index: 1; }
#agency .process .title h2 { color: #000; }
#agency .process .title h2 strong { display: inline-block; background-image: linear-gradient(90deg, #BD24FF 0%, #0067FF 100%); background-position: left top; background-repeat: no-repeat; background-size: 300px 100%; background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 800; }
#agency .process .content { position: relative; z-index: 1; margin: 124px 0 0; }
#agency .process .process-list { position: relative; display: grid; grid-template-columns: repeat(4, 310px); gap: 124px 57.5px; width: 1412.5px; margin: 0 auto; }
#agency .process .process-list::before { content: ''; position: absolute; z-index: 0; top: 149px; left: -115px; width: 1606px; height: 427px; background-image: url('../img/agency/process_line.svg'); background-position: center; background-repeat: no-repeat; background-size: 1606px 427px; pointer-events: none; }
#agency .process .process-list li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 30px; width: 310px; padding: 23px 0; border: 2px solid #E6DEFD; border-radius: 11px; background: linear-gradient(180deg, #FDFBFE 0%, #F9F9FD 100%); box-shadow: 0 7px 14.5px #E1DDEE; text-align: center; }
#agency .process .process-list li:not(:nth-child(4n))::after { content: ''; position: absolute; top: 50%; right: -50px; width: 43px; height: 57px; background-image: url('../img/agency/process_arrow.svg'); background-position: center; background-repeat: no-repeat; background-size: 43px 57px; transform: translateY(-50%); }
#agency .process .number { position: absolute; top: -42px; left: 50%; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #693CFF; color: #FFF; font-family: 'Pretendard'; font-size: 28px; font-style: normal; font-weight: 700; line-height: 42px; letter-spacing: -0.56px; transform: translateX(-50%); }
#agency .process .step-image { display: flex; align-items: flex-end; justify-content: center; width: 133px; height: 126px; }
#agency .process .step-image img { display: block; max-width: none; }
#agency .process .process-list li:nth-child(1) .step-image img { width: 127px; height: 100px; }
#agency .process .process-list li:nth-child(2) .step-image img { width: 105px; height: 112px; }
#agency .process .process-list li:nth-child(3) .step-image img { width: 103px; height: 107px; }
#agency .process .process-list li:nth-child(4) .step-image img { width: 85px; height: 109px; }
#agency .process .process-list li:nth-child(5) .step-image img { width: 133px; height: 110px; }
#agency .process .process-list li:nth-child(6) .step-image img { width: 121px; height: 106px; }
#agency .process .process-list li:nth-child(7) .step-image img { width: 121px; height: 112px; }
#agency .process .process-list li:nth-child(8) .step-image img { width: 111px; height: 126px; }
#agency .process .step-info { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#agency .process .step-info h3 { color: #5623FF; font-family: 'Pretendard'; font-size: 28px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.56px; }
#agency .process .step-info p { color: #222; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; letter-spacing: -0.36px; }

@media screen and (max-width:1600px) {
    #agency .process { padding: 171px 0; }
    #agency .process .content { margin-top: 112px; }
    #agency .process .process-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 112px 52px; width: calc(100% - 168px); }
    #agency .process .process-list::before { left: -7.2%; width: 114%; background-size: 100% 100%; }
    #agency .process .process-list li { gap: 27px; width: 100%; padding: 21px 0; }
    #agency .process .process-list li:not(:nth-child(4n))::after { right: -45px; width: 39px; height: 51px; background-size: 39px 51px; }
    #agency .process .number { top: -38px; width: 54px; height: 54px; font-size: 26px; line-height: 38px; }
    #agency .process .step-image { transform: scale(0.9); }
    #agency .process .step-info h3 { font-size: 26px; }
    #agency .process .step-info p { font-size: 17px; line-height: 24px; }
}
@media screen and (max-width:1280px) {
    #agency .process { padding: 154px 0; }
    #agency .process .content { margin-top: 101px; }
    #agency .process .process-list { gap: 101px 40px; width: calc(100% - 80px); }
    #agency .process .process-list::before { left: -4%; width: 108%; }
    #agency .process .process-list li { gap: 24px; padding: 19px 8px; }
    #agency .process .process-list li:not(:nth-child(4n))::after { right: -35px; width: 35px; height: 46px; background-size: 35px 46px; }
    #agency .process .number { top: -34px; width: 49px; height: 49px; font-size: 24px; line-height: 34px; }
    #agency .process .step-image { transform: scale(0.81); }
    #agency .process .step-info h3 { font-size: 23px; }
    #agency .process .step-info p { font-size: 16px; line-height: 22px; }
}
@media screen and (max-width:1024px) {
    #agency .process { padding: 139px 0; }
    #agency .process .content { margin-top: 91px; }
    #agency .process .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 55px; width: min(100%, 720px); }
    #agency .process .process-list::before { display: none; }
    #agency .process .process-list li { gap: 22px; padding: 25px 10px; }
    #agency .process .process-list li:not(:nth-child(4n))::after { display: none; }
    #agency .process .process-list li:nth-child(odd)::after { content: ''; position: absolute; top: 50%; right: -47px; display: block; width: 32px; height: 42px; background-image: url('../img/agency/process_arrow.svg'); background-position: center; background-repeat: no-repeat; background-size: 32px 42px; transform: translateY(-50%); }
    #agency .process .number { top: -31px; width: 45px; height: 45px; font-size: 22px; line-height: 31px; }
    #agency .process .step-image { transform: scale(0.73); }
    #agency .process .step-info h3 { font-size: 21px; }
    #agency .process .step-info p { font-size: 15px; line-height: 21px; }
}
@media screen and (max-width:768px) {
    #agency .process { padding: 118px 0; }
    #agency .process .content { margin-top: 82px; }
    #agency .process .process-list { gap: 72px 45px; width: min(100%, 620px); }
    #agency .process .process-list li { gap: 20px; padding: 23px 8px; }
    #agency .process .process-list li:nth-child(odd)::after { right: -39px; width: 29px; height: 38px; background-size: 29px 38px; }
    #agency .process .number { top: -28px; width: 41px; height: 41px; font-size: 20px; line-height: 28px; }
    #agency .process .step-image { transform: scale(0.66); margin: -12px 0; }
    #agency .process .step-info h3 { font-size: 19px; }
    #agency .process .step-info p { font-size: 14px; line-height: 20px; }
}
@media screen and (max-width:640px) {
    #agency .process { padding: 100px 0; }
    #agency .process .content { margin-top: 74px; }
    #agency .process .process-list { grid-template-columns: 1fr; gap: 58px; width: min(100%, 360px); }
    #agency .process .process-list li { gap: 18px; padding: 21px 8px; }
    #agency .process .process-list li:nth-child(odd)::after { display: none; }
    #agency .process .number { top: -25px; width: 37px; height: 37px; font-size: 18px; line-height: 25px; }
    #agency .process .step-image { transform: scale(0.6); margin: -18px 0; }
    #agency .process .step-info h3 { font-size: 17px; }
    #agency .process .step-info p { font-size: 13px; line-height: 19px; }
}





/* 포트폴리오 */
#agency .portfolio { position: relative; padding: 180px 0; background-color: #0B0B17; background-image: url('../img/agency/portfolio_bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
#agency .portfolio .title { color: #FFF; }
#agency .portfolio .title .eyebrow { color: #FFF; letter-spacing: -0.96px; }
#agency .portfolio .title h2 { display: inline-block; background-image: linear-gradient(90deg, #C88DFF 0%, #3EA2FF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; margin: 13px 0 0; }
#agency .portfolio .title .description { color: #E1E1E1; margin: 30px 0 0; }
#agency .portfolio .portfolio-tab { display: flex; align-items: center; width: 1129px; padding: 4px; margin: 44px auto 0; border-radius: 999px; background: #FFF; box-shadow: 0 7px 29px rgba(100, 100, 111, 0.2); overflow: hidden; }
#agency .portfolio .portfolio-tab button { display: flex; flex: 1 1 20%; align-items: center; justify-content: center; padding: 17px 29px; border-radius: 999px; color: #999; font-family: 'Pretendard'; font-size: 21px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.21px; white-space: nowrap; }
#agency .portfolio .portfolio-tab button.active { background: linear-gradient(104deg, #B376EF 6%, #7250FB 100%); color: #FFF; font-weight: 700; }
#agency .portfolio .content { position: relative; width: 1572px; padding: 0 0 75px; margin: 135px auto 0; }
#agency .portfolio .swiperPortfolio { overflow: hidden; }
#agency .portfolio .swiperPortfolio .swiper-slide { width: 790px; }
#agency .portfolio .swiperPortfolio .item { display: block; width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); overflow: hidden; }
#agency .portfolio .swiperPortfolio .item img { display: block; width: 100%; height: 100%; object-fit: cover; }
#agency .portfolio .swiperPortfolio .swiper-slide:not(.swiper-slide-active) .item { filter: brightness(0.45); }
#agency .portfolio .portfolio-prev, #agency .portfolio .portfolio-next { position: absolute; z-index: 5; top: 286px; width: 80px; height: 80px; }
#agency .portfolio .portfolio-prev { left: -130px; }
#agency .portfolio .portfolio-next { right: -130px; }
#agency .portfolio .portfolio-prev img, #agency .portfolio .portfolio-next img { display: block; width: 80px; height: 80px; }
#agency .portfolio .portfolio-next img { transform: scaleX(-1); }
#agency .portfolio .portfolio-pagination { position: absolute; z-index: 5; bottom: 0; left: 50%; width: auto; transform: translateX(-50%); }
#agency .portfolio .portfolio-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 6px; background: #6E6E79; opacity: 1; }
#agency .portfolio .portfolio-pagination .swiper-pagination-bullet-active { background: #784CFF; }
#agency .portfolio .portfolio-pagination .swiper-pagination-bullet-active-prev ,
#agency .portfolio .portfolio-pagination .swiper-pagination-bullet-active-next { transform: scale(1); }
#agency .portfolio .portfolio-pagination .swiper-pagination-bullet-active-prev-prev ,
#agency .portfolio .portfolio-pagination .swiper-pagination-bullet-active-next-next { transform: scale(1); }

@media screen and (max-width:1600px) {
    #agency .portfolio { padding: 162px 0; }
    #agency .portfolio .title h2 { margin-top: 12px; }
    #agency .portfolio .title .description { margin-top: 27px; }
    #agency .portfolio .portfolio-tab { width: 1016px; margin-top: 40px; }
    #agency .portfolio .portfolio-tab button { padding: 16px 27px; font-size: 19.5px; }
    #agency .portfolio .content { width: calc(100% - 180px); padding-bottom: 68px; margin-top: 122px; }
    #agency .portfolio .swiperPortfolio .swiper-slide { width: 711px; }
    #agency .portfolio .portfolio-prev, #agency .portfolio .portfolio-next { top: 257px; width: 72px; height: 72px; }
    #agency .portfolio .portfolio-prev { left: -90px; }
    #agency .portfolio .portfolio-next { right: -90px; }
    #agency .portfolio .portfolio-prev img, #agency .portfolio .portfolio-next img { width: 72px; height: 72px; }
}
@media screen and (max-width:1280px) {
    #agency .portfolio { padding: 146px 0; }
    #agency .portfolio .title h2 { margin-top: 11px; }
    #agency .portfolio .title .description { margin-top: 24px; }
    #agency .portfolio .portfolio-tab { width: 914px; margin-top: 36px; }
    #agency .portfolio .portfolio-tab button { padding: 15px 25px; font-size: 18px; }
    #agency .portfolio .content { width: calc(100% - 140px); padding-bottom: 61px; margin-top: 110px; }
    #agency .portfolio .swiperPortfolio .swiper-slide { width: 640px; }
    #agency .portfolio .portfolio-prev, #agency .portfolio .portfolio-next { top: 231px; width: 65px; height: 65px; }
    #agency .portfolio .portfolio-prev { left: -70px; }
    #agency .portfolio .portfolio-next { right: -70px; }
    #agency .portfolio .portfolio-prev img, #agency .portfolio .portfolio-next img { width: 65px; height: 65px; }
}
@media screen and (max-width:1024px) {
    #agency .portfolio { padding: 131px 0; }
    #agency .portfolio .title h2 { margin-top: 10px; }
    #agency .portfolio .title .description { margin-top: 22px; }
    #agency .portfolio .portfolio-tab { width: min(100%, 823px); margin-top: 32px; }
    #agency .portfolio .portfolio-tab button { padding: 14px 23px; font-size: 16.5px; }
    #agency .portfolio .content { width: 100%; padding-bottom: 55px; margin-top: 99px; }
    #agency .portfolio .swiperPortfolio .swiper-slide { width: 576px; }
    #agency .portfolio .portfolio-prev, #agency .portfolio .portfolio-next { top: 208px; width: 59px; height: 59px; display: none; }
    #agency .portfolio .portfolio-prev { left: 10px; }
    #agency .portfolio .portfolio-next { right: 10px; }
    #agency .portfolio .portfolio-prev img, #agency .portfolio .portfolio-next img { width: 59px; height: 59px; }
}
@media screen and (max-width:768px) {
    #agency .portfolio { padding: 111px 0; }
    #agency .portfolio .title h2 { margin-top: 9px; }
    #agency .portfolio .title .description { margin-top: 20px; word-break: keep-all; }
    #agency .portfolio .portfolio-tab { justify-content: flex-start; width: 100%; margin-top: 29px; overflow-x: auto; }
    #agency .portfolio .portfolio-tab::-webkit-scrollbar { display: none; }
    #agency .portfolio .portfolio-tab button { flex: 1 0 auto; padding: 13px 21px; font-size: 15px; }
    #agency .portfolio .content { padding-bottom: 50px; margin-top: 80px; }
    #agency .portfolio .swiperPortfolio .swiper-slide { width: min(78vw, 518px); }
    #agency .portfolio .portfolio-prev, #agency .portfolio .portfolio-next { top: 50%; width: 53px; height: 53px; transform: translateY(-50%); }
    #agency .portfolio .portfolio-prev { left: 5px; }
    #agency .portfolio .portfolio-next { right: 5px; }
    #agency .portfolio .portfolio-prev img, #agency .portfolio .portfolio-next img { width: 53px; height: 53px; }
}
@media screen and (max-width:640px) {
    #agency .portfolio { padding: 95px 0; }
    #agency .portfolio .title h2 { margin-top: 8px; }
    #agency .portfolio .title .description { margin-top: 18px; }
    #agency .portfolio .portfolio-tab { margin-top: 26px; }
    #agency .portfolio .portfolio-tab button { padding: 12px 19px; font-size: 13.5px; }
    #agency .portfolio .content { padding-bottom: 45px; margin-top: 65px; }
    #agency .portfolio .swiperPortfolio .swiper-slide { width: 82vw; }
    #agency .portfolio .portfolio-prev, #agency .portfolio .portfolio-next { width: 48px; height: 48px; }
    #agency .portfolio .portfolio-prev img, #agency .portfolio .portfolio-next img { width: 48px; height: 48px; }
    #agency .portfolio .portfolio-pagination .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 5px; }
}




/* 자주 묻는 질문 */
#agency .faq { position: relative; padding: 190px 0; background: #06103B; overflow: hidden; background-image: url('../img/agency/faq_bg.jpg'); }
#agency .faq .container { position: relative; z-index: 1; }
#agency .faq .title .eyebrow { display: inline-block; background: linear-gradient(90deg, #00FF90 0%, #0059FF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.48px; }
#agency .faq .title h2 { color: #FFF; margin: 24px 0 0; }
#agency .faq .content { display: flex; flex-direction: column; gap: 30px; margin: 91px 0 0; }
#agency .faq .faq-item { display: flex; align-items: center; width: 100%; padding: 34px 80px; border-radius: 40px; background: rgba(255, 255, 255, 0.1); color: #FFF; cursor: pointer; overflow: hidden; position: relative; }
#agency .faq .faq-item.is-open { align-items: flex-start; padding: 54px 80px; border: 5px solid transparent; background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(90deg, #01F894 0%, #0078FF 100%) border-box; color: #000; }
#agency .faq .faq-item:not(.is-open) { padding: 50px 80px; }
#agency .faq .question { flex: 1 1 auto; }
#agency .faq .question button { display: flex; align-items: center; justify-content: space-between; width: 100%; color: inherit; cursor: pointer; text-align: left; }
#agency .faq .question button img { display: block; width: 15px; height: 30px; margin: 0 7px 0 0; transform: rotate(90deg); display: none; position: absolute; top: 55px; right: 80px; }
#agency .faq .question-text { color: inherit; font-family: 'Pretendard'; font-size: 34px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.68px; }
#agency .faq .question-text strong { display: inline-block; color: inherit; font-weight: 700; margin: 0 12px 0 0; }
#agency .faq .answer { display: none; flex: 1 1 auto; min-width: 0; margin: 0 0 0 130px; color: #222; font-family: 'Pretendard'; font-size: 24px; font-style: normal; font-weight: 400; line-height: 38px; }
#agency .faq .faq-item.is-open .question { flex: 0 0 auto; }
#agency .faq .faq-item.is-open .question-text strong { color: #0199D4; }
#agency .faq .faq-item:not(.is-open) .answer p { display: none; }
#agency .faq .faq-item:not(.is-open) .question button img { display: block; }

@media screen and (max-width:1600px) {
    #agency .faq { padding: 160px 0; }
    #agency .faq .title h2 { margin-top: 20px; }
    #agency .faq .content { gap: 25px; margin-top: 76px; }
    #agency .faq .faq-item.is-open { padding: 45px 68px; }
    #agency .faq .faq-item:not(.is-open) { padding: 43px 68px; }
    #agency .faq .question-text { font-size: 29.5px; }
    #agency .faq .question button img { width: 14px; height: 28px; top: 46px; right: 68px; }
    #agency .faq .answer { margin-left: 105px; font-size: 21px; line-height: 33px; }
}
@media screen and (max-width:1280px) {
    #agency .faq { padding: 140px 0; }
    #agency .faq .title h2 { margin-top: 18px; }
    #agency .faq .content { gap: 22px; margin-top: 66px; }
    #agency .faq .faq-item { border-radius: 33px; }
    #agency .faq .faq-item.is-open { padding: 40px 53px; }
    #agency .faq .faq-item:not(.is-open) { padding: 38px 53px; }
    #agency .faq .question-text { font-size: 27px; }
    #agency .faq .question button img { width: 13px; height: 26px; top: 41px; right: 53px; }
    #agency .faq .answer { margin-left: 75px; font-size: 19px; line-height: 30px; }
}
@media screen and (max-width:1024px) {
    #agency .faq { padding: 120px 0; }
    #agency .faq .title h2 { margin-top: 16px; }
    #agency .faq .content { gap: 20px; margin-top: 58px; }
    #agency .faq .faq-item { border-radius: 30px; }
    #agency .faq .faq-item.is-open { flex-direction: column; gap: 23px; padding: 34px 42px; }
    #agency .faq .faq-item:not(.is-open) { padding: 32px 42px; }
    #agency .faq .question-text { font-size: 24px; }
    #agency .faq .question button img { width: 12px; height: 24px; top: 36px; right: 42px; }
    #agency .faq .answer { margin-left: 0; font-size: 17px; line-height: 27px; }
}
@media screen and (max-width:768px) {
    #agency .faq { padding: 100px 0; }
    #agency .faq .title { text-align: center; }
    #agency .faq .title h2 { margin-top: 14px; }
    #agency .faq .content { gap: 18px; margin-top: 50px; }
    #agency .faq .faq-item { border-radius: 27px; }
    #agency .faq .faq-item.is-open { gap: 21px; padding: 28px 33px; }
    #agency .faq .faq-item:not(.is-open) { padding: 26px 33px; }
    #agency .faq .faq-item.is-open .question { width: 100%; }
    #agency .faq .question-text { font-size: 21px; }
    #agency .faq .question button img { width: 11px; height: 22px; top: 28px; right: 33px; }
    #agency .faq .answer { font-size: 15px; line-height: 24px; }
}
@media screen and (max-width:640px) {
    #agency .faq { padding: 85px 0; }
    #agency .faq .title h2 { margin-top: 12px; }
    #agency .faq .content { gap: 16px; margin-top: 44px; }
    #agency .faq .faq-item { border-radius: 24px; }
    #agency .faq .faq-item.is-open { gap: 19px; padding: 24px 21px; border-width: 3px; }
    #agency .faq .faq-item:not(.is-open) { padding: 23px 21px; }
    #agency .faq .question-text { font-size: 18px; line-height: 1.4; }
    #agency .faq .question-text strong { margin-right: 8px; }
    #agency .faq .question button img { width: 10px; height: 20px; top: 26px; right: 21px; }
    #agency .faq .answer { font-size: 13.5px; line-height: 22px; }
    #agency .faq .answer br { display: none; }
    #agency .faq .question-text, #agency .faq .answer, #agency .project .card-info p { overflow-wrap: break-word; }
}





/* 제작 시작 */
#agency .start { padding: 183px 0; background-color: #FFF; background-image: url('../img/agency/start_bg.png'); background-position: center; background-repeat: no-repeat; }
#agency .start .container { display: flex; flex-direction: column; align-items: center; gap: 80px; }
#agency .start .title { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
#agency .start .title .eyebrow { color: #7F40FF; font-weight: 400; letter-spacing: 8.64px; text-transform: uppercase; }
#agency .start .title .line { display: block; width: 60px; height: 2px; background: #7F40FF; }
#agency .start .title h2 { color: #000; letter-spacing: -2.4px; line-height: 143%; }
#agency .start .title h2 strong { display: block; background: linear-gradient(90deg, #901CFC 0%, #4B7EF2 100%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 80px; font-weight: 800; }
#agency .start .title .description { color: #6E7287; font-size: 32px; font-weight: 400; line-height: normal; letter-spacing: -1.28px; }
#agency .start .content { display: flex; justify-content: center; }
#agency .start .inquiry-button { display: flex; align-items: center; justify-content: center; gap: 42px; width: 420px; padding: 25px 0; border-radius: 999px; background: linear-gradient(107deg, #AF6CFF 5.675%, #5D68F3 100.22%); box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.25), 0 34px 67px #E5D9FF; color: #FFF; font-family: 'Pretendard'; font-size: 31px; font-style: normal; font-weight: 500; line-height: 35px; letter-spacing: -1.24px; }
#agency .start .inquiry-button img { display: block; width: 60px; height: 60px; }

@media screen and (max-width:1600px) {
    #agency .start { padding: 155px 0; }
    #agency .start .container { gap: 66px; }
    #agency .start .title { gap: 21px; }
    #agency .start .title .eyebrow { letter-spacing: 7.4px; }
    #agency .start .title .line { width: 51px; }
    #agency .start .title h2 strong { font-size: 62px; }
    #agency .start .title .description { font-size: 27px; }
    #agency .start .inquiry-button { gap: 34px; width: 355px; padding: 22px 0; font-size: 27px; line-height: 30px; }
    #agency .start .inquiry-button img { width: 51px; height: 51px; }
}
@media screen and (max-width:1280px) {
    #agency .start { padding: 135px 0; }
    #agency .start .container { gap: 59px; }
    #agency .start .title { gap: 19px; }
    #agency .start .title .eyebrow { letter-spacing: 6.6px; }
    #agency .start .title .line { width: 46px; }
    #agency .start .title h2 strong { font-size: 56px; }
    #agency .start .title .description { font-size: 24px; }
    #agency .start .inquiry-button { gap: 31px; width: 320px; padding: 20px 0; font-size: 24px; line-height: 27px; }
    #agency .start .inquiry-button img { width: 46px; height: 46px; }
}
@media screen and (max-width:1024px) {
    #agency .start { padding: 118px 0; }
    #agency .start .container { gap: 53px; }
    #agency .start .title { gap: 17px; }
    #agency .start .title .eyebrow { letter-spacing: 5.9px; }
    #agency .start .title .line { width: 41px; }
    #agency .start .title h2 strong { font-size: 50px; }
    #agency .start .title .description { font-size: 21px; }
    #agency .start .inquiry-button { gap: 28px; width: 288px; padding: 18px 0; font-size: 21px; line-height: 24px; }
    #agency .start .inquiry-button img { width: 41px; height: 41px; }
}
@media screen and (max-width:768px) {
    #agency .start { padding: 100px 0; }
    #agency .start .container { gap: 47px; }
    #agency .start .title { gap: 15px; }
    #agency .start .title .eyebrow { letter-spacing: 5.3px; }
    #agency .start .title .line { width: 37px; }
    #agency .start .title h2 strong { font-size: 43px; }
    #agency .start .title .description { font-size: 19px; }
    #agency .start .inquiry-button { gap: 25px; width: 258px; padding: 16px 0; font-size: 19px; line-height: 22px; }
    #agency .start .inquiry-button img { width: 37px; height: 37px; }
}
@media screen and (max-width:640px) {
    #agency .start { padding: 85px 0; }
    #agency .start .container { gap: 42px; }
    #agency .start .title { gap: 13px; }
    #agency .start .title .eyebrow { letter-spacing: 4.6px; }
    #agency .start .title .line { width: 34px; }
    #agency .start .title h2 { letter-spacing: -1.5px; }
    #agency .start .title h2 strong { font-size: 38px; }
    #agency .start .title .description { font-size: 16px; }
    #agency .start .inquiry-button { gap: 22px; width: min(100%, 235px); padding: 14px 22px; font-size: 16px; line-height: 20px; }
    #agency .start .inquiry-button img { width: 34px; height: 34px; }
}