body { background-color: #f5f4f2; overflow-x: hidden; overflow-y: auto; } #allWrap { position: relative; overflow: hidden; } /* 포인트 컬러 */ .text_b { color: #0c35e9; } .bg_b { background-color: #2c7bf2; } .text_g { color: #0c35e9; } .bg_g { background-color: #02f8b0; } .text_p { color: #050170; } .bg_p { background-color: #a27fff; } .text_o { color: #fd7d45; } /* Splitting 애니메이션 */ .aosHid { overflow: hidden; } .spritting .char { display:inline-block; opacity:0; animation: text-active-animation 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.05s * var(--char-index)); } @keyframes text-active-animation { from { opacity:0; transform: translateY(50%); } to { opacity:1; transform: translateY(0); } } /* ---------------------------------------------------- section 01 : visual ---------------------------------------------------- */ #visual { width: 98%; max-width: 1880px; height: 620px; background: url('/images/main/visual_260722.png') no-repeat center; background-size: cover; border-radius: 50px; margin: 20px auto auto auto; position: relative; } /* 비주얼 라운드 관련 */ #visual::before { content: ''; width: 518px; height: 147px; background: url('/images/main/visual_bf.png') no-repeat 0 0; background-size: cover; position: absolute; left: 0; top: -1px; } #visual::after { content: ''; width: 150px; height: 82px; transform: skew(-317deg) translateX(5%); z-index: 1; position: absolute; right: -30px; top: 0; background-color: #f5f4f2; border-radius: 0 0 0 18px; } #visual .vMore_btn::before { content: ''; width: 179px; height: 163px; background: url('/images/main/vMore_bf.png') no-repeat 0 0; background-size: cover; position: absolute; right: 95%; bottom: -1px; } #visual .vMore_btn::after { content: ''; width: 7rem; height: 7rem; border-radius: 0 0 50px 0; box-shadow: 2rem 2rem 0 0 #f5f4f2; position: absolute; right: 0; top: -7rem; } /* 비주얼 타이틀 */ #visual .vText { padding: 0 90px; position: absolute; bottom: 80px; display: flex; gap: 305px; } #visual .vText .vMain_txt p { color: #fff; font-size: 30px; padding-bottom: 30px; line-height: 1; } #visual .vText .vMain_txt h1 { color: #fff; font-size: 62px; line-height: 1.1; } #visual .vText .vMain_txt h1 .point_c { color: #35ffe5; } /* 비주얼 서브타이틀 */ #visual .vText .vSub_txt .vTxt_wrap { position: relative; } #visual .vText .vSub_txt .vTxt_wrap::before { content: ''; width: 1px; height: calc(100% - 16px); background-color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #visual .vText .vSub_txt .vTxt_wrap p { color: #fff; font-size: 23px; position: relative; padding-left: 24px; } /* 비주얼 학과버튼 */ #visual .vMore_btn { display: inline-flex; gap: 20px; position: absolute; right: 0; bottom: 0; background-color: #f5f4f2; padding: 20px 0 0 20px; border-radius: 50px 0 0 0; } #visual .vMore_btn li { width: 342px; height: 145px; border-radius: 25px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } #visual .vMore_btn li a { display: flex; justify-content: center; padding: 0px 30px; width: 338px; height: 141px; border-radius: 25px; background-color: #ccc; flex-direction: column; color: #222; font-size: 22px; font-weight: 700; transition: all .2s ease; } #visual .vMore_btn li a span { font-size: 16px; font-weight: 500; margin-top: 8px;} #visual .vMore_btn li a .vicon { display: flex; justify-content: end; } #visual .vMore_btn li a .vicon img { display: block; height: 49px; } /* 비주얼 학과버튼 컬러 */ /* #visual .vMore_btn li.vmb01 { background: linear-gradient(45deg, #13273a, #13273a, #13273a, #13273a, #215295); } */ #visual .vMore_btn li.vmb01 a { background: rgba(20, 134, 246, .1); } /* #visual .vMore_btn li.vmb02 { background: linear-gradient(30deg, #093939, #093939, #093939, #093939, #069170); } */ #visual .vMore_btn li.vmb02 a { background: rgba(12, 53, 233, .1); } /* #visual .vMore_btn li.vmb03 { background: linear-gradient(30deg, #242b4c, #242b4c, #242b4c, #242b4c, #5b509a); } #visual .vMore_btn li.vmb03 a { background: radial-gradient(circle at right top,#2a2f53,#111e30,#111e30,#111e30); } */ #visual .vMore_btn li.vmb03 a { background: rgba(5, 10, 233, .1); } /* 비주얼 모션 관련 */ #visual .vMain_txt { opacity: 0; filter: blur(5px); transform: translateX(-40px); animation: vSubtxt 1s ease forwards; } #visual .vSub_txt { opacity: 0; filter: blur(5px); transform: translateX(-40px); animation: vSubtxt 1s ease .3s forwards; } @keyframes vSubtxt { 0% { opacity: 0; filter: blur(5px); transform: translateX(-40px); } 100% { opacity: 1; filter: blur(0px); transform: translateX(0px); } } #visual .vMore_btn li.vmb01 a:hover { box-shadow: 0 0 10px rgba(69, 197, 253,.5); } #visual .vMore_btn li.vmb02 a:hover { box-shadow: 0 0 10px rgba(162, 127, 255,.5); } #visual .vMore_btn li a:hover .vicon img { animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @keyframes rotate-vert-center { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } /* ---------------------------------------------------- section 02 : intro ---------------------------------------------------- */ #intro { padding: 200px 20px 175px 20px; position: relative; } #intro::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } /* 수치화 */ #intro .ani_txt { margin-bottom: 50px; } #intro .ani_txt h2.txt { width: 100%; font-size: 34px; line-height: 1.3; color: #222; font-weight: 700; text-align: center; position: relative; background: linear-gradient(to right, #fff, #fff) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s; } #intro .num_box_wr { display: flex; gap: 22px; justify-content: space-between; width: 100%; max-width: 1070px; margin: 0 auto; } #intro .num_box_wr .num_box { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 40px; background-color: rgba(255, 255, 255, .5); border-radius: 25px; padding: 50px 0;} #intro .num_box_wr .num_box::before { content:''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 2px; height: 100%; background: #fff; opacity: .1; } #intro .num_box_wr .num_box:first-child::before { display: none; } #intro .num_box_wr .num_box p.tit { position: relative; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 23px; letter-spacing: -0.5px; word-break: keep-all; } #intro .num_box_wr .num_box .num_wr { position: relative; width: 100%; z-index: 1; } #intro .num_box_wr .num_box .num_wr .num_txt { display: flex; align-items: flex-end; justify-content: center; } #intro .num_box_wr .num_box .num_wr h3.num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 74px; text-align: center; color: #222; } #intro .num_box_wr .num_box .num_wr span { margin-left: 10px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 74px; color: #222; } @media (max-width: 1600px) { #intro { padding: 70px 0; } #intro .num_box_wr .num_box { padding: 0 20px; } #intro .num_box_wr .num_box p.tit { height: 40px; margin-bottom: 30px; font-size: 20px; } #intro .num_box_wr .num_box p.tit::before { top: 6px; } #intro .num_box_wr .num_box .num_wr h3.num { font-size: 70px; } } /* ---------------------------------------------------- section 03 : latest ---------------------------------------------------- */ #latest { width: 98%; background-color: #fff; border-radius: 30px 30px 0 30px; margin: auto; overflow: hidden; margin: 50px 0; } #latest h3 { font-size: 30px; font-weight: 700;} .la_tit {display: flex; align-items: center; margin-bottom: 54px; width: 100%; gap: 30px;} .la_tit2 {margin-bottom: 33px;} .la_tit .view_more {font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: #999; display: flex; align-items: center;} .la_tit .view_more i {display: inline-block; font-weight: 400; font-size: 18px; color: #999; margin-left: 3px; transition: transform 0.3s ease;} .la_tit .view_more:hover {color: #050170;} .la_tit .view_more:hover i {transform: rotate(180deg); color: #050170;} #latest .la_tit h3 {margin-bottom: 0;} #latest .la_tit .slide_btn {display: flex; margin-left: auto;} #latest .la_tit button[type=button] {width: 50px; height: 50px; border: none;display: flex; align-items: center; justify-content: center; background-color: inherit; color: #cdcdcd; justify-self: end;} #latest .la_tit button[type=button] i {font-size: 50px; line-height: 1; display: block;} #latest .la_tit button[type=button] .ri-arrow-right-s-line {color: #050170;} #latest .lflex01 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 35px 20px; padding-bottom: 0; } #latest .lflex02 { margin-top: 20px; display: flex; gap: 20px; padding-left: 20px; padding-bottom: 20px; position: relative; } #latest .la_box { position: relative; padding: 35px 40px; border-radius: 30px 0 30px 30px; padding-bottom: 20px; } /* #latest .la_box::before, #latest .la_box::after { content: ''; width: 65px; height: 65px; border-radius: 0 20px 0 0; box-shadow: 1rem -1rem 0 0 #fff; position: absolute; } #latest .la_box::before { top: 0; right: 75px; } */ #latest .la_box::after { top: 65px; right: 0; } #latest .la_box .la_more { position: absolute; right: 0; top: 0; width: 75px; height: 65px; background-color: #fff; border-radius: 0 0 0 20px; padding: 11px 0 0 11px; z-index: 2; } #latest .la_box .la_more span { display: block; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all .3s ease; } #latest .la_box .la_more:hover span { transform: rotate(180deg); } #latest .la_box .la_more:hover .bg_g { background-color: #29e0a9; } #latest .la_box .la_more:hover .bg_b { background-color: #3eb0e0; } #latest .la_box .la_more:hover .bg_p { background-color: #8c6edd; } /* 공지사항 */ /* .notice { background-color: #091925; } */ .notice h3 { color: #222; margin-bottom: 55px; } .notice .notice_wrap { display: flex; gap: 50px; } .notice .notice_wrap li { position: relative; } .notice .notice_wrap li:nth-child(2)::before { content: ''; width: 1px; height: 130%; background-color: #fff; opacity: .1; position: absolute; top: 50%; left: -25px; transform: translateY(-50%); } .notice .notice_wrap li a { display: block; } .notice .notice_wrap li a .n_top { display: flex; align-items: center; margin-bottom: 85px; gap: 20px; } .notice .notice_wrap li a .n_top .nDate { display: inline-flex; flex-direction: column; background-color: #050170; border-radius: 9px; padding: 10px; line-height: 1; transition: all .3s ease; } .notice .notice_wrap li a .n_top .nDate span { font-size: 43.5px; font-weight: 700; text-align: center; color: #fff; } .notice .notice_wrap li a .n_top .nDate p { font-size: 14.5px; color: #fff; } .notice .notice_wrap li a .n_top .ntit { color: #222; font-weight: 700; font-size: 20px; line-height: 1.2; width: calc(100% - 105px); transition: all .3s ease; } .notice .notice_wrap li a .n_bot p { color: #999; font-size: 15px; line-height: 1.2; font-weight: 500; transition: all .3s ease; } .notice .notice_wrap li:hover a .n_top .ntit, .notice .notice_wrap li:hover a .n_top .nDate, .notice .notice_wrap li:hover a .n_bot p { opacity: .5; } /* 자료실 */ .resources { background-color: #fff; } .resources .la_more i { color: #fff; } .resources .resources_wrap li:first-of-type { margin-bottom: 15px; } .resources .resources_wrap a { display: flex; flex-direction: column; gap: 5px; padding: 20px; background-color: #f9f9f9; border-radius: 12px; } .resources .resources_wrap .rDate { font-size: 16px; font-weight: 600; transition: all .3s ease; } .resources .resources_wrap .rTit { font-size: 22px; font-weight: 700; transition: all .3s ease; } .resources .resources_wrap .rStit { font-size: 15px; color: #999; font-weight: 500; transition: all .3s ease; } .resources .resources_wrap a:hover .rDate, .resources .resources_wrap a:hover .rTit, .resources .resources_wrap a:hover .rStit { opacity: .5; } /* 연구성과 */ .achive { background-color: #fff; width: calc(100% - 714px); } .achive .img_wrap { display: flex; width: 100%; justify-content: space-between; } .achive .img_wrap ul { width: calc(100% - 505px); display: flex; flex-direction: column; gap: 12px; justify-content: space-between; } .achive .img_wrap ul li a { display: block; position: relative; padding: 22.3px; background-color: #fff; border-radius: 12px; } .achive .img_wrap ul li a .aTit { font-size: 18px; font-weight: 600; transition: all .3s ease; } .achive .img_wrap ul li a .aStit { font-size: 15px; font-weight: 500; color: #999; transition: all .3s ease; } .achive .img_wrap ul li a span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: #eee; position: absolute; top: 10px; right: 10px; transition: .2s ease; } .achive .img_wrap ul li a span i { color: #bbb; font-size: 16px; transition: .2s ease; } .achive .img_wrap .img_box { max-width: 480px; height: 307px; background-color: #fff; width: 485px; overflow: hidden; border-radius: 16px; } .achive .img_wrap .img_box img { display: block; max-width: 100%; height: 100%; object-fit: cover; } .achive .img_wrap ul li a:hover { background-color: rgba(20, 134, 246, 0.05); } .achive .img_wrap ul li a:hover span { background-color: rgba(20, 134, 246, 1); } .achive .img_wrap ul li a:hover span i { color: #fff; } /* 말줄임 css */ .notice .notice_wrap li a .n_top .ntit, .notice .notice_wrap li a .n_bot p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .resources .resources_wrap .rTit, .resources .resources_wrap .rStit, .achive .img_wrap ul li a .aTit, .achive .img_wrap ul li a .aStit { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* 배너 */ /* 배너는 lflex02 안에서 흐름을 유지한다(=absolute 미사용). 게시글이 없어 연구성과 영역이 짧아져도 배너 높이만큼 행 높이가 확보되어 위쪽 최신글 영역과 겹치지 않는다. 위치(우측 정렬 / 하단 -10px 돌출)는 기존과 동일. */ .banner { padding: 30px; width: 694px; background-color: #f5f4f2; border-radius: 30px 0 0 0; position: relative; flex-shrink: 0; margin-left: auto; margin-bottom: -30px; align-self: flex-end; } .banner::before, .banner::after { content: ''; width: 65px; height: 65px; border-radius: 0 0 30px 0; box-shadow: 1rem 1rem 0 0 #f5f4f2; position: absolute; } .banner::before { bottom: 10px; left: -65px; } .banner::after { top: -65px; right: 0; } .banner ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .banner ul li { background-color: #ccc; display: flex; align-items: center; justify-content: center; padding: 2px; border-radius: 25px; position: relative; border-radius: 30px; overflow: hidden;} .banner ul li::before { content: ''; width: 100%; height: 100%; background: url(/images/main/Gradient_new.png) no-repeat; background-size: 250% 250%; background-position: -200px -200px; position: absolute; top: 0; left: 0; z-index: 1; opacity: .4;} .banner ul li a { display: block; width: 100%; height: 100%; background-color: #333; border-radius: 25px; padding: 27px; position: relative; z-index: 2; } .banner ul li a p { color: #fff; font-size: 24px; font-weight: 700; } .banner ul li a dl { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px; } .banner ul li a dl dt { font-size: 14px; color: #fff;} .banner ul li a dl dt i { font-size: 14px; color: #fff;} .banner ul li a dl dd img { display: block; max-width: 100%; } .banner ul li:hover a dl dd img { animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } @keyframes rotate-vert-center { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } /* 배너 박스 색상 조정 */ /* .banner ul li:nth-child(1) { background: linear-gradient(0deg, #1f4e90 0%, #10202e 40%); } .banner ul li:nth-child(1)::before { background: linear-gradient(220deg, #1f4e90 0%, #10202e 20%); } .banner ul li:nth-child(1) a { background: radial-gradient(circle at right top,#1b3f6e,#0b1e2f,#0b1e2f,#0b1e2f); } .banner ul li:nth-child(2) { background: linear-gradient(0deg, #058e6e 0%, #10202e 40%); } .banner ul li:nth-child(2)::before { background: linear-gradient(220deg, #058e6e 0%, #10202e 20%); } .banner ul li:nth-child(2) a { background: radial-gradient(circle at right top,#084742,#09242c,#09242c,#09242c); } .banner ul li:nth-child(3) { background: linear-gradient(0deg, #584d95 0%, #10202e 40%); } .banner ul li:nth-child(3)::before { background: linear-gradient(220deg, #584d95 0%, #10202e 20%); } .banner ul li:nth-child(3) a { background: radial-gradient(circle at right top,#2a2f53,#111e30,#111e30,#111e30); } .banner ul li:nth-child(4) { background: linear-gradient(0deg, #844c35 0%, #10202e 40%); } .banner ul li:nth-child(4)::before { background: linear-gradient(220deg, #844c35 0%, #10202e 20%); } .banner ul li:nth-child(4) a { background: radial-gradient(circle at right top,#372b2a,#0b1e2f,#0b1e2f,#0b1e2f); } */ .banner ul li:nth-child(1) { background: #1486f6; } .banner ul li:nth-child(1) a { background: none; } .banner ul li:nth-child(2) { background: #0c35e9; } .banner ul li:nth-child(2) a { background: none; } .banner ul li:nth-child(3) { background: #050172; } .banner ul li:nth-child(3) a { background: none; } .banner ul li:nth-child(4) { background: #00001c; } .banner ul li:nth-child(4) a { background: none; } /* 공지사항, 자료실 슬라이더 */ .notice .notice_wrap .slick-slide { margin: 0 25px; } .notice .notice_wrap .slick-list { margin: 0 -25px; } #latest .la_box { min-width: 0; } .notice .notice_wrap.slick-initialized { display: block !important; } .notice .notice_wrap .slick-track { display: flex !important; align-items: stretch; } .notice .notice_wrap .slick-slide { margin: 0 25px; height: auto; display: flex; } .notice .notice_wrap .slick-list { margin: 0 -25px; } .notice .notice_wrap li::before { display: none !important; } .notice .notice_wrap .slick-active + .slick-active::before { content: ''; width: 1px; height: 130%; background-color: #fff; opacity: .1; position: absolute; top: 50%; left: -25px; transform: translateY(-50%); display: block !important; } .resources .resources_wrap.slick-initialized { display: block !important; } .resources .resources_wrap.slick-initialized li.slick-slide { margin-bottom: 15px !important; } @media (min-width: 1820px){ #latest{width: 100%; max-width: 1880px; margin: 50px auto;} } /* ---------------------------------------------------- section 04 : prof ---------------------------------------------------- */ #prof { width: calc(100% + 200px); padding-bottom: 170px; overflow: hidden; } #prof .prof_wrap { display: flex; align-items: stretch; gap: 200px; padding-left: 100px; } #prof .prof_wrap .prof_left { flex-shrink: 0; width: 200px; display: flex; flex-direction: column; justify-content: space-between; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 40px; color: #222; font-weight: 700; } #prof .prof_wrap .prof_left .pTit .pMore { font-size: 18px; color: #999; display: inline-flex; align-items: center; gap: 6px; padding: 6px 20px; background-color: rgba(255, 255, 255, .6); border-radius: 50px; margin-top: 35px; transition: all .3s ease; } #prof .prof_wrap .prof_left .pTit .pMore i { color: #999; transition: all .3s ease; } #prof .prof_wrap .prof_left .slide_arrow { display: flex; align-items: center; gap: 36px; cursor: pointer; } #prof .prof_wrap .prof_left .slide_arrow .sArrow {transition: all .3s ease; } #prof .prof_wrap .prof_right { flex: 1; overflow: hidden; position: relative; } #prof .prof_wrap .prof_right .prof_list li{margin: 0 10px;} #prof .prof_wrap .prof_right .prof_list li a { display: flex; width: 520px; box-sizing: border-box; background-color: rgba(255, 255, 255, 1); padding: 11px; border-radius: 18px;} #prof .prof_wrap .prof_right .prof_list li a .pImg {width: 220px; height: 285px; border-radius: 16px; overflow: hidden; } #prof .prof_wrap .prof_right .prof_list li a .pImg img { display: block; max-width: 100%; transition: all .3s ease; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; width: calc(100% - 220px); padding: 24px 0 24px 32px;} #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 30px; font-weight: 700; color: #222; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 22px; font-weight: 700; margin-top: 5px;; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; min-height: 140px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects p { max-width: 100%; padding: 10px 18px; background-color: rgba(19, 130, 239, .05); color: #878787; font-size: 16px; font-weight: 500; border-radius: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .3s ease; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects .subject_row { display: flex; align-items: center; gap: 10px; max-width: 100%; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects .subject_row p { min-width: 0; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects .more_subjects { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; padding: 0 12px; border: 1px solid #1f528b; background-color: #fff; color: #1f528b; font-size: 15px; font-weight: 600; line-height: 1; border-radius: 50px; transition: all .3s ease; } #prof .prof_wrap .prof_left .pTit .pMore:hover { background-color: #1f528b; color: #fff;} #prof .prof_wrap .prof_left .pTit .pMore:hover i { transform: rotate(180deg); color: #fff;} #prof .prof_wrap .prof_left .slide_arrow .sArrow:hover { opacity: .8; } #prof .prof_wrap .prof_right .prof_list li a:hover .pImg img { transform: scale(1.05); } #prof .prof_wrap .prof_right .prof_list li a:hover .pTxt .subjects .more_subjects {background-color: #1f528b; color: #fff;} /* #prof .prof_wrap .prof_right .prof_list li{margin: 0 10px;} #prof .prof_wrap .prof_right .prof_list li a { display: flex; background-color: rgba(255, 255, 255, 1); padding: 11px; border-radius: 18px; gap: 35px; } #prof .prof_wrap .prof_right .prof_list li a .pImg {width: 220px; height: 262px; border-radius: 16px; overflow: hidden; } #prof .prof_wrap .prof_right .prof_list li a .pImg img { display: block; max-width: 100%; transition: all .3s ease; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 220px); padding-right: 32px; padding-top: 24px; padding-bottom: 24px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 30px; font-weight: 700; color: #222; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 22px; font-weight: 700; margin-top: 5px;; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects p { padding: 10px 25px; background-color: rgba(19, 130, 239, .05); color: #878787; font-size: 16px; font-weight: 500; border-radius: 50px; transition: all .3s ease; } #prof .prof_wrap .prof_left .pTit .pMore:hover { background-color: #1f528b; color: #fff;} #prof .prof_wrap .prof_left .pTit .pMore:hover i { transform: rotate(180deg); color: #fff;} #prof .prof_wrap .prof_left .slide_arrow .sArrow:hover { opacity: .8; } #prof .prof_wrap .prof_right .prof_list li a:hover .pImg img { transform: scale(1.05); } #prof .prof_wrap .prof_right .prof_list li a:hover .pTxt .subjects p { background-color: #1f528b; color: #fff; } */ /* 교수진 스크롤 버튼 */ .scr_btn { width: 75px; height: 75px; background-color: rgb(12, 53, 233, 60%); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; } .scr_btn dl { display: flex; align-items: center; gap: 8px; } .scr_btn dl dt { width: 1px; height: 20px; background-color: rgb(255, 255, 255, 50%); } /* 호버 */ .scr_btn { position: absolute; pointer-events: none; opacity: 0; transition: opacity .3s ease; transform: translate(-50%, -50%); z-index: 10; } .scr_btn.active { opacity: 1; } .prof_right, .prof_right * { cursor: none; } @media (min-width: 1820px){ #prof{width: 100%; max-width: 1880px; margin: 0 auto;} } /* ---------------------------------------------------- 퀵메뉴 ---------------------------------------------------- */ #quick { position: fixed; display: inline-flex; width: 294px; height: 214px; right: -258px; top: 168px; z-index: 500; cursor: pointer; transition: all .3s ease; } #quick .quick_bg { position: absolute; z-index: -1; top: 0; left: 0; opacity: .05; } #quick .qArrow { width: 38px; height: 38px; background-color: #2c7bf2; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 10px; left: 0; z-index: 1; transition: all .3s ease; } #quick .qArrow img{transition: transform .3s ease;} #quick .qTop { position: absolute; top: 130px; left: 6px; z-index: 3; } #quick .qTop p { text-transform: uppercase; color: #888; font-size: 15px; font-family: 'Poppins', sans-serif; transform: rotate(-90deg); transform-origin: left top; letter-spacing: 1px; } #quick .qList { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 0 20px 50px; position: relative; z-index: 3; gap: 10px; } #quick .qList li { padding: 0 6px; border-radius: 15px; transition: all .3s ease; } #quick .qList li, #quick .qList li dl { display: flex; flex-direction: column; align-items: center; justify-content: center; } #quick .qList li dl { gap: 15px; } #quick .qList li dl dd { color: #fff; } #quick .qList li dl dd.txt_l { font-size: 14px; } #quick .qList li dl dd.txt_s { font-size: 12px; } #quick .quick_blur {position: absolute; inset: 0; z-index: 2; /* background: rgba(255,255,255,.05); */ background: #fff; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); isolation: isolate; -webkit-mask-image: url(/images/main/quick_bg.png); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-mode: luminance; } #quick.active { right: -30px; transition: right .3s ease; } #quick.active .qTop p{color: #fff;} #quick.active .qArrow img {transform: scaleX(-1);} #quick:hover .qArrow { left: -5px; } #quick .qList li:hover { background-color: rgba(255,255,255,.1); } #quick .quick_blur { position: absolute; inset: 0; z-index: 2; background: #fff; /* 닫혀있을 때는 기존처럼 하얀색 유지 */ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); isolation: isolate; -webkit-mask-image: url(/images/main/quick_bg.png); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-mode: luminance; transition: background 0.3s ease; } #quick.active { right: -30px; transition: right .3s ease; } #quick.active .quick_blur { /* background: rgba(0, 0, 0, 0.85); */ background: rgba(14, 12, 66, 0.9); } #quick:hover .qArrow { left: -5px; } #quick .qList li:hover { background-color: rgba(255,255,255,.1); } /* banner set */ #m-link {width: 98%; margin: 0 auto 20px; padding: 20px 0; border-radius: 20px; background: #f2f2f2f2;} #m-link .w1500{display: flex;align-items: center;justify-content: center;gap: 60px;max-width: 1600px;} #m-link h3{border-left: 3px solid #222;padding-left: 16px;font-size: 17px;font-weight: 800;} #m-link .link_list{display: flex;align-items: center;justify-content: center;gap: 32px;} #m-link .link_list div{ } #m-link .link_list div img{ } /* 푸터 */ footer { position: relative; width: 100%; z-index: -1; border-top: 1px solid rgba(255, 255, 255, 0.15); } footer .back_wr {background: #fff; border-radius: 20px; width: 98%; height: 291px; margin: 0 auto; margin-bottom: 40px;} footer .f_top { display: flex; justify-content: space-between; padding: 45px 60px 75px; box-sizing: border-box;} footer .f_top .ad_sub_L img { display: block; width: 357px; } footer .f_top .ad_sub_L .info { } footer .f_top .ad_sub_L .info dl { display: flex; margin-bottom: 15px; } footer .f_top .ad_sub_L .info dl dt { width: 120px; font-family: 'Poppins', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 16px; letter-spacing: -0.5px; color: #333; word-break: keep-all; } footer .f_top .ad_sub_L .info dl dd { width: calc(100% - 120px); font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.5px; color: #333; word-break: keep-all; } footer .f_top .ad_sub_L .sns_wr { margin-top: 40px; } footer .f_top .ad_sub_L .sns_wr a img { -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); opacity: .3; transition: all 0.4s ease; } footer .f_top .ad_sub_L .sns_wr a:hover img { opacity: .8; } footer .f_top .ad_sub_L .copy { margin-top: 75px; font-family: 'Pretendard'; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; color: #999; word-break: keep-all; } footer .f_top .ad_sub_L .copy a { color: #999; transition: all 0.4s ease; } footer .f_top .ad_sub_L .copy a:hover { color: #333; } footer .f_top .ad_sub_wr { display: flex; flex-direction: column; align-items: end; gap: 100px;} footer .f_top .ad_sub_wr .f_nav { margin-right: 50px; } footer .f_top .ad_sub_wr .f_nav:last-child { margin-right: 0; display: flex; gap: 43px;} footer .f_top .ad_sub_wr .f_nav li a { display: block; margin-bottom: 10px; font-family: 'Pretendard'; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff; opacity: .6; transition: all 0.4s ease; } footer .f_top .ad_sub_wr .f_nav li a:hover { opacity: 1; } footer .f_top .ad_sub_wr .f_nav li.tit a { font-size: 16px; font-weight: 500; color: #888; opacity: 1; } footer .f_bott { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.15); } footer .f_bott p.copy { font-weight: 400; font-size: 14px; color: #999; } footer .f_bott ul.priv_wr li { position: relative; display: inline-block; padding: 0 15px; } footer .f_bott ul.priv_wr li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: 15px; background: #cdcdcd; } footer .f_bott ul.priv_wr li:first-child::before { display: none; } footer .f_bott ul.priv_wr li a { font-weight: 500; font-size: 16px; color: #999; transition: all 0.4s ease; } footer .f_bott ul.priv_wr li a:hover { color: #fff; } footer .select_footer{position: relative;width: 290px;height: 60px;z-index: 10;text-align: left;} footer .select_footer ul{position: absolute;/* left: 23px; */bottom: 62px;display: none;width: 308px;border-radius: 10px;border : 0;background: #fff;transition: .3s;backdrop-filter : blur(3px);z-index: 999;} footer .select_footer ul.open{display:block;padding: 14px 0;background: #f2f2f2;} footer .select_footer ul li{color: #bebebe; text-indent:25px;} footer .select_footer ul li a{display: block;font-size: 16px;color: #555;padding: 7px 0;opacity: .6;transition:all 0.4s ease;} footer .select_footer ul li a:hover{opacity: 1;} footer .select_footer button.select_f_btn{border: 0;display: block;width: 310px;height: 60px;border-radius: 5px;text-align: left;font-size: 16px;background: none;border: 1px solid rgba(255,255,255,.2);color: #878d96;letter-spacing: -.5px;font-weight: 600;} footer .select_footer button.select_f_btn span.ir{width: 100%;display: flex;height: 100%;align-items: center;justify-content: space-between;transition:all 0.4s ease;border-radius: 8px;border: 1px solid #f2f2f2;padding: 0 20px;} footer .select_footer button.select_f_btn span.ir i{font-size:22px;color: #878d96;font-weight: normal;} footer .select_footer button.select_f_btn.on span.ir i{transform: scaleY(-1);} @media (min-width: 1820px){ footer{width: 100%; max-width: 1880px; margin: 0 auto;} } /* 교수진 코드펜 */ /* section3 : 교수진 소개 */ #prof { position: relative; z-index: 0; overflow: hidden; padding-top: 165px; } #prof .bg_dot { position: absolute; top: -260px; left: 13%; opacity: .7; z-index: -1; } .container { font-size: 16px; height: 30em; width: 30em; position: relative; transform-style: preserve-3d; animation: spin 10s linear infinite; } .container span { width: 0.25em; height: 0.25em; color: #fff; border-radius: 50%; position: absolute; top: calc(50% - 10em / 100); left: calc(50% - 10em / 100); transform-style: preserve-3d; } .container span:nth-child(1) { transform: translate3d(0.18463em, 0.25412em, 9.99507em); animation: beat 2s linear infinite; animation-delay: -10ms; } .container span:nth-child(2) { transform: translate3d(-0.19403em, 0.59717em, 9.98027em); animation: beat 2s linear infinite; animation-delay: -20ms; } .container span:nth-child(3) { transform: translate3d(-0.89502em, 0.29081em, 9.95562em); animation: beat 2s linear infinite; animation-delay: -30ms; } .container span:nth-child(4) { transform: translate3d(-1.01397em, -0.73669em, 9.92115em); animation: beat 2s linear infinite; animation-delay: -40ms; } .container span:nth-child(5) { transform: translate3d(0em, -1.56434em, 9.87688em); animation: beat 2s linear infinite; animation-delay: -50ms; } .container span:nth-child(6) { transform: translate3d(1.51595em, -1.1014em, 9.82287em); animation: beat 2s linear infinite; animation-delay: -60ms; } .container span:nth-child(7) { transform: translate3d(2.07467em, 0.6741em, 9.75917em); animation: beat 2s linear infinite; animation-delay: -70ms; } .container span:nth-child(8) { transform: translate3d(0.76849em, 2.36518em, 9.68583em); animation: beat 2s linear infinite; animation-delay: -80ms; } .container span:nth-child(9) { transform: translate3d(-1.63987em, 2.25709em, 9.60294em); animation: beat 2s linear infinite; animation-delay: -90ms; } .container span:nth-child(10) { transform: translate3d(-3.09017em, 0em, 9.51057em); animation: beat 2s linear infinite; animation-delay: -100ms; } .container span:nth-child(11) { transform: translate3d(-1.99105em, -2.74045em, 9.40881em); animation: beat 2s linear infinite; animation-delay: -110ms; } .container span:nth-child(12) { transform: translate3d(1.13757em, -3.50107em, 9.29776em); animation: beat 2s linear infinite; animation-delay: -120ms; } .container span:nth-child(13) { transform: translate3d(3.7771em, -1.22725em, 9.17755em); animation: beat 2s linear infinite; animation-delay: -130ms; } .container span:nth-child(14) { transform: translate3d(3.44463em, 2.50267em, 9.04827em); animation: beat 2s linear infinite; animation-delay: -140ms; } .container span:nth-child(15) { transform: translate3d(0em, 4.5399em, 8.91007em); animation: beat 2s linear infinite; animation-delay: -150ms; } .container span:nth-child(16) { transform: translate3d(-3.89747em, 2.83168em, 8.76307em); animation: beat 2s linear infinite; animation-delay: -160ms; } .container span:nth-child(17) { transform: translate3d(-4.84127em, -1.57302em, 8.60742em); animation: beat 2s linear infinite; animation-delay: -170ms; } .container span:nth-child(18) { transform: translate3d(-1.6558em, -5.09602em, 8.44328em); animation: beat 2s linear infinite; animation-delay: -180ms; } .container span:nth-child(19) { transform: translate3d(3.30384em, -4.54735em, 8.27081em); animation: beat 2s linear infinite; animation-delay: -190ms; } .container span:nth-child(20) { transform: translate3d(5.87785em, 0em, 8.09017em); animation: beat 2s linear infinite; animation-delay: -200ms; } .container span:nth-child(21) { transform: translate3d(3.60258em, 4.95852em, 7.90155em); animation: beat 2s linear infinite; animation-delay: -210ms; } .container span:nth-child(22) { transform: translate3d(-1.96975em, 6.06226em, 7.70513em); animation: beat 2s linear infinite; animation-delay: -220ms; } .container span:nth-child(23) { transform: translate3d(-6.28945em, 2.04357em, 7.50111em); animation: beat 2s linear infinite; animation-delay: -230ms; } .container span:nth-child(24) { transform: translate3d(-5.5381em, -4.02367em, 7.28969em); animation: beat 2s linear infinite; animation-delay: -240ms; } .container span:nth-child(25) { transform: translate3d(0em, -7.07107em, 7.07107em); animation: beat 2s linear infinite; animation-delay: -250ms; } .container span:nth-child(26) { transform: translate3d(5.89748em, -4.28477em, 6.84547em); animation: beat 2s linear infinite; animation-delay: -260ms; } .container span:nth-child(27) { transform: translate3d(7.13398em, 2.31797em, 6.61312em); animation: beat 2s linear infinite; animation-delay: -270ms; } .container span:nth-child(28) { transform: translate3d(2.38102em, 7.32802em, 6.37424em); animation: beat 2s linear infinite; animation-delay: -280ms; } .container span:nth-child(29) { transform: translate3d(-4.64441em, 6.39249em, 6.12907em); animation: beat 2s linear infinite; animation-delay: -290ms; } .container span:nth-child(30) { transform: translate3d(-8.09017em, 0em, 5.87785em); animation: beat 2s linear infinite; animation-delay: -300ms; } .container span:nth-child(31) { transform: translate3d(-4.86146em, -6.69122em, 5.62083em); animation: beat 2s linear infinite; animation-delay: -310ms; } .container span:nth-child(32) { transform: translate3d(2.60912em, -8.03004em, 5.35827em); animation: beat 2s linear infinite; animation-delay: -320ms; } .container span:nth-child(33) { transform: translate3d(8.18614em, -2.65984em, 5.09041em); animation: beat 2s linear infinite; animation-delay: -330ms; } .container span:nth-child(34) { transform: translate3d(7.08947em, 5.1508em, 4.81754em); animation: beat 2s linear infinite; animation-delay: -340ms; } .container span:nth-child(35) { transform: translate3d(0em, 8.91007em, 4.5399em); animation: beat 2s linear infinite; animation-delay: -350ms; } .container span:nth-child(36) { transform: translate3d(-7.3202em, 5.31844em, 4.25779em); animation: beat 2s linear infinite; animation-delay: -360ms; } .container span:nth-child(37) { transform: translate3d(-8.72837em, -2.83602em, 3.97148em); animation: beat 2s linear infinite; animation-delay: -370ms; } .container span:nth-child(38) { transform: translate3d(-2.87317em, -8.8427em, 3.68125em); animation: beat 2s linear infinite; animation-delay: -380ms; } .container span:nth-child(39) { transform: translate3d(5.53036em, -7.61189em, 3.38738em); animation: beat 2s linear infinite; animation-delay: -390ms; } .container span:nth-child(40) { transform: translate3d(9.51057em, 0em, 3.09017em); animation: beat 2s linear infinite; animation-delay: -400ms; } .container span:nth-child(41) { transform: translate3d(5.64446em, 7.76894em, 2.78991em); animation: beat 2s linear infinite; animation-delay: -410ms; } .container span:nth-child(42) { transform: translate3d(-2.99309em, 9.21177em, 2.4869em); animation: beat 2s linear infinite; animation-delay: -420ms; } .container span:nth-child(43) { transform: translate3d(-9.28152em, 3.01575em, 2.18143em); animation: beat 2s linear infinite; animation-delay: -430ms; } .container span:nth-child(44) { transform: translate3d(-7.94687em, -5.77374em, 1.87381em); animation: beat 2s linear infinite; animation-delay: -440ms; } .container span:nth-child(45) { transform: translate3d(0em, -9.87688em, 1.56434em); animation: beat 2s linear infinite; animation-delay: -450ms; } .container span:nth-child(46) { transform: translate3d(8.02638em, -5.8315em, 1.25333em); animation: beat 2s linear infinite; animation-delay: -460ms; } .container span:nth-child(47) { transform: translate3d(9.46836em, 3.07646em, 0.94108em); animation: beat 2s linear infinite; animation-delay: -470ms; } .container span:nth-child(48) { transform: translate3d(3.08407em, 9.4918em, 0.62791em); animation: beat 2s linear infinite; animation-delay: -480ms; } .container span:nth-child(49) { transform: translate3d(-5.87495em, 8.08618em, 0.31411em); animation: beat 2s linear infinite; animation-delay: -490ms; } .container span:nth-child(50) { transform: translate3d(-10em, 0em, 0em); animation: beat 2s linear infinite; animation-delay: -500ms; } .container span:nth-child(51) { transform: translate3d(-5.87495em, -8.08618em, -0.31411em); animation: beat 2s linear infinite; animation-delay: -510ms; } .container span:nth-child(52) { transform: translate3d(3.08407em, -9.4918em, -0.62791em); animation: beat 2s linear infinite; animation-delay: -520ms; } .container span:nth-child(53) { transform: translate3d(9.46836em, -3.07646em, -0.94108em); animation: beat 2s linear infinite; animation-delay: -530ms; } .container span:nth-child(54) { transform: translate3d(8.02638em, 5.8315em, -1.25333em); animation: beat 2s linear infinite; animation-delay: -540ms; } .container span:nth-child(55) { transform: translate3d(0em, 9.87688em, -1.56434em); animation: beat 2s linear infinite; animation-delay: -550ms; } .container span:nth-child(56) { transform: translate3d(-7.94687em, 5.77374em, -1.87381em); animation: beat 2s linear infinite; animation-delay: -560ms; } .container span:nth-child(57) { transform: translate3d(-9.28152em, -3.01575em, -2.18143em); animation: beat 2s linear infinite; animation-delay: -570ms; } .container span:nth-child(58) { transform: translate3d(-2.99309em, -9.21177em, -2.4869em); animation: beat 2s linear infinite; animation-delay: -580ms; } .container span:nth-child(59) { transform: translate3d(5.64446em, -7.76894em, -2.78991em); animation: beat 2s linear infinite; animation-delay: -590ms; } .container span:nth-child(60) { transform: translate3d(9.51057em, 0em, -3.09017em); animation: beat 2s linear infinite; animation-delay: -600ms; } .container span:nth-child(61) { transform: translate3d(5.53036em, 7.61189em, -3.38738em); animation: beat 2s linear infinite; animation-delay: -610ms; } .container span:nth-child(62) { transform: translate3d(-2.87317em, 8.8427em, -3.68125em); animation: beat 2s linear infinite; animation-delay: -620ms; } .container span:nth-child(63) { transform: translate3d(-8.72837em, 2.83602em, -3.97148em); animation: beat 2s linear infinite; animation-delay: -630ms; } .container span:nth-child(64) { transform: translate3d(-7.3202em, -5.31844em, -4.25779em); animation: beat 2s linear infinite; animation-delay: -640ms; } .container span:nth-child(65) { transform: translate3d(0em, -8.91007em, -4.5399em); animation: beat 2s linear infinite; animation-delay: -650ms; } .container span:nth-child(66) { transform: translate3d(7.08947em, -5.1508em, -4.81754em); animation: beat 2s linear infinite; animation-delay: -660ms; } .container span:nth-child(67) { transform: translate3d(8.18614em, 2.65984em, -5.09041em); animation: beat 2s linear infinite; animation-delay: -670ms; } .container span:nth-child(68) { transform: translate3d(2.60912em, 8.03004em, -5.35827em); animation: beat 2s linear infinite; animation-delay: -680ms; } .container span:nth-child(69) { transform: translate3d(-4.86146em, 6.69122em, -5.62083em); animation: beat 2s linear infinite; animation-delay: -690ms; } .container span:nth-child(70) { transform: translate3d(-8.09017em, 0em, -5.87785em); animation: beat 2s linear infinite; animation-delay: -700ms; } .container span:nth-child(71) { transform: translate3d(-4.64441em, -6.39249em, -6.12907em); animation: beat 2s linear infinite; animation-delay: -710ms; } .container span:nth-child(72) { transform: translate3d(2.38102em, -7.32802em, -6.37424em); animation: beat 2s linear infinite; animation-delay: -720ms; } .container span:nth-child(73) { transform: translate3d(7.13398em, -2.31797em, -6.61312em); animation: beat 2s linear infinite; animation-delay: -730ms; } .container span:nth-child(74) { transform: translate3d(5.89748em, 4.28477em, -6.84547em); animation: beat 2s linear infinite; animation-delay: -740ms; } .container span:nth-child(75) { transform: translate3d(0em, 7.07107em, -7.07107em); animation: beat 2s linear infinite; animation-delay: -750ms; } .container span:nth-child(76) { transform: translate3d(-5.5381em, 4.02367em, -7.28969em); animation: beat 2s linear infinite; animation-delay: -760ms; } .container span:nth-child(77) { transform: translate3d(-6.28945em, -2.04357em, -7.50111em); animation: beat 2s linear infinite; animation-delay: -770ms; } .container span:nth-child(78) { transform: translate3d(-1.96975em, -6.06226em, -7.70513em); animation: beat 2s linear infinite; animation-delay: -780ms; } .container span:nth-child(79) { transform: translate3d(3.60258em, -4.95852em, -7.90155em); animation: beat 2s linear infinite; animation-delay: -790ms; } .container span:nth-child(80) { transform: translate3d(5.87785em, 0em, -8.09017em); animation: beat 2s linear infinite; animation-delay: -800ms; } .container span:nth-child(81) { transform: translate3d(3.30384em, 4.54735em, -8.27081em); animation: beat 2s linear infinite; animation-delay: -810ms; } .container span:nth-child(82) { transform: translate3d(-1.6558em, 5.09602em, -8.44328em); animation: beat 2s linear infinite; animation-delay: -820ms; } .container span:nth-child(83) { transform: translate3d(-4.84127em, 1.57302em, -8.60742em); animation: beat 2s linear infinite; animation-delay: -830ms; } .container span:nth-child(84) { transform: translate3d(-3.89747em, -2.83168em, -8.76307em); animation: beat 2s linear infinite; animation-delay: -840ms; } .container span:nth-child(85) { transform: translate3d(0em, -4.5399em, -8.91007em); animation: beat 2s linear infinite; animation-delay: -850ms; } .container span:nth-child(86) { transform: translate3d(3.44463em, -2.50267em, -9.04827em); animation: beat 2s linear infinite; animation-delay: -860ms; } .container span:nth-child(87) { transform: translate3d(3.7771em, 1.22725em, -9.17755em); animation: beat 2s linear infinite; animation-delay: -870ms; } .container span:nth-child(88) { transform: translate3d(1.13757em, 3.50107em, -9.29776em); animation: beat 2s linear infinite; animation-delay: -880ms; } .container span:nth-child(89) { transform: translate3d(-1.99105em, 2.74045em, -9.40881em); animation: beat 2s linear infinite; animation-delay: -890ms; } .container span:nth-child(90) { transform: translate3d(-3.09017em, 0em, -9.51057em); animation: beat 2s linear infinite; animation-delay: -900ms; } .container span:nth-child(91) { transform: translate3d(-1.63987em, -2.25709em, -9.60294em); animation: beat 2s linear infinite; animation-delay: -910ms; } .container span:nth-child(92) { transform: translate3d(0.76849em, -2.36518em, -9.68583em); animation: beat 2s linear infinite; animation-delay: -920ms; } .container span:nth-child(93) { transform: translate3d(2.07467em, -0.6741em, -9.75917em); animation: beat 2s linear infinite; animation-delay: -930ms; } .container span:nth-child(94) { transform: translate3d(1.51595em, 1.1014em, -9.82287em); animation: beat 2s linear infinite; animation-delay: -940ms; } .container span:nth-child(95) { transform: translate3d(0em, 1.56434em, -9.87688em); animation: beat 2s linear infinite; animation-delay: -950ms; } .container span:nth-child(96) { transform: translate3d(-1.01397em, 0.73669em, -9.92115em); animation: beat 2s linear infinite; animation-delay: -960ms; } .container span:nth-child(97) { transform: translate3d(-0.89502em, -0.29081em, -9.95562em); animation: beat 2s linear infinite; animation-delay: -970ms; } .container span:nth-child(98) { transform: translate3d(-0.19403em, -0.59717em, -9.98027em); animation: beat 2s linear infinite; animation-delay: -980ms; } .container span:nth-child(99) { transform: translate3d(0.18463em, -0.25412em, -9.99507em); animation: beat 2s linear infinite; animation-delay: -990ms; } .container span:nth-child(100) { transform: translate3d(0em, 0em, -10em); animation: beat 2s linear infinite; animation-delay: -1000ms; } .container span::before { content: ""; display: block; border-radius: 50%; background-color: #9caade; width: 0.25em; height: 0.25em; animation: spin 10s linear reverse infinite; } @keyframes spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @keyframes beat { 0% { font-size: 1em; } 5% { font-size: 1.1em; } 10% { font-size: 1em; } 15% { font-size: 1.1em; } 25%, 100% { font-size: 1em; } } /* 애니메이션 */ .up_down { animation: up_down 5s infinite ease; } @keyframes up_down { 0% { transform: translateY(0); } 50% { transform: translateY(50px); } 100% { transform: translateY(0); } } /* ============================================================================ 메인 반응형 (2026-08-21 정리) 브레이크포인트 : 1600 / 1400 / 1200 / 1024 / 768 / 500 - 데스크톱 배치(비주얼 좌측 텍스트 + 우측 학과버튼, 최신글 2단, 교수 좌측 타이틀) 구조는 그대로 두고 크기 / 여백만 단계별로 축소한다. ============================================================================ */ /* ---------- 공통 보정 ---------- */ #latest { margin: 50px auto; } #latest .la_tit h3 { flex-shrink: 0; word-break: keep-all; } #latest .la_tit .view_more { flex-shrink: 0; white-space: nowrap; } #latest .la_box { min-width: 0; } #visual .vText .vMain_txt p { font-size: 26px; font-weight: 600; } #m-link .link_list img { display: block; max-width: 100%; height: auto; } .banner ul li a dl dd img { max-width: 100%; height: auto; } /* --- 1820 이하 : 비주얼 기준폭(1880) 보정 -------------------------------------- #visual 은 max-width 1880 기준으로 그려져 있어 1820 아래로 내려오면 좌측 타이틀과 우측 학과버튼이 맞닿는다. 이 구간만 크기를 한 단계 줄인다. */ @media (max-width: 1820px) { #visual {} #visual .vMore_btn::before { width: 170px; height: 147px; } #visual .vText { padding: 0 70px; bottom: 76px; } #visual .vText .vMain_txt p { font-size: 24px; padding-bottom: 20px; } #visual .vText .vMain_txt h1 { font-size: 52px; } #visual .vMore_btn { gap: 12px; padding: 18px 0 0 18px; } #visual .vMore_btn li { width: 300px; height: 128px; border-radius: 20px; } #visual .vMore_btn li a { width: 100%; height: 100%; padding: 0 22px; border-radius: 20px; font-size: 20px; } #visual .vMore_btn li a span { font-size: 14px; } #visual .vMore_btn li a .vicon img { height: 40px; } } /* ============================== max-width : 1600 ============================== */ @media (max-width: 1600px) { /* visual */ #visual { height: 560px;} #visual::before{width: 400px; height: 115px;} #visual::after{top: -1px; right: -31px; width: 120px; height: 65px; transform: skew(-330deg) translateX(5%);} #visual .vMore_btn::before { width: 148px; height: 132px; } #visual .vMore_btn::after { width: 5rem; height: 5rem; box-shadow: 1.5rem 1.5rem 0 0 #f5f4f2; top: -5rem; } #visual .vText { padding: 0 60px; bottom: 70px; } #visual .vText .vMain_txt p { font-size: 22px; padding-bottom: 16px; } #visual .vText .vMain_txt h1 { font-size: 46px; } #visual .vMore_btn { gap: 10px; padding: 16px 0 0 16px; } #visual .vMore_btn li { width: 270px; height: 116px; border-radius: 18px; } #visual .vMore_btn li a { width: 100%; height: 100%; padding: 0 20px; border-radius: 18px; font-size: 19px; } #visual .vMore_btn li a span { font-size: 13px; margin-top: 6px; } #visual .vMore_btn li a .vicon img { height: 36px; } /* latest */ #latest h3 { font-size: 26px; } #latest .la_tit { margin-bottom: 36px; gap: 20px; } #latest .la_tit2 { margin-bottom: 26px; } #latest .la_tit button[type=button] { width: 42px; height: 42px; } #latest .la_tit button[type=button] i { font-size: 42px; } #latest .lflex01 { padding: 30px 16px 0; gap: 16px; } #latest .lflex02 { margin-top: 16px; gap: 16px; padding-left: 16px; padding-bottom: 16px; } #latest .la_box { padding: 30px 30px 18px; } .notice .notice_wrap .slick-slide { margin: 0 16px; } .notice .notice_wrap .slick-list { margin: 0 -16px; } .notice .notice_wrap li a .n_top { margin-bottom: 50px; gap: 16px; } .notice .notice_wrap li a .n_top .nDate span { font-size: 36px; } .notice .notice_wrap li a .n_top .nDate p { font-size: 13px; } .notice .notice_wrap li a .n_top .ntit { font-size: 18px; width: calc(100% - 94px); } .notice .notice_wrap li a .n_bot p { font-size: 14px; } .resources .resources_wrap a { padding: 16px; } .resources .resources_wrap .rDate { font-size: 15px; } .resources .resources_wrap .rTit { font-size: 19px; } .resources .resources_wrap .rStit { font-size: 14px; } .achive { width: calc(100% - 640px); } .achive .img_wrap { flex-direction: column; } .achive .img_wrap ul { width: 100%; } .achive .img_wrap .img_box { display: none; } .achive .img_wrap ul li a { padding: 18px; } .achive .img_wrap ul li a .aTit { font-size: 17px; } .achive .img_wrap ul li a .aStit { font-size: 14px; } .banner { width: 620px; padding: 24px; margin-bottom: -26px; /* lflex02 padding-bottom(16) + 하단 돌출(10) */ } .banner ul li a { padding: 22px; } .banner ul li a p { font-size: 20px; } .banner ul li a dl { margin-top: 28px; } .banner ul li a dl dd img { width: 56px; } /* prof */ #prof { width: calc(100% + 120px); padding-top: 120px; padding-bottom: 120px; } #prof .prof_wrap { gap: 120px; padding-left: 60px; } #prof .prof_wrap .prof_left { width: 180px; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 34px; } #prof .prof_wrap .prof_left .pTit .pMore { font-size: 16px; margin-top: 24px; } #prof .prof_wrap .prof_left .slide_arrow { gap: 26px; } #prof .prof_wrap .prof_right .prof_list li a { width: 460px; } #prof .prof_wrap .prof_right .prof_list li a .pImg { width: 180px; height: 234px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { width: calc(100% - 180px); padding: 18px 0 18px 24px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 26px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 19px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects { min-height: 120px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects p { font-size: 14px; padding: 8px 16px; } #prof .bg_dot { top: -200px; } /* 관련기관 링크 */ #m-link .w1500 { gap: 40px; } #m-link .link_list { flex-wrap: wrap; gap: 14px 24px; } #m-link .link_list img { max-height: 34px; } /* footer */ footer .back_wr { height: auto; } footer .f_top { padding: 40px 40px 30px; } footer .f_top .ad_sub_wr { gap: 60px; } footer .f_top .ad_sub_wr a.logo-1 img { width: 300px; } footer .f_top .ad_sub_L > img { width: 260px; } footer .f_top .ad_sub_L .info dl { margin-bottom: 10px; padding-right: 20px; } footer .f_top .ad_sub_L .info dl dt { flex: 0 0 90px; width: 90px; padding-right: 10px; } footer .f_top .ad_sub_L .info dl dd { flex: 1 1 auto; width: calc(100% - 90px); } footer .f_bott ul.priv_wr li a { font-size: 14px; } } /* ============================== max-width : 1400 ============================== */ @media (max-width: 1400px) { /* visual */ #visual { height: 520px; } #visual .vMore_btn::before { width: 132px; height: 118px; right: 94%;} #visual .vText { padding: 0 48px; bottom: 64px; } #visual .vText .vMain_txt p { font-size: 20px; padding-bottom: 14px; } #visual .vText .vMain_txt h1 { font-size: 42px; } #visual .vMore_btn { gap: 8px; padding: 14px 0 0 14px; } #visual .vMore_btn li { width: 230px; height: 104px; border-radius: 16px; } #visual .vMore_btn li a { padding: 0 16px; border-radius: 16px; font-size: 17px; } #visual .vMore_btn li a span { font-size: 12px; } #visual .vMore_btn li a .vicon img { height: 32px; } /* latest */ #latest h3 { font-size: 24px; } #latest .la_tit { margin-bottom: 30px; } #latest .la_tit2 { margin-bottom: 22px; } #latest .lflex01 { padding: 26px 14px 0; gap: 14px; } #latest .lflex02 { margin-top: 14px; gap: 14px; padding-left: 14px; padding-bottom: 14px; } #latest .la_box { padding: 26px 24px 16px; } .notice .notice_wrap .slick-slide { margin: 0 12px; } .notice .notice_wrap .slick-list { margin: 0 -12px; } .notice .notice_wrap li a .n_top { margin-bottom: 40px; } .notice .notice_wrap li a .n_top .nDate span { font-size: 32px; } .notice .notice_wrap li a .n_top .ntit { font-size: 17px; width: calc(100% - 88px); } .achive { width: calc(100% - 534px); } .banner { width: 520px; padding: 20px; margin-bottom: -24px; /* lflex02 padding-bottom(14) + 하단 돌출(10) */ } .banner ul li a { padding: 18px; } .banner ul li a p { font-size: 18px; } .banner ul li a dl { margin-top: 22px; } .banner ul li a dl dd img { width: 50px; } /* prof */ #prof { width: calc(100% + 100px); padding-top: 100px; padding-bottom: 100px; } #prof .prof_wrap { gap: 80px; padding-left: 48px; } #prof .prof_wrap .prof_left { width: 170px; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 30px; } #prof .prof_wrap .prof_right .prof_list li a { width: 420px; } #prof .prof_wrap .prof_right .prof_list li a .pImg { width: 160px; height: 208px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { width: calc(100% - 160px); padding: 16px 0 16px 20px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 24px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 18px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects { min-height: 108px; } /* 관련기관 링크 */ #m-link .w1500 { gap: 30px; } #m-link .link_list { gap: 12px 20px; } #m-link .link_list img { max-height: 32px; } /* footer : 로고 / 패밀리사이트를 주소 블록 아래로 내린다 */ footer .f_top { display: block; padding: 36px 30px 26px; } footer .f_top .ad_sub_L { width: 100%; } footer .f_top .ad_sub_wr { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 24px; } footer .f_top .ad_sub_wr a.logo-1 img { width: 280px; } footer .f_top .ad_sub_L .f_bott p.copy { margin-top: 40px; } } /* ============================== max-width : 1200 ============================== */ @media (max-width: 1200px) { /* visual */ #visual { height: 470px; margin: 10px auto auto auto; border-radius: 40px; } #visual::before{width: 364px; height: 90px;} #visual::after{width: 105px; height: 56px;} #visual .vMore_btn::before { width: 120px; height: 108px; } #visual .vText { padding: 0 40px; bottom: 58px; } #visual .vText .vMain_txt p { font-size: 18px; padding-bottom: 12px; } #visual .vText .vMain_txt h1 { font-size: 38px; } #visual .vMore_btn { gap: 8px; padding: 12px 0 0 12px; } #visual .vMore_btn li { width: 200px; height: 96px; } #visual .vMore_btn li a { padding: 0 14px; font-size: 16px; } #visual .vMore_btn li a span { font-size: 11px; margin-top: 4px; } #visual .vMore_btn li a .vicon img { height: 28px; } /* latest : 연구성과 + 배너를 세로로 쌓는다 */ #latest .lflex02 { flex-direction: column; padding-right: 14px; } .achive { width: 100%; } .banner { position: static; width: 100%; border-radius: 30px; margin: 0; align-self: stretch; } .banner::before, .banner::after { display: none; } .banner ul li a { padding: 20px; } /* prof */ #prof { width: calc(100% + 80px); padding-top: 90px; padding-bottom: 90px; } #prof .prof_wrap { gap: 50px; padding-left: 40px; } #prof .prof_wrap .prof_left { width: 160px; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 28px; } #prof .prof_wrap .prof_right .prof_list li a { width: 400px; } #prof .prof_wrap .prof_right .prof_list li a .pImg { width: 150px; height: 195px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { width: calc(100% - 150px); padding: 14px 0 14px 18px; } #prof .bg_dot { top: -160px; left: 6%; } /* 관련기관 링크 : 타이틀을 로고 위로 */ #m-link { padding: 18px 0; } #m-link .w1500 { flex-direction: column; gap: 16px; } #m-link .link_list { gap: 12px 18px; } #m-link .link_list img { max-height: 30px; } /* footer */ footer .f_top { padding: 34px 24px 24px; } footer .f_top .ad_sub_L .info dl dt { flex-basis: 86px; width: 86px; } footer .f_top .ad_sub_L .info dl dd { width: calc(100% - 86px); } footer .f_top .ad_sub_wr { margin-top: 20px; } footer .f_top .ad_sub_wr a.logo-1 img { width: 260px; } } /* ============================== max-width : 1024 ============================== */ @media (max-width: 1024px) { /* visual : 학과버튼을 하단 전체폭 띠로, 텍스트는 그 위로 */ #visual { height: 420px; } /* reset.css 에 전역 border-box 가 없어 width:100% + padding 이 비주얼 밖으로 나가므로 명시 */ #visual .vMore_btn { left: 0; right: 0; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 24px 24px 0 0; } #visual .vMore_btn::before, #visual .vMore_btn::after { display: none; } #visual .vMore_btn li { width: auto; height: 96px; } #visual .vText { padding: 0 32px; bottom: 128px; } #visual .vText .vMain_txt h1 { font-size: 34px; } /* latest : 공지 / 세미나 1단 */ #latest .lflex01 { grid-template-columns: 1fr; } #latest .la_box { padding: 24px 20px 16px; } #latest .la_tit { margin-bottom: 24px; } #latest .la_tit2 { margin-bottom: 18px; } /* prof */ #prof { width: calc(100% + 60px); padding-top: 80px; padding-bottom: 80px; } #prof .prof_wrap { gap: 32px; padding-left: 24px; } #prof .prof_wrap .prof_left { width: 150px; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 26px; } #prof .prof_wrap .prof_left .pTit .pMore { font-size: 14px; padding: 5px 14px; margin-top: 18px; } #prof .prof_wrap .prof_left .slide_arrow { gap: 20px; } #prof .prof_wrap .prof_right .prof_list li a { width: 380px; } #prof .prof_wrap .prof_right .prof_list li a .pImg { width: 140px; height: 182px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { width: calc(100% - 140px); padding: 14px 0 14px 16px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 22px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 17px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects { min-height: 96px; gap: 8px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects p { font-size: 13px; padding: 7px 14px; } /* 터치 환경 : 커스텀 커서 해제 */ .scr_btn { display: none; } .prof_right, .prof_right * { cursor: auto; } /* 관련기관 링크 */ #m-link .link_list { gap: 12px 16px; } #m-link .link_list img { max-height: 28px; } /* 퀵메뉴 */ #quick { width: 258px; height: 190px; right: -226px; top: 130px; } #quick .qList { padding: 16px 0 16px 44px; } #quick .qList li dl { gap: 10px; } #quick .qList li dl dt img { width: 22px; } /* footer ※ default.css 가 main.css 를 @import 하고 있어(버전 파라미터 없음) 브라우저에 남아 있는 예전 main.css 의 1000px 이하 규칙이 같이 적용될 수 있다. 아래 값들은 그 잔여 규칙(가운데정렬 / .info width:550px / .ad_sub_wr 숨김)을 확실히 무력화하기 위한 명시적 재지정이다. */ footer .f_top { padding: 30px 20px 22px; } footer .f_top .ad_sub_L { width: 100%; padding: 0; text-align: left; } footer .f_top .ad_sub_L .info { width: auto; margin: 20px 0 0 0; } footer .f_top .ad_sub_wr { display: flex; gap: 16px; margin-top: 18px; } footer .f_top .ad_sub_wr a.logo-1 img { width: 240px; } footer .f_top .ad_sub_L .f_bott { flex-direction: row; align-items: center; padding: 14px 0 0; } footer .f_top .ad_sub_L .f_bott p.copy { margin-top: 24px; text-align: left; } } /* ============================== max-width : 768 ============================== */ @media (max-width: 768px) { /* visual */ #visual { height: 360px; border-radius: 30px; } #visual::after{width: 98px; height: 48px; border-radius:0 0 0 12px;} #visual::before{width: 305px; height: 88px;} #visual .vText { padding: 0 22px; bottom: 110px; } #visual .vText .vMain_txt p { font-size: 15px; padding-bottom: 10px; } #visual .vText .vMain_txt h1 { font-size: 28px; } #visual .vMore_btn { gap: 6px; padding: 10px; border-radius: 20px 20px 0 0; } #visual .vMore_btn li { height: 84px; border-radius: 12px; } #visual .vMore_btn li a { padding: 0 10px; border-radius: 12px; font-size: 13px; } #visual .vMore_btn li a span { font-size: 10px; line-height: 1.25; margin-top: 3px; } #visual .vMore_btn li a .vicon img { height: 22px; } /* latest */ #latest { border-radius: 20px 20px 0 20px; margin: 30px auto; } #latest h3 { font-size: 20px; } #latest .la_tit { gap: 12px; margin-bottom: 20px; } #latest .la_tit2 { margin-bottom: 16px; } #latest .la_tit .view_more { font-size: 13px; } #latest .la_tit .view_more i { font-size: 16px; } #latest .la_tit button[type=button] { width: 34px; height: 34px; } #latest .la_tit button[type=button] i { font-size: 34px; } #latest .lflex01 { padding: 20px 12px 0; gap: 12px; } #latest .lflex02 { margin-top: 12px; gap: 12px; padding: 0 12px 12px; } #latest .la_box { padding: 20px 16px 14px; border-radius: 20px 0 20px 20px; } .notice .notice_wrap .slick-slide { margin: 0 8px; } .notice .notice_wrap .slick-list { margin: 0 -8px; } .notice .notice_wrap li a .n_top { margin-bottom: 20px; gap: 12px; } .notice .notice_wrap li a .n_top .nDate { padding: 8px; border-radius: 8px; } .notice .notice_wrap li a .n_top .nDate span { font-size: 28px; } .notice .notice_wrap li a .n_top .nDate p { font-size: 12px; } .notice .notice_wrap li a .n_top .ntit { font-size: 16px; width: calc(100% - 76px); } .notice .notice_wrap li a .n_bot p { font-size: 13px; line-height: 1.4; } .resources .resources_wrap a { padding: 14px; } .resources .resources_wrap .rDate { font-size: 13px; } .resources .resources_wrap .rTit { font-size: 16px; } .resources .resources_wrap .rStit { font-size: 13px; } .achive .img_wrap ul { gap: 8px; } .achive .img_wrap ul li a { padding: 14px; } .achive .img_wrap ul li a .aTit { font-size: 15px; } .achive .img_wrap ul li a .aStit { font-size: 13px; } .achive .img_wrap ul li a span { width: 26px; height: 26px; } .achive .img_wrap ul li a span i { font-size: 14px; } .banner { padding: 0; border-radius: 20px; } .banner ul { gap: 8px; } .banner ul li { border-radius: 20px; } .banner ul li a { padding: 16px; border-radius: 20px; } .banner ul li a p { font-size: 16px; } .banner ul li a dl { margin-top: 18px; } .banner ul li a dl dt, .banner ul li a dl dt i { font-size: 12px; } .banner ul li a dl dd img { width: 40px; } /* prof */ #prof { width: calc(100% + 40px); padding-top: 60px; padding-bottom: 60px; } /* 모바일: 타이틀(교수) + VIEW MORE + 화살표를 한 줄로, 교수 리스트는 그 아래로 배치 */ #prof .prof_wrap { flex-direction: column; align-items: stretch; gap: 18px; padding-left: 16px; } #prof .prof_wrap .prof_left { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-right: 56px; } #prof .prof_wrap .prof_left .pTit { display: flex; align-items: center; gap: 10px; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 22px; } #prof .prof_wrap .prof_left .pTit .pMore { flex-shrink: 0; white-space: nowrap; font-size: 13px; padding: 5px 12px; margin-top: 0; } #prof .prof_wrap .prof_left .slide_arrow { flex-shrink: 0; gap: 14px; } #prof .prof_wrap .prof_left .slide_arrow .sArrow img { width: 22px; } #prof .prof_wrap .prof_right { flex: none; width: 100%; } #prof .prof_wrap .prof_right .prof_list li { margin: 0 6px; } #prof .prof_wrap .prof_right .prof_list li a { width: 320px; padding: 8px; border-radius: 14px; } #prof .prof_wrap .prof_right .prof_list li a .pImg { width: 110px; height: 143px; border-radius: 12px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { width: calc(100% - 110px); padding: 10px 0 10px 12px; gap: 12px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 18px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 14px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects { min-height: 74px; gap: 6px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects p { font-size: 12px; padding: 6px 12px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects .more_subjects { min-width: 32px; height: 24px; padding: 0 8px; font-size: 12px; } #prof .bg_dot { display: none; } /* 관련기관 링크 */ #m-link { padding: 14px 0; margin-bottom: 12px; } #m-link .w1500 { gap: 12px; } #m-link h3 { font-size: 15px; padding-left: 12px; } #m-link .link_list { gap: 10px 14px; } #m-link .link_list img { max-height: 24px; } /* 우측 고정 퀵메뉴 : 모바일에서도 축소해서 노출 */ #quick { display: inline-flex; width: 244px; height: 186px; top: 120px; right: -204px; } #quick.active { right: -18px; } #quick .quick_bg { width: 100%; height: 100%; } #quick .qArrow { width: 32px; height: 32px; bottom: 8px; } #quick .qArrow img { width: 11px; } #quick .qTop { top: 118px; left: 5px; } #quick .qTop p { font-size: 13px; letter-spacing: .5px; } #quick .qList { padding: 16px 0 16px 42px; gap: 8px; } #quick .qList li { padding: 0 5px; border-radius: 12px; } #quick .qList li dl { gap: 3px; } #quick .qList li dl dt img { width: 42px; } #quick .qList li dl dd { line-height: 1.25; text-align: center; word-break: keep-all; } #quick .qList li dl dd.txt_l { font-size: 12px; } #quick .qList li dl dd.txt_s { font-size: 10px; } /* footer */ footer .back_wr { border-radius: 16px; margin-bottom: 24px; } footer .f_top { padding: 26px 20px 20px; } footer .f_top .ad_sub_L .info dl { margin-bottom: 8px; padding-right: 0; } footer .f_top .ad_sub_L .info dl dt { flex-basis: 74px; width: 74px; font-size: 14px; } footer .f_top .ad_sub_L .info dl dd { width: calc(100% - 74px); font-size: 14px; } footer .f_top .ad_sub_wr { justify-content: flex-start; gap: 16px; margin-top: 20px; } footer .f_top .ad_sub_wr a.logo-1 img { width: 210px; } footer .f_top .ad_sub_L .f_bott { padding-top: 14px; } footer .f_top .ad_sub_L .f_bott p.copy { margin-top: 16px; } footer .f_top .ad_sub_L .f_bott p.copy { font-size: 12px; line-height: 1.5; } footer .select_footer, footer .select_footer ul, footer .select_footer button.select_f_btn { width: 260px; } footer .select_footer { height: 52px; } footer .select_footer button.select_f_btn { height: 52px; font-size: 14px; } footer .select_footer ul { bottom: 54px; } footer .select_footer ul li a { font-size: 14px; } } /* ============================== max-width : 500 ============================== */ @media (max-width: 500px) { /* visual */ #visual { height: 300px; border-radius: 20px; } #visual::before{width: 230px; height: 65px;} #visual::after{width: 88px; height: 38px; border-radius: 0 0 0 10px;} #visual .vText { padding: 0 16px; bottom: 94px; } #visual .vText .vMain_txt p { font-size: 13px; padding-bottom: 8px; } #visual .vText .vMain_txt h1 { font-size: 22px; } #visual .vMore_btn { gap: 5px; padding: 8px; border-radius: 16px 16px 0 0; } #visual .vMore_btn li { height: 72px; border-radius: 10px; } #visual .vMore_btn li a { padding: 0 8px; border-radius: 10px; font-size: 12px; } #visual .vMore_btn li a span { font-size: 9px; margin-top: 2px; } #visual .vMore_btn li a .vicon img { height: 18px; } /* latest */ #latest { margin: 20px auto; } #latest h3 { font-size: 18px; } #latest .la_tit { gap: 8px; margin-bottom: 16px; } #latest .la_tit .view_more { font-size: 12px; } #latest .la_tit button[type=button] { width: 30px; height: 30px; } #latest .la_tit button[type=button] i { font-size: 30px; } #latest .la_box { padding: 18px 14px 12px; } .notice .notice_wrap li a .n_top .nDate span { font-size: 24px; } .notice .notice_wrap li a .n_top .ntit { font-size: 15px; width: calc(100% - 68px); } .resources .resources_wrap .rTit { font-size: 15px; } .banner ul li a { padding: 14px; } .banner ul li a p { font-size: 14px; } .banner ul li a dl { margin-top: 14px; } .banner ul li a dl dd img { width: 34px; } /* prof */ #prof { padding-top: 40px; padding-bottom: 40px; } #prof .prof_wrap { gap: 14px; padding-left: 12px; } #prof .prof_wrap .prof_left { gap: 8px; width: 100%; padding-right: 52px; } #prof .prof_wrap .prof_left .pTit { gap: 8px; } #prof .prof_wrap .prof_left .pTit h4 { font-size: 20px; } #prof .prof_wrap .prof_left .pTit .pMore { font-size: 12px; padding: 4px 10px; } #prof .prof_wrap .prof_left .slide_arrow { gap: 10px; } #prof .prof_wrap .prof_left .slide_arrow .sArrow img { width: 12px; } #prof .prof_wrap .prof_right .prof_list li a { width: 280px; } #prof .prof_wrap .prof_right .prof_list li a .pImg { width: 96px; height: 125px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt { width: calc(100% - 96px); padding: 8px 0 8px 10px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dt { font-size: 16px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt dl dd { font-size: 13px; } #prof .prof_wrap .prof_right .prof_list li a .pTxt .subjects p { font-size: 11px; padding: 5px 10px; } /* 관련기관 링크 */ #m-link h3 { font-size: 14px; } #m-link .link_list { gap: 10px 12px; } #m-link .link_list img { max-height: 20px; } /* 퀵메뉴 */ #quick { width: 212px; height: 164px; top: 104px; right: -176px; } #quick.active { right: -6px; } #quick .qArrow { width: 28px; height: 28px; bottom: 6px; } #quick .qArrow img { width: 10px; } #quick .qTop { top: 104px; left: 4px; } #quick .qTop p { font-size: 11px; letter-spacing: .3px; } #quick .qList { padding: 13px 0 13px 36px; gap: 6px; } #quick .qList li { padding: 0 4px; border-radius: 10px; } #quick .qList li dl { gap: 2px; } #quick .qList li dl dt img { width: 36px; } #quick .qList li dl dd.txt_l { font-size: 11px; } #quick .qList li dl dd.txt_s { font-size: 10px; } /* footer */ footer .f_top { padding: 22px 16px 18px; } footer .f_top .ad_sub_L .info dl dt { flex-basis: 66px; width: 66px; font-size: 13px; } footer .f_top .ad_sub_L .info dl dd { width: calc(100% - 66px); font-size: 13px; } footer .f_top .ad_sub_wr a.logo-1 img { width: 180px; } footer .f_top .ad_sub_L .f_bott p.copy { font-size: 11px; } footer .select_footer, footer .select_footer ul, footer .select_footer button.select_f_btn { width: 100%; } footer .select_footer { height: 48px; } footer .select_footer button.select_f_btn { height: 48px; } footer .select_footer ul { bottom: 50px; } } /* 통합 포털 고정 버튼 */ #securityPortalBtn { position: fixed; right: 30px; bottom: 105px; z-index: 999; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 148px; height: 58px; padding: 0 18px; color: #fff; background: linear-gradient(135deg, #152b6c 0%, #5539a7 100%); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 30px; box-sizing: border-box; box-shadow: 0 8px 24px rgba(8, 20, 60, 0.3); font-family: "Pretendard", sans-serif; text-decoration: none; transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } #securityPortalBtn:hover { color: #fff; background: linear-gradient(135deg, #1c3d91 0%, #6b4bc4 100%); box-shadow: 0 12px 28px rgba(8, 20, 60, 0.4); transform: translateY(-3px); } #securityPortalBtn:focus-visible { outline: 3px solid #35c7ff; outline-offset: 3px; } /* 아이콘 */ #securityPortalBtn > i { flex: 0 0 auto; font-size: 24px; line-height: 1; } /* 문구 */ #securityPortalBtn .portal-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; white-space: nowrap; } #securityPortalBtn .portal-text strong { font-size: 15px; font-weight: 700; } #securityPortalBtn .portal-text small { font-size: 11px; font-weight: 400; opacity: 0.7; } /* 태블릿·모바일 */ @media screen and (max-width: 768px) { #securityPortalBtn { right: 15px; bottom: calc(76px + env(safe-area-inset-bottom)); min-width: 50px; width: 50px; height: 50px; padding: 0; border-radius: 50%; } #securityPortalBtn > i { font-size: 22px; } /* 모바일에서는 아이콘만 표시 */ #securityPortalBtn .portal-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } }