#allWrap{position:relative;width:100%;height:100%;overflow:hidden;} /* 모션 */ .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;height:100vh;} #mVisual .mv-wrap{width:100%;margin:0 auto;display: flex;height: 100vh;} #mVisual .mv-wrap .left-mv{max-width: 920px;width: 50%;} #mVisual .mv-wrap .right-mv{position:relative;width: 50%;padding-left:30px;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;} #mVisual .mv-wrap .right-mv:before{content:"";position:absolute;right:-50px;top: 280px;background:url("/images/main/snu_bg.png") no-repeat;width:355px;height:366px;z-index: 0;} #mVisual .MV{position:relative;overflow:hidden;width:100%;height:100%;border-radius: 0 0 30px 30px;} #mVisual .MV:before{content:"";position:absolute;top:0;width:100%;height: 90%;background: linear-gradient(to bottom, rgb(14 49 58 / 89%) 0%, rgb(14 49 58 / 0%) 100%);opacity:1;z-index: 1;} #mVisual .MV .visual{} #mVisual .MV .visual .sloWr{position:absolute;color:#fff;width: 100%;height: 100%;z-index:2;} #mVisual .MV .visual .sloWr .slo-cont{max-width: 1830px; width: 100%; height: 100%; margin: 0 auto; display: flex; padding: 140px 3% 0; position: relative;} #mVisual .MV .visual .sloWr .slo-cont .left{position: absolute; left: 3%; top: 300px;} #mVisual .MV .visual .sloWr .slo-cont .right{display: inline-flex;gap:50px;right: 3%;position: absolute;bottom: 230px;} #mVisual .MV .visual .sloWr small{font-size: 32px;font-weight: 500;line-height: 1.5;font-family: 'Suit';display: block;} #mVisual .MV .visual .sloWr big{font-size: 65px;font-family: 'Paperozi';font-weight:bold;display: block;} #mVisual .MV .visual .sloWr p{font-size:22px;line-height:1.5; display:block; margin-top:35px;} #mVisual .MV .visual .mv-control{position:absolute;right: 90px;bottom:0;z-index:5;border-radius: 30px;background: #fff;height: 60px;display: none;align-items: center;padding: 0 25px;} #mVisual .MV .visual .mv-control:before, #mVisual .MV .visual .mv-control:after{content: "";position: absolute;background-color: transparent;bottom: 0;height: 40px;width: 20px;box-shadow: 0 20px 0 0 #fff;} #mVisual .MV .visual .mv-control:before{left:-20px;border-bottom-right-radius: 20px;} #mVisual .MV .visual .mv-control:after{right:-20px;border-bottom-left-radius: 20px;} #mVisual .MV .visual .mv-control .mv-arrow{display: flex;align-items: flex-end;justify-content: center;} #mVisual .MV .visual .mv-control .mv-arrow button{width: 45px;height: 45px;background: none;border: 0;font-size: 25px;} #mVisual .MV .visual .mv-control .mv-arrow i{} #mVisual .MV .visual .mv-control .mv-arrow button.mva-prev{} #mVisual .MV .visual .mv-control .mv-arrow button.mva-next{} #mVisual .MV .visual .slick-track, #mVisual .MV .visual .slick-list{height:100%;} #mVisual .MV .visual .slick-slide img{/* height:100%; */width: 100%;} #mVisual .MV .visual .visual-slide{position:absolute; width:100%; height:100%; z-index:0;} #mVisual .snu-roll{position: relative;color: #fff;display: inline-flex;width: 126px;height: 126px;justify-content: center;align-items: center;font-size: 34px;font-weight: normal;opacity: .9;z-index: 10;} #mVisual .snu-roll:before{content:"";width: 126px;height: 126px;background:url("/images/main/roll.png") no-repeat;background-size: 100%;position:absolute;left: 50%;top: 50%;transform:translate(-50%, -50%) rotate(0deg);animation:rot 8s linear infinite;z-index: 0;} #mVisual .snu-roll i { content: "↓"; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: 1.25s scrollDownArrow infinite ease-out; } #mVisual .sloWr big span, #mVisual p, #mVisual small{ animation:text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:calc(60ms * var(--char-index)); } @keyframes scrollDownArrow { 0% {margin-top: -3px; } 50% {margin-top: 3px; } 100% {margin-top: -3px; } } @keyframes text-active-animation{ from{opacity:0; transform: translateY(50%);} to{opacity:1.0; transform: translateY(0px);} } @keyframes rot{ 100% {transform: translate(-50%, -50%) rotate(360deg);} } #mVisual .banner{position: relative;display:flex;gap: 3%;width: 100%;z-index: 2;margin-top: 20%;} #mVisual .banner .bn-box{padding: 25px;border-radius: 25px;/* overflow: hidden; */position: relative;height: 275px;width: 50%;} #mVisual .banner .bn-down{background: url("/images/main/bn_down_bg.png") 0 0 no-repeat;background-size:cover;display: flex;flex-direction: column;justify-content: space-between;} #mVisual .banner .bn-box .tit{} #mVisual .banner .bn-box .tit big{font-family: "Sora", sans-serif; font-size:34px; font-weight:500; color:#fff; letter-spacing:-1px;} #mVisual .banner .bn-box .tit small{font-size:18px; font-weight:600; opacity:.6; color:#fff;} #mVisual .banner .bn-down ul{display:flex; gap:15px;} #mVisual .banner .bn-down > .tit{padding-left:10px;} #mVisual .banner .bn-down ul > li{padding:20px 25px;height:160px; position:relative; width:50%; background:rgb(255,255,255,.1); border-radius:15px; backdrop-filter: blur(10px);transition: all 0.3s;} #mVisual .banner .bn-down a{display:block; height:100%; height:100%; transition: all 0.3s;} #mVisual .banner .bn-down h4.tit{font-size: 20px; color: #fff;} #mVisual .banner .bn-down h4.tit > span{display:block;} #mVisual .banner .bn-down i{color:#fff; font-size:34px;font-weight:normal; position:absolute; right:20px; bottom:20px;} #mVisual .banner .bn-down ul > li:hover{background:rgb(255,255,255,1);} #mVisual .banner .bn-down ul > li:hover h4.tit, #mVisual .banner .bn-down ul > li:hover i{color: #d95204;} #mVisual .banner .box-admis{background: url("/images/main/bn_add_bg.png") 0 0 no-repeat;background-size:cover;display: flex;flex-direction: column;justify-content: flex-end;padding: 35px;} #mVisual .banner .box-admis:before{content:""; position:absolute; right:35px;top:35px; background: url("/images/main/add_icon.png") 0 0 no-repeat; width:43px; height:55px; } #mVisual .banner .box-admis .tit{display:flex;flex-direction: column;gap: 10px;} #mVisual .banner .box-admis .arr-cont{width:100%;bottom:0;right:0;position: absolute;text-align: right;line-height: 0;} #mVisual .banner .box-admis .arr-wrap{position: relative;overflow: hidden;display: inline-block;padding: 20px 0 0 20px;} #mVisual .banner .box-admis .arr-wrap:before, #mVisual .banner .box-admis .arr-wrap:after{content: "";position: absolute;background-color: transparent;right: 0; left: initial; bottom:initial; height: 40px;width: 20px;box-shadow: 0 20px 0 0 #f0f2f4;} #mVisual .banner .box-admis .arr-wrap:before{top: -20px; border-bottom-right-radius: 20px;} #mVisual .banner .box-admis .arr-wrap:after{left:0; bottom:0; top:initial; right:initial; border-bottom-right-radius: 20px;} #mVisual .banner .box-admis .arr-wrap .arr-inner{position: relative;padding: 10px 10px 0 10px;background: #f0f2f4;border-radius: 30px 0px 0px 0px;} #mVisual .banner .box-admis .arr-icon{background:#333;color:#fff;font-size: 24px;position: relative;overflow: hidden;width: 49px;height: 49px;display: flex;border-radius: 50%;justify-content: center;align-items: center;} #mVisual .banner .box-admis .arr-icon i{transition: transform 0.4s, opacity 0.4s;position: relative;display: block;} #mVisual .banner .box-admis .arr-icon i:before{position: absolute;left: 50%; top:50%; transform: translate(-50%, -50%);} #mVisual .banner .box-admis .arr-icon i:first-child:not(:last-child){transition-timing-function: cubic-bezier(0, 0, 0, 0.98);} #mVisual .banner .box-admis .arr-icon i:last-child:not(:first-child){position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: translateX(-777px); transition-timing-function: cubic-bezier(0.98, 0, 1, 1); opacity: 0;} #mVisual .banner .box-admis .arr-icon:hover{background:#212121;} #mVisual .banner .box-admis .arr-icon:hover i:first-child:not(:last-child){transform: translateX(777px);transition-timing-function: cubic-bezier(0.98, 0, 1, 1); opacity: 0;} #mVisual .banner .box-admis .arr-icon:hover i:last-child:not(:first-child){transform: translateX(0);transition-timing-function: cubic-bezier(0, 0, 0, 0.98);opacity: 1;} #allWrap.main{position: relative; overflow: hidden; min-height: 100vh;} #allWrap.main .body-lines {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;z-index: -1;} #allWrap.main .body-line {position: absolute;top: 0;bottom: 0;width: 0;border-left: solid 1px #eceef1;left: 50%;right: initial;z-index: -1;} #allWrap.main .body-line.body-line-l1{margin-left: -880px;} #allWrap.main .body-line.body-line-l2{margin-left: -290px;} #allWrap.main .body-line.body-line-r1{margin-left: 290px;} #allWrap.main .body-line.body-line-r2 {margin-left: 880px;} @media (max-width: 1830px){ #mVisual .mv-wrap{width:95%;} } @media (max-width: 1540px){ #mVisual .MV .visual .slick-slide img {width: 100%; height: auto;} #mVisual .MV .visual .sloWr {left: 6%;} #mVisual .MV .visual .sloWr small {font-size: 26px;} #mVisual .MV .visual .sloWr big {font-size: 42px;} #mVisual .MV .visual .sloWr p {font-size: 19px; margin-top: 25px;} #mVisual .slogan {margin-top: 10%; padding-left: 5%;} #mVisual .slogan small {font-size: 22px;} #mVisual .slogan big {font-size: 60px; margin-top: 25px;} #mVisual .snu-roll {right: -40px; width: 100px; height: 100px; font-size: 28px; margin-bottom: 0;} #mVisual .snu-roll:after {width: 100px; height: 100px;} #mVisual .banner {margin-top: 10%;} #mVisual .banner .bn-box {padding:3.5%; height: auto;} #mVisual .banner .bn-box .tit big {font-size: 27px;} #mVisual .banner .bn-down > .tit {padding-left: 5px;margin-bottom: 5px;} #mVisual .banner .bn-down ul {gap: 3%;} #mVisual .banner .bn-down ul > li {padding: 5%; height: 130px;} #mVisual .banner .bn-down h4.tit {font-size: 17px;} #mVisual .banner .bn-down i {font-size: 26px;} #mVisual .banner .box-admis:before {right: 25px; top: 20px; background-size: 100%; width: 35px; height: 55px;} #mVisual .mv-wrap .right-mv:before {top: 180px; background-size: 100%; width: 280px;} } @media (max-width: 1170px){ #mVisual {padding: 140px 0 60px;} #mVisual .MV .visual .sloWr {bottom: 60px;} #mVisual .MV .visual .sloWr small {font-size: 22px;} #mVisual .MV .visual .sloWr big {font-size: 36px;} #mVisual .MV .visual .sloWr p {font-size: 17px; margin-top: 20px;} #mVisual .MV .visual .mv-control {right: 50px;/* left: 50%; */border-radius: 20px 20px 0 0;height: 45px;padding: 0;/* transform: translateX(-50%); */} #mVisual .slogan small {font-size: 19px;} #mVisual .slogan big {font-size: 50px;} #mVisual .snu-roll {right: -28%;} #mVisual .banner .bn-box {padding: 4%;} #mVisual .banner .bn-box .tit big {font-size: 23px;} #mVisual .banner .bn-down ul {gap:3%; flex-direction: column; align-items: center;} #mVisual .banner .bn-down ul > li {padding: 5% 7%; height: auto; width: 100%;} #mVisual .banner .bn-down i {font-size: 22px;} #mVisual .banner .box-admis{padding:5% 4%;} #mVisual .banner .bn-down h4.tit {font-size: 15px;} } @media (max-width: 990px){ #mVisual .mv-wrap {flex-direction: column; align-items: center;} #mVisual .mv-wrap .left-mv {max-width: 100%; width: 100%;} #mVisual .mv-wrap .right-mv {padding-left:0; width: 100%;} #mVisual .mv-wrap .right-mv:before {top:20px; width: 200px; right: 0;} #mVisual .MV .visual {position: relative;padding: 0 0 0%;} #mVisual .MV .visual .slick-slide img {width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} #mVisual .slogan {margin-top: 5%; padding-left: 0; width:100%;} #mVisual .snu-roll {right: 0;} #mVisual .slogan big {margin-top: 20px;} #mVisual .banner {margin-top: 5%;} } @media (max-width: 767px){ #mVisual {padding: 100px 0 60px; border-radius: 0 0 15px 15px;} #mVisual .MV {border-radius: 15px;} #mVisual .MV:before {height: 100%;} #mVisual .MV .visual {min-height: 300px;} #mVisual .MV .visual .sloWr {bottom: 50px;left: 50%;width: 90%;transform: translate(-50%, -0%);word-break: keep-all;} #mVisual .MV .visual .sloWr big {font-size: 24px;} #mVisual .MV .visual .sloWr p {font-size: 15px; margin-top: 10px;} #mVisual .MV .visual .sloWr p br{display:none;} #mVisual .slogan {margin-top: 40px; text-align: center;} #mVisual .slogan big {font-size: 40px; line-height:1.1;} #mVisual .snu-roll{display:none;} #mVisual .banner {gap: 10px; width: 100%; margin-top:40px; flex-direction: column; align-items: center;} #mVisual .banner .bn-box{width:100%; min-height:130px; padding: 20px 15px; height:200px; border-radius: 15px;} #mVisual .banner .bn-down ul {gap: 5px;} #mVisual .banner .bn-down ul > li {padding: 10px 15px;border-radius: 10px;} #mVisual .banner .box-admis .arr-icon{width:40px; height:40px;} } @media (max-width: 312px){ #mVisual .MV .visual .slick-slide img {width:auto; height:100%;} } /*--------------------------------------- 타이틀 공통 ---------------------------------------*/ #allWrap{} #allWrap .m-tit{word-break:keep-all;text-align: left;display: inline-flex;/* gap: 50px; */justify-content: flex-start;align-items: flex-end;position: relative;} #allWrap .m-tit .tit{display:flex;flex-direction: column;gap: 20px;} #allWrap .m-tit small{position:relative;color: #01ce6b;letter-spacing: 1px;font-weight: 600;font-family: 'Paperozi';font-size: 15px;text-transform: uppercase;} #allWrap .m-tit small:before{content:"["; color:#c3c3c3; margin-right:5px;} #allWrap .m-tit small:after{content:"]"; color:#c3c3c3; margin-left:5px;} #allWrap .m-tit big{font-size: 57px;font-family: 'Paperozi';font-weight: 300;color: #222;line-height: 1.2;} #allWrap .m-tit big > b{font-weight:bold;} #allWrap .m-tit p{font-size: 20px;color: #757575;line-height:1.5;font-weight: 500;font-family: 'Suit';} #allWrap .m-tit .more-btn{ font-size: 16px; font-family: 'Paperozi'; letter-spacing:-.5px; color: #212121; border-color: transparent !important; background-color: rgba(255, 255, 255, 0); position:relative; display: inline-block; text-align: center; line-height: 1; border-radius: 9999px; font-weight: 600; padding: 15px 30px 15px calc(25px + 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; } #allWrap .m-tit .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, #41e696 14.51%, #66d2e9 95.96%); } #allWrap .m-tit .more-btn i{font-weight:normal;position: absolute;left: 23px;top: 50%;transform: translateY(-50%);transition: opacity 0.3s, transform 0.3s;} #allWrap .m-tit .more-btn i.right{opacity: 0;right: 24px;left: initial;transform: translateY(-50%) translateX(1em);} #allWrap .m-tit .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 .m-tit .more-btn:hover{color:#fff;padding: 15px calc(23px + 1.42857em) 15px 30px;/* box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); */background: linear-gradient(262deg, #41e696 14.51%, #66d2e9 95.96%);} #allWrap .m-tit .more-btn:hover i.left{opacity: 0;transform: translateY(-50%) translateX(-1em);} #allWrap .m-tit .more-btn:hover i.right{opacity: 1;transform: translateY(-50%) translateX(0);} #allWrap .m-tit .more-btn:hover:after{background: linear-gradient(262deg, #41e696 14.51%, #66d2e9 95.96%);} @media (max-width: 1300px){ #allWrap .m-tit big{font-size:80px;} } @media (max-width: 990px){ #allWrap .m-tit big {font-size: 70px;} } @media (max-width: 767px){ #allWrap .m-tit {text-align: center;justify-content: center;align-items: center;gap: 15px;flex-wrap: wrap;} #allWrap .m-tit big {font-size: 40px; letter-spacing: -1px;} #allWrap .m-tit small {font-size: 17px;} #allWrap .m-tit .tit {gap: 10px;} #allWrap .m-tit .more-btn{margin-bottom:0; padding: 7px 24px 8px calc(22px + 1.3em);} #allWrap .m-tit .more-btn:hover {padding: 7px calc(21px + 1.5em) 8px 24px;} #allWrap .m-tit p {font-size: 17px; text-align: center; width: 100%; line-height: 1.4; margin:0;} } /*--------------------------------------- 메인 연구분야 ---------------------------------------*/ #mRsch{position: relative;padding: 140px 0 450px;word-break: keep-all;} #mRsch article{position:relative; max-width:1440px; margin:0 auto; width:95%;} #mRsch .m-tit big{font-weight:bold;} #mRsch .rschCont{position: relative;} #mRsch .rf-control{width: 480px;} #mRsch .rf-control .rf-dot{margin-top:40px;position: relative; padding-left:30px;} #mRsch .rf-control .rf-dot .dot-cst{font-size:22px; display:flex; gap:15px;font-weight:600;font-family: 'Paperozi'; transition:.3s ease-out;} #mRsch .rf-control .rf-dot .dot-cst em{font-style:normal;} #mRsch .rf-control .rf-dot .dot-cst span{position:relative; transition:.3s ease-out;} #mRsch .rf-control .rf-dot .dot-cst + .dot-cst{margin-top:30px;} #mRsch .rf-control .rf-dot .dot-cst:hover, #mRsch .rf-control .rf-dot .dot-cst.active{font-weight: 700;color: #01ce6b;cursor: pointer;} #mRsch .rf-control .rf-arrow{margin-top: 45px;padding-left: 15%;display:flex;gap: 20px;align-items: center;justify-content: center;} #mRsch .rf-control .rf-arrow .slick-arrow{border:0;display: flex;background: none;transition:.3s;justify-content: center;align-items: center;} #mRsch .rf-control .rf-arrow .btn-prev{} #mRsch .rf-control .rf-arrow .btn-next{} #mRsch .rf-control .rf-arrow .slick-arrow {transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;} #mRsch .rf-control .btn-prev:hover {transform: translateX(-6px);} #mRsch .rf-control .btn-next:hover {transform: translateX(6px);} #mRsch .rf-control .btn-play{background: none;font-size: 0;width: 60px;height: 60px;border:0;display: flex;border: 0;border-radius: 50%;background: url("/images/common/stop.png") no-repeat 50% 50% #f7f7f7;transition:.3s;justify-content: center;align-items: center;} #mRsch .rf-control .btn-play.on{background: url("/images/common/play.png") no-repeat 50% 50% #f7f7f7;} #mRsch .rf-control .btn-play {transition: background-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);} #mRsch .rf-control .btn-play:hover {background-color: #e0e0e0 !important;} #mRsch .rf-control .rf-arrow .slick-arrow:hover{} #mRsch .rf-control .btn-play:hover{border-color:#ddd;} #mRsch .rf-control .ri-arrow-left-line{background:url("/images/common/arr_l.png"); width:50px; height:26px; font-size:0;} #mRsch .rf-control .ri-arrow-right-line{background:url("/images/common/arr_r.png"); width:50px; height:26px; font-size:0;} #mRsch .rf-control .btn-play .ri-pause-circle-line{display: flex;justify-content: center;align-items: center;} #mRsch .rf-control .btn-play .ri-play-fill{display:none} #mRsch .rf-control .btn-play.on .ri-pause-circle-line{display:none;} #mRsch .rf-control .btn-play.on .ri-play-fill{display: flex;justify-content: center;align-items: center;} #mRsch .rf-control .rf-dot {margin-top:40px; position: relative; padding-left:30px;} #mRsch .rf-control .rf-dot:before {content:""; width:1px; height:100%; background:#d1d1d1; position:absolute; left:0; top:0;} #mRsch .rf-control .rf-dot .active-bar {position:absolute; left:-2px; width:5px; height:30px; background:#01ce6b; transition: all .35s ease;} #mRsch .rf-cont{width: 1530px;position: absolute;left: 500px;top: 0;} #mRsch .rf-cont .slick-track{padding: 0 0 0 0px;} #mRsch .rf-cont .rf-box{} #mRsch .rf-cont .rf-item{position:relative;} #mRsch .rf-cont .rf-item a { background: #fff; border-radius: 30px; overflow: hidden; display:block; height:auto; margin: 10px 30px 50px; box-shadow:none; transition: height .6s ease, box-shadow .6s ease; } #mRsch .rf-cont .rf-item .imgWr{border-radius:30px;width: 100%;height: 430px;display: block;overflow:hidden;} #mRsch .rf-cont .rf-item .imgWr img{max-width: 100%;width: 100%;} #mRsch .rf-cont .rf-item .txtWr{margin-top:-120px; opacity:0;} /* 활성화된 슬라이드에만 그림자 적용 */ #mRsch .rf-cont .slick-current a {height: 550px; box-shadow: 5px 20px 30px 0 rgba(0, 0, 0, 0.25);} #mRsch .rf-cont .rf-item .txtWr{margin-top:-120px; opacity:0; transform: translateY(-20px); transition: opacity .6s ease, transform .6s ease, margin-top .6s ease;} #mRsch .rf-cont .slick-current .txtWr{opacity:1; margin-top:0; transform: translateY(0);} #mRsch .rf-cont .rf-item .txtWr .txt{padding: 30px 40px;} #mRsch .rf-cont .rf-item .txtWr .txt big{font-family: 'Paperozi';font-size:24px; font-weight:bold; color:#000;} #mRsch .rf-cont .rf-item .txtWr .txt p{display:block; margin-top:10px;font-family: 'Suit';font-size:16px; color:#464646;} /* 초기 상태는 transition 없음 */ #mRsch .rf-item.preload a, #mRsch .rf-item.preload .txtWr { transition:none !important; } #mRsch .text-move{font-weight: 800;font-size: 120px;letter-spacing: -3px;word-spacing: -5px;line-height:1;position: absolute;left:0;white-space: nowrap;font-family: 'Paperozi';will-change: transform;} #mRsch .text-move-left{bottom: 250px;left: -10%;opacity: .1;color: #4a63ad;} #mRsch .text-move-right{left: 10%;opacity: .2;bottom: 100px;z-index:3;color:transparent;background-image: linear-gradient(to left, #00e9cc 0%, #009ae7 100%);z-index: 3;background-clip: text;-webkit-background-clip: text;} /*--------------------------------------- 메인 비전 ---------------------------------------*/ #mVM{position: relative;width: 98%;padding:140px 0;word-break: keep-all;background: url("/images/main/ms_bg.jpg") no-repeat 0 0 /cover;margin: 0 auto;border-radius: 25px;background-attachment: fixed;} #mVM article{/* width:90%; *//* max-width:1980px; */margin:0 auto;} #mVM .m-tit{display: flex;text-align:center;justify-content: center;} #mVM .m-tit .tit {align-items: center; text-align: center;} #mVM .m-tit small{color:#fff;} #mVM .m-tit small:before, #mVM .m-tit small:after{color:#fff;} #mVM .m-tit big{color:#fff;} #mVM .m-tit .more-btn{color:#fff;position: absolute;right: 10%;} #mVM .vm-list {margin-top:100px;} #mVM .vm-list > ul{display:flex;width: 100%;gap: 15px 15px;flex-wrap: wrap;justify-content: center;} #mVM .vm-list li{} #mVM .vm-list li.flip-box{} #mVM .vm-list li.flip-box .fixBox{padding: 30px;position:absolute;width:100%;height:100%;z-index:2;color:#fff;display:flex;flex-direction: column;justify-content: space-between;align-items: flex-start;} #mVM .vm-list li.flip-box .fixBox small { font-family: 'Paperozi'; color: #fff; font-size: 10px; padding: 12px 22px; border-radius: 30px; letter-spacing: 1px; display: inline-block; position: relative; background: transparent; /* 내부 배경 투명 */ z-index: 1; } #mVM .vm-list li.flip-box .fixBox small::before { content: ""; position: absolute; inset: 0; border-radius: 30px; padding: 1px; /* 보더 두께 */ background: linear-gradient(90deg, #41e696 14.51%, #66d2e9 95.96%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; /* 보더만 남도록 */ } #mVM .vm-list li.flip-box .fixBox .tit{/*margin-bottom:-55px;*/display:flex;flex-direction: column;width: 100%;gap: 25px;transition: .4s ease-out;position: relative;z-index: 5;} #mVM .vm-list li.flip-box .fixBox .tit big{font-family: 'Paperozi';font-weight:bold;line-height: 1.3;font-size:34px;color:#fff;transition: .3s ease-out;} #mVM .vm-list li.flip-box .fixBox .more{font-family: 'Paperozi';border: 1px solid #ffffff75;border-radius: 15px;color:#fff;font-size: 17px;font-weight:600;gap: 20px;display: flex;opacity: 0;justify-content: center;align-items: center;width: 100%;line-height: 1;height: 55px;padding: 10px;transition: .3s ease-out;} #mVM .vm-list li.flip-box .fixBox .more i{font-weight:normal;font-size: 20px;} #mVM .vm-list li.flip-box .fixBox .more:hover{background:#fff; color:#01ce6b;} #mVM .vm-list .flip-inner{ position: relative; width: 100%; height: 100%; text-align: center; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; } #mVM .vm-list .flip-inner:before{content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-color: #14173b; border-radius: 15px; z-index: 1; transition: all 0.75s ease-in-out;} #mVM .vm-list .flip-box:nth-child(1) .flip-inner:before{transition-delay:.1s ;} #mVM .vm-list .flip-box:nth-child(2) .flip-inner:before {transition-delay:.2s ;} #mVM .vm-list .flip-box:nth-child(3) .flip-inner:before{transition-delay:.3s ;} #mVM .vm-list .flip-box{background-color: transparent;width: calc(23% - 5px);height: 600px;border-radius: 25px;overflow: hidden;position: relative;max-width: 430px;} #mVM .vm-list .flip-box .flip-front figure > img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; max-width:100%; object-fit:cover;} #mVM .vm-list .flip-inner > div{backface-visibility: hidden;background-size: cover;height: 100%;transition: all 1s cubic-bezier(0.4, 0.2, 0.2, 1);backface-visibility: hidden;transform-style: preserve-3d;border-radius: 25px;border: 1px solid rgb(255,255,255,.8);} #mVM .vm-list .flip-box .flip-front{transform: rotateY(0deg);} #mVM .vm-list .flip-box .flip-back{transform: rotateY(180deg);position: absolute;left: 0;top: 0;width: 100%;color: #fff;border: 0;} #mVM .vm-list .flip-box:hover .flip-front{transform: rotateY(-180deg);transform-style: preserve-3d;} #mVM .vm-list .flip-box:hover .flip-back{transform: rotateY(0deg);} #mVM .vm-list .flip-box .flip { z-index: 1; position: relative; color: #fff; transform: translateZ(60px) scale(0.9); width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px; gap: 20px; } #mVM .vm-list .flip-box .flip-back figure{position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 25px;overflow: hidden;margin: 0;} #mVM .vm-list .flip-box:nth-child(1) .flip-front p{transition-delay: 0.1s;} #mVM .vm-list .flip-box:nth-child(2) .flip-front p{transition-delay: 0.25s;} #mVM .vm-list .flip-box:nth-child(3) .flip-front p{transition-delay: 0.4s;} #mVM .vm-list .flip-inner:before{width: 0%;} #mVM .vm-list li.flip-box .fixBox:after{content:"";position:absolute;bottom: -40px;left: 0;width:100%;height: 0%;background: linear-gradient(to top, rgb(4 208 108) 0%, rgb(14 49 58 / 0%) 100%);opacity:0;transition: .4s ease-out} #mVM .vm-list li.flip-box:hover .fixBox:after{bottom:0;opacity:1;height: 50%;} #mVM .vm-list li.flip-box:hover .fixBox .tit{margin-bottom:20px;} #mVM .vm-list li.flip-box:hover .fixBox .more{opacity: 1;} /*--------------------------------------- 메인 뉴스 ---------------------------------------*/ #mNews{position: relative;background: url("/images/main/board_bg.jpg") no-repeat center /cover;} #mNews article{width: 95%;max-width: 1440px;text-align: center;margin: 0 auto;padding: 140px 0;} #mNews .m-tit{justify-content: space-between;width: 100%;} #mNews .m-tit .flex-tit{display:flex;align-items: flex-end;gap: 35px;} #mNews .m-tit big{display:flex;align-items: center;font-weight: bold;gap: 15px;} #mNews .m-tit .flex-tit p{margin-bottom:10px;} #mNews .m-tit .more-btn{margin:0;} #mNews .news-cont{margin: 50px auto 0;} #mNews .row{display:flex;flex-wrap: wrap;} #mNews .row .left, #mNews .row .right{flex: 0 0 auto;width: 50%;padding:0 15px;transition: .3s ease-out;} #mNews .new-block{border-right: 1px solid #eaeaea;padding-bottom: 0;padding-right: 40px;margin-right: 10px;margin-bottom: 0;transition: .3s ease-out;} #mNews .new-block a{transition: .3s ease-out;} #mNews .new-block .thumb{margin-bottom: 30px;position: relative;overflow: hidden;display: block;border-radius: 15px;transition: .3s ease-out;} #mNews .new-block .thumb img{max-width:100%;height:100%;transition: .3s ease-out;} #mNews .new-block .txt{display: flex; flex-direction: column; align-items: flex-start; text-align: left;} #mNews .new-block .txt .date{color: #797979;position: relative;padding-left: 15px;font-size: 14px;font-weight: 500;font-family: 'Paperozi';line-height: 1;} #mNews .new-block .txt .date:before{content:"";position:absolute;left:0;top: 2px;background:#6be4b3;width:9px;height:9px;border-radius:50%;} #mNews .new-block .txt .tit{margin-top: 15px;color: #222;font-weight: bold;font-size: 30px;font-family: 'Paperozi';word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 1.4;transition: .3s ease-out;} #mNews .news-list{} #mNews .news-list > li{margin-bottom: 30px;padding: 0 140px 30px 0;position: relative;border-bottom: 1px solid #eaeaea;transition: .3s ease-out;} #mNews .news-list > li:nth-child(3){padding-bottom:0; margin-bottom:0; border:0;} #mNews .news-list a{display: flex;align-items: center;transition: .3s ease-out;} #mNews .news-list .list-thumb{border-radius: 10px;overflow: hidden;width: 200px;transition: .3s ease-out;} #mNews .news-list .list-thumb img{max-width:100%;height:100%;transition: .3s ease-out;} #mNews .news-list .list-body{width: calc(100% - 200px); text-align: left; padding-left: 30px;} #mNews .news-list .list-body .titWr{} #mNews .news-list .list-body .list-date{color: #797979;position: relative;padding-left: 15px;font-size: 14px;font-weight: 500;font-family: 'Paperozi';line-height: 1;} #mNews .news-list .list-body .list-date:before{content:"";position:absolute;left:0;top: 2px;background:#6be4b3;width:9px;height:9px;border-radius:50%;} #mNews .news-list .list-body .list-tit{margin-top: 15px;color: #222;font-weight: bold;font-size: 24px;font-family: 'Paperozi';word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 1.3;transition: .3s ease-out;} #mNews .news-list .more-arr{position: absolute;right: 0;top: 50%;transform: translateY(-50%);padding-left: 40px;border-left: 1px solid #eaeaea;padding-top: 20px;padding-bottom: 20px;transition: .3s ease-out;} #mNews .news-list .more-arr span{height: 35px;width:60px;background:#f4f6f7;color:#6c6c6c;line-height: 35px;padding: 0 14px;border-radius: 30px;display: flex;justify-content: center;align-items: center;font-size: 20px;font-weight: normal;transition: .3s ease-out;} #mNews .news-list .more-arr i{font-weight: normal; transition: .3s ease-out;} #mNews .new-block a:hover .thumb img {transform: scale(1.08); filter: brightness(0.7);} #mNews .new-block a:hover .txt .tit {color: #666;} #mNews .news-list a:hover .list-thumb img {transform: scale(1.08); filter: brightness(0.8);} #mNews .news-list a:hover .list-body .list-tit {color: #666;} #mNews .news-list a:hover .more-arr span {background: #6be4b3; color: #fff; transform: translateX(3px);} #mNews .news-list a:hover .more-arr i {color: #fff;} #mNews .news-cont .empty{font-size: 18px;color:#888;text-align:center;font-family: 'Paperozi';display:flex;justify-content: center;align-items: center;min-height: 100px;width: 100%;} @media (max-width: 1170px){ } @media (max-width: 767px){ } /*--------------------------------------- 하단 ---------------------------------------*/ footer{clear:both;position:relative;width: 100%;background: #142031;font-family: 'Paperozi';border-radius: 30px 30px 0 0;} footer a{color: inherit;} footer a img{max-width:100%;} footer.mfooter{/* margin-top: 100px; */} footer.sfooter{margin-top: 140px;} footer:after{content:''; display:block; clear:both;} footer article{position:relative;max-width: 1800px;margin: 0 auto;padding: 50px 0 70px;} footer .ft-top{display:flex;justify-content: space-between;align-items: flex-start;padding-bottom: 70px;} footer .ft-top .ft-left{display: flex;} footer .ft-info{display:flex;gap: 60px;align-items: flex-start;} footer .ft-logo{display: flex; gap: 40px; align-items: flex-end;} footer .ft-bottom{display:flex;justify-content: space-between; border-top:1px solid rgb(255,255,255,.15); padding:40px 0 0;} footer .ft-bottom .ft-left{display:flex;align-items: center;gap: 30px;} footer .ft-bottom .ft-right{display:flex;align-items: center;gap: 10px;} footer .adm-btn{} footer .adm-btn a{background: #fff;color: #333;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:#ec6a34; color:#fff;} footer .ft-logo img{max-width:100%;} footer .ft-menu{display:inline-flex;gap: 40px;font-size:0;line-height:0;padding:0;margin:0;flex-direction: row;align-items: center;} footer .ft-menu li{transition:.2s ease-out;} footer .ft-menu li a{font-size:18px;line-height:1;font-family: 'Paperozi';color: #fff;font-weight:normal;transition:.3s ease-out;} footer .ft-menu li:first-child a{color: #01ce6b;} footer .ft-menu li strong{font-weight: 600;transition:.3s ease-out;} footer .ft-menu li:hover a{color: #fff;} footer .ft-menu li:first-child:hover a{color: #00ff84;} footer address{font-size: 17px;color: #fff;font-style: normal;font-weight: 400;display: flex;flex-direction: column;gap: 15px;} footer address dl{display: flex;} footer address dl > dt{width:90px;font-weight: 600;position:relative;padding-left: 25px;} footer address dl > dt i{font-weight:normal;position:absolute;left:0;top:2px;font-size: 18px;} footer address dl > dd{} footer .loca-btn{font-size: 17px;color: #fff;border: 1px solid rgb(255, 255, 255, .3);border-radius: 10px;width: 130px;height:48px;display:flex;padding: 0 15px 0 20px;justify-content: space-between;margin-top: 30px;align-items: center;transition: .3s;} footer .loca-btn i{font-size:20px; font-weight:normal;} footer .loca-btn:hover{background:#fff; color:#222; border-color:#fff;} footer .ft-top .ft-right{} footer .select_footer{position: relative;width: 180px;height: 48px;z-index:10;text-align:left;} footer .select_footer ul{bottom: 48px;display:none;position:absolute;z-index:999;border-radius:10px 10px 0 0;border:0;background:#f1f3f7;width: 180px;transition:.3s;} footer .select_footer ul.open{display:block;padding-top: 10px;} footer .select_footer ul li{color:#bebebe;padding: 0 20px 0 20px;transition: .3s;} footer .select_footer ul li a{display:block;font-size:16px;color:#555;padding:7px 0;transition: .3s;word-break: keep-all;} footer .select_footer ul li a:hover{color: #000;} footer .select_f_btn{display:block;width: 180px;height: 48px;border-radius: 8px;background: #142031;border: 1px solid rgb(255,255,255,.3);text-align:left;text-transform:uppercase;padding: 0 10px 0 20px;font-size: 16px;font-weight: 600;color: #fff;font-family: 'Paperozi';letter-spacing: -.5px;box-sizing: border-box;transition: .3s;} 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: 21px;font-weight: normal;} footer .select_f_btn.on{border-radius:0 0 10px 10px;background:#f1f3f7;color: #222;} footer .copyright{position: relative;padding: 20px 40px 0 0;} footer cite{color: #ffffff6b;font-size: 13px;font-weight: 400;font-style: normal;margin-right: 15px;} footer .link-green{transition:.2s ease-out;} footer .link-green:hover{color:#00c850;} #top_btn {position: relative;width: 87px;height: 48px;line-height:46px;color: #fff;border: 0;border-radius: 8px;text-align:center;font-size:15px;z-index: 10;font-weight: 600;background: #01ce6b;transition: .3s;} #top_btn i{font-weight:normal; font-size:18px;} #top_btn:hover {border-color:#00ac59;background:#00ac59;color:#fff} @media (max-width: 1830px){ footer{width:95%;} } @media (max-width: 1300px){ footer .copyright {max-width: 800px;} } @media (max-width: 1240px){ footer article {flex-direction: column; padding: 40px 50px 0;} footer .ft-left {gap: 40px;} footer .ft-right {width: 100%;} } @media (max-width: 767px){ footer {border-radius: 15px; margin: 30px auto 10px;} footer article {flex-direction: column; padding: 20px; gap: 20px;} footer .ft-left {gap: 20px;} footer .ft-info {gap: 20px; align-items: center; flex-direction: column;} footer .ft-menu {flex-wrap: wrap; row-gap: 10px; column-gap: 20px; justify-content: center;} footer .ft-menu li a {font-size: 15px;} footer address {font-size: 15px; line-height: 1.5; align-items: center; word-break: keep-all; text-align: center;} footer .ft-right {flex-direction: column; align-items: center; gap: 15px;} footer .copyright {margin-top: 20px; min-height:auto; border-radius: 15px 15px 0 0;} footer .copyright cite {font-size: 14px; padding: 10px 10px 0 10px;} footer .select_footer{width:100%;height:45px;} footer .select_f_btn{width:100%; height: 45px; border-radius: 5px; padding: 0 20px; font-size: 16px;} footer .select_footer ul{bottom:45px; border-radius:5px 5px 0 0; width:100%;} footer .select_footer ul.open{padding-top:10px;} footer .select_footer ul li{text-indent:20px;} footer .select_footer ul li a{font-size:16px; color:#555; padding:7px 0;} footer .select_f_btn.on{border-radius:0 0 5px 5px; background:#f1f3f7;} footer .copyright:before{left:-20px;border-bottom-right-radius:10px;} footer .copyright:after{right:-20px;border-bottom-left-radius:10px;} }