@charset "utf-8"; #mcontainer-wrap {position:relative;width:100%;font-family:'atoz',sans-serif;font-size:17px;line-height:1} #mcontainer {word-break:keep-all;padding-bottom:0} #mcontainer img {font-size:0} /* ============================== * 유틸리티 ================================= */ .m-only-mobile {display:none !important} @media all and (max-width:768px) { .m-only-mobile {display:block !important} } /* ============================== * 메인비쥬얼 ================================= */ .mVisual-wr {position:relative;width:100%;aspect-ratio:1920 / 830;height:auto;box-sizing:border-box;padding:0;z-index:5;overflow:visible;max-width:none;margin:0;transition:all .3s ease} #mVisual {height:100%;position:relative;--vis-text-size:65px;--vis-btn-size:36px;--vis-gap:16px} #mVisual .dataList {display:block;z-index:0;height:100%} #mVisual .dataList .owl-item {overflow:hidden} #mVisual .dataList .owl-stage-outer, #mVisual .dataList .owl-stage, #mVisual .dataList .owl-item, #mVisual .dataList .item, #mVisual .dataList .item {height:100%} #mVisual .dataList .item {display:block;box-sizing:border-box;position:relative} #mVisual .dataList .item > a {display:block;height:100%} #mVisual .dataList .item video {display:block;width:100%;height:100%;object-fit:cover;object-position:center} #mVisual .dataList .item.hasNoData {background:#f5f5f5;text-align:center} #mVisual .dataList .item.hasNoData:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #mVisual .dataList .item.hasNoData .no-data {display:inline-block;vertical-align:middle;width:auto} #mVisual .dataList .txtBox {display:block;position:absolute;left:calc((100% - min(100%, 1400px)) / 2);top:50%;width:603px;max-width:calc(100% - 40px);height:auto;margin:0;z-index:2;transform:translateY(-50%);box-sizing:border-box} #mVisual .dataList .txtBox .txtCore {display:block;position:relative;top:auto;left:auto;box-sizing:border-box;padding:0;width:100%} #mVisual .dataList .txtBox .txtCore .pTxt1, #mVisual .dataList .txtBox .txtCore .pTxt2 {display:block;word-wrap:break-word;word-break:keep-all;white-space:normal;box-sizing:border-box;color:#fff} #mVisual .dataList .txtBox .txtCore .pTxt1:empty {display:none} #mVisual .dataList .txtBox .txtCore .pTxt1, #mVisual .dataList .txtBox .txtCore .pTxt2 {font-size:65px;font-weight:600;line-height:1.3;letter-spacing:0} #mVisual .dataList .txtBox .txtCore .pTxt2 {margin:0} #mVisual .dataList .txtBox .txtCore .pTxt1:not(:empty) + .pTxt2 {margin-top:0} #mVisual .dataList .txtBox .txtCore .pTxt2 em {font-weight:700;font-style:normal} #mVisual .dataList .imgBox {display:block;position:relative;z-index:1;height:100%;overflow:hidden} #mVisual .dataList .imgBox img {display:block;position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center;transform:none} #mVisual .dataList .owl-stage-outer {z-index:0} #mVisual .dataCtrl {display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none} #mVisual .dataCtrl .dataPkgs {display:inline-block;position:absolute;left:calc((100% - min(100%, 1400px)) / 2);top:calc(50% - (var(--vis-text-size) * 1.3 + var(--vis-gap) + var(--vis-btn-size)));line-height:1;font-size:0;margin:0;pointer-events:auto} #mVisual .dataCtrl .dataAuto {display:inline-block;vertical-align:middle;line-height:1;font-size:0} #mVisual .dataCtrl .dataAuto button {display:block;position:relative;width:36px;height:36px;box-sizing:border-box;border:0;border-radius:50%;background:#057D84} #mVisual .dataCtrl .dataAuto button:after {display:block;content:"";position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;box-sizing:border-box} #mVisual .dataCtrl .dataAuto .btn-stop:after {width:10px;height:14px;border-left:3px solid #fff;border-right:3px solid #fff} #mVisual .dataCtrl .dataAuto .btn-play {display:none} #mVisual .dataCtrl .dataAuto .btn-play:after {width:0;height:0;border:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent #fff} #mVisual .dataCtrl .dataPkg1 {display:inline-block;vertical-align:middle;box-sizing:border-box;line-height:1} #mVisual .dataCtrl .dataNums {display:inline-block;vertical-align:middle;font-size:16px;letter-spacing:-.05em;font-weight:500;color:#fff;line-height:1} #mVisual .dataCtrl .dataNums .press {} #mVisual .dataCtrl .dataNums .total {} #mVisual .dataCtrl .dataPkg2 {display:inline-block;vertical-align:middle;line-height:1;margin:0 0 0 10px; border-radius:999px;background:rgba(0, 0, 0, .5);padding:10px 20px 10px;} #mVisual .dataCtrl .dataDots {font-size:0;line-height:1;text-align:center} #mVisual .dataCtrl .dataDots button {display:inline-block;border:0;background:transparent;box-sizing:border-box;position:relative;font-size:0; margin-inline:3px;} #mVisual .dataCtrl .dataDots button:after {content:"";display:block;width:10px;height:10px;border-radius:10px;background:#fff;margin:auto} #mVisual .dataCtrl .dataDots button.active:after {background:#057D84; width:40px;} #mVisual .dataCtrl .dataDots button .isSel {display:none} #mVisual .dataCtrl .dataDots button.active .isSel {display:block;position:absolute;width:0;height:0;overflow:hidden;top:-9999em;left:-9999em;text-indent:-9999em;font-size:0;line-height:0;opacity:0;visibility:hidden} @media all and (max-width:1599px) { #mVisual .dataList .txtBox {width:calc(100% - 120px);padding:0 60px;left:60px;box-sizing:border-box} #mVisual .dataCtrl .dataPkgs {left:120px} } @media all and (max-width:1440px) { #mVisual .dataList .txtBox {left:20px;width:calc(100% - 40px);padding:0} #mVisual .dataCtrl .dataPkgs {left:20px;width:auto} } @media all and (max-width:999px) { .mVisual-wr {aspect-ratio:auto;height:auto;padding-bottom:0} #mVisual {--vis-text-size:48px; aspect-ratio: 1/1;} #mVisual .dataList .txtBox {left:20px;width:calc(100% - 40px);padding:0} #mVisual .dataList .txtBox .txtCore .pTxt1, #mVisual .dataList .txtBox .txtCore .pTxt2 {font-size:48px} #mVisual .dataCtrl .dataPkgs {left:20px;width:auto} } @media all and (max-width:699px) { #mVisual {--vis-text-size:36px} #mVisual .dataList .txtBox {left:20px;width:calc(100% - 40px);padding:0} #mVisual .dataList .txtBox .txtCore .pTxt1, #mVisual .dataList .txtBox .txtCore .pTxt2 {font-size:36px} #mVisual .dataCtrl .dataPkgs {left:20px;width:auto} } @media all and (max-width:599px) { #mVisual {--vis-text-size:24px;--vis-btn-size:28px} #mVisual .dataList .txtBox {left:30px;width:calc(100% - 60px);padding:0} #mVisual .dataList .txtBox .txtCore .pTxt1, #mVisual .dataList .txtBox .txtCore .pTxt2 {font-size:24px} #mVisual .dataCtrl .dataPkgs {left:30px;width:calc(100% - 60px)} #mVisual .dataCtrl .dataAuto button {width:28px;height:28px} #mVisual .dataCtrl .dataPkg1 {padding:5px 0} #mVisual .dataCtrl .dataPkg2 {margin:0 0 0 8px; padding-inline:5px;} #mVisual .dataCtrl .dataNums {font-size:13px} } @media all and (max-width:399px) { #mVisual .dataList .txtBox .txtCore .pTxt2 br {display:none} } /* ============================== * 메인비주얼 퀵메뉴 ================================= */ #mVisQuick {position:absolute;top:0;right:0;z-index:999;box-sizing:border-box;overflow:visible;width:424px;transition:width .45s cubic-bezier(.4,0,.2,1)} #mVisQuick:not(.isOpen) {width:45px;overflow:hidden} #mVisQuick .mVisQuick-toggle {display:flex;flex-flow:column;align-items:center;justify-content:center;gap:6px;position:absolute;left:0;top:50%;z-index:2;box-sizing:border-box;width:45px;height:85px;border:0;border-radius:999px 0 0 999px;background: linear-gradient(180.73deg, #02A0AC 1.92%, #126C20 99.65%); color:#fff;cursor:pointer;transform:translate(-100%, -50%);transition:background .25s ease, left .45s cubic-bezier(.4,0,.2,1), right .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1)} #mVisQuick .mVisQuick-toggleIcon {display:block;transform:rotate(0deg);transform-origin:center center;transition:transform .45s cubic-bezier(.4,0,.2,1)} #mVisQuick:not(.isOpen) .mVisQuick-toggleIcon {transform:rotate(180deg)} #mVisQuick .mVisQuick-toggleTxt {display:block;font-size:14px;font-weight:300;line-height:1.2;letter-spacing:-.03em;} #mVisQuick .mVisQuick-toggle:hover, #mVisQuick .mVisQuick-toggle:focus {background:#057d84} #mVisQuick .mVisQuick__in {width:424px;padding:40px 42px;border-radius:20px 0 0 20px;background: #0000008C;box-sizing:border-box;transform:translateX(0);opacity:1;transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease} #mVisQuick .mVisQuickAdmLst {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none} #mVisQuick .mVisQuickAdmItem {display:block;min-width:0} #mVisQuick .mVisQuickAdmCard {display:flex;flex-flow:column;min-height:100%;padding:16px;border-radius:14px;color:#fff;box-sizing:border-box} #mVisQuick .mVisQuickAdmTit {margin:0 0 11px;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.03em;color:#fff; text-align: center;} #mVisQuick .mVisQuickAdmLinkLst {display:flex;flex-flow:row wrap;gap:6px;margin:0;padding:0;list-style:none} #mVisQuick .mVisQuickAdmLinkItem {display:block; flex:1;} #mVisQuick .mVisQuickAdmLink {display:inline-flex; width:100%; align-items:center;justify-content:center;box-sizing:border-box;padding:7px 0;border:1px solid #fff; border-radius:5px;color:#fff;font-size:17px;font-weight:400;line-height:1;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;transition:background .25s ease, border-color .25s ease} #mVisQuick .mVisQuickAdmLink:hover, #mVisQuick .mVisQuickAdmLink:focus {background:rgba(255,255,255,.12);border-color:#fff} #mVisQuick .mVisQuickAdmItem--full{grid-column: 1 / -1;} #mVisQuick .mVisQuickAdmItem-susi .mVisQuickAdmCard {background:#10999F} #mVisQuick .mVisQuickAdmItem-jungsi .mVisQuickAdmCard {background:#129962} #mVisQuick .mVisQuickAdmItem-worker .mVisQuickAdmCard {background:#2575C7} #mVisQuick .mVisQuickAdmItem-transfer .mVisQuickAdmCard {background:#363A96} #mVisQuick .mVisQuickAdmItem-major .mVisQuickAdmCard {background:#363636} #mVisQuick .mVisQuickAdmItem-master .mVisQuickAdmCard {background:#2A4547} #mVisQuick .mVisQuickUc {margin-top:53px;} #mVisQuick .mVisQuickUcTit {margin:0 0 20px;font-size:28px;font-weight:600;line-height:1.2;color:var(--m-color-primary,#10999F); border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:20px;} #mVisQuick .mVisQuickUcTit-uc {color:#fff} #mVisQuick .mVisQuickUcLst {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;padding:0;list-style:none} #mVisQuick .mVisQuickUcItem {display:block;min-width:0; align-self: stretch;} #mVisQuick .mVisQuickUcLink {display:flex;flex-flow:row;align-items:center;gap:10px;min-height:60px;padding:15px;border: 1px solid #FFFFFF4D;border-radius:5px;background:rgba(255,255,255,.15);color:#fff;text-decoration:none;box-sizing:border-box; height: 100%;} #mVisQuick .mVisQuickUcIco {display:flex;align-items:center;justify-content:center;} #mVisQuick .mVisQuickUcName {font-size:16px;font-weight:400;line-height:1.35;word-break:keep-all} #mVisQuick:not(.isOpen) .mVisQuick__in {transform:translateX(100%);opacity:0;pointer-events:none} #mVisQuick:not(.isOpen) .mVisQuick-toggle {left:auto;right:0;transform:translate(0, -50%);border-radius:999px 0 0 999px} @media all and (max-width:1299px) { #mVisQuick {width:320px} #mVisQuick:not(.isOpen) {width:45px} #mVisQuick .mVisQuick__in {width:320px} } @media all and (max-width:999px) { #mVisQuick {} #mVisQuick .mVisQuick-toggle {margin-top:-46px} #mVisQuick:not(.isOpen) .mVisQuick-toggle {margin-top:-46px} #mVisQuick .mVisQuickAdmTit {font-size:16px;margin-bottom:10px} #mVisQuick .mVisQuickAdmCard {padding:11px 10px;border-radius:5px} #mVisQuick .mVisQuickAdmLink {padding:5px 10px;font-size:15px} #mVisQuick .mVisQuickUcTit {font-size:18px} #mVisQuick .mVisQuickUcLink {min-height:48px;padding:8px 10px} #mVisQuick .mVisQuickUcName {font-size:17px} #mVisQuick .mVisQuick-toggle {width:45px;height:85px} #mVisQuick .mVisQuick-toggleTxt {font-size:14px} #mVisQuick .mVisQuick__in{padding:40px 20px 20px;} #mVisQuick .mVisQuickUc{margin-top:20px;} } @media all and (max-width:699px) { #mVisQuick .mVisQuick__in{padding-top:20px; border-radius: 0;} #mVisQuick .mVisQuickAdmLst{grid-template-columns:repeat(1,minmax(0,1fr)); gap:7px;} #mVisQuick .mVisQuickAdmTit{text-align:left;} #mVisQuick .mVisQuickAdmItem:not(.mVisQuickAdmItem--full) .mVisQuickAdmCard {flex-flow:row;align-items:center;justify-content:space-between;gap:10px} #mVisQuick .mVisQuickAdmItem:not(.mVisQuickAdmItem--full) .mVisQuickAdmTit {margin:0;flex:1;min-width:0} #mVisQuick .mVisQuickAdmItem:not(.mVisQuickAdmItem--full) .mVisQuickAdmLinkLst {flex-shrink:0;margin:0} #mVisQuick .mVisQuickAdmItem:not(.mVisQuickAdmItem--full) .mVisQuickAdmLinkItem {flex:0} #mVisQuick .mVisQuickAdmItem:not(.mVisQuickAdmItem--full) .mVisQuickAdmLink {width:auto} #mVisQuick .mVisQuickUcIco{display:none} #mVisQuick .mVisQuickUcTit{margin-bottom:0;padding-bottom:18px} #mVisQuick .mVisQuickUcLst{display:flex;flex-direction:column;gap:0} #mVisQuick .mVisQuickUcLink {border-radius:0;border:none;border-bottom:1px solid #FFFFFF26;background:url(/resources/_Img/Templet/Main/icon_arrow.svg) no-repeat right center / 11px auto;padding-right:28px} #mVisQuick .mVisQuickUcLink:before{content:''; width:3px; height: 3px; display: inline-block; border-radius: 3px; background-color: #fff;} } /* ============================== * 메인위젯 ================================= */ /** -- 위젯 공통 */ .mPkg1-wr {max-width:1400px;margin:0 auto;display:flex;flex-flow:row;flex-wrap:wrap;border-bottom:1px solid #aaa} .mPkg1-wr:last-child {border-bottom:0} .mPkg1-wr > div {display:inline-block;width:48%;margin:0 4% 0 0;font-weight:400;padding:40px 0} .mPkg1-wr > div:last-child {margin-right:0} .mPkg1-wr .no-data {padding:120px 0 50px;background-position:center 40px} .mPkg2-wr {max-width:1400px;margin:0 auto;border-bottom:1px solid #aaa;box-sizing:border-box;position:relative;padding:0 728px 0 0} .mPkg2-wr:last-child {border-bottom:0} .mPkg2-wr > div {display:block;box-sizing:border-box;padding:40px 0} .mPkg2-wr .sideL {} .mPkg2-wr .sideR {position:absolute;width:672px;right:0;top:0} @media all and (max-width:1440px) { .mPkg1-wr {margin:0 20px} .mPkg2-wr {margin:0 20px} } @media all and (max-width:1399px) { .mPkg1-wr > div {width:49%;margin:0 2% 0 0;padding:20px 0} .mPkg2-wr {padding:0 690px 0 0} .mPkg2-wr > div {padding:20px 0} } @media all and (max-width:1299px) { .mPkg2-wr {padding:0 520px 0 0} .mPkg2-wr .sideR {width:500px} } @media all and (max-width:999px) { .mPkg2-wr {padding:0 420px 0 0} .mPkg2-wr .sideR {width:400px} } @media all and (max-width:899px) { .mPkg2-wr {padding:0 320px 0 0} .mPkg2-wr .sideR {width:300px} } @media all and (max-width:699px) { .mPkg1-wr.hasBbs {padding:20px 0;display:block} .mPkg1-wr.hasBbs > div {width:100%;margin:0 0 20px;padding:0} .mPkg1-wr.hasBbs > div:last-child {margin:0} .mPkg2-wr {padding:0} .mPkg2-wr .sideR {position:relative;width:auto;right:auto;top:auto;padding:0} } @media all and (max-width:599px) { .mPkg1-wr {padding:20px 0;display:block} .mPkg1-wr > div {width:100%;margin:0 0 20px;padding:0} .mPkg1-wr > div:last-child {margin:0} } /** -- mIcban1 */ #mIcban1 {box-sizing:border-box;border:1px solid #ddd;border-bottom:3px solid #1472b6;border-radius:5px;padding:20px 30px;height:100%} #mIcban1 .dataTit {display:block;margin:0 0 15px} #mIcban1 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mIcban1 .dataLst {display:flex;flex-flow:row;flex-wrap:wrap} #mIcban1 .dataLst > li {display:inline-block;width:50%;vertical-align:top;margin:15px 0 0} #mIcban1 .dataLst > li:nth-child(-n+2) {margin:0} #mIcban1 .dataLst a {display:block;box-sizing:border-box;position:relative;padding:0 20px 0 100px;font-size:0;min-height:90px} #mIcban1 .dataLst a:before {content:"";display:inline-block;width:0;height:90px;vertical-align:middle} #mIcban1 .dataLst a .pIco {display:block;position:absolute;width:90px;height:90px;left:0;top:0;background-repeat:no-repeat;background-position:0 0;background-size:cover} #mIcban1 .dataLst a .pIco.icon1 {background-image:url(/resources/_Img/MainModule/micban/l1/ico1.png)} #mIcban1 .dataLst a .pIco.icon2 {background-image:url(/resources/_Img/MainModule/micban/l1/ico2.png)} #mIcban1 .dataLst a .pIco.icon3 {background-image:url(/resources/_Img/MainModule/micban/l1/ico3.png)} #mIcban1 .dataLst a .pIco.icon4 {background-image:url(/resources/_Img/MainModule/micban/l1/ico4.png)} #mIcban1 .dataLst a .pIco.icon5 {background-image:url(/resources/_Img/MainModule/micban/l1/ico5.png)} #mIcban1 .dataLst a .pIco.icon6 {background-image:url(/resources/_Img/MainModule/micban/l1/ico6.png)} #mIcban1 .dataLst a .pIco.icon7 {background-image:url(/resources/_Img/MainModule/micban/l1/ico7.png)} #mIcban1 .dataLst a .pIco.icon8 {background-image:url(/resources/_Img/MainModule/micban/l1/ico8.png)} #mIcban1 .dataLst a .pIco.icon9 {background-image:url(/resources/_Img/MainModule/micban/l1/ico9.png)} #mIcban1 .dataLst a .pIco.icon10 {background-image:url(/resources/_Img/MainModule/micban/l1/ico10.png)} #mIcban1 .dataLst a .pPkg {display:inline-block;vertical-align:middle} #mIcban1 .dataLst a .pPkg .sTit, #mIcban1 .dataLst a .pPkg .sEng, #mIcban1 .dataLst a .pPkg .sTxt {display:block;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mIcban1 .dataLst a .sTit {font-size:17px;font-weight:500;color:#222;letter-spacing:-.05em} #mIcban1 .dataLst a .sEng {font-size:13px;color:#888;font-weight:300;margin:2px 0 0;letter-spacing:0} #mIcban1 .dataLst a .sTxt {font-size:15px;color:#777;font-weight:300;margin:7px 0 0;letter-spacing:-.05em} #mIcban1 .dataLst a[target='_blank'] .sTit:after {content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 0;margin:-4px 0 0 5px} #mIcban1 .dataLst a[target='_blank']:focus .sTit:after, #mIcban1 .dataLst a[target='_blank']:hover .sTit:after {background-position-x:-25px} #mIcban1 .dataLst a:focus .sTit, #mIcban1 .dataLst a:hover .sTit {color:#1472b6;text-decoration:underline} @media all and (max-width:1399px) { #mIcban1 {padding:20px} } @media all and (max-width:1299px) { #mIcban1 .dataLst a {padding:0 15px 0 80px;min-height:70px} #mIcban1 .dataLst a:before {display:none} #mIcban1 .dataLst a .pIco {width:70px;height:70px;top:0} #mIcban1 .dataLst a .sTit {font-size:16px} } @media all and (max-width:1099px) { #mIcban1 {padding:15px} #mIcban1 .dataTit span {font-size:20px} #mIcban1 .dataLst a {padding:0 10px 0 70px;min-height:60px} #mIcban1 .dataLst a .pIco {width:60px;height:60px} } @media all and (max-width:999px) { #mIcban1 {padding:15px 10px} #mIcban1 .dataLst a {padding:70px 5px 0 0;text-align:center} #mIcban1 .dataLst a .pIco {left:50%;transform:translateX(-50%)} } @media all and (max-width:799px) { #mIcban1 .dataLst > li {display:block;width:100%;margin:15px 0 0} #mIcban1 .dataLst > li:nth-child(-n+2) {margin:15px 0 0} #mIcban1 .dataLst > li:first-child {margin:0} #mIcban1 .dataLst a {padding:0 0 0 70px;text-align:left} #mIcban1 .dataLst a .pIco {left:0;transform:none} } @media all and (max-width:599px) { #mIcban1 .dataTit span {font-size:18px} } @media all and (max-width:399px) { #mIcban1 .dataLst a {padding:0 0 0 60px;min-height:50px} #mIcban1 .dataLst a .pIco {width:50px;height:50px} #mIcban1 .dataLst a .sTit {font-size:15px} #mIcban1 .dataLst a .sEng {font-size:12px} #mIcban1 .dataLst a .sTxt {font-size:14px} } /** -- mIcban2 */ #mIcban2 {box-sizing:border-box;border:1px solid #ddd;border-bottom:3px solid #1472b6;border-radius:5px;padding:20px 30px;height:100%} #mIcban2 .dataTit {display:block;margin:0 0 15px} #mIcban2 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mIcban2 .dataLst {display:flex;flex-flow:row;flex-wrap:wrap} #mIcban2 .dataLst > li {display:inline-block;width:50%;vertical-align:top;margin:15px 0 0} #mIcban2 .dataLst > li:nth-child(-n+2) {margin:0} #mIcban2 .dataLst a {display:block;box-sizing:border-box;position:relative;padding:0 20px 0 100px;font-size:0;min-height:90px} #mIcban2 .dataLst a:before {content:"";display:inline-block;width:0;height:90px;vertical-align:middle} #mIcban2 .dataLst a .pIco {display:block;position:absolute;width:90px;height:90px;left:0;top:0;background-repeat:no-repeat;background-position:0 0;background-size:cover} #mIcban2 .dataLst a .pIco:before {content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:50%;border:1px solid #ddd;border-radius:50%;box-sizing:border-box;transition:all .1s linear} #mIcban2 .dataLst a .pIco.icon1 {background-image:url(/resources/_Img/MainModule/micban/l2/ico1.png)} #mIcban2 .dataLst a .pIco.icon2 {background-image:url(/resources/_Img/MainModule/micban/l2/ico2.png)} #mIcban2 .dataLst a .pIco.icon3 {background-image:url(/resources/_Img/MainModule/micban/l2/ico3.png)} #mIcban2 .dataLst a .pIco.icon4 {background-image:url(/resources/_Img/MainModule/micban/l2/ico4.png)} #mIcban2 .dataLst a .pIco.icon5 {background-image:url(/resources/_Img/MainModule/micban/l2/ico5.png)} #mIcban2 .dataLst a .pIco.icon6 {background-image:url(/resources/_Img/MainModule/micban/l2/ico6.png)} #mIcban2 .dataLst a .pIco.icon7 {background-image:url(/resources/_Img/MainModule/micban/l2/ico7.png)} #mIcban2 .dataLst a .pIco.icon8 {background-image:url(/resources/_Img/MainModule/micban/l2/ico8.png)} #mIcban2 .dataLst a .pIco.icon9 {background-image:url(/resources/_Img/MainModule/micban/l2/ico9.png)} #mIcban2 .dataLst a .pIco.icon10 {background-image:url(/resources/_Img/MainModule/micban/l2/ico10.png)} #mIcban2 .dataLst a .pPkg {display:inline-block;vertical-align:middle} #mIcban2 .dataLst a .pPkg .sTit, #mIcban2 .dataLst a .pPkg .sEng, #mIcban2 .dataLst a .pPkg .sTxt {display:block;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mIcban2 .dataLst a .sTit {font-size:17px;font-weight:500;color:#222;letter-spacing:-.05em} #mIcban2 .dataLst a .sEng {font-size:13px;color:#888;font-weight:300;margin:2px 0 0;letter-spacing:0} #mIcban2 .dataLst a .sTxt {font-size:15px;color:#777;font-weight:300;margin:7px 0 0;letter-spacing:-.05em} #mIcban2 .dataLst a[target='_blank'] .sTit:after {content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 0;margin:-4px 0 0 5px} #mIcban2 .dataLst a[target='_blank']:focus .sTit:after, #mIcban2 .dataLst a[target='_blank']:hover .sTit:after {background-position-x:-25px} #mIcban2 .dataLst a:focus .pIco:before, #mIcban2 .dataLst a:hover .pIco:before {border:3px solid #1472b6} #mIcban2 .dataLst a:focus .sTit, #mIcban2 .dataLst a:hover .sTit {color:#1472b6;text-decoration:underline} @media all and (max-width:1399px) { #mIcban2 {padding:20px} } @media all and (max-width:1299px) { #mIcban2 .dataLst a {padding:0 15px 0 80px;min-height:70px} #mIcban2 .dataLst a:before {display:none} #mIcban2 .dataLst a .pIco {width:70px;height:70px;top:0} #mIcban2 .dataLst a .sTit {font-size:16px} } @media all and (max-width:1099px) { #mIcban2 {padding:15px} #mIcban2 .dataTit span {font-size:20px} #mIcban2 .dataLst a {padding:0 10px 0 70px;min-height:60px} #mIcban2 .dataLst a .pIco {width:60px;height:60px} } @media all and (max-width:999px) { #mIcban2 {padding:15px 10px} #mIcban2 .dataLst a {padding:70px 5px 0 0;text-align:center} #mIcban2 .dataLst a .pIco {left:50%;transform:translateX(-50%)} } @media all and (max-width:799px) { #mIcban2 .dataLst > li {display:block;width:100%;margin:15px 0 0} #mIcban2 .dataLst > li:nth-child(-n+2) {margin:15px 0 0} #mIcban2 .dataLst > li:first-child {margin:0} #mIcban2 .dataLst a {padding:0 0 0 70px;text-align:left} #mIcban2 .dataLst a .pIco {left:0;transform:none} } @media all and (max-width:599px) { #mIcban2 .dataTit span {font-size:18px} } @media all and (max-width:399px) { #mIcban2 .dataLst a {padding:0 0 0 60px;min-height:50px} #mIcban2 .dataLst a .pIco {width:50px;height:50px} #mIcban2 .dataLst a .sTit {font-size:15px} #mIcban2 .dataLst a .sEng {font-size:12px} #mIcban2 .dataLst a .sTxt {font-size:14px} } /** -- mImban1 */ #mImban1 {} #mImban1 .dataTit {display:block;margin:0 0 15px} #mImban1 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mImban1 .dataLst {} #mImban1 .dataLst a {display:flex;flex-flow:row;flex-wrap:wrap} #mImban1 .dataLst a > div {display:inline-block;box-sizing:border-box;position:relative} #mImban1 .dataLst a .pImg {width:40%} #mImban1 .dataLst a .pImg .pImg-container {display:block;position:relative;box-sizing:border-box;height:0;padding:0 0 70%;overflow:hidden} #mImban1 .dataLst a .pImg .pImg-container img {display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:all .3s ease} #mImban1 .dataLst a .pStr {width:60%;padding:0 0 0 20px} #mImban1 .dataLst a .pStr .sTit {display:block;font-size:24px;letter-spacing:-.05em;font-weight:500;line-height:1.3} #mImban1 .dataLst a .pStr .sEng {display:block;font-size:15px;letter-spacing:0;color:#777;margin:5px 0 0} #mImban1 .dataLst a .pStr .sTxt {display:block;letter-spacing:-.05em;margin:15px 0 0;padding:10px 0 0;border-top:1px solid #ddd;line-height:1.3} #mImban1 .dataLst a:focus .pImg .pImg-container img, #mImban1 .dataLst a:hover .pImg .pImg-container img {transform:scale(1.1) rotate(2deg)} @media all and (max-width:1199px) { #mImban1 .dataLst a .pStr .sTit {font-size:20px} } @media all and (max-width:1099px) { #mImban1 .dataTit span {font-size:20px} #mImban1 .dataLst a .pStr .sTxt {font-size:16px} } @media all and (max-width:999px) { #mImban1 .dataLst a .pStr {padding:0 0 0 10px} #mImban1 .dataLst a .pStr .sTit {font-size:18px;line-height:1.2} #mImban1 .dataLst a .pStr .sEng {font-size:14px} #mImban1 .dataLst a .pStr .sTxt {font-size:15px} } @media all and (max-width:799px) { #mImban1 .dataLst a .pImg {width:35%} #mImban1 .dataLst a .pStr {width:65%} #mImban1 .dataLst a .pStr .sTit {font-size:16px} #mImban1 .dataLst a .pStr .sEng {font-size:13px} #mImban1 .dataLst a .pStr .sTxt {font-size:14px;margin:10px 0 0;padding:5px 0 0} } @media all and (max-width:599px) { #mImban1 .dataTit span {font-size:18px} } @media all and (max-width:399px) { #mImban1 .dataLst a {display:block} #mImban1 .dataLst a > div {display:block} #mImban1 .dataLst a .pImg {width:100%} #mImban1 .dataLst a .pStr {width:100%;padding:10px 0 0} #mImban1 .dataLst a .pStr .sTit {font-size:15px} #mImban1 .dataLst a .pStr .sEng {font-size:13px} #mImban1 .dataLst a .pStr .sTxt {font-size:13px} } /** -- mImban2 */ #mImban2 {} #mImban2 .dataTit {display:block;margin:0 0 15px} #mImban2 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mImban2 .dataLst {} #mImban2 .dataLst a {display:flex;flex-flow:row;flex-wrap:wrap} #mImban2 .dataLst a > div {display:inline-block;box-sizing:border-box;position:relative} #mImban2 .dataLst a .pImg {width:40%} #mImban2 .dataLst a .pImg .pImg-container {display:block;position:relative;box-sizing:border-box;height:0;padding:0 0 70%;overflow:hidden} #mImban2 .dataLst a .pImg .pImg-container img {display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:all .3s ease} #mImban2 .dataLst a .pStr {width:60%;padding:0 0 0 20px} #mImban2 .dataLst a .pStr .sTit {display:block;font-size:24px;letter-spacing:-.05em;font-weight:500;line-height:1.3} #mImban2 .dataLst a .pStr .sEng {display:block;font-size:15px;letter-spacing:0;color:#777;margin:5px 0 0} #mImban2 .dataLst a .pStr .sTxt {display:block;letter-spacing:-.05em;margin:15px 0 0;padding:10px 0 0;border-top:1px solid #ddd;line-height:1.3} #mImban2 .dataLst a:focus .pImg .pImg-container img, #mImban2 .dataLst a:hover .pImg .pImg-container img {transform:scale(1.1) rotate(2deg)} @media all and (max-width:1199px) { #mImban2 .dataLst a .pStr .sTit {font-size:20px} } @media all and (max-width:1099px) { #mImban2 .dataTit span {font-size:20px} #mImban2 .dataLst a .pStr .sTxt {font-size:16px} } @media all and (max-width:999px) { #mImban2 .dataLst a .pStr {padding:0 0 0 10px} #mImban2 .dataLst a .pStr .sTit {font-size:18px;line-height:1.2} #mImban2 .dataLst a .pStr .sEng {font-size:14px} #mImban2 .dataLst a .pStr .sTxt {font-size:15px} } @media all and (max-width:799px) { #mImban2 .dataLst a .pImg {width:35%} #mImban2 .dataLst a .pStr {width:65%} #mImban2 .dataLst a .pStr .sTit {font-size:16px} #mImban2 .dataLst a .pStr .sEng {font-size:13px} #mImban2 .dataLst a .pStr .sTxt {font-size:14px;margin:10px 0 0;padding:5px 0 0} } @media all and (max-width:599px) { #mImban2 .dataTit span {font-size:18px} } @media all and (max-width:399px) { #mImban2 .dataLst a {display:block} #mImban2 .dataLst a > div {display:block} #mImban2 .dataLst a .pImg {width:100%} #mImban2 .dataLst a .pStr {width:100%;padding:10px 0 0} #mImban2 .dataLst a .pStr .sTit {font-size:15px} #mImban2 .dataLst a .pStr .sEng {font-size:13px} #mImban2 .dataLst a .pStr .sTxt {font-size:13px} } /** -- mLink1 */ #mLink1 {} #mLink1 .dataTit {display:block;margin:0 0 15px} #mLink1 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mLink1 .dataLst {display:flex;flex-flow:row;flex-wrap:wrap} #mLink1 .dataLst > li {display:inline-block;width:49%;vertical-align:top;margin:15px 2% 0 0;padding:15px 0 0;border-top:1px solid #ddd} #mLink1 .dataLst > li:nth-child(2n) {margin-right:0} #mLink1 .dataLst > li:nth-child(-n+2) {margin-top:0;padding-top:0;border-top:0} #mLink1 .dataLst a {display:block;box-sizing:border-box;position:relative;padding:0 0 0 10px} #mLink1 .dataLst a:before {content:"";display:block;position:absolute;width:3px;height:3px;border-radius:50%;background:#1472b6;left:0;top:9px} #mLink1 .dataLst a .pPkg {display:inline-block;vertical-align:middle} #mLink1 .dataLst a .pPkg .sTit, #mLink1 .dataLst a .pPkg .sEng, #mLink1 .dataLst a .pPkg .sTxt {display:block;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mLink1 .dataLst a .sTit {font-size:17px;font-weight:500;color:#222;letter-spacing:-.05em} #mLink1 .dataLst a .sEng {font-size:13px;color:#888;font-weight:300;margin:2px 0 0;letter-spacing:0} #mLink1 .dataLst a .sTxt {font-size:15px;color:#777;font-weight:300;margin:10px 0 0;letter-spacing:-.05em} #mLink1 .dataLst a[target='_blank'] .sTit:after {content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 0;margin:-4px 0 0 5px} #mLink1 .dataLst a[target='_blank']:focus .sTit:after, #mLink1 .dataLst a[target='_blank']:hover .sTit:after {background-position-x:-25px} #mLink1 .dataLst a:focus .sTit, #mLink1 .dataLst a:hover .sTit {color:#1472b6;text-decoration:underline} @media all and (max-width:1099px) { #mLink1 .dataTit span {font-size:20px} } @media all and (max-width:899px) { #mLink1 .dataLst {display:block} #mLink1 .dataLst > li {display:block;width:100%;margin:10px 0 0;padding:10px 0 0} #mLink1 .dataLst > li:nth-child(-n+2) {margin:10px 0 0;padding:10px 0 0;border-top:1px solid #ddd} #mLink1 .dataLst > li:first-child {margin:0;padding:0;border-top:0} #mLink1 .dataLst a .sTxt {margin:5px 0 0} } @media all and (max-width:599px) { #mLink1 .dataTit span {font-size:18px} } @media all and (max-width:399px) { #mLink1 .dataLst a:before {top:8px} #mLink1 .dataLst a .sTit {font-size:15px} #mLink1 .dataLst a .sTxt {font-size:13px} } /** -- mLink2 */ #mLink2 {} #mLink2 .dataTit {display:block;margin:0 0 15px} #mLink2 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mLink2 .dataLst {display:flex;flex-flow:row;flex-wrap:wrap} #mLink2 .dataLst > li {display:inline-block;width:49%;vertical-align:top;margin:15px 2% 0 0;padding:15px 0 0;border-top:1px solid #ddd} #mLink2 .dataLst > li:nth-child(2n) {margin-right:0} #mLink2 .dataLst > li:nth-child(-n+2) {margin-top:0;padding-top:0;border-top:0} #mLink2 .dataLst a {display:block;box-sizing:border-box;position:relative;padding:0 0 0 10px} #mLink2 .dataLst a:before {content:"";display:block;position:absolute;width:3px;height:3px;border-radius:50%;background:#1472b6;left:0;top:9px} #mLink2 .dataLst a .pPkg {display:inline-block;vertical-align:middle} #mLink2 .dataLst a .pPkg .sTit, #mLink2 .dataLst a .pPkg .sEng, #mLink2 .dataLst a .pPkg .sTxt {display:block;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mLink2 .dataLst a .sTit {font-size:17px;font-weight:500;color:#222;letter-spacing:-.05em} #mLink2 .dataLst a .sEng {font-size:13px;color:#888;font-weight:300;margin:2px 0 0;letter-spacing:0} #mLink2 .dataLst a .sTxt {font-size:15px;color:#777;font-weight:300;margin:10px 0 0;letter-spacing:-.05em} #mLink2 .dataLst a[target='_blank'] .sTit:after {content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 0;margin:-4px 0 0 5px} #mLink2 .dataLst a[target='_blank']:focus .sTit:after, #mLink2 .dataLst a[target='_blank']:hover .sTit:after {background-position-x:-25px} #mLink2 .dataLst a:focus .sTit, #mLink2 .dataLst a:hover .sTit {color:#1472b6;text-decoration:underline} @media all and (max-width:1099px) { #mLink2 .dataTit span {font-size:20px} } @media all and (max-width:899px) { #mLink2 .dataLst {display:block} #mLink2 .dataLst > li {display:block;width:100%;margin:10px 0 0;padding:10px 0 0} #mLink2 .dataLst > li:nth-child(-n+2) {margin:10px 0 0;padding:10px 0 0;border-top:1px solid #ddd} #mLink2 .dataLst > li:first-child {margin:0;padding:0;border-top:0} #mLink2 .dataLst a .sTxt {margin:5px 0 0} } @media all and (max-width:599px) { #mLink2 .dataTit span {font-size:18px} } @media all and (max-width:399px) { #mLink2 .dataLst a:before {top:8px} #mLink2 .dataLst a .sTit {font-size:15px} #mLink2 .dataLst a .sTxt {font-size:13px} } /** -- mLink3 */ #mLink3 {} #mLink3 .dataTit {display:block;margin:0 0 15px} #mLink3 .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mLink3 .dataLst {display:flex;flex-flow:row;flex-wrap:wrap} #mLink3 .dataLst > li {display:inline-block;width:49%;vertical-align:top;margin:15px 2% 0 0;padding:15px 0 0;border-top:1px solid #ddd} #mLink3 .dataLst > li:nth-child(2n) {margin-right:0} #mLink3 .dataLst > li:nth-child(-n+2) {margin-top:0;padding-top:0;border-top:0} #mLink3 .dataLst a {display:block;box-sizing:border-box;position:relative;padding:0 0 0 10px} #mLink3 .dataLst a:before {content:"";display:block;position:absolute;width:3px;height:3px;border-radius:50%;background:#1472b6;left:0;top:9px} #mLink3 .dataLst a .pPkg {display:inline-block;vertical-align:middle} #mLink3 .dataLst a .pPkg .sTit, #mLink3 .dataLst a .pPkg .sEng, #mLink3 .dataLst a .pPkg .sTxt {display:block;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mLink3 .dataLst a .sTit {font-size:17px;font-weight:500;color:#222;letter-spacing:-.05em} #mLink3 .dataLst a .sEng {font-size:13px;color:#888;font-weight:300;margin:2px 0 0;letter-spacing:0} #mLink3 .dataLst a .sTxt {font-size:15px;color:#777;font-weight:300;margin:10px 0 0;letter-spacing:-.05em} #mLink3 .dataLst a[target='_blank'] .sTit:after {content:"";display:inline-block;width:15px;height:15px;vertical-align:middle;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 0;margin:-4px 0 0 5px} #mLink3 .dataLst a[target='_blank']:focus .sTit:after, #mLink3 .dataLst a[target='_blank']:hover .sTit:after {background-position-x:-25px} #mLink3 .dataLst a:focus .sTit, #mLink3 .dataLst a:hover .sTit {color:#1472b6;text-decoration:underline} @media all and (max-width:1299px) { #mLink3 .dataLst a .sEng {margin:5px 0 0} #mLink3 .dataLst a .sTxt {display:none !important} } @media all and (max-width:1099px) { #mLink3 .dataTit span {font-size:20px} } @media all and (max-width:999px) { #mLink3 .dataLst > li {margin:7px 2% 0 0;padding:7px 0 0} } @media all and (max-width:899px) { #mLink3 .dataLst a .pPkg {display:block} #mLink3 .dataLst a .sTit {display:block;height:41px;box-sizing:border-box;position:relative;overflow:hidden} #mLink3 .dataLst a .sTit:before {content:"";display:block;position:absolute;width:70px;height:50%;right:0;bottom:0;background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%)} } @media all and (max-width:599px) { #mLink3 .dataTit span {font-size:18px} #mLink3 .dataLst {display:block} #mLink3 .dataLst > li {display:block;width:100%;margin:10px 0 0;padding:10px 0 0} #mLink3 .dataLst > li:nth-child(-n+2) {margin:10px 0 0;padding:10px 0 0;border-top:1px solid #ddd} #mLink3 .dataLst > li:first-child {margin:0;padding:0;border-top:0} #mLink3 .dataLst a .sTit {height:auto} #mLink3 .dataLst a .sTit:before {display:none} } @media all and (max-width:399px) { #mLink3 .dataLst a:before {top:8px} #mLink3 .dataLst a .sTit {font-size:15px} } /** -- Popup Zone */ #mPopup {box-sizing:border-box;position:relative} #mPopup .dataTit {display:block;margin:0 0 15px} #mPopup .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mPopup .dataList {} #mPopup .dataList .item {box-sizing:border-box;position:relative} #mPopup .dataList .item a {display:block;overflow:hidden} #mPopup .dataList .item img {display:block;width:100%;transition:all .3s ease} #mPopup .dataList .item a:focus img, #mPopup .dataList .item a:hover img {transform:scale(1.1) rotate(2deg)} #mPopup .dataList .item.hasNoData {height:0;padding:0 0 47.025%} #mPopup .dataList .item.hasNoData .no-data {position:absolute;width:100%;left:0;top:50%;transform:translateY(-50%);padding:0;background:none} #mPopup .dataList .item.hasNoData .no-data:before {content:"";display:block;width:71px;height:71px;margin:0 auto 10px;background:url(/resources/_Img/Board/default/ico_nodata.png) no-repeat} #mPopup .dataCtrl {display:none;position:absolute;right:0;top:2px;padding:0 32px} #mPopup .dataCtrl.active {display:block} #mPopup .dataCtrl button {width:30px;height:30px;box-sizing:border-box;border:1px solid #fff;background:transparent;font-size:0;border-radius:3px;transition:all .3s ease} #mPopup .dataCtrl button:focus, #mPopup .dataCtrl button:hover {border-color:#1472b6} #mPopup .dataCtrl button:after {content:"";display:block;position:absolute;box-sizing:border-box;top:0;right:0;bottom:0;left:0;transition:all .3s ease} #mPopup .dataCtrl .dataNavi {position:absolute;width:100%;height:0;left:0;top:0} #mPopup .dataCtrl .dataNavi.disabled {display:none} #mPopup .dataCtrl .dataNavi button {position:absolute;top:0} #mPopup .dataCtrl .dataNavi button:after {width:12px;height:12px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #555 #555} #mPopup .dataCtrl .dataNavi button:focus:after, #mPopup .dataCtrl .dataNavi button:hover:after {border-color:transparent transparent #1472b6 #1472b6} #mPopup .dataCtrl .dataNavi .owl-prev {left:0} #mPopup .dataCtrl .dataNavi .owl-prev:after {transform:rotate(45deg);margin:auto auto auto 10px} #mPopup .dataCtrl .dataNavi .owl-next {right:0} #mPopup .dataCtrl .dataNavi .owl-next:after {transform:rotate(225deg);margin:auto 10px auto auto} #mPopup .dataCtrl .dataAuto {} #mPopup .dataCtrl .dataAuto button {position:relative} #mPopup .dataCtrl .dataAuto .btn-stop {display:block} #mPopup .dataCtrl .dataAuto .btn-stop:after {width:6px;height:12px;border:solid;border-width:0 2px;border-color:transparent #555;margin:auto} #mPopup .dataCtrl .dataAuto .btn-stop:focus:after, #mPopup .dataCtrl .dataAuto .btn-stop:hover:after {border-color:transparent #1472b6} #mPopup .dataCtrl .dataAuto .btn-play {display:none} #mPopup .dataCtrl .dataAuto .btn-play:after {width:0;height:0;border:solid;border-width:5px 0 5px 6px;border-color:transparent transparent transparent #555;margin:auto} #mPopup .dataCtrl .dataAuto .btn-play:focus:after, #mPopup .dataCtrl .dataAuto .btn-play:hover:after {border-color:transparent transparent transparent #1472b6} #mPopup .dataDots {position:absolute;top:5px;right:100px} #mPopup .dataDots.disabled {display:none} #mPopup .dataDots button {display:inline-block;width:20px;height:20px;border:0;background:transparent;position:relative;vertical-align:middle;font-size:0} #mPopup .dataDots button:after {content:"";display:block;position:absolute;width:10px;height:10px;border-radius:50%;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #mPopup .dataDots button.active:after {background:#1472b6} @media all and (max-width:1099px) { #mPopup .dataTit span {font-size:20px} } @media all and (max-width:599px) { #mPopup .dataTit span {font-size:18px} } /** -- mNotice(2개 이상 게시판 가능성 있음) */ #mNotice {position:relative} #mNotice .mNoticeUnit {} #mNotice .dataTit {display:block;margin:0 0 15px} #mNotice .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mNotice .dataLst {display:block} #mNotice .dataLst li {display:block;margin:0 0 10px} #mNotice .dataLst li:last-child {margin:0} #mNotice .dataLst a {display:block;position:relative;box-sizing:border-box;padding:0 100px 0 10px} #mNotice .dataLst a:before {content:"";display:block;position:absolute;width:3px;height:3px;border-radius:50%;background:#777;left:0;top:11px;transition:all .3s ease} #mNotice .dataLst a .sTit {display:block;font-size:17px;font-weight:500;color:#222;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;padding:3px 0;transition:all .3s ease} #mNotice .dataLst a .sTit .newMark {display:inline-block;width:17px;height:17px;line-height:12px;border-radius:50%;background:#1472b6;vertical-align:top;text-align:center;position:relative;top:1px} #mNotice .dataLst a .sTit .newMark:before {content:"N";display:inline-block;color:#fff;font-size:10px;line-height:1} #mNotice .dataLst a .sDate {display:block;position:absolute;right:0;top:4px;font-size:16px;letter-spacing:0;color:#777} #mNotice .dataLst a:focus .sTit, #mNotice .dataLst a:hover .sTit {color:#1472b6;text-decoration:underline} #mNotice .dataLst a:focus:before, #mNotice .dataLst a:hover:before {background:#1472b6} #mNotice .dataMore {display:block;position:absolute;right:0;top:2px;width:30px;height:30px;border:1px solid #ddd;transition:all .3s ease} #mNotice .dataMore:focus, #mNotice .dataMore:hover {border:1px solid #1472b6;background:#1472b6} #mNotice .dataMore:before, #mNotice .dataMore:after {content:"";display:block;position:absolute;width:14px;height:2px;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #mNotice .dataMore:before {} #mNotice .dataMore:after {transform:rotate(90deg)} #mNotice .dataMore:focus:before, #mNotice .dataMore:hover:before {background:#fff;transform:rotate(90deg)} #mNotice .dataMore:focus:after, #mNotice .dataMore:hover:after {background:#fff;transform:rotate(180deg)} @media all and (max-width:1099px) { #mNotice .dataTit span {font-size:20px} } @media all and (max-width:999px) { #mNotice .dataLst a {padding:0 80px 0 10px} #mNotice .dataLst a .sTit {letter-spacing:-.05em} #mNotice .dataLst a .sDate {font-size:14px} #mNotice .dataMore {top:0} } @media all and (max-width:799px) { #mNotice .dataLst a .sTit {font-size:15px} } @media all and (max-width:599px) { #mNotice .dataTit span {font-size:18px} } /** -- mTabBoard */ #mTabBoard {position:relative;height:206px} #mTabBoard .dataTit {display:inline-block;margin:0 15px 0 0} #mTabBoard .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mTabBoard dl {display:inline-block;margin:10px 15px 0 0;vertical-align:middle} #mTabBoard dl:last-child {margin:10px 0 0} #mTabBoard dl dt {display:inline-block} #mTabBoard dl dt a {display:block;line-height:1;box-sizing:border-box;position:relative;transition:all .3s ease} #mTabBoard dl dt a:before, #mTabBoard dl dt a:after {content:"";display:block;position:absolute;width:10px;height:2px;background:#1472b6;top:0;right:0;bottom:0;left:0;margin:auto 0 auto auto;opacity:0;transition:all .3s ease} #mTabBoard dl dt a:after {transform:rotate(90deg)} #mTabBoard dl dt a span {display:block;font-size:17px;font-weight:500;letter-spacing:-.05em;color:#777;box-sizing:border-box;position:relative;padding:0 0 5px;transition:all .3s ease} #mTabBoard dl dt a span:after {content:"";display:block;position:absolute;width:0;height:1px;background:#aaa;left:0;bottom:0;transition:all .3s ease} #mTabBoard dl dt a:focus span, #mTabBoard dl dt a:hover span {color:#1472b6} #mTabBoard dl dt a:focus span:after, #mTabBoard dl dt a:hover span:after {width:100%} #mTabBoard dl dd {display:none} #mTabBoard ul {display:block} #mTabBoard ul li {display:block;margin:0 0 10px} #mTabBoard ul li:last-child {margin:0} #mTabBoard ul li a {display:block;position:relative;box-sizing:border-box;padding:0 100px 0 10px} #mTabBoard ul li a:before {content:"";display:block;position:absolute;width:3px;height:3px;border-radius:50%;background:#777;left:0;top:11px;transition:all .3s ease} #mTabBoard ul li a .sTit {display:block;font-size:17px;font-weight:500;color:#222;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;padding:3px 0;transition:all .3s ease} #mTabBoard ul li a .sTit .newMark {display:inline-block;width:17px;height:17px;line-height:12px;border-radius:50%;background:#1472b6;vertical-align:top;text-align:center;position:relative;top:1px} #mTabBoard ul li a .sTit .newMark:before {content:"N";display:inline-block;color:#fff;font-size:10px;line-height:1} #mTabBoard ul li a .sDate {display:block;position:absolute;right:0;top:4px;font-size:16px;letter-spacing:0;color:#777} #mTabBoard ul li a:focus .sTit, #mTabBoard ul li a:hover .sTit {color:#1472b6;text-decoration:underline} #mTabBoard ul li a:focus:before, #mTabBoard ul li a:hover:before {background:#1472b6} #mTabBoard dl.isOn dt a {padding:0 15px 0 0} #mTabBoard dl.isOn dt a span {color:#1472b6} #mTabBoard dl.isOn dt a span:after, #mTabBoard dl.isOn dt a span:after {width:100%;background:#1472b6} #mTabBoard dl.isOn dt a:before {opacity:1;transform:rotate(90deg)} #mTabBoard dl.isOn dt a:after {opacity:1;transform:rotate(180deg)} #mTabBoard dl.isOn dd {display:block;position:absolute;width:100%;left:0;top:51px} #mTabBoard .dataMore {display:block;position:absolute;right:0;top:-49px;width:30px;height:30px;border:1px solid #ddd;transition:all .3s ease} #mTabBoard .dataMore:focus, #mTabBoard .dataMore:hover {border:1px solid #1472b6;background:#1472b6} #mTabBoard .dataMore:before, #mTabBoard .dataMore:after {content:"";display:block;position:absolute;width:14px;height:2px;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #mTabBoard .dataMore:before {} #mTabBoard .dataMore:after {transform:rotate(90deg)} #mTabBoard .dataMore:focus:before, #mTabBoard .dataMore:hover:before {background:#fff;transform:rotate(90deg)} #mTabBoard .dataMore:focus:after, #mTabBoard .dataMore:hover:after {background:#fff;transform:rotate(180deg)} @media all and (max-width:1099px) { #mTabBoard .dataTit span {font-size:20px} #mTabBoard dl.isOn dd {top:46px} } @media all and (max-width:999px) { #mTabBoard .dataTit {margin:0 5px 0 0} #mTabBoard dl {margin:10px 5px 0 0} #mTabBoard dl dt a span {font-size:15px} #mTabBoard ul li a {padding:0 80px 0 10px} #mTabBoard ul li a .sTit {letter-spacing:-.05em} #mTabBoard ul li a .sDate {font-size:14px} #mTabBoard .dataMore {top:-51px} } @media all and (max-width:799px) { #mTabBoard ul li a .sTit {font-size:15px} } @media all and (max-width:599px) { #mTabBoard .dataTit span {font-size:18px} } /** -- mTabGallery */ #mTabGallery {position:relative;height:330px} #mTabGallery .dataTit {display:inline-block;margin:0 15px 0 0} #mTabGallery .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mTabGallery dl {display:inline-block;margin:10px 15px 0 0;vertical-align:middle} #mTabGallery dl:last-child {margin:10px 0 0} #mTabGallery dl dt {display:inline-block} #mTabGallery dl dt a {display:block;line-height:1;box-sizing:border-box;position:relative;transition:all .3s ease} #mTabGallery dl dt a:before, #mTabGallery dl dt a:after {content:"";display:block;position:absolute;width:10px;height:2px;background:#1472b6;top:0;right:0;bottom:0;left:0;margin:auto 0 auto auto;opacity:0;transition:all .3s ease} #mTabGallery dl dt a:after {transform:rotate(90deg)} #mTabGallery dl dt a span {display:block;font-size:17px;font-weight:500;letter-spacing:-.05em;color:#777;box-sizing:border-box;position:relative;padding:0 0 5px;transition:all .3s ease} #mTabGallery dl dt a span:after {content:"";display:block;position:absolute;width:0;height:1px;background:#aaa;left:0;bottom:0;transition:all .3s ease} #mTabGallery dl dt a:focus span, #mTabGallery dl dt a:hover span {color:#1472b6} #mTabGallery dl dt a:focus span:after, #mTabGallery dl dt a:hover span:after {width:100%} #mTabGallery dl dd {display:none} #mTabGallery ul {display:flex;flex-flow:row;flex-wrap:wrap} #mTabGallery ul li {display:inline-block;width:32%;margin:0 2% 0 0} #mTabGallery ul li:last-child {margin:0} #mTabGallery ul li a {display:block} #mTabGallery ul li a > * {display:block;position:relative;box-sizing:border-box;overflow:hidden;word-break:break-all;letter-spacing:-.05em} #mTabGallery ul li a > *:before {content:"";display:block;position:absolute;width:70px;right:0;bottom:0;background:linear-gradient(to right, rgba(255, 255, 255, 0), #fff 100%)} #mTabGallery ul li a .sImg {} #mTabGallery ul li a .sImg:before {display:none} #mTabGallery ul li a .sImg .imgContainer {display:block;height:0;box-sizing:border-box;position:relative;padding:0 0 56.25%;overflow:hidden} #mTabGallery ul li a .sImg .imgContainer img {display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:all .3s ease} #mTabGallery ul li a .sTit {font-size:18px;color:#000;font-weight:500;height:43px;margin:10px 0 0;line-height:1.2} #mTabGallery ul li a .sTit:before {height:50%} #mTabGallery ul li a .sTxt {font-size:15px;color:#777;font-weight:300;height:59px;margin:5px 0 0;line-height:1.3} #mTabGallery ul li a .sTxt:before {height:33.3333%} #mTabGallery ul li a .sDate {font-size:14px;color:#777;margin:15px 0 0} #mTabGallery ul li a .sDate:before {display:none} #mTabGallery ul li a:focus .sImg .imgContainer img, #mTabGallery ul li a:hover .sImg .imgContainer img {transform:scale(1.1) rotate(2deg)} #mTabGallery dl.isOn dt a {padding:0 15px 0 0} #mTabGallery dl.isOn dt a span {color:#1472b6} #mTabGallery dl.isOn dt a span:after, #mTabGallery dl.isOn dt a span:after {width:100%;background:#1472b6} #mTabGallery dl.isOn dt a:before {opacity:1;transform:rotate(90deg)} #mTabGallery dl.isOn dt a:after {opacity:1;transform:rotate(180deg)} #mTabGallery dl.isOn dd {display:block;position:absolute;width:100%;left:0;top:51px} #mTabGallery .dataMore {display:block;position:absolute;right:0;top:-49px;width:30px;height:30px;border:1px solid #ddd;transition:all .3s ease} #mTabGallery .dataMore:focus, #mTabGallery .dataMore:hover {border:1px solid #1472b6;background:#1472b6} #mTabGallery .dataMore:before, #mTabGallery .dataMore:after {content:"";display:block;position:absolute;width:14px;height:2px;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #mTabGallery .dataMore:before {} #mTabGallery .dataMore:after {transform:rotate(90deg)} #mTabGallery .dataMore:focus:before, #mTabGallery .dataMore:hover:before {background:#fff;transform:rotate(90deg)} #mTabGallery .dataMore:focus:after, #mTabGallery .dataMore:hover:after {background:#fff;transform:rotate(180deg)} @media all and (max-width:1099px) { #mTabGallery .dataTit span {font-size:20px} #mTabGallery ul li a .sTit {font-size:16px;height:38px} #mTabGallery ul li a .sTxt {height:39px} #mTabGallery ul li a .sTxt:before {height:50%} } @media all and (max-width:999px) { #mTabGallery .dataTit {margin:0 5px 0 0} #mTabGallery dl {margin:10px 5px 0 0} #mTabGallery dl dt a span {font-size:15px} #mTabGallery .dataLst a {} #mTabGallery .dataLst a .sTit {letter-spacing:-.05em} #mTabGallery .dataLst a .sDate {font-size:14px} #mTabGallery .dataMore {top:-51px} } @media all and (max-width:899px) { #mTabGallery {height:410px} #mTabGallery ul {display:block} #mTabGallery ul li {display:block;width:auto;margin:0 0 10px 0} #mTabGallery ul li a {box-sizing:border-box;position:relative;padding:0 0 0 175px;min-height:90px} #mTabGallery ul li a .sImg {position:absolute;width:160px;left:0;top:0} #mTabGallery ul li a .sTit {margin:0} #mTabGallery ul li a .sDate {margin:5px 0 0} } @media all and (max-width:799px) { #mTabGallery {height:275px} #mTabGallery .dataLst a .sTit {font-size:15px} #mTabGallery ul li a {padding:0 0 0 135px;min-height:68px} #mTabGallery ul li a .sImg {width:120px} #mTabGallery ul li a .sTxt {display:none} } @media all and (max-width:599px) { #mTabGallery .dataTit span {font-size:18px} } @media all and (max-width:499px) { #mTabGallery ul li a .sTit {font-size:15px;height:36px;} } @media all and (max-width:399px) { #mTabGallery ul li a {padding:0 0 0 105px;min-height:56px} #mTabGallery ul li a .sImg {width:100px} } /** -- mTabVideo */ #mTabVideo {position:relative;height:330px} #mTabVideo .dataTit {display:inline-block;margin:0 15px 0 0} #mTabVideo .dataTit span {display:inline-block;border-bottom:2px solid #1472b6;line-height:1.2;padding:0 0 5px;color:#1472b6;font-size:24px;font-weight:500;letter-spacing:-.05em} #mTabVideo dl {display:inline-block;margin:10px 15px 0 0;vertical-align:middle} #mTabVideo dl:last-child {margin:10px 0 0} #mTabVideo dl dt {display:inline-block} #mTabVideo dl dt a {display:block;line-height:1;box-sizing:border-box;position:relative;transition:all .3s ease} #mTabVideo dl dt a:before, #mTabVideo dl dt a:after {content:"";display:block;position:absolute;width:10px;height:2px;background:#1472b6;top:0;right:0;bottom:0;left:0;margin:auto 0 auto auto;opacity:0;transition:all .3s ease} #mTabVideo dl dt a:after {transform:rotate(90deg)} #mTabVideo dl dt a span {display:block;font-size:17px;font-weight:500;letter-spacing:-.05em;color:#777;box-sizing:border-box;position:relative;padding:0 0 5px;transition:all .3s ease} #mTabVideo dl dt a span:after {content:"";display:block;position:absolute;width:0;height:1px;background:#aaa;left:0;bottom:0;transition:all .3s ease} #mTabVideo dl dt a:focus span, #mTabVideo dl dt a:hover span {color:#1472b6} #mTabVideo dl dt a:focus span:after, #mTabVideo dl dt a:hover span:after {width:100%} #mTabVideo dl dd {display:none} #mTabVideo ul {display:flex;flex-flow:row;flex-wrap:wrap} #mTabVideo ul li {display:inline-block;width:32%;margin:0 2% 0 0} #mTabVideo ul li:last-child {margin:0} #mTabVideo ul li a {display:block} #mTabVideo ul li a > * {display:block;position:relative;box-sizing:border-box;overflow:hidden;word-break:break-all;letter-spacing:-.05em} #mTabVideo ul li a > *:before {content:"";display:block;position:absolute;width:70px;right:0;bottom:0;background:linear-gradient(to right, rgba(255, 255, 255, 0), #fff 100%)} #mTabVideo ul li a .sImg {} #mTabVideo ul li a .sImg:before {display:none} #mTabVideo ul li a .sImg .imgContainer {display:block;height:0;box-sizing:border-box;position:relative;padding:0 0 56.25%;overflow:hidden} #mTabVideo ul li a .sImg .imgContainer img {display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:all .3s ease} #mTabVideo ul li a .sTit {font-size:18px;color:#000;font-weight:500;height:43px;margin:10px 0 0;line-height:1.2} #mTabVideo ul li a .sTit:before {height:50%} #mTabVideo ul li a .sTxt {font-size:15px;color:#777;font-weight:300;height:59px;margin:5px 0 0;line-height:1.3} #mTabVideo ul li a .sTxt:before {height:33.3333%} #mTabVideo ul li a .sDate {font-size:14px;color:#777;margin:15px 0 0} #mTabVideo ul li a .sDate:before {display:none} #mTabVideo ul li a:focus .sImg .imgContainer img, #mTabVideo ul li a:hover .sImg .imgContainer img {transform:scale(1.1) rotate(2deg)} #mTabVideo dl.isOn dt a {padding:0 15px 0 0} #mTabVideo dl.isOn dt a span {color:#1472b6} #mTabVideo dl.isOn dt a span:after, #mTabVideo dl.isOn dt a span:after {width:100%;background:#1472b6} #mTabVideo dl.isOn dt a:before {opacity:1;transform:rotate(90deg)} #mTabVideo dl.isOn dt a:after {opacity:1;transform:rotate(180deg)} #mTabVideo dl.isOn dd {display:block;position:absolute;width:100%;left:0;top:51px} #mTabVideo .dataMore {display:block;position:absolute;right:0;top:-49px;width:30px;height:30px;border:1px solid #ddd;transition:all .3s ease} #mTabVideo .dataMore:focus, #mTabVideo .dataMore:hover {border:1px solid #1472b6;background:#1472b6} #mTabVideo .dataMore:before, #mTabVideo .dataMore:after {content:"";display:block;position:absolute;width:14px;height:2px;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #mTabVideo .dataMore:before {} #mTabVideo .dataMore:after {transform:rotate(90deg)} #mTabVideo .dataMore:focus:before, #mTabVideo .dataMore:hover:before {background:#fff;transform:rotate(90deg)} #mTabVideo .dataMore:focus:after, #mTabVideo .dataMore:hover:after {background:#fff;transform:rotate(180deg)} @media all and (max-width:1099px) { #mTabVideo .dataTit span {font-size:20px} #mTabVideo ul li a .sTit {font-size:16px;height:38px} #mTabVideo ul li a .sTxt {height:39px} #mTabVideo ul li a .sTxt:before {height:50%} } @media all and (max-width:999px) { #mTabVideo .dataTit {margin:0 5px 0 0} #mTabVideo dl {margin:10px 5px 0 0} #mTabVideo dl dt a span {font-size:15px} #mTabVideo .dataLst a {} #mTabVideo .dataLst a .sTit {letter-spacing:-.05em} #mTabVideo .dataLst a .sDate {font-size:14px} #mTabVideo .dataMore {top:-51px} } @media all and (max-width:899px) { #mTabVideo {height:410px} #mTabVideo ul {display:block} #mTabVideo ul li {display:block;width:auto;margin:0 0 10px 0} #mTabVideo ul li a {box-sizing:border-box;position:relative;padding:0 0 0 175px;min-height:90px} #mTabVideo ul li a .sImg {position:absolute;width:160px;left:0;top:0} #mTabVideo ul li a .sTit {margin:0} #mTabVideo ul li a .sDate {margin:5px 0 0} } @media all and (max-width:799px) { #mTabVideo {height:275px} #mTabVideo .dataLst a .sTit {font-size:15px} #mTabVideo ul li a {padding:0 0 0 135px;min-height:68px} #mTabVideo ul li a .sImg {width:120px} #mTabVideo ul li a .sTxt {display:none} } @media all and (max-width:599px) { #mTabVideo .dataTit span {font-size:18px} } @media all and (max-width:499px) { #mTabVideo ul li a .sTit {font-size:15px;height:36px;} } @media all and (max-width:399px) { #mTabVideo ul li a {padding:0 0 0 105px;min-height:56px} #mTabVideo ul li a .sImg {width:100px} } /* ============================== * 공통 ================================= */ #mcontainer{--m-color-primary:#10999F;--m-color-blue:#3074CE;--m-color-red:#D63D3D;--m-color-txt:#222;--m-color-txt-sub:#666;--m-color-border:#B2B8B8;} #mcontainer .mSec {position:relative} #mcontainer .mSec__in {max-width:1600px;margin:0 auto;box-sizing:border-box;} #mcontainer .mSecTit {margin:0;font-size:42px;font-weight:700;line-height:42px;letter-spacing:-2%;color:var(--m-color-txt);} #mcontainer .mSecTit--white{color:#fff;} #mcontainer .mSecTit-hilight {color:var(--m-color-primary)} #mcontainer .mSecTit-hilight--red{color:#FF7070} #mcontainer .mSec__head {display:flex;flex-flow:row wrap} #mcontainer .mSec__body {position:relative} @media screen and (max-width:1640px){ #mcontainer .mSec__in {padding:0 24px} } @media all and (max-width:768px) { #mcontainer .mSec__in {padding:0 16px} #mcontainer .mSecTit {font-size:26px} } /* ============================== * 입시 공지사항 ================================= */ #mIpsiNotice.mSec-notice {padding:115px 0 76px;background-image:url(/resources/_Img/Templet/Main/notice_bg.png);background-repeat:no-repeat;background-position:right top;background-size:auto 100%;overflow:hidden} #mIpsiNotice .mSec__head {align-items:baseline;gap:8px 16px;margin:0 0 24px} #mIpsiNotice .mIpsiNotice__desc {margin:0;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.03em;color:var(--m-color-txt-sub)} #mIpsiNotice .mIpsiNotice__ctrl {display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px} #mIpsiNotice .mFilterLst {display:flex;flex-flow:row wrap;align-items:center;gap:5px} #mIpsiNotice .mFilterBtn {display:inline-flex;flex-flow:row;align-items:center;justify-content:center;gap:10px;line-height: inherit;box-sizing:border-box;min-width:64px;padding:10px 20px;height:42px;border:1px solid var(--m-color-border);border-radius:999px;;background:#fff;font-size:18px;font-weight:400;line-height:1;letter-spacing:-.03em;color:#445555;transition:all .3s ease;cursor:pointer} #mIpsiNotice .mFilterBtn.isOn {border-color:var(--m-color-primary);background:var(--m-color-primary);color:#fff; box-shadow: 5px 5px 10px 0px #CDDDDE;} #mIpsiNotice .mFilterBtn.isOn:before {content:"";display:inline-block;width:18px;height:18px;flex-shrink:0;background:url(/resources/_Img/Templet/Common/chk.svg) no-repeat center / contain; background-size: 16px 8px; background-color: #fff; border-radius: 50%;} #mIpsiNotice .mPager {display:flex;flex-flow:row;align-items:center;gap:12px;flex-shrink:0; margin-right:27%} #mIpsiNotice .mPager-nums {display:flex;flex-flow:row;align-items:center;gap:12px;font-size:16px;font-weight:500;line-height:1;letter-spacing:0;color:var(--m-color-txt);white-space:nowrap} #mIpsiNotice .mPager-auto {display:inline-flex;flex-flow:row;align-items:center;line-height:1;font-size:0} #mIpsiNotice .mPager-auto button {display:block;position:relative;width:24px;height:24px;box-sizing:border-box;border:0;padding:0;background:transparent;cursor:pointer} #mIpsiNotice .mPager-auto .btn-stop:before {content:"";display:block;position:absolute;width:8px;height:15px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_pause.svg) no-repeat center / contain} #mIpsiNotice .mPager-auto .btn-play {display:none} #mIpsiNotice .mPager-auto .btn-play:after {content:"";display:block;position:absolute;width:0;height:0;top:0;right:0;bottom:0;left:0;margin:auto;border:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent #A0B1C0} #mIpsiNotice .mPager-btn {display:block;position:relative;width:36px;height:36px;box-sizing:border-box;border:0;border-radius:50%;background:transparent;padding:0;transition:all .3s ease;cursor:pointer} #mIpsiNotice .mPager-btn:before {content:"";display:block;position:absolute;width:9px;height:13px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_prev.svg) no-repeat center / contain} #mIpsiNotice .mPager-next:before {transform:rotate(180deg)} #mIpsiNotice .mPager-btn.isFill {background:#EBF5F5} #mIpsiNotice .mMore {display:block;position:relative;width:36px;height:36px;box-sizing:border-box;border:0;border-radius:50%;background:var(--m-color-primary) url(/resources/_Img/Templet/Common/icon_more.svg) no-repeat center / 15px auto;transition:all .3s ease} #mIpsiNotice .mIpsiNoticeLst {display:block} #mIpsiNotice .mIpsiNoticeItem {display:block;box-sizing:border-box} #mIpsiNotice .mIpsiNoticeLink {display:block;box-sizing:border-box;padding:43px 39px 53px;border-radius:16px;background:#F9F9FB;transition:all .3s ease} #mIpsiNotice .mIpsiNoticeMeta {display:flex;flex-flow:row;align-items:center;justify-content:space-between;gap:8px;margin:0 0 21px;flex-shrink:0} #mIpsiNotice .mBadge {display:inline-block;box-sizing:border-box;min-width:48px;padding:6px 18px;border-radius:999px;;font-size:16px;font-weight:600;line-height:1;letter-spacing:-.03em;color:#fff;text-align:center;white-space:nowrap;height: 31px;} #mIpsiNotice .mBadge-teal {background:var(--m-color-primary)} #mIpsiNotice .mBadge-blue {background:var(--m-color-blue)} #mIpsiNotice .mIpsiNoticeDate {font-size:15px;font-weight:400;line-height:1;color:var(--m-color-txt-sub);white-space:nowrap} #mIpsiNotice .mIpsiNoticeTit {display:block;display:-webkit-box;margin:0 0 29px;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.04em;color:var(--m-color-txt);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:calc(1.4em * 2)} #mIpsiNotice .mIpsiNoticeTxt {display:block;display:-webkit-box;margin:0;font-family:'pretendard',sans-serif;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:-.03em;color:var(--m-color-txt-sub);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:calc(1.5em * 2)} #mIpsiNotice .mIpsiNoticeLink:focus .mIpsiNoticeTit, #mIpsiNotice .mIpsiNoticeLink:hover .mIpsiNoticeTit {color:var(--m-color-primary);text-decoration:underline} @media all and (min-width:769px) { #mIpsiNotice .mIpsiNoticeLst.owl-carousel .owl-stage {display:flex;align-items:stretch} #mIpsiNotice .mIpsiNoticeLst.owl-carousel .owl-item {display:flex;float:none;height:auto;align-items:stretch} #mIpsiNotice .mIpsiNoticeItem {display:flex;flex:1;width:100%;height:100%} #mIpsiNotice .mIpsiNoticeLink {display:flex;flex-flow:column;flex:1;width:100%;height:100%} #mIpsiNotice .mIpsiNoticeTit {flex-shrink:0} #mIpsiNotice .mIpsiNoticeTxt {flex:1;margin-top:auto} } @media all and (max-width:1299px) { #mIpsiNotice .mPager {margin-right:0} } @media all and (max-width:999px) { #mIpsiNotice.mSec-notice {padding:72px 0 56px;background: #fff; background-image: none;} #mIpsiNotice .mIpsiNotice__desc {font-size:15px} #mIpsiNotice .mIpsiNotice__ctrl {flex-direction:column;align-items:stretch;gap:12px} #mIpsiNotice .mFilterLst {width:100%} #mIpsiNotice .mPager {width:100%;justify-content:flex-end} #mIpsiNotice .mFilterBtn {min-width:56px;padding:9px 16px;height:38px;font-size:16px} #mIpsiNotice .mIpsiNoticeLink {padding:23px 39px 27px} #mIpsiNotice .mIpsiNoticeTit {margin:0 0 20px;font-size:17px} } @media all and (max-width:768px) { #mIpsiNotice.mSec-notice {padding:40px 0 32px;background-image:none} #mIpsiNotice .mIpsiNotice__in {position:relative} #mIpsiNotice .mSec__head {flex-direction:row;align-items:center;justify-content:flex-start;min-height:32px;padding-right:148px;gap:0;margin:0 0 16px; } #mIpsiNotice .mSecTit {text-align:left} #mIpsiNotice .mIpsiNotice__desc {display:none} #mIpsiNotice .mIpsiNotice__ctrl {gap:10px;margin:0 0 16px} #mIpsiNotice .mFilterLst {gap:4px;width:100%} #mIpsiNotice .mFilterBtn {min-width:0;padding:6px 18px;height:31px;font-size:16px;gap:10px} #mIpsiNotice .mFilterBtn.isOn:before {width:14px;height:14px;background-size:10px 5px} #mIpsiNotice .mPager {position:absolute;top:0;right:16px;width:auto;margin-right:0;justify-content:flex-end;gap:8px} #mIpsiNotice .mPager-btn, #mIpsiNotice .mMore {width:32px;height:32px} #mIpsiNotice .mPager-btn:before {width:8px;height:12px} #mIpsiNotice .mMore {background-size:13px auto} #mIpsiNotice .mPager-auto button {width:20px;height:20px} #mIpsiNotice .mPager-auto .btn-stop:before {width:7px;height:13px} #mIpsiNotice .mIpsiNoticeMeta {margin:0 0 12px} #mIpsiNotice .mBadge {min-width:28px;padding:3px 12px;height:auto;font-size:16px; font-weight: 400;} #mIpsiNotice .mIpsiNoticeDate {font-size:15px} #mIpsiNotice .mIpsiNoticeTit {margin:0;font-size:17px;font-weight:500;line-height:1.45;-webkit-line-clamp:2} #mIpsiNotice .mIpsiNoticeTxt {display:none} #mIpsiNotice .mIpsiNoticeLst.isMobile .mIpsiNoticePage {display:flex;flex-flow:column;gap:10px;height:100%;box-sizing:border-box} #mIpsiNotice .mIpsiNoticeLst.isMobile .mIpsiNoticeItem {height:auto} #mIpsiNotice .mIpsiNoticeLst.isMobile .mIpsiNoticeLink {padding:20px} } /* ============================== * 입시지원 절차 ================================= */ #mIpsiProc.mSec-proc {--m-color-red-bg:#FDF8F8;padding:0;background:#fff;} #mIpsiProc.mSec-proc::before {content:"";display:block;position:absolute;top:42px;left:68px;width:calc(100% - 68px);height:calc(100% - 42px);background:var(--m-color-red-bg);border-radius:50px 0 0 150px; ; z-index: 0;} #mIpsiProc .mIpsiProc__in {padding-top:126px;padding-bottom:80px} #mIpsiProc .mSec__head {align-items:center;justify-content:space-between;gap:16px;margin:0 0 40px;position:relative;z-index:2} #mIpsiProc .mTabLst {display:flex;flex-flow:row wrap;align-items:center;gap:7px;padding:0 0 10px} #mIpsiProc .mTabBtn {display:inline-flex;flex-flow:row;align-items:center;justify-content:center;gap:10px;position:relative;box-sizing:border-box;padding:10px 20px;height:42px;border-radius:999px;background:#947272;font-size:18px;font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff;cursor:pointer;border:none;} #mIpsiProc .mTabBtn.isOn {background:var(--m-color-red);color:#fff;font-weight:500;box-shadow:5px 5px 10px 0 rgba(214,61,61,.2)} #mIpsiProc .mTabBtn.isOn:before {content:"";position:absolute;left:50%;bottom:-6px;width:0;height:0;border-style:solid;border-width:7px 6px 0 6px;border-color:var(--m-color-red) transparent transparent transparent;transform:translateX(-50%)} #mIpsiProc .mTabBtn.isOn:after {content:"";display:inline-block;width:18px;height:18px;flex-shrink:0;background:url(/resources/_Img/Templet/Common/chk_red.svg) no-repeat center / 10px 7px;background-color:#fff;border-radius:50%} #mIpsiProc .mIpsiProcPanel {display:none} #mIpsiProc .mIpsiProcPanel.isOn {display:block} #mIpsiProc .mIpsiProcLst {display:flex;flex-flow:row;align-items:stretch;justify-content:space-between;gap:45px; } #mIpsiProc .mIpsiProcItem {display:flex;flex-flow:column;flex:1;min-width:0;box-sizing:border-box;} #mIpsiProc .mIpsiProcInfo {display:flex;flex-flow:column;flex:1;width:100%;min-width:0} #mIpsiProc .mIpsiProcCard {display:flex;flex-flow:column;flex:1;width:100%;height:100%} #mIpsiProc .mIpsiProcArr {display:flex;flex-flow:row;align-items:center;flex-shrink:0;align-self:center;width:32px;min-width:32px;height:32px;border-radius:50%;background-color:#D3BDBD;position:absolute;top:50%;transform:translateY(-50%);right:-38px;z-index:2} #mIpsiProc .mIpsiProcArr:before {content:"";display:block;width:8px;height:13px;margin:0 auto;background:url(/resources/_Img/Templet/Common/icon_next.svg) no-repeat center / contain;} #mIpsiProc .mIpsiProcImg {position:relative;margin:0 0 16px;border-radius:12px;overflow:visible;aspect-ratio:22/15;box-shadow:5px 5px 20px 0px #00000040} #mIpsiProc .mIpsiProcImg img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:12px} #mIpsiProc .mIpsiProcItem.isOn .mIpsiProcImg{border:3px solid #E23B3B} #mIpsiProc .mIpsiProcStep {display:inline-block;position:absolute;left:50%;bottom:0;transform:translateX(-50%);box-sizing:border-box;padding:3px 15px;border-radius:6px 6px 0 0;background:var(--m-color-red);font-size:15px;font-weight:600;line-height:1;letter-spacing:0;color:#fff;white-space:nowrap} #mIpsiProc .mIpsiProcTit {display:block;margin:0 0 8px;font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.04em;color:var(--m-color-txt);text-align:center} #mIpsiProc .mIpsiProcTxt {margin:0;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:-.03em;color:var(--m-color-txt-sub);text-align:center;word-break:keep-all} #mIpsiProc .mIpsiDotList {margin:0;padding:0;list-style:none;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:-.03em;color:var(--m-color-txt-sub);text-align:left;word-break:keep-all;} #mIpsiProc .mIpsiDotList li {margin:0; padding-left:10px;} #mIpsiProc .mIpsiDotList li:before {content:"· "; margin-left:-10px;} #mIpsiProc .mIpsiProcTxt, #mIpsiProc .mIpsiDotList {flex:1;min-height:calc(1.5em * 2)} @media all and (max-width:1299px) { #mIpsiProc .mIpsiProc__in {padding-top:40px;padding-bottom:56px} #mIpsiProc .mIpsiProcLst {flex-flow:column;align-items:stretch;justify-content:flex-start;gap:16px} #mIpsiProc .mIpsiProcItem {flex:none} #mIpsiProc .mIpsiProcArr {display:none} #mIpsiProc .mIpsiProcTit {font-size:20px} #mIpsiProc .mIpsiProcTxt, #mIpsiProc .mIpsiDotList {font-size:16px} } @media all and (max-width:999px) { #mIpsiProc.mSec-proc {padding:48px 0} #mIpsiProc .mIpsiProc__in {border-radius:16px} #mIpsiProc .mSec__head {margin:0 0 24px} #mIpsiProc .mTabBtn {min-width:0;padding:8px 18px;height:38px;font-size:16px} #mIpsiProc .mSec__body {margin:0} #mIpsiProc .mIpsiProcLst {gap:12px;padding:0;overflow-x:visible} #mIpsiProc .mIpsiProcImg {margin:0 0 12px} #mIpsiProc .mIpsiProcStep {padding:5px 12px;font-size:13px} #mIpsiProc .mIpsiProcTit {margin:0 0 8px;} } @media all and (max-width:768px) { #mIpsiProc.mSec-proc {padding:0} #mIpsiProc.mSec-proc::before {top:0;left:0;width:100%;height:100%;margin-top:0;border-radius:30px 0 0 70px} #mIpsiProc .mIpsiProc__in {position:relative;z-index:2;} #mIpsiProc .mSec__head {flex-direction:column;align-items:center;gap:16px;text-align:center} #mIpsiProc .mIpsiProc__tit {text-align:center} #mIpsiProc .mTabLst {width:100%;gap:6px;justify-content:center;padding:0} #mIpsiProc .mTabBtn {padding:6px 14px;height:31px;gap:6px} #mIpsiProc .mTabBtn.isOn:before {bottom:-6px;border-width:6px 5px 0 5px} #mIpsiProc .mTabBtn.isOn:after {width:14px;height:14px;background-size:8px 6px} #mIpsiProc .mSec__body {margin:0;z-index:2} /* #mIpsiProc .mIpsiProcPanel.isOn {border-radius:16px;padding:16px;box-sizing:border-box} */ #mIpsiProc .mIpsiProcLst {flex-flow:column;gap:12px;overflow-x:visible;padding:0} #mIpsiProc .mIpsiProcItem {flex:none;flex-flow:row;align-items:flex-start;gap:12px;width:100%} #mIpsiProc .mIpsiProcImg {flex:0 0 100px;width:100px;margin:0;aspect-ratio:auto;} #mIpsiProc .mIpsiProcImg img {width:100px;height:72px;aspect-ratio:auto;object-fit:cover;border-radius:12px} #mIpsiProc .mIpsiProcArr {display:none} #mIpsiProc .mIpsiProcStep {left:6px;top:6px;bottom:auto;transform:none;width:22px;height:22px;padding:0;border-radius:50%;font-size:0;display:flex;align-items:center;justify-content:center} #mIpsiProc .mIpsiProcStep:before {content:attr(data-step);font-size:12px;font-weight:600;line-height:1;color:#fff} #mIpsiProc .mIpsiProcInfo {flex:1;min-width:0;text-align:left} #mIpsiProc .mIpsiProcTit {margin:0 0 6px;font-weight:600;text-align:left;line-height:1.4} #mIpsiProc .mIpsiProcTxt, #mIpsiProc .mIpsiDotList {text-align:left;min-height:0;line-height:1.5} } /* ============================== * 팝업존 · 유튜브 ================================= */ #mIpsiMedia {--m-color-media-bg:#0B675F;padding:72px 0 180px;background:var(--m-color-media-bg); border-top-left-radius: 150px;} #mIpsiMedia .mIpsiMedia__in {display:flex;flex-flow:row wrap;align-items:flex-start;gap:40px} #mIpsiPopup.mSec-popup {flex:0 0 calc(47% - 116px);width:calc(47% - 116px);min-width:0;box-sizing:border-box;position:relative;z-index:1} #mIpsiPopup .mSec__head {margin:0 0 20px} #mIpsiPopup .mSec__body {overflow:visible} #mIpsiPopup .mIpsiPopup__wrap {display:flex;flex-flow:row;align-items:stretch;box-sizing:border-box;padding:22px 0 0 14px;border-radius:15px 15px 50px 50px;background:rgba(0,0,0,.22);overflow:visible; margin-top:47px;} #mIpsiPopup .mIpsiPopup__ctrl {display:flex;flex-flow:column;align-items:center;justify-content:flex-start;flex:0 0 44px;gap:10px} #mIpsiPopup .mIpsiPopupPager {display:flex;flex-flow:column;align-items:center;gap:8px} #mIpsiPopup .mIpsiPopupPager-btn {display:block;position:relative;box-sizing:border-box;width:43px;height:43px;padding:0;border-radius:50%;background:transparent;cursor:pointer; background: #000000B2; border:none;} #mIpsiPopup .mIpsiPopupPager-btn:disabled {opacity:.35;cursor:default} #mIpsiPopup .mIpsiPopupPager-btn:before {content:"";display:block;position:absolute;width:9px;height:13px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_prev.svg) no-repeat center / contain;} #mIpsiPopup .mIpsiPopupPager-next:before {transform:rotate(180deg)} #mIpsiPopup .mIpsiPopupPager-auto {display:flex;flex-flow:column;align-items:center;line-height:1;font-size:0} #mIpsiPopup .mIpsiPopupPager-auto button {display:block;position:relative;width:32px;height:32px;box-sizing:border-box;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer} #mIpsiPopup .mIpsiPopupPager-auto .btn-stop:before {content:"";display:block;position:absolute;width:8px;height:14px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_pause.svg) no-repeat center / contain;} #mIpsiPopup .mIpsiPopupPager-auto .btn-play {display:none} #mIpsiPopup .mIpsiPopupPager-auto .btn-play:after {content:"";display:block;position:absolute;width:0;height:0;top:0;right:0;bottom:0;left:0;margin:auto;border:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent #fff} #mIpsiPopup .mIpsiPopupPager-bar {position:relative;flex:1;width:3px;min-height:46px;background:#D9D9D9} #mIpsiPopup .mIpsiPopupPager-fill {display:block;position:absolute;left:0;bottom:0;width:100%;height:0;border-radius:2px;background:#FFB650;transition:height .35s ease} #mIpsiPopup .mIpsiPopupPager-nums {font-size:18px;font-weight:400;line-height:1;letter-spacing:0;color:#fff;white-space:nowrap;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px; margin-top:10px;} #mIpsiPopup .mIpsiPopup__panel {flex:1;min-width:0;overflow:visible; margin-left:-20px; margin-bottom:-14px;} #mIpsiPopup .mIpsiPopupLst {display:block;width:100%; transform: translate(34px,-47px);} #mIpsiPopup .mIpsiPopupLst.owl-carousel .owl-stage-outer {overflow:hidden;box-sizing:content-box;} #mIpsiPopup .mIpsiPopupItem {display:block;box-sizing:border-box} #mIpsiPopup .mIpsiPopupLink {display:block;border-radius:15px; overflow: hidden; } #mIpsiPopup .mIpsiPopupImg {display:block;position:relative;z-index:1;overflow:hidden; max-width:none;} #mIpsiPopup .mIpsiPopupImg img {display:block;width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:4px 4px 15px 0 #0006} #mIpsiPopup .mSecTit {font-size:28px;font-weight:700;line-height:1.2;letter-spacing:.08em} #mIpsiPopup .mIpsiPopupCap {margin:26px 0 0;padding-left:9px;padding-right:18px;font-size:15px;font-weight:400;line-height:1.4;letter-spacing:-.03em;color:#fff} #mIpsiPopup .mIpsiPopupTit {display:block} /* 유튜브 */ #mIpsiYoutube{align-self: stretch;} #mIpsiYoutube.mSec-youtube {flex:1;min-width:0;box-sizing:border-box} #mIpsiYoutube{position: relative; padding-bottom:0} #mIpsiYoutube.mSec-youtube:after{content: ''; display: block; width:90%; height: calc(100% - 8px - 25px); border: 4px solid #FFFFFF4D; position: absolute; top:25px; left:115px; border-radius: 30px; z-index: 1;} #mIpsiYoutube.mSec-youtube:before{content: ''; display: block; width:85%; height: 90%; background:#0B675F ; position: absolute; left:0; top:0; z-index: 2;} #mIpsiYoutube .mIpsiYoutube__wrap {box-sizing:border-box; margin-left:82px; position: relative; z-index: 3;} #mIpsiYoutube .mSec__head {display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 18px} #mIpsiYoutube .mIpsiYoutubeIco-tit {display:inline-block;margin-right:10px;line-height:0;vertical-align:middle} #mIpsiYoutube .mIpsiYoutubeIco-tit img {display:block;transform:rotate(-20deg);filter:drop-shadow(4px 4px 15px #00000066)} #mIpsiYoutube .mIpsiYoutubeIco-tit, #mIpsiYoutube .mIpsiYoutube__ctrl {flex-shrink:0} #mIpsiYoutube .mIpsiYoutubePager {display:flex;flex-flow:row;align-items:center;gap:0;background: #043834;border-radius:999px; height: 41px; padding-inline:10px; margin-top:2px;} #mIpsiYoutube .mIpsiYoutubePager-btn {display:block;position:relative;box-sizing:border-box;width:15px;height:41px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer} #mIpsiYoutube .mIpsiYoutubePager-btn:disabled {opacity:.35;cursor:default} #mIpsiYoutube .mIpsiYoutubePager-btn:before {content:"";display:block;position:absolute;width:9px;height:13px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_prev.svg) no-repeat center / contain;} #mIpsiYoutube .mIpsiYoutubePager-next:before {transform:rotate(180deg)} #mIpsiYoutube .mIpsiYoutubePager-auto {display:flex;flex-flow:row;align-items:center;line-height:1;font-size:0;} #mIpsiYoutube .mIpsiYoutubePager-auto button {display:block;position:relative;width:32px;height:32px;box-sizing:border-box;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer} #mIpsiYoutube .mIpsiYoutubePager-auto .btn-stop:before {content:"";display:block;position:absolute;width:8px;height:14px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_pause.svg) no-repeat center / contain;} #mIpsiYoutube .mIpsiYoutubePager-auto .btn-play {display:none} #mIpsiYoutube .mIpsiYoutubePager-auto .btn-play:after {content:"";display:block;position:absolute;width:0;height:0;top:0;right:0;bottom:0;left:0;margin:auto;border:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent #fff} #mIpsiYoutube .mIpsiYoutube__tags {margin:0 0 30px;display:flex;flex-flow:row wrap;align-items:center;gap:7px} #mIpsiYoutube .mHashTagBtn {display:inline-flex;align-items:center;box-sizing:border-box;padding:10px 20px;border:0;border-radius:999px;background:#043834;font-size:15px;font-weight:400;line-height:1;letter-spacing:-.02em;color:#fff;cursor:pointer;} #mIpsiYoutube .mSec__body {position:relative} #mIpsiYoutube .mIpsiYoutubeLst {display:block} #mIpsiYoutube .mIpsiYoutubeItem {display:block;box-sizing:border-box} #mIpsiYoutube .mIpsiYoutubeLink {display:block;color:#fff;text-decoration:none; background:#0B675F ;} #mIpsiYoutube .mIpsiYoutubeImg {display:block;overflow:hidden;border-radius:12px;aspect-ratio:16/9} #mIpsiYoutube .mIpsiYoutubeImg img {display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:4px 4px 15px 0 #0006;transition:transform .35s ease} #mIpsiYoutube .mIpsiYoutubeLink:hover .mIpsiYoutubeImg img, #mIpsiYoutube .mIpsiYoutubeLink:focus .mIpsiYoutubeImg img {transform:scale(1.04)} #mIpsiYoutube .mIpsiYoutubeInfo {display:flex;flex-flow:row;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:12px} #mIpsiYoutube .mIpsiYoutubeTit {display:block;display:-webkit-box;flex:1;min-width:0;margin:0;font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.03em;color:#fff;padding-inline:12px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:keep-all} #mIpsiYoutube .mIpsiYoutubeIco {display:block;flex:0 0 35px;width:35px;height:35px;background:url(/resources/_Img/Templet/Common/icon_youtube.png) no-repeat center / contain} #mIpsiYoutube .mSecTit {font-size:28px;font-weight:700;line-height:1.35;letter-spacing:-.03em} #mIpsiYoutube .mSecTit-hilight--red {color:var(--m-color-red)} @media all and (max-width:1299px) { #mIpsiMedia {padding:54px 0 180px;border-top-left-radius:100px} #mIpsiMedia .mIpsiMedia__in {gap:28px} #mIpsiPopup.mSec-popup {flex:0 0 calc(44% - 40px);width:calc(44% - 40px)} #mIpsiPopup .mSecTit {font-size:24px} #mIpsiPopup .mIpsiPopup__wrap {margin-top:56px} #mIpsiPopup .mIpsiPopupLst {transform:translate(24px,-36px)} #mIpsiYoutube.mSec-youtube:after {left:60px;width:calc(100% - 60px)} #mIpsiYoutube .mIpsiYoutube__wrap {margin-left:48px} #mIpsiYoutube .mSecTit {font-size:24px} } @media all and (max-width:999px) { #mIpsiMedia {border-top-left-radius:70px; padding-bottom:95px;} #mIpsiMedia .mIpsiMedia__in {flex-direction:column;gap:62px} #mIpsiPopup.mSec-popup, #mIpsiYoutube.mSec-youtube {flex:none;width:100%} #mIpsiPopup .mSec__head {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} #mIpsiPopup .mIpsiPopup__wrap {margin-top:42px;padding:20px 16px 18px 12px;border-radius:15px 15px 40px 40px} #mIpsiPopup .mIpsiPopup__panel {margin-left:-12px;margin-bottom:0} #mIpsiPopup .mIpsiPopupLst {transform:translate(20px,-32px)} #mIpsiPopup .mIpsiPopupCap {margin-top:20px;padding-right:12px} #mIpsiYoutube.mSec-youtube:after, #mIpsiYoutube.mSec-youtube:before {display:none} #mIpsiYoutube .mIpsiYoutubeLst{ border: 4px solid #FFFFFF4D; border-radius: 10px; z-index: 1; padding-inline:18px; box-sizing: border-box; margin-top:64px; } #mIpsiYoutube .mIpsiYoutubeLst .owl-stage-outer{transform: translateY(-36px); margin-bottom:-15px;} #mIpsiYoutube .mIpsiYoutube__wrap {margin-left:0;padding:0 20px} #mIpsiYoutube .mSec__head {margin-bottom:14px} #mIpsiYoutube .mIpsiYoutube__tags {margin-bottom:20px} } @media all and (max-width:768px) { #mIpsiMedia .mIpsiMedia__in {padding:0 20px} /* 팝업존 */ #mIpsiPopup.mSec-popup {position:relative} #mIpsiPopup .mSec__head {margin:0 0 14px;padding-right:110px} #mIpsiPopup .mSecTit {font-size:20px;letter-spacing:.06em} #mIpsiPopup .mIpsiPopup__wrap {display:block;padding:0;overflow:visible; border-radius: 0; padding-right: 15px; background: transparent; margin-top:17px; padding-bottom:17px;} #mIpsiPopup .mIpsiPopupTit{text-align: left; padding-inline:20px;} #mIpsiPopup .mIpsiPopup__wrap:before{content:''; display: block; border-radius: 15px 15px 30px 15px; background:#043834 ; width: 100%; height: 80%; position: absolute; bottom:0;} #mIpsiPopup .mIpsiPopup__ctrl {position:absolute;top:-42px;right:0;display:flex;flex-flow:row;align-items:center;gap:0;z-index:2;height:35px;} #mIpsiPopup .mIpsiPopupPager {display:contents} #mIpsiPopup .mIpsiPopupPager-prev {order:1} #mIpsiPopup .mIpsiPopupPager-nums {display: none;} #mIpsiPopup .mIpsiPopupPager-next {order:3} #mIpsiPopup .mIpsiPopupPager-btn {width:32px;height:32px;background: #000000B2; } #mIpsiPopup .mIpsiPopupPager-btn:before {width:8px;height:12px} #mIpsiPopup .mIpsiPopupPager-auto {order:2; width:20px;} #mIpsiPopup .mIpsiPopupPager-bar {display:none} #mIpsiPopup .mIpsiPopup__panel {margin:0;width:100%} #mIpsiPopup .mIpsiPopupLst {transform:none;width:100%} #mIpsiPopup .mIpsiPopupLink {border-radius:12px} #mIpsiPopup .mIpsiPopupImg img {border-radius:12px} #mIpsiPopup .mIpsiPopupCap {margin:12px 0 0;padding:0;text-align:center;font-size:14px;line-height:1.45} /* 유튜브 */ #mIpsiYoutube.mSec-youtube {position:relative;padding-bottom:0} #mIpsiYoutube .mIpsiYoutube__wrap {margin:0;padding:0} #mIpsiYoutube .mSec__head {margin:0 0 12px;padding-right:100px} #mIpsiYoutube .mSecTit {font-size:17px;line-height:1.4} #mIpsiYoutube .mIpsiYoutubeIco-tit {margin-right:6px;width:25px; position: absolute; top:-20px;} #mIpsiYoutube .mIpsiYoutubeIco-tit img {width:22px} #mIpsiYoutube .mIpsiYoutube__ctrl {position:absolute;top:0;right:0;z-index:2} #mIpsiYoutube .mIpsiYoutubePager {height:36px;padding-inline:6px;margin-top:0} #mIpsiYoutube .mIpsiYoutubePager-btn {width:28px;height:36px} #mIpsiYoutube .mIpsiYoutubePager-btn:before {width:8px;height:12px} #mIpsiYoutube .mIpsiYoutubePager-auto button{width:15px;} #mIpsiYoutube .mIpsiYoutubePager-auto {} #mIpsiYoutube .mIpsiYoutubePager-nums .press:after {content:" / ";opacity:.8} #mIpsiYoutube .mIpsiYoutube__tags {margin:0 0 14px;gap:6px} #mIpsiYoutube .mHashTagBtn {padding:8px 14px;font-size:13px} #mIpsiYoutube .mIpsiYoutubeLink {display:grid} #mIpsiYoutube .mIpsiYoutubeImg, #mIpsiYoutube .mIpsiYoutubeImg img {grid-area:1 / 1;border-radius:10px} #mIpsiYoutube .mIpsiYoutubeInfo {display:contents} #mIpsiYoutube .mIpsiYoutubeTit {grid-area:2 / 1;margin-top:10px;font-size:15px;padding-inline:0;line-height:1.45} #mIpsiYoutube .mIpsiYoutubeIco {grid-area:1 / 1;align-self:end;justify-self:end;flex:0 0 28px;width:28px;height:28px;margin:0 10px 10px 0;z-index:2} } /* ============================== * 학과별 바로가기 ================================= */ #mIpsiDept.mSec-dept {padding:0 0 100px;background:#252D32 url(/resources/_Img/Templet/Main/dept_bg.png) no-repeat right top / 100% auto;border-top-left-radius:120px; border-top-right-radius:120px;overflow:hidden; margin-top:-110px;} #mIpsiDept .mIpsiDept__in {position:relative;padding-top:72px;padding-bottom:0; padding-left:87px;} #mIpsiDept .mIpsiDept__ctrl {position:absolute;top:72px;right:11%;z-index:5} #mIpsiDept .mIpsiDeptPager {position:relative;width:160px;height:160px;background:url(/resources/_Img/Templet/Main/dept_nav_bg.png) no-repeat center / contain} #mIpsiDept .mIpsiDeptPager-btn {display:block;position:absolute;top:50%;box-sizing:border-box;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:translateY(-50%)} #mIpsiDept .mIpsiDeptPager-btn:disabled {opacity:.35;cursor:default} #mIpsiDept .mIpsiDeptPager-btn:before {content:"";display:block;position:absolute;width:18px;height:18px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/resources/_Img/Templet/Common/icon_prev.svg) no-repeat center / contain;filter:brightness(0) invert(1)} #mIpsiDept .mIpsiDeptPager-prev {left:35px} #mIpsiDept .mIpsiDeptPager-next {right:35px} #mIpsiDept .mIpsiDeptPager-next:before {transform:rotate(180deg)} #mIpsiDept .mSec__body {overflow:visible} #mIpsiDept .mIpsiDeptLst {display:block} #mIpsiDept .mIpsiDeptLst.owl-carousel .owl-stage-outer {overflow:visible} #mIpsiDept .mIpsiDeptLst.owl-carousel .owl-item {box-sizing:border-box} #mIpsiDept .mIpsiDeptItem {display:block;box-sizing:border-box;flex-shrink:0; align-self: flex-end;} #mIpsiDept .mIpsiDept__slide {display:flex;flex-flow:row;align-items:stretch;gap:56px;min-height:460px;} #mIpsiDept .mIpsiDeptVisual {flex:0 0 54%;max-width:780px;min-width:0; aspect-ratio: 780/550; overflow: hidden; border-radius:20px 20px 80px 80px;} #mIpsiDept .mIpsiDeptImg {position:relative;height:100%;min-height:550px;border-radius:20px 20px 80px 80px;overflow:hidden; aspect-ratio: 780/550;} #mIpsiDept .mIpsiDeptImg img {display:block;width:100%;height:100%;object-fit:cover} #mIpsiDept .mIpsiDeptField {display:none;margin:0;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:#fff} #mIpsiDept .owl-carousel .owl-stage{display: flex;} #mIpsiDept .owl-item.active + .owl-item {display:flex;align-items:center; justify-content: flex-end;} #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptItem {width:100%} #mIpsiDept .owl-item.active + .owl-item .mIpsiDept__slide {display:flex;align-items:flex-end;height:400px; width:100%; padding:0; } #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptVisual {display:flex;flex-flow:column;width:100%; flex:none; justify-content: flex-end; border-radius: 0;} #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptImg {flex:none;width:100%;height:80%;min-height:0;border-radius:80px 0 0 80px} #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptImg img{width:100%;} #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptField {display:block;margin-top:14px} #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptInfo {display:none} #mIpsiDept .mIpsiDeptInfo {flex:1;min-width:0;padding-top:18px;padding-right:40px;box-sizing:border-box; align-self: center;} #mIpsiDept .mIpsiDeptSub {margin:0 0 15px;font-size:20px;font-weight:300;line-height:1.3;letter-spacing:-.03em;color:rgba(255,255,255,.4);text-transform:uppercase} #mIpsiDept .mIpsiDeptTit {margin:0 0 50px;font-size:45px;font-weight:700;line-height:1.15;letter-spacing:-.03em;color:#fff} #mIpsiDept .mIpsiDeptLinkLst {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:45px;margin:0;padding:0;list-style:none} #mIpsiDept .mIpsiDeptLinkItem {display:block;min-width:0;border-bottom:1px dashed rgba(255,255,255,.14)} #mIpsiDept .mIpsiDeptLink {display:flex;flex-flow:row;align-items:center;gap:12px;box-sizing:border-box;padding:14px 4px 14px 0;color:#fff;text-decoration:none;transition:opacity .25s ease} #mIpsiDept .mIpsiDeptLink:hover, #mIpsiDept .mIpsiDeptLink:focus {opacity:.82} #mIpsiDept .mDeptBadge {display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:54px;padding:5px 15px;border-radius:5px;background:var(--m-color-primary);font-size:16px;font-weight:300;line-height:1;letter-spacing:-.05em;color:#fff;white-space:nowrap} #mIpsiDept .mDeptBadge-blue {background:var(--m-color-blue)} #mIpsiDept .mIpsiDeptName {flex:1;min-width:0;font-size:17px;font-weight:300;line-height:1.35;letter-spacing:-.05em;word-break:break-all} #mIpsiDept .mIpsiDeptArr {display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px} #mIpsiDept .mIpsiDeptArr:before {content:"";display:block;width:10px;height:10px;background:url(/resources/_Img/Templet/Common/icon_arrow.svg) no-repeat center / contain;filter:brightness(0) invert(1);opacity:.85} @media all and (max-width:1599px) { #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptImg{height: 60%;} #mIpsiDept .mIpsiDeptVisual{max-width: 500px;} #mIpsiDept .mIpsiDept__in {padding-left:20px; } #mIpsiDept .mIpsiDeptInfo{padding-right: 50px;} #mIpsiDept .owl-item.active + .owl-item .mIpsiDeptVisual{justify-content: flex-start;} #mIpsiDept .owl-item.active + .owl-item .mIpsiDept__slide{align-items: self-start;} } @media all and (max-width:1299px) { #mIpsiDept.mSec-dept {border-top-left-radius:50px;border-top-right-radius:50px;padding-bottom:50px} #mIpsiDept .mIpsiDept__in {padding-top:60px; padding-inline:20px;} #mIpsiDept .mIpsiDept__ctrl {top:60px; right:20px;} #mIpsiDept .mIpsiDeptLst.owl-carousel .owl-stage-outer {overflow:hidden} #mIpsiDept .owl-item.active + .owl-item {display:none} #mIpsiDept .mIpsiDeptItem {align-self:auto;width:100%} #mIpsiDept .mIpsiDept__slide {gap:40px;min-height:420px} #mIpsiDept .mIpsiDeptVisual {flex-basis:38%} #mIpsiDept .mIpsiDeptImg {min-height:380px;border-radius:32px} #mIpsiDept .mIpsiDeptInfo {padding-right:80px} #mIpsiDept .mIpsiDeptTit {margin-bottom:22px;font-size:42px} #mIpsiDept .mIpsiDeptLinkLst {column-gap:32px} #mIpsiDept .mIpsiDeptName {font-size:17px;font-weight: 300;} } @media all and (max-width:999px) { #mIpsiDept.mSec-dept {padding-bottom:56px;margin-top:-70px;background-image: none;} #mIpsiDept .mIpsiDept__in {padding:40px 20px 0;} #mIpsiDept .mIpsiDept__ctrl {top:63px;transform:none} #mIpsiDept .mIpsiDeptPager {width:96px;height:96px} #mIpsiDept .mIpsiDeptPager-prev {left:20px} #mIpsiDept .mIpsiDeptPager-next {right:20px} #mIpsiDept .mIpsiDeptPager-btn {width:32px;height:32px} #mIpsiDept .mIpsiDeptLst.owl-carousel .owl-stage-outer {overflow:hidden} #mIpsiDept .owl-carousel .owl-stage {display:block} #mIpsiDept .owl-item.active + .owl-item {display:none} #mIpsiDept .mIpsiDeptItem {align-self:auto;width:100%} #mIpsiDept .mIpsiDept__slide {display:grid;grid-template-areas:"sub" "title" "visual" "list";grid-template-columns:1fr;gap:20px;min-height:0} #mIpsiDept .mIpsiDeptInfo {display:contents;padding:0;padding-right:60px} #mIpsiDept .mIpsiDeptSub {grid-area:sub;display:block;margin:0 0 -8px;padding-right:108px;font-size:13px} #mIpsiDept .mIpsiDeptTit {grid-area:title;margin:0;padding-right:108px;font-size:32px;line-height:1.2} #mIpsiDept .mIpsiDeptVisual {grid-area:visual;flex:none;max-width:none;width:100%;aspect-ratio:auto; border-radius: 10px 10px 50px 50px;} #mIpsiDept .mIpsiDeptImg {width:100%;min-height:0;height:auto;aspect-ratio:360/210;border-radius:16px;box-sizing:border-box} #mIpsiDept .mIpsiDeptLinkLst {grid-area:list;grid-template-columns:1fr;column-gap:0} #mIpsiDept .mIpsiDeptLink {padding:15px 0} } @media all and (max-width:768px) { #mIpsiDept.mSec-dept {border-top-left-radius:40px;border-top-right-radius:40px;padding-bottom:48px;margin-top:-50px} #mIpsiDept .mIpsiDept__in {padding-top:32px;padding-left:16px;padding-right:16px} #mIpsiDept .mIpsiDept__ctrl {right:16px} #mIpsiDept .mIpsiDeptPager {width:84px;height:84px} #mIpsiDept .mIpsiDeptPager-prev {left:16px} #mIpsiDept .mIpsiDeptPager-next {right:16px} #mIpsiDept .mIpsiDeptPager-btn {width:28px;height:28px} #mIpsiDept .mIpsiDeptPager-btn:before {width:14px;height:14px} #mIpsiDept .mIpsiDept__slide {gap:16px} #mIpsiDept .mIpsiDeptSub {margin-bottom:-6px;padding-right:96px;font-size:12px} #mIpsiDept .mIpsiDeptTit {padding-right:96px;font-size:26px;font-weight:700} #mIpsiDept .mIpsiDeptImg {border-radius:14px;aspect-ratio:343/190} #mIpsiDept .mIpsiDeptLink {padding:15px 0} #mIpsiDept .mDeptBadge {min-width:46px;padding:4px 10px;font-size:14px;font-weight: 300; border-radius:4px} #mIpsiDept .mIpsiDeptArr {width:18px;height:18px} }