@charset "utf-8"; #mcontainer-wrap {position:relative;font-size:18px;line-height:1} #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 (min-width:1000px) { /* 상단 흰색 배경 빼기 */ #header {background:#0f2e79;} #header:before {display:block;content:'';position:absolute;top:80px;left:0;width:100%;height:1px;background:#fff;opacity:0.3;} #mainNavi {background:#0f2e79;} #header .logo .slogo {width:165px;height:46px;background:url(/resources/_Templet/Main/main_dept01/Img/logo_w.png) no-repeat 0 0;} #header .logo .slogo img {opacity:0;} #header .logo .slogoTxt {color:#fff;} #header .logo .slogoTxt:before {background:rgba(255,255,255,0.2);} #gNavi .glink-sec .glink-list .whome {color:#fff;} #gNavi .glink-sec .glink-list .whome span:before {background-position:-204px 0;} #gNavi .glink-sec .glink-list .whome span:after {background-position:-182px 0;} #gNavi .glink-sec .glink-list > * {color:#fff;} #gNavi .glink-sec .glink-list > *:before {background:rgba(255,255,255,0.3);} #gNavi .glink-sec .glink-list > *:after {background:rgba(255,255,255,0.3);} #mainNavi .mn_a1 > span {color:#fff;} #mainNavi .mn_a1 > span:before {background:#fff;} #mainNavi .mn_a1.over span, #mainNavi .mn_a1:hover span, #mainNavi .mn_a1:focus span, #mainNavi .mn_li1.over .mn_a1 span {color:#fff} .pc-topMenu-open #mainNavi .mn_a1 > span {color:#fff} } @media all and (max-width:999px) { #mcontainer-wrap {font-size:17px} } @media all and (max-width:768px){ #mcontainer-wrap {font-size:16px} } @media all and (max-width:599px) { #mcontainer-wrap {font-size:15px} } /* 데이터 준비중 */ .mVisual-wr .no-data, #mImban1 .no-data, .mIcban1 .no-data, .mIcban2 .no-data, #mTabGallery > .no-data, #mTabBoard > .no-data {text-align:center;padding:40px 0;} .mPopup .no-data {text-align:center;padding:40px 0;} /* 섹션1 */ .msec01 {position:relative;width:100%;box-sizing:border-box;} .msec01:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:66.465%;background:#0f2e79;z-index:-1;} /* 메인비쥬얼 */ .mVisual-wr {position:relative;width:100%;padding:0 20px;box-sizing:border-box;} .mVisual-wr:before {display:block;content:'';position:absolute;top:236px;left:-17px;width:383px;height:249px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat 0 0;} .mVisual-wr:after {display:block;content:'';position:absolute;top:216px;right:-42px;width:354px;height:232px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -393px 0;} #mVisual {position:relative;width:100%;max-width:1400px;margin:0 auto;z-index:initial;} #mVisual .dataList .swiperBox {position:relative;display:flex;flex-wrap:wrpa;width:100%;} #mVisual .dataList .imgBox {position:relative;width:100%;height:550px;} #mVisual .dataList .imgBox img {display:block;position:absolute;left:50%;top:0;max-width:initial;width:1400px;height:100%;transform:translateX(-50%);} #mVisual .dataList .txtBox {position:relative;width:100%;padding:92px 100px 74px 100px;box-sizing:border-box;} #mVisual .dataList .txtBox .txtCore {position:relative;text-align:center;width:100%;min-height:104px;} #mVisual .dataList .txtBox .txtCore .pTxt1 {display:none;} #mVisual .dataList .txtBox .txtCore .t1 {display:block;color:#fff;font-size:1.667em;font-weight:500;font-family:"Gmarket Sans", sans-serif;letter-spacing:0;line-height:1.2em;padding-bottom:8px;opacity:0;transition:all .3s ease;} #mVisual .dataList .txtBox .txtCore .t2 {display:block;color:#fff;font-size:2.778em;font-weight:700;font-family:"Gmarket Sans", sans-serif;letter-spacing:-0.02em;line-height:1.2em;opacity:0;transition:all .3s ease;} #mVisual .dataList .txtBox .txtCore .t3 {display:block;color:#fff;font-weight:500;letter-spacing:-0.05em;line-height:1.556em;padding-top:23px;opacity:0;transition:all .3s ease;} #mVisual .dataList .swiper-slide {opacity:0 !important;} #mVisual .dataList .swiper-slide.swiper-slide-active {opacity:1 !important;} #mVisual .dataList .swiper-slide-active .txt-box .txt-core .p-txt1, #mVisual .dataList .swiper-slide-active .txt-box .txt-core .p-txt2 {opacity:1;transform:translateY(0)} #mVisual .dataList .swiper-slide-active .txt-box .txt-core .p-txt1 {transition:all .6s ease} #mVisual .dataList .swiper-slide-active .txt-box .txt-core .p-txt2 {transition:all .6s ease .3s} #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 {} #mVisual .data-pkgs {} #mVisual .btn-prev, #mVisual .btn-next {position:absolute;top:127px;right:0;width:85px;height:50px;border:0;background:none;z-index:1;} #mVisual .btn-prev:before, #mVisual .btn-next:before {display:block;content:'';position:absolute;top:0;bottom:0;right:5px;margin:auto 0;width: calc(100% - 5px);height:5px;background:#fff;} #mVisual .btn-prev:after, #mVisual .btn-next:after {display:block;content:'';position:absolute;top:0;bottom:0;right:6px;margin:auto 0;width:30px;height:30px;border-bottom:5px solid #fff;border-right:5px solid #fff;transform:rotate(-45deg);} #mVisual .btn-prev {right:auto;left:0;} #mVisual .btn-prev:before {right:auto;left:5px;} #mVisual .btn-prev:after {right:auto;left:6px;transform:rotate(135deg);} #mVisual .data-nums {display:none;} #mVisual .data-auto {position:absolute;bottom:574px;left:50%;display:flex;transform:translateX(-50%);z-index:1;} #mVisual .data-auto button {position:relative;display:block;background-color:transparent;border:1px solid #fff ;width:40px;height:40px;border-radius:50%;box-sizing:border-box;transition:all .3s ease-out} #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:4px;height:17px;} #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 .data-ctrl .swiper-pagination {position:relative;top:auto;bottom:auto;left:auto;right:auto;display:none;} #mVisual .data-ctrl .swiper-pagination .swiper-pagination-bullet {position:relative;width:15px;height:17px;background:transparent;opacity:1;margin-left:6px;} #mVisual .data-ctrl .swiper-pagination .swiper-pagination-bullet:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:15px;height:15px;box-sizing:border-box;background:#fff;border-radius:50%;} #mVisual .data-ctrl .swiper-pagination .swiper-pagination-bullet-active:before {border:3px solid #c1c1c1;background:transparent;} #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.4s;animation-fill-mode: both;} #mVisual .dataList .swiper-slide.swiper-slide-active .txtBox .t3 {opacity:1;animation: txtUp 0.6s 0.6s;animation-fill-mode: both;} @keyframes txtUp { from { -webkit-transform:translate3d(0, 110%, 0); transform:translate3d(0, 110%, 0); visibility:visible; opacity:0; } to { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:1; } } @media all and (max-width:999px) { #mVisual .dataList .imgBox {height:400px;} #mVisual .dataList .imgBox img {width:auto;} #mVisual .dataList .txtBox {padding:50px 60px 60px 60px;} #mVisual .dataList .txtBox .txtCore {min-height:60px;} #mVisual .dataList .txtBox .txtCore .t1 {font-size:1em;} #mVisual .dataList .txtBox .txtCore .t2 {font-size:1.5em;} #mVisual .dataList .txtBox .txtCore .t3 {font-size:0.889em;max-width:initial;} #mVisual .btn-prev, #mVisual .btn-next {top:70px;width:40px;height:30px;} #mVisual .btn-prev:before, #mVisual .btn-next:before {right:5px;width: calc(100% - 5px);height:3px;} #mVisual .btn-prev:after, #mVisual .btn-next:after {right:6px;width:16px;height:16px;border-bottom:3px solid #fff;border-right:3px solid #fff;} #mVisual .btn-prev:before {right:auto;left:5px;} #mVisual .btn-prev:after {right:auto;left:6px;} #mVisual .data-auto {bottom:410px;} } @media all and (max-width:599px) { #mVisual .dataList .imgBox {height:300px;} #mVisual .dataList .txtBox {padding-top:30px;} #mVisual .btn-prev, #mVisual .btn-next {top:50px;} #mVisual .data-auto {bottom:310px;} } @media all and (max-width:399px) { .mVisual-wr:before, .mVisual-wr:after {display:none;} #mVisual .dataList .imgBox {height:200px;} #mVisual .dataList .txtBox {padding-top:20px;padding-bottom:45px;} #mVisual .dataList .txtBox .txtCore .t1 {font-size:0.944em;} #mVisual .dataList .txtBox .txtCore .t2 {font-size:1.25em;} #mVisual .dataList .txtBox .txtCore .t3 {font-size:0.833em;} #mVisual .btn-prev, #mVisual .btn-next {top:40px;} #mVisual .data-auto {bottom:210px;} #mVisual .data-auto button {width:30px;height:30px;} #mVisual .data-auto .btn-stop:before {height:12px;} } /* 게시판 */ .msec02 {position:relative;width:100%;max-width:1440px;padding:100px 20px 95px 20px;box-sizing:border-box;margin:0 auto;} .msec02:before {display:block;content:'';position:absolute;bottom:42px;right:0;width:151px;height:212px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -886px 0;z-index:-1;} #mTabBoard {position:relative;height:340px;box-sizing:border-box;} #mTabBoard dl {display:block;vertical-align:middle;} #mTabBoard dl dt {display:block;position:relative;text-align:left;width:270px;padding-bottom:20px;} #mTabBoard dl dt a {display:inline-block;position:relative;background:none;padding-right:37px;transition:all .3s ease} #mTabBoard dl dt a:before {display:block;content:'';position:absolute;top:4px;right:0;width:12px;height:12px;border-top:4px solid #111;border-right:4px solid #111;opacity:0;transition:all .3s ease} #mTabBoard dl dt a:after {display:block;content:'';position:absolute;top:14px;right:0;width:24px;height:4px;background:#111111;opacity:0;transition:all .3s ease;transform: rotate(-45deg);} #mTabBoard dl dt a span {display:inline-block;color:#111;font-size:1.944em;font-weight:700;line-height:1.2em;letter-spacing:0;opacity:0.3;vertical-align:middle;transition:all .3s ease} #mTabBoard dl dd {display:none;text-align:left} #mTabBoard ul {display:flex;flex-wrap:wrap;width:100%;} #mTabBoard ul li {width:30.974%;margin-left:3.539%;padding-bottom:48px;} #mTabBoard ul li:nth-child(3n+1) {margin-left:0;} #mTabBoard ul li a {display:block;position:relative;padding:0;box-sizing:border-box;transition:all .3s ease;} #mTabBoard ul li a .subject {padding-top:19px;height:64px;font-size:1.111em;line-height:1.6em;color:#333333;letter-spacing:0;font-weight:500;overflow:hidden;word-wrap: break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;transition:all .3s ease;} #mTabBoard ul li a .subject span {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;} #mTabBoard ul li a .isNewIcon {display:none;} #mTabBoard ul li a .date {display:inline-block;position:relative;color:#fff;font-size:.833em;letter-spacing:0;padding:9px 9px 11px 11px;background:#006ee9;font-family:bio-sans, sans-serif;} #mTabBoard ul li a:focus .subject span, #mTabBoard ul li a:hover .subject span {background-size: 0 1px, 100% 1px;} #mTabBoard dl dt a:focus span, #mTabBoard dl dt a:hover span {opacity:1;} #mTabBoard dl.isOn dt a {} #mTabBoard dl.isOn dt a span {opacity:1;} #mTabBoard dl.isOn dt a:before, #mTabBoard dl.isOn dt a:after {opacity:1;} #mTabBoard dl.isOn dd {display:block;position:absolute;left:270px;top:3px;width: calc(100% - 270px);height: calc(100% - 3px);} #mTabBoard dl.isOn dd ul li {animation:mTabBoard-slide 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation-delay:0;} #mTabBoard dl.isOn dd ul li:nth-child(2) {animation-delay:0.1s;} #mTabBoard dl.isOn dd ul li:nth-child(3) {animation-delay:0.2s;} #mTabBoard dl.isOn dd ul li:nth-child(4) {animation-delay:0.3s;} #mTabBoard dl.isOn dd ul li:nth-child(5) {animation-delay:0.4s;} #mTabBoard .data-more {position:absolute;bottom:65px;right:60px;width:200px;height:60px;font-size:0.944em;color:#fff;font-weight:500;background:#111111;display:flex;justify-content:center;align-items:center;transition:all .3s ease;} #mTabBoard .data-more:before {display:block;content:'';position:absolute;top:-63px;left:-148px;width:119px;height:90px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -757px 0;z-index:-1;} #mTabBoard .data-more span {position:relative;display:inline-block;transition:all .3s ease;} #mTabBoard .data-more span:before {display:block;content:'';position:absolute;top:6px;right:0;width:6px;height:6px;border-top:2px solid #fff;border-right:2px solid #fff;opacity:0;transform: rotate(45deg);transition:all .3s ease} #mTabBoard .data-more:focus span, #mTabBoard .data-more:hover span {padding-right:15px;} #mTabBoard .data-more:focus span:before, #mTabBoard .data-more:hover span:before {opacity:1;} @keyframes mTabBoard-slide { 0% {-webkit-transform: translateY(50px);transform: translateY(50px);opacity:0;} 100% {-webkit-transform: translateY(0);transform: translateY(0);opacity:1;} } @media all and (max-width:1199px) { #mTabBoard .data-more {right:0;} } @media all and (max-width:999px) { .msec02 {padding-top:40px;padding-bottom:40px;} .msec02:before {bottom:0;right:-40px;transform:scale(0.6);} #mTabBoard dl dt {width:200px;} #mTabBoard ul li {padding-bottom:30px;} #mTabBoard ul li a .subject {padding-top:15px;height:60px;} #mTabBoard dl.isOn dd {left:200px;width: calc(100% - 200px);} #mTabBoard .data-more {bottom:65px;width:130px;height:50px;} #mTabBoard .data-more:before {display:none;} } @media all and (max-width:799px) { #mTabBoard {height:415px;} #mTabBoard ul li {width:48%;margin-left:4% !important;} #mTabBoard ul li:nth-child(odd) {margin-left:0 !important;} } @media all and (max-width:599px) { .msec02 {} #mTabBoard {height:341px;overflow:hidden;} #mTabBoard dl dt {width:150px;} #mTabBoard dl dt a span {font-size:1.5em;} #mTabBoard dl dt a {padding-right:27px;} #mTabBoard dl dt a:before {top:4px;width:8px;height:8px;border-top:3px solid #111;border-right:3px solid #111;} #mTabBoard dl dt a:after {top:11px;width:18px;height:3px;} #mTabBoard ul li {width:100%;margin-left:0 !important;padding-bottom:20px;} #mTabBoard ul li a .subject {padding-top:10px;height:50px;font-size:1em;} #mTabBoard ul li a .isNewIcon {display:none;} #mTabBoard ul li a .date {display:inline-block;position:relative;color:#fff;font-size:.833em;letter-spacing:0;padding:9px 9px 11px 11px;background:#006ee9;font-family:bio-sans, sans-serif;} #mTabBoard dl.isOn dd ul li:nth-child(4), #mTabBoard dl.isOn dd ul li:nth-child(5) {display:none;} #mTabBoard dl.isOn dd {left:150px;width: calc(100% - 150px);} #mTabBoard .data-more {bottom:0;right:auto;left:-150px;width:90px;height:40px;font-size:0.833em;} #mTabBoard .data-more span:before {top:3px;} } /**/ .msec03 {width:100%;max-width:1540px;margin:0 auto;display:flex;} .msec03 .sideL {width: calc(50% - 16px);} .msec03 .sideR {width:50%;max-width:716px;} @media all and (max-width:999px) { .msec03 .sideL {width: calc(60% - 16px);} .msec03 .sideR {width:40%;} } @media all and (max-width:699px) { .msec03 {box-sizing:border-box;padding:0 20px;display:block;} .msec03 .sideL {width:100%;} .msec03 .sideR {width:100%;} } /* 팝업 */ .mPopup {position:relative;width:100%;box-sizing:border-box;padding-left:70px;padding-top:63.13%;} .mPopup-swiper {/*height:476px;*/position:absolute;top:0;right:0;width: calc(100% - 70px);height:100%;overflow:hidden;} .mPopup .data-ctrl {position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:0;} .mPopup .data-ctrl button {display:block;position:relative;width:50px;height:50px;border:2px solid #111;background:none;border-radius:50%;transition:all .3s ease;} .mPopup .data-ctrl .btn-prev:before, .mPopup .data-ctrl .btn-next:before {display:block;content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:2px;height:16px;background:#111;transition:all .3s ease;} .mPopup .data-ctrl .btn-prev:after, .mPopup .data-ctrl .btn-next:after {display:block;content:'';position:absolute;left:0;right:0;margin:0 auto;width:8px;height:8px;border-bottom:2px solid #111;border-right:2px solid #111;transform:rotate(45deg);transition:all .3s ease;} .mPopup .data-ctrl .btn-prev:after {top:17px;transform:rotate(225deg);} .mPopup .data-ctrl .btn-next:after {bottom:17px;} .mPopup .data-ctrl .btn-next {margin:6px 0;} .mPopup .data-auto {display:flex;} .mPopup .data-auto button:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto} .mPopup .data-auto .btn-stop:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:2px solid #111;border-top:0;border-bottom:0;width:3px;height:14px;} .mPopup .data-auto .btn-play {display:none} .mPopup .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:#111;width:0;height:0} @media all and (max-width:1599px) { } @media all and (max-width:999px) { .mPopup {padding-left:50px;} .mPopup-swiper {width: calc(100% - 50px);} .mPopup .data-ctrl button {width:40px;height:40px;} .mPopup .data-ctrl .btn-prev:after {top:10px;} .mPopup .data-ctrl .btn-next:after {bottom:10px;} } /* 배너1 */ .mIcban1 {position:relative;width:100%;height:100%;display:flex;flex-wrap:wrap;} .mIcban1 .item {width: calc(50% - 16px);margin-left:16px;margin-top:16px;height: calc(50% - 8px);} .mIcban1 .item.n1, .mIcban1 .item.n2 {margin-top:0;} .mIcban1 a {display:block;position:relative;background:#f6f6f6;height:100%;padding-right:47px;box-sizing:border-box;} .mIcban1 .s-tit {position:absolute;bottom:38px;left:30px;display:inline-block;color:#333333;word-break:break-all;font-size:1.222em;font-weight:500;line-height:1.2em;word-break:break-all;transition:all .3s ease;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 .1s linear;} .mIcban1 .s-btn {position:absolute;bottom:30px;right:30px;display:block;width:45px;height:45px;border:2px solid #111;background:none;border-radius:50%;transition:all .3s ease;} .mIcban1 .s-btn:before {display:block;content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:16px;height:2px;background:#111;transition:all .3s ease;} .mIcban1 .s-btn:after {display:block;content:'';position:absolute;top:0;bottom:0;right:15px;margin:auto 0;width:8px;height:8px;border-bottom:2px solid #111;border-right:2px solid #111;transform:rotate(-45deg);transition:all .3s ease;} .mIcban1 .s-ico {position:absolute;top:4px;left:6px;display:block;max-width:100%;width:130px;height:130px;background:url(/resources/_Img/MainModule/micban/l4/ico1.png) no-repeat 50% 0;background-size:100% auto;transition:all .3s ease;} .mIcban1 .s-ico.icon1 {background-image:url(/resources/_Img/MainModule/micban/l4/ico1.png);} .mIcban1 .s-ico.icon2 {background-image:url(/resources/_Img/MainModule/micban/l4/ico2.png);} .mIcban1 .s-ico.icon3 {background-image:url(/resources/_Img/MainModule/micban/l4/ico3.png);} .mIcban1 .s-ico.icon4 {background-image:url(/resources/_Img/MainModule/micban/l4/ico4.png);} .mIcban1 .s-ico.icon5 {background-image:url(/resources/_Img/MainModule/micban/l4/ico5.png);} .mIcban1 .s-ico.icon6 {background-image:url(/resources/_Img/MainModule/micban/l4/ico6.png);} .mIcban1 .s-ico.icon7 {background-image:url(/resources/_Img/MainModule/micban/l4/ico7.png);} .mIcban1 .s-ico.icon8 {background-image:url(/resources/_Img/MainModule/micban/l4/ico8.png);} .mIcban1 .s-ico.icon9 {background-image:url(/resources/_Img/MainModule/micban/l4/ico9.png);} .mIcban1 .s-ico.icon10 {background-image:url(/resources/_Img/MainModule/micban/l4/ico10.png);} .mIcban1 a:focus .s-btn, .mIcban1 a:hover .s-btn {right:20px;} .mIcban1 a:focus .s-tit, .mIcban1 a:hover .s-tit {background-size: 0 1px, 100% 1px;} @media all and (max-width:1299px) { .mIcban1 .s-ico {width:80px;height:80px;} .mIcban1 .s-tit {bottom:23px;left:15px;} .mIcban1 .s-btn {bottom:15px;right:15px;} } @media all and (max-width:999px) { .mIcban1 a {padding-right:32px;} .mIcban1 .s-ico {width:60px;height:60px;} .mIcban1 .s-tit {bottom:13px;left:10px;font-size:1.111em;} .mIcban1 .s-btn {bottom:10px;right:10px;width:30px;height:30px;} .mIcban1 .s-btn:after {right:8px;} } @media all and (max-width:699px) { .mIcban1 {height:auto;} .mIcban1 .item {width:49%;height:auto;margin-top:15px !important;margin-left:0;} .mIcban1 > .item:nth-child(even) {margin-left:2%;} .mIcban1 a {padding-top:5px;padding-left:20px;padding-bottom:15px;} .mIcban1 .s-tit {position:relative;bottom:auto;left:auto;padding-top:15px;} .mIcban1 .s-ico {position:relative;top:auto;left:auto;} } /* 포토 갤러리 */ .mGallery {position:relative;width:100%;max-width:1440px;padding:120px 20px 0 20px;box-sizing:border-box;margin:0 auto;text-align:center;} .mGallery .m-tit {color:#111111;font-weight:700;font-size:2.5em;font-family:"Gmarket Sans", sans-serif;line-height:1.2em;padding-bottom:37px;} #mGallery1 {position:relative;display:flex;flex-wrap:wrap;width:100%;} #mGallery1:before {display:block;content:'';position:absolute;top:-93px;right: calc(100% - 142px);width:429px;height:430px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat 0 -259px;z-index:-1;} #mGallery1:after {display:block;content:'';position:absolute;top:22px;left: calc(100% + 20px);width:418px;height:270px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -439px -259px;z-index:-1;} #mGallery1 > li {width:32.572%;margin-left:1.142%;} #mGallery1 > li:first-child {margin-left:0;} #mGallery1 .img-box {position:relative;display:block;width:100%;padding-top:67.985%;overflow:hidden;} #mGallery1 .img-box img {position:absolute;top:50%;left:50%;max-height:100%;transform:translate(-50%, -50%);transition:all .3s ease;} #mGallery1 .s-tit {display:inline-block;box-sizing:border-box;color:#333;max-width:100%;padding-top:25px;font-weight:500;font-size:1.111em;line-height:1.4em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;z-index:1;text-decoration:none;background-image: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0)),linear-gradient(#333, #333);background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%;background-repeat: no-repeat;transition: background-size .3s linear;} #mGallery1 a:focus .img-box img, #mGallery1 a:hover .img-box img {transform:translate(-50%, -50%) scale(1.1);} #mGallery1 a:focus .s-tit, #mGallery1 a:hover .s-tit {background-size: 0 1px, 100% 1px;} .mGallery .dataMore {position:relative;width:220px;height:60px;font-size:0.944em;color:#fff;font-weight:500;background:#111111;margin:53px auto 0 auto;display:flex;justify-content:center;align-items:center;transition:all .3s ease;} .mGallery .dataMore span {position:relative;display:inline-block;transition:all .3s ease;} .mGallery .dataMore span:before {display:block;content:'';position:absolute;top:6px;right:0;width:6px;height:6px;border-top:2px solid #fff;border-right:2px solid #fff;opacity:0;transform: rotate(45deg);transition:all .3s ease} .mGallery .dataMore:focus span, .mGallery .dataMore:hover span {padding-right:15px;} .mGallery .dataMore:focus span:before, .mGallery .dataMore:hover span:before {opacity:1;} #mGallery1 > li.no-data {width:100%;} @media all and (max-width:999px) { .mGallery {padding-top:40px;} .mGallery .m-tit {font-size:2em;padding-bottom:15px;} #mGallery1:before {top:-133px;right: calc(100% - 142px);transform:scale(0.6);} #mGallery1 .s-tit {padding-top:10px;font-size:1em;} .mGallery .dataMore {width:130px;height:50px;margin-top:30px;} } @media all and (max-width:599px) { .mGallery .dataMore {width:90px;height:40px;font-size:0.833em;margin-top:15px;} .mGallery .dataMore span:before {top:3px;} } /* */ .msec05 {display:flex;align-items: flex-end;width:100%;max-width:1440px;padding:45px 20px 0 20px;box-sizing:border-box;margin:0 auto;text-align:center;} .msec05 .sideL {width:50%;padding-top:75px;} .msec05 .sideR {position:relative;width:50%;} .msec05 .sideR:before {display:block;content:'';position:absolute;bottom:0;left: calc(100% + 11px);width:110px;height:242px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -867px -259px;z-index:-1;} @media all and (max-width:999px) { .msec05 {display:block;} .msec05 .sideL {width:100%;padding-top:0;} .msec05 .sideR {width:100%;padding-top:40px;} } /* 학과소개 */ #mImban1 a {width:100%;display:flex;align-items:flex-end;} #mImban1 .s-img {display:block;position:relative;width:50%;overflow:hidden;} #mImban1 .s-img img {transition:all .3s ease;width:100%;} #mImban1 .s-img:before {display:block;content:'';position:absolute;top:-88px;right: calc(100% - 122px);width:300px;height:150px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -1047px 0;z-index:-1;} #mImban1 .txtBox {display:block;position:relative;width:50%;text-align:right;box-sizing:border-box;padding-left:20px;padding-right:50px;padding-bottom:25px;} #mImban1 .txtBox .s-tit {display:block;position:relative;color:#111111;font-weight:700;font-size:2.5em;font-family:"Gmarket Sans", sans-serif;line-height:1.2em;padding-bottom:43px;} #mImban1 .txtBox .s-tit:before {display:block;content:'';position:absolute;top:-101px;right:0;width:423px;height:151px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -1357px 0;z-index:-1;transition:all .3s ease;} #mImban1 .txtBox .s-tit .decoC {display:block;position:absolute;right:0;bottom:25px;width: calc(100% - 60px);height:1px;background:#dbdbdb;} #mImban1 .txtBox .s-tit .decoC:before {display:block;content:'';position:absolute;bottom:-9px;left:-60px;width:20px;height:20px;background:#006ee9;border-radius:50%;} #mImban1 .txtBox .s-tit .decoC:after {display:block;content:'';position:absolute;bottom:-9px;left:-40px;width:20px;height:20px;background:#dbdbdb;border-radius:50%;} #mImban1 .txtBox .s-eng {display:block;color:#9d9d9d;font-family:bio-sans, sans-serif;line-height:1.2em;padding-bottom:17px;} #mImban1 .txtBox .s-txt {display:block;color:#555555;line-height:1.389em;} #mImban1 a:focus .s-img img, #mImban1 a:hover .s-img img {transform:scale(1.1);} @media all and (max-width:999px) { #mImban1 .txtBox .s-tit:before {display:none;} } @media all and (max-width:599px) { #mImban1 a {display:block;} #mImban1 .s-img {width:100%;} #mImban1 .txtBox {width:100%;padding:20px 0 0 0;} #mImban1 .txtBox .s-tit {font-size:2em;} } /* SNS */ .msns-icon-type {display:flex;justify-content:flex-end;align-items:center;} .msns-icon-type .dataTit {display:inline-block;color:#111111;font-weight:700;font-size:1.389em;font-family:"Gmarket Sans", sans-serif;line-height:1.2em;} .msns-icon-type ul {display:flex;justify-content:flex-end;align-items:center;} .msns-icon-type ul > li {margin-left:10px;} .msns-icon-type ul > li:first-child {margin-left:20px;} .msns-icon-type a {display:block;position:relative;width:55px;height:55px;} .msns-icon-type a:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -987px -259px;transition:all .3s ease;} .msns-icon-type .facebook:before {background-position:-987px -259px;} .msns-icon-type .insta:before {background-position:-1052px -259px;} .msns-icon-type .youtube:before {background-position:-1117px -259px;} .msns-icon-type a:focus:before, .msns-icon-type a:hover:before {top:-10px;} /* 유튜브 */ #mLink1 {position:relative;width:100%;overflow:hidden;padding-top:57.144%;margin-top:20px;} #mLink1 #mLink1Iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #mLink1 #mLink1Iframe img {width:100%;height:100%} #mImban2 {display:none;position:relative;width:100%;margin-top:20px;} #mImban2 .dataTit {position:absolute;top:30px;left:30px;font-size:1.222em;color:#fff;font-weight:500;z-index:1;} #mImban2 .dataLst a:before {display:block;content:'';position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:70px;height:50px;background:url(/resources/_Templet/Main/main_dept01/Img/main_spr.png) no-repeat -1182px -259px;z-index:1;} #mImban2 .dataLst .pImg {width:100%;overflow:hidden;} #mImban2 .dataLst .pImg img {transition:all .3s ease;width:100%;} #mImban2 .dataLst a:focus .pImg img, #mImban2 .dataLst a:hover .pImg img {transform:scale(1.1);} /* 배너 2 */ .msec06 {width:100%;max-width:1510px;padding:120px 20px 180px 20px;box-sizing:border-box;margin:0 auto;text-align:center;} .mIcban2Box {position:relative;width:100%;padding:0 55px;box-sizing:border-box;} .mIcban2Box .swiper-slide {height:auto;} .mIcban2Box .data-list a {display:block;position:relative;width:100%;min-height:230px;height:100%;border:2px solid #dbdbdb;box-sizing:border-box;transition:all .3s ease;} .mIcban2Box .data-list .s-tit {display:inline-block;font-size:1.111em;line-height:1.4em;color:#333333;font-weight:500;padding-top:164px;max-width:90%;word-break:break-all;margin:0 auto;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;} .mIcban2Box .data-list .s-ico {position:absolute;top:40px;left:0;right:0;display:block;width:100px;height:100px;background:#ededed;border-radius:50%;margin:0 auto;transition:all .3s ease;} .mIcban2Box .data-list .s-ico:before {display:block;content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:70px;height:70px;background:url(/resources/_Img/MainModule/micban/l6/ico1.png) no-repeat 0 0;background-size:100% auto;} .mIcban2Box .data-list .s-ico.icon1:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico1.png);} .mIcban2Box .data-list .s-ico.icon2:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico2.png);} .mIcban2Box .data-list .s-ico.icon3:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico3.png);} .mIcban2Box .data-list .s-ico.icon4:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico4.png);} .mIcban2Box .data-list .s-ico.icon5:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico5.png);} .mIcban2Box .data-list .s-ico.icon6:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico6.png);} .mIcban2Box .data-list .s-ico.icon7:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico7.png);} .mIcban2Box .data-list .s-ico.icon8:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico8.png);} .mIcban2Box .data-list .s-ico.icon9:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico9.png);} .mIcban2Box .data-list .s-ico.icon10:before {background-image:url(/resources/_Img/MainModule/micban/l6/ico10.png);} .mIcban2Box .data-list a:focus, .mIcban2Box .data-list a:hover {border-color:#006ee9;} .mIcban2Box .data-list a:focus .s-tit, .mIcban2Box .data-list a:hover .s-tit {background-size: 0 1px, 100% 1px;} .mIcban2Box .data-ctrl button {position:absolute;top:50%;margin-top:-22px;width:45px;height:45px;border:0;background:#333333;border-radius:50%;transition:all .3s ease;} .mIcban2Box .data-ctrl .btn-prev:before, .mIcban2Box .data-ctrl .btn-next:before {display:block;content:'';position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:16px;height:2px;background:#fff;transition:all .3s ease;} .mIcban2Box .data-ctrl .btn-prev:after, .mIcban2Box .data-ctrl .btn-next:after {display:block;content:'';position:absolute;top:0;bottom:0;margin:auto 0;width:8px;height:8px;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(-45deg);transition:all .3s ease;} .mIcban2Box .data-ctrl .btn-prev:after {left:14px;transform:rotate(135deg);} .mIcban2Box .data-ctrl .btn-next:after {right:14px;} .mIcban2Box .data-ctrl .btn-prev {left:0;} .mIcban2Box .data-ctrl .btn-next {right:0;} @media all and (max-width:999px) { .msec06 {padding-top:40px;padding-bottom:50px;} .mIcban2Box .data-list a {min-height:160px;padding-bottom:15px;} .mIcban2Box .data-list .s-tit {font-size:1em;padding-top:110px;} .mIcban2Box .data-list .s-ico {top:20px;width:70px;height:70px;} .mIcban2Box .data-list .s-ico:before {width:50px;height:50px;} }