<style type="text/css"> .univGuide_20230810 .topImg { position:relative; background:#a4c9f6 url(https://s3.unistudy.co.kr/images/pc/guide/46_departmentGuide_02/main.png) no-repeat; width:840px; height:900px; overflow:hidden; } .univGuide_20230810 .topImg li, .univGuide_20230810 .topImg p { position:absolute; } .univGuide_20230810 .topTxt li:first-child { top:80px; left:155px; width:557px; height:42px; background:url(https://s3.unistudy.co.kr/images/pc/guide/46_departmentGuide_02/topTxt_bg.png) no-repeat; animation:fadeIn_up .5s ease-out both; } .univGuide_20230810 .topTxt li:first-child p { left:88px; top:11px; height:26px; width:0; animation:line .7s .5s cubic-bezier(0.25, 0.45, 0.45, 0.95) both; overflow:hidden; } .univGuide_20230810 .topTxt li:nth-child(2) { left:150px; top:174px; animation:fadeIn_up .5s 1.5s ease-out both; } .univGuide_20230810 .topTxt li:nth-child(3) { left:150px; top:250px; animation:fadeIn_up .5s 1.8s ease-out both; } .univGuide_20230810 .category li{ left:250px; top:375px; animation:fadeIn_up .5s 2.2s ease-out both; } .univGuide_20230810 .con04 { background: #dcf2e0; width:840px; height:800px; } .univGuide_20230810 .con04 .player { justify-content: center; display:flex; flex-wrap:wrap; gap:16px; } .univGuide_20230810 .con04 .player li > a:before {content:""; display:block; position:absolute; width:346px; height:197px; background:url(https://s3.unistudy.co.kr/images/pc/guide/46_departmentGuide_02/con04_hover.png) no-repeat; transition:all .3s; opacity:0;} .univGuide_20230810 .con04 .player li > a:hover:before { opacity:1;} .univGuide_20230810 .con04 .player li:first-child { padding-top: 0;} .univGuide_20230810 .con04 .player li:nth-child(2) {padding-top: 0; } .univGuide_20230810 .info { background:#ecebeb url(https://s3.unistudy.co.kr/images/pc/guide/46_departmentGuide_02/department_info.png) no-repeat; width: 840px; height: 440px; position: relative;} .univGuide_20230810 .info ul { position: absolute; top: 190px; left:80px; } .univGuide_20230810 .info li { background-color: #fff; width: 330px; height: 170px; border-radius: 8px; float: left; margin-right: 20px; box-shadow: 3px 3px 8px rgba(0,0,0,0.2); } .univGuide_20230810 .info p { font-size: 30px; font-weight: bold; padding:40px 0 0 0; text-align:center; } .univGuide_20230810 .info li span { background: #3399FF; width: 280px; height: 50px; border-radius: 50px; display: block; transition:all .3s; margin: 20px auto 0;} .univGuide_20230810 .info li span:hover { background:#04498e; } .univGuide_20230810 .con05 { background: #15192a; width: 840px; height: 730px;} .univGuide_20230810 .btn_wrap { padding-left: 65px;} .univGuide_20230810 .btn_wrap li { width: 700px; height: 60px; display:block; background:#fff; border-radius:30px; transition:all .3s; margin-top: 25px; } .univGuide_20230810 .btn_wrap li:hover { background: #FDFFAE;} .univGuide_20230810 .btn_wrap li:first-child { margin: 0;} @keyframes line { 0% { width:0; } 100% { width:403px; } } @keyframes fadeIn { 0% { opacity:0; } 40% { opacity:1; } 70% { opacity:1; } 80% { opacity:0; } 100% { opacity:0; } } @keyframes fadeIn_up { 0% { opacity:0; transform: translateY(20%); } 100% { opacity:1; transform: translateY(0); } } @media all and (max-width:767px) { .univGuide_20230810 .topImg { width:100%; background-size:100% auto; height:95vw; } .univGuide_20230810 img { max-width:100%; height:auto; } .univGuide_20230810 .topTxt li:first-child { width:80%; left:10%; top:35px; background-size:100% auto; } .univGuide_20230810 .topTxt li:first-child p { width:80%; left:8%; top:5px; } .univGuide_20230810 .topTxt li:nth-child(2) { width:60%; left:20%; top:20%; } .univGuide_20230810 .topTxt li:nth-child(3) { width:70%; left:15%; top:28%; } .univGuide_20230810 .category li { left:31%; top:44%; width:40%; } .univGuide_20230810 .con04 { width:100%; height:90vw; } .univGuide_20230810 .con04 .player li { width:40%; } .univGuide_20230810 .info { width:100%; background-size:100% auto; height:50vw; } .univGuide_20230810 .info li { width:40%; height:auto; padding-bottom:10px; } .univGuide_20230810 .info li span { width:80%; height:23px; margin-top:5px; } .univGuide_20230810 .con05 { width:100%; height:88vw; } .univGuide_20230810 .btn_wrap li { width:95%; height:32px; padding-top:3px; margin-top:10px; } .univGuide_20230810 .btn_wrap { padding-left:20px; } .univGuide_20230810 .info ul { left:10%; top:40%; width:100%; } .univGuide_20230810 .info p { font-size:14px; padding-top:10px; } .univGuide_20230810 .con04 .player li > a:before { display:none; } .univGuide_20230810 .info a img { display:none; } .univGuide_20230810 .info a { position:relative; display:block; padding:3px 0 4px; } .univGuide_20230810 .info a:after { display:block; width:100%; position:absolute; left:0; content:"더 알아보기"; font-size:13px;color:#fff; text-align:center;} @keyframes line { 0% { width:0; } 100% { width:85%; } } } </style>