@charset "utf-8"; #mcontainer-wrap {position:relative;font-size:18px;line-height:1;padding-top:10px;} #mcontainer {word-break:keep-all;width:100%;margin:0 auto;/*max-width:1440px;padding:0 20px;*/box-sizing:border-box;} #mcontainer img {width:auto;max-width:100%} @media all and (max-width:999px) { #mcontainer-wrap {font-size:17px;padding-top:0;} } @media all and (max-width:768px){ #mcontainer-wrap {font-size:16px} } @media all and (max-width:599px) { #mcontainer-wrap {font-size:15px} } /* 섹션1 */ .msec01 {position:relative;width:100%;box-sizing:border-box;box-sizing:border-box;padding:0 58px 40px 0;display:flex;flex-wrap:wrap;max-width:1920px;margin:0 auto;z-index:1;} .msec01:before {display:block;content:'';position:absolute;top:40px;right:58px;width: calc(100% - 158px);height: calc(100% - 40px);border-radius:0 50px 0 0;background:#e7f5ff;z-index:-1;} .msec01 .sideL {position:relative;width:70.892%;} .msec01 .sideL:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:0 0 50px 0;background:#071943;} .msec01 .sideR {position:relative;width:29.108%;box-sizing:border-box;padding:0 48px;} @media all and (max-width:1699px) { .msec01 {padding:0 20px 40px 0;} .msec01:before {right:20px;width: calc(100% - 120px);} } @media all and (max-width:1399px) { .msec01 {padding:0 0 40px 0;} .msec01:before {right:0;width: calc(100% - 100px);} .msec01 .sideR {padding:0 30px;} } @media all and (max-width:1299px) { .msec01 .sideL {width:60%;} .msec01 .sideR {width:40%;} } @media all and (max-width:999px) { .msec01:before {top:20px;} .msec01 .sideR {padding:0 20px;} } @media all and (max-width:799px) { .msec01 {display:block;padding:0;} .msec01:before {top:0;right:0;width:100%;height:100%;border-radius:0 30px 0 0;} .msec01 .sideL {width:100%;} .msec01 .sideL:before {border-radius:0 0 30px 0;} .msec01 .sideR {width:100%;} } /* 메인비쥬얼 */ .mVisual-wr {position:relative;width:100%;box-sizing:border-box;padding:65px 100px 70px 100px;} #mVisual {z-index:initial;} #mVisual .dataList .swiperBox {position:relative;width:100%;height:100%;} #mVisual .dataList .imgBox {position:relative;width:100%;height:440px;} #mVisual .dataList .imgBox img {display:block;position:absolute;left:50%;top:0;max-width:initial;width:1110px;height:100%;transform:translateX(-50%);} #mVisual .dataList .txtBox {position:relative;padding-bottom:38px;box-sizing:border-box;padding-right:170px;} #mVisual .dataList .txtBox .txtCore .pTxt1 {display:none;} #mVisual .dataList .txtBox .txtCore .t1 {display:block;color:#fff;font-size:2.667em;font-weight:700;letter-spacing:-0.05em;line-height:1.1em;opacity:0;transition:all .3s ease;} #mVisual .dataList .txtBox .txtCore .t2 {display:block;color:#fff;font-size:1.2em;font-weight:500;font-family:bio-sans, sans-serif;line-height:1.556em;padding-top:1px;opacity:0;transition:all .3s ease;} #mVisual .dataList .swiper-slide {opacity:0 !important;height:auto;} #mVisual .dataList .swiper-slide.swiper-slide-active {opacity:1 !important;} #mVisual .dataList .hasNoData {background:#f5f5f5;text-align:center} #mVisual .dataList .hasNoData:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #mVisual .hasNoData .no-data {display:inline-block;vertical-align:middle;width:auto} #mVisual .data-ctrl {position:absolute;right:-20px;top:30px;z-index:2;} #mVisual .data-pkgs {display:inline-flex;} #mVisual .data-ctrl button {position:relative;width:51px;height:51px;border:0;background:rgba(255,255,255,0.1);border-radius:50%;transition:all .3s ease;} #mVisual .data-ctrl .btn-prev:before, #mVisual .data-ctrl .btn-next:before {display:block;content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:29px;height:3px;background:#fff;transition:all .3s ease;} #mVisual .data-ctrl .btn-prev:after, #mVisual .data-ctrl .btn-next:after {display:block;content:'';position:absolute;top:0;bottom:0;left:50%;margin:auto 0;width:11px;height:11px;border-bottom:3px solid #fff;border-right:3px solid #fff;transform:rotate(-45deg);transition:all .3s ease;} #mVisual .data-ctrl .btn-prev {margin-right:11px;} #mVisual .data-ctrl .btn-prev:after {margin-left:-13px;transform:rotate(135deg);} #mVisual .data-auto {display:flex;} #mVisual .data-auto button {position:relative;width:51px;height:51px;border:0;background:none;border-radius:50%;transition:all .3s ease;} #mVisual .data-auto button:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto} #mVisual .data-auto .btn-stop:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid #fff;border-top:0;border-bottom:0;width:5px;height:15px;} #mVisual .data-auto .btn-play {display:none} #mVisual .data-auto .btn-play:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-width:7px 0 7px 10px;border-style:solid;border-color:transparent;border-left-color:#fff;width:0;height:0} #mVisual .dataList .swiper-slide.swiper-slide-active .txtBox .t1 {opacity:1;animation: txtUp 0.6s 0.2s;animation-fill-mode: both;} #mVisual .dataList .swiper-slide.swiper-slide-active .txtBox .t2 {opacity:1;animation: txtUp 0.6s 0.6s;animation-fill-mode: both;} @keyframes txtUp { from { -webkit-transform:translate3d(0, 120%, 0); transform:translate3d(0, 120%, 0); visibility:visible; opacity:0; } to { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } } @media all and (max-width:1699px) { .mVisual-wr {padding:65px 40px 70px 40px;} } @media all and (max-width:999px) { .mVisual-wr {padding:40px 20px;} #mVisual .dataList .txtBox .txtCore .t1 {font-size:2em;} #mVisual .dataList .txtBox .txtCore .t2 {font-size:0.889em;} } @media all and (max-width:799px) { .mVisual-wr {padding:30px 20px 20px 20px;} #mVisual {padding-bottom:50px;;} #mVisual .dataList .imgBox {height:300px;} #mVisual .dataList .imgBox img {width:auto;} #mVisual .dataList .txtBox {padding-right:0;padding-bottom:20px;} #mVisual .data-ctrl {right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%);} #mVisual .data-ctrl button {width:40px;height:40px;} #mVisual .data-ctrl .btn-prev:before, #mVisual .data-ctrl .btn-next:before {width:19px;} #mVisual .data-ctrl .btn-prev:after, #mVisual .data-ctrl .btn-next:after {width:9px;height:9px;} #mVisual .data-ctrl .btn-prev:after {margin-left:-11px;} #mVisual .data-ctrl .btn-next:after {margin-left:-4px;} } @media all and (max-width:599px) { #mVisual .dataList .imgBox {height:250px;} } @media all and (max-width:399px) { #mVisual .dataList .txtBox .txtCore .t1 {font-size:1.25em;} #mVisual .dataList .txtBox .txtCore .t2 {font-size:0.833em;} } /* 공지 */ .mNotice {padding-top:75px;} #mNews1 {position:relative;width:100%;} #mNews1 .m-tit {color:#000000;font-weight:700;font-size:1.667em;font-family:"bio-sans", sans-serif;padding-bottom:20px;} #mNews1 .m-tit span {color:#0060c2;} #mNews1 .data-list {background:#fff;width:100%;min-height:300px;padding:30px;box-sizing:border-box;} #mNews1 .data-list li {display:block;} #mNews1 .data-list li a {display:block;position:relative;box-sizing:border-box;padding:24px 0 20px 5px;} #mNews1 .data-list li a .txtBox {display:flex;align-items:center;} #mNews1 .data-list li a .sTit {display:inline-block;position:relative;font-size:0.944em;letter-spacing:-0.05em;line-height:1.2em;color:#333333;width:auto;max-width: calc(100% - 36px);text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#333333, #333333);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;} #mNews1 .data-list li a .newMark {display:inline-block;width:22px;height:22px;border-radius:50%;background:#ff8d00;vertical-align:top;text-align:center;position:relative;margin-left:14px;} #mNews1 .data-list li a .newMark:before {content:"N";display:inline-block;position:absolute;top:3px;left:6px;color:#fff;font-family:"bio-sans", sans-serif;font-size:14px;line-height:1} #mNews1 .data-list li a .sDate {display:block;position:relative;font-size:14px;color:#7b7b7b;font-family:"bio-sans", sans-serif;padding-left:26px;margin-top:5px;} #mNews1 .data-list li a .sDate:before {display:block;content:'';position:absolute;top:0;left:0;width:18px;height:16px;background:url(/resources/_Templet/Main/main_duniv02/Img/ico_date.png) no-repeat 0 0;} #mNews1 .data-list li.first {position:relative;padding:0;} #mNews1 .data-list li.first a {padding:0 0 0 110px;height:90px;display:flex;flex-direction:column;justify-content:center;} #mNews1 .data-list li.first a .txtBox {align-items:flex-end;} #mNews1 .data-list li.first a .sTit1 {font-size:1em;line-height:1.556em;color:#000000;letter-spacing:-.025em;font-weight:500;max-width: calc(100% - 36px);overflow:hidden;word-wrap: break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;transition:all .3s ease;} #mNews1 .data-list li.first a .sTit1 span {text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#000000, #000000);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;} #mNews1 .data-list li.first a .newMark {line-height:1.556em;display:none;} #mNews1 .data-list li.first a .date-box {display:flex;position:absolute;top:0;left:0;width:90px;height:90px;color:#fff;font-family:"bio-sans", sans-serif;background:#00a0e8;border-radius:0 0 20px 0;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;} #mNews1 .data-list li.first a .date-box .day {display:block;font-size:2em;} #mNews1 .data-list li.first a .date-box .mon {display:block;font-size:0.833em;padding-top:2px;} #mNews1 .data-list li:nth-child(2) {border-bottom:1px solid rgba(0,0,0,0.13);} #mNews1 .data-list li a:focus .sTit, #mNews1 .data-list li a:hover .sTit {background-size: 0 1px, 100% 1px;} #mNews1 .data-list li.first a:focus .sTit1 span, #mNews1 .data-list li.first a:hover .sTit1 span {background-size: 0 1px, 100% 1px;} #mNews1 .dataMore {display:block;position:absolute;right:0;top:7px;width:20px;height:20px;border:0;transition:all .3s ease} #mNews1 .dataMore:before, #mNews1 .dataMore:after {content:"";display:block;position:absolute;width:100%;height:2px;background:#000;top:0;right:0;bottom:0;left:0;margin:auto;opacity:0.5;transition:all .3s ease} #mNews1 .dataMore:after {transform:rotate(90deg)} #mNews1 .dataMore:focus:before, #mNews1 .dataMore:hover:before {transform:rotate(90deg)} #mNews1 .dataMore:focus:after, #mNews1 .dataMore:hover:after {transform:rotate(180deg)} #mNews1 .no-data {padding-top:160px;background-position:center 60px;height:auto;} @media all and (max-width:999px) { .mNotice {padding-top:40px;} } @media all and (max-width:799px) { #mNews1 .data-list {padding:20px;} #mNews1 .data-list li.first a {padding:0 0 0 90px;height:70px;display:flex;flex-direction:column;justify-content:center;} #mNews1 .data-list li.first a .date-box {width:70px;height:70px;border-radius:0 0 10px 0;} } /* 배너 */ .mIcban1 {padding-top:26px;} .mIcban1 .data-list {width:100%;display:flex;flex-wrap:wrap;} .mIcban1 .data-list > li {width:50%;padding-top:16px;} .mIcban1 .data-list a {display:flex;align-items:center;position:relative;box-sizing:border-box;padding-right:10px;padding-left:70px;min-height:54px;} .mIcban1 .data-list .s-tit {display:inline-block;position:relative;font-size:1.056em;color:#000000;font-weight:700;letter-spacing:-0.05em;line-height:1.4em;word-break:break-all;text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#000000, #000000);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;} .mIcban1 .data-list .s-ico {position:absolute;top:0;left:-4px;width:54px;height:54px;background:url(/resources/_Img/MainModule/micban/l7/ico1.png) no-repeat 0 0;background-size:100% auto;transition:all .3s ease;} .mIcban1 .data-list .s-ico.icon1 {background-image:url(/resources/_Img/MainModule/micban/l7/ico1.png);} .mIcban1 .data-list .s-ico.icon2 {background-image:url(/resources/_Img/MainModule/micban/l7/ico2.png);} .mIcban1 .data-list .s-ico.icon3 {background-image:url(/resources/_Img/MainModule/micban/l7/ico3.png);} .mIcban1 .data-list .s-ico.icon4 {background-image:url(/resources/_Img/MainModule/micban/l7/ico4.png);} .mIcban1 .data-list .s-ico.icon5 {background-image:url(/resources/_Img/MainModule/micban/l7/ico5.png);} .mIcban1 .data-list .s-ico.icon6 {background-image:url(/resources/_Img/MainModule/micban/l7/ico6.png);} .mIcban1 .data-list .s-ico.icon7 {background-image:url(/resources/_Img/MainModule/micban/l7/ico7.png);} .mIcban1 .data-list .s-ico.icon8 {background-image:url(/resources/_Img/MainModule/micban/l7/ico8.png);} .mIcban1 .data-list .s-ico.icon9 {background-image:url(/resources/_Img/MainModule/micban/l7/ico9.png);} .mIcban1 .data-list .s-ico.icon10 {background-image:url(/resources/_Img/MainModule/micban/l7/ico10.png);} .mIcban1 .data-list a:focus .s-tit, .mIcban1 .data-list a:hover .s-tit {background-size: 0 1px, 100% 1px;} .mIcban1 .data-list a:focus .s-ico, .mIcban1 .data-list a:hover .s-ico {left:4px;} @media all and (max-width:1399px) { .mIcban1 {padding-top:20px;} .mIcban1 .data-list > li {width:100%;padding-top:10px;} .mIcban1 .data-list a {padding-left:55px;min-height:40px;} .mIcban1 .data-list .s-tit {font-size:1em;} .mIcban1 .data-list .s-ico {left:0;width:40px;height:40px;} } @media all and (max-width:799px) { .mIcban1 {padding:10px 0 20px 0;} .mIcban1 .data-list > li {width:33.33%;} } @media all and (max-width:599px) { .mIcban1 .data-list > li {width:50%;} } /* 링크 배너 */ .msec02 {position:relative;width:100%;box-sizing:border-box;max-width:1440px;padding:105px 20px 123px 20px;margin:0 auto;display:flex;flex-wrap:wrap;} .msec02:after {display:block;content:'';position:absolute;top:-186px;right: calc(100% - 23px);width:1180px;height:780px;border:1px solid #dfdfde;border-radius:50%;transform:rotate(-29.79deg);z-index:-1;} .msec02 .sideL {position:relative;width:39.286%;box-sizing:border-box;} .msec02 .sideR {position:relative;width:60.714%;box-sizing:border-box;} @media all and (max-width:999px) { .msec02 {padding:40px 20px;} .msec02 .sideL {width:50%;} .msec02 .sideR {width:50%;} } @media all and (max-width:599px) { .msec02 {display:block;} .msec02 .sideL {width:100%;} .msec02 .sideR {width:100%;margin-top:40px;} } /* 링크 배너1 */ #mLink1 {width:100%;} #mLink1 a {display:block;} #mLink1 .sName {display:block;font-size:1.778em;color:#000000;font-weight:500;letter-spacing:-0.05em;} #mLink1 .sTit {display:block;font-size:2.778em;color:#000000;font-weight:700;letter-spacing:-0.05em;padding-top:14px;padding-right:100px;} #mLink1 .sTxt {display:block;position:relative;font-size:1.056em;color:#555555;letter-spacing:-0.05em;line-height:1.579em;padding-top:57px;padding-right:100px;} #mLink1 .sTxt:before {display:block;content:'';position:absolute;top:26px;right:0;width:1920px;height:1px;background:#00a0e4;transition:all .3s ease;} #mLink1 .sTxt:after {display:block;content:'';position:absolute;top:16px;left:-94px;width:20px;height:20px;background:#00a0e4;border-radius:50%;transition:all 1s cubic-bezier(0.4, 0, 1, 1);} #mLink1 .sBtn {display:inline-block;position:relative;font-size:0.889em;color:#909090;font-family:"bio-sans", sans-serif;padding:0 5px 7px 5px;margin-top:43px;transition:all .3s ease;} #mLink1 .sBtn:before {display:block;content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:#9e9e9e;transition:all .3s ease;} #mLink1 .sBtn:after {display:block;content:'';position:absolute;bottom:0;right:0;width:0;height:1px;background:#000;transition:all .3s ease;z-index:1;} #mLink1 a:focus .sBtn, #mLink1 a:hover .sBtn {color:#000;} #mLink1 a:focus .sBtn:after, #mLink1 a:hover .sBtn:after {left:0;right:auto;width:100%;} #mLink1 a:focus .sTxt:after, #mLink1 a:hover .sTxt:after {left: calc(100% - 40px);} @media all and (max-width:999px) { #mLink1 .sName {font-size:1.5em;} #mLink1 .sTit {font-size:2.5em;padding-top:10px;} #mLink1 .sTxt {font-size:1em;padding-top:40px;} #mLink1 .sTxt:before {top:20px;right:0;} #mLink1 .sTxt:after {top:14px;left:-10px;width:14px;height:14px;} #mLink1 .sBtn {margin-top:30px;} } @media all and (max-width:599px) { #mLink1 .sTxt:before {right:-20px;} #mLink1 .sBtn {margin-top:20px;} } /* 링크 배너2 */ #mLink2 {width:100%;position:relative;height:461px;} #mLink2:before {display:block;content:'';position:absolute;top:0;left:0;width:1220px;height:74.405%;background:#00b4e6;transition:all .3s ease;} #mLink2:after {display:block;content:'';position:absolute;top:0;left:0;width:1220px;height:100%;background:url(/resources/_Templet/Main/main_duniv02/Img/mJob_img01.png) no-repeat 0 0;background-size:auto 100%;transition:all .3s ease;} #mLink2 .dataLst {display:flex;flex-direction:column;justify-content:center;width:100%;height:74.405%;position:relative;padding-left:66px;box-sizing:border-box;z-index:1;} #mLink2 .dataLst > li {padding-bottom:20px;} #mLink2 .dataLst > li:last-child {padding-bottom:0;} #mLink2 .dataLst a {display:flex;align-items:center;position:relative;width:100%;max-width:220px;height:55px;color:#fff;font-weight:500;letter-spacing:-0.05em;padding:5px 45px 5px 20px;border:2px solid #fff;border-radius:30px;box-sizing:border-box;transition:all .3s ease;} #mLink2 .dataLst a:before {display:block;content:'';position:absolute;top:0;bottom:0;right:25px;margin:auto 0;width:21px;height:2px;background:#fff;opacity:0;transition:all .3s ease;} #mLink2 .dataLst a:after {display:block;content:'';position:absolute;top:0;bottom:0;right:25px;margin:auto 0;width:8px;height:8px;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(-45deg);opacity:0;transition:all .3s ease;} #mLink2 .dataLst a:focus, #mLink2 .dataLst a:hover {background:#fff;color:#0048a2;} #mLink2 .dataLst a:focus:before, #mLink2 .dataLst a:hover:before {background:#0048a2;opacity:1;right:19px;} #mLink2 .dataLst a:focus:after, #mLink2 .dataLst a:hover:after {border-color:#0048a2;opacity:1;right:19px;} @media all and (max-width:999px) { #mLink2 {height:350px;} #mLink2:after {width:700px;} #mLink2 .dataLst {height:74.405%;padding-left:40px;} #mLink2 .dataLst > li {padding-bottom:10px;} } @media all and (max-width:599px) { #mLink2 {height:auto;} #mLink2:before {left:-20px;height:100%;} #mLink2:after {height:100%;background-size:100% auto;} #mLink2 .dataLst {display:block;height:auto;padding:30px 0;} }