#allWrap{position:relative;width:100%;height:100%;overflow:hidden;} .img-box{position:relative; overflow:hidden;} .img-box img{position:relative; width:100%;transition:all 0.4s ease;} .view-btn{position:relative; display:block; width:105px; height:20px; text-align: right;} .view-btn .vb-arrow{position: absolute; width:15px; height:26px; opacity:1; transform: scale3d(0.5, 0.5, 0.5); top:-2.5px;} .view-btn .vb-arrow:nth-child(1){left:0; opacity:.6} .view-btn .vb-arrow:nth-child(2){left:9px; } .view-btn .vb-arrow:before{position: absolute; content: ' '; height:30%; width:100%; background: #999; left: 0; top:3.5px; transform: skew(0deg, 37deg);transition: all .4s;} .view-btn .vb-arrow:after{position: absolute; content: ' '; height:30%; width:100%; background: #999; left: 0; bottom:3.5px; transform: skew(0deg, -37deg);transition: all .4s;} .view-btn .vb-txt{font-size:16px; color:#888; font-weight:400; line-height: 1; letter-spacing: -0.01em; white-space:nowrap; transition: all .4s;} .bg-white{background:#fff;} .r-quick{position:fixed; bottom:30px; right:30px; z-index:99;} .r-quick a{display:block; height:50px; width:270px; padding: 8px 12px; font-size:17px; border-radius:30px; border: 1px solid rgba(255,255,255,.15); box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.5); transition:all .3s;} .r-quick a span{display: flex; align-items: center; justify-content: center; border-radius: 50%; height: 34px; width: 34px; background: linear-gradient(125deg, rgba(70,184,234,1) 0%, rgba(0,73,180,1) 100%); transition:all .3s;} .r-quick a span i{color:#fff;} .r-quick a p{color: #555; font-weight: 400; letter-spacing: 0; display: inline-block; position: absolute; z-index: 1; top: 13px; left: 57px;} .r-quick a:hover{background:linear-gradient(125deg, rgba(70,184,234,1) 0%, rgba(0,73,180,1) 100%); transition:all .3s;} .r-quick a:hover p{color: #fff;} @media (max-width: 1600px){ .view-btn{width:105px; height:20px;} .view-btn .vb-arrow{width:15px; height:26px; top:-2.5px;} .view-btn .vb-txt{font-size:16px;} } @media (max-width: 1340px){ } @media (max-width: 1080px){ } @media (max-width: 960px){ } @media (max-width: 760px){ } @media (max-width: 560px){ .view-btn{width:100px;} .view-btn .vb-arrow{width:14px; height:25px; top:-4.5px;} .view-btn .vb-txt{font-size:15px;} } @media (max-width: 440px){ } /*--------------------------------------- 메인 비쥬얼 ---------------------------------------*/ #mVisual{position:relative; overflow:hidden; height:900px; width:100%; background-color:#000; padding-top:100px;} #mVisual .mVideo{position:relative; width:100%; height:100%;overflow:hidden;} #mVisual .mVideo::before{position:absolute; display:block; content:''; top:0; left:0px; width:100%; height:100%; background:#000; z-index:1; opacity:.25;} #mVisual .mVideo video{width: 100%;height: auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%);} #mVisual .slog_wr{position:absolute; width:90%; max-width:1600px; left: 50%; transform: translateX(-50%); z-index:5; text-align: right; padding-top:250px;} #mVisual .slog_wr h2{position:relative; display:block; font-size:82px; font-weight:700; color:#fff; overflow: hidden;} #mVisual .slog_wr.ani h2.msh1 span{display: inline-block; opacity: 0; transform: translateY(100%); transition: all 1.2s 0.2s;} #mVisual .slog_wr.ani h2.msh2 span{display: inline-block; opacity: 0; transform: translateY(100%); transition: all 1.2s 0.4s;} #mVisual .slog_wr.ani h2.msh3 span{display: inline-block; opacity: 0; transform: translateY(100%); transition: all 1.2s 0.6s;} #mVisual .slog_wr.ani.in-view h2.msh1 span, #mVisual .slog_wr.ani.in-view h2.msh2 span, #mVisual .slog_wr.ani.in-view h2.msh3 span{opacity: 1; transform: translateY(0);} .scroll{position: absolute; width: 24px; height: 24px; right:30px; bottom:-120px; display: inline-block;} .scroll .sc-arrow{position: absolute; width: 28px; height: 8px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite; } .scroll .sc-arrow:nth-child(1){animation: move 3s ease-out 1s infinite;} .scroll .sc-arrow:nth-child(2){animation: move 3s ease-out 2s infinite;} .scroll .sc-arrow:before{position: absolute; content: ' '; top: 0; height: 100%; width: 51%; background: #fff; left: 0; transform: skew(0deg, 30deg);} .scroll .sc-arrow:after{position: absolute; content: ' '; top: 0; height: 100%; width: 51%; background: #fff; right: 0; width: 50%; transform: skew(0deg, -30deg);} .scroll .sc-txt {display: block; margin-top: 75px; margin-left: -30px; font-size:15px; color: #fff; text-transform: uppercase; white-space: nowrap;} #mVisual .slog_wr.ani .scroll{opacity: 0; transform: translateY(-50%); transition: all 1.2s 1s;} #mVisual .slog_wr.ani.in-view .scroll{opacity: 1; transform: translateY(0);} @keyframes move { 25% {opacity: 1;} 33% {opacity: 1; transform: translateY(30px);} 67% {opacity: 1; transform: translateY(40px);} 100% {opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5);} } @media (max-width: 1600px){ #mVisual{height:860px;} #mVisual .slog_wr{padding-top:250px;} #mVisual .slog_wr h2{font-size:72px;} .scroll{right:5%;} } @media (max-width: 1340px){ #mVisual{height:700px;} #mVisual .slog_wr{padding-top:150px;} #mVisual .slog_wr h2{font-size:60px;} } @media (max-width: 1080px){ #mVisual{height:640px;} #mVisual .slog_wr{padding-top:120px;} #mVisual .slog_wr h2{font-size:55px;} } @media (max-width: 960px){ #mVisual{height:500px; padding-top:80px;} #mVisual .slog_wr{padding-top:120px;} #mVisual .slog_wr h2{font-size:48px;} .scroll{display:none;} } @media (max-width: 760px){ #mVisual{height:440px;} #mVisual .slog_wr{padding-top:120px;} #mVisual .slog_wr h2{font-size:40px;} #mVisual .mVideo video{width: auto; height: 100%;} } @media (max-width: 560px){ #mVisual{height:380px; padding-top:70px;} #mVisual .slog_wr{padding-top:95px;} #mVisual .slog_wr h2{font-size:36px;} } @media (max-width: 440px){ } /*--------------------------------------- 어바웃 ---------------------------------------*/ #mAbout{padding:160px 0; overflow:hidden;} #mAbout .mA_wr{position: relative;} #mAbout .mA_wr .cen{ position: relative; display: flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:680px; height:680px; border-radius:50%; margin:auto; transform:scale(0); opacity:0; transition:all 0s 0s; z-index:1; } #mAbout .mA_wr .cen .inner{ position:relative; width:90%; height:90%; border-radius:50%; background: linear-gradient(130deg, rgba(14,176,217,1) 0%, rgba(4,53,142,1) 50%, rgba(26,15,101,1) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow:hidden; z-index: 5; } #mAbout .mA_wr .cen .inner::before{ position:absolute; display:block; content:''; top:50%; left:50%; width:1160px; height:480px; background:url("/images/main/a-BG.png") no-repeat; z-index:1; transform:translate(-50%, -50%); animation:bak-img infinite 4.5s ease-in; } #mAbout .mA_wr .cen .inner h2{position:relative; font-size:66px; color:#fff; font-weight:700; line-height:1; letter-spacing:-0.02em; z-index:2; margin:10px 0 30px;} #mAbout .mA_wr .cen .inner p{position:relative; font-size:18px; color:#fff; font-weight:400; line-height:1.6; letter-spacing:-0.025em; opacity:.75; z-index:2;} #mAbout .mA_wr .cen .inner p.p-mo{display:none;} #mAbout .mA_wr .cen canvas{width:100%; height:100%; position: absolute; z-index:-1; background: transparent; top:41.3%; left: 50%; transform: translate(-50%, -50%);} #mAbout .mA_wr .cen img.canvas-mo{display:none;} #mAbout .mA_wr .out-cir{} #mAbout .mA_wr .out-cir .img-box{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(0); margin:0; border-radius:50%; transition:var(--transition-custom); will-change:transform, filter, opacity; z-index: 5;} #mAbout .mA_wr .out-cir .img-box img{width:100%;} #mAbout .mA_wr .out-cir .img-box:not(.blur){border-radius:50%; overflow:hidden; box-shadow: 2rem 3rem 4.9rem -0px rgba(0,0,0,0.09); opacity:0;} #mAbout .mA_wr .out-cir .img-box.blur{filter:blur(0); opacity:0;} #mAbout .mA_wr .out-cir .img-box.box01{width:640px; height:640px;} #mAbout .mA_wr .out-cir .img-box.box02{width:320px; height:320px; z-index:2;} /* left-top */ #mAbout .mA_wr .out-cir .img-box.box03{width:230px; height:230px;} /* right-top */ #mAbout .mA_wr .out-cir .img-box.box04{width:140px; height:140px} /* left-bot */ #mAbout .mA_wr .out-cir .img-box.box05{width:360px; height:360px; z-index:2} /* right-bot */ #mAbout .mA_wr .out-cir .img-box.box06{width:360px; height:360px;} /* in-view */ #mAbout.in-view .mA_wr .cen{transform:scale(1); opacity:1; transition:all 1.4s 0.7s;} #mAbout.in-view .mA_wr .out-cir .img-box{opacity:1; transition-duration:1.2s;} #mAbout.in-view .mA_wr .out-cir .img-box.blur{filter:blur(10px); transition-property:transform, margin, filter; animation:blur-img 1.5s 1.2s linear both;} #mAbout.in-view .mA_wr .out-cir .img-box.box01{transform:translate(50%, -145%);} #mAbout.in-view .mA_wr .out-cir .img-box.box02{transform:translate(-185%, -140%); transition-delay:.3s;} #mAbout.in-view .mA_wr .out-cir .img-box.box03{transform:translate(180%, -115%); transition-delay:.3s;} #mAbout.in-view .mA_wr .out-cir .img-box.box04{transform:translate(-420%, 55%); transition-delay:.6s;} #mAbout.in-view .mA_wr .out-cir .img-box.box05{transform:translate(30%, 30%); transition-delay:.6s;} #mAbout.in-view .mA_wr .out-cir .img-box.box06{transform:translate(-280%, 55%);} @keyframes blur-img { 0% {opacity:0;} 50% {opacity:.6;} 100% {opacity:.4;} } @keyframes bak-img { 0% {opacity:.8; transform:scale(1) translate(-50%, -50%);} 50% {opacity: 1; transform:scale(.98) translate(-50%, -50%);} 100% {opacity: .8; transform:scale(1) translate(-50%, -50%);} } @media (max-width: 1600px){ #mAbout .mA_wr .cen{width:610px; height:610px;} #mAbout .mA_wr .cen .inner h2{font-size:60px; margin:10px 0 20px;} #mAbout .mA_wr .cen .inner p{font-size:18px;} #mAbout .mA_wr .cen canvas{top:34%; left:37.5%; transform:scale(0.9) translate(-50%, -50%);} #mAbout .mA_wr .out-cir .img-box.box01{width:620px; height:620px;} #mAbout .mA_wr .out-cir .img-box.box02{width:300px; height:300px;}/* left-top */ #mAbout .mA_wr .out-cir .img-box.box03{width:230px; height:230px;}/* right-top */ #mAbout .mA_wr .out-cir .img-box.box04{width:140px; height:140px}/* left-bot */ #mAbout .mA_wr .out-cir .img-box.box05{width:320px; height:320px;}/* right-bot */ #mAbout .mA_wr .out-cir .img-box.box06{width:360px; height:360px;} } @media (max-width: 1340px){ #mAbout{padding:150px 0 160px;} #mAbout .mA_wr .cen{width:540px; height:540px;} #mAbout .mA_wr .cen .inner h2{font-size:52px; margin:10px 0 20px;} #mAbout .mA_wr .cen .inner p{font-size:17px;} #mAbout .mA_wr .cen canvas{top:24.5%; left:28%; transform:scale(0.8) translate(-50%, -50%);} #mAbout .mA_wr .out-cir .img-box.box01{width:550px; height:550px;} #mAbout .mA_wr .out-cir .img-box.box02{width:260px; height:260px;}/* left-top */ #mAbout .mA_wr .out-cir .img-box.box03{width:200px; height:200px;}/* right-top */ #mAbout .mA_wr .out-cir .img-box.box04{width:140px; height:140px}/* left-bot */ #mAbout .mA_wr .out-cir .img-box.box05{width:280px; height:280px;}/* right-bot */ #mAbout .mA_wr .out-cir .img-box.box06{width:300px; height:300px;} /* in-view */ #mAbout.in-view .mA_wr .out-cir .img-box.box01{transform:translate(30%, -145%);} #mAbout.in-view .mA_wr .out-cir .img-box.box02{transform:translate(-200%, -140%);} #mAbout.in-view .mA_wr .out-cir .img-box.box03{transform:translate(165%, -110%);} #mAbout.in-view .mA_wr .out-cir .img-box.box04{transform:translate(-305%, 50%);} #mAbout.in-view .mA_wr .out-cir .img-box.box05{transform:translate(40%, 35%);} #mAbout.in-view .mA_wr .out-cir .img-box.box06{transform:translate(-230%, 90%);} } @media (max-width: 1080px){ #mAbout .mA_wr .cen canvas{top:24.5%; left:32%; transform:scale(0.8) translate(-50%, -50%);} } @media (max-width: 960px){ #mAbout{padding:130px 0 140px;} #mAbout .mA_wr .cen canvas{top:24.5%; left:32%; transform:scale(0.8) translate(-50%, -50%);} #mAbout .mA_wr .out-cir .img-box.box01{width:400px; height:400px;} #mAbout .mA_wr .out-cir .img-box.box02{width:200px; height:200px;}/* left-top */ #mAbout .mA_wr .out-cir .img-box.box05{width:220px; height:220px;}/* right-bot */ #mAbout .mA_wr .out-cir .img-box.box06{width:250px; height:250px;} #mAbout .mA_wr .out-cir .img-box.box03, #mAbout .mA_wr .out-cir .img-box.box04{display:none;} /* in-view */ #mAbout.in-view .mA_wr .out-cir .img-box.box01{transform:translate(30%, -155%);} #mAbout.in-view .mA_wr .out-cir .img-box.box02{transform:translate(-215%, -170%);} #mAbout.in-view .mA_wr .out-cir .img-box.box05{transform:translate(45%, 40%);} #mAbout.in-view .mA_wr .out-cir .img-box.box06{transform:translate(-200%, 70%);} } @media (max-width: 760px){ #mAbout .mA_wr .cen{width:460px; height:460px;} #mAbout .mA_wr .cen .inner::before{background-size:contain; width:1000px; height:250px;} #mAbout .mA_wr .cen .inner h2{font-size:42px; margin:0 0 12px;} #mAbout .mA_wr .cen .inner p{font-size:16px; padding:0 20px;} #mAbout .mA_wr .cen .inner p br{display:none;} #mAbout .mA_wr .cen canvas{display:none;} #mAbout .mA_wr .cen img.canvas-mo{display:block; position:absolute; width:102%; left:-1%; top:-1%; animation: canvas-mot 20s linear infinite;} @keyframes canvas-mot { from{transform:rotateZ(0);} to{transform: rotateZ(350deg);} } #mAbout .mA_wr .out-cir .img-box.box01{width:280px; height:280px;} #mAbout .mA_wr .out-cir .img-box.box02{width:150px; height:150px;}/* left-top */ #mAbout .mA_wr .out-cir .img-box.box05{width:170px; height:170px;}/* right-bot */ #mAbout .mA_wr .out-cir .img-box.box06{width:170px; height:170px;} /* in-view */ #mAbout.in-view .mA_wr .out-cir .img-box.box01{transform:translate(20%, -175%);} #mAbout.in-view .mA_wr .out-cir .img-box.box02{transform:translate(-215%, -170%);} #mAbout.in-view .mA_wr .out-cir .img-box.box05{transform:translate(45%, 65%);} #mAbout.in-view .mA_wr .out-cir .img-box.box06{transform:translate(-205%, 95%);} } @media (max-width: 560px){ #mAbout .mA_wr .cen{width:350px; height:350px;} #mAbout .mA_wr .cen .inner h2{font-size:38px; margin:0 0 10px;} #mAbout .mA_wr .cen .inner p{display:none;} #mAbout .mA_wr .cen .inner p.p-mo{display:block;} #mAbout .mA_wr .out-cir .img-box.box01{width:250px; height:250px;} #mAbout .mA_wr .out-cir .img-box.box02{width:120px; height:120px;}/* left-top */ #mAbout .mA_wr .out-cir .img-box.box05{width:130px; height:130px;}/* right-bot */ #mAbout .mA_wr .out-cir .img-box.box06{width:130px; height:130px;} /* in-view */ #mAbout.in-view .mA_wr .out-cir .img-box.box01{transform:translate(20%, -175%);} #mAbout.in-view .mA_wr .out-cir .img-box.box02{transform:translate(-175%, -160%);} #mAbout.in-view .mA_wr .out-cir .img-box.box05{transform:translate(45%, 65%);} #mAbout.in-view .mA_wr .out-cir .img-box.box06{transform:translate(-205%, 95%);} } @media (max-width: 440px){ #mAbout .mA_wr .cen{width:320px; height:320px;} #mAbout .mA_wr .cen .inner h2{font-size:36px; margin:0 0 10px;} #mAbout .mA_wr .cen .inner p{font-size:15px;} } /*--------------------------------------- 연구분야 ---------------------------------------*/ #mRch{position:relative; padding:160px 0;} #mRch .mR-top{position:relative; text-align:center; padding-bottom:100px;} #mRch .mR-top h2{font-size:52px; font-weight:600; color:#fff; letter-spacing:-0.03em; line-height:1.3;} #mRch .mR-top h2 small{display:block; font-size:25px; font-weight:400; letter-spacing:0; margin-bottom:30px;} #mRch .mRch_wr{position:relative; display: flex; justify-content: space-between; padding:100px 0;} #mRch .mRch_wr .cen-bar{position:absolute; width:2px; height:100%; left: 50%; top:0; transform: translateX(-50%); background: rgba(255, 255, 255, 0.2);} #mRch .mRch_wr .fixed_box{position: absolute; width:62px; height: 62px; left: 50%; transform: translateX(-50%);} #mRch .mRch_wr .fixed_box img{width:100%;} #mRch .mRch_wr .mRlist_wr{display: flex; justify-content: space-between; width: 100%;} #mRch .mRch_wr .mRlist{flex: 0 1 40%;} #mRch .mRch_wr .mR-con{position:relative; width:100%;} #mRch .mRch_wr .mR-con.mR-con-mov{display:none;} #mRch .mRch_wr .mR-con .mR-img{position:relative; width:100%; overflow:hidden;} #mRch .mRch_wr .mR-con .mR-img img{width:100%;} #mRch .mRch_wr .mR-con .mR-txt{} #mRch .mRch_wr .mR-con h2{font-size:42px; font-weight:700; line-height:1; color:#fff; margin:45px 0 20px;} #mRch .mRch_wr .mR-con .mR-txt p{font-size:20px; font-weight:400; line-height:1.4; color:#fff; opacity:.8;} #mRch .mRch_wr .mR-con .mR-img .line{ position:absolute; display:block; width:calc(100% - 30px); height:calc(100% - 30px); left:50%; top:50%; transform:translate(-50%, -50%); border:1px solid rgb(255 255 255 / 80%); opacity:0; transition:1.2s; z-index:2; } #mRch .mRch_wr .mR-con .mR-img::before{ position:absolute; content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,0.01); backdrop-filter: saturate(90%) blur(15px); -webkit-backdrop-filter: saturate(90%) blur(15px); top:0; left:0; opacity:0; transition:1.2s; } #mRch .mRch_wr .mR-con .mR-img::after{ position:absolute; content:''; display:block; width:100%; height:100%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); top:0; left:0; z-index:10; opacity:0; transition:1.2s; } #mRch .mR-con .mR-hov{position: absolute;top: 50%;left: 0%; width: 100%; z-index: 12;text-align: center; transform: translate(0,-100%);opacity: 0;transition: 0.7s;} #mRch .mR-con .mR-hov h2{margin:0 0 50px;} #mRch .mR-con .mR-hov h2 small{display:block; font-size:18px; font-weight:400; opacity:.6; margin-bottom:15px;} #mRch .mR-con .mR-hov .view-btn{position:relative; width: 180px; height: 60px; padding:17px 35px; border: 1px solid #fff; color:#fff; margin: 0 auto;} #mRch .mR-con .mR-hov .view-btn .vb-arrow{top:15px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(1){left:37px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(2){left:47px;} #mRch .mR-con .mR-hov .view-btn .vb-txt{color:#fff;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:before, #mRch .mR-con .mR-hov .view-btn .vb-arrow:after{background:#fff;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:before{top:3px;} /* 반응형 스타일 예시 -> 1200px 이하에서는 고정 요소가 아래에 배치됩니다. */ @media (max-width: 1200px){ #mRch{ display: block; width: 100%; } #mRch .fixed_box{width: 100%; height: 300px; } } /* hover 효과 */ #mRch .mR-con:hover .mR-img .line{opacity: 0.5} #mRch .mR-con:hover .mR-img::before, #mRch .mR-con:hover .mR-img::after{opacity: 1} #mRch .mR-con:hover .mR-hov{transform: translate(0,-50%);opacity: 1} #mRch .mR-con .mR-hov .view-btn:hover .vb-arrow:before, #mRch .mR-con .mR-hov .view-btn:hover .vb-arrow:after{left:6px; transition: all .4s;} /* 연구분야 위치 및 모션 */ #mRch .mRch_wr .mR-con:nth-child(n + 2){margin-top:380px;} #mRch .mRch_wr .mRlist + .mRlist{margin-top:380px;} #mRch.ani .mR-top{transform:translateY(-90px); opacity:0;} #mRch.ani.in-view .mR-top{transform:translateY(0px); opacity:1; transition:all 1.3s;} #mRch.ani .fixed_box img{transform:translateY(-90px); opacity:0;} #mRch.ani.in-view .fixed_box img{transform:translateY(0px); opacity:1; transition:all 1.3s;} #mRch .mR-con.ani{transform:scale(1.15); opacity:0;} #mRch .mR-con.ani.in-view{transform:scale(1); opacity:1; transition:all 1.3s;} @media (max-width: 1600px){ #mRch{padding:140px 0;} #mRch .mR-top{padding-bottom:100px;} #mRch .mR-top h2{font-size:46px;} #mRch .mR-top h2 small{font-size:23px; margin-bottom:20px;} #mRch .mRch_wr{padding:100px 0;} #mRch .mRch_wr .fixed_box{width:50px; height: 50px;} #mRch .mRch_wr .mR-con h2{font-size:32px; margin:30px 0 13px;} #mRch .mRch_wr .mR-con .mR-txt p{font-size:18px} #mRch .mR-con .mR-hov h2{margin:0 0 40px;} #mRch .mR-con .mR-hov h2 small{font-size:17px; margin-bottom:15px;} #mRch .mR-con .mR-hov .view-btn{width: 160px; height: 50px; padding:13px 35px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow{top:10px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(1){left:22px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(2){left:32px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:before{top:3px;} /* 연구분야 위치 및 모션 */ #mRch .mRch_wr .mR-con:nth-child(n + 2){margin-top:320px;} #mRch .mRch_wr .mRlist + .mRlist{margin-top:320px;} } @media (max-width: 1340px){ #mRch{padding:100px 0;} #mRch .mR-top{padding-bottom:80px;} #mRch .mR-top h2{font-size:38px;} #mRch .mR-top h2 small{font-size:21px; margin-bottom:20px;} #mRch .mRch_wr{padding:100px 0;} #mRch .mRch_wr .fixed_box{width:50px; height: 50px;} #mRch .mRch_wr .mR-con h2{font-size:32px; margin:30px 0 13px;} #mRch .mRch_wr .mR-con .mR-txt p{font-size:18px} #mRch .mR-con .mR-hov h2{margin:0 0 40px;} #mRch .mR-con .mR-hov h2 small{font-size:17px; margin-bottom:15px;} #mRch .mR-con .mR-hov .view-btn{width: 160px; height: 50px; padding:13px 35px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow{top:10px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(1){left:22px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(2){left:32px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:before{top:3px;} /* 연구분야 위치 및 모션 */ #mRch .mRch_wr .mR-con:nth-child(n + 2){margin-top:320px;} #mRch .mRch_wr .mRlist + .mRlist{margin-top:320px;} } @media (max-width: 1080px){ } @media (max-width: 960px){ } @media (max-width: 960px){ #mRch .mRch_wr .cen-bar , #mRch .mRch_wr .fixed_box{display:none;} #mRch .mRch_wr .mRlist_wr{display:block;} #mRch .mRch_wr .mRlist{width:100%;} #mRch .mRch_wr .mRlist.mRlist2{display:none;} #mRch .mRch_wr .mR-con.mR-con-mov{display:block;} /* 연구분야 위치 및 모션 */ #mRch .mRch_wr .mR-con:nth-child(n + 2){margin-top:80px;} #mRch .mRch_wr .mRlist + .mRlist{margin-top:80px;} } @media (max-width: 560px){ #mRch{padding:80px 0;} #mRch .mR-top{padding-bottom:0;} #mRch .mR-top h2{font-size:28px;} #mRch .mR-top h2 br{display:none;} #mRch .mR-top h2 small{font-size:16px; margin-bottom:10px;} #mRch .mRch_wr{padding:40px 0;} #mRch .mRch_wr .mR-con h2{font-size:28px; margin:25px 0 10px;} #mRch .mRch_wr .mR-con .mR-txt p{font-size:16px} #mRch .mR-con .mR-hov h2{margin:0 0 50px;} #mRch .mR-con .mR-hov h2 small{font-size:18px; margin-bottom:15px;} #mRch .mR-con .mR-hov .view-btn{width: 180px; height: 60px; padding:17px 35px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow{top:15px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(1){left:37px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:nth-child(2){left:47px;} #mRch .mR-con .mR-hov .view-btn .vb-arrow:before{top:3px;} /* 연구분야 위치 및 모션 */ #mRch .mRch_wr .mR-con:nth-child(n + 2){margin-top:60px;} } @media (max-width: 440px){ } /*--------------------------------------- 공지사항 ---------------------------------------*/ #mNot{position: relative; padding:160px 0;} #mNot .mNot_wr{position: relative; display: flex; align-items: flex-start; gap:110px;} #mNot .mNot_wr h2.mtit{font-size:82px; font-weight:700; line-height:1; letter-spacing:-0.015em; color:#12223a; white-space: nowrap; margin-bottom:80px;} #mNot .mN-left{position: relative;} #mNot .mN-left .arrow_wr button.slick-arrow{position:relative; display:inline-block; border: 0; background: none;} #mNot .mN-left .arrow_wr button.slick-arrow.Nprev{margin-right:15px; opacity:.5;} #mNot .mN-right{position: relative;} #mNot .mN-right ul.mN-list{position: relative;} #mNot .mN-right ul.mN-list li{position: relative; width:390px; margin-right:45px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end;} #mNot .mN-right ul.mN-list li a{position:absolute; display:block; width:100%; height:100%; left:0; top:0; z-index:1;} #mNot .mN-right ul.mN-list li .Nc-top{position: relative; width:100%; display: flex; justify-content: space-between; align-items: flex-end; padding:0 3px;} #mNot .mN-right ul.mN-list li .Nc-top p.date{font-size:42px; color:#ccc; font-weight:700; letter-spacing:-0.025em; line-height:1;} #mNot .mN-right ul.mN-list li .Nc-top p.date b{color:#333;} #mNot .mN-right ul.mN-list li .Nc-top p.date span{color:#333;} #mNot .mN-right ul.mN-list li .Nc-bot{position: relative; width:100%; padding:20px 3px; margin-top:15px;} #mNot .mN-right ul.mN-list li .Nc-bot::before{position:absolute; content:''; display:block; width:100%; height:1px; background:#ddd; left:0; top:0;} #mNot .mN-right ul.mN-list li .Nc-bot::after{position:absolute; content:''; display:block; width:0; height:1px; background:#004da3; left:0; top:0; z-index:2; transition: all .3s;} #mNot .mN-right ul.mN-list li .Nc-bot span.Npot{display:block; font-size:15px; color:#004da3; font-weight:700; line-height:1; margin-bottom:10px;} #mNot .mN-right ul.mN-list li .Nc-bot h4.tit{font-size:22px; color:#222; font-weight:500; letter-spacing:-0.01em; line-height:1.3;} #mNot .mN-right ul.mN-list li .Nc-bot h4.tit{display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} #mNot .mN-right ul.mN-list li .img-box{position:relative; width:100%; max-height:230px;} #mNot .mN-right ul.mN-list li .img-box img{width:100%;} /* hover 효과 */ #mNot .mN-right ul.mN-list li:hover .Nc-top .view-btn .vb-txt{color: #004da3; transition: all .4s;} #mNot .mN-right ul.mN-list li:hover .Nc-top .view-btn .vb-arrow:before, #mNot .mN-right ul.mN-list li:hover .view-btn .vb-arrow:after{background: #004da3; left:6px; transition: all .4s;} #mNot .mN-right ul.mN-list li:hover .Nc-bot::after{width:100%; transition: all .3s;} #mNot .mN-right ul.mN-list li:hover .img-box img{transform: scale(1.1); transition: all .3s;} @media (max-width: 1600px){ #mNot{padding:140px 0;} #mNot .mNot_wr{gap:110px;} #mNot .mNot_wr h2.mtit{font-size:66px; margin-bottom:80px;} } @media (max-width: 1340px){ #mNot{padding:110px 0;} #mNot .mNot_wr{gap:80px;} #mNot .mNot_wr h2.mtit{font-size:56px; margin-bottom:60px;} #mNot .mN-left .arrow_wr button.slick-arrow img{width:52px;} #mNot .mN-left .arrow_wr button.slick-arrow.Nprev{margin-right:10px;} #mNot .mN-right ul.mN-list li{width:300px; margin-right:40px;} #mNot .mN-right ul.mN-list li .Nc-top p.date{font-size:36px;} #mNot .mN-right ul.mN-list li .Nc-bot{padding:20px 3px; margin-top:15px;} #mNot .mN-right ul.mN-list li .Nc-bot span.Npot{margin-bottom:10px;} #mNot .mN-right ul.mN-list li .Nc-bot h4.tit{font-size:20px;} #mNot .mN-right ul.mN-list li .img-box{max-height:190px;} } @media (max-width: 1080px){ #mNot{padding:90px 0;} } @media (max-width: 960px){ #mNot{padding:80px 0;} #mNot .mNot_wr{gap:45px; flex-wrap: wrap;} #mNot .mNot_wr h2.mtit{font-size:45px; margin-bottom:0;} #mNot .mNot_wr h2.mtit br{display:none;} #mNot .mN-left{display: flex; justify-content: space-between; align-items: center; width: 100%;} #mNot .mN-left .arrow_wr button.slick-arrow img{width:45px;} #mNot .mN-left .arrow_wr button.slick-arrow.Nprev{margin-right:6px;} #mNot .mN-right ul.mN-list li{width:350px; margin-right:25px;} #mNot .mN-right ul.mN-list li .Nc-top p.date{font-size:34px;} #mNot .mN-right ul.mN-list li .Nc-bot{padding:20px 3px; margin-top:15px;} #mNot .mN-right ul.mN-list li .Nc-bot span.Npot{margin-bottom:10px;} #mNot .mN-right ul.mN-list li .Nc-bot h4.tit{font-size:20px;} #mNot .mN-right ul.mN-list li .img-box{max-height:200px;} } @media (max-width: 760px){ } @media (max-width: 560px){ #mNot .mN-right ul.mN-list li{width:300px; margin-right:20px;} #mNot .mN-right ul.mN-list li .Nc-top p.date{font-size:28px;} #mNot .mN-right ul.mN-list li .Nc-bot{padding:15px 3px; margin-top:10px;} #mNot .mN-right ul.mN-list li .Nc-bot span.Npot{margin-bottom:8px;} #mNot .mN-right ul.mN-list li .Nc-bot h4.tit{font-size:18px;} #mNot .mN-right ul.mN-list li .img-box{max-height:160px;} } @media (max-width: 440px){ } /*--------------------------------------- 세미나 ---------------------------------------*/ #mSem{position:relative; padding-bottom:160px} #mSem .mS_wr{position:relative; display:flex; flex-wrap:wrap;} #mSem .mS-left{position:relative; width:550px; height:640px; background:#03111f;} #mSem .mS-left::before{position:absolute; content:''; display:block; width:100%; height:100%; background:url("/images/main/s-BG.jpg") no-repeat; background-size:cover; left:0; top:0; opacity:.5;} #mSem .mS-left .mSl-txt{position:relative; width:calc(100% - 40px); height:calc(100% - 40px); margin: 20px; padding:50px 35px; border:1px solid rgb(255 255 255 / 50%); z-index:1;} #mSem .mS-left .mSl-txt h2{ position:relative; font-size:70px; font-weight:700; line-height:1; letter-spacing:-0.015em; color:#fff; width:100%; margin-bottom:25px; padding-bottom:10px; border-bottom:1px solid rgb(255 255 255 / 50%); white-space: nowrap; } #mSem .mS-left .mSl-txt p{font-size:24px; font-weight:500; line-height:1.3; letter-spacing:-0.015em; color:#fff; padding-right:100px;} #mSem .mS-left .mSl-txt ul.info{position:relative; padding-right:100px; margin:50px 0 70px;} #mSem .mS-left .mSl-txt ul.info li{position:relative; font-size:18px; font-weight:400; line-height:1.3; letter-spacing:-0.015em; color:#fff; opacity:.95; padding-left:25px;} #mSem .mS-left .mSl-txt ul.info li + li{margin-top:8px;} #mSem .mS-left .mSl-txt ul.info li i{position: absolute; font-size:1.15em; left:0; top:1px;} #mSem .mS-left .mSl-txt a{ position:relative; display:inline-block; font-size:17px; font-weight:500; line-height:1; letter-spacing:-0.02em; color:#fff; padding:13px 35px; background:rgb(1 11 20 / 35%); border:1px solid rgb(255 255 255 / 80%); transition: all .4s; } #mSem .mS-left .mSl-txt a::after{position:absolute; content:''; display:block; width:21px; height:1px; background:rgb(255 255 255 / 80%); right:-10px; top:50%; transform: translateY(-50%); transition: all .4s;} #mSem .mS-left .mS-obj{position: absolute; width:400px; bottom: 0; right: -30px; animation: Smmove 3s infinite; z-index:2;} #mSem .mS-left .mS-obj img{width:100%;} @keyframes Smmove{ 0%{transform: scale(1, 1)} 50%{transform: scale(0.9, 1)} 100%{transform: scale(1,1)} } #mSem .mS-left .mSl-txt a:hover{background:rgb(1 11 20 / 95%); border:1px solid rgb(255 255 255 / 100%); transition: all .4s;} #mSem .mS-left .mSl-txt a:hover::after{right:-15px; transition: all .4s;} #mSem .mS-right{position:relative; width:calc(100% - 550px); padding-left:50px;} #mSem .mS-right .mSr-top{position:relative; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: flex-end;} #mSem .mS-right .mSr-top::before{position:absolute; content:''; display:block; width:100%; height:1px; background:#d9d9d9; left:0; top:58%; transform: translateY(-50%);} #mSem .mS-right .mSr-top h2{position:relative; font-size:70px; font-weight:700; line-height:1; letter-spacing:-0.015em; color:#12223a; white-space: nowrap; background:#fff; padding-right:25px;} #mSem .mS-right .mSr-top .view-btn{position:relative; width: 130px; height: 40px; padding: 8px 13px; border: 1px solid #888; background:#fff; margin-bottom:10px;} #mSem .mS-right .mSr-top .view-btn::before{position:absolute; content:''; display:block; width:25px; height:100%; background:#fff; left:-26px; top:0; z-index:1;} #mSem .mS-right .mSr-top .view-btn .vb-arrow{top:6px;} #mSem .mS-right .mSr-top .view-btn .vb-arrow:nth-child(1){left:9px;} #mSem .mS-right .mSr-top .view-btn .vb-arrow:nth-child(2){left:18px;} #mSem .mS-right ul.mS-list{position:relative; } #mSem .mS-right ul.mS-list li{position:relative; height:190px; padding:10px; display: flex; flex-direction: column; justify-content: center;} #mSem .mS-right ul.mS-list li a{position:absolute; display:block; width:100%; height:100%; left:0; top:0; z-index:1;} #mSem .mS-right ul.mS-list li::before{position:absolute; content:''; display:block; width:100%; height:1px; background:#ddd; left:0; bottom:0;} #mSem .mS-right ul.mS-list li::after{position:absolute; content:''; display:block; width:0; height:1px; background:#004da3; left:0; bottom:0; z-index:2; transition: all .3s;} #mSem .mS-right ul.mS-list li .info{position:relative;} #mSem .mS-right ul.mS-list li .info span{position:relative; display:inline-block; font-size:17px; font-weight:500; line-height:1; letter-spacing:-0.015em; color:#888; padding-left:22px; margin:0 10px;} #mSem .mS-right ul.mS-list li .info span:first-child{margin-left:0;} #mSem .mS-right ul.mS-list li .info span + span::before{position:absolute; content:''; display:block; width:1px; height:15px; background:#ddd; left:-10px; top:0;} #mSem .mS-right ul.mS-list li .info span i{position: absolute; font-size:1.15em; left:0; top:-1px;} #mSem .mS-right ul.mS-list li h4{font-size:25px; font-weight:600; line-height:1; letter-spacing:-0.01em; color:#111; padding:15px 0 10px;} #mSem .mS-right ul.mS-list li p{font-size:18px; font-weight:400; line-height:1.35; letter-spacing:-0.01em; color:#111; opacity:.7;} #mSem .mS-right ul.mS-list li h4{display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} #mSem .mS-right ul.mS-list li p{display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} /* hover 효과 */ #mSem .mS-right .mSr-top .view-btn:hover .vb-txt{border-color:#004da3; color: #004da3; transition: all .4s;} #mSem .mS-right .mSr-top .view-btn:hover .vb-arrow:before, #mSem .mS-right .mSr-top .view-btn:hover .vb-arrow:after{background: #004da3; left:6px; transition: all .4s;} #mSem .mS-right ul.mS-list li:hover::after{width:100%; transition: all .3s;} #mSem .mS-right ul.mS-list li:hover .info span, #mSem .mS-right ul.mS-list li:hover h4{color: #004da3; transition: all .3s;} @media (max-width: 1600px){ #mSem{padding-bottom:140px} #mSem .mS-left{width:500px; height:570px;} #mSem .mS-left .mSl-txt{width:calc(100% - 40px); height:calc(100% - 40px); margin: 20px; padding:50px 35px;} #mSem .mS-left .mSl-txt h2{font-size:60px; margin-bottom:20px; padding-bottom:10px;} #mSem .mS-left .mSl-txt p{font-size:24px; padding-right:100px;} #mSem .mS-left .mSl-txt ul.info{padding-right:100px; margin:50px 0 70px;} #mSem .mS-left .mSl-txt ul.info li{font-size:18px; padding-left:25px;} #mSem .mS-left .mSl-txt a{font-size:17px; padding:13px 35px;} #mSem .mS-left .mS-obj{width:360px; right: -30px;} #mSem .mS-right{width:calc(100% - 500px); padding-left:50px;} #mSem .mS-right .mSr-top::before{top:58%;} #mSem .mS-right .mSr-top h2{font-size:60px; padding-right:25px;} #mSem .mS-right .mSr-top .view-btn{width: 130px; height: 40px; padding: 8px 13px; margin-bottom:10px;} #mSem .mS-right ul.mS-list li{height:170px; padding:10px;} #mSem .mS-right ul.mS-list li .info span{font-size:16px; padding-left:20px; margin:0 10px;} #mSem .mS-right ul.mS-list li h4{font-size:23px; padding:15px 0 10px;} #mSem .mS-right ul.mS-list li p{font-size:17px;} } @media (max-width: 1240px){ #mSem{padding-bottom:100px} #mSem .mS-left{width:460px; height:500px;} #mSem .mS-left .mSl-txt{width:calc(100% - 40px); height:calc(100% - 40px); margin:15px; padding:40px 35px;} #mSem .mS-left .mSl-txt h2{font-size:45px; margin-bottom:20px; padding-bottom:10px;} #mSem .mS-left .mSl-txt p{font-size:24px; padding-right:100px;} #mSem .mS-left .mSl-txt ul.info{padding-right:100px; margin:50px 0 70px;} #mSem .mS-left .mSl-txt ul.info li{font-size:18px; padding-left:25px;} #mSem .mS-left .mSl-txt a{font-size:17px; padding:13px 35px;} #mSem .mS-left .mS-obj{width:300px; right: -20px;} #mSem .mS-right{width:calc(100% - 460px); padding-left:50px;} #mSem .mS-right .mSr-top::before{top:58%;} #mSem .mS-right .mSr-top h2{font-size:45px; padding-right:25px;} #mSem .mS-right .mSr-top .view-btn{width: 130px; height: 40px; padding: 8px 13px; margin-bottom:3px;} #mSem .mS-right ul.mS-list li{height:150px; padding:10px;} #mSem .mS-right ul.mS-list li .info span{font-size:16px; padding-left:20px; margin:0 10px;} #mSem .mS-right ul.mS-list li h4{font-size:23px; padding:15px 0 10px;} #mSem .mS-right ul.mS-list li p{font-size:17px;} } @media (max-width: 960px){ #mSem{padding-bottom:80px} #mSem .mS-left{width:100%; height:640px; margin-bottom:45px;} #mSem .mS-right{width:100%; padding-left:0;} } @media (max-width: 760px){ #mSem .mS-right ul.mS-list li .info span{margin:0; width:100%;} #mSem .mS-right ul.mS-list li .info span + span{margin-top:8px;} #mSem .mS-right ul.mS-list li .info span + span::before{display:none;} } @media (max-width: 560px){ #mSem{padding-bottom:80px} #mSem .mS-left{width:100%; height:auto; margin-bottom:45px;} #mSem .mS-left .mSl-txt{width:calc(100% - 26px); height:calc(100% - 26px); margin: 13px; padding:35px 25px 60px;} #mSem .mS-left .mSl-txt h2{font-size:40px; margin-bottom:20px; padding-bottom:8px;} #mSem .mS-left .mSl-txt p{font-size:20px; padding-right:40px;} #mSem .mS-left .mSl-txt ul.info{padding-right:40px; margin:20px 0 80px;} #mSem .mS-left .mSl-txt ul.info li{font-size:16px; padding-left:25px;} #mSem .mS-left .mSl-txt a{font-size:15px; padding:13px 35px;} #mSem .mS-left .mS-obj{right: -20px; width:240px;} #mSem .mS-right{width:100%; padding-left:0;} #mSem .mS-right .mSr-top::before{display:none;} #mSem .mS-right .mSr-top h2{font-size:45px; padding-right:25px;} #mSem .mS-right .mSr-top .view-btn{width: 130px; height: 40px; padding: 8px 13px; margin-bottom:0;} #mSem .mS-right ul.mS-list li{height:auto; padding: 25px 10px;} #mSem .mS-right ul.mS-list li .info span{font-size:16px;} #mSem .mS-right ul.mS-list li h4{font-size:20px; padding:15px 0 10px;} #mSem .mS-right ul.mS-list li p{font-size:17px;} } @media (max-width: 440px){ } #top_btn.ino {position:fixed; bottom:90px; right:30px; width:50px; height:50px; line-height:46px; color:#fff; text-align:center; font-size:15px; z-index:90; border:none; background:none; transition: all .3s;} #top_btn.ino i{position:relative; font-size: 20px; z-index:95;transition: all .3s;} #top_btn.ino::before{position:absolute; content:''; display:block; width:100%; height:100%; background:#003a7b; left:50%; top:50%; transform:translate(-50%, -50%); border-radius: 50%; transition: all .3s;} #top_btn.ino:hover{ background:none; } #top_btn.ino:hover::before{border-radius:50%; transition: all .3s;} #top_btn.ino:hover i{transform: translateY(-1px);} /* ------------------------------------------ 하단 ------------------------------------------ */ footer.mfooter{} footer .ft_wr{background: #0a1219; word-break:keep-all;} footer .ft_wr ul.site{display:flex; flex-wrap:wrap; align-items: stretch;} footer .ft_wr ul.site li{position:relative; font-size:17px; font-weight:400; color:#fff; letter-spacing:-0.015em;} footer .ft_wr ul.site li.w100{display:block; width:100%; margin-bottom:8px;} footer .ft_wr ul.site li a{font-size:17px; font-weight:400; color:#fff; letter-spacing:-0.015em;} footer .ft_wr ul.site li a:hover{color:#00b2ff; text-decoration:underline; transition:.2s ease-out;} footer .ft_wr .ft-top{position: relative; padding:70px 0 90px; display: flex; justify-content: space-between; align-items: stretch;} footer .ft_wr .ft-top .left .ft-LOGO{display:block; margin-bottom:35px;} footer .ft_wr .ft-top .left .ft-LOGO img{height:40px;} footer .ft_wr .ft-top .left ul.site{opacity:.9;} footer .ft_wr .ft-top .left ul.site li:last-child{padding-left:38px; margin-left:35px;} footer .ft_wr .ft-top .left ul.site li:last-child::before{position:absolute; content:'|'; display:block; font-size:18px; color:#fff; left:0; top:-1px;} footer .ft_wr .ft-top ul.site.right{position:relative;} footer .ft_wr .ft-top ul.site.right li{opacity:.7;} footer .ft_wr .ft-top ul.site.right li + li{padding-left:28px; margin-left:25px;} footer .ft_wr .ft-top ul.site.right li + li::before{position:absolute; content:'·'; display:block; font-size:18px; color:#fff; left:0; top:-1px;} footer .ft_wr .ft-top ul.site.right .sh_btn{position: absolute; display: inline-block; padding: 15px 25px; bottom: 0; right: 0; border: 1px solid rgb(255 255 255 / 70%); font-size: 17px; line-height: 1; color:rgb(255 255 255 / 80%); transition:all 0.4s ease;} footer .ft_wr .ft-top ul.site.right .sh_btn:hover{background:#fff; color:#004da3; transition:all 0.4s ease;} footer .ft_wr .ft-bot {position:relative; height:90px;display:flex; flex-wrap:wrap; align-items: center; justify-content: space-between; border-top:1px solid #555;} footer .ft_wr .ft-bot p.copy{font-size:15px; font-weight:400; color:#fff; letter-spacing:-0.015em; opacity:.55;} footer .ft_wr .ft-bot ul.site{opacity:.5;} footer .ft_wr .ft-bot ul.site li + li{padding-left:45px;} footer .ft_wr .ft-top{opacity:0; transform:translate(40px, 0);} footer .ft_wr.in-view .ft-top{opacity:1; transform:translate(0, 0); transition:all 0.8s ease;} footer .ft_wr > div {opacity:0; transform:translate(40px, 0);} footer .ft_wr.in-view > div{opacity:1; transform:translate(0, 0); transition:all 0.8s ease;} footer .ft_wr .ft-bot{opacity:0; transform:translate(40px, 0);} footer .ft_wr.in-view .ft-bot{opacity:1; transform:translate(0, 0); transition:all 0.8s ease;} @media (max-width:1400px){ footer .ft_wr .ft-top{padding:50px 0 70px;} footer .ft_wr .ft-bot{height:85px;} } @media (max-width:1280px){ footer .ft_wr ul.site li{font-size:15px;} footer .ft_wr ul.site li a{font-size:15px;} footer .ft_wr .ft-top{padding:50px 0 70px;} footer .ft_wr .ft-top .left .ft-LOGO{margin-bottom:25px;} footer .ft_wr .ft-top .left .ft-LOGO img{height:36px;} footer .ft_wr .ft-top .left ul.site li:last-child{padding-left:30px; margin-left:27px;} footer .ft_wr .ft-top .left ul.site li:last-child::before{font-size:17px; top:-1px;} footer .ft_wr .ft-top ul.site.right li + li{padding-left:20px; margin-left:17px;} footer .ft_wr .ft-top ul.site.right li + li::before{font-size:17px; top:-1px;} footer .ft_wr .ft-bot{height:86px;} footer .ft_wr .ft-bot p.copy{font-size:14px;} footer .ft_wr .ft-bot ul.site li + li{padding-left:40px;} } @media (max-width:960px){ footer .ft_wr .ft-top{padding:50px 0 60px; flex-wrap: wrap;} footer .ft_wr .ft-top .left .ft-LOGO{margin-bottom:23px;} footer .ft_wr .ft-top .left .ft-LOGO img{height:32px;} footer .ft_wr .ft-top ul.site.right{width:100%; margin-top:25px;} footer .ft_wr .ft-bot{flex-direction: column-reverse; justify-content: center;} footer .ft_wr .ft-bot ul.site{width: 100%; justify-content: flex-end; margin-bottom:10px;} } @media (max-width: 520px){ footer .ft_wr ul.site{justify-content: center;} footer .ft_wr ul.site li{font-size:14px;} footer .ft_wr ul.site li a{font-size:14px;} footer .ft_wr .ft-top{padding:35px 0; align-items: flex-start; text-align: center;} footer .ft_wr .ft-top .left .ft-LOGO{margin-bottom:15px;} footer .ft_wr .ft-top .left .ft-LOGO img{height:28px;} footer .ft_wr .ft-top .left ul.site{justify-content: center;} footer .ft_wr .ft-top .left ul.site li:last-child{padding-left:20px; margin-left:17px;} footer .ft_wr .ft-top .left ul.site li:last-child::before{font-size:15px; top:-1px;} footer .ft_wr .ft-top ul.site.right{margin-top:15px;} footer .ft_wr .ft-top ul.site.right li + li{padding-left:10px; margin-left:7px;} footer .ft_wr .ft-top ul.site.right li + li::before{font-size:15px; top:-1px;} footer .ft_wr .ft-bot ul.site{justify-content: center;} footer .ft_wr .ft-bot{height:86px; text-align: center;} footer .ft_wr .ft-bot p.copy{font-size:13px;} footer .ft_wr .ft-bot ul.site li + li{padding-left:40px;} }