#allWrap{position:relative;width:100%;overflow:hidden;height:100%;word-break:keep-all;} #allWrap.main{} /* ****************** 메인 비주얼 ********************** */ #mainVisual{overflow:hidden;width:100%;height:100vh;position:relative;background-color: #fff;} /* 메인인트로 */ #mainVisual .main-intro {position:absolute; left: 0; top: 0; width: 100%; height: 100%; background:transparent; z-index:0; overflow: hidden;} #mainVisual .main-intro .inner {display: flex; align-items: center; justify-content: center; position: relative; height: 100%;} #mainVisual .main-intro .inner .img-bx {position: absolute; left: 50%; top: 50%; opacity: 0; width: 947px; height: 947px; transform: translate(-50%, -50%);} #mainVisual .main-intro .inner .img-bx .bg {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transform-origin: center center;} #mainVisual .main-intro .inner .txt-bx {position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center;} #mainVisual .main-intro .inner .txt-bx span {position: absolute; display: inline-block; line-height:1;} #mainVisual .main-intro .inner .txt-bx span > svg{max-width:100%;} #mainVisual .main-intro .inner .txt-bx span.left {left:200px;right:auto;top:0;bottom:auto;transform:scale(2) translate(-50%, -50%);} /* C */ #mainVisual .main-intro .inner .txt-bx span.left .sy-c{transform:scale(2);} #mainVisual .main-intro .inner .txt-bx span.mid {left:auto;right:0px;top:-200px;bottom:auto;transform:scale(2) translate(-50%, -50%);} /* S */ #mainVisual .main-intro .inner .txt-bx span.mid .sy-s{transform:scale(2);} #mainVisual .main-intro .inner .txt-bx span.right {left: 50%;top: 50%;margin: 25% 0 0 30%;transform:scale(2) translate(-50%, -50%);} /* T */ #mainVisual .main-intro .inner .txt-bx span.right .sy-t{transform:scale(2);} #mainVisual .visual {max-width: 1980px; height: 100vh; width: 96%; margin: 0 auto;} #mainVisual .slog{width:100%;} #mainVisual .slog span{position:absolute; color: #000;} #mainVisual .text-move{font-size:130px; font-family:"Poppins", sans-serif; font-weight:500;letter-spacing:-2px;line-height:1;position: absolute;left:0;white-space: nowrap;will-change: transform;transition:.4s ease-out;z-index:1;} #mainVisual .text-move-left{text-align:left; bottom: 220px; opacity:0;} #mainVisual .text-move-right{right:0;bottom:200px; text-align: right; opacity:0;} #mainVisual .text-move .RollTxt{position: absolute; left: 50%; height: 20rem; width: 200vw; white-space: nowrap;} #mainVisual .text-move .RollTxt .flow-text{display:flex;right: 0;flex:0 0 auto;white-space:nowrap;/* overflow:hidden; */transition:0.3s;font-size: 100px;color: #313131;flex-direction: row-reverse;} #mainVisual .text-move .RollTxt .flow-wrap{font-family:"Tenor Sans", sans-serif;letter-spacing: -4px;word-spacing: -4px;font-weight: 400;animation:textLoop 20s linear infinite;padding-right:90px;} #mainVisual .text-move b{font-style:normal;font-family:"Poppins", sans-serif; font-weight:500;letter-spacing:-2px;} #mainVisual .text-move b.gray{color: #dadada;} #mainVisual .slog span .gray{font-style:normal;font-family:"Poppins", sans-serif;font-weight:500;letter-spacing:-2px;color: rgb(0,0,0,.2);} @keyframes textLoop{ 0%{-webkit-transform:translate3d(0%, 0, 0); transform:translate3d(0%, 0, 0);} 100% {-webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0);} } @keyframes textLoop2{ 0%{-webkit-transform:translate3d(0%, 0, 0); transform:translate3d(0%, 0, 0);} 100% {-webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0);} } @keyframes fadeInLeft { to {opacity: 1; margin-left:-17%;} } @keyframes fadeInRight { to {opacity: 1; right:-21%;} } #mainVisual .hero{height: 100%; padding: 0; display: grid; place-items: center; text-align: center;} #mainVisual .hero__content button {opacity: 0; pointer-events: none; transition: opacity 0.8s ease;} #mainVisual .visual button { font-size: 28px; border: none; border-radius: 50%; letter-spacing: -.5px; cursor: pointer; position: relative; z-index: 10; font-size:0; width:340px; height:340px; transition: .1s ease-out; background: url("/images/main/scst_bg_txt_big.png") no-repeat 50% 50% #c8005f; } #mainVisual .visual button:before{content:""; position:absolute; left:50%; top:50%; border-radius:50%; width:100%; height:100%; background: url("/images/main/scst_bg_big.png") no-repeat 50% 50%;animation: wcSpinner 8s infinite linear;transform:translate(-50%, -50%);} #mainVisual .visual button:hover {font-size:40px;font-weight: 600;font-family: 'ELAND_Choice';color: #fff;background: #c8005f;mix-blend-mode: normal;width:380px;height:380px;} #mainVisual .visual button:hover:before{opacity:0;} #mainVisual .visual button > span { display: flex; background: #212121; opacity:0; width:125px; height:40px; font-size:18px; line-height: 1; letter-spacing: 0px; font-weight: 500; border-radius: 30px; margin: 20px auto 0; justify-content: center; align-items: center; font-family: "Marcellus"; transition: .2s ease-out; } #mainVisual .visual button:hover > span{opacity:1;background: #fff; color: #212121;} #mainVisual .hero__content .vision-circle-inner span {width: auto; font-weight: normal; font-size: 17px;border-radius:0px; font-weight: 500; letter-spacing: -.5px; word-spacing: -1px; padding: 5px 16px 7px; color: #fff; background: #000;} @keyframes wcSpinner { 0% {transform:translate(-50%, -50%) rotate(0deg);} 50% {transform:translate(-50%, -50%) rotate(180deg);} 100% {transform:translate(-50%, -50%) rotate(360deg);} } #mainVisual .visual .vs-wr > li:first-child.a-{opacity:0; top:50%; bottom:auto; right:auto; left:50%; transform:translate(-50%, -50%); transition:.8s; transition-delay:.3s;} #mainVisual .visual .vs-wr > li:first-child.a-.in-view{opacity:1; top:0%; bottom:auto; right:auto; left:30%; transform:translate(-50%, -50%);} #mainVisual .visual .vs-wr > li:nth-child(2).a-{opacity:0; top:50%; left:auto; bottom:auto; right:50%; transform:translate(-50%, -50%); transition:.8s; transition-delay:.1s;} #mainVisual .visual .vs-wr > li:nth-child(2).a-.in-view{opacity:1; top:0%; left:auto; bottom:auto; right:15%; transform:translate(-50%, -50%);} #mainVisual .visual .vs-wr > li:nth-child(3).a-{opacity:0; top:50%; left:auto; bottom:auto; right:50%; transform:translate(-50%, -50%); transition:.8s; transition-delay:.2s;} #mainVisual .visual .vs-wr > li:nth-child(3).a-.in-view{opacity:1; top: 30%; left:auto; bottom:auto;right: 5%;transform: translate(-50%, -50%);} #mainVisual .visual .vs-wr > li:nth-child(4).a-{opacity:0; bottom:50%; left:50%; transform:translate(-50%, 50%); transition:.8s; transition-delay:.3s;} #mainVisual .visual .vs-wr > li:nth-child(4).a-.in-view{opacity:1;bottom: 30%;right: 5%;left: auto;transform: translate(-50%, -50%);} #mainVisual .visual .vs-wr > li:nth-child(5).a-{opacity:0; top:50%; bottom:50%; right:50%; left:auto; transform:translate(-50%, -50%); transition:.8s; transition-delay:.4s;} #mainVisual .visual .vs-wr > li:nth-child(5).a-.in-view{opacity:1;top: auto;left:auto;bottom:0%;right:15%;transform: translate(-50%, -0%);} #mainVisual .visual .vs-wr > li:nth-child(6).a-{opacity:0; bottom:50%; top:auto; right:auto; left:50%; transform:translate(-50%, -50%); transition:.8s; transition-delay:.3s;} #mainVisual .visual .vs-wr > li:nth-child(6).a-.in-view{opacity:1; bottom: 0%; left: 30%;transform: translate(-50%, -0%);} #mainVisual .visual .vs-wr > li:nth-child(7).a-{opacity:0; bottom:50%; left:50%; transform:translate(-50%, -50%); transition:.8s; transition-delay:.3s;} #mainVisual .visual .vs-wr > li:nth-child(7).a-.in-view{opacity:1;bottom: 25%;left: 20%;transform: translate(-50%, -50%);} #mainVisual .visual .vs-wr > li:nth-child(8).a-{opacity:0; top:50%; bottom:auto; right:auto; left:50%; transform:translate(-50%, -50%); transition:.8s; transition-delay:.4s;} #mainVisual .visual .vs-wr > li:nth-child(8).a-.in-view{opacity:1;top: 30%; bottom:auto; right:auto; left: 20%;transform: translate(-50%, -50%);} /* 영상 */ #mainVisual .bg-video {position: absolute; left: 50%; top: 0; width: 100vw; height: 1195px; margin-left: -50vw; z-index: 0; opacity: 0;} #mainVisual .bg-video video {position: absolute;left: 0;top: 0;width: 100%;/* height: 100%; */max-width: 1920px;/* min-height: 100%; *//* min-width: 100%; */object-fit: cover;z-index: 1;opacity:1;/*filter: grayscale(1);*/} #mainVisual .bg-video.show {opacity: 1 !important;z-index: 0 !important;} @media (max-width: 1280px){ #mainVisual .visual button{width:280px; height:280px; background-size:100%;} #mainVisual .visual button:before{background-size:100%;} #mainVisual .visual button:hover {font-size:36px;width:300px;height:300px;} } @media (max-width: 1240px){ } @media (max-width: 1170px){ #mainVisual .bg-video {height: 100%;} #mainVisual .bg-video video{left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%;} } @media (max-width: 1024px){ } @media (max-width: 767px){ #mainVisual, #mainVisual .visual, #mainVisual .hero {height: 600px;} #mainVisual .bg-video {height: 100%;} #mainVisual .bg-video video{left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200%;} #mainVisual .main-intro .inner .txt-bx{display:none;} #mainVisual .visual button{width:180px; height:180px;} #mainVisual .visual button:hover {font-size:24px;width:200px;height:200px;} #mainVisual .text-move .RollTxt .flow-text, #mainVisual .text-move {font-size: 70px;} #mainVisual .text-move-right {bottom: 120px;} #mainVisual .text-move .RollTxt .flow-text {flex-direction: unset;} #mainVisual .text-move .RollTxt .flow-wrap{padding-right:40px;} #mainVisual .text-move .RollTxt {left: 50%; height: 85px; width: 100vw;} #mainVisual .visual button > span {width: 115px; height: 35px; font-size: 17px;} } @media (max-width: 640px){ } /* 스크롤 *::-webkit-scrollbar{width:5px;} *::-webkit-scrollbar-thumb{background-color: #006beb; border-radius:0px; transition:all 0.5s;} *::-webkit-scrollbar-track{background-color:#f2f2f2; background:rgba(255,255,255,0.5); border-radius: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} /*--------------------------------------- 공통 타이틀 ---------------------------------------*/ #allWrap .m-tit {position: relative;display: flex;align-items: center;margin-bottom: 60px;} #allWrap .m-tit .flex-tit {display: flex;align-items: center;gap: 25px;} #allWrap .m-tit big {font-size: 80px; color: #212121; font-family: "Tenor Sans", sans-serif; letter-spacing: -2px; word-spacing: -3px;} #allWrap .m-tit big b {font-family: "Poppins", sans-serif; font-weight: 500;} #allWrap .m-tit small {font-size: 26px;font-weight:700;color: #212121;} /* 버튼 */ #allWrap .btnWr{/*margin-right: -60px;*/} #allWrap .BtnArr{transition:.3s;position: relative; font-family:"Poppins", sans-serif; display: inline-flex; align-items: center; color: inherit; text-decoration: inherit; box-sizing: border-box;} #allWrap .BtnArr .button-circle{display:flex; width:60px; height:60px; border-radius:50%; background:#000; justify-content: center; align-items: center; color: #fff; font-size: 28px;} #allWrap .BtnArr .button-circle-with-hover{} #allWrap .BtnArr .button-circle-with-hover i{font-weight:normal;transition:.2s ease-out;} #allWrap .BtnArr .button-circle .dot {position: absolute; top: 50%; height: 4px; display: flex; margin-top: -2px;} #allWrap .BtnArr .button-circle .dot div {display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: 1s dot_color infinite linear; margin-right: 4px;} #allWrap .BtnArr .button-circle .dot div.dot02 {animation-delay: 0.2s;} #allWrap .BtnArr .button-circle .dot div.dot03 {animation-delay: 0.4s;} @keyframes dot_color{ 0%{opacity: 0.3} 50%{opacity: 1} 100%{opacity: 0.3} } #allWrap .BtnArr .button-text{min-width:160px;text-align: center;/*transform: translateX(-60px);*/padding:0 30px;height:60px;display:flex;align-items: center;border-radius:60px;background:#000;color:#fff;transition: .3s;/* transition: transform .3s cubic-bezier(.77,0,.175,1); */justify-content: center;} #allWrap .BtnArr .button-text > span{transition:.3s;font-size:19px; font-family:"Poppins", sans-serif !important; font-weight:600;} #allWrap .BtnArr .button-circle-without-hover{transition: transform .3s cubic-bezier(.77,0,.175,1); transform: translateX(-60px);} #allWrap .BtnArr .button-circle-without-hover i{font-weight:normal;transition:.2s ease-out;} #allWrap .BtnArr:hover .button-circle-with-hover{animation: arrowMove 2s cubic-bezier(.455,.03,.515,.955) .3s;} #allWrap .BtnArr:hover .button-text {background:#c8005f;color:#fff; transform:translateX(0);} #allWrap .BtnArr:hover .button-circle-without-hover{transform:translateX(-7rem) scale(.5); z-index:-1;} #allWrap .BtnArr:hover .button-circle-without-hover i{transform:scale(.5); opacity:0;} #allWrap .BtnArr.pink .button-circle, #allWrap .BtnArr.pink .button-text{background:#c8005f;} #allWrap .BtnArr.black{} #allWrap .BtnArr.white{} #allWrap .BtnArr.white .button-circle, #allWrap .BtnArr.white .button-text{background:#fff; color:#000;} #allWrap .BtnArr.white .button-circle .dot div{background:#000;} #allWrap .BtnArr.white:hover .button-text{background:#c8005f;color:#fff;} @keyframes arrowMove { 0% {transform: translateX(0);} 15% {transform: translateX(5px);} 30% {transform: translateX(0);} 45% {transform: translateX(3px);} 60% {transform: translateX(0);} 75% {transform: translateX(2px);} to {transform: translateX(0);} } @media (max-width: 1170px){ #allWrap .m-tit big{font-size:70px; line-height:1;} } @media (max-width: 767px){ #Major .txt-right-wr .btnWr{margin:0;} #allWrap .btnWr{margin-top:30px;/* margin-right: -50px; */} #allWrap .m-tit{flex-direction: column;} #allWrap .m-tit .flex-tit{flex-direction: column;text-align: center;} #allWrap .m-tit big{font-size:40px;} #allWrap .m-tit small{font-size:18px;} #allWrap .BtnArr .button-text {min-width: 150px;/* transform: translateX(-50px); */padding: 0 25px;height: 50px;border-radius: 50px;} #allWrap .BtnArr .button-circle {width: 50px; height: 50px; font-size: 24px;} #allWrap .BtnArr .button-circle-without-hover {transform: translateX(-50px);} } @media (max-width: 640px){ #allWrap .btnWr{/* margin-right: -40px; */} #allWrap .BtnArr .button-text {min-width: 130px;padding: 0px 20px;height: 40px;border-radius: 40px;/* transform: translateX(-40px); */} #allWrap .BtnArr .button-circle {width: 40px; height: 40px; font-size: 19px;} #allWrap .BtnArr .button-text > span {font-size: 13px;} #allWrap .BtnArr .button-circle-without-hover {transform: translateX(-40px);} } /*--------------------------------------- 보드존 ---------------------------------------*/ #mBoard{position:relative;padding: 90px 0;z-index: 10;background: linear-gradient(to bottom, #f5f5f5 0%, #fdfdfd 100%);will-change: opacity; /* 또는 transform */transform: translateZ(0); /* GPU 가속 유도 */backface-visibility: hidden;} #mBoard article{max-width: 1800px;margin:0 auto;width:95%;} /* 뉴스*/ #mBoard .m-Notice{position:relative;} #mBoard .m-Notice .nocon{} #mBoard .m-Notice .nocon .guide{width:100%;display:flex;position:relative;padding-bottom: 30px;margin-bottom: 0;border-bottom: 1px solid #d9d5d2;flex-direction: column;} #mBoard .m-Notice .nocon .m-tit{width: 100%;margin: 0;justify-content: space-between;align-items: self-end;margin-bottom: 60px;} #mBoard .m-Notice .nocon .notab{position:relative;display: flex;width: 100%;gap: 5px;padding-bottom: 0;overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;scrollbar-width: none;} #mBoard .m-Notice .nocon .notab::-webkit-scrollbar {display: none;} #mBoard .m-Notice .nocon .notab button{cursor:pointer;box-sizing:border-box;background: none;border: none;flex: 0 0 auto;font-size: 18px;color: #5a5a5a;line-height: 1.2;/* font-family: "Poppins", sans-serif; */text-transform: capitalize;background: #e6e6e6;padding: 10px 15px;border-radius: 7px;} #mBoard .m-Notice .nocon .notabbutton {flex: 0 0 auto;} #mBoard .m-Notice .nocon .notab button span.tab{border:none;outline:none;margin:0;text-align:center;background: transparent;border-radius: 50px;font-weight: 400;position:relative;display: block;transition: .2s;} #mBoard .m-Notice .nocon .notab button em{position:relative;font-style:normal;z-index:5;} #mBoard .m-Notice .nocon .notab button .btn-box{right:0;position:absolute;bottom: 0;margin: 0;display: none;} #mBoard .m-Notice .nocon .notab button.active .btn-box {display: flex;} #mBoard .m-Notice .nocon .notab button.active{/* font-weight: 600; */color: #fff;background: #bba078;} #mBoard .m-Notice .nocon .notab button.active span.tab:before{/* background:#000; */} #mBoard .m-Notice .nocon .notab button.active .btn-box{z-index:2;} #mBoard .m-Notice .nocon .notab > button:hover, #mBoard .m-Notice .nocon .notab > button.active{opacity:1;background-position-y: 10%;} /* 탭 컨텐츠 show/hide는 display로 관리 */ #mBoard .m-Notice .nocon .tab-content { display:none; } #mBoard .m-Notice .nocon .tab-content.active { display:block; } #mBoard .m-Notice .nocon .notab::-webkit-scrollbar{ display:none; } #mBoard .m-Notice .nocon .notab button{ flex:0 0 auto; } #mBoard .m-Notice .news-list{position:relative;width: 100%;/* left:50%; *//* transform:translateX(-50%); */overflow: hidden;} #mBoard .m-Notice .news-list .slick-list{margin: 0 -10px;} #mBoard .m-Notice .news-list .slick-track{margin: 0;} /* 슬라이드 내부 요소는 block으로 두는 게 안전 */ #mBoard .m-Notice .news-list .slick-slide { display:block; } /* ← 기존에 flex였다면 교체 */ #mBoard .m-Notice .item-news{min-width: 440px;margin: 0;padding: 50px 30px;position:relative;transition:.3s;position:relative;border-right: 1px solid #d9d5d2;height: 320px;} #mBoard .m-Notice .item-news a{color: inherit;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;transition: .3s;height: 100%;width: 100%;} #mBoard .m-Notice .item-news .el-img{position: relative;overflow: hidden;border: 1px solid #ddd;background: #f5f5f5;} #mBoard .m-Notice .item-news .thumb {aspect-ratio: 16 / 9;margin-bottom: 15px;} #mBoard .m-Notice .item-news .thumb img{max-width:100%;} #mBoard .m-Notice .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;} #mBoard .m-Notice .item-news .cont{display: flex; flex-direction: column;} #mBoard .m-Notice .item-news .tit {font-size: 28px;line-height: 1.4;font-weight: 700;letter-spacing: -.5px;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;transition: .3s;color: #222;} #mBoard .m-Notice .item-news .icon{position:relative;padding-left: 12px;font-size:17px;font-weight:400;color: #333;font-family: "Poppins", sans-serif;margin-bottom: 10px;} #mBoard .m-Notice .item-news .icon:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;background: #b08d62;transform:translateY(-50%);} #mBoard .m-Notice .item-news .date{font-size:16px;color:#7d7d7d;position: absolute;bottom: 20px;} #mBoard .m-Notice .item-news .box:hover .tit {text-decoration: underline;} #mBoard .m-Notice .item-news .con {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;line-height: 1.6;font-size: 18px;color: #62696d;word-break: break-word;margin-top: 30px;} #mBoard .m-Notice .item-news:hover{/* background:#fff; */} #mBoard .m-Notice .item-news:hover .year{color:#146eb8; border-color:#146eb8;} #mBoard .m-Notice .item-news:hover .pub-tit{color:#202454;} #mBoard .m-Notice .item-news:hover .pub-txt{color:#202454;opacity:1;} #mBoard .m-Notice .news-list .slick-dots{position:absolute;left: 0%;bottom: -70px;/* transform: translateX(-50%); */display: inline-flex !important;gap:20px;width: 500px;align-items: center;justify-content: center;flex-direction: row;max-width: 1600px;width: 100%;} #mBoard .m-Notice .news-list .slick-dots > li{border-radius:50%;width: 10px;height: 10px;border: 0;margin: 0;min-width: 10px;line-height: 0;font-size: 0;} #mBoard .m-Notice .news-list .slick-dots > li button{width: 10px;height: 10px;border:none;background:#fff;border-radius:50%;font-size:0;opacity:.4;transition:.3s;} #mBoard .m-Notice .news-list .slick-dots > li:nth-child(2n){margin-top:0px;} #mBoard .m-Notice .news-list .slick-dots > li.slick-active > button{opacity:1;} #mBoard .m-Notice .tit-bt-wr{display:flex;gap: 20px;align-items: center;flex-wrap: wrap;} #mBoard .m-Notice .tab-box{display:flex;align-items: center;} #mBoard .m-Notice .news-control{position:relative;display: inline-flex;z-index:10;gap: 7px;} #mBoard .m-Notice .news-control .news-arrow{display:flex; gap:10px; font-size:0; margin:0; padding:0;} #mBoard .m-Notice .news-control .arr{display:block !important;background:#fff;border:1px solid #dcdcdc;position:relative;font-size:24px;text-align:center;line-height: 50px;width: 50px;height: 50px;border:0;border-radius:50%;transition:.3s;color:#222;} #mBoard .m-Notice .news-control .news-arrow .slick-arrow i{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:19px;} #mBoard .m-Notice .news-control .news-arrow .slick-arrow:hover{transform:translateY(-2px); box-shadow:6px 8px 10px 0px rgba(0, 0, 0, 0.1);} #mBoard .m-Notice .news-control .arr:hover, #mBoard .m-Notice .news-control .news-play:hover{background:#9a9da3; color:#fff;} #mBoard .m-Notice .news-control .news-play{width: 50px;height: 50px;background:#fff;border:0;display:inline-flex;border-radius: 50%;transition:.3s;font-size: 24px;text-align: center;line-height: 50px;color:#222;justify-content: center;align-items: flex-start;} #mBoard .m-Notice .news-control .news-play:before{font-family: 'remixicon' !important; font-style: normal;} #mBoard .m-Notice .news-control .news-play.on{} #mBoard .m-Notice .news-control .news-play.on:before{} #mBoard .news-play:before{font-family: 'remixicon' !important; content: "\efd7";} #mBoard .news-play.play:before{content: "\f00a";} #mBoard .m-Notice .empty{font-size: 18px;color: #666;text-align: center;min-height: 200px;display: flex !important;justify-content: center;align-items: center;width: 100vw !important;min-width: 100%;white-space: nowrap;} /* 갤러리 */ #mBoard .m-Gallery{position: relative;margin-top: 100px;--gap: clamp(10px, 1.2vw, 18px); /* 유동 간격 */--ratio: 17/12; /* 기본 썸네일 비율 */} #mBoard .m-Gallery .m-tit{justify-content: space-between; margin-bottom: 40px; align-items: end;} #mBoard .m-Gallery .m-tit big{/* font-size: 50px; */} #mBoard .m-Gallery .m-tit small{} #mBoard .m-Gallery .btnArea{display:inline-flex;gap: 20px;align-items: center;} #mBoard .m-Gallery .m-tit .btnWr{/* margin: 0; */} #mBoard .m-Gallery .m-tit .more-plus{position:relative; display: inline-flex;font-family: "Instrument Sans", ui-sans-serif;font-weight:600;font-size: 18px;color: #212121;gap:5px;transition:.4s;justify-content: center;align-items: center;text-transform: uppercase;} #mBoard .m-Gallery .m-tit .more-plus:hover{} #mBoard .m-Gallery .m-tit .more-plus:after {display: block; content:""; position:absolute; bottom: -0.5rem; left: 50%; transform:translateX(-50%); background:#212121; height: 2px; width: 0; transition:var(--transition-custom);} #mBoard .m-Gallery .m-tit .more-plus:hover:after {width: 100%;} #mBoard .m-Gallery .gall-control {display:flex;align-content: center;align-items: center;gap:5px;} #mBoard .m-Gallery .gall-control .arr{display:block !important;background:#e9e9e9;border:1px solid #dcdcdc;position:relative;font-size:24px;text-align:center;line-height: 50px;width: 50px;height: 50px;border:0;border-radius:50%;transition:.3s;color:#222;} #mBoard .m-Gallery .gall-control .arr:hover, #mBoard .m-Gallery .gall-control .gall-play:hover{background:#9a9da3; color:#fff;} #mBoard .m-Gallery .gall-control .gall-play{width: 50px;height: 50px;background:#e9e9e9;border:0;display:inline-flex;border-radius: 50%;transition:.3s;font-size: 24px;text-align: center;line-height: 50px;color:#222;justify-content: center;align-items: flex-start;} #mBoard .m-Gallery .gall-control .gall-play:before{font-family: 'remixicon' !important; font-style: normal;} #mBoard .m-Gallery .gall-control .gall-play.on{} #mBoard .m-Gallery .gall-control .gall-play.on:before{} #mBoard .gall-play:before{font-family: 'remixicon' !important; content: "\efd7";} #mBoard .gall-play.play:before{content: "\f00a";} #mBoard .m-Gallery .progress { display: block; width: calc(100% - 80px); height: 1px; overflow: hidden; background-color: #e4e0dd; transition: background-size .4s ease-in-out; background-image: linear-gradient(to right, #000000, #000000); background-repeat: no-repeat; background-size: 0 100%; } #mBoard .m-Gallery .gall-control nav {background: transparent;border-radius: 100%;cursor: pointer;display: inline-block;width: 40px;height: auto;color: #000;font-size: 20px;position: relative;vertical-align: middle;-ms-transform-origin: center;transform-origin: center;transition: all .5s cubic-bezier(.165,.84,.44,1);outline: none;box-shadow: none;z-index:0;} #mBoard .m-Gallery .gall-control nav.arr-next{text-align: right;} #mBoard .m-Gallery .gall-list{position:relative;width: 100%;/* left:50%; *//* transform:translateX(-50%); */} #mBoard .m-Gallery .gall-list .slick-list { margin: 0 calc(var(--gap) * -1); } #mBoard .m-Gallery .item-gall { padding: 0 var(--gap); } #mBoard .m-Gallery .gall-list .slick-track{margin: 0;} #mBoard .m-Gallery .gall-list .slick-slide{} #mBoard .m-Gallery .item-gall{margin:0 10px;position:relative;transition:.3s;position:relative;/* height: 440px; */} #mBoard .m-Gallery .item-gall a{color: inherit;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;transition: .3s;height: 100%;width: 100%;} #mBoard .m-Gallery .item-gall .el-img{position: relative;overflow: hidden;border: 0;background: #000;border-radius: 10px;} #mBoard .m-Gallery .item-gall .thumb {position: relative; width: 100%; aspect-ratio: var(--ratio); margin-bottom: 50px; border-radius: 10px; overflow: hidden; background: #000;} #mBoard .m-Gallery .item-gall .thumb img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} #mBoard .m-Gallery .item-gall .cate {display: block;font-size: 17px;line-height: 1;font-weight: 800;color: #00b29c;margin-bottom: 1em;text-transform: uppercase;font-family: "Montserrat", serif;} #mBoard .m-Gallery .item-gall .cont{display: flex;flex-direction: column;position: absolute;width: 100%;height: 100%;justify-content: flex-end;bottom: 0;padding: 30px;background: linear-gradient(to top, #000000 0%, #00000000 100%);} #mBoard .m-Gallery .item-gall .tit {font-size: 24px;line-height: 1.4;font-weight: 600;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: .3s;color: #fff;} #mBoard .m-Gallery .item-gall .icon{position:relative;padding-left: 12px;font-size:17px;font-weight:400;margin-bottom: 10px;} #mBoard .m-Gallery .item-gall .icon:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;background:#000;transform:translateY(-50%);} #mBoard .m-Gallery .item-gall .date{font-size:16px;color: #fff;margin-bottom: 10px;} #mBoard .m-Gallery .item-gall .box:hover .tit {text-decoration: underline;} #mBoard .m-Gallery .item-gall:hover{/* background:#fff; */} #mBoard .m-Gallery .item-gall:hover .year{color:#146eb8; border-color:#146eb8;} #mBoard .m-Gallery .item-gall:hover .pub-tit{color:#202454;} #mBoard .m-Gallery .item-gall:hover .pub-txt{color:#202454;opacity:1;} #mBoard .m-Gallery .gall-list .slick-dots{position:absolute;left: 0%;bottom: -70px;/* transform: translateX(-50%); */display: inline-flex !important;gap:20px;width: 500px;align-items: center;justify-content: center;flex-direction: row;max-width: 1600px;width: 100%;} #mBoard .m-Gallery .gall-list .slick-dots > li{border-radius:50%;width: 10px;height: 10px;border: 0;margin: 0;min-width: 10px;line-height: 0;font-size: 0;} #mBoard .m-Gallery .gall-list .slick-dots > li button{width: 10px;height: 10px;border:none;background:#fff;border-radius:50%;font-size:0;opacity:.4;transition:.3s;} #mBoard .m-Gallery .gall-list .slick-dots > li:nth-child(2n){margin-top:0px;} #mBoard .m-Gallery .gall-list .slick-dots > li.slick-active > button{opacity:1;} #mBoard .m-Gallery .empty{font-size: 18px;color: #666;text-align: center;min-height: 200px;display: flex;justify-content: center;align-items: center;width: 100vw !important;min-width: 100%;white-space: nowrap;} @media (max-width: 1280px){ #mBoard .m-Gallery{ --ratio: 4/3; } #mBoard .m-Notice .item-news{min-width:auto;} } @media (max-width: 1170px){ #mBoard .m-tit .flex-tit {align-items: flex-start; flex-direction: column;} } @media (max-width:990px){ #mBoard .m-Gallery{ --ratio: 1/1.1; --gap: clamp(8px, 2.5vw, 14px); } } @media (max-width: 767px){ #mBoard{padding:60px 0 0;} #mBoard .m-Notice .tit-bt-wr{align-items: center;margin-top: 15px;justify-content: center;} #mBoard .m-Notice .nocon .m-tit {width: 100%;justify-content: center;align-items: center;text-align: center;margin-bottom: 40px;} #mBoard .m-tit .flex-tit {align-items: center;gap: 10px;} #mBoard .btnWr{margin:0;} #mBoard .m-Notice .nocon .notab{justify-content: center;} #mBoard .m-Notice .nocon .notab button span.tab{font-size: 18px;font-weight: 500;} #mBoard .m-Notice .news-list .slick-slide > div{width:100% !important;} #mBoard .m-Notice .item-news {width: 100% !important;padding: 30px;height: 250px;} #mBoard .m-Notice .item-news .tit{font-size:22px;} #mBoard .m-Gallery{margin-top:60px;} #mBoard .m-Gallery .m-tit {flex-direction: column;margin-bottom: 30px;align-items: center;} #mBoard .m-Gallery .m-tit big {font-size: 34px;} #mBoard .m-Gallery .m-tit .more-plus{font-size:15px;} #mBoard .m-Gallery .item-gall .cont{padding:20px;} #mBoard .m-Gallery .item-gall .tit{font-size:22px;} #mBoard .m-Gallery .item-gall .thumb{margin-bottom:0; border-radius:15px;} #mBoard .m-Gallery .btnArea{align-items: center; margin-top: 15px; justify-content: center;} #mBoard .m-Notice .news-control .arr, #mBoard .m-Notice .news-control .news-play, #mBoard .m-Gallery .gall-control .arr, #mBoard .m-Gallery .gall-control .gall-play{width:40px; height:40px; font-size:18px; line-height:40px;} } @media (max-width: 640px){ #mBoard .m-Gallery{ --ratio: 1/0.7; --gap: clamp(6px, 3vw, 12px); } #mBoard .m-Gallery .item-gall {margin: 0 0px;} } /*--------------------------------------- 메인 어바웃 ---------------------------------------*/ #about{position:relative;max-width:1920px;margin:0 auto;background: linear-gradient(to top, #ffffff 0%, #fdfdfd 100%);z-index: 5;} #about #canvas{position: absolute; left: 0; top: 50%; opacity: 1; width: 100%; z-index: 1; transform: translate(-0%, -60%);} #about article{max-width: 1800px;width:95%;margin:0 auto;position: relative;text-align: center;padding: 170px 0 200px;z-index:5;} #about .keyTxt{font-weight: 600;letter-spacing: -1.5px;/* font-family: "Poppins", sans-serif; */font-size: 56px;font-family: 'ELAND_Choice';line-height: 1.4;text-align: left;display: inline-block;} #about .keyTxt .reveal-text { display: inline-block; background: linear-gradient(to right, #000 0%, #000 50%, #e8e8e8 50%, #e8e8e8 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 1.2s ease-out; } /* 포인트 컬러를 위한 태그도 같은 방식 적용 */ #about .keyTxt .reveal-text > b { display: inline-block; background: linear-gradient(to right, #c8005f 0%, #c8005f 50%, #e8e8e8 50%, #e8e8e8 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 1.2s ease-out; } #about .RollTxt{position:absolute; left:0; top:480px; height: 165px; width: 100vw; left:50%; margin-left: -50vw;white-space:nowrap; overflow:hidden;} #about .RollTxt .flow-text{display:flex; flex:0 0 auto; white-space:nowrap; /* overflow:hidden; */ transition:0.3s;} #about .keyTxt .reveal-text > b{color:#c8005f;transform: scale(1.01); /* 살짝 확대 */display: inline-block;} #about .RollTxt .flow-wrap{animation:textLoop 20s linear infinite; padding-right:120px;} #about .RollTxt .flow-wrap img{width:1920px;} #about .bg-video2 {position: absolute;/* left: 50%; */bottom: 350px;width: 100%;height:100%;/* margin-left: -50vw; */z-index: -1;transform: scale(-1, 1);opacity: 1;} #about .bg-video2:after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 70%);opacity: 1;z-index: 2;} #about .bg-video2 video {position: absolute;left: 0;top: 0;width: 100%;height: 100%;min-height: 100%;min-width: 100%;object-fit: cover;z-index: 1;/* filter: grayscale(1); */} #about .btnWr{position:absolute; left: 260px; top: 558px; z-index:10;} .en #about .keyTxt{font-family: var(--font-family1);line-height: 1.3;letter-spacing:-.5px;font-size: 42px;} .en #about .keyTxt .reveal-text > b{font-weight:600;} @media (max-width: 1300px){ #about .keyTxt{font-size:42px;} } @media (max-width: 1170px){ #about article {padding:120px 0;} #about .keyTxt {font-size: 34px; text-align: center;} #about #canvas {left: 0; top: 50%; width: 100%; height: 100%; transform: translate(-0%, -50%);} } @media (max-width: 767px){ #about article {width: 80%;padding: 60px 0;} #about .keyTxt {font-size: 24px; text-align: center;} } /*--------------------------------------- 메인 배너존 ---------------------------------------*/ #aboutBn{position: relative;height: 465px;border-radius: 15px;overflow: hidden;z-index: 1;width: 95%;margin: 0 auto;display: flex;justify-content: flex-end;align-items: center;max-width: 1800px;} #aboutBn .bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;border-radius: 15px; z-index: -1;} #aboutBn .bg span {position: absolute;top: 50%;left: 0;width: 100%;height: 100vh;overflow: hidden;transform: translate(0%, -50%);} #aboutBn .bg img {width: 100%;height: 100vh;object-fit: cover;} #aboutBn .txtWr {display: flex; flex-direction: column; width: 50%; gap: 30px;} #aboutBn strong {font-size: 36px;font-weight: bold;letter-spacing: -1px;line-height: 1.6;color: #fff;font-family: 'ELAND_Choice';margin-bottom: 30px;} #aboutBn ul{display:flex; gap:15px;} #aboutBn ul > li{} #aboutBn ul > li > a{font-size: 19px;line-height:1;padding: 0px 30px;height: 57px;border-radius:100px;background:#fff;text-align:center;font-weight: 700;letter-spacing: -.5px;color:#000;display: flex;justify-content: center;align-items: center;transition: .3s;} #aboutBn ul > li > a > p{display: inline-block;overflow:hidden;line-height:1;height:1em;position: relative;} #aboutBn ul > li > a > p > span{transition: .3s;display: block;line-height:1;height:1em;} #aboutBn ul > li > a span.off{} #aboutBn ul > li > a span.on{transform: translateY(3%);} #aboutBn ul > li > a:hover{background:#c9005f; color:#fff;} #aboutBn ul > li > a:hover .off{transform: translateY(-100%);} #aboutBn ul > li > a:hover .on{transform: translateY(-100%);} .en #aboutBn .txtWr{width:60%;} .en #aboutBn strong{font-family: var(--font-family1); letter-spacing:-.5px; line-height:1.2;} .en #aboutBn ul > li > a > p > span{height: 1.1em;} @media (max-width: 1400px){ #aboutBn {height: auto; padding: 60px; text-align: center; justify-content: center; align-items: center;} #aboutBn strong {margin-bottom: 0;} #aboutBn .txtWr {flex-direction: column; width: 100%; align-items: center;} } @media (max-width: 1170px){ #aboutBn strong {font-size: 32px;} #aboutBn .bg img {height: 80vh;} } @media (max-width: 767px){ #aboutBn {padding: 30px 15px 15px;} #aboutBn strong {font-size: 22px;} #aboutBn strong br{display:none;} #aboutBn ul {width:100%; gap: 10px; flex-direction: column;} #aboutBn ul > li > a {font-size: 17px; padding: 0px 30px; height: 47px; border-radius: 10px;} } /*--------------------------------------- 메인 전공소개 ---------------------------------------*/ #mMajor{position:relative;margin:0 auto;width:95%;padding: 210px 0;max-width: 1800px;} #mMajor .m-tit {position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px;} #mMajor .m-tit .flex-tit {display: flex;align-items: center;gap: 25px;text-align: center;} #mMajor .m-tit big {font-size: 80px; color: #212121; font-family: "Tenor Sans", sans-serif; letter-spacing: -2px; word-spacing: -3px;} #mMajor .m-tit big b {font-family: "Poppins", sans-serif; font-weight: 500;} #mMajor .m-tit small {} #mMajor .dpt-list{} #mMajor .dpt-list > ul{display:flex;gap: 15px 15px;flex-wrap: wrap;justify-content: center;} #mMajor .dpt-list li{} #mMajor .dpt-list li.flip-box{} #mMajor .dpt-list li.flip-box .gray{background:#fbf9f8;display:flex;justify-content: center;align-items: center;width: 100%;height: 100%;} #mMajor .dpt-list li.flip-box .gray > img{max-width:100%; width:auto;} #mMajor .dpt-list li.flip-box .white{background:#fff;display:flex;justify-content: center;align-items: center;width: 100%;height: 100%; padding-left: 60px;} #mMajor .dpt-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; } #mMajor .dpt-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;} #mMajor .dpt-list .flip-box:nth-child(1) .flip-inner:before{transition-delay:.1s ;} #mMajor .dpt-list .flip-box:nth-child(2) .flip-inner:before {transition-delay:.2s ;} #mMajor .dpt-list .flip-box:nth-child(3) .flip-inner:before{transition-delay:.3s ;} #mMajor .dpt-list .flip-box{background-color: transparent;width: calc(20% - 12px);height: 340px;border-radius: 10px;overflow: hidden;} #mMajor .dpt-list .flip-box.link{cursor: pointer;} #mMajor .dpt-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;} #mMajor .dpt-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: 10px;} #mMajor .dpt-list .flip-box .flip-front{transform: rotateY(0deg);} #mMajor .dpt-list .flip-box .flip-back{transform: rotateY(180deg);position: absolute;left: 0;top: 0;width: 100%;color: #fff;background-color: #daba65;border: 1px solid rgba(255,255,255,0.1);} #mMajor .dpt-list .flip-box:hover .flip-front{transform: rotateY(-180deg); transform-style: preserve-3d;} #mMajor .dpt-list .flip-box:hover .flip-back{transform: rotateY(0deg);} #mMajor .dpt-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; } #mMajor .dpt-list .flip-box .flip big{font-size: 28px;font-weight:600;line-height: 1.2;font-family: 'ELAND_Choice';} #mMajor .dpt-list .flip-box .flip small{font-size: 16px;border-radius:5px;font-weight: 500;background:#000;padding: 6px 11px 6px;line-height: 1;} #mMajor .dpt-list .flip-box .flip small.d-m{background: linear-gradient(to right, rgb(200 0 95) 0%, rgb(211 172 90) 100%);} #mMajor .dpt-list .flip-box .flip small.s-m{background: linear-gradient(to right, rgb(200 0 95) 0%, rgb(211 172 90) 100%);} #mMajor .dpt-list .flip-box .flip-front p{font-size: 40px; font-weight: 600; line-height: 1.3; transition: all 0.85s ease-in-out; opacity: 0; transform: translateX(50px);} #mMajor .dpt-list .flip-box .flip-front p span{font-size: 30px; font-weight: 400;} #mMajor .dpt-list .flip-box .flip-back p{font-size:20px; font-weight:500; line-height: 1.5;word-break: keep-all;} #mMajor .dpt-list .flip-box .flip-back .flip{text-align: center; padding:0 30px; line-height: 1.7;} #mMajor .dpt-list .flip-box .flip-front figure{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius:10px; overflow: hidden; margin: 0;} #mMajor .dpt-list .flip-box:nth-child(1) .flip-front p{transition-delay: 0.1s;} #mMajor .dpt-list .flip-box:nth-child(2) .flip-front p{transition-delay: 0.25s;} #mMajor .dpt-list .flip-box:nth-child(3) .flip-front p{transition-delay: 0.4s;} #mMajor .dpt-list .flip-inner:before{width: 0%;} #mMajor .dpt-list .flip-box .flip-front p{opacity: 1; transform: translateX(0);} #mMajor .dpt-list .flip-box .more-plus{background:url("/images/main/plus.png") no-repeat 0 0; font-size:0; width:46px; height:46px; display:block; transition: .3s;} #mMajor .dpt-list .flip-box .more-plus:hover{transform: rotate(90deg);} .en #mMajor .dpt-list .flip-box .flip big{font-family: var(--font-family1); letter-spacing:-.5px;} .en #mMajor .dpt-list .flip-box .flip big::first-letter {text-transform: uppercase;} @media (max-width: 1800px){ #mMajor .dpt-list li:nth-child(4){/* display:none; */} #mMajor .dpt-list .flip-box {/* min-width: 340px; */ width: calc(25% - 12px);} } @media (max-width: 1300px){ #mMajor .dpt-list .flip-box {width: calc(33.33333% - 12px);} } @media (max-width: 1170px){ #mMajor{padding:80px 0;} #mMajor .m-tit .flex-tit {align-items: flex-start; flex-direction: column;} #mMajor .m-tit big{font-size:70px;} } @media (max-width: 980px){ #mMajor .m-tit {align-items: center; text-align: center; flex-direction: column;} #mMajor .m-tit .flex-tit {align-items: center;margin-bottom: 30px;} #mMajor .dpt-list .flip-box {width: calc(50% - 12px);} } @media (max-width: 767px){ #mMajor{padding:60px 0 0; margin: 10px; width: auto;} #mMajor .m-tit{margin-bottom:40px;} #mMajor .m-tit .flex-tit{gap:10px;margin: 0;} #mMajor .m-tit big {font-size: 40px;} #mMajor .dpt-list > ul{gap:10px;} #mMajor .dpt-list .flip-box{height: 150px;} #mMajor .dpt-list .flip-box .flip big {font-size: 24px;} #mMajor .dpt-list .flip-box .flip-back p {font-size: 18px;} #mMajor .dpt-list .flip-box .more-plus {background-position:center center; width: 40px; height: 40px;} } @media (max-width: 640px){ #mMajor .dpt-list .flip-box {width:100%;} } /*--------------------------------------- 메인 교수진 ---------------------------------------*/ #mFaculty{position:relative;height: auto;overflow: hidden;margin: 10px 10px 0 10px;padding: 140px 0 100px;border-radius: 25px;background: url("/images/main/prof_bg.jpg") no-repeat center / cover} #mFaculty article{max-width: 1540px;width:95%;margin:0 auto;/* height: 800px; */position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;} #mFaculty .m-tit{width: 480px;margin: 0;padding: 0;} #mFaculty .m-tit .flex-tit{display: inline-block;line-height: 1.1;} #mFaculty .m-tit big{font-size:100px;letter-spacing: -6px;} #mFaculty .m-tit big b{color: #b3b3b3;} #mFaculty .m-tit small{font-size: 25px;font-weight:700;position: absolute;bottom: 44px;right: 15px;} #mFaculty .f-slo{position: relative;/* right: 0; *//* bottom: 0; */z-index: 5;} #mFaculty .f-slo .f-txt{font-size:28px;color:#000;font-family:'ELAND_Choice';line-height: 1.4;letter-spacing: -1px;} #mFaculty .f-slo .f-txt strong{font-size:36px;} #mFaculty .tit-bt-wr{display:flex;gap: 20px;align-items: center;margin-top: 30px;} #mFaculty .tab-box{display:flex;align-items: center;} #mFaculty .faculty-control{position:relative;display: inline-flex;z-index:10;gap: 7px;} #mFaculty .faculty-control .news-arrow{display:flex; gap:10px; font-size:0; margin:0; padding:0;} #mFaculty .faculty-control .arr{display:block !important;background:#fff;border:1px solid #dcdcdc;position:relative;font-size:24px;text-align:center;line-height: 50px;width: 50px;height: 50px;border:0;border-radius:50%;transition:.3s;color:#222;} #mFaculty .faculty-control .news-arrow .slick-arrow i{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:19px;} #mFaculty .faculty-control .news-arrow .slick-arrow:hover{transform:translateY(-2px); box-shadow:6px 8px 10px 0px rgba(0, 0, 0, 0.1);} #mFaculty .faculty-control .arr:hover, #mFaculty .faculty-control .f-play:hover{background:#9a9da3; color:#fff;} #mFaculty .faculty-control .f-play{width: 50px;height: 50px;background:#fff;border:0;display:inline-flex;border-radius: 50%;transition:.3s;font-size: 24px;text-align: center;line-height: 50px;color:#222;justify-content: center;align-items: flex-start;} #mFaculty .faculty-control .f-play:before{font-family: 'remixicon' !important; font-style: normal;} #mFaculty .faculty-control .f-play.on{} #mFaculty .faculty-control .f-play.on:before{} #mFaculty .f-play:before{font-family: 'remixicon' !important; content: "\efd7";} #mFaculty .f-play.play:before{content: "\f00a";} #mFaculty .btnWr{} #mFaculty .faculty-cont{position: relative;/* top: 0px; */max-width: 1600px;margin-top: 60px;} #mFaculty .ProfList{/* max-width: 1774px; *//* margin:0 auto; *//* position: relative; *//* text-align:center; */} #mFaculty .ProfList .prof-slider{display:flex;gap: 65px 65px;margin-bottom: 40px;/* min-height:562px; */flex-wrap: wrap;justify-content: center;} #mFaculty .ProfList .prof-slider .profLi{position:relative;transition: .3s;width: 333px;height: 460px;} #mFaculty .slick-slide{transition: all .3s;} #mFaculty .prof-slider .slick-track{display:flex;gap:20px;padding-bottom: 35px;} #mFaculty .ProfList > ul > li > a{position:absolute;width:100%;height:100%;left:0;top:0;z-index: 5;} #mFaculty .ProfList .pItem{/* cursor: pointer; */overflow:hidden;position: relative;width: 333px;height: 460px;border-radius: 30px;padding: 10px;display: flex;box-shadow: 20px 20px 30px rgba(122, 122, 122, 0.1);flex-direction: column;background: rgb(255,255,255,.6);backdrop-filter: blur(10px);justify-content: space-between;transition: .3s;} /* Edit 버튼 */ .edit_area{position: absolute;left: 5px;bottom: 10px;z-index: 10;} .edit_area a{display: inline-block;padding: 5px 12px;border: 1px solid #ddd;color: #555;background-color: #fff;font-size: 13px; border-radius: 50px; transition: all .3s;} .edit_area a:hover{background: #000000; color: #fff; border: 1px solid #000000;} #mFaculty .posi { position: relative; background: #c9005f; font-size: 15px; font-weight: 500; color: #fff; border-radius: 30px; display: inline-flex; z-index: 5; justify-content: center; align-items: center; word-break: break-all; text-align: center; padding: 6px 12px; line-height: 1.2; margin-bottom: 5px; } #mFaculty .ProfList .pItem .conTop{display: flex;justify-content: space-between;align-items: center;padding: 20px 20px;position: relative;} #mFaculty .ProfList .pItem:before{transition:.3s ease-out;content:"";width:173px;height:173px;border-radius:50%;position:absolute;display: none;left:50%;top:50%;transform:translate(-50%, -50%);background:linear-gradient(90deg, #90103b 0%, #d74274 100%);} #mFaculty .ProfList .pItem .imgWr{transition:.3s ease-out;width: 141px;height: 141px;border-radius: 50%;overflow: hidden;position: relative;box-shadow: 10px 12px 20px rgba(0, 0, 0, 0.15);background: #fff;z-index: 2;} #mFaculty .ProfList .pItem .imgWr img{max-width:100%;min-width: 142px;} #mFaculty .ProfList .pItem .titWr{transition:.3s ease-out;position:relative; z-index:2; display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; color: #000; gap: 5px;} #mFaculty .ProfList .pItem .titWr big{transition:.3s ease-out;font-size: 28px; font-weight: bold;} #mFaculty .ProfList .pItem .titWr small{transition:.3s ease-out;font-size: 15px; font-weight: 300; font-family: "Poppins", sans-serif;} #mFaculty .ProfList .pItem .conBtm{transition:.3s ease-out;border-radius: 25px;background: rgb(0, 0, 0, .08);border: 1px solid rgb(255,255,255,.2);padding: 15px 0;position:relative;backdrop-filter: blur(10px);z-index:1;min-height: 247px;} #mFaculty .ProfList .pItem .pInfo{margin:0 auto;width:90%;} #mFaculty .ProfList .pItem .pInfo > li{position: relative;line-height:1.2;color: #fff;font-size: 15px;font-weight: 400;border-radius: 50px;min-height: 39px;background: rgb(255,255,255,.4);padding: 10px 10px 10px 45px;text-align: left;color: #000;height: 39px;overflow: hidden;} /* 전공 텍스트 전광판 효과 */ #mFaculty .ProfList .pItem .pInfo > li.pMajor{position: relative;overflow: hidden;background: #424251;color:#fff;border-radius:50px;padding: 10px;text-align: center;height: auto;} /* 전광판 트랙: li의 좌우 패딩(왼쪽 45px) 고려해서 맞춰주세요 */ #mFaculty .ProfList .pItem .pInfo > li.pMajor .marquee-track{transition:.3s ease-out;position:absolute; left:45px; right:10px; top:0; bottom:0; display:flex; align-items:center; gap:40px;/* 텍스트 사이 간격 */ will-change: transform; animation: marquee var(--dur, 10s) linear infinite;} /* 아이템(텍스트) */ #mFaculty .ProfList .pItem .pInfo > li.pMajor .marquee-item{transition:.3s ease-out;white-space:nowrap; display:inline-block; line-height:1; font-weight:500;} /* 실제 텍스트 폭(--w) 만큼만 이동 → 틈 없이 루프 */ @keyframes marquee{ from{ transform: translateX(0); } to { transform: translateX(calc(-1 * var(--w, 600px))); } } #mFaculty .ProfList .pItem .pInfo > li + li{margin-top: 5px;} #mFaculty .ProfList .pItem .pInfo > li > a{text-overflow: ellipsis;overflow: hidden;max-width: 100%;display: block;color: inherit;white-space: nowrap;} #mFaculty .ProfList .pItem .pInfo > li i.icon{position: absolute;left: 5px;top: 5px;font-size: 17px;font-weight: normal;width:28px;height:28px;background:#fff;color:#000;display:flex;border-radius: 50%;justify-content: center;align-items: center;line-height: 1;} #mFaculty .ProfList .pItem .pInfo > li > a:hover{text-decoration:underline;} /* #mFaculty .ProfList .profLi:hover .pItem{box-shadow: 0px 20px 30px rgb(200 0 95 / 25%);} #mFaculty .ProfList .profLi:hover .pItem:before{width:250%; height:200%;background:linear-gradient(90deg, #c8005f 0%, #c8005f 100%);left:50%;top:0%;transform:translate(-50%, -40%);} #mFaculty .ProfList .profLi:hover .pItem .conBtm{background:rgb(255,255,255,.6);} #mFaculty .ProfList .profLi:hover .pItem .titWr{color:#fff;} */ .empty_list{display: flex;justify-content: center;align-items: center;font-size: 17px;} .empty_list:hover:after{display:none !important;} .en #mFaculty .m-tit small {bottom: 20px; right: auto; left: 270px; width: 300px;} .en #mFaculty .f-slo{width: 45%;bottom: -70px;} .en #mFaculty .f-slo .f-txt{font-family: var(--font-family1);letter-spacing:-.5px;line-height: 1.3;} .en #mFaculty .f-slo .f-txt strong{} .en #mFaculty .ProfList .pItem .imgWr{width:120px; height:120px;} .en #mFaculty .ProfList .pItem .imgWr img{min-width: auto;} .en #mFaculty .ProfList .pItem .titWr{width: calc(100% - 120px);} .en #mFaculty .ProfList .pItem .titWr big{font-size: 23px;line-height: 1.1;} @media (min-width: 1520px) and (max-width: 1630px){ #mFaculty .f-slo{right:50px;} } @media (max-width: 1520px){ #mFaculty{padding: 80px 0;} #mFaculty article {height: auto;align-items: center;justify-content: center;} #mFaculty .m-tit {width: 100%; justify-content: center;} #mFaculty .m-tit .flex-tit {display: inline-flex;} #mFaculty .m-tit big {font-size: 80px; letter-spacing: -4px;} #mFaculty .btnWr {} #mFaculty .m-tit small {position: relative; bottom: auto; right: auto;} #mFaculty .f-slo {position: relative; right: auto; bottom: auto; text-align: center; margin-top: 40px;} #mFaculty .faculty-cont {position: relative; top: auto; margin-top: 60px;} #mFaculty .ProfList .prof-slider{margin-bottom:0;} #mFaculty .ProfList .slick-list {padding-bottom: 40px;} #mFaculty .tit-bt-wr{justify-content: center;} } @media (max-width: 767px){ #mFaculty {padding: 60px 0; border-radius:10px;} #mFaculty .m-tit big {font-size: 40px; letter-spacing: -2px;} #mFaculty .m-tit small {font-size: 18px;} #mFaculty .f-slo{margin-top:25px;} #mFaculty .f-slo .f-txt {font-size: 18px;} #mFaculty .f-slo .f-txt br{display:none;} #mFaculty .f-slo .f-txt strong {font-size: 22px;} #mFaculty .ProfList .pItem{width:100%;} #mFaculty .prof-slider .slick-track{display:flex;gap:0px;padding-bottom:0px;} #mFaculty .tit-bt-wr {align-items: center; margin-top: 15px; justify-content: center;} #mFaculty .btnWr{margin:0;} #mFaculty .faculty-control .arr, #mFaculty .faculty-control .f-play{width:40px; height:40px; font-size:18px; line-height:40px;} #mFaculty .faculty-cont {margin-top: 30px;} #mFaculty .ProfList .prof-slider{display:block;} #mFaculty .prof-slider .slick-track{display:block;} #mFaculty .ProfList .prof-slider .profLi{margin:0 10px;} #mFaculty .slick-slide{margin:0 20px;} } @media (max-width: 540px){ #mFaculty .faculty-cont{width:100% !important;} #mFaculty .slick-slide{margin:0 10px;} #mFaculty .ProfList .prof-slider .profLi {margin:0;} #mFaculty .ProfList .pItem{box-shadow:0px 10px 10px rgba(122, 122, 122, 0.1);} } /*--------------------------------------- 하단 ---------------------------------------*/ footer{clear:both;position:relative;margin: 10px;background: #d3d3d4;border-radius: 25px;z-index: 10;} footer.mfooter{} footer.sfooter{} footer:after{content:''; display:block; clear:both;} footer article{position:relative;width: 95%;max-width: 1700px;margin:0 auto;} footer .shap {position: absolute; right: 0; top: -5px; display: flex; align-items: flex-start;} footer .shap svg {fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1;} footer .shap .cir {margin-top: 5px; stroke-dasharray: 1875; stroke-dashoffset: 1875;} footer .shap .sq {margin-left: -135px; stroke-dasharray: 2392; stroke-dashoffset: 2392;} footer .ft-top{position:relative;padding: 40px 0 0px;display:flex;justify-content:space-between;align-items: flex-start;z-index: 5;} footer.sfooter .ft-top{border:0;} footer .ft-logo{} footer .ft-logo > a > img{width: 338px;} footer .copyright{} footer .copy-info address, footer cite{font-style:normal;line-height:1.8;/* flex-wrap: wrap; */} footer .copy-info address{font-size: 16px;color: #535353;width: 100%;gap: 30px 200px;font-weight: 500;display: flex;flex-wrap: wrap;} footer .copy-info address > dl{display: flex;flex-direction: column;gap: 10px;} footer .copy-info address > dl:first-child{/* width:100%; */} footer .copy-info address > dl:last-child{/* margin-left: 80px; */} footer .copy-info address > dl > dt{font-size: 17px;color: #000;font-family: "Poppins", sans-serif;font-weight: 600;} footer .copy-info address > dl > dd b{font-weight:normal; display:inline-block; width:50px;} footer .copy-info address a{color:#666;} footer .copy-info address a:hover{text-decoration:underline; transition:.2s ease-out;} footer .ft-left{/* display:inline-flex; *//* gap: 10%; */width: calc(100% - 270px);} footer .ft-right{display:inline-flex;align-items: flex-end;flex-direction: column;justify-content: flex-start;gap: 20px;} footer .ft-sns{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: #7e8183;font-size:30px;transition:.2s ease-out;} footer .ft-sns li a:hover{color:#444;} footer .select_footer{position: relative;width: 270px;height: 54px;z-index:5;text-align:left;transition:.3s;} footer .select_footer ul{bottom: 0;display:none;position:absolute;z-index:999;border:0;background: #f8f8f8;width: 270px;transition:.3s;border-radius: 10px 10px 0 0;backdrop-filter: #7e8183;border: 1px solid #7e8183;} footer .select_footer ul.open{display:block;padding-top:14px;border-bottom: 0;transition:.3s;bottom: 52px;} footer .select_footer ul li{color:#bebebe;} footer .select_footer ul li a{display:block;font-size:16px;font-weight:600;color: #7e8183;padding: 7px 25px;transition:.3s;} footer .select_footer ul li a:hover{color:#c81268;padding-left:30px;} footer .select_f_btn{border:0;display:block;width: 270px;height: 54px;font-weight: 600;background: #d3d3d4;transition:.3s;border-radius: 10px;text-align:left;border: 1px solid;text-transform:uppercase;padding:0 25px;font-size:18px;color: #7e8183;font-family: "Poppins", sans-serif;} footer .select_f_btn .ir{width:100%;display:flex;height:100%;align-items:center;justify-content:space-between;font-family: "Poppins", sans-serif;} footer .select_f_btn .ir i{font-size: 26px; font-weight: normal;} footer .select_f_btn.on{background: #f8f8f8;border-radius: 0 0 10px 10px;backdrop-filter: blur(5px);border-top: 0;} footer .ft-bottom{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;padding: 40px 0;z-index: 5;border-top: 1px solid rgb(0,0,0,0.05);margin-top: 40px;align-items: flex-start;} footer cite{font-size: 14px;color: #484a4b;font-weight: 400;font-style:normal;display: inline-block;font-family: "Poppins", sans-serif;} footer cite span{/* color: #c8005f; *//* font-weight: 400; *//* border-bottom: 1px solid; */} 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;flex-wrap: wrap;} footer .ft-menu li{transition:.2s ease-out;} footer .ft-menu li a{font-size: 17px;line-height:1;color: #535557;font-weight: 600;transition:.2s ease-out;font-family: 'ELAND_Choice';} footer .ft-menu li a strong{font-weight: bold;color: #000;} footer .ft-menu li:first-child a{} footer .ft-menu li:hover a{opacity:.6;} footer .adm-btn{display: inline-block; margin-left: 10px;} footer .adm-btn a{background: #fff;color: #333;border-radius:100px;height: 29px;padding: 0 13px;line-height: 1;font-size: 13px;font-weight: 400;letter-spacing: -.5px;gap: 3px;display:flex;justify-content: center;align-items: center;margin-bottom: -7px;transition: .3s;} footer .adm-btn a:hover{background: #333;color:#fff;} .en footer .ft-menu li a{font-family: var(--font-family1);} .en footer .ft-menu li a strong{display:inline-block;} .en footer .ft-menu li a strong::first-letter {text-transform: uppercase;} @media (max-width: 1380px){ footer .ft-left {gap: 20px; flex-direction: column;} } @media (max-width: 1280px){ footer article {width: 90%;} footer .ft-top {padding: 40px 0 0px;} footer .ft-logo > a > img {width: 270px;} footer .ft-bottom {gap: 20px; margin-top: 40px; align-items: center; flex-direction: column;} } @media (max-width: 980px){ footer .ft-top {align-items: end;flex-direction: column;gap: 30px;} footer .ft-left {align-items: center;width: 100%;} footer .ft-bottom {flex-direction: column;align-items: center;gap: 30px;padding: 30px 0;} footer .copyright {width: 100%; flex-direction: column; text-align: center; align-items: center; justify-content: space-between;} footer .copy-info address{flex-direction: column;align-items: center;} footer .copy-info address > dl {flex-wrap: wrap;width: 100%;} footer .copy-info address > dl:last-child{margin:0;} footer .ft-right {gap: 20px; align-items: center;} footer .copy-info address > dl > dt {width: 100%;} } @media (max-width: 767px){ footer{border-radius:10px;} footer .ft-logo > a > img {width: 220px;} footer .ft-menu {gap: 15px;/* flex-direction: column; */justify-content: center;} footer .ft-menu li a {font-size: 14px;} footer .copyright address {font-size: 15px; line-height: 1.5;} footer cite {font-size: 14px;line-height: 1.4;} footer .ft-right {display: inline-flex; width:100%;} footer .select_footer {width: 100%; height: 50px;} footer .select_f_btn {width: 100%;height: 50px;font-size: 17px;} footer .select_footer ul.open, footer .select_footer ul {bottom: 50px; width: 100%;} footer .ft-bottom {gap: 20px;margin-top: 20px;} footer .copy-info address {font-size: 14px; line-height: 1.6;} footer .copy-info address > dl > dt {font-size: 16px;} footer .ft-sns li a{font-size:24px;} } /* -------- 컨텐츠3 :: cursor -------- */ #cmMainCursor {width: 12rem;height: 12rem;position:fixed;top: 0;left: 0;z-index: 0;pointer-events:none;} .cm-cursor-inner {display: block;width: 100%;height: 100%;position:relative;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .cm-cursor-circle { display: block; width: 0; height: 0; position: absolute; top: 50%; left: 50%; margin-top: -90px; margin-left: -90px; overflow: hidden; opacity: 0; border-radius: 50%; z-index: 1; background: var(--main-color) no-repeat center center; } .cm-cursor-circle i {position: absolute;font-size: 1.9rem;top: calc(50% - 0.95rem);transform: rotate(90deg) translateY(-50%);color: #fff;right: 30%;} .cm-cursor-circle i:first-of-type {left: 30%;right:initial;transform:rotate(-90deg) translateY(-50%);} .cm-cursor-circle .dot {width: 0.5rem; height: 0.5rem; border-radius:100%; background: #fff; position:absolute; left: 50%; top: 50%; transform:translate(-50%, -50%);} /* 퀵메뉴 */ .quick-menu{position: fixed;bottom:-6rem;right: 20px;z-index:99;transition:all 0.4s ease-in-out;} .quick-menu .menu-list{position: relative; width:6rem; height:6rem;} .quick-menu .menu-list .list-item{position: absolute; top:0; right:0; transition:all 0.4s ease-in-out;; transition-delay:0.2s;} .quick-menu .menu-list .list-item a{position: relative;display: flex;align-items:center;justify-content: end;width:6rem;height:6rem;border-radius:6rem;backdrop-filter:blur(10px);margin:auto;margin-right:0;transition:all 0.4s ease-in-out;background: rgb(200 0 95);overflow:hidden;/* box-shadow: 0.5rem 0.5rem 1.5rem rgb(0 0 0/20%); */} .quick-menu.white .menu-list .list-item a {background: rgba(255,255,255,0.1);} .quick-menu .menu-list .list-item a em {position: relative; width:6rem; display: flex; align-items: center; justify-content: center;} .quick-menu .menu-list .list-item a em > img{max-width:100%;} .quick-menu .menu-list .list-item a em .icon-on {display: none;} .quick-menu .menu-list .list-item a i{position: relative;width:6rem;font-size:24px;font-weight:normal;color: #fff;text-align:center;z-index:1;transition:all 0.4s ease-in-out;} .quick-menu .menu-list .list-item a .txt{position: absolute;font-size: 17px;letter-spacing:-0.045em;color: #fff;font-weight: 600;opacity:0;transition:all 0.2s;transition-delay:0s;left:3rem;pointer-events: none;} .quick-menu .menu-list .list-item button {} .quick-menu .menu-list .list-item a:hover{width:20rem;background: #c8005f;} .quick-menu .menu-list .list-item a:hover .txt{opacity:1; transition:all 0.4s ease-in-out;; transition-delay:0.2s;} .quick-menu .menu-list .list-item a:hover:before{opacity:0;} .quick-menu .menu-list .list-item a:hover i {color: #fff;} .quick-menu .menu-list .list-item a:hover em .icon-off {display: none;} .quick-menu .menu-list .list-item a:hover em .icon-on {display: inline-block;} .quick-menu .menu-list .list-item .main-top-btn {cursor:pointer;width: 6rem;height: 6rem;border-radius:6rem;display: flex;align-items:center;justify-content: center;backdrop-filter:blur(10px);transition:all 0.4s ease-in-out;background: rgba(0,0,0,0.3);transition:all 0.4s ease-in-out;} .quick-menu.white .menu-list .list-item .main-top-btn {background: rgba(255,255,255,0.1);} .quick-menu .menu-list .list-item .main-top-btn i {color: #fff;font-size: 2.4rem;} .quick-menu .menu-list .list-item .main-top-btn:hover {background: #c8005f;} .quick-menu .menu-list .list-item .main-top-btn:hover i {} .active.quick-menu{bottom: 90px;} .active.quick-menu .list-item:nth-child(1) a{ animation:footerQuick 2.4s; animation-delay:0.6s} .active.quick-menu .list-item:nth-child(1) a i {animation:footerQuickIcon 2.4s; animation-delay:0.6s} .active.quick-menu .list-item:nth-child(1) a .txt{animation:footerQuickTxt 2.4s; animation-delay:0.6s} .active.quick-menu .list-item:nth-child(4){top:0} .active.quick-menu .list-item:nth-child(3){top:-7rem;} .active.quick-menu .list-item:nth-child(2){top:-14rem;} .active.quick-menu .list-item:nth-child(1){top:-21rem;} .active.quick-menu.bottom-fixed{bottom:14rem;} .en .quick-menu .menu-list .list-item:nth-child(1) a:hover{width:30rem;} .en .quick-menu .menu-list .list-item:nth-child(1) a .txt{width: 200px;} .en .quick-menu .menu-list .list-item a .txt{width: 120px; line-height: 1.1;} @keyframes footerQuick { 0% {width:6rem; background:#c8005f;/*background:rgba(0,0,0,0.1);*/} 25% {width:20rem; background:#c8005f;/*background:rgba(255,255,255,1.0);*/} 75% {width:20rem; background:#c8005f;/*background:rgba(255,255,255,1.0);*/} 100%{width:6rem; background:#c8005f;/*background:rgba(0,0,0,0.1);*/} } @keyframes footerQuickIcon { 0% {color: #fff;} 25% {color: #fff);} 75% {color: #fff;} 100%{color: #fff;} } @keyframes footerQuickTxt { 0% {opacity:0;} 25% {opacity:1;} 75% {opacity:1;} 100%{opacity:0;} } @media (max-width: 1170px){ /* 퀵메뉴 */ .quick-menu{bottom:-6rem;} .quick-menu .menu-list{width:6rem; height:6rem;} .quick-menu .menu-list .list-item a{width: 4rem;height: 4rem;border-radius: 4rem;} .quick-menu .menu-list .list-item a em {width: 4rem;} .quick-menu .menu-list .list-item a i{width: 4rem;font-size: 16px;} .quick-menu .menu-list .list-item a .txt{font-size: 15px;left: 2rem;} .quick-menu .menu-list .list-item a:hover{width: 15rem;} .quick-menu .menu-list .list-item .main-top-btn {width: 4rem;height: 4rem;border-radius: 4rem;} .quick-menu .menu-list .list-item .main-top-btn i {font-size: 2rem;} .active.quick-menu{bottom: 20px;} .active.quick-menu .list-item:nth-child(4){top:0} .active.quick-menu .list-item:nth-child(3){top: -5rem;} .active.quick-menu .list-item:nth-child(2){top: -10rem;} .active.quick-menu .list-item:nth-child(1){top: -15rem;} .active.quick-menu.bottom-fixed{bottom:14rem;} @keyframes footerQuick { 0% {width:4rem; background:#c8005f;/*background:rgba(0,0,0,0.1);*/} 25% {width:15rem; background:#c8005f;/*background:rgba(255,255,255,1.0);*/} 75% {width:15rem; background:#c8005f;/*background:rgba(255,255,255,1.0);*/} 100%{width:4rem; background:#c8005f;/*background:rgba(0,0,0,0.1);*/} } } @media (max-width: 767px){ .active.quick-menu .list-item:nth-child(3), .active.quick-menu .list-item:nth-child(2), .active.quick-menu .list-item:nth-child(1){display:none;} .quick-menu{right:10px; bottom:10px;} .active.quick-menu {bottom: 10px;} }