#allWrap{position:relative;width:100%;overflow:hidden;height:100%;word-break:keep-all;} #allWrap.main{} #allWrap.main section{position:relative;} .m-bg1{position:relative;overflow: hidden;background: url("/images/main/bg1.jpg") no-repeat 0 0 #fff;background-size:100%;z-index: 0;} /* 모션 */ .a-up{transform:translateY(25px); opacity:0;} .in-view.a-up{transform:translateY(0px); opacity:1; transition:all 1s;} .a-down{transform:translateY(-25px); opacity:0;} .in-view.a-down{transform:translateY(0px); opacity:1; transition:all 1s;} .a-left{transform:translateX(15px); transition:.5s; opacity:0; transition-delay:.3s;} .a-left.in-view{transform:translateX(0px); opacity:1;} .a-right{transform:translateX(-15px); transition:.5s; opacity:0; transition-delay:.3s;} .a-right.in-view{transform:translateX(0px); opacity:1;} .a-:nth-child(1){transition-delay:.1s;} .a-:nth-child(2){transition-delay:.2s;} .a-:nth-child(3){transition-delay:.3s;} .a-:nth-child(4){transition-delay:.4s;} .a-:nth-child(5){transition-delay:.5s;} .a-:nth-child(6){transition-delay:.6s;} .a-:nth-child(7){transition-delay:.7s;} .a-:nth-child(8){transition-delay:.8s;} .a-:nth-child(9){transition-delay:.9s;} .a-:nth-child(10){transition-delay:1s;} .a-:nth-child(11){transition-delay:1.2s;} .a-:nth-child(12){transition-delay:1.3s;} .a-:nth-child(13){transition-delay:1.4s;} .a-:nth-child(14){transition-delay:1.5s;} .a-:nth-child(15){transition-delay:1.6s;} /*--------------------------------------- 비주얼 ---------------------------------------*/ #mVisual{position:relative;overflow:hidden;height: 724px;} #visual{background:#fff;position: relative;width:100%;margin: 20px auto 0px;height: 704px;} #visual .visual-wr{position: relative;overflow:hidden;border-radius: 25px;display: flex;width: 98%;margin: 0 auto;height: 100%;} #visual .visual-slide{position: absolute; width: 100%;height: 100%;top:0;z-index: 0;} #visual .visual-slide .visual-bg.slick-slide img{object-fit: cover;position: absolute;left:0%;top: 0;width: 100%;height:100%;} #visual .visual-slide .slick-active img {max-width:100%; animation:mymove 5s;} #visual .visual-slide .visual-bg.slick-current{overflow:hidden;} #visual .visual-slide .slick-list{height:100%;} #visual .visual-slide .slick-track{height:100%;} #visual .slo-wr{width: 100%;padding: 20px;display: flex;align-items: flex-end;justify-content: flex-end;} #visual .slogan{position: absolute;left: 70px;top: 50%;z-index:10;display: flex;word-break:keep-all;text-align:left;flex-direction: column;align-items: flex-start;justify-content: center;transform: translate(-0%, -50%);} #visual .slogan .slo-cont{position:relative;line-height: 1.1;font-family: "Chakra Petch", sans-serif;text-transform: uppercase;} #visual .slogan small{font-size: 40px;font-weight: 500;color: #6c6f72;display:block;line-height: 1.3;position:relative;} #visual .slogan big{color: #0e2036;font-size: 80px;font-weight: 700;display:block;position:relative;line-height: 1;letter-spacing: -1px;} #visual .slogan big .ne{width: 54px;height: 0;display: inline-block;position: relative;transition: .15s ease-out;transition-property: background, transform;} #visual .slogan big b{color:#0577e6;} #visual .slogan p{font-size:30px;font-family: 'OneGB';letter-spacing: 0;line-height: 1.2;color: #0e2036;font-weight: 700;animation-delay:1.0s;text-transform: uppercase;margin-top: 70px;} #visual .slogan p b{font-weight:500;} #visual .slogan big span, #visual p, #visual small, #visual .tag{ animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:calc(60ms * var(--char-index)); } #visual .quick{position:relative;z-index:10;} #visual .quick .q-list{display:flex;gap: 20px;} #visual .quick .q-list > li{position:relative; width:228px;height:156px;border-radius:15px;overflow:hidden;transition:.3s;} #visual .quick .q-list > li:before{ content:""; position:absolute; inset:0; overflow: hidden; border-radius: 15px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: linear-gradient(0.7turn, rgb(105 219 250 / 30%) 0%, rgb(21 80 255 / 30%) 100%); transition: opacity .35s ease; z-index:0; } #visual .quick .q-list > li:after{ content:""; position:absolute; inset:0; overflow: hidden; border-radius: 15px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgb(21 80 255 / 60%); opacity:0; transition: opacity .35s ease; z-index:0; } #visual .quick .q-list > li > a{display: flex;flex-direction: column;width: 100%;height: 100%;padding: 25px;justify-content: flex-end;position: relative; z-index:5;} #visual .quick .q-list .icon{transform-origin: 50% 70%; will-change: transform; display: flex;justify-content: flex-end;align-items: flex-start;position: absolute;right: 25px;top: 25px;} #visual .quick .q-list .icon.icon1{background:url("/images/main/q1.png") no-repeat right top; width:66px; height:60px;} #visual .quick .q-list .icon.icon2{background:url("/images/main/q2.png") no-repeat right top; width:62px; height:63px;} #visual .quick .q-list .icon.icon3{background:url("/images/main/q3.png") no-repeat right top; width:62px; height:63px;} #visual .quick .q-list .icon.icon4{background:url("/images/main/q4.png") no-repeat right top; width:64px; height:59px;} #visual .quick .q-list .tit{position:relative; display: flex; flex-direction: column; color: #fff; gap: 5px; font-family: 'OneGB';} #visual .quick .q-list .tit big{font-size: 18px;display: flex;align-items: flex-start;gap: 5px;} #visual .quick .q-list .tit big > span{font-weight: 400;} #visual .quick .q-list .tit big > i{font-size: 22px; font-weight: normal;} #visual .quick .q-list .tit small{font-size: 13px; text-transform: uppercase; opacity: .5; font-weight: 500; letter-spacing: .5px; font-family: "Chakra Petch", sans-serif;} #visual .quick .q-list .tit big .arr{position: relative;border-radius:50%;font-size: 20px;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;z-index: 10;} #visual .quick .q-list .tit big .arr i{display:none;position: absolute;top: 50%;line-height: 1;font-weight: normal;transform: translate(-0%, -50%);transition: opacity 0.2s, margin 0.2s;} #visual .quick .q-list .tit big .arr i.on{display:block;opacity: 0;margin-top: max(3.3px, 0.3255208333vw);margin-right: max(3.3px, 0.3255208333vw);} #visual .quick .q-list .tit big .arr i.off{display: block;opacity: 1;} #visual .quick .q-list > li:hover:before{opacity:0;} #visual .quick .q-list > li:hover:after{opacity:1;} #visual .quick .q-list > li:hover .arr i.on{animation: outlinkAnimationBefore 0.3s forwards 0.3s;color: #00ffad;} #visual .quick .q-list > li:hover .arr i.off{animation: outlinkAnimationAfter 0.3s forwards;} #visual .quick .q-list > li:hover .icon{animation: iconYBounce 1.6s cubic-bezier(.45,0,.55,1) infinite;} @keyframes iconYBounce{ 0% {transform: translateY(0);} 20% {transform: translateY(-8px);} 40% {transform: translateY(0);} 60% {transform: translateY(-4px);} 80% {transform: translateY(0);} 100% {transform: translateY(0);} } @keyframes outlinkAnimationBefore { from {margin-top: max(2.64px, 0.2604166667vw); margin-right: max(2.64px, 0.2604166667vw); opacity: 0;} to {margin-top: 0; margin-right: 0; opacity: 1;} } @keyframes outlinkAnimationAfter { from {opacity: 1; margin-top: 0; margin-right: 0;} to {opacity: 0; margin-top: calc(max(2.64px, 0.2604166667vw) * -1); margin-right: calc(max(2.64px, 0.2604166667vw) * -1);} } @media (min-width: 1980px){ #visual .quick {width: 100%;} #visual .quick .q-list {justify-content: center;} } @media (max-width: 1380px){ #visual .slo-wr {align-items: center; justify-content: flex-end; flex-direction: column; gap: 100px;} #visual .slogan {position: relative; left: auto; top: auto; text-align: center; flex-direction: column; align-items: center; justify-content: center; transform: translate(-0%, -0%);} #visual .slogan big .ne{display:none;} #visual .slogan small {font-size: 36px;} #visual .slogan big {font-size: 70px;} #visual .slogan p {font-size: 24px; margin-top: 40px;} } @media (max-width: 1280px){ #visual .quick {width: 100%;} #visual .quick .q-list {gap: 10px; flex-wrap: wrap;} #visual .quick .q-list > li {width: auto; flex: 1 1 20%;} } @media (max-width: 767px){ #mVisual{height:560px;} #visual {margin: 10px auto 0px;height: 550px;} #visual .visual-wr{width:95%;} #visual .slogan {position:relative; top: auto; left: auto; text-align: center; align-items: center; transform: translate(-0%, -0%);} #visual .slogan small {font-size: 24px;} #visual .slogan big {font-size: 34px;} #visual .slogan p {font-size: 18px; margin-top: 40px;} #visual .slo-wr {justify-content: flex-end; align-items: center; flex-direction: column; gap: 40px; padding: 10px;} #visual .quick .q-list > li {height: 100px; border-radius: 15px;} #visual .quick .q-list > li > a {padding: 15px;} #visual .quick .q-list .icon {right: 15px; top: 15px;} #visual .quick .q-list .icon.icon1{background-size:100%; width:30px; height:29px;} #visual .quick .q-list .icon.icon2{background-size:100%; width:32px; height:33px;} #visual .quick .q-list .icon.icon3{background-size:100%; width:32px; height:33px;} #visual .quick .q-list .icon.icon4{background-size:100%; width:34px; height:31px;} #visual .quick .q-list .tit big {font-size: 16px;} #visual .quick .q-list .tit small{display:none;} } @media (max-width: 480px){ #visual .quick .q-list > li {flex:1 1 45%;} } /*--------------------------------------- 타이틀 공통 ---------------------------------------*/ #allWrap .m-tit{font-family:'OneGB';display: block;word-break:keep-all;text-align: left;padding-bottom: 20px;position: relative;} #allWrap .m-tit .flex-tit{display: flex;justify-content: space-between;align-items: flex-end;gap: 15px;padding-bottom: 10px;} #allWrap .m-tit .tit{/* display: inline-flex; */width: calc(100% - 148px);flex-direction: column;} #allWrap .m-tit .tit big{font-size:30px;font-weight: 600;color:#1c2c73;position:relative;display:inline-block;} #allWrap .m-tit .tit big:before {width: 8px;height: 8px;border-radius: 50%;background: #1c2c73;display: inline-block;content: "";position: absolute;right: -12px;top: -4px;transition: .3s;} #allWrap .m-tit p{font-family:'OneGB';display:block;font-size:18px;font-weight:500;color:#666;letter-spacing:0;line-height: 1.5;} #allWrap .more-btn{ font-family: "Chakra Petch", sans-serif; font-size: 15px; letter-spacing: 0; color: #0e2036; border-color: transparent !important; background-color: rgba(255, 255, 255, 0); position:relative; display: inline-block; text-align: center; line-height: 1.9; border-radius: 15px; padding: 10px 24px 11px calc(23px + 1.42857em); transition: all 0.3s; min-width: 58px; cursor: pointer; pointer-events: auto; box-sizing: border-box; background-origin: border-box !important; z-index: 1; min-width: 148px; } #allWrap .more-btn:after{ content: ''; position: absolute; z-index: -1; top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 1px; border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; box-sizing: border-box; background: linear-gradient(262deg, #2ac2d2 14.51%, #68a1ff 95.96%); } #allWrap .more-btn i{position: absolute;left: 23px;font-size: 18px;top: 50%;transform: translateY(-50%);transition: opacity 0.3s, transform 0.3s;} #allWrap .more-btn i.right{opacity: 0;right: 24px;left: initial;transform: translateY(-50%) translateX(1em);} #allWrap .more-btn .button-inner{position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;padding: inherit;background: none;border-radius: inherit;box-sizing: border-box;overflow: hidden;z-index: -1;} #allWrap .more-btn:hover{color:#fff; padding: 10px calc(23px + 1.42857em) 11px 24px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); background-color: #0e2036;} #allWrap .more-btn:hover i.left{opacity: 0;transform: translateY(-50%) translateX(-1em);} #allWrap .more-btn:hover i.right{opacity: 1;transform: translateY(-50%) translateX(0);} #allWrap .more-btn:hover:after{background: linear-gradient(262deg, #0e2036 14.51%, #0e2036 95.96%);} @media (max-width: 767px){ #allWrap .m-tit .tit big {font-size: 22px;} #allWrap .m-tit .tit big:before {width: 6px; height: 6px; right: -8px; top: -2px;} #allWrap .more-btn, #allWrap .m-tit .more-btn{margin-bottom:0; padding: 7px 24px 8px calc(22px + 1.3em);} #allWrap .more-btn:hover, #allWrap .m-tit .more-btn:hover {padding: 7px calc(21px + 1.5em) 8px 24px;border-radius: 13px;} } /*--------------------------------------- 공지 + 이벤트 ---------------------------------------*/ #se1{margin-top:80px;} #se1 article{display:flex;max-width: 1840px;margin: 0 auto;width: 100%;gap: 35px;height: 405px;} #mNotice{background:rgb(5 119 230 / 10%);border-radius: 30px 0 30px 30px;position:relative;padding: 0px 0 35px 45px;backdrop-filter: blur(8px);width: calc(100% - 446px);overflow: hidden;} #mNotice .nocon{} #mNotice .nocon .guide{width:100%;display:flex;position:relative;align-items: flex-start;margin-bottom: 30px;padding-top: 35px;} #mNotice .nocon .m-tit{width: 52px;} #mNotice .nocon .notab{position:relative;display: flex;gap: 35px;padding-top: 18px;padding-bottom: 15px;padding-left: 80px;width: calc(100% - 50px);} #mNotice .nocon .notab button.tab-link{/* position:relative; */cursor:pointer;box-sizing:border-box;background: none;border: none;} #mNotice .nocon .notab button.tab-link span.tab{border:none;outline:none;font-size: 18px;margin:0;text-align:center;color: #0e2036;line-height:1;font-family: 'OneGB';background: transparent;border-radius: 50px;font-weight: 600;position:relative;display: block;padding-bottom: 7px;transition: .2s;} #mNotice .nocon .notab button.tab-link span.tab:before{content:"";width: 100%;height: 2px;display:block;position:absolute;left: 0;bottom: 0;transform: translate(0%, 0%);transition: .2s;} #mNotice .nocon .notab button.tab-link em{position:relative;font-style:normal;z-index:5;} #mNotice .nocon .notab button.tab-link .btn-box{ width: 50px; height: 50px; font-size: 24px; display:flex; letter-spacing: 0; color: #0e2036; border-color: transparent !important; background-color: rgba(255, 255, 255, 0); position: relative; text-align: center; line-height: 1.9; border-radius: 19px; transition: all 0.3s; cursor: pointer; pointer-events: auto; box-sizing: border-box; background-origin: border-box !important; justify-content: center; align-items: center; } #mNotice .nocon .notab button.tab-link .btn-box:after{ content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 1px; border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; box-sizing: border-box; background: linear-gradient(262deg, #2ac2d2 14.51%, #68a1ff 95.96%); } #mNotice .nocon .notab button.tab-link .btn-box i{transition: .3s; line-height:1; font-weight:normal;} #mNotice .nocon .notab button.tab-link .btn-box:hover{color:#fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); background-color: #0e2036;} #mNotice .nocon .notab button.tab-link .btn-box:hover:after{background: linear-gradient(262deg, #0e2036 14.51%, #0e2036 95.96%);} #mNotice .nocon .notab button.tab-link .btn-box:hover i{transform:rotate(90deg);} #mNotice .nocon .notab button.tab-link.active .noti-control {} #mNotice .nocon .notab button.tab-link.active span.tab{color: #0577e6;} #mNotice .nocon .notab button.tab-link.active span.tab:before{background: #0577e6;animation:strach .3s;} #mNotice .nocon .notab > button.tab-link:hover, #mNotice .nocon .notab > button.tab-link.active{opacity:1;background-position-y: 10%;} #mNotice .nocon .noti-control{--cut:25px;display:flex;right: 0;position:absolute;top: -35px;margin: 0;background: #fff;border-radius: 0 0 0 30px;padding: 0 0 13px 13px;gap: 10px;align-items: center;} #mNotice .nocon .noti-control:before, #mNotice .nocon .noti-control:after{content:""; position:absolute; width:var(--cut); height:var(--cut); background: #fff; pointer-events:none;} #mNotice .nocon .noti-control:before{left: -25px; top: 0; mask: radial-gradient(circle at 0 100%, transparent 69%, #000 70%);} #mNotice .nocon .noti-control:after{right:0; bottom:calc(var(--cut) * -1); mask: radial-gradient(circle at 0 100%, transparent 69%, #000 70%);} #mNotice .nocon .noti-control .noti-arrow{} #mNotice .nocon .noti-control .noti-arrow{width:96px;height: 48px;display:inline-flex;border-radius: 19px;border: 1px solid #3a4862;justify-content: center;} #mNotice .nocon .noti-control .noti-arrow .arr{width:50%;background:none;border:0;font-size: 26px;color: #0e2036;display: flex;transition: all 0.3s;justify-content: center;align-items: center;} #mNotice .nocon .noti-control .noti-arrow .arr:hover{color:#888;} #mNotice .nocon .notab button.tab-link .noti-control{display:none;} #mNotice .nocon .notab button.tab-link.active .noti-control{display:flex;} #mNotice .nocon .tab-content{display:none;overflow: hidden;} #mNotice .nocon .tab-content.active{display:block;} #mNotice .edu-list{position:relative;height: 280px;/* padding: 0 10px; */} #mNotice .edu-list .slick-list{margin: 0 -30px;} #mNotice .edu-list .slick-track{margin: 0;} #mNotice .edu-list .slick-slide{} #mNotice .item-edu{margin: 0 30px;position:relative;transition:.3s;position:relative;/* height: 440px; */} #mNotice .item-edu a{color: inherit;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;transition: .3s;height: 100%;width: 100%;} #mNotice .item-edu .el-img{position: relative;overflow: hidden;border: 1px solid #ddd;background: #f5f5f5;} #mNotice .item-edu .thumb {aspect-ratio: 16 / 9;margin-bottom: 15px;} #mNotice .item-edu .thumb img{max-width:100%;height: 100%;} #mNotice .item-edu .cate {display: block;font-size: 17px;line-height: 1;font-weight: 800;color: #00b29c;margin-bottom: 1em;text-transform: uppercase;font-family: "Montserrat", serif;} #mNotice .item-edu .cont{min-height: 127px;display: flex;flex-direction: column;align-items: flex-start;} #mNotice .item-edu .tit {font-size: 22px;line-height: 1.4;font-weight: bold;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;color: #222;height: 61px;} #mNotice .item-edu .icon{border-radius: 11px;padding: 6px 16px;background: #fff;position:relative;font-size: 14px;font-family: 'OneGB';font-weight: 600;margin-bottom: 15px;} #mNotice .item-edu .icon.icon1{color:#004ea2;} #mNotice .item-edu .icon.icon2{color:#a23200;} #mNotice .item-edu .icon.icon3{color:#0098a2;} #mNotice .item-edu .txt-wr{display:flex;flex-wrap: wrap;font-family: 'OneGB';} #mNotice .item-edu .date{font-family:"Chakra Petch", sans-serif;display: flex;flex-direction: column;align-items: center;text-align: center;padding-left: 5px;width: 60px;} #mNotice .item-edu .date .day{color: #0577e6;font-size:43px;font-weight:600;line-height: 1;} #mNotice .item-edu .date .month{font-size:14px; font-weight:600; color:#0577e6;} #mNotice .item-edu .txt-wr .tit{font-size:19px;font-weight:600;padding-top: 5px;width: calc(100% - 60px);padding-left: 25px;} #mNotice .item-edu .txt-wr .txt{width:100%;font-size: 15px;line-height:1.5;margin-top: 40px;display: block;padding: 0 30px 0 5px;} #mNotice .item-edu:hover{/* background:#fff; */} #mNotice .item-edu:hover .year{color:#146eb8; border-color:#146eb8;} #mNotice .item-edu:hover .pub-tit{color:#202454;} #mNotice .item-edu:hover .pub-txt{color:#202454;opacity:1;} #mNotice .edu-control{position:relative; display:block; z-index:10; margin-top:90px;} #mNotice .edu-control .edu-arrow{display:flex; gap:10px; font-size:0; margin:0; padding:0;} #mNotice .edu-control .edu-arrow .slick-arrow{display:block /*!important*/; background:#fff; border:1px solid #dcdcdc; position:relative; font-size:24px; text-align:center; line-height:60px; width:60px; height:60px; border:0; border-radius:50%; transition:.3s; color:#222;} #mNotice .edu-control .edu-arrow .slick-arrow i{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:19px;} #mNotice .edu-control .edu-arrow .slick-arrow:hover{transform:translateY(-2px); box-shadow:6px 8px 10px 0px rgba(0, 0, 0, 0.1);} #mNotice .empty{font-size: 18px;color: #666;text-align: center;min-height: 150px;display: flex;justify-content: center;align-items: center;width: 100% !important;min-width: 100%;white-space: nowrap;} /* 무한롤링용 추가코드 */ #mNotice .tab-content{overflow:hidden;} #mNotice .edu-slide{display:flex;} #mNotice .edu-slide .item-edu{flex:0 0 auto;} #mNotice .edu-slide .slick-track{transition-timing-function:ease !important;} /* 이벤트 */ #Event{background:#0577e6;border-radius:30px;position:relative;padding: 35px 45px;width: 446px;z-index: 5;} #Event .item-tit {font-size:18px;color:#cee8ff;text-decoration:underline;font-family: 'Paperozi';text-transform: uppercase;display: block;margin-bottom: 30px;} #Event .empty{display:flex;color:#fff;width: 100%;height: 100%;font-size: 15px;opacity: .7;justify-content: center;align-items: center;font-family: 'OneGB';} #Event .event-control{--cut: 25px;display:flex;right: -45px;position:absolute;top: -35px;margin: 0;background: #fff;border-radius: 0 0 0 30px;padding: 0 0 13px 13px;gap: 10px;align-items: center;} #Event .event-control:before, #Event .event-control:after{content:""; position:absolute; width:var(--cut); height:var(--cut); background: #fff; pointer-events:none;} #Event .event-control:before{left: -25px; top: 0; mask: radial-gradient(circle at 0 100%, transparent 69%, #000 70%);} #Event .event-control:after{right:0; bottom:calc(var(--cut) * -1); mask: radial-gradient(circle at 0 100%, transparent 69%, #000 70%);} #Event .event-control .btn-box{ width: 50px; height: 50px; font-size: 24px; display:flex; letter-spacing: 0; color: #0e2036; border-color: transparent !important; background-color: rgba(255, 255, 255, 0); position: relative; text-align: center; line-height: 1.9; border-radius: 19px; transition: all 0.3s; cursor: pointer; pointer-events: auto; box-sizing: border-box; background-origin: border-box !important; justify-content: center; align-items: center; } #Event .event-control .btn-box:after{ content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; padding: 1px; border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; box-sizing: border-box; background: linear-gradient(262deg, #2ac2d2 14.51%, #68a1ff 95.96%); } #Event .event-control .btn-box i{transition: .3s; line-height:1; font-weight:normal;} #Event .event-control .btn-box:hover{color:#fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); background-color: #0e2036;} #Event .event-control .btn-box:hover:after{background: linear-gradient(262deg, #0e2036 14.51%, #0e2036 95.96%);} #Event .event-control .btn-box:hover i{transform:rotate(90deg);} #Event .semi-item .semi-slide{} #Event .semi-item .slick-slide{position:relative; overflow:hidden;} #Event .semi-item .slick-list{width:100% !important;} #Event .semi-item .semi-txt{justify-content: space-between;position: relative;width: 100%;height: 285px;display: block;z-index: 5;font-family: 'OneGB';color: #fff;position: relative;} #Event .semi-item .semi-txt .tit{font-size: 25px; line-height: 1.4; font-weight: bold; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: .3s; color: #fff; height: 100px;} #Event .semi-item .semi-txt .tit:hover{text-decoration:underline;} #Event .semi-item .semi-txt .info{font-size: 18px;line-height: 1.3;display: flex;flex-direction: column;align-items: flex-end;position: relative;margin-top: 40px;} #Event .semi-item .semi-txt .info > dl{display: flex;gap: 15px;align-items: flex-start;text-align: left;width: 100%;justify-content: flex-start;} #Event .semi-item .semi-txt .info > dl + dl{margin-top:5px} #Event .semi-item .semi-txt .info > dl > dt{font-size: 20px;font-weight: normal;} #Event .semi-item .semi-txt .info > dl > dt > i{font-weight: normal;} #Event .semi-item .semi-txt .info > dl > dd{padding-top: 2px;font-weight: 400;} #Event .semi-item .semi-txt .em{position:relative; font-size: 18px;font-weight: 400;opacity: .6;text-align: center;height:100%;display: flex;justify-content: center;align-items: center; z-index:5;} #Event .semi-item .bottom-txt{} #Event .semi-item .bottom-txt img{width:90%; max-width:100%;} #Event .semi-item .slick-dots{position:absolute;bottom: 0;left:0;display: flex;gap: 15px;} #Event .semi-item .slick-dots > li{} #Event .semi-item .slick-dots > li.slick-active button{opacity:1; background:#48d1df;} #Event .semi-item .slick-dots button{transition:.3s; border:0; border-radius:50%; opacity:.7; width:10px; height:10px; background:#fff; font-size:0;} @media (max-width: 1840px){ #se1 article{width: 95%;} } @media (max-width: 1280px){ #se1 article {gap: 30px; height: auto; flex-direction: column; align-items: center;} #mNotice{width:100%;} #Event{width:100%;} #Event .semi-item .slick-list{margin: 0 -30px;} #Event .semi-txt{margin: 0 30px;} } @media (max-width: 767px){ .m-bg1 {background: url("/images/main/bg1.jpg") no-repeat 0 50% #fff;} #se1 {margin-top: 30px;} #mNotice {border-radius: 20px 0 20px 20px; padding: 0px 0 20px 20px;} #mNotice .nocon .guide {width: 100%; align-items: flex-start; margin-bottom: 20px; padding-top: 20px; flex-direction: column;} #mNotice .nocon .notab {gap: 20px; padding-top: 0; padding-bottom: 0; padding-left: 0; width: 100%;} #mNotice .nocon .noti-control {--cut: 20px;right: 0px;top: -66px;border-radius: 0 0 0 20px;padding: 0 0 10px 10px;} #mNotice .nocon .noti-control:before {left: -20px;} #mNotice .nocon .noti-control .noti-arrow {width: 80px; height: 43px; border-radius: 13px;} #mNotice .nocon .notab button.tab-link span.tab{font-size:16px;} #mNotice .nocon .notab button.tab-link .btn-box {width: 43px; height: 43px; font-size: 20px; border-radius: 14px;} #mNotice .edu-list {height: 200px;} #Event {border-radius:20px 0 20px 20px; padding: 20px;} #Event .semi-item .slick-list{margin: 0;} #Event .semi-item .semi-txt {height: 180px;} #Event .item-tit {font-size: 18px; margin-bottom: 20px;} #Event .semi-txt{margin: 0;} #Event .event-control {--cut: 20px; right: -20px; top: -20px; border-radius: 0 0 0 20px; padding: 0 0 10px 10px;} #Event .event-control:before {left: -20px;} #Event .event-control .btn-box {width: 43px; height: 43px; font-size: 20px; border-radius: 14px;} #Event .semi-item .semi-txt .tit { font-size: 20px; height: 55px;} #Event .semi-item .semi-txt .info {font-size: 15px; margin-top: 20px;} } /*--------------------------------------- 소식 ---------------------------------------*/ #se2{margin-top:70px;} #mNews{max-width: 1840px;margin: 0 auto;width: 100%;background: rgb(36 105 195 / 5%);border-radius: 30px;padding: 40px;backdrop-filter: blur(8px);} #mNews .necon{} #mNews .necon .guide{width:100%;display:flex;position:relative;align-items: flex-end;margin-bottom: 30px;} #mNews .necon .m-tit{width: 52px;} #mNews .necon .notab{position:relative;display: flex;gap: 35px;padding-bottom: 15px;padding-left: 80px;width: calc(100% - 50px);} #mNews .necon .notab button.tab-link{/* position:relative; */cursor:pointer;box-sizing:border-box;background: none;border: none;} #mNews .necon .notab button.tab-link span.tab{border:none;outline:none;font-size: 18px;margin:0;text-align:center;color: #0e2036;line-height:1;font-family: 'OneGB';background: transparent;border-radius: 50px;font-weight: 600;position:relative;display: block;padding-bottom: 7px;transition: .2s;} #mNews .necon .notab button.tab-link span.tab:before{content:"";width: 100%;height: 2px;display:block;position:absolute;left: 0;bottom: 0;transform: translate(0%, 0%);transition: .2s;} #mNews .necon .notab button.tab-link em{position:relative;font-style:normal;z-index:5;} #mNews .necon .notab button.tab-link.active .news-control {} #mNews .necon .notab button.tab-link.active span.tab{color: #0577e6;} #mNews .necon .notab button.tab-link.active span.tab:before{background: #0577e6;animation:strach .3s;} #mNews .necon .notab > button.tab-link:hover, #mNews .necon .notab > button.tab-link.active{opacity:1;background-position-y: 10%;} #mNews .necon .news-control{display:flex;right: 0;position:absolute;bottom: 0;margin: 0;gap: 10px;align-items: center;} #mNews .necon .news-control:before, #mNews .necon .news-control:after{content:""; position:absolute; width:var(--cut); height:var(--cut); background: #fff; pointer-events:none;} #mNews .necon .news-control:before{left: -25px; top: 0; mask: radial-gradient(circle at 0 100%, transparent 69%, #000 70%);} #mNews .necon .news-control:after{right:0; bottom:calc(var(--cut) * -1); mask: radial-gradient(circle at 0 100%, transparent 69%, #000 70%);} #mNews .necon .news-control .news-arrow{} #mNews .necon .news-control .news-arrow{width:96px;height: 48px;display:inline-flex;border-radius: 19px;border: 1px solid #3a4862;justify-content: center;} #mNews .necon .news-control .news-arrow .arr{width:50%;background:none;border:0;font-size: 26px;color: #0e2036;display: flex;transition: all 0.3s;justify-content: center;align-items: center;} #mNews .necon .news-control .news-arrow .arr:hover{color:#888;} #mNews .necon .notab button.tab-link .news-control{display:none;} #mNews .necon .notab button.tab-link.active .news-control{display:flex;} #mNews .necon .tab-content{display:none;overflow: hidden;} #mNews .necon .tab-content.active{display:block;} #mNews .news-list{position:relative;} #mNews .news-list .slick-list{margin:0 -20px;} #mNews .news-list .slick-track{} #mNews .news-list .slick-slide{} #mNews .item-news{margin:0 20px;position:relative;transition:.3s;position:relative;/*height: 440px;*/} #mNews .item-news a{color: inherit;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;transition: .3s;height: 100%;width: 100%;} #mNews .item-news .icon{padding: 10px 15px; background: linear-gradient(0.4turn, rgb(94 86 216) 0%, rgb(31 180 199) 100%); position: absolute; font-size: 15px; line-height: 1; color: #fff; border-radius: 100px; bottom: 12px; left: 12px;} #mNews .item-news .el-img{position: relative;overflow: hidden;} #mNews .item-news .thumb {aspect-ratio: 1 / 0.62791;border-radius: 30px;margin-bottom: clamp(26px, 7.222vw * 0.5, 40px);} #mNews .item-news .thumb img{max-width:100%;} #mNews .item-news .date {position: relative;margin-top: 20px;opacity: .5;font-family: "Chakra Petch", sans-serif;font-size: 15px;} #mNews .item-news .date .month {font-size: 12px;font-weight: 500;letter-spacing: 0;line-height: 1;color: #808080;} #mNews .item-news .date .day {font-size: 24px;line-height: 1;font-weight: 700;} #mNews .item-news .cate {display: block;font-size: 17px;line-height: 1;font-weight: 800;color: #00b29c;margin-bottom: 1em;text-transform: uppercase;font-family: "Montserrat", serif;} #mNews .item-news .cont{min-height: 127px; display: flex; flex-direction: column;} #mNews .item-news .tit {font-size: 22px;line-height: 1.4;font-weight: bold;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;color: #222;} #mNews .item-news .origin {display: block; font-size: var(--size14-13); line-height: 1; color: #666; margin-top: 2em;} #mNews .item-news .box:hover .tit {text-decoration: underline; color: var(--color-point2);} #mNews .item-news:hover{/* background:#fff; */} #mNews .item-news:hover .year{color:#146eb8; border-color:#146eb8;} #mNews .item-news:hover .pub-tit{color:#202454;} #mNews .item-news:hover .pub-txt{color:#202454;opacity:1;} #mNews .empty{font-size: 18px;color: #666;text-align: center;min-height: 424.44px;display: flex;justify-content: center;align-items: center;width: 100% !important;min-width: 100%;white-space: nowrap;} @media (max-width: 1840px){ #mNews{width: 95%;} } @media (max-width: 767px){ #se2 {margin-top: 30px;} #mNews {border-radius: 20px; padding: 20px;} #mNews .necon .guide {width: 100%; align-items: center; margin-bottom:20px; flex-direction: column; justify-content: flex-end;} #mNews .necon .notab {gap: 25px;padding-bottom: 60px;padding-left: 0;width: 100%;justify-content: center;} #mNews .necon .notab button.tab-link span.tab{font-size:16px;} #mNews .necon .notab button.tab-link.active .news-control {width: 100%; justify-content: center; align-items: flex-end;} #mNews .necon .news-control .news-arrow {width: 80px; height: 43px; border-radius: 13px;} #mNews .item-news .thumb {border-radius: 20px;} #mNews .item-news .tit {font-size: 20px;} } /*--------------------------------------- 전공소개 + 연구성과 ---------------------------------------*/ #se3{margin-top:70px;} #se3 > article{display:flex;max-width: 1840px;margin: 0 auto;width: 100%;gap: 35px;} /* 전공소개 */ #mMajor{background:#7788e6;border-radius:30px;position:relative;padding: 35px;width: 802px;} #mMajor .m-tit{} #mMajor .m-tit .flex-tit{} #mMajor .m-tit .tit{} #mMajor .m-tit .tit big{color:#fff;} #mMajor .m-tit .tit big:before{background:#fff;} #mMajor .m-tit .more-btn{color:#fff;} #major-acco .accordion-list-box{} #major-acco .accordion-list-box .accordion-list{display:table;width:100%;height:430px;overflow:hidden;} #major-acco .accordion-list .accordion-item{width:180px;display:table-cell;height:100%;} #major-acco .accordion-list .accordion-item{position:relative; overflow:hidden;} #major-acco .accordion-list .accordion-item + .accordion-item{padding-left:15px;} #major-acco .accordion-list .accordion-item .accordion-inner{display:block;position:relative;height:100%;margin:0;cursor:pointer;border-radius:25px;background-color:rgb(255 255 255 / 15%);backdrop-filter:blur(10px);} #major-acco .accordion-list .accordion-item.is-open .accordion-inner{/* background-color: rgb(66 98 255 / 60%); */} #major-acco .accordion-item01 .accordion-inner{background:url("/images/main/m1.jpg") no-repeat 50% 50% / cover;} #major-acco .accordion-item02 .accordion-inner{background:url("/images/main/m2.jpg") no-repeat 50% 50% / cover;} #major-acco .accordion-item03 .accordion-inner{background:url("/images/main/m3.jpg") no-repeat 50% 50% / cover;} /* 아코디언 :: 타이틀 및 내용 */ #major-acco .accordion-item .accordion-inner .accordion-tit{ position:absolute;top:0;width:100%;height:100%;z-index:1;opacity:1.0;display:flex;filter:Alpha(opacity=100); transition:opacity 0.3s;flex-direction:column;justify-content:flex-end;padding:10px; } #major-acco .in-btm{display:flex;padding:15px 15px;flex-direction:column;gap:40px;} #major-acco .accordion-item .accordion-inner .accordion-tit .in-btm{display:flex;flex-direction:column;} #major-acco .accordion-item .accordion-info-tit{font-family:'OneGB';font-weight:600;font-size:28px;line-height:1.3;color:#fff;transition:.3s;} #major-acco .in-more{position:relative;} #major-acco .in-more a{background:#fff;border-radius:15px;width:100%;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;padding:10px 10px 10px 15px;line-height:1;transition:.3s;font-family:"Chakra Petch", sans-serif;} #major-acco .in-more a i{font-size:24px;font-weight:normal;} #major-acco .in-more a:hover{background:#00BCD4;color:#fff;} #major-acco .accordion-item .accordion-inner .plus-icon{position:absolute;z-index:9;width:100%;left:0;top:0;padding:15px 15px;display:flex;justify-content:flex-end;align-items:center;transition:.3s;} #major-acco .accordion-item .accordion-inner .plus-icon span{transition:.3s;display:none;font-family:"Chakra Petch", sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;color:#fff;border:1px solid #fff;border-radius:100px;text-transform:uppercase;padding:8px 15px;line-height:1;white-space:nowrap;position:absolute;left:15px;top:15px;} #major-acco .accordion-item .accordion-inner .plus-icon i{width:43px;height:43px;display:flex;border-radius:50%;background:#fff;color:#000;font-weight:normal;font-size:24px;justify-content:center;align-items:center;transition:.3s;} #major-acco .accordion-item .accordion-info-box{position:absolute;left:0;right:0;bottom:0px;top:0;display:flex;width:100%;height:100%;} #major-acco .accordion-item .accordion-info-box .accordion-info-inner{display:flex;width:100%;height:100%;flex-direction:column;justify-content:flex-end;} #major-acco .accordion-item.is-open .accordion-inner .plus-icon span{display:block;} #major-acco .accordion-item.is-open .accordion-inner .plus-icon i{transform:rotate(45deg);} #major-acco .accordion-item.is-open .accordion-inner{cursor:default;} /* 연구성과 */ #mRsch{background: linear-gradient(to right, rgb(53 65 173) 0%, #7090ef 50%, rgb(73 41 163) 100%);border-radius:30px;position:relative;padding: 35px;width: calc(100% - 802px);} #mRsch .m-tit{} #mRsch .m-tit .flex-tit{} #mRsch .m-tit .tit{} #mRsch .m-tit .tit big{color:#fff;} #mRsch .m-tit .tit big:before{background:#fff;} #mRsch .m-tit .more-btn{color:#fff;} #mRsch .lat{position: relative;height: 100%;display: flex;} #mRsch .lat .left-big{width: 52%;position:relative;} #mRsch .lat .right-list{width: 48%;position:relative;margin-left: 40px;padding-left: 35px;display: flex;flex-direction: column;justify-content: center;} #mRsch .lat .right-list:before{content:"";border-left: 1px solid #ffffff29;height:100%;display: block;left: 0;position: absolute;} #mRsch .lat .first{position: relative;} #mRsch .lat .first a{display:flex;flex-direction: column;} #mRsch .lat .first .img{position:relative;width: 100%;background: #fff;overflow:hidden;aspect-ratio: 1 / 0.62791;border-radius: 25px;margin-bottom: 30px;} #mRsch .lat .first .img img{max-width:100%; height:100%; top:50%; left:50%; transform:translate(-50%, -50%); position:absolute;} #mRsch .lat .first .txt{position:relative;} #mRsch .lat .first .f-tit{color: #fff;font-size: 24px;line-height: 1.4;font-weight: bold;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;} #mRsch .lat .first .f-tit .icon-noti{border-radius:2px; background:#ec6c61; font-size:12px; color:#fff; padding:2px 15px; margin-right:10px;} #mRsch .lat .first .f-txt{overflow:hidden;margin-top:15px;display:block;color:#868686;font-weight: normal;font-size: 17px;line-height:1.6;letter-spacing:-0.2px;word-break:break-all;} #mRsch .lat .first .lt-date{position: relative;margin-top: 15px;display: block;opacity: .5;color: #fff;font-family: "Chakra Petch", sans-serif;font-size: 15px;} #mRsch .lat .list{margin-bottom:0;position:relative;display: flex;flex-direction: column;} #mRsch .lat .list + .list{margin-top: 20px;padding-top: 20px;border-top:1px solid #ffffff29;} #mRsch .lat .list a{} #mRsch .lat .list .s-txt{font-size: 20px;color: #fff;line-height: 1.4;font-weight: bold;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;height: 55px;} #mRsch .lat .list .lt-date{position: relative;margin-top: 10px;opacity: .5;color: #fff;font-family: "Chakra Petch", sans-serif;font-size: 15px;} #mRsch .lat .first a:hover .f-tit, #mRsch .lat .list a:hover .s-txt{color:#5ee4f2;} #mRsch .lat .empty{display:block;position:absolute;width:100%;height:100%;left:0;bottom: 0;max-height:300px;text-align:center;font-size: 17px;color: #fff;} @media (max-width: 1840px){ #se3 > article {width: 95%;} } @media (max-width: 1580px){ #se3 > article {gap: 30px; flex-direction: column; align-items: center;} #mMajor {width: 100%;} #mRsch {width: 100%;} } @media (max-width: 767px){ #se3 {margin-top: 30px;} #se3 > article {gap:30px;} #mMajor {border-radius: 20px; padding: 20px;} #major-acco .accordion-list-box .accordion-list{display:block; height:auto; overflow:visible;} #major-acco .accordion-list .accordion-item{display:block; width:100% !important; height:auto; padding-left:0;} #major-acco .accordion-list .accordion-item + .accordion-item{margin-top:12px;} #major-acco .accordion-list .accordion-item + .accordion-item {padding-left: 0px;} #major-acco .accordion-list .accordion-item .accordion-inner{height:auto;min-height: 200px;cursor:default;border-radius: 15px;} #major-acco .accordion-list .accordion-item.is-open .accordion-inner{min-height: 200px;border-radius: 20px;} #major-acco .accordion-item .plus-icon{display:none;} #major-acco .in-btm{gap:20px;} #major-acco .accordion-item .accordion-info-tit{font-size:22px;} #major-acco .accordion-item .accordion-inner .plus-icon{padding:0;} #major-acco .accordion-item .accordion-inner .plus-icon span{display:block;} #major-acco .accordion-item .accordion-inner .plus-icon i{display:none;} #mRsch {border-radius: 20px; padding: 20px;} #mRsch .m-tit {padding: 0;} #mMajor .m-tit .flex-tit, #mRsch .m-tit .flex-tit {justify-content: space-between;align-items: flex-end;flex-direction: row;padding: 0;} #mRsch .lat {flex-direction: column; align-items: center;} #mRsch .lat .left-big {width: 100%;} #mRsch .lat .right-list {width: 100%; margin-left: 0; padding-left: 0;} #mRsch .lat .right-list:before{display:none;} #mRsch .lat .first{padding:20px 0;margin-bottom: 20px;border-bottom: 1px solid #ffffff29;} #mRsch .lat .first a{flex-direction:column;} #mRsch .lat .first .img{width:100%;height:auto;padding-bottom: 0;aspect-ratio: 1 / 0.5;margin: 0;border-radius: 15px;} #mRsch .lat .first .img img{height:auto; width:100%;} #mRsch .lat .first .txt{padding-left:0;width:100%;padding-top: 20px;} #mRsch .lat .list .s-txt {font-size: 16px; height: 43px;} #mRsch .lat .first .f-tit{font-size:20px;} #mRsch .lat .first .f-txt{margin-top:10px;} #mRsch .lat .first .lt-date{position:relative; bottom:0; left:0; margin-top:10px; display:block;} #mRsch .lat .list:before{top:15px; transform:translate(0, 0%) rotate(45deg);} #mRsch .lat .list a{width:100%;} #mRsch .lat .list .lt-date{position:relative; top:auto; transform:translate(0, 0%); right:auto; margin-top:10px; display:block;} } @media (max-width: 340px){ #mMajor .m-tit .flex-tit, #mRsch .m-tit .flex-tit {justify-content: space-between; align-items: center; flex-direction: column; padding: 0;} } /*--------------------------------------- 교수진 ---------------------------------------*/ #se4{margin-top:80px;} #mFaculty{display:flex;max-width: 1840px;margin: 0 auto;width: 100%;gap: 45px;} #mFaculty .m-tit{padding-left: 35px; display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 1200px);} #mFaculty .m-tit .titWr{text-align: left;} #mFaculty .m-tit .tit{} #mFaculty .m-tit .tit-en{color: #0e2036; font-family: "Chakra Petch", sans-serif; font-size: 70px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.1;} #mFaculty .m-tit .tit-en b{color:#2469c3;} #mFaculty .m-tit .tit-ko{font-weight: 600; color: #1c2c73; font-size: 24px; display: block; margin-top: 40px;} #mFaculty .m-tit .tit-ko big{} #mFaculty .m-tit .more-btn{margin-top: 20px;} #mFaculty .faculty-control{display: flex; justify-content: flex-end;} #mFaculty .f-arrow{display: flex; align-items: center; gap: 20px;} #mFaculty .f-arrow button.f-prev{} #mFaculty .f-arrow button.f-next{} #mFaculty .f-arrow .f-paging{color: #888; font-size: 20px; font-weight: 600; font-family: "Chakra Petch", sans-serif; display: flex; align-items: center; line-height: 1; gap: 7px; letter-spacing: 0;} #mFaculty .f-arrow .f-paging span{} #mFaculty .f-arrow .f-paging .black{font-size: 28px; color: #000; font-weight: 800;} #mFaculty .f-arrow .f-paging .gray{} #mFaculty .f-arrow .f-paging em{font-style:normal;} #mFaculty .f-arrow .f-paging .cur{} #mFaculty .f-arrow .f-paging .total{} #mFaculty .f-arrow button{background: transparent; border: 0; font-size: 48px; color: #000; transition: .3s; cursor: pointer;} #mFaculty .f-arrow button:hover{color:#000;} #mFaculty .f-arrow button.slick-disabled, #mFaculty .f-arrow button[aria-disabled="true"]{color: #d1d1d1; cursor: default; pointer-events: none;} #mFaculty .f-arrow button i{font-weight: normal; transition: .3s;} #mFaculty .f-cont{width: 1200px; position: relative;} #mFaculty .teamWrap {max-width: 1200px;margin: 0 auto;min-height: 542px;} #mFaculty .teamPage {padding: 10px;} #mFaculty .teamPage .row {display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;} #mFaculty .teamPage .row + .row {margin-top: 16px;} #mFaculty .card{height: 253px; position: relative; transition:.3s;} #mFaculty .card a{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius: 20px; position: relative; overflow: hidden; background: #eaf0fa; transition:.3s;} #mFaculty .card .imgBox{position:absolute;width: auto;height: auto;bottom:0;right:0;text-align: right;} #mFaculty .card .imgBox img{max-width:100%;transition:.3s;transition:.6s;filter: grayscale(10%) contrast(110%);} #mFaculty .card .txtBox{position: relative;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;padding: 20px;} #mFaculty .card .txtBox .tit{display:flex;flex-direction: column;gap: 5px;} #mFaculty .card .txtBox .tit big{color:#0e2036;font-size:20px;font-weight: 600;} #mFaculty .card .txtBox .tit small{color:#0e2036;font-size:16px;font-weight: 600;opacity:.3;} #mFaculty .card .txtBox .posi{color:#1c2c73;font-size:14px;font-weight: 500;line-height: 1.2;word-break: keep-all;background: #fff;border-radius: 50px;padding: 5px 12px;} #mFaculty .card a:hover{background: #89a0c6;} #mFaculty .card a:hover .imgBox img{max-width:102%; filter : grayscale(20%);} #mFaculty .empty{font-size: 18px;color: #666;text-align: center;min-height: 150px;display: flex;justify-content: center;align-items: center;width: 100% !important;min-width: 100%;white-space: nowrap;} @media (max-width: 1840px){ #mFaculty {width:95%; flex-direction: column; align-items: center; gap: 0;} #mFaculty .m-tit {padding: 0; flex-direction: column; justify-content: space-between; width: 100%; align-items: center;} #mFaculty .m-tit .titWr {width: 100%; text-align: center;} #mFaculty .m-tit .tit {width: 100%;} #mFaculty .m-tit .tit-en {gap: 20px; flex-direction: row; justify-content: center; width: 100%; align-items: center;} #mFaculty .m-tit .tit-ko {margin-top: 20px;} #mFaculty .f-cont {width: 100%;} #mFaculty .faculty-control {margin-top: 20px;} } @media (max-width: 1170px){ #mFaculty .m-tit .tit-en {gap: 0; flex-direction: column;} } @media (max-width: 767px){ #se4 {margin-top: 30px;} #mFaculty .m-tit .tit-en {font-size: 34px;} #mFaculty .m-tit .tit-ko {font-size: 18px;} #mFaculty .faculty-control{margin:20px auto;} #mFaculty .f-arrow button {font-size: 38px;} #mFaculty .teamPage{display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0;} #mFaculty .teamPage .row{display: contents;} #mFaculty .teamPage .row + .row{margin-top: 0;} #mFaculty .card {height: 200px;} } /*--------------------------------------- footer ---------------------------------------*/ footer{clear:both;width: 100%;margin: 0 auto;position:relative;background: #fff;padding: 60px 0 80px;} footer:before{content:""; border-top: 1px solid rgb(183, 183, 183, .3); position:absolute; top:0; left:50%; width:100%; transform:translateX(-50%); max-width:1840px;} footer.mfooter{margin-top:80px;} footer.sfooter{margin-top:120px;} footer.sfooter .select_f_btn{} footer.sfooter .ft-bottom{} footer:after{content:''; display:block; clear:both;} footer article{position:relative;max-width: 1840px;margin:0 auto;} footer .ft-top{position:relative;display: flex;justify-content: space-between;align-items: flex-start;} footer .ft-top article{display:flex;justify-content:space-between;align-items: flex-start;} footer .ft-logo{display: flex;flex-wrap: wrap;align-items: flex-end;gap: 20px;} footer .ft-logo a img{max-width:100%;transition: .3s;} footer .ft-logo a:hover img{opacity:.8;} footer .pass-btn{line-height: 1.4; display: inline-flex; justify-content: center; align-items: center; background: #444; padding: 6px 16px; color: #fff !important; gap: 10px; transition: .3s; font-size: 15px; font-weight: 400;} footer .pass-btn:hover{background:#555;} footer .copyright{width: 100%;display: flex;align-items: flex-start;justify-content: space-between;margin-top: 0px;} footer .copyright address, footer cite{display:block; font-style:normal; line-height:1.8;} footer .copyright address{font-size:16px;color: #666;margin-top: 50px;} footer .copyright address > dl{display: flex; flex-wrap: wrap;} footer .copyright address > dl + dl{margin-top: 10px;} footer .copyright address > dl:first-child{margin-bottom:30px;} footer .copyright address > dl > dt{font-size:18px;color:#191919;font-family: "Chakra Petch", sans-serif;font-weight: 700;width: 120px;text-transform: uppercase;} footer .copyright address > dl > dd{font-weight:500;font-family: 'OneGB';color: #666;} footer .copyright address a{color:#666;} footer .copyright address a:hover{text-decoration:underline; transition:.2s ease-out;} footer .ft-left{display:flex;align-items: flex-end;gap: 60px;} footer .ft-right{display:inline-flex;align-items: flex-end;flex-direction: column;justify-content: space-between;gap: 80px;height: 100%;} footer .ft-sns{height:100%;display:flex;align-items:center;gap: 20px;} footer .ft-sns ul{display:flex; gap:15px;} footer .ft-sns li{position:relative;} footer .ft-sns li.ft-x i{font-size:27px;} footer .ft-sns li a{display:inline-block;color:#888;font-size:30px;transition:.2s ease-out;} footer .ft-sns li a:hover{color:#444;} footer .ft-site{display:flex;gap: 15px;} footer .select_footer{position: relative;width: 270px;height: 54px;z-index:5;text-align:left;} footer .select_footer ul{bottom:52px;display:none;position:absolute;z-index:999;border:0;background: #f8f8f8;width: 270px;transition:.3s;} footer .select_footer ul.open{display:block;padding-top:14px;overflow: hidden;border: 1px solid #000;border-bottom: 0;background: linear-gradient(to top, rgb(248 248 248) 0%, rgb(248 248 248 / 30%) 100%);backdrop-filter: blur(10px);border-radius: 30px 30px 0 0;} footer .select_footer ul li{/* text-indent:25px; */} footer .select_footer ul li a{display:block;font-size:16px;color: #000;padding: 7px 0 7px 25px;font-family: 'OneGB';transition: .3s;} footer .select_footer ul li a:hover{background:#f8f9fb;} footer .select_f_btn{display:block;width: 270px;height: 54px;background: #fff;border-radius: 50px;border: 1px solid #000;text-align:left;text-transform:uppercase;padding:0 25px;font-size:18px;color: #000;font-weight: 600;font-family: 'OneGB';} footer .select_f_btn .ir{width:100%;display:flex;height:100%;align-items:center;justify-content:space-between;} footer .select_f_btn .ir i{font-size:22px;font-weight: normal;} footer .select_f_btn.on{background:#f8f8f8;color: #222;border-radius: 0 0 30px 30px;} footer .ft-bottom{position:relative;} footer .ft-bottom article{display:flex;justify-content:space-between;flex-wrap:wrap;} footer cite{font-size:16px;color:#666;font-style: normal;font-weight: 600;text-align: right;font-family: "Chakra Petch", sans-serif;} footer cite span{/* color: #000; */} footer .link-green{color:#666; transition:.2s ease-out;} footer .link-green:hover{color:#00c850;} footer .ft-menu{display:inline-flex;gap: 60px;font-size:0;line-height:0;padding:0;margin:0;flex-direction: row;align-items: center;font-family: 'OneGB';} footer .ft-menu li{transition:.2s ease-out;} footer .ft-menu li a{font-size: 20px;line-height:1;color: #000;font-weight: 700;transition:.2s ease-out;} footer .ft-menu li:first-child a{color:#0577e6;} footer .ft-menu li:hover a{opacity:.6;} footer .adm-btn{position: relative; height: 29px;} footer .adm-btn a{background: #333;color: #fff;border-radius:100px;height: 29px;padding: 0 13px;line-height: 1;font-size: 13px;font-weight: 500;letter-spacing: -.5px;gap: 3px;display:flex;justify-content: center;align-items: center;margin-bottom: -7px;transition: .3s;} footer .adm-btn a:hover{background: #2469c3;color:#fff;} @media (max-width: 1840px){ footer{width:95%;} } @media (max-width: 1420px){ footer .ft-top {align-items: center; flex-direction: column; gap: 40px; margin-bottom: 40px;} footer .copyright {align-items: center; flex-direction: column; gap: 30px;} footer .copyright address {margin-top: 0px;} footer .ft-right {align-items: center; flex-direction: column; gap: 30px;} footer cite {text-align: center;} } @media (max-width: 1170px){ footer .ft-top article {align-items: center; flex-direction: column; gap: 40px; margin-bottom: 60px;} } @media (max-width: 767px){ footer.mfooter {margin-top: 60px;} footer .ft-top{gap:20px;margin-bottom: 30px;} footer .ft-site {gap: 10px;width: 100%;flex-direction: column;} footer {padding: 30px 0;} footer .ft-top article {gap: 20px; margin-bottom: 0px;} footer .ft-logo {gap: 10px; justify-content: center; margin-bottom: 10px;} footer .ft-logo a img{height: 50px;} footer .ft-menu{flex-wrap: wrap; justify-content: center; gap: 20px;} footer .ft-menu li a {font-size: 17px;} footer .copyright {align-items: center; flex-direction: column;} footer .ft-right {align-items: center;flex-direction: column;gap: 20px;margin-top: 0;} footer .select_footer, footer .select_footer ul, footer .select_f_btn{width:100%;height: 45px;} footer .select_f_btn{height: 45px;font-size: 16px;} footer cite{text-align:center; font-size:13px; line-height: 1.5;} footer .copyright address > dl > dt {font-size: 16px; width: 80px;} footer .copyright address {font-size: 14px; line-height: 1.5;} } @keyframes mymove { from {transform:scale(1.1);} to {transform:scale(1);} } @keyframes strach { 0% {transform: scaleX(0);} 100% {transform: scaleX(1);} } @keyframes text-active-animation { 0% {opacity: 0; transform: translateY(20%); filter: blur(8px);} 100% {opacity: 1; transform: translateY(0); filter: blur(0);} }