#allWrap{position:relative;word-break:keep-all;width: 100%;display: block;overflow: hidden;} #allWrap.main{} /* 스크롤 */ *:not(select)::-webkit-scrollbar{width:5px;} *:not(select)::-webkit-scrollbar-thumb{background-color: #f78f1e; border-radius:0px; transition:all 0.5s;} *:not(select)::-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;} /* 퀵메뉴 */ .quick-wrap{position: fixed;top: 48%;right: -560px;transform:translateY(-50%);cursor:pointer;z-index: 100;transition:0.4s;transition-timing-function: ease-out;} .quick-wrap .quick:after{display:block; content:''; clear:both;} .quick-wrap .quick .tit_box{float: left; position: absolute; top: 50%; right: 615px; transform:translateY(-50%); cursor:pointer; transition:0.4s;} .quick-wrap .quick .tit_box > div{display:block; position: relative; width: 100%; height: 100%;} .quick-wrap .quick .tit_box > div.off{} .quick-wrap .quick .tit_box > div.off > div{font-size: 38px;color:#bfbfbf;transition: 0.4s;mix-blend-mode: exclusion;} .quick-wrap .quick .tit_box > div.off > div:hover{color:#ffab4e;} .quick-wrap .quick .con_box{/* float: left; */width: 400px;height: 100%;} .quick-wrap .quick .tit_box .off{display:none;} .quick-wrap.on{right: 15px;} .quick-wrap.open{right: 15px;} .quick-wrap.on .tit_box{right: 420px;z-index: -1;} .quick-wrap .quick .tit_box > div .tit{width:120px;height:120px;background: linear-gradient(to right, #fab11d 0%, #fd860b 100%);border-radius:50%;display:flex;flex-direction: column;justify-content: center;align-items: center;color: #fff; transition:0.4s;} .quick-wrap .on small{font-family: 'Cafe24Shiningstar'; font-size:22px; font-weight:normal;} .quick-wrap .on big{font-family: 'SBAggro'; font-size:21px; font-weight:bold;} .quick-wrap .on p{color:#fff; font-size: 16.5px; line-height:16.5px; font-weight: bold; text-align: center; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -40%); text-shadow: 2px 2px 14px rgba(0,0,0,.2);} .quick-wrap .on img{filter: invert(15%);animation: rotate_image 8s linear infinite;transform:translate(-50%, -50%) rotate(0deg);position: absolute;top: 50%;left: 50%;} .quick-wrap .on img:before{} .quick-wrap .quick .tit_box:hover > div .tit{color:#000;} .quick-wrap.open .quick .tit_box div.on{display:none;} .quick-wrap.open .quick .tit_box .off{display:none;} .quick-wrap.on .quick .tit_box div.on{display:none;} .quick-wrap.on .quick .tit_box .off{display:block;} .con_box{padding: 30px;background-color: #fff;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);background-position:bottom;border-radius: 40px;} .quick-list{display: flex; justify-content: space-between; flex-flow: row nowrap; align-items: center; width: 100%; padding: 24px 0; border-top: 1px solid #ddd; box-sizing: border-box;} .quick-list:first-child {padding-top: 0; border-top: none;} .quick-list dl {text-align: center;width: 140px;} .quick-sub-img{width:100%;} .quick-sub-img figure{padding:0; margin:0; text-align:center;} .quick-sub-img img{max-width: 60px;} .quick-list .quick-sub-txt {margin: 14px 0 0;font-size:18px;font-weight: 600;color: #222;font-family: 'SBAggro';font-weight:500;} .quick-list .btn-wrap {display: flex; flex-direction: column; gap: 8px;} .quick-list .qbtn.round {display: block; width: 180px; height: 36px; padding: 9px 0; border: 1px solid #777; box-sizing: border-box; border-radius: 30px; font-size:16px; font-weight: 600; color:#666; transition: 300ms; text-align: center; font-family: 'SBAggro'; font-weight:500;} .quick-list .qbtn.round:hover{background:#777; color:#fff;} .quick-list .qbtn.green-line {border-color: #09AFC8; color: #09AFC8;} .quick-list .qbtn.green-line:hover{background:#09AFC8; color:#fff;} .quick-list .qbtn.blue-line {border-color: #2F83F7; color: #2F83F7;} .quick-list .qbtn.blue-line:hover{background:#2F83F7; color:#fff;} .quick-list.cs{display: block; padding-bottom: 0;font-family: 'SBAggro';} .quick-cc-area{display: flex; flex-flow: row nowrap; align-items: center; padding: 22px 35px 22px 40px; border-radius: 21px; background-color: #f2f2f2;} .quick-cc-area figure {width: 64px; padding: 0; margin: 0;} .quick-cc-area figure img{max-width:40px;} .quick-cc-info {margin: 0 0 0 0px;padding: 0 0 0 30px;} .quick-cc-info .quick-cc-tit {font-size: 16px; font-weight:500; color: #333; } .quick-cc-info .quick-cc-tel {margin: 5px 0 0;font-size: 23px;font-weight: 700;line-height: 1.3;display: block;transition: opacity 300ms;-webkit-transition: opacity 300ms;-moz-transition: opacity 300ms;-ms-transition: opacity 300ms;-o-transition: opacity 300ms;} .quick-cc-info .quick-cc-mail {font-size: 15px;font-weight: 500;color: #666;transition: opacity 300ms;-webkit-transition: opacity 300ms;-moz-transition: opacity 300ms;-ms-transition: opacity 300ms;-o-transition: opacity 300ms;} .quick-cc-info .quick-cc-tel:hover, .quick-cc-info .quick-cc-mail:hover {opacity: 0.7;} .quick-cc-info .txt-blue{color:#2F83F7;font-style: normal;} @keyframes rotate_image{ 100% {transform:translate(-50%, -50%) rotate(360deg);} } @media (max-width: 1300px){ } @media (max-width: 1240px){ } @media (max-width: 1170px){ } @media (max-width: 1024px){ } @media (max-width: 767px){ .quick-wrap{display:none;} } @media (max-width: 640px){ } @media (max-width: 520px){ } #mVisual{position:relative;height:100vh;} #mVisual .sloWr{display:block;position:absolute;top: 50%;width: 95%;left: 50%;text-align:left;color:#fff;z-index:10;transform: translate(-50%, -50%);max-width: 1700px;} #mVisual .sloWr .slogan{display:block;} #mVisual .sloWr .slogan small{font-size:36px;font-weight: 300;color: #fff;display: block;line-height: 1;margin-bottom: 50px;} #mVisual .sloWr .slogan big{font-size:72px;font-weight: 500;letter-spacing: -1px;font-family: 'SBAggro';position: relative;-webkit-text-stroke: 1px #fff;} #mVisual .sloWr .slogan big span{display:inline-block;} #mVisual .sloWr .slogan big span.tdraw{position: absolute; top: -59px; right: -310px; z-index: -1; display: block; height: 98px; width: 389px;} #mVisual .sloWr .slogan big span.tdraw svg{width:389px; height:98px;} #mVisual .main-slide{width:100%;height: 100vh;margin:0 auto;position:relative;overflow:hidden;} #mVisual .main-slide .slick-arrow{position:absolute; left:0; top:50%;} #mVisual .main-slide .slide-item{position:relative;width:100%;height: 100vh;min-height:400px;background:#000;;} #mVisual .main-slide .slick-slide img{object-fit: cover;height:100%;position: absolute;left:0%;top: 0;width: 100%;z-index:-1; opacity:.5; } #mVisual .main-slide .slick-active img {max-width:100%; animation:mymove 5s;} #mVisual .controlWr{position: relative; margin-top: 30px; display: flex; align-items: center; gap: 20px;} #mVisual .bar{position: relative;display:block;width:380px; background-color:rgba(255,255,255,.4); height:1px; background-color:rgba(255,255,255,.4); content:''; display:block; left:0; top:0;} #mVisual .bar .pro-bar{position:absolute; bottom:0; left:0; width:380px; height:1px; background:#fff; display:inline-block;} #mVisual .bar .pro-ani{animation:proBar 5s 1; width:380px;} @keyframes proBar{ 0%{width:0px;} 100%{width:380px;} } @keyframes mymove { from {transform:scale(1.1);} to {transform:scale(1);} } #mVisual .page{font-family: 'SBAggro'; font-size:20px; word-spacing: 10px;} #mVisual .page span{font-weight:300; color:#fff; } #mVisual .page span b{font-weight:bold;} #mVisual .control{display:flex;} #mVisual .control > span{display:inline-block; cursor:pointer; font-size:28px; font-weight:normal; color:#fff; transition:all 0.2s ease; } #mVisual .control > span i{font-style:normal; font-weight:normal;} #mVisual .control .arr-prev{} #mVisual .control .arr-next{} #mVisual ul.slick-dots {display: none !important;} /* 드로잉 텍스트 */ #strokeLayer {fill: none; stroke: url(#a); stroke-width: 1; stroke-miterlimit: 10;} #fillLayer {fill: url(#a); stroke: none;} @media (max-width: 1300px){ } @media (max-width: 1240px){ } @media (max-width: 1170px){ #mVisual .sloWr{text-align:center;} #mVisual .sloWr .slogan small {font-size: 32px; margin-bottom: 60px;} #mVisual .sloWr .slogan big {font-size: 50px; -webkit-text-stroke: 0;} #mVisual .sloWr .slogan big span.tdraw {top: -60px;right: auto;height: 100%; left: 50%;transform: translate(-50%, -0%);} #mVisual .sloWr .slogan big span.tdraw svg {width: 260px; height:auto;} #mVisual .controlWr {justify-content: center;} #mVisual .main-slide .slick-slide img{height:100%;} } @media (max-width: 980px){ #mVisual .sloWr {top: 40%;} #mVisual .main-slide {border-radius: 0 0 25px 25px;} } @media (max-width: 767px){ #mVisual, #mVisual .main-slide, #mVisual .main-slide .slide-item{height:600px;} #mVisual .sloWr {top: 150px; transform: translate(-50%, -0%);} #mVisual .sloWr .slogan small{font-size:18px;margin-bottom: 45px;} #mVisual .sloWr .slogan big{font-size: 32px;} #mVisual .sloWr .slogan big span.tdraw {top: -40px;right: auto;left: 50%;transform: translate(-50%, -0%);} #mVisual .sloWr .slogan big span.tdraw svg {width: 200px;height: 50px;} #mVisual .page {font-size: 13px; word-spacing: 5px;} #mVisual .control > span {font-size: 20px;} #mVisual .bar, #mVisual .bar .pro-bar, #mVisual .bar .pro-ani{width:200px;} @keyframes proBar{ 0%{width:0px;} 100%{width:200px;} } } @media (max-width: 640px){ } @media (max-width: 520px){ #mVisual, #mVisual .main-slide, #mVisual .main-slide .slide-item{height: 850px;} } /*--------------------------------------- 보드존 ---------------------------------------*/ #mBoard{position:absolute;right:0;bottom:-1px;width: 890px;} #mBoard .m-News{position:relative; padding:40px 0 0 40px;} #mBoard .m-News .news-cont{position:relative;background:#fff;border-radius:40px 0 0 0;padding: 30px 30px 0px 30px;min-width: 600px;max-height: 240px;overflow: hidden;} #mBoard .m-News:before, #mBoard .m-News:after{content: "";position: absolute;background-color: transparent;right: 0;left: initial;bottom:initial;height: 80px;width: 60px;box-shadow: 0 40px 0 0 #ffffff;} #mBoard .m-News:before{top: -40px;border-bottom-right-radius: 40px;} #mBoard .m-News:after{left: -20px;bottom:0;top:initial;right:initial;border-bottom-right-radius: 40px;} #mBoard .NB{} #mBoard .NB .NB-wr{} #mBoard .NB .NB-slide-list{} #mBoard .NB .intro-NB-item{} #mBoard .NB .intro-NB-item .slide-item{} #mBoard .NB .intro-NB-item .slide-item a{display: flex;} #mBoard .NB .intro-NB-item .slide-item .img-wr{width: 300px; height: 210px; overflow: hidden; border-radius: 30px; background: #ddd; position: relative;} #mBoard .NB .intro-NB-item .slide-item .news-cate{position: absolute; right: 15px; top: 15px; background: #fff; font-size: 15px; color: #222; padding: 8px 15px; border-radius: 50px; line-height: 1; font-weight: 500; font-family: "Poppins", sans-serif; z-index: 5;} #mBoard .NB .intro-NB-item .slide-item .img-wr img{transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;} #mBoard .NB .intro-NB-item .slide-item .news-info{padding: 30px 30px 15px 40px;position: relative;width: calc(100% - 300px);display: flex;flex-direction: column;justify-content: space-between;} #mBoard .NB .intro-NB-item .slide-item .news-info .txt{} #mBoard .NB .intro-NB-item .slide-item .news-info .news-date{position:relative;padding-left:20px;font-family: 'SBAggro';font-weight:500;font-size: 17px;color: #888;line-height: 1;} #mBoard .NB .intro-NB-item .slide-item .news-info .news-date:before{content:"";background: #f7962c;width:9px;height:9px;border-radius:50%;position:absolute;left:0;top: 3px;} #mBoard .NB .intro-NB-item .slide-item .news-info .news-title{display:block; margin-top:20px;font-family: 'SBAggro';font-weight:500;font-size:24px; color:#252525;} #mBoard .NB .intro-NB-item .slide-item .news-info .more-btn{width: 117px; position: relative; border-bottom: 1px solid #222;} #mBoard .NB .intro-NB-item .slide-item .news-info .more-btn span{font-family: 'SBAggro';font-weight:300;font-size: 17px;color: #222;-webkit-text-stroke: 0.6px #222;display: flex;justify-content: space-between;} #mBoard .NB .intro-NB-item .slide-item .news-info .more-btn span i{} #mBoard .NB .empty{} #mBoard .NB .NB-control{position: absolute;right: 60px;bottom: 15px;display: inline-flex;font-family: 'SBAggro';font-size: 14px;color: #222;font-weight: 500;align-items: center;gap: 8px;} #mBoard .NB .NB-control .control{} #mBoard .NB .NB-control .control.arrow{background: no-repeat; border: 0; font-size: 28px; color: #222; line-height: 1;} #mBoard .NB .NB-control .control.arrow.prev{} #mBoard .NB .NB-control .num{-webkit-text-stroke: 0.3px #222;line-height: 1;padding-top: 3px;} #mBoard .NB .NB-control .num.current{} #mBoard .NB .NB-control .num.bar{width: 8px; height: auto; background: none; left: auto; top: auto;} #mBoard .NB .NB-control .num.total{} #mBoard .NB .NB-control .control.arrow.next{} #mBoard .NB .NB-control .control.auto{background: #e5e5e5; border-radius: 50%; width: 22px; height: 22px; border: 0; display: inline-flex; justify-content: center; align-items: center;} #mBoard .NB .NB-control .auto i {display: none;} #mBoard .NB .NB-control .auto.playing .stop {display: inline-flex;} #mBoard .NB .NB-control .auto.paused .play {display: inline-flex;} @media (max-width: 980px){ #mBoard {right: auto; left: 0; bottom: 0; width: 100%; padding: 10px;} #mBoard .m-News {position: relative; padding: 0;} #mBoard .m-News:before, #mBoard .m-News:after{display:none;} #mBoard .m-News .news-cont {position: relative;background: #fff;border-radius: 25px;padding: 15px;min-width: auto;} #mBoard .NB .intro-NB-item .slide-item .img-wr {width: 280px; height: 170px; overflow: hidden; border-radius: 15px;} #mBoard .NB .intro-NB-item .slide-item .news-info{padding: 10px 0px 10px 30px;} #mBoard .NB .intro-NB-item .slide-item .news-cate {right: 5px; top: 5px; font-size: 13px; padding: 5px 11px; border-radius: 10px;} #mBoard .NB .intro-NB-item .slide-item .news-info .news-title{font-size:20px;} #mBoard .NB .intro-NB-item .slide-item .news-info .news-date {padding-left: 15px; font-size: 15px;} #mBoard .NB .intro-NB-item .slide-item .news-info .news-date:before {width: 7px; height: 7px; top: 2px;} #mBoard .NB .NB-control {right: 15px; bottom: 10px; font-size: 13px; gap: 4px;} #mBoard .NB .intro-NB-item .slide-item .news-info .more-btn span {font-size: 15px; padding-bottom: 2px;} } @media (max-width: 520px){ #mBoard .m-News .news-cont{max-height:100%;} #mBoard .NB .intro-NB-item .slide-item a {flex-direction: column; gap: 15px;} #mBoard .NB .intro-NB-item .slide-item .img-wr {width: 100%;height: auto;padding-bottom: 68%;border: 1px solid #fefefe;} #mBoard .NB .intro-NB-item .slide-item .img-wr img{width:100%;} #mBoard .NB .intro-NB-item .slide-item .news-info{width:100%;gap:15px; padding: 10px;} #mBoard .NB .intro-NB-item .slide-item .news-info .news-title{margin-top:15px;} } /*--------------------------------------- 프로젝트 ---------------------------------------*/ #mPryde{position:relative; padding:140px 0;} #mPryde:before{z-index:-1;content:"";background: #f3f8fb;position:absolute;top: 178px;left:0;width:100%;height:100%;clip-path: polygon(0 50.7%, 100% 0, 100% .3%, 0 51%);} #mPryde:after{z-index:-1;content:"";background: linear-gradient(to bottom, #f3f8fb 0%, #f3f8fb 50%, #f3f8fb00 100%);position:absolute;top: 540px;left:0;width:100%;height:100%;clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);} #mPryde article{max-width:1500px; margin:0 auto; position:relative; width:90%;} #mPryde .topWr{font-family: 'SBAggro';display: flex;margin-bottom: 75px;justify-content: space-between;flex-direction: column;align-items: center;gap: 25px;} #mPryde .topWr .m-tit{display: flex;flex-direction: column;align-items: flex-start;gap: 20px;} #mPryde .topWr .m-tit small{font-size: 18px; color: #3d4243; border: 2px solid #3d4243; border-radius: 50px; display: inline-flex; line-height: 1; font-weight: 500; padding: 10px 17px 6px; justify-content: center; align-items: center;} #mPryde .topWr .m-tit big{color: #3d4243; font-size: 40px; font-weight: 500;} #mPryde .topWr .m-tit big strong{font-weight: 500; -webkit-text-stroke: 1px #3d4243;} #mPryde .topWr .m-tit big span{color: #f78f1e; font-size: 48px; letter-spacing: -1px; word-spacing: -5px; position: relative; padding-left: 20px; margin-left: 10px;} #mPryde .topWr .m-tit big span b{font-weight: 500; -webkit-text-stroke: 1px #f78f1e;} #mPryde .topWr .m-tit big span:before {content: ""; position: absolute; left: 0; top: 50%; transform: translate(-0%, -50%); border-radius: 50%; background: #bcbcbc; width: 7px; height: 7px;} #mPryde .topWr .proj-T{display: flex;align-items: flex-end;justify-content: flex-end;} #mPryde .topWr .proj-T > ul{display: flex;border: 1px solid #263564;padding: 7px;gap: 0;border-radius: 100px;justify-content: center;} #mPryde .topWr .proj-T > ul > li{transition:all 0.5s ease-out;} #mPryde .topWr .proj-T > ul > li > span{transition:all 0.5s ease-out;position:relative;font-size: 21px;color: #263564;font-weight: 500;border-radius: 100px;padding: 15px 19px 13px;line-height: 1;background: #fff;display: inline-flex;justify-content: center;align-items: center;} #mPryde .topWr .proj-T .icon{transition:all 0.5s ease-out;display:none;width: 30px;height: 30px;position:absolute;left:15px;top:50%;transform:translateY(-50%);} #mPryde .topWr .proj-T .icon.icon1{background:url("/images/main/11057354.png") no-repeat 0 0 / 24px;} #mPryde .topWr .proj-T .icon.icon2{background:url("/images/main/11659190.png") no-repeat 0 0 / 24px;} #mPryde .topWr .proj-T .icon.icon3{background:url("/images/main/11144326.png") no-repeat 0 0 / 24px;} #mPryde .topWr .proj-T > ul > li.active > span{padding-left:45px;color: #fff;background: #263564;} #mPryde .topWr .proj-T > ul > li.active .icon{display:inline-block;} #mPryde .pryde-slo{display: flex;position: relative;margin-bottom: -45px;} #mPryde .pryde-slo .pryde-big{position:relative;display: block;width: 744px;height: 226px;} #mPryde .pryde-slo .pryde-big img{max-width: 100%;} #mPryde .pryde-slo .pryde-big .p-gray{width: 677px;} #mPryde .pryde-slo .pryde-big .pp{position:absolute;} #mPryde .pryde-slo .pryde-big .pp.p-p1{width: 144px;left: 36px;bottom: 54px; animation: jump 3.5s ease infinite;} #mPryde .pryde-slo .pryde-big .pp.p-p2{width: 176px;left: 253px;bottom: 28px; animation: jump 3.5s ease infinite; animation-delay:.1s;} #mPryde .pryde-slo .pryde-big .pp.p-p3{width: 164px;right: 0;bottom: 0; animation: jump 3.5s ease infinite; animation-delay:.2s;} #mPryde .pryde-slo .tdrow-project{display: inline-block;width: 495px;position: absolute;left: 700px;bottom: 50px;} #mPryde .pryde-slo .tdrow-project img{} #mPryde .pryde-line{position: relative; height: 435px;} #mPryde .pryde-line .p-line{position:absolute;top: 0;/* max-width: 100%; */} #mPryde .un-line{font-family: 'SBAggro';font-size:22px;font-weight: 300;line-height: 1.8;display: block;padding: 140px 0 0 110px;position: relative;z-index: 1;} #mPryde .un-line em{position:relative;display:inline-block;font-style: normal;font-weight: 500;z-index: 1;color: #fff;padding: 0 6px;} #mPryde .un-line em:before{width:100%;height:100%;background:#fff;right:0;bottom: 0px;position:absolute;content:'';transition:.6s;z-index:2;} #mPryde .un-line em:after{width:0%;height: 90%;left:0;bottom: 4px;background: #f78f1e;opacity:.1;position:absolute;content:'';transition:.6s;z-index: -1;transition-delay:.6s;} #mPryde .un-line em.in-view:before{width:0;} #mPryde .un-line em.in-view:after{width:100%;opacity: 1;} #mPryde .un-line em:nth-child(3){color:#d4262a; font-weight:bold;} #mPryde .un-line em.in-view:nth-child(3):before{width:0%;opacity: 1;} #mPryde .un-line em.in-view:nth-child(3):after{width:0%;opacity: 0;} #mPryde .snue2025{position: absolute;width: 222px;/* right: 19%; */left: 1000px;top: -25px;} #mPryde .snue2025 img{max-width: 100%;} /* 달리기 */ #mPryde .Estep{width:1260px;position:absolute;bottom: 0;left: 110px;z-index: 10;} #mPryde .Estep .row {margin-right: 0; margin-left:0;} #mPryde .Estep .progress {position: relative;height: 10px;border-radius: 10px;background: none;box-shadow: none;width: 100%;overflow: unset;margin-bottom: 40px;} #mPryde .Estep .progress-bar{height:10px;background: linear-gradient(0.4turn, #fde392 0%, #fcb516 40%, #ee7224 60%, #d3222b 100%);border-radius: 10px;box-shadow: none;position: relative;} #mPryde .Estep .progress-bar:before{content:"";background: url("/images/main/run-unscreen.gif") no-repeat center top / 100%;width: 40px;height: 40px;display: block;position: absolute;right: -10px;bottom: 10px;filter: invert(28%) sepia(96%) saturate(2503%) hue-rotate(339deg) brightness(80%) contrast(110%);} #mPryde .Estep .progress > .progress-type {position: absolute; left: 0px; font-weight: 800; padding: 3px 30px 2px 10px; color: rgb(255, 255, 255); background-color: rgba(25, 25, 25, 0.2);} #mPryde .Estep .progress > .progress-completed {position: absolute; right: 0px; font-weight: 800; padding: 3px 10px 2px;} #mPryde .Estep .step {text-align: center;width: 100%;display: flex;} #mPryde .Estep .step .col-md-2 {width: 20%;text-align: center;} #mPryde .Estep .step .col-md-2:last-child {} #mPryde .Estep .step .col-md-2:first-child {} #mPryde .Estep .step .col-md-2:last-child {} #mPryde .Estep .step .col-md-2:hover .s-tit{background: #f78f1e; cursor: pointer;} #mPryde .Estep .step .activestep .s-tit{background: #d4262a;} #mPryde .Estep .step .fa {padding-top: 15px; font-size: 40px;} #mPryde .Estep .step .s-tit{font-family: 'SBAggro';font-weight: 500;width:84px;height:27px;display:flex;border-radius:30px;background:#757f8d;color:#fff;font-size:12px;justify-content: center;align-items: center;margin: 0 auto 20px;} #mPryde .Estep .step .btit{font-size: 24px;font-weight: 500;letter-spacing:-1px;display:block;line-height: 1.2;font-family: 'SBAggro';} /* 기부하기 */ #mPryde .Don-btn{position: absolute; z-index: 10; right: 0; bottom: 180px;} #mPryde .Don-btn a{transition: .15s ease-out;width:176px;height:176px;border-radius:50%;display:inline-flex;background: linear-gradient(270deg, #f78f1e 0%, #fbba4f 100%);justify-content: center;align-items: center;flex-direction: column;font-size: 24px;color: #fff;font-family: 'SBAggro';font-weight: 500;} #mPryde .Don-btn a:after { content: ""; width: 237px; height: 237px; background: url("/images/main/btn_roll1.png") no-repeat; background-size: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); animation: rot 10s linear infinite;transition: .15s ease-out; z-index: 0; } #mPryde .Don-btn a i{display:inline-block; transition-duration:.5s;} #mPryde .Don-btn a:hover{transform: scale(1.15);box-shadow: 1px 20px 20px rgb(243 148 45 / .2);} #mPryde .Don-btn a:hover:after{opacity:0; width:50%; height:50%;} #mPryde .Don-btn a:hover i{transform:rotateY(360deg);} @keyframes rot{ 0% {transform: translate(-50%,-50%) rotate(0);} to {transform: translate(-50%,-50%) rotate(1turn);} } @keyframes jump { 0%,20%,40%,100%{transform: translate(0%, 0%);} 10%,30% {transform: translate(0%, -5px)} } @media (max-width: 1450px){ #mPryde .topWr {margin-bottom: 60px;} #mPryde .pryde-slo {margin:0;} #mPryde .pryde-slo .pryde-big {width: 560px; height: 160px;} #mPryde .pryde-slo .pryde-big .p-gray {width: 520px;} #mPryde .pryde-slo .pryde-big .pp.p-p1 {width: 95px; left: 28px; bottom: 29px;} #mPryde .pryde-slo .pryde-big .pp.p-p2 {width: 125px; left: 195px; bottom: 10px;} #mPryde .pryde-slo .pryde-big .pp.p-p3 {width: 115px; right: 0; bottom: 0;} #mPryde .pryde-slo .tdrow-project {width: 495px; left: 550px;bottom: 0;} #mPryde .pryde-line {height: auto;} #mPryde .un-line{padding:0; margin-bottom: 40px;} #mPryde .draw-wrapper{display:none;} #mPryde .Don-btn {margin-top: 60px; position: relative; right: auto; bottom: auto;text-align: center;} #mPryde .snue2025 {position:relative;left: auto; top: auto; margin:20px auto;} #mPryde .Estep {width: 100%; position: relative; bottom: auto; left: auto;} #mPryde .Estep .progress:before{content:""; width:100%; height:2px; background:#ddd; display:block; position:absolute; left:0; top:4px;} #mPryde .Estep .step .btit {font-size: 20px;} #mPryde .Estep .step .btit br{display:none;} } @media (max-width: 1170px){ #mPryde {padding: 100px 0;} #mPryde .topWr .m-tit {align-items: center;} #mPryde .topWr .m-tit big {display: flex;flex-direction: column;align-items: center;} #mPryde .topWr .m-tit big span:before{display:none;} #mPryde .topWr .proj-T{width:60%;} #mPryde .topWr .proj-T > ul {width:100%; border-radius: 30px; justify-content: center;flex-direction: column; align-items: center;} #mPryde .topWr .proj-T > ul > li{width:100%;} #mPryde .topWr .proj-T > ul > li > span{width:100%;text-align: center;line-height: 1.2;} #mPryde .un-line br{display:none;} } @media (max-width: 767px){ #mPryde {padding: 60px 0;} #mPryde article {width: 95%;} #mPryde .topWr {margin-bottom: 30px; gap: 15px;} #mPryde .topWr .m-tit small {font-size: 17px; padding: 8px 17px 5px;} #mPryde .topWr .m-tit {flex-direction: column; align-items: center; gap: 15px;} #mPryde .topWr .m-tit big {font-size: 30px;} #mPryde .topWr .m-tit big strong{-webkit-text-stroke: 0;} #mPryde .topWr .m-tit big span {font-size: 30px; padding-left: 0; margin-left: 0;} #mPryde .topWr .m-tit big span b{-webkit-text-stroke: 0;} #mPryde .topWr .proj-T > ul {padding: 5px; gap: 0; border-radius: 15px;} #mPryde .topWr .proj-T > ul > li > span{width:100%;font-size:17px;border-radius: 10px;padding: 12px 19px 9px;text-align: center;line-height: 1.2;} #mPryde .pryde-line {height: auto;} #mPryde .pryde-slo {margin-bottom: 0px; justify-content: center;} #mPryde .pryde-slo .pryde-big {position: relative;width: auto;height: 90px;margin-bottom: 80px; z-index: 5;} #mPryde .pryde-slo .pryde-big .p-gray {width: 300px;} #mPryde .pryde-slo .pryde-big .pp.p-p1 {width: 60px; left: 15px; bottom: 15px;} #mPryde .pryde-slo .pryde-big .pp.p-p2 {width: 80px; left: 110px; bottom: 0;} #mPryde .pryde-slo .pryde-big .pp.p-p3 {width: 80px; right: -37px; bottom: -14px;} #mPryde .pryde-slo .tdrow-project {width: 327px; left: 50%; margin-left: 70px; transform: translate(-50%, 0%); bottom: -6px;} #mPryde .snue2025{position: relative;width: 160px;right: auto;top: auto;margin: 0 auto;} #mPryde .un-line {font-size:16px; padding: 0; text-align: center; margin-top: 10px;} #mPryde .Estep {width: 100%; position: relative; bottom: auto; left: auto;} #mPryde .Estep .step {text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px;} #mPryde .Estep .step .s-tit{margin: 0 auto 10px;} #mPryde .Estep .step .col-md-2 {width: 100%;} #mPryde .Estep .step .btit {font-size: 18px;} #mPryde .Estep .progress{display:none;} #mPryde .Don-btn a {width: 100%;max-width: 300px;height: auto;border-radius: 100px;justify-content: center;align-items: center;flex-direction: row;font-size: 20px;padding: 13px 10px 10px;} #mPryde .Don-btn a:after{display:none;} #mPryde .Don-btn a:hover{transform: scale(1);} } /*--------------------------------------- 기부자 ---------------------------------------*/ #mName{position:relative;/* height:497px; */text-align:center;padding: 130px 0;} #mName .RollTxt{position:absolute;top: 0px;width: 100vw;left:50%;margin-left: -50vw;white-space:nowrap;overflow:hidden;z-index: -1;} #mName .RollTxt .flow-text{display:flex;white-space:nowrap;transition:0.3s;} #mName .RollTxt .flow-wrap{animation:textLoop 20s linear infinite;display: flex;align-items: center;font-size: 160px;text-transform:uppercase;font-family: 'SBAggro';font-weight: bold;background-image: linear-gradient(to bottom, #fff, #ffffffa3, #ffffff00);background-clip: text;-webkit-background-clip: text;color: transparent;letter-spacing: 0;} @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);} } #mName .m-tit{} #mName .m-tit big{font-size: 28px; font-weight: 500; font-family: 'SBAggro'; color: #777; position: relative;} #mName .m-tit big b{font-weight: 500; color: #f78f1e;} #mName .m-tit big:before{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: linear-gradient(to right, rgb(247 143 30) 0% 30%, rgb(119 119 119) 30% 100%);} #mName .bn-roll{position: relative;/* margin: 140px 0 0; */overflow: hidden;margin-left: auto;margin-right: auto;height: 210px;margin-top: 50px;} #mName .bn-roll .cover-board{position: absolute; display: block; width: 4400px; height: 60px; font-size: 0;} #mName .bn-roll .cover-board.slide-left{right: 0;text-align: right;animation: s03-slide-left 60s linear infinite;} #mName .bn-roll .cover-board.slide-right{top: 80px;left: 0;text-align: left;animation: s03-slide-right 60s linear infinite;} #mName .bn-roll .cover-board.slide-left-bottom{top:200px; right: 0; text-align: right; animation: s03-slide-left 60s linear infinite;} #mName .bn-roll .cover-board > li{border-radius:100px;box-shadow: 0px 10px 20px 0px rgba(79, 85, 99, 0.2);position: relative;display: inline-block;width: auto;overflow: hidden;margin: 0 10px;background: #fff;font-size: 24px;letter-spacing: -1px;font-weight: 600;color: #111;padding: 14px 25px;line-height: 1;} #mName .bn-roll .cover-board > li img.src-img{width: 262px;} #mName .bn-roll .cover-board > li img.src-webp{position: absolute; top: 9px; left: 23px; width: 216px; height: 216px; border-radius: 6px; overflow: hidden;} #mName .bn-roll .cover-board > li img.src-ovl{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #mName .bn-roll .cover-board{width: 6000px;height: 87px;font-size: 0;} #mName .bn-roll .cover-board > li{font-family: 'SBAggro';font-size: 32px;font-weight: 500;letter-spacing: 0;padding: 20px 30px 14px;} #mName .bn-roll .cover-board.slide-right{top:110px;} @keyframes s03-slide-left { to{right: -2178px;} } @keyframes s03-slide-right { to{left: -2178px;} } @media (max-width: 1170px){ #mName {padding: 80px 0;} } @media (max-width: 767px){ #mName {padding: 60px 0;} #mName .RollTxt .flow-wrap{font-size:80px;} #mName .m-tit big {font-size: 18px;} #mName .bn-roll {height: 135px; margin-top: 30px;} #mName .bn-roll .cover-board {height: 50px;} #mName .bn-roll .cover-board.slide-right {top: 60px;} #mName .bn-roll .cover-board > li{margin:0 5px;} #mName .bn-roll .cover-board > li {font-size: 17px; padding: 10px 20px 8px;} } /*--------------------------------------- 숫자로보는 ---------------------------------------*/ #mNumber { position:relative;text-align:center;padding: 90px 0 170px; background: url("/images/main/dot_bg.png") repeat 0 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3ClinearGradient id='fade' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='20%' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='80%' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='100%' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='100%' height='100%' fill='url(%23fade)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3ClinearGradient id='fade' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='20%' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='80%' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='100%' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect width='100%' height='100%' fill='url(%23fade)'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #mNumber article{position:relative;} #mNumber .m-tit{} #mNumber .m-tit big{font-family: 'SBAggro';} #mNumber .m-tit big strong{color:#3d4243;font-size:40px;font-weight: 500;-webkit-text-stroke: 1px #3d4243;} #mNumber .m-tit big span{position:relative;color:#f78f1e;font-size: 48px;letter-spacing: -1px;word-spacing: -5px;padding-left: 195px;margin-left: 10px;} #mNumber .m-tit big span:before{content:""; position:absolute; left:0; top:50%; transform:translate(-0%, -50%); border-radius:50%; background:#bcbcbc; width:7px; height:7px;} #mNumber .m-tit big span em{position:absolute;width: 170px;height: 60px;display:block;font-family: "Qwitcher Grypen", cursive;font-size:92px;font-weight: bold;left: 18px;top: 0;} #mNumber .m-tit big span em svg{position:absolute;left:50%; top:50%;transform:translate(-50%, -50%);} #mNumber .m-tit small{font-family: 'SBAggro';font-size: 22px; color: #666; display: block; margin-top: 25px;font-weight:300;} #mNumber .cout-list{display: flex; justify-content: center; margin-top: 90px; gap: 120px;} #mNumber .cout-list > li{position: relative; padding-top: 60px;} #mNumber .cout-list .img{position: absolute; top: 0; right: 0; z-index: 0;} #mNumber .cout-list .img img{} #mNumber .cout-list dl{position: relative;z-index: 1;font-family: 'SBAggro';} #mNumber .cout-list dt{} #mNumber .cout-list dt em{font-size:22px;font-style: normal;font-weight: 500;} #mNumber .cout-list dt strong{font-family: 'SBAggro';font-size:60px;margin: 0 10px;min-width: 180px;display: inline-block;} #mNumber .cout-list dd{} #mNumber .cout-list dd strong{color:#3d4243;font-size: 18px;font-weight: 500;display: block;margin-top: 5px;} #mNumber .cout-list dd p{font-size:18px;color:#666;font-weight: 300;display: inline-block;margin-top:10px;font-family: 'SBAggro';padding-left: 13px;position: relative;} #mNumber .cout-list dd p b{color:#7f9abf;font-weight: 300;position: absolute;top: 50%;left: 0;padding: 3px 0 0 0;transform: translate(-0%, -50%);} @media (max-width: 1170px){ #mNumber {padding: 80px 0; mask-image: none;} #mNumber article{width:95%; margin:0 auto;} #mNumber .m-tit big {display: flex;flex-direction: column;align-items: center;gap: 10px;} #mNumber .m-tit big span:before{display:none;} #mNumber .cout-list{flex-wrap: wrap;} } @media (max-width: 767px){ #mNumber {padding: 0px 0 60px; background: none; mask-image: none;} #mNumber .m-tit big strong {font-size: 28px;-webkit-text-stroke:0;} #mNumber .m-tit big span {font-size: 28px;padding-left: 105px;margin-left: 0;} #mNumber .m-tit big span em {position: absolute;width: 100px;height: 30px;font-size: 0;left: 0;top: 0;} #mNumber .m-tit big span em svg{width:100%;} #mNumber .m-tit small {font-size: 17px; margin-top: 15px;} #mNumber .cout-list {justify-content: center; margin-top: 20px; gap: 20px; flex-direction: column; align-items: center;} #mNumber .cout-list > li {padding: 20px 0 0 0;} #mNumber .cout-list dt em {font-size: 18px;} #mNumber .cout-list dt strong {font-size: 28px;margin: 0 5px;min-width: auto;} #mNumber .cout-list dd p {margin-top: 0;font-size: 15px;} #mNumber .cout-list .img {top: 0%;right: -30px;transform: translate(0%, -0%);opacity: .3;} #mNumber .cout-list .img img{max-width: 70%;} #mNumber .cout-list > li:first-child .img{right:30px;} } /*--------------------------------------- 프로그램 ---------------------------------------*/ #mPro{position:relative;padding: 140px 0;} #mPro:before {display: block;content: '';position: absolute;top: 0;left: 0px;width: 60%;height: 560px;background: #f4f4f4;border-radius: 0px 300px 300px 0px;z-index: -1;} #mPro article{position: relative;width:95%;max-width: 1470px;box-sizing: border-box;margin: 0 auto;} #mPro article:before{content:"FUNDRAISING";font-size:100px;font-family: 'SBAggro';background-image: linear-gradient(to bottom, #fff, #ffffff70, #ffffff00);background-clip: text;-webkit-background-clip: text;color: transparent;letter-spacing: 0;line-height: 1;} #mPro .m-tit{display:flex;justify-content: space-between;} #mPro .m-tit big{font-family: 'SBAggro';font-size:38px;color:#3d4243;font-weight:500;line-height: 1.1;letter-spacing: -1px;position: relative;=:block;} #mPro .m-tit .control-box{display: inline-flex; align-items: center;} #mPro .m-tit .control-box .slick-arrow{width: 60px;height: 60px;font-size:24px;background: #fff;border: 1px solid #e3e5e8;border-radius: 50%;transition: .15s ease-out;color: #373b4d;} #mPro .m-tit .control-box .slick-arrow.prev{} #mPro .m-tit .control-box .slick-arrow.next{margin-left: -10px;} #mPro .m-tit .control-box .moreview-box{display: inline-block; margin-left: 20px;} #mPro .m-tit .control-box .moreview-box .moreview{transition: .15s ease-out;background:#fff;font-family: 'SBAggro';position:relative;padding: 18px 25px;border-radius: 30px;font-size: 17px;font-weight:300;letter-spacing: 0;color: #26293d;border: 1px solid #d5d7dd;box-sizing: border-box;display: inline-flex;align-items: center;line-height: 1;gap: 8px;} #mPro .m-tit .control-box .moreview-box .moreview i{font-weight:normal;font-size: 24px;transition: .15s ease-out;} #mPro .m-tit .control-box .moreview-box .moreview:hover{background:#26293d; border-color:#26293d; color:#fff; transform: translateY(-4px);box-shadow: 0px 10px 20px rgb(38 41 61 / 15%);} #mPro .m-tit .control-box .slick-arrow:hover{background:#26293d; border-color:#26293d; color:#fff; transform: translateY(-4px);box-shadow: 0px 10px 20px rgb(38 41 61 / 15%);} #mPro .sm-tit{font-family: 'SBAggro';display:flex;align-items: flex-start;margin-top: 60px;} #mPro .sm-tit dt{font-size:24px;color:#2c5080;font-weight: 500;display: block;width: 390px;line-height: 1.4;position: relative;padding-left: 38px;} #mPro .sm-tit dt i{font-size: 30px; position: absolute; left: 0; top: -1px; line-height: 1;} #mPro .sm-tit dd{font-size:18px;color:#54575c;font-weight: 300;line-height: 1.6;} #mPro .proWr{min-height: 430px;position: relative;max-width: 1520px;width: 100%;margin: 45px auto 0;} #mPro .proWr .slick-list{padding-top:15px;} /*#mPro .proList{display: flex;gap: 80px 40px;flex-wrap: wrap;height: 100%;}*/ /*#mPro .proList > li{flex: 1;position: relative;}*/ #mPro .proList .slick-slide {margin:0 30px; box-sizing: border-box;} #mPro .proItem{font-family: 'SBAggro';/* max-width: 460px; *//* width: 100%; */position: relative;} #mPro .proItem .bubble{position:relative;padding:40px 45px;/*width: 460px;*/height: 285px;border-radius: 20px;background: #fff;box-shadow: 0px 20px 45px rgba(83, 83, 83, .15);margin-bottom: 50px; transition: .15s ease-out;} #mPro .proItem .bubble .sTit{transition: .15s ease-out;display: flex;justify-content: space-between;line-height: 0;align-items: center;position: relative;margin-bottom: 20px;} #mPro .proItem .bubble .sTit .ta{color:#28303d;font-size: 17px;font-weight: 500;line-height: 1;display: flex;align-items: center;gap: 10px;} #mPro .proItem .bubble .sTit .ta i{width:30px;height:30px;display: inline-flex;background:#000;color:#fff;border-radius:50%;justify-content: center;align-items: center;font-weight: normal;font-size: 15px;} #mPro .proItem .bubble .sTit .amt{transition: .15s ease-out;font-size: 18px;font-weight: 300;display: inline-flex;align-items: flex-end;gap: 5px;color: #28303d;} #mPro .proItem .bubble .sTit .amt strong{font-size: 24px;} #mPro .proItem .bubble .bTit{transition: .15s ease-out;font-weight: 500;font-size: 24px;color:#000;height: 60px;display: block;overflow: hidden;margin-bottom: 15px;} #mPro .proItem .bubble .txt{transition: .15s ease-out;color: #28303d;font-size: 16px;font-weight: 300;opacity: .8;display: -webkit-box;-webkit-line-clamp: 3; /* ✅ 3줄로 제한 */-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} #mPro .proItem .bubble .more-btn{transition: .15s ease-out;width:62px;height:62px;background:#f78f1e;font-size:14px;color:#fff;display:inline-flex;border-radius:50%;justify-content: center;align-items: center;line-height: 1.2;padding: 5px 0 0 0;font-weight: 500;position: absolute;right: 25px;bottom: -25px;} #mPro .proItem .prog{display: flex; align-items: center; gap: 15px; margin: 10px 0;} #mPro .proItem .prog .bar{overflow: hidden; background: #e3e3e3; height: 5px; width: 100%; display: inline-block; border-radius: 10px;} #mPro .proItem .prog .bar .pb{background:#000; border-radius: 10px; height:100%; display:block;}/*프로그레스바*/ #mPro .proItem .prog .num{color: #000;} #mPro .proItem .prog .num strong{font-size: 20px;} #mPro .proItem .prog .num strong em{font-size: 15px; font-weight: 500;} #mPro .proItem .info{display: flex; justify-content: space-between;} #mPro .proItem .info .per{font-size: 16px; font-weight: 500; display: flex; align-items: center; line-height: 1; gap: 10px;} #mPro .proItem .info .per i{color: #ddd; font-size: 24px; font-weight: normal;} #mPro .proItem .info .state{position: relative;display: inline-flex;flex-direction: column;padding-left: 5%;margin-left: 5%;} #mPro .proItem .info .state:before{background:#f5f5f5; height:20px; width:2px; position:absolute; left:0; top:50%; content:"";transform: translate(0%, -50%);} #mPro .proItem .info .state .det{font-size: 18px; font-weight: 500;} #mPro .proItem .info .state .det i{} #mPro .proItem .info .state .det.og{color: #263564;}/* 모금 진행중 */ #mPro .proItem .info .state .det.cp{color: #929eae;}/* 모금 완료 */ #mPro .proItem:hover .bubble{transform: translateY(-10px);background: linear-gradient(270deg, #f78f1e 0%, #fbba4f 100%);box-shadow: 0px 20px 45px rgb(243 148 45 / .2);} #mPro .proItem:hover .bubble .more-btn{background:#000;} #mPro .proItem:hover .bubble .sTit .ta, #mPro .proItem:hover .bubble .bTit, #mPro .proItem:hover .bubble .sTit .amt, #mPro .proItem:hover .bubble .txt{color:#fff;} @media (max-width: 1170px){ #mPro {padding: 80px 0;} #mPro .sm-tit {margin-top: 20px; flex-direction: column; gap: 20px;} } @media (max-width: 767px){ #mPro {padding: 60px 0;} #mPro:before {top: 0; left: 0px; width: 90%; height: 500px; border-radius: 0px 300px 300px 0px;} #mPro article:before {font-size: 80px; left: 50%; position: absolute; transform: translate(-50%, 0%); top: -40px;} #mPro .m-tit {justify-content: space-between; flex-direction: column; align-items: center; gap: 20px;} #mPro .m-tit big {font-size: 28px;} #mPro .sm-tit{align-items: center; gap: 10px;} #mPro .m-tit .control-box .slick-arrow {width: 45px; height: 45px;} #mPro .m-tit .control-box .slick-arrow.next {margin-left: -6px;} #mPro .m-tit .control-box .moreview-box .moreview {padding: 10px 20px; border-radius: 30px; font-size: 14px;} #mPro .sm-tit dt {font-size: 20px; display: inline-block; width: auto; padding-left: 30px;} #mPro .sm-tit dt i {font-size: 24px; top: 0px;} #mPro .sm-tit dd {font-size: 15px; text-align: center; line-height: 1.5;} #mPro .proWr {margin: 25px auto 0;min-height: 300px;} #mPro .proList .slick-slide {margin: 0 20px;} #mPro .proItem .bubble{padding:25px; height: 230px; border-radius: 15px;margin-bottom: 20px;} #mPro .proItem .bubble .sTit .ta i {width: 25px; height: 25px;} #mPro .proItem .bubble .sTit .amt strong{font-size: 18px;} #mPro .proItem .bubble .bTit {font-size: 20px; height: 45px;} #mPro .proItem .bubble .txt {font-size: 15px;} #mPro .proItem .info {flex-direction: column; gap: 10px;} #mPro .proItem .info .per {font-size: 14px;} #mPro .proItem .info .per i {font-size: 18px;} #mPro .proItem .info .state {padding-left: 0; margin-left: 0;} #mPro .proItem .info .state:before{display:none;} } /*--------------------------------------- 인터뷰 영상 ---------------------------------------*/ #mInterview{position:relative;padding-bottom: 170px;} #mInterview article{position: relative;max-width: 1470px;width: 95%;box-sizing: border-box;margin: 0 auto;} .int-box {position:relative;width:100%;margin-top:130px;} .int-box .tit-box {position:absolute;top:0;left:0;/* width:385px; */z-index: 10;} .int-box .tit-box .m-tit{} .int-box .tit-box .m-tit big{font-family: 'SBAggro';font-size:50px;color:#808083;font-weight:500;line-height: 1.1;letter-spacing: -1px;position: relative;padding-top: 110px;} .int-box .tit-box .m-tit big:before{content:"";width: 82px;height:84px;position:absolute;left:0;top:0;background:url("/images/common/snu_sb_gray.svg");} .int-box .tit-box .m-tit big strong{color: #3d4243;font-size: 60px;font-weight: 500;-webkit-text-stroke: 1.2px #3d4243;} .int-box .tit-box .m-tit big span{color:#f78f1e;font-size: 92px;letter-spacing: -1px;word-spacing: -5px;position: relative;padding-left: 20px;margin-left: 10px;} .int-box .tit-box .m-tit big span:before{content:""; position:absolute; left:0; top:50%; transform:translate(-0%, -50%); border-radius:50%; background:#bcbcbc; width:7px; height:7px;} .int-box .tit-box .m-tit big span em{font-family: "Qwitcher Grypen", cursive;font-size:92px;font-weight: bold;} .int-box .tit-box .stag {padding-top:35px;display:flex;flex-wrap:wrap;column-gap:10px;row-gap:10px;} .int-box .tit-box .stag span {padding: 13px 20px 10px;border-radius: 10px;background: #ebedf0;color: #3a4e68;font-family: 'SBAggro';font-size: 18px;font-weight: 500;letter-spacing: 0;line-height: 1;} .int-box .int-in-box {position:relative;width:100%;display:flex;justify-content: flex-end;/* padding-bottom: 88px; */} .int-box .int-in-box:before {display:block;content:'';position:absolute;bottom: 88px;left: calc(50% + 20px);width:940px;height: calc(100% + 130px);max-height: 580px;background: #3a4e68;border-radius: 290px 0px 0px 290px;z-index:-1;} /*.int-box .int-in-box:after { display:block;content:'';position:absolute;bottom:0;left: calc(50% + 534px);width:436px;height: 486px; background:url(/resources/_Templet/Main/main_ipsi/Img/myoutube_bg.png) no-repeat 0 0;z-index:-1; }*/ .int-box .int-in-box .drow-sha{display:block;content:'';position:absolute;bottom:70px;left: calc(50% + 560px);width:401px;height: 601px;z-index:-1;} .int-box .int-in-box img {width:100%;} .int-box .int-in-box .mimbansldWr {max-width:800px;width:100%;margin:0;} .int-box .int-in-box .mimbansldWr .swiper-slide {} .int-box .int-in-box .mimbansldWr .swiper-slide > a {display: flex;position:relative;border-radius: 30px; overflow:hidden;} .int-box .int-in-box .mimbansldWr .swiper-slide > a:focus {outline:rgb(59, 153, 252) solid 5px;outline-offset:-5px;z-index:555} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg{position:relative;} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg:before {display: block;content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;box-sizing: border-box;border-radius: 30px;border: 10px solid #d9d9d9;z-index: 1;transition: all .3s ease;} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg img{max-width:100%;position:relative;border-radius: 30px;transition:all 0.2s ease;} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg:hover:before{border-color:#f78f1e;} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg:hover img{transform:scale(1.1);} .int-box .int-in-box .mimbansldWr-thum {position:absolute;bottom: 0;left:0;width:54.2857%;z-index:9;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide a {position:relative;display:block;border-radius: 20px;overflow:hidden;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide a:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;box-sizing:border-box;border-radius: 20px;border: 0px solid #f78f1e;z-index:1;transition:all .3s ease;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide-thumb-active a:before {opacity:1;border: 8px solid #f78f1e;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide a:focus-visible {outline:rgb(59, 153, 252) dashed 5px;z-index:555} .int-box .int-in-box .mimbansldWr-thum .swiper-slide a:focus-visible:before {opacity:0} .int-box .btn-mv {position: relative;width: 100%;height: 60px;margin-top: 28px;/* text-align: right; */display: flex;align-items: center;/* gap: 30px; */font-size:28px;font-family: 'SBAggro';font-weight: 500;color: #000;padding-left: 20%;justify-content: space-between;} .int-box .btn-mv > span{display:flex;align-items: center;gap: 30px;} .int-box .btn-mv em{font-family: 'SBAggro';font-size:20px;color: #f78f1e;font-weight: 500;/* margin-right: 30px; *//* min-width: 125px; */white-space: nowrap;} .int-box .btn-mv i{width:60px;height:60px;border-radius:50%;background:#e10314;color:#fff;font-size:24px;display:inline-flex;justify-content:center;align-items: center;} .int-box .btn-mv .btn-arr {margin-left:10px; display:flex;position:relative;height:60px;padding-right:60px;color:#2E2E2E;font-size: 1.33333em;font-weight: 700;line-height:1.2em;align-items:center;} .int-box .btn-mv .btn-arr:before {display:block;content:'';position:absolute;top:50%;right:0;width:60px;height:60px;border-radius:50%;opacity:1;background:#D9D9D9;transform:translateY(-50%);transition:all .3s ease;} .int-box .btn-mv .btn-arr:after {display:block;content:'';position:absolute;top:50%;right:0;width:60px;height:60px;border-radius:50%;opacity:0;background: linear-gradient(270deg, #f78f1e 0%, #fbba4f 100%);transform:translateY(-50%);transition:all .3s ease;} .int-box .btn-mv .btn-arr span:before {display:block;content:'';position:absolute;top:50%;right:25px;width:34px;height:2px;border-radius:3px;background:#000;transform:translateY(-50%);transition:all .3s ease;z-index:1;} .int-box .btn-mv .btn-arr span:after {display:block;content:'';position:absolute;top:50%;right:25px;width:12px;height:12px;border-bottom:2px solid #000;border-right:2px solid #000;transform:translateY(-50%) rotate(-45deg);transition:all .3s ease;z-index:1;} .int-box .btn-mv .btn-arr:focus:before, .int-box .btn-mv .btn-arr:hover:before {right:20px;opacity:0;} .int-box .btn-mv .btn-arr:focus:after, .int-box .btn-mv .btn-arr:hover:after {right:20px;opacity:1;} .int-box .btn-mv .btn-arr:focus span:before, .int-box .btn-mv .btn-arr:hover span:before {right:5px;background:#000;} .int-box .btn-mv .btn-arr:focus span:after, .int-box .btn-mv .btn-arr:hover span:after {right:5px;border-color:#000;} @media (max-width: 1400px){ .int-box .tit-box{width:440px;} .int-box .tit-box .m-tit big {font-size: 38px; padding-top: 80px;} .int-box .tit-box .m-tit big:before {width: 60px; height: 62px;} .int-box .tit-box .m-tit big strong {font-size: 40px;} .int-box .tit-box .m-tit big span {font-size: 70px;} .int-box .tit-box .m-tit big span em {font-size: 77px;} .int-box .tit-box .stag span {padding: 10px 15px 8px; font-size: 17px;} .int-box .int-in-box {padding-left: 440px;} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg img {max-width: 100%; width: 100%; height: auto;} .int-box .int-in-box img {width: 100%; height: auto;} .int-box .btn-mv {height: auto; margin-top: 25px; font-size: 24px; padding-left: 25%;} .int-box .btn-mv > span {align-items: flex-start; gap: 5px; flex-direction: column;} .int-box .btn-mv em {font-size: 18px;} } @media (max-width: 1240px){ } @media (max-width: 1170px){ #mInterview {padding-bottom: 120px;} .int-box {margin-top: 88px;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide-thumb-active a:before {border: 6px solid #f78f1e;} .int-box .int-in-box:before{height:100%;} } @media (max-width: 1024px){ } @media (max-width: 767px){ #mInterview {padding-bottom: 60px;} .int-box {margin-top: 0;} .int-box .tit-box {position: relative; width: 100%;} .int-box .tit-box .m-tit {text-align: center;} .int-box .tit-box .m-tit big {font-size: 24px; padding-top: 55px;} .int-box .tit-box .m-tit big:before {width: 38px; height: 39px; display:none;} .int-box .tit-box .m-tit big strong {font-size: 28px;-webkit-text-stroke: 0;} .int-box .tit-box .m-tit big span {font-size: 40px;} .int-box .tit-box .m-tit big span:before {width: 4px; height: 4px;} .int-box .tit-box .m-tit big span em {font-size: 48px;} .int-box .tit-box .stag {padding-top: 15px; flex-wrap: wrap; column-gap: 5px; row-gap: 5px;justify-content: center;} .int-box .tit-box .stag span {padding: 8px 12px 7px; font-size: 13px;border-radius: 5px;} .int-box .int-in-box {padding-left: 0; margin-top:20px; flex-direction: column; align-items: center;} .int-box .int-in-box:before{display:none;} .int-box .int-in-box .mimbansldWr-thum {position: relative; bottom: auto; left: auto; width: 100%;} .int-box .int-in-box .mimbansldWr .swiper-slide > a {border-radius: 20px;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide a{border-radius: 10px;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide a:before{border-radius: 10px;} .int-box .int-in-box .mimbansldWr .swiper-slide .pImg:before {border-radius: 20px;border: 5px solid #d9d9d9;} .int-box .int-in-box .mimbansldWr-thum .swiper-slide-thumb-active a:before {border: 3px solid #f78f1e;} .int-box .btn-mv {height: auto; margin: 20px 0; font-size: 20px; padding-left: 0;} .int-box .btn-mv .btn-arr:after, .int-box .btn-mv .btn-arr:before {width: 45px; height: 45px;} .int-box .btn-mv .btn-arr span:before {right: 25px; width: 20px;} } @media (max-width: 640px){ } @media (max-width: 520px){ } /*--------------------------------------- 하단 퀵 ---------------------------------------*/ #btQ{width: 100%;position: relative;} #btQ:before {display: block;content: '';position: absolute;top: 0;left: 100px;width: calc(100% - 100px);height: 100%;background: #fff;border-radius: 0px 60px 0;z-index: -1;box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10);} #btQ:after {display: block;content: '';position: absolute;top: 0;left: 0;width:50%;height: 100%;background: linear-gradient(90deg, #f78f1e 0%, #fbba4f 100%);border-radius: 60px 20px 60px 0;} #btQ article{position: relative;max-width:1500px;width:95%;display: flex;flex-wrap: wrap;height: 110px;margin: 0 auto;z-index: 1;} #btQ .tit-box{display:flex;position:relative;width: 50%;height:100%;padding:0 60px 0 143px;align-items:center;justify-content:space-between;box-sizing:border-box;} #btQ .tit-box svg {display:block;content:'';position:absolute;bottom: -10px;left: 0;width:113px;height:169px;overflow: visible;} #btQ .tit-box .mtit {color:#fff;font-size: 22px;font-family: 'SBAggro';font-weight: 500;} #btQ .tit-box .mtit span {color:#fff;font-size: 30px;} #btQ .tit-box .mtxt {color: #374359;font-family: 'SBAggro';font-size: 18px;font-weight: 600;line-height: 1;padding: 15px 25px 12px;background:#fff;border-radius:30px;} #btQ .tit-box .mtxt a{color:inherit;} #btQ .list {display:flex;align-items:center;position:relative;width: 50%;height:100%;padding:0 40px;box-sizing:border-box;gap: 44px;} #btQ .list li:first-child {} #btQ .list a {position:relative;display:flex;padding-left:80px;height:60px;align-items:center;} #btQ .list .pIco {transition:.2s ease-out;position:absolute;top:0;left:0;width:60px;height:60px;border-radius: 20px;background: #EBEBEB;} #btQ .list .pIco:before {display:block;content:'';position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:32px;height:32px;background-size:cover;} #btQ .list .pIco.icon1:before {background-image:url("/images/main/16352424.png");} #btQ .list .pIco.icon2:before {background-image:url("/images/main/11057738.png");} #btQ .list .pIco.icon3:before {background-image:url("/images/main/10549562.png");} #btQ .list .sTit {color: #2E2E2E;font-size: 18px;font-family: 'SBAggro';font-weight: 500;} #btQ .list a:hover .pIco{transform:rotateY(360deg); transition-duration:0.5s;} @media (max-width: 1880px){ #btQ article {height: auto; align-items: center;} #btQ .tit-box {min-width:450px; flex-wrap: wrap; gap: 10px; width: 450px; padding: 20px 60px 20px 143px;} #btQ .list {width: calc(100% - 450px);padding: 20px 40px; gap: 15px 44px; flex-wrap: wrap;} #btQ:after {width: 450px;} } @media (max-width: 1240px){ } @media (max-width: 1170px){ } @media (max-width: 1024px){ } @media (max-width: 767px){ #btQ article{flex-direction: column;width:100%;} #btQ .tit-box svg{bottom:0;} #btQ:before{width:100%;left: 0;border-radius: 30px 30px 0 0;} #btQ:after{display:none;} #btQ .tit-box {min-width: 100%; width: 100%;} #btQ .tit-box:before{display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;z-index:-1; background: linear-gradient(90deg, #f78f1e 0%, #fbba4f 100%); border-radius: 30px 20px 30px 0;} #btQ .list {width: 100%;justify-content: center; padding: 20px;} #btQ .list a {padding-left: 60px; height: 45px;} #btQ .list .pIco {width: 45px; height: 45px; border-radius: 10px;} #btQ .tit-box .mtit {font-size: 18px;} #btQ .tit-box .mtit span {font-size: 24px;} #btQ .tit-box .mtxt {width: 100%; text-align: center; padding: 12px 25px 10px;} } @media (max-width: 640px){ } @media (max-width: 520px){ #btQ .tit-box svg{display:none;} #btQ .tit-box{padding: 15px;justify-content: center;} #btQ .list {justify-content: flex-start;} } /*--------------------------------------- 하단 ---------------------------------------*/ footer{background: #20242b;clear:both;position:relative;z-index: 1;font-family: 'SBAggro';} footer.mfooter{} footer.sfooter{} footer:after{content:''; display:block; clear:both;} footer article{position:relative;width:90%;max-width: 1500px;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;border-top: 1px solid rgb(183, 183, 183, .3);padding: 50px 0 0px;/* height:100%; */display:flex;justify-content:space-between;align-items: flex-end;z-index: 5;} footer.sfooter .ft-top{border:0;} footer .ft-logo{/* max-width: 213px; */} footer .ft-logo > a{display:flex;align-items: flex-end;gap: 20px;} footer .ft-logo > a > img{max-width: 213px;width: 100%;} footer .ft-logo > a > span{font-size:24px;color:#fff;font-weight:500;line-height: 1;padding-bottom: 10px;} footer .copyright{width: calc(100% - 345px);display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;} footer .copyright address, footer cite{font-style:normal;line-height:1.8;flex-wrap: wrap;} footer .copyright address{font-size: 17px;color: #d4d4d4;font-weight: 300;display: block;} footer .copyright > div{display:flex; margin-top:20px;} footer .copyright > div > dl{display: flex;} footer .copyright > div > dl + dl{margin-left: 60px;} footer .copyright > div > dl > dt{font-size: 18px;color: #fff;font-weight: 500;margin-right: 25px;} footer .copyright > div > dl > dd{color:#d4d4d4; font-weight:300;} footer .copyright > div a{color:#fff;} footer .copyright > div a:hover{text-decoration:underline; transition:.2s ease-out;} footer .ft-right{display:inline-flex;align-items: flex-end;flex-direction: column;justify-content: flex-start;gap: 40px;} footer .ft-sns{/* height:100%; */display:flex;align-items:center;gap: 20px;/* padding: 0 25px; */} footer .ft-sns ul{display:flex; gap:15px;} footer .ft-sns li{position:relative;} footer .ft-sns li.ft-x i{font-size:27px;} footer .ft-sns li a{display:inline-block;color:#888;font-size:30px;transition:.2s ease-out;} footer .ft-sns li a:hover{color:#444;} footer .select_footer{position: relative;width: 270px;height: 55px;z-index:5;text-align:left;} footer .select_footer ul{bottom:52px;display:none;position:absolute;z-index:999;border:0;background: #f8f8f8;width: 270px;transition:.3s;border-radius: 30px 30px 0 0;} footer .select_footer ul.open{display:block; padding-top:14px;} footer .select_footer ul li{text-indent: 30px;} footer .select_footer ul li a{display:block;font-size:16px;color: #20242b;font-weight: 500;padding:7px 0;} footer .select_footer ul li a:hover{background:#f8f9fb;} footer .select_f_btn{border:0;display:block;width: 270px;height: 55px;font-weight: 500;background: #20242b;text-align:left;text-transform:uppercase;padding: 0 30px;font-size:18px;color: #fff;border-radius: 54px;border: 1px solid #fff;font-family: 'SBAggro';} footer .select_f_btn .ir{width:100%;display:flex;height:100%;align-items:center;justify-content:space-between;} footer .select_f_btn .ir i{font-size: 26px; font-weight: normal;} footer .select_f_btn.on{background:#f8f8f8;border-radius: 0 0 30px 30px;color: #20242b;} footer .ft-bottom{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;padding:30px 0 50px;z-index: 5;} footer cite{font-size: 13px;color: #717171;font-weight: 300;font-style:normal;display: block;text-align: center;position: relative;padding: 30px 0 30px;line-height: 1.6;} footer cite:before{content: "";position: absolute;top: 0;left: 50%;width: 100vw;margin-left: -50vw;height: 1px;background: #fff; opacity:.1;} footer cite span{color: #f78f1e;} 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;margin-bottom: 10px;flex-wrap: wrap;} footer .ft-menu li{transition:.2s ease-out;} footer .ft-menu li a{font-size: 18px;line-height:1;color: #fff;font-weight: 500;transition:.2s ease-out;} footer .ft-menu li a strong{font-weight: 500;} footer .ft-menu li:first-child a{} footer .ft-menu li:hover a{opacity:.6;} @media (max-width: 1170px){ footer .ft-top {padding:30px 0 0px; align-items: center; flex-direction: column; gap: 30px;} footer .ft-bottom {gap: 30px; flex-direction: column-reverse; align-items: center; padding: 20px 0;} footer .copyright {width: 100%; align-items: center;} footer .copyright > div {flex-wrap: wrap; justify-content: center; gap: 10px;} } @media (max-width: 980px){ footer .ft-top {align-items: center; flex-direction: column; gap: 30px;} footer .ft-bottom {flex-direction: column; align-items: center; gap: 30px;} footer .copyright {width: 100%; flex-direction: column; text-align: center; align-items: center; justify-content: space-between;} footer cite {margin-top: 20px;} } @media (max-width: 767px){ footer .ft-logo > a {align-items: center; gap: 20px; flex-direction: column;} footer .ft-logo > a > span {font-size: 21px; padding-bottom: 0;} footer .ft-logo > a > img{ max-width: 160px;} footer .ft-menu {gap: 20px;/* flex-direction: column; */justify-content: center;} footer .ft-menu li a {font-size: 16px;} footer .copyright address {font-size: 15px; line-height: 1.5;} footer .copyright > div {flex-direction: column;} footer .copyright > div > dl > dt {font-size: 15px;} footer .copyright > div > dl + dl {margin-left: 0;} 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 {bottom: 50px; width: 100%;} }