@charset "utf-8";

#inc04{padding:10% 0;background:#fff}
#inc04 .tit{text-align:center}
#inc04 h2{font-size:40px;font-weight:700;color:#111}

#inc04 .move_txt{overflow:hidden;padding:100px 0}
#inc04 .move_txt ul{font-size:90px;font-weight:200;color:#111;line-height:1.3;opacity:7%;white-space:nowrap}
#inc04 .move_txt ul li{display:inline;width:100%;margin:0 20px}

#inc04 .prg{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;color:#fff}
#inc04 .prg li{overflow:hidden;border-radius:20px}
#inc04 .prg li a{position:relative;background-image:url(./img/bg01.png);background-size:cover;background-repeat:no-repeat}
#inc04 .prg li a:after{position:absolute;content:'';bottom:0;left:0;width:100%;height:0;background:#111;transition:height .3s}
#inc04 .prg li:nth-child(2) a{background-image:url(./img/bg02.jpg)}
#inc04 .prg li:nth-child(3) a{background-image:url(./img/bg03.jpg)}
#inc04 .prg li a{display:flex;flex-direction:column;justify-content:space-between;height:480px;padding:50px;color:#fff}
#inc04 .prg a>span{position:relative;z-index:10;font-size:15px;font-family:var(--e-font)}
#inc04 .prg div{position:relative;z-index:10;transform:translateY(50px);transition:all .3s}
#inc04 .prg dt{margin-bottom:20px;font-size:22px;font-weight:700}
#inc04 .prg dd{margin-bottom:20px;opacity:.5;white-space:pre-line}
#inc04 .prg div span{opacity:0;display:flex;justify-content:center;align-items:center;width:60px;height:60px;border-radius:50px;background:rgba(255,255,255,.2)}

#inc04 .count{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;width:50%;margin:100px auto;text-align:center}
#inc04 .count dt{font-size:22px;font-weight:700;color:#aaa}
#inc04 .count dd{font-size:40px;color:#111;font-family:var(--e-font)}

#inc04 .link{display:flex;justify-content:center;gap:30px}
#inc04 .link a{display:flex;justify-content:center;align-items:center;width:300px;height:75px;border-radius:50px;font-size:20px;font-weight:700;box-shadow:0px 0px 15px 5px rgba(0, 0, 0, 5%);transition:all .3s}

#inc04 .link a:hover{color:#fff;background:#111}
#inc04 .prg li:hover a:after{height:100%}
#inc04 .prg li:hover div{transform:translateY(0)}
#inc04 .prg li:hover div span{opacity:1}

#inc04 .move_txt .top{animation:textloop_left 20s infinite linear}
#inc04 .move_txt .btm{animation:textloop_right 20s infinite linear}

@keyframes textloop_left {0% {transform:translateX(0)} 100% {transform:translateX(-50%)}}
@keyframes textloop_right {0% {transform:translateX(-50%)} 100% {transform:translateX(0%)}}

/* 반응형 [s] */
@media (max-width:1380px){
#inc04 h2{font-size:35px}
#inc04 .move_txt ul{font-size:80px}
#inc04 .prg li a{padding:40px}
#inc04 .prg dt{font-size:20px}
#inc04 .count dt{font-size:20px}
#inc04 .count dd{font-size:38px}
#inc04 .link a{width:270px;height:70px;font-size:18px}
}
@media (max-width:1024px){
#inc04{padding:100px 0}
#inc04 .tit{margin:auto;width:95%}
#inc04 h2{font-size:30px}
#inc04 .move_txt{padding:70px 0}
#inc04 .move_txt ul{font-size:60px}
#inc04 .move_txt ul li{margin:0 15px}
#inc04 .prg{gap:15px}
#inc04 .prg li a{padding:30px;height:440px;background-position:center;background-size:cover}
#inc04 .prg a>span{font-size:14px}
#inc04 .prg dt{margin-bottom:15px;font-size:18px}
#inc04 .prg dd{white-space:normal}
#inc04 .prg div span{width:55px;height:55px}
#inc04 .prg div span svg{width:21px}
#inc04 .count{width:80%}
#inc04 .count dt{font-size:18px}
#inc04 .count dd{font-size:34px}
#inc04 .link a{width:240px;height:66px;font-size:16px}
}
@media (max-width:768px){
#inc04{padding:90px 0}
#inc04 h2{font-size:26px}
#inc04 .move_txt{padding:50px 0}
#inc04 .move_txt ul{font-size:45px}
#inc04 .move_txt ul li{margin:0 10px}
#inc04 .prg{display:flex;flex-wrap:wrap;gap:12px}
#inc04 .prg li{width:100%}
#inc04 .prg li:nth-child(-n+2){width:calc(50% - 6px)}
#inc04 .prg li a{padding:22px 18px;height:360px}
#inc04 .prg dt{margin-bottom:10px;font-size:17px}
#inc04 .prg div span{width:50px;height:50px}
#inc04 .prg div span svg{width:19px}
#inc04 .count{margin:90px auto;width:90%}
#inc04 .count dt{font-size:16px}
#inc04 .count dd{font-size:30px}
#inc04 .link a{width:200px;height:56px;font-size:15px}
}
@media (max-width:480px){
#inc04{padding:80px 0}
#inc04 h2{font-size:22px}
#inc04 .prg{flex-direction:column;gap:20px}
#inc04 .prg dt{font-size:16px}
#inc04 .move_txt{padding:35px 0}
#inc04 .move_txt ul{font-size:32px}
#inc04 .move_txt ul li{margin:0 5px}
#inc04 .prg li:nth-child(-n+2){width:100%}
#inc04 .prg li a{justify-content:space-evenly;padding:20px 2.5%;height:280px;text-align:center}
#inc04 .prg li a:after{display:none}
#inc04 .prg li div{display:flex;flex-direction:column;align-items:center;transform:translateX(0px)}
#inc04 .prg a>span{font-size:13px}
#inc04 .prg div span{opacity:1 !important;width:47px;height:47px}
#inc04 .prg div span svg{width:17px}
#inc04 .count{gap:12px;margin:60px auto;width:95%}
#inc04 .count dt{font-size:14px}
#inc04 .count dd{font-size:23px}
#inc04 .link{gap:20px}
#inc04 .link li{width:calc(50% - 20px)}
#inc04 .link a{width:100%;height:50px;font-size:14px}
}
@media (max-width:380px){
#inc04{padding:70px 0}
#inc04 h2{font-size:19px}
#inc04 .move_txt{padding:30px 0}
#inc04 .move_txt ul{font-size:25px}
#inc04 .prg{gap:15px}
#inc04 .prg a>span{font-size:12px}
#inc04 .prg dt{margin-bottom:4px;font-size:16px}
#inc04 .prg div span{width:42px;height:42px}
#inc04 .prg li a{padding:15px 2.5%;height:250px}
#inc04 .count{gap:8px;margin:50px auto}
#inc04 .count dt{font-size:13px}
#inc04 .count dd{font-size:20px}
#inc04 .link a{height:48px;font-size:13px}
#inc04 .link li{width:calc(50% - 30px)}
}
/* 반응형 [e] */