:root { --main-color:#0074E8; --sub-color:#0057A6; --point-color1:#F0F9F3; --point-color2:#70C594; --point-color3:#00F0FF; --point-color4:#204578; --point-color5:#01EDBD; --main-color-bg:; --basic-bg:#f6f6f6; --grd:linear-gradient(90deg, #204578, #0075EA); --bg-blue:#EEF7FF; } input, select, button {font-size:1rem}*/ body{font-size:16px;transition:all .3s;} .d_width {width:1400px;margin:0 auto;position:relative;} .c_width {width:1100px;margin:0 auto;position:relative;transition:all 0.2s ease-out;} /* .mh {height:calc(100vh - 312px);min-height:940px;} */ .row-wrap {display:flex;flex-direction:row;} .board-list tbody td{border-right:none;} .board-list tbody td.date{font-size:14px;} button{cursor:pointer;} .board-write em{color:#ff4f4f;} .essential{color:#ff4f4f;} .tv-toggle input[type="checkbox"]:checked ~ label .tv-toggle-slide:after{background:var(--sub-color);} #m-login{display:none;} .mm-menu.mm-current{z-index:999;} .mm-vertical .topmn.mm-panel > a{display: flex;padding: 10px;font-size: 12px;text-align: center;/* border-bottom: 1px solid rgba(0,0,0,0.5); */ border:none; background: rgba(0,0,0,0.2);} .mm-menu > .mm-panel:before, .mm-menu > .mm-panel:after{height:0 !important;} .mm-menu > .mm-panel > .mm-listview{margin:0 !important;} .mm-menu > .mm-panel{padding:0 !important;} .mm-vertical .topmn.mm-panel a{flex:1;} /* nodata */ a.nodata{cursor:default; pointer-events:none;} .nodata .tit{color:#aaa !important;} .nodata .date{color:#aaa;} li.nodata {cursor: default;pointer-events: none; } li.nodata p{color:#aaa !important;} /* //nodata */ @charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap'); body,h1,h2,h3,h4,input,button,textarea,select,div,table {font-family:Pretendard,sans-serif;} body {font-size:16px; overflow-x:hidden;} .bodybg {background-color:transparent;overflow-x:hidden;} .mbg {background-image:url(./img/mbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent} .mcbg {background-image:url(./img/mcbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent} .sbg {background-image:url(./img/sbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent} .cbg {background-image:url(./img/cbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent} #wrap {position:relative;width:100%;padding:0;margin:0; min-width:1400px; } #mvslide {text-align:center;} .bx-viewport:before{content:""; position:absolute; width:100%; height:35%; z-index:2; bottom:0; background:linear-gradient(0deg, #000000b5, rgba(0,0,0,0.0001));} #svisual {position:relative;width:100%;} #svslide {position:absolute;width:100%;} #container {position:relative;padding:0 0 80px 0;} /* d_width */ #container.sub_container{padding:30px 0} #container:after {content:"";clear:both;display:block;float:none;} #banner {display:none;padding:15px 0;background:#fff;border-top:1px solid #eee;text-align:center;} #banner ul {margin:0 -5px;} #banner li {float:left;} #banner li img {height:50px;padding:5px;} #banner li a {margin:0 5px;display:block;border:1px solid #eee;} #banner ul.d4 li {width:25%;} #banner ul.d5 li {width:20%;} h1, h2, h3, h4, h5, h6 {clear:both;background:transparent;line-height:1.25;text-align:left;} h1 {/*margin:0;padding:0;background:none;font-size:30px;color:#464C58;letter-spacing:-1px;*/} h2{margin:30px 0 15px 0; padding:0; font-size:40px; font-weight:800; color:#333333;} h3 {margin:40px 0 20px 0;padding:0;font-size:26px;color:#000; display:flex; align-items:center; } h4 {margin:15px 0 5px 0;padding:0;font-size:15px;color:#5A6378;} h5 {margin:10px 0 5px 0;padding:0;font-size:14px;font-weight:normal; } /* h2:before{content:"\f046"; font-family:FontAwesome; color:#01748A; margin-right:5px; font-size:18px; font-weight:500;} */ h3:before{content:""; margin-right:10px;width:24px; height:24px; background:url(../img/h3_bullet.png); display:inline-block;} h4:before{content:"\f111";font-family:FontAwesome;color:#5A6378;margin-right:5px;font-size:12px;} h5:before{content:"\f10c";font-family:FontAwesome;color:#768395;margin-right:5px;font-size:12px;} h6:before{content:"\f105";font-family:FontAwesome;color:#5A6378;margin-right:5px;font-size:12px;} header {position:absolute;left:0;top:0;width:100%;height:100px;padding:0;margin:0;z-index:100} header.fix {position:fixed; box-shadow:0 1px 2px rgba(0,0,0,0.2)} header #logo {position:absolute;left:2rem;top:50%; transform:translateY(-50%);width:auto;z-index:999; display:flex; align-items:center;} header #logo .logo1{display:none;} header .sub_name {display:inline-block;margin-left:5px;line-height:40px;font-size:16px;font-weight:600;color:#fff;vertical-align:middle;} header .sub_name:before{width:1px; height:25px; content:""; display:inline-block; background:rgba(255,255,255,0.4); margin:0 10px 0 5px; vertical-align:middle;} #topwrap .topmn {position:absolute;top:65px;right:2rem;z-index:99;line-height:40px;height:40px;display:inline-block;} #topwrap .topmn a {margin-left:20px;font-size:14px;color:#fff;} .topwrap {position:relative; background:#313133; color:#fff; } .topwrap .link{display:flex;} .topwrap .link a {width:150px; font-size:14px; line-height:40px; border-right:1px solid #505051; text-align:center; color:#fff;} .topwrap .link a.on{background-color:var(--main-color);} header.fix #gnb, #header.active #gnb{background:#fff;} header.fix #gnbmn ul.depth1 li a, #header.active #gnbmn ul.depth1 li a {color:#333;} header.fix #gnb .topmn a, header.fix #gnb .topmn a i, #header.active #gnb .topmn a, #header.active #gnb .topmn i{color:#333;} header.fix #gnb .topmn a:hover i{color:var(--main-color);} #header.active #gnb .topmn a:hover i{color:var(--main-color);} header.fix .sub_name, #header.active .sub_name{color:#333;} header.fix #logo .logo1, #header.active #logo .logo1{display:block;} header.fix #logo .logo2, #header.active #logo .logo2{display:none;} header.fix #gnbmn ul.depth1 > li > a.on > span{color:var(--main-color);} header.fix #gnbmn ul.depth1 > li:not(:last-child) > a > span:after{border-color:var(--main-color);} #gnb {position:absolute; background:inherit; left:0; top:0; height:100px; width:100%; border-bottom:1px solid rgba(255,255,255,.4);} #gnbmn {position:relative; width:1400px; padding:0; margin:0 auto; z-index:99;} #gnbmn a {display:block;} #gnb .topmn {position:Absolute;right:25px;;top:50%; transform:translateY(-50%); z-index:9999;display:flex;flex-flow:row;align-items:center;} header.fix #gnb .topmn a:hover {color:var(--main-color);} #gnb .topmn a {display:inline-block;height:50px;line-height:50px;text-align:center;margin-right:10px; font-size: 15px; color:#fff;} #gnb .topmn a.ico-search {background:#B5C5D5;width:50px;border-radius:50%;margin-right:0.25rem} #gnb .topmn a.ico-search:before {content:"\f002";font-family:FontAwesome;} #gnb .topmn a.ico-sso-signin {background:var(--main-color);border-radius:80px;padding:0 1rem;} #gnb .topmn a.ico-sso-signout {background:#3D5369;border-radius:80px;padding:0 1rem;} #gnb .topmn a.ico-sso-signin:before {content:"\f023";font-family:FontAwesome;margin-right:5px} #gnb .topmn a.ico-sso-signout:after {content:"\f2f5";font-family:FontAwesome;margin-left:5px} #gnb .topmn a.ico-sso-signout:hover {background:var(--main-color);} #gnb .topmn a.ico-signin {background:var(--main-color);margin-left:5px} #gnb .topmn a.ico-signin:before {content:"\f023";font-family:FontAwesome;} #gnb .topmn a.ico-sso {background:var(--main-color);margin-left:5px} #gnb .topmn a:hover {color:var(--main-color);} #gnb .topmn a:hover i{color:var(--main-color);} #gnb .topmn .ico1:before, #gnb .topmn .ico2:before, #gnb .topmn .ico3:before {content:"\f007";color:var(--sub-color);margin-right:10px;vertical-align:middle;font-family:'Font Awesome 6 Pro';} #gnb .topmn .ico2:before {content:"\f023";} #gnb .topmn .ico3:before {content:"\f3c1";} #gnb .topmn .ico-sitemap {height: 35px;line-height: 35px;} #gnb .topmn .ico-sitemap i {padding: 8px;color:#FFF;border-radius:3px;font-size: 20px;width: 36px;} /* #gnbmn a:hover {color:var(--main-color) !important;} */ #gnbmn a.active, #gnbmn a.on { color: #00FFBB; } #gnbmn ul.depth1 > li > a.on > span{color:#00FFBB;} #gnbmn ul.depth1 > li > a.on > span:after{border-color:#00FFBB;} header.active #gnbmn ul.depth1 > li > a > span:hover{color:var(--main-color);} header.active #gnbmn ul.depth1 > li > a > span:after {border-color:var(--main-color);} header.active #gnbmn a.on {color:var(--main-color);} header.active #gnbmn ul.depth1 > li > a.on > span{color:var(--main-color);} #mo-menu {display: none;position:absolute;left:20px;top:50%; transform:translateY(-50%);width: 40px;height: 40px;z-index:99999} #mo-menu a:before{content:"\f0c9";color:#fff;font-family:FontAwesome;display:block;width:40px;line-height:40px;text-align:center;font-size:20px; background:var(--main-color);} /* #gnbmn {position:relative;padding: 0 270px 0 367px;z-index:99;} */ #gnbmn {position:relative;z-index:99;width:1400px;margin:0 auto;} #gnbmn a {position:relative;display:block;} #gnbmn .depth1 {display:flex;justify-content:center;} #gnbmn a[target=_blank] span:after {content:"";display:inline-block;width:10px;height:10px;background:url(../img/ico_nw.png) no-repeat 0 0 / 100% auto;margin-left:5px;} #gnbmn ul.depth1 > li {float:left;} #gnbmn ul.depth1 > li.mobile {display:none;} #gnbmn ul.depth1 > li > a {line-height:100px;padding:0 64px;height:100px;margin:0;color:#fff;font-size:20px; font-weight:600; letter-spacing:-0.0125rem;font-family:'pretendard';text-align:center;} #gnbmn ul.depth1 > li > a.on, #gnbmn ul.depth1 > li > a:hover {color:var(--main-color);} #gnbmn ul.depth1 > li > a > span {position:relative;display:inline-block;} #gnbmn ul.depth1 > li:not(:last-child) > a > span:after {content:"";position:absolute;left:0;bottom:0;width:100%;transform:scaleX(0);transition:all ease-out 0.2s;display:block;border-bottom:5px solid #00FFBB;} #gnbmn ul.depth1 > li > a.on > span:after, #gnbmn ul.depth1 > li > a:hover > span:after {content:"";position:absolute;left:0;bottom:0;transform:scaleX(1)} #gnbmn .depth2 {position:absolute;top:100px;left:50%;transform:translateX(-50%);width:1400px;height:100%;padding:20px 0;text-align:left;display:none;} /*#gnbmn .depth2 .title {float:left;width:320px;padding-top:25px;word-break:keep-all;}*/ /*#gnbmn .depth2 .tit {font-size:2rem;font-weight:var(--font-exbold);letter-spacing:-0.125rem;line-height:1.2;color:#333;}*/ /*#gnbmn .depth2 .txt {margin-top:20px;font-weight:var(--font-regular);line-height:1.6;color:#777}*/ #gnbmn .title {float:left;width:250px;padding:10px 0;word-break:keep-all;;} #gnbmn .tit {display:inline-block;font-size:2.2rem;font-weight:var(--font-exbold);line-height:1;color:#fff;margin:15px 0;} #gnbmn .txt {font-size:1.1rem;font-weight:400;line-height:1.4;color:#fff;} #gnbmn .txt em {color:#ffc;font-weight:100;font-style:italic;} #gnbmn .tit:after{content:"";width:100%;height:5px;display:block;background:var(--grd);margin-top:5px;} #gnbmn .depth2 > ul {float:left;width:calc(100% - 250px); padding-right:20px; margin-bottom:30px;} #gnbmn .depth2 > ul > li {float:left;width:25%;padding:10px 0 10px 10px;} #gnbmn .depth2 > ul > li:nth-child(5n+1) {clear:both;} #gnbmn .depth2 > ul > li > a {border:1px solid var(--main-color);background:#fff;line-height:58px;font-size:18px; font-weight:600; text-align:center;border-radius:0.25rem} #gnbmn .depth2 > ul > li > a:hover {background:linear-gradient(90deg, rgba(32,69,120,1) 0%, rgba(0,117,234,1) 100%); color:#fff !important;} #gnbmn .depth2 > ul > li > a.on, #gnbmn .depth2 > ul > li > a:hover {color:#fff} #gnbmn ul.depth3 {margin:15px 0 0 0} #gnbmn ul.depth3 li a:before {content:"";display:inline-block;width:3px;height:3px;background:#555;margin:12px 10px 0 0;vertical-align:top;border-radius:50%} #gnbmn ul.depth3 li a.on, #gnbmn ul.depth3 li a:hover {color:var(--main-color);text-decoration:underline} #id_gnb_bg {position:absolute;width:100%;left:0;top:100px;z-index:1;background: #f4f4f4 url(../img/gnb_bg.png) no-repeat 100% 100%;} .gnb_bg {width:100%;padding:0;margin:0;background:#fff;box-shadow:0px 2px 1px rgba(0,0,0,0.1);-moz-box-shadow:0px 2px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0px 2px 1px rgba(0,0,0,0.1);} .gnb_bg:after {content:"";position:absolute;left:0;top:100px;width:100%;height:calc(100% - 100px);background:#f7f7f7 url(../img/gnb_bg.png) no-repeat 50% 100%;} .gnb_bg:before, .gnb_bg:after {content:"";position:absolute;left:0;top:0;display:block;width:calc(50% - 470px);height:100%;background:#0074E7cc;} .gnb_bg:before {background:url(../img/sv-bg.png) no-repeat 40% 50% /cover;} #wrap.topbnr-on #id_gnb_bg {top:250px;} .item-control a.ico-play{margin:0 0.25rem;} .item-control a.ico-play:before{content:"\f04b";font-size:.75rem; } /* [s] main visual */ #main-visual{position:relative; height:960px; z-index:4; top:0; overflow:hidden;} .main-visual{background:url(../img/main-visual.png) no-repeat; position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover;background-position:center; animation:bg-scale 5s ease-out alternate both, brightness 3s alternate both;} .visual-title .mv-tit{padding:240px 0 70px;} .visual-title .mv-tit p{color:#fff;} .visual-title .etit{font-size:21px; letter-spacing:13px; margin-bottom:25px;} .visual-title .stit span{font-size:45px; display:inline-block; position:relative;} .visual-title .stit span:before {content: "";display:inline-block;animation:titCover 2.3s cubic-bezier(.4,0,0,1) both;position:absolute;width:100%;height:100%;top: 0px;left: 0;overflow: hidden;background:#fff;z-index:1;} .visual-title .tit{font-size:65px; letter-spacing:-3px; font-weight:900; line-height:1.2; animation:titFade 1s .3s cubic-bezier(.4,0,0,1) both; display:inline-block;} .visual-title .tit span{display:block; color:var(--point-color5);} . @-webkit-keyframes bg-scale { 0% {transform:scale(100%);} 100% {transform:scale(108%);} } @keyframes bg-scale { 0% {transform:scale(100%);} 100% {transform:scale(108%);} } @keyframes mv-video { 0% { transform:scale(1.2) translate(-50%,-50%);filter:blur(10px); } 100% { transform:scale(1) translate(-50%,-50%);filter:blur(0px); } } @keyframes mv-symbol { 0% {transform:translate(-100%, 0%);opacity:0;} 20% {transform:translate(-50%, -50%);opacity:1;} 45% {transform:translate(-50%, -50%);opacity:1;} 70% {transform:translate(50%, -50%);opacity:0;} 100% {transform:translate(-50%, -50%);opacity:0;} } @keyframes mv-symbol-fade { 0% {transform:translate(-50%, -50%) scale(.9);opacity:0;} 20% {transform:translate(-50%, -50%) scale(1);opacity:1;} 45% {transform:translate(-50%, -50%) scale(1);opacity:1;} 60% {transform:translate(-50%, -50%) scale(.9);opacity:0;} 100% {transform:translate(-50%, -50%) scale(.9);opacity:0;} } @keyframes mv-fadeIn { 0% {opacity:0;} 20% {opacity:1;} 80% {opacity:1;} 100% {opacity:0;} } @keyframes mv-brightness { 0% { filter: contrast(100%) brightness(100%); } 20% { filter: contrast(110%) brightness(150%); } 100% { filter: contrast(100%) brightness(100%); } } @keyframes titFade { 0%{opacity:0;} 50%{opacity:0;} 51%{opacity:1;} 100%{opacity:1;} } @keyframes titCover{ 0%{transform:scaleX(0);transform-origin:left center;} 50%{transform:scaleX(1);transform-origin:left center} 51%{transform:scaleX(1);transform-origin:right center} 100%{transform:scaleX(0);transform-origin:right center} } @keyframes brightness { 0 { filter:brightness(90%) contrast(100%); } 50% { filter:brightness(115%) contrast(115%); } 100% { filter:brightness(100%) contrast(100%); } } /* header 반응형 */ @media only screen and (max-width:2000px){ #gnbmn {width:1200px;} #gnbmn ul.depth1 > li > a{padding:0 20px;} #gnbmn .depth2{width:1200px;} .gnb_bg:before, .gnb_bg:after{width:calc(50% - 380px);} } @media only screen and (max-width:1600px){ header #logo{flex-direction:column;} header #logo img{height:30px;} header .sub_name{margin-left:0; line-height:1.2;} header .sub_name:before{display:none;} #gnbmn ul.depth1 > li > a{font-size:18px;} #gnbmn .title{width:220px;} #gnbmn .tit{font-size:2rem;} #gnbmn .txt{font-size:1rem;} } @media only screen and (max-width:1440px){ #wrap {min-width:1200px;} .d_width {width:1200px;} #gnbmn {width:960px;} #gnbmn .depth2{width:960px;} .gnb_bg:before, .gnb_bg:after{width:calc(50% - 240px);} #gnbmn .depth2 > ul > li > a{font-size:16px;} #gnbmn ul.depth1 > li > a{padding:0 30px;} } @media only screen and (max-width:1240px){ #wrap{min-width:960px;} .d_width{width:960px;} #gnbmn .tit{font-size:1.8rem;} .gnb_bg:before, .gnb_bg:after{width:calc(50% - 280px);} #id_gnb_bg{background-size:150%;} #gnbmn ul.depth1 > li > a{padding:0 10px;} } @media only screen and (max-width:1023px){ #wrap{min-width:720px;} .d_width{width:720px;} header{height:80px; position:relative;} header #logo {left:50%; transform:translate(-50%,-50%); flex-direction:row;} header #logo .logo1 {display:block;} header #logo .logo2 {display:none;} header .sub_name {margin-left:5px; color:#333;} #gnb {position:relative; background:#fff; height:80px;} #gnbmn {display:none;} #gnb .topmn {top:50%;right:20px;} #gnb .topmn a {color:#333; font-weight:600;} #gnb .topmn .ico-sitemap {display:none;} #gnb .topwrap .topmn a {margin:0 0 0 10px;} #mo-menu{display:block;} .mm-menu {background:var(--main-color) !important;} } @media only screen and (max-width:767px){ #wrap{min-width:320px;} .d_width{width:auto; padding: 0 20px;} header #logo{ flex-direction:column;} header .sub_name{line-height:1.2; margin-left:0; font-size:14px;} #gnb .topmn a{font-size:12px;} } @media only screen and (max-width:576px){ .d_width{padding:0 10px;} #gnb .topmn{right:10px;} #gnb .topmn a{margin-right:5px;} } @media only screen and (max-width:415px){ .d_width{padding:0 20px;} header .sub_name{display:none;} #gnb .topmn{right:20px;} #gnb .topmn a:first-child{display:none;} } /* //header 반응형 */ /* footer */ footer{color:#8E969B;} footer .d_width{display:flex;justify-content:space-between; align-items:center; padding:40px 0;} footer .f-info{} footer .f-info a{display:block;margin-bottom:15px; } footer .f-info a img{} footer .f-info address{font-size:14px; color:#999999;} footer .f-link{} footer .f-link a{font-size:15px;display:inline-block;color:#333;} footer .f-link a:not(:first-child){margin-left:10px;} /* //footer */ /* fnbr */ .fbnr{background:#F9F9F9; position:relative;} .fbnr .d_width{display:flex;position:relative; padding:30px 0;} .fbnr-deco{ background:url(../img/fbnr_img.png) no-repeat; position:absolute; right:0; bottom:0; display:block; width:300px; height:142px; z-index:99;} .fbnr .fbnr_left{width:120px;} .fbnr .tit{line-height:1.2;font-size:23px;letter-spacing:-1px; color:#01598D; font-weight:800;} .fbnr .fbnr-swiper{width:calc(100% - 420px); position:relative; margin:0;} .fbnr ul li a{display:block; position:relative; height:60px; border:1px solid #CDD6E0; overflow:hidden; background:#fff;} .fbnr ul li a img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); height:30px; max-width:100%; min-height:auto;} .fbnr .control a:not(:last-child){margin-right:5px;} .fbnr .control i{color:#083E6D; font-size:14px;} /* //fbnr */ /* footer 반응형*/ @media only screen and (max-width:1023px){ footer .d_width{flex-direction:column-reverse; align-items:flex-start; gap:20px; width:720px;} .fbnr .d_width{width:720px;} .fbnr .fbnr-deco{display:none;} .fbnr .fbnr-swiper{width:calc(100% - 120px);} } @media only screen and (max-width:767px){ footer .d_width{padding:40px;} .fbnr .d_width{padding:30px 20px; flex-wrap:wrap; width:auto;} .fbnr .tit{font-size:20px;} .fbnr .fbnr_left{width:100%; display:flex; justify-content:space-between; margin-bottom:10px;} .fbnr .fbnr-swiper{width:100%;} .footerSwiper{width:100%;} } @media only screen and (max-width:576px){ footer .d_width{padding:20px; gap:10px;} footer .f-info a{margin-bottom:5px; width:100%;} footer .f-link a:not(:first-child){margin-left:0;} .fbnr{padding:10px 0;} .fbnr .d_width{padding:20px;} } @media only screen and (max-width:415px){ } /* //footer반응형 */ /*공통*/ .mcont1, .mcont2, .mcont3, .mcont4{padding:100px 0;} section.mcont2{overflow-x:hidden;} section .mtit{font-size:40px; font-weight:800; color:#000; letter-spacing:-1.5px; margin-bottom:60px;} .more_btn{width:56px;height:56px;position:absolute;border:1px solid #E4E4E4;background:inherit;} .more_btn:hover{background:#F0F5F9;} .more_btn:before, .more_btn:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:#fff;} .more_btn:before{width:25px;height:2px;} .more_btn:after{content:"";width:2px;height:25px;} .more_btn:hover{transform:rotate(180deg);background:var(--sub-color);color:#fff;width:56px;height:56px;line-height:37px;} .more_btn2{color:#0057A6; z-index:9;position:absolute; right:0; top:0; font-size:17px; font-weight:600; letter-spacing:-1px; display:flex; align-items:center; transition:all ease-out .3s;} .more_btn2:after{content:"\f105"; font-family:FontAwesome; display:inline-block; color:#fff; margin-left:5px; background: #01598D; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; vertical-align:middle; } .more_btn2:hover{transform:translateX(-5px); color:var(--main-color);} .bx-info {background:var(--bg-blue);padding:30px;} .btn-yellow {background:#FFAD00; border-color:#FFAD00;} .btn-green {background:#01C901; border-color:#01C901;} .btn-b-green {color:#339966; border-color:#339966; font-size:14px; font-weight:500; letter-spacing:-1px;} @media only screen and (max-width:767px){ .more_btn:before{width:15px;} .more_btn:after{height:15px;} } @media only screen and (max-width:576px){ .mv-quick .more_btn{width:30px; height:30px;} } /*테이블*/ .table1 table, .table2 table, .table3 table {border-top:2px solid #204578;} .table3 table th {text-align:center;} .table1 table th, .table1 table td, .table2 table th, .table2 table td, .table3 table th, .table3 table td {padding:1rem;border:1px solid #EAEAEA;vertical-align:middle; color:#333;} .table3 table.table-sm th, .table3 table.table-sm td {padding:10px;} .table1 table thead th {color:var(--sub-color);background:#transparent;border-left:none;border-right:none;} .table2 table thead th {color:var(--sub-color);background:#F8FAFB;border-left:none;border-right:none;} .table1 table thead th, .table2 table thead th, .table3 table thead th {line-height:1.4;font-weight:600;text-align:center; background:#fff;} .table3 table thead th {color:#607A99;font-weight:500;} .table3 table tbody th {font-weight:600;color:#204578;background:#F8FAFB;} .table1 table thead th:first-child, .table2 table thead th:first-child, .table3 table thead th:first-child, .table1 table tbody th, .table1 table tbody td:first-child, .table2 table tbody th, .table2 table tbody td:first-child, .table3 table tbody th, .table3 table tbody td:first-child, .table3 table tfoot th, .table3 table tfoot td:first-child {border-left:none;} .table2 table thead th:last-child, .table3 table thead th:last-child, .table1 table tbody td:last-child, .table1 table tfoot td:last-child, .table2 table tbody td:last-child, .table2 table tfoot td:last-child, .table3 table tbody td:last-child, .table3 table tfoot td:last-child {border-right:none;} .table1 table td.br_none, .table2 table td.br_none, .table3 table td.br_none {border-left:none !important;} .table1 table tbody tr:first-child th, .table1 table tbody tr:first-child td, .table2 table tbody tr:first-child th, .table2 table tbody tr:first-child td, .table3 table tbody tr:first-child th, .table3 table tbody tr:first-child td {border-top:0;} .table1 .board-sm thead th, .table2 .board-sm thead th, .table3 .board-sm thead th {border-left:1px solid #EAEAEA;border-right:1px solid #EAEAEA;} .table1 .board-sm th {font-weight:600;color:#374B62;} .table1 .board-sm th, .table1 .board-sm td, .table2 .board-sm th, .table2 .board-sm td, .table3 .board-sm th, .table3 .board-sm td {padding:0.5rem;} ul.bu>li:before{width:4px; height:4px; border-radius:unset;} /* board-list 커스텀 */ .board-list{border-top:2px solid #204578;} .board-list thead th{background:#fff;color:#121314;padding:1rem .75rem;border-bottom:1px solid #666;} .board-list tbody tr:last-child th, .board-list tbody tr:last-child td{border-bottom:0;} .board-list.head-none{border-top:0;} .board-list .clip-list{padding:3.75rem 1.25rem 1.25rem 1.25rem;color:#333;} .board-list .clip-list:before{background:#919191;} .board-list em.new{width:20px;height:20px;min-width:20px;line-height:21px;display:inline-block;background:#FF6633; border-radius:50%;font-size:11px;text-align:center;color:#FFF;vertical-align:middle;} .board-list .select{height:28px;font-size: 13px;color:inherit;border:1px solid #e1e1e1;background:#fff;border-radius:2px;} .board-list .badge.sh-ell{/* font-size:0.8rem; */} .board-list .comment{position:static;display:inline-block;font-size:.9rem;border-radius:0;padding:0;background:none;color:var(--main-color);line-height:1;} .board-list .comment:before{display:none;} .board-list .subject{text-align:left;font-weight:500;} .board-list .subject a{display:block;overflow:hidden;text-decoration:none;align-items:center;} .board-list table .date, .board-list table .num {font-size:.9rem;color:#919191} /*.btnarea{margin:0;}*/ .board-paging{border-top:1px solid #204578; margin:0 0 2rem; padding-top:30px;} @media only screen and (max-width:415px){ .board-gallery ul{margin:0;} } /* //board-list 커스텀 */ /*정보입력 아이콘*/ .detail-wrap [class*="ico"]:before{content:"";width:25px;height:25px;display:inline-block;margin-right:5px;background:url(../img/detail-ico.png) no-repeat;vertical-align:middle;flex-shrink:0;} .detail-wrap .ico-depart:before{background-position:0 0;} .detail-wrap .ico-add:before{background-position:-25px 0;} .detail-wrap .ico-tel:before{background-position:-50px 0;} .detail-wrap .ico-mail:before{background-position:-75px 0;} .detail-wrap .ico-fax:before{background-position:-100px 0;} .detail-wrap .ico-time:before{background-position:-125px 0;} @media only screen and (max-width:767px){ .detail-wrap [class*="ico"]:before{scale:.7;margin:0 2px 3px 0;} .detail-wrap li{flex-wrap:wrap;} .detail-wrap li span{width:calc(100% - 50px);} } /*//공통*/ /* mv-quick */ .mv-quick {position:relative; margin-top:-150px; z-index:99;} .mv-quick .d_width{display:flex; flex-wrap:wrap; background:var(--main-color); position:relative; padding:40px 0; box-shadow:5px 5px 14px rgba(0, 0, 0, .2);} .mv-quick .d_width:before{content:""; background:var(--main-color); left:-100%; top:0; width:100%; height:100%; position:absolute; display:block; box-shadow:0 5px 5px -5px rgba(0,0,0,.2);} .mv-quick .info{position:relative;} .mv-quick .more_btn{position:absolute; bottom:0; left:0;} .mv-quick .info p {font-size:26px; color:#fff; font-weight:600; letter-spacing:-2px; line-height:1.6; width:300px;} .mv-quick ul{display:flex; flex-wrap:wrap; width:calc(100% - 300px); padding:50px 0; } .mv-quick ul li {width:calc(100% / 4); display:flex; align-items:center; justify-content:center;} .mv-quick ul li:not(:last-child){ border-right:1.5px solid #7FBCE2; } .mv-quick li a {font-size:20px; text-align:center; font-weight:600; color:#fff; letter-spacing:-1px;} .mv-quick li a span:before{content:""; display:block; width:80px; height:80px; background:url(../img/mv-quick_img.png); margin:0 auto 20px; transition:all 0.3s ease 0s;} .mv-quick li a span.ico-1:before {background-position:0 0;} .mv-quick li a span.ico-2:before {background-position:-80px 0;} .mv-quick li a span.ico-3:before {background-position:-160px 0;} .mv-quick li a span.ico-4:before {background-position:-240px 0;} .mv-quick li a:hover{color:#ffffcc;} .mv-quick li a:hover span.ico-1:before {background-position-Y: 80px;} .mv-quick li a:hover span.ico-2:before{background-position-Y: 80px;} .mv-quick li a:hover span.ico-3:before {background-position-Y: 80px;} .mv-quick li a:hover span.ico-4:before{background-position-Y: 80px;} /* //mv-quick*/ /* main-visual반응형 */ @media only screen and (max-width:1440px){ #main-visual{height:760px;} .visual-title .mv-tit{padding:200px 0 70px;} } @media only screen and (max-width:1240px){ .visual-title .etit{font-size:18px; margin-bottom:15px;} .visual-title .stit span{font-size:35px;} .mv-quick .info p{font-size:24px; width:220px;} .mv-quick ul{width:calc(100% - 220px); padding:30px 0;} } @media only screen and (max-width:1023px){ #main-visual{height:560px;} .visual-title .mv-tit{padding:120px 0 70px;} .visual-title .etit{font-size:16px; margin-bottom:10px;} .visual-title .tit{font-size:55px;} .mv-quick{margin-top:0; background:var(--main-color);} .mv-quick .d_width{box-shadow:none; padding:40px 20px;} .mv-quick .info{width:100%;} .mv-quick .d_width:before{display:none;} .mv-quick ul{width:100%;} .mv-quick .info p{width:100%; letter-spacing:-1px;} .mv-quick .info p span{display:none;} .mv-quick .more_btn{right:0; top:0; bottom:unset; left:unset; width:40px; height:40px;} .mv-quick .more_btn:hover{width:40px; height:40px;} .mv-quick li a{font-size:18px;} .mv-quick li a span:before{margin:0 auto 10px; transform:scale(0.8);} } @media only screen and (max-width:767px){ .visual-title .mv-tit{padding:120px 20px 70px;} .visual-title .stit span{font-size:25px;} .visual-title .etit{letter-spacing:7px;} .visual-title .tit{font-size:45px;} .mv-quick .info p{font-size:20px;} .mv-quick .d_width{padding:20px;} .mv-quick ul{padding:20px 0;} .mv-quick li a span:before{margin:0 auto;} } @media only screen and (max-width:576px){ #main-visual{height:400px;} .visual-title .etit{letter-spacing:5px;} .visual-title .stit span{font-size:18px;} .visual-title .tit{font-size:40px;} .mv-quick ul{padding:0;} .mv-quick ul li{width:25%; } .mv-quick ul li:not(:last-child){border-right:none;} .mv-quick li a{padding:0; font-size:16px;} .mv-quick .info p span:first-child{display:block;} .mv-quick li a span:before{transform:scale(0.6);} } @media only screen and (max-width:415px){ #main-visual{height:300px;} .visual-title .mv-tit{padding:80px 0;} .visual-title .etit{display:none;} .visual-title .stit span{font-size:14px;} .visual-title .tit{font-size:28px;} .mv-quick .info p{font-size:17px;} .mv-quick ul li{width:50%;} .mv-quick li a span:before{transform:scale(0.5);} } /*//main-visual 반응형*/ /* 공통 반응형*/ @media only screen and (max-width:1440px){ } @media only screen and (max-width:1240px){ .mcont1, .mcont2, .mcont3, .mcont4{padding:70px 0;} section .mtit{font-size:var(--font-2xlg);margin:0 0 40px;} } @media only screen and (max-width:1023px){ .mcont1, .mcont2, .mcont3, .mcont4{padding:40px 0;} section .mtit{margin:0 0 30px;} } @media only screen and (max-width:767px){ .mcont1, .mcont2, .mcont3, .mcont4{padding:20px 0;} section .mtit{margin:0 0 15px; font-size:var(--font-xlg);} } @media only screen and (max-width:415px){ } /* // 공통 반응형 */ @keyframes aW_nH{ from {width:0%;} to {width:100%;} } @keyframes sW_aH{ from{width:100%; height:0%;} to{width:100%; height:100%;} } @keyframes sW_sH{ from{width:100%; height:100%;} to{width:100%; height:100%;} } /* mgallery */ .mgallery {position:relative;} .mgallery .cont{display:flex; flex-wrap:wrap;} .mgallery .cont .detail-wrap{width:calc(100% - 680px);} .mgallery .cont .subject{font-size:35px; color:#000; letter-spacing:-2px; font-weight:800;} .mgallery .cont .txt{-webkit-line-clamp:3; margin-top:30px; font-size:17px; color:#333; line-height:1.8;} .mgallery .cont .thumb{width:640px; height:400px; margin-right:40px; position:relative;} .mgallery .more_gallery{display:flex; position:absolute; width:720px; right:0; bottom:0; justify-content:space-between;} .mgallery .more_gallery .tit{font-size:17px; font-weight:600; color:#000; letter-spacing:-1px;} .mgallery .more_gallery a {width:calc(100% / 3 - 20px);} .mgallery .thumb img {transition:all .5s;} .mgallery a:hover:not(.on) .thumb img {scale:1.07;} .mgallery a:not(.on) .thumb:after {top:0;left:0;border-top:5px solid;border-right:7px solid;} .mgallery a:not(.on) .thumb:before {bottom:0;right:0;border-bottom:5px solid;border-left:7px solid;} .mgallery a:not(.on) .thumb:before, .mgallery a:not(.on) .thumb:after {content:"";position:absolute;width:0%;height:0%;z-index:1;border-color:var(--main-color);border-width:0;z-index:2;} .mgallery a:not(.on) .thumb:hover:after, .mgallery a:not(.on) .thumb:hover:before {border-width:5px;width:100%;animation:aW_nH 0.3s, sW_aH 0.3s, sW_sH 0.5s infinite;animation-delay:0s, .2s, .5s;} .mgallery .control {position:absolute;right:0;bottom:0; z-index:999; display:flex;} .mgallery .control a.prev, .mgallery .control a.next {width:56px;height:56px;line-height:56px;display:inline-block;text-align:center;color:#0C2551; background:#fff; border:1px solid #E4E4E4} .mgallery .control a.prev {border-right:none;} .mgallery .control a.next {} .mgallery .control a.prev:before, .mgallery .control a.next:before{content:"";font-family:'fontAwesome';font-size:40px;} .mgallery .control a.prev:before{content:"\f104";} .mgallery .control a.next:before{content:"\f105";} .mgallery .control a:hover {background-color:var(--main-color); border-color:var(--main-color);color:#fff;} .mgallery .more_gallery a .thumb{width:100%; height:130px; margin-bottom:10px;} .more_gallery .control_thumb.on .thumb{border:5px solid var(--main-color);} .more_gallery .control_thumb.on .thumb img{filter:brightness(0.3);} /* //mgallery*/ /* mgallery 반응형 */ @media only screen and (max-width:1440px){ .mgallery .more_gallery{width:520px;} .mgallery .more_gallery a{width:calc(100% / 3 - 10px);} } @media only screen and (max-width:1240px){ .mgallery .cont .thumb{width:420px;} .mgallery .cont .detail-wrap{width:calc(100% - 460px);} .mgallery .cont .subject{font-size:28px;} .mgallery .more_gallery{width:500px;} } @media only screen and (max-width:1023px){ .mgallery .cont .thumb{width:100%; margin:0;} .mgallery .cont .detail-wrap{width:100%; margin-top:20px;} .mgallery .more_gallery{display:none;} .mgallery .cont .txt{margin-top:20px;} } @media only screen and (max-width:767px){ .mgallery .cont .thumb{height:250px;} .mgallery .cont .subject{font-size:22px;} .mgallery .cont .txt{margin-top:10px;} .mgallery .more_btn2{right:20px; top:5px;} } @media only screen and (max-width:576px){ .mcont1{padding:40px 0;} .mgallery .control a.prev, .mgallery .control a.next{width:40px; height:40px; line-height:40px;} .mgallery .control a.prev:before, .mgallery .control a.next:before{font-size:32px;} .mgallery .cont .subject{font-size:20px;} .mgallery .cont .detail-wrap{margin-top:10px;} .mgallery .cont .txt{line-height:1.6;} .mgallery .more_btn2{bottom:-30px; right:20px; top:unset;} } /* //mgallery 반응형 */ /* mbnr*/ .mbnr{background:url(../img/mbnr_img.png) no-repeat center; padding:50px 0; width:100%; background-size:cover; font-weight:800;} .mbnr .d_width{display:flex; align-items:center; justify-content:space-between;} .mbnr .mtit{color:#fff; font-size:35px; letter-spacing:-1px; line-height:1.2;} .mbnr ul {display:flex; width:400px; justify-content:flex-end;} .mbnr ul a{color:#fff; font-size:20px; letter-spacing:-.5px; font-weight:500; transition:all .3s;} .mbnr ul li:hover{transform:translateY(-10px); transition:all .3s;} .mbnr ul li{width:calc(100% / 3); text-align:center;} .mbnr li a span:before{content:""; display:block; width:45px; height:45px; background:url(../img/mbnr-ico.png); margin:0 auto 20px; transition:all 0.3s ease 0s;} .mbnr li a span.ico-1:before{background-position:0 0 ;} .mbnr li a span.ico-2:before{background-position:-45px 0 ;} .mbnr li a span.ico-3:before{background-position:-90px 0 ;} /* //mbnr*/ /* mbnr 반응형 */ @media only screen and (max-width:1440px){ .mbnr .mtit{font-size:28px;} } @media only screen and (max-width:1240px){ .mbnr{padding:30px 0;} .mbnr .mtit{font-size:25px; line-height:1.6;} .mbnr li a span:before{margin:0 auto 10px;} } @media only screen and (max-width:1023px){ .mbnr .mtit{font-size:22px;} .mbnr ul a{font-size:18px;} } @media only screen and (max-width:767px){ .mbnr ul{width:250px;} .mbnr ul li{width:calc(100% / 2);} .mbnr li a span:before{margin: 0 auto;} .mbnr .mtit{margin-bottom:10px;} } @media only screen and (max-width:576px){ .mbnr .d_width{flex-wrap:wrap;} .mbnr .mtit{font-size:18px;} .mbnr ul{width:100%; margin-top:10px;} .mbnr ul a{font-size:16px;} } @media only screen and (max-width:415px){ .mbnr li a span:before{transform: scale(0.8);} } /* //mbnr 반응형 */ /* mprogram */ .mprogram{position:relative; z-index:1;} .mprogram:before{content:""; background:url(../img/program_back_img.png) no-repeat; display:block; width:544px; height:544px; position:absolute;top:-50px; right:50px; z-index:-1;} .mprogram .list{display:flex; margin:-20px;} .mprogram .list li.swiper-slide:not(.nodata):hover{transform:translateY(-10px); transition:all .3s; box-shadow:10px 10px 20px rgba(0, 0, 0, 0.2);} .mprogram .list li.swiper-slide{width:calc(25% - 40px);margin:20px; box-shadow:10px 20px 25px rgb(47 95 177 / 10%); border:1px solid #dadada;} .mprogram .list li.swiper-slide:nth-child(2n){margin-top:60px;} .mprogram .list .thumb{height:220px;} .mprogram .cont{background:#fff; padding:30px 20px;} .mprogram .cont .subject{font-size:25px; letter-spacing:-1px; line-height:1.2;font-weight:600; color:#333; margin-bottom:10px; overflow:hidden;text-overflow:ellipsis;word-break:break-all;word-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:64px;} .mprogram .cont .info li span:before{margin-right:5px; display:inline-block; width:15px; height:15px; text-align:center;} .mprogram .cont .info li span.time:before{content:"\f017"; font-family:fontAwesome;} .mprogram .cont .info li span.location:before{content:"\f3c5"; font-family:fontAwesome;} .mprogram .cont .info li{font-size:14px; color:#999999; letter-spacing:-1px; font-weight:500;} .mprogram .scroll{margin:50px 0 70px;height:10px;border-radius:10px;background:#8bcefe33;position:relative !important;} .mprogram .scroll .control{/*background:none;*/background:var(--main-color);} .mprogram .scroll .control:after{content:"";width:88px;height:34px;cursor:pointer;border-radius:34px;background:var(--point-color4) url(../img/drag-ico.png) no-repeat 50% 50%;box-shadow:2px 3px 10px rgba(0,0,0,0.25);position:absolute;top:-15px;left:50%;margin-left:-44px;color:#fff;padding:0 13px;font-size:8px;} .mprogram .scroll .control a:first-child{float:left;} .mprogram .scroll .control a:last-child{float:right;} .mprogram .swiper-slide:nth-of-type(4n+1){animation:fadeInTop 1s both;} .mprogram .swiper-slide:nth-of-type(4n+2){animation:fadeInTop 1s 0.2s both;} .mprogram .swiper-slide:nth-of-type(4n+3){animation:fadeInTop 1s 0.4s both;} .mprogram .swiper-slide:nth-of-type(4n){animation:fadeInTop 1s 0.6s both;} .mprogram li a:hover .cont{background:#1e1e1e;} .mprogram li a:hover .cont .subject{color:#fff;font-weight:500;} .mprogram li a:hover .txt{color:#ccc;} .mprogram li a .thumb img{transition:all .5s;} .mprogram li a:hover .thumb img{scale:1.07;} .mprogram li a:after {top:0;left:0;border-top:7px solid;border-right:7px solid;} .mprogram li a:before {bottom:0;right:0;border-bottom:7px solid;border-left:7px solid;} .mprogram li a:before, .mprogram li a:after {content:"";position:absolute;width:0%;height:0%;z-index:1;border-color:var(--main-color);border-width:0;z-index:2;} .mprogram li a:hover:after, .mprogram li a:hover:before {border-width:7px;width:100%;animation:aW_nH 0.3s, sW_aH 0.3s, sW_sH 0.5s infinite;animation-delay:0s, .2s, .5s;} /* //mprogram */ /*mprogram 반응형*/ @media only screen and (max-width:1440px){ } @media only screen and (max-width:1240px){ .mprogram .list li.swiper-slide{width:calc(33.33% - 40px);} .mprogram .list .thumb{height:200px;} .mprogram .cont .subject{font-size:22px;} } @media only screen and (max-width:1023px){ .mprogram .list li.swiper-slide{width:calc(50% - 40px);} .mprogram .list .thumb{height:180px;} .mprogram .cont{padding:20px;} } @media only screen and (max-width:767px){ .mprogram .more_btn2{right:20px; top:5px;} .mprogram .list{margin:20px -10px;} .mprogram .cont .subject{font-size:20px;} .mprogram .list li.swiper-slide{width:calc(50% - 20px); margin:0 10px !important;} } @media only screen and (max-width:415px){ .mprogram .list{margin:30px -10px;} .mprogram .more_btn2{top:30px;} .mprogram .list li.swiper-slide{width:calc(100% - 20px);} .mprogram .scroll .control:after{margin-left:-20px;} } /*//mprogram 반응형*/ /* mnotice*/ section.mcont3{background:#F7F8FA;} .mnotice-top{display:flex; align-items:center; position:relative;} .mnotice-top .tab{margin-left:20px;} .mnotice .tab a{font-size:20px; font-weight:600; position:relative; padding:0 20px;} .mnotice .tab a:hover{color:var(--main-color);} .mnotice .tab a:not(:last-child):after{content:""; width:6px; height:6px; border-radius:50%; display:block; background-color:#CDD6DD; position:absolute; right:0; top:50%; transform:translateY(-50%);} .mnotice .tab a.on{color:var(--main-color);} .mnotice .mnotice_list{display:flex; flex-wrap:wrap; margin:-20px;} .mnotice .mnotice_list li{width:calc(25% - 40px); margin: 20px; background:#fff;} .mnotice .mnotice_list li:hover{background:var(--sub-color);} .mnotice .mnotice_list li:hover p{color:#fff;} .mnotice .mnotice_list li:hover .subject span {color:#fff;} .mnotice .mnotice_list li:hover .date{color:#fff;} .mnotice .mnotice_list .detail-wrap{padding:30px;} .mnotice .mnotice_list .desc{-webkit-line-clamp:3;} .mnotice .mnotice_list .subject{font-size:23px; font-weight:600; letter-spacing:-.8px; line-height:1.2; color:#000; min-height:65px; text-overflow:ellipsis; word-break:break-all;word-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;} .mnotice .mnotice_list .txt-clamp{font-size:17px; margin:10px 0; min-height:76px;} .mnotice .mnotice_list .date{padding:15px 30px; display:block; border-top:1px solid #CDD6E0; font-size:13px; color:#999999;} .mquick2 {display:flex; background:var(--main-color); margin-top:40px; flex-wrap:wrap;} .mquick2 li{width:25%; position:relative;} .mquick2 li:not(:last-child){border-right:1px solid rgba(255,255,255,.2);} .mquick2 li a{font-size:19px; color:#fff;padding:30px; letter-spacing:-1px; display:flex; justify-content:space-between; transition:all .3s;} .mquick2 li a:hover{background:var(--sub-color); color:#fff;} .mquick2 .more_btn2{position:relative;} .mnotice .mnotice_list .subject span{background:linear-gradient(to bottom, transparent 94%, #fff 0) left center no-repeat;background-size:0;transition:all .3s;} .mnotice .mnotice_list a:hover .subject span{background-size:100%;color:#fff;} /* //mnotice*/ /* mnotice 반응형 */ @media only screen and (max-width:1440px){ .mnotice .mnotice_list .subject{font-size:22px;} } @media only screen and (max-width:1240px){ .mnotice .mnotice_list{margin:-10px;} .mnotice .mnotice_list li{width:calc(25% - 20px); margin:10px;} .mnotice .mnotice_list .subject{font-size:20px; min-height:72px;} .mnotice .mnotice_list .txt-clamp{font-size:16px; margin:20px 0 10px 0;} .mquick2 li a{font-size:18px;} .mquick2 li a{padding:20px;} } @media only screen and (max-width:1023px){ .mnotice .mnotice_list li{width:calc(50% - 20px);} .mnotice .mnotice_list .subject{font-size:22px;} .mnotice .mnotice_list .txt-clamp{margin:10px 0;} } @media only screen and (max-width:767px){ .mnotice .mnotice_list .subject{min-height:60px;} .mquick2{margin-top:30px;} .mnotice .tab a{font-size:18px; padding:0 15px;} .mnotice-top .tab{margin:0 0 10px 10px;} .mnotice .mnotice_list .subject{font-size:20px; min-height:50px;} .mnotice .mnotice_list .txt-clamp{margin:10px 0 0 0;} .mnotice .more_btn2{right:20px; top:5px;} .mquick2 li{width:50%;} .mquick2 .more_btn2{right:0; top:0;} .mquick2 li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2);} } @media only screen and (max-width:576px){ .mnotice-top{flex-wrap:wrap;} .mnotice-top .tab{margin:0 0 10px 10px; width:100%;} .mnotice .tab a:first-child{padding:0 10px 0 0;} .mnotice .tab a:not(:last-child):after{right:-5px;} } @media only screen and (max-width:415px){ .mnotice .mnotice_list{margin:0;} .mnotice .mnotice_list li{width:100%; margin:0;} .mnotice .mnotice_list li:not(:first-child){margin-top:20px;} .mnotice .mnotice_list li:nth-child(n+3){display:none;} .mnotice .mnotice_list .detail-wrap{padding:15px;} .mnotice .mnotice_list .date{padding:20px 15px;} .mquick2 {margin-top:20px;} .mquick2 li { width:100%;} .mquick2 li a{font-size:16px; padding:15px;} .mquick2 li:nth-child(3){border-bottom:1px solid rgba(255,255,255, .2);} .mnotice .more_btn2{top:45px;} .mquick2 .more_btn2{top:0;} } /* //mnotice 반응형 */ /* keyword */ .mkey-list{display:flex; margin: -20px; flex-wrap:wrap;} .mkey-list > li{width:calc(20% - 40px); margin:20px; padding:30px 40px 40px 30px;} .mkey-list > li:nth-child(1){background:#0287D7;} .mkey-list > li:nth-child(2){background:#017398;} .mkey-list > li:nth-child(3){background:#01797E;} .mkey-list > li:nth-child(4){background:#02A87E;} .mkey-list > li:nth-child(5){background:#628AE8;} .mkey-list .tit{font-size:24px; font-weight:800; letter-spacing:-1px; display:flex; align-items:center; margin-bottom:10px; color:#fff;} .mkey-list .tit:before{content:""; background:url(../img/keyword_ico.png); display:inline-block; width:30px; height:30px; margin-right:5px;} .mkey-list a{color:#fff; display:block; font-weight:400; margin:2.5px 0;} .mkey-list a:hover{color:#ffffcc;} .mkey-list > li:nth-child(1) .tit:before{background-position:0 0 ;} .mkey-list > li:nth-child(2) .tit:before{background-position:-30px 0 ;} .mkey-list > li:nth-child(3) .tit:before{background-position:-60px 0 ;} .mkey-list > li:nth-child(4) .tit:before{background-position:-90px 0 ;} .mkey-list > li:nth-child(5) .tit:before{background-position:-120px 0 ;} /* //keyword*/ /* keyword 반응형 */ @media only screen and (max-width:1240px){ .mkey-list{margin:-10px;} .mkey-list > li{width:calc(20% - 20px); margin:10px; padding:20px;} .mkey-list .tit{font-size:22px;} } @media only screen and (max-width:1023px){ .mkey-list > li{width:calc(33.33% - 20px);} .mkey-list .tit{font-size:18px;} } @media only screen and (max-width:767px){ .mkey-list{margin:-5px;} .mkey-list > li{width:calc(50% - 10px); margin:5px;} } @media only screen and (max-width:576px){ .mkey-list > li{width:100%;} } @media only screen and (max-width:415px){ .mkey-list > li{padding:15px;} } /* //keyword 반응형 */ /*sub*/ #wrap.sbg{height:120px;} #sub-visual{color:#fff;line-height:1.1;position:relative;overflow:hidden;padding:100px 0 0;} #sub-visual .d_width{padding:90px 0;} .sub-section > .d_width{position:static;} #sub-visual .svbg{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/svbg.png) no-repeat 50% 50% / cover;animation-name:sv-zoom;animation-duration:4s;animation-timing-function:ease-out;} #sub-visual .svimg2{background:url(../img/svbg2.png) no-repeat 50% 50% / cover;} #sub-visual .svimg3{background:url(../img/svbg3.png) no-repeat 50% 50% / cover;} #sub-visual .svimg4{background:url(../img/svbg4.png) no-repeat 50% 50% / cover;} #sub-visual .svimg5{background:url(../img/svbg5.png) no-repeat 50% 50% / cover;} #sub-visual p{position:relative;} #sub-visual p:nth-child(1){font-size:26px;animation-timing-function:ease-in;animation-duration:0.5s; margin-bottom:10px;} #sub-visual p:nth-child(2){font-size:50px;font-weight: 800;animation-timing-function:ease-in;animation-duration:0.5s;} #snb{background:inherit; position:sticky; top:110px;} #snb .sub-tit{width:calc(50% - 440px);padding:60px 0;background:linear-gradient(90deg, rgba(32,69,120,1) 0%, rgba(0,117,234,1) 100%);margin-top:-100px;position:relative;} #snb .sub-tit h1{width:260px;float:right;color:#fff;font-size:40px;font-weight:800;margin:0;animation-timing-function:ease-in;animation-duration:0.3s;} #snb ul{width:260px;float:left;animation-timing-function:ease-in;animation-duration:0.3s;} #snb li a{display:block;line-height:60px;border-bottom:1px solid #E4E4E4;font-size:18px;position:relative;transition:all 0.3s; letter-spacing:-.5px;} #snb li a::before{content:"\f054";font-family:fontAwesome;position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:#999;font-weight:900;transition:all 0.3s;} #snb li.on a{color:var(--main-color);font-weight:800;} #snb li.on a::before{color:var(main-color);} #snb li a:hover{font-weight:600;color:#204578;border-bottom:1px solid #204578;padding-left:5px;} #snb li a:hover:before{color:#204578;right:5px;} .sub-content{width:calc(100% - 260px - 40px);float:right; padding-bottom:120px;} .sub-content .location{margin-top:-25px;} .sub-content .location li{float:left;} .sub-content .location li a{font-size:16px;} /*.sub-content .location ul li a:last-child{color:var(--main-color);}*/ .sub-content .location ul li a:last-of-type{color:var(--main-color);} .sub-content .location .home{width:20px;height:20px;display:block;background:url(../img/home_ico.png) no-repeat;} .sub-content .location li::before{content:"▶";color:#ccc;font-size:10px;margin:0 10px;} .sub-content .location .home::before{display:none;} #body-head{margin:20px 0 30px;} #body-head h2{font-size:40px;color:#333;float:left;line-height:1;font-weight: 800;margin:0;} .pnb{float:right;position:relative;} .pnb ul{border:1px solid #e1e1e1;border-radius:5px;float:left;margin:0 10px;} .pnb li{float:left;line-height:40px;border-right:1px solid #e1e1e1;} .pnb li:last-child{border-right:none;} .pnb li a{width:30px;line-height:30px;text-align:center;font-size:13px;color:#ccc;display:block;} .pnb .ico-share{width:20px;height:22px;display:inline-block;background:url(../img/share_ico.png);margin:4px 10px;} .pnb .ico-print{width:22px;height:19px;display:inline-block;background:url(../img/print_ico.png);margin:5px 10px;margin-right:0px;} .pnb .share {position: absolute;right: 0;top: 50px;z-index: 9999;background: #fff;border: 1px solid #8C817B;padding: 15px 15px 15px 10px;box-shadow: 0 2px 6px rgb(0 0 0 / 20%);width: 202px;border-radius: 6px;} .pnb .share a {display:block;float:left;margin-left:5px;width:30px;height:30px;border-radius:0;background-repeat:no-repeat;background-position:50% 50%;background-size:30px 30px;border-radius:50%;} .pnb .share span {display:none;} .pnb .share a.kakao {background-image:url(../img/ico_kakao.png)} .pnb .share a.kakaostory{background-image:url(../img/ico_kakaostory.png)} .pnb .share a.facebook {background-image:url(../img/ico_facebook.png)} .pnb .share a.twitter {background-image:url(../img/ico_twitter.png)} .pnb .share a.blog {background-image:url(../img/ico_blog.png)} #mo-snb { display:none; } /* sub틀 반응형 */ @media only screen and (max-width:1440px){ .c_width {width:900px;} #snb .sub-tit{width:calc(50% - 340px);} } @media only screen and (max-width:1240px){ .c_width{width:660px;} #snb .sub-tit{width:calc(50% - 220px);} #sub-visual p:nth-child(1){font-size:22px;} #sub-visual p:nth-child(2){font-size:42px;} #sub-visual .d_width{padding:70px 0;} #snb .sub-tit{padding:40px 0; margin-top:-60px;} #snb .sub-tit h1{font-size:28px;} #snb{display:none;} #mo-snb {position:relative;display:block;width:100%;background:#3D4567;z-index:99;} #mo-snb .bx {position:relative;float:left;min-width: 220px;} #mo-snb a.selected {display: block;padding: 0 40px 0 20px;line-height: 50px;color: rgba(255,255,255,0.6);font-size: 15px;background: rgba(0,0,0,0.15);border-right: 1px solid rgba(255,255,255,0.2);white-space:nowrap;} #mo-snb a.selected:after {content:"\f078";font-family:FontAwesome;font-weight:900;position:absolute;right:10px;top:calc(50% - 15px);display:block;width:30px;height:30px;line-height:30px;border-radius:50%;text-align:center;color:rgba(255,255,255,0.6);font-size:0.9rem} #mo-snb .bx.here a.selected {color:#fff;} #mo-snb .bx.here a.selected:after {color:#fff;} #mo-snb .bx ul {position:Absolute;left:-1px;top:50px;width:100%;display:none;transition:all ease-out 0.2s;border-top:none;background:#fff;z-index:9;box-shadow:0 10px 10px rgba(0,0,0,0.1)} #mo-snb .bx ul li {position:relative;cursor:pointer;} #mo-snb .bx ul li a {display: block;width:100%;padding:0 20px;color:#888;font-size: 15px;line-height:40px;background:#f9f9f9;border-bottom:1px solid #e7e7e7;border-right: 1px solid rgba(255,255,255,0.2);white-space:nowrap;} #mo-snb .bx ul li a:hover {background:#D7E6F7;color:#111} #mo-snb > ul > li:last-child:after, #mo-snb > ul > li:last-child > span, #mo-snb > ul > li:last-child > a {color:#fff;} #sub-visual{padding:0;} .c_width{width:100%;} .sub-content{width:100%; float:none;} .sub-section{padding:20px;} .sub-content .location{margin-top:0;} h2 {font-size:22px;} h3 {font-size:20px;} h4 {font-size:18px;} h5 {font-size:1rem;} } @media only screen and (max-width:1023px){ #body_head h1 {font-size:28px;} #sub-content {float:none;width:960px;margin:0 auto;} .sub-container {padding:20px;} .sub-wrap .d_width{width:auto;} .fbnr .d_width{padding:20px;} footer .d_width{padding:40px 20px;} #sub-visual p:nth-child(1){font-size:20px;} #sub-visual p:nth-child(2){font-size:36px;} .pnb{display:none;} .sub-content{padding-bottom:60px;} } @media only screen and (max-width:767px){ #body-head h2{font-size:28px;} h3{font-size:20px;} h3:before{transform:scale(0.7); margin-right:5px;} h2 {margin:15px 0 15px 0;} h3,h4,h5 {margin:15px 0 10px 0} } @media only screen and (max-width:576px){ #mo-snb .bx.mobile_none{display:none;} #mo-snb .bx.here{width:100%;} #sub-visual .d_width{padding:50px 0;} #body-head h2{font-size:24px;} h3{font-size:18px;} #sub-visual p:nth-child(1){font-size:16px;} #sub-visual p:nth-child(2){font-size:28px;} } @media only screen and (max-width:415px){ .sub-content{padding-bottom:30px;} .sub-section .d_width{padding:0;} } /* //sub틀 반응형 */ /* 인사말[S] */ .greeting .greeting-bx{background:url(../img/greeting_bg.png) no-repeat; background-size:cover; padding:70px 40px;position:relative; margin-top:120px;} .greeting .greeting-bx:before{content:""; background:url(../img/greeting.png) no-repeat; width:500px; height:447px; display:block; position:absolute; right:0; bottom:0;} .greeting .greeting-bx p{color:#fff;} .greeting .greeting-bx .stit{font-size:25px; letter-spacing:-1px;} .greeting .greeting-bx .tit{font-size:35px; letter-spacing:-1px; font-weight:800;margin-bottom: 40px ;} .greeting .greeting-bx .tit em{font-weight:600; color:#fff;} .greeting .greeting-bx .name{font-weight:600; letter-spacing:-.2px; display:flex; align-items:center;} .greeting .greeting-bx .sign{font-family:'Nanum-B'; font-size:32px; font-weight:300; margin-left:10px;} .greeting .cont{padding:40px 0 ;} .greeting .cont p{font-size:18px; letter-spacing:-.5px; color:#333333; word-break:keep-all;} .greeting .cont .txt-lg{font-size:26px; font-weight:600; color:#121314; line-height:1.5;} .greeting .cont .point{color:var(--main-color); font-weight:600;} .greeting .cont .name{font-size:23px; letter-spacing:-.5px; font-weight:600; display:flex; align-items:center;} .greeting .cont .sign{font-size:54px; letter-spacing:10px; margin-left:20px; font-weight:300; font-family:'Nanum-B';} .greeting .line_blank{display:block;height:30px; clear:both;} /*인사말 반응형[S]*/ @media only screen and (max-width:1440px){ .greeting .greeting-bx{margin-top:60px;} .greeting .greeting-bx:before{background:url(../img/greeting.png) no-repeat 100% 100%; background-size:85%;} .greeting .greeting-bx .tit{font-size:32px;} } @media only screen and (max-width:1023px){ .greeting .greeting-bx{margin-top:40px; padding:40px;} .greeting .greeting-bx:before{background-size:70%;} .greeting .greeting-bx .stit{font-size:18px;} .greeting .greeting-bx .tit{font-size:24px; margin-bottom:30px;} .greeting .cont{padding:20px 0;} .greeting .cont .txt-lg{font-size:20px;} .greeting .cont p{font-size:16px;} .greeting .cont .name{font-size:20px;} .greeting .cont .sign{font-size:45px;} } @media only screen and (max-width:767px){ .greeting .greeting-bx{height:400px;} .greeting .greeting-bx .tit{margin-bottom:10px;} .greeting .greeting-bx:before{background-size:60%;} .greeting .line_blank{height:20px;} } @media only screen and (max-width:576px){ .greeting .greeting-bx{height:350px;padding:30px;} .greeting .greeting-bx:before{background-size:cover; width:250px; height:240px;} .greeting .greeting-bx .stit{font-size:16px; text-align:center;} .greeting .greeting-bx .tit{font-size:20px;text-align:center;} .greeting .greeting-bx .name{justify-content:center;} .greeting .greeting-bx .sign{font-size:24px;} .greeting .cont .txt-lg{font-size:18px;} .greeting .cont .name{flex-wrap:wrap; justify-content:flex-end; font-size:18px;} .greeting .cont .sign{font-size:35px;} } @media only screen and (max-width:450px){ .greeting .greeting-bx p{display:none;} .greeting .greeting-bx .name{display:none;} .greeting .greeting-bx{height:auto;} .greeting .greeting-bx:before{background-size:70%;} .greeting .line_blank{height:10px;} } /*인사말 반응형[E]*/ /*//인사말[E] */ /* 사업개요 및 소개[S]*/ .goal .vision{text-align:center; } .goal .vision p{font-size:18px; display:inline-block; width:630px; padding:15px; text-align:center; border:5px solid #607A99; border-radius:50px; font-weight:600; color:#121314; letter-spacing:-.75px; line-height:1.2;} .goal .vision em{color:#607A99; font-weight:800; margin-right:15px;} .goal_bx{background:#F2F6F9; padding:20px 40px; display:flex; margin:20px 0 ; border-radius:5px;} .goal_bx p{width:100px; color:#204578; font-size:18px; letter-spacing:-.75px; font-weight:800;} .goal_bx li:not(:first-child){margin:10px 0;} .goal_bx li{ display:flex; align-items:center;} .goal_bx li span{color:#204578; font-weight:600; margin-right:15px; letter-spacing:-.75px;} .goal_bx li span em{font-weight:800; color:var(--main-color); font-size:12px; margin-right:5px;} .expect_bx{border:1px solid var(--main-color); border-radius:5px; padding:20px 40px; display:flex;} .expect_bx p{width:100px; color:#204578; font-size:18px; letter-spacing:-.75px; font-weight:800;} .expect_bx li{color:#333;} /* 사업개요 및 소개 반응형*/ @media only screen and (max-width:1023px){ .goal_bx{flex-wrap:wrap;} .goal_bx li span{min-width:200px;} .expect_bx{flex-wrap:wrap;} } @media only screen and (max-width:768px){ .goal .vision p{width:100%; font-size:16px;} .goal_bx{padding:20px;} .goal_bx li span{width:100%;} .goal_bx li{flex-wrap:wrap;} .expect_bx{padding:20px;} } @media only screen and (max-width:415px){ .goal_bx li:not(:first-child){margin:5px 0;} } /* //사업개요 및 소개[E]*/ /* 조직도 [S]*/ .department .thumb{height:160px;} .department.col_wrap{display:flex; margin:0 -20px;} .department .col_d3{width:calc(33.33% - 20px); margin:0 20px;} .department .cont .tit{font-size:20px; font-weight:600; margin:20px 0 10px 0; letter-spacing:-.7px;} .department .cont .info p{font-size:15px; display:flex; align-items:center; margin:5px 0;} .department .cont .info span{color:#607A99; letter-spacing:-.3px; font-weight:600; margin-right:15px; display:flex; align-items:center;} .department .cont .info span:before{content:""; width:18px; height:18px; display:inline-block; margin-right:5px; background:url(../img/detail-ico2.png) no-repeat; vertical-align:middle;} .department .cont .info span.home:before{background-position: -18px 0;} @media only screen and (max-width:1023px){ .department.col_wrap{flex-wrap: wrap;} .department .col_d3{width:calc(50% - 40px); margin:0 20px;} .department .col_d3:not(:last-child){margin-bottom:20px;} } @media only screen and (max-width:767px){ .department .cont .tit{font-size:18px;} .department .col_d3{width:100%;} .department .cont .tit{margin:10px 0;} } @media only screen and (max-width:576px){ .department .col_d3:not(:last-child){margin-bottom:10px;} } /* 조직도 [E]*/ /* 오시는길[S]*/ .map .detail-wrap{background:linear-gradient(90deg, rgba(32,69,120,1) 0%, rgba(0,117,234,1) 100%);margin:20px 0 40px 0; padding:20px 30px; display:flex; align-items:center; justify-content:space-between; min-height:80px;} .map .detail-wrap .row{align-items:center;} .map .detail-wrap .address{color:#fff;} .map .detail-wrap .address .tit{font-size:20px; font-weight:600;} .map .detail-wrap .address .tit:after{content:""; border-right:1px solid rgba(255,255,255,.5); margin:0 10px; display:inline-block; height:15px;} .map .detail-wrap ul li{color:#fff; font-size:15px; font-weight:600; letter-spacing:-.3px; font-weight:400; display:flex;} .map .detail-wrap ul li:last-child{margin-left:10px;} .map .detail-wrap ul li span{margin-left:5px;} .transport{justify-content:space-between;} .transport .ico-wrap{width:84px;} .transport .ico-wrap img{margin-bottom:10px;} .transport .cont{width:calc(100% - 124px);} .transport .cont .tit{font-size:20px;font-weight:600;letter-spacing:-1px;color:#000; border-bottom:1px solid #DADADA; padding-bottom:10px;} .transport .cont ul{margin:20px 0 15px 0;} .transport.down-wrap{flex-wrap:wrap;} .transport.down-wrap .down-bx.d2{width:calc(50% - 20px);} /* 오시는길 반응형 */ @media only screen and (max-width:1023px){ .map .detail-wrap{flex-wrap:wrap; margin:20px 0;} } @media only screen and (max-width:767px){ #naver_map{height:400px !important;} .map .detail-wrap ul li{width:50%;} .map .detail-wrap ul li:last-child{margin-left:0;} .map .detail-wrap .address .tit{font-size:18px;} .transport .cont .tit{font-size:18px;} .transport .cont ul{margin:10px 0;} } @media only screen and (max-width:576px){ #naver_map{height:300px !important;} .map .detail-wrap .address{font-size:14px;} .map .detail-wrap{padding:20px;} .map .detail-wrap ul li{width:100%;} .transport .ico-wrap{width:100%;} .transport .cont{width:100%;} .transport .ico-wrap img{margin-bottom:0;} } /* 오시는길[E]*/ /*교육개요*/ .top-info{background:#F6F6F6; padding:20px; color:#333333;} /*//교육개요*/ /* 마이크로 디그리 [S] */ .degree-bx{padding:40px; border:1px solid #DADADA; position:relative;} .degree-bx.micro{background:url(../img/micro-bg.png) no-repeat 95% 100%;} .degree-bx.nano{background:url(../img/nano-bg.png) no-repeat 100% 100%;} .degree-bx .tit{font-size:26px; letter-spacing:-1px; color:#000; font-weight:600; border-bottom:1px solid #CFD8DF; padding-bottom:25px; width:80%;} .degree-bx .txt{margin-top:30px;} .degree-bx2{padding:40px; display:flex;} .degree-bx2.micro2{background:#F2F6F9;} .degree-bx2 .l-cont{width:500px;} .degree-bx2 .r-cont{width:calc(100% - 540px); margin-left:40px; display:flex; align-items:center; position:relative;} .degree-bx2 .l-cont .tit{font-size:26px; font-weight:600; letter-spacing:-1px; color:#000; padding-bottom:25px; border-bottom:1px solid #CFD8DF;} .degree-bx2 .l-cont .tit span{color:var(--main-color); font-size:18px; margin-left:10px;} .degree-bx2 .l-cont .tit:before{content:""; margin-right:10px;width:24px; height:24px; background:url(../img/h3_bullet.png); display:block;} .degree-bx2 .l-cont .stit{font-size:18px; font-weight:600; letter-spacing:-1px; color:var(--main-color); margin-top:30px;} .degree-bx2 .r-cont .circle-wrap{position:relative; width:200px;} .degree-bx2 .r-cont .circle{border-radius:50%;} .degree-bx2 .r-cont .circle-1{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);width:115px; height:115px; background:#fff; line-height:115px; font-size:18px; font-weight:600; letter-spacing:-1px; text-align:center; z-index:2;} .degree-bx2 .r-cont .circle-2{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:150px; height:150px; background:linear-gradient(90deg, rgba(32,69,120,1) 0%, rgba(0,117,234,1) 100%);z-indeX:1;} .degree-bx2 .r-cont .circle-3{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:200px; height:200px; background:rgba(0,116,232,6%);} .degree-bx2 .r-cont .badge-wrap{margin-left:40px; position:relative;} .degree-bx2 .r-cont .badge-wrap:before{content:""; border-left:1px solid #ccc; position:absolute; left:-15px;top:50%; height:71%; transform:translateY(-50%);} .degree-bx2 .r-cont .badge-wrap p{font-weight:500; background:#fff; border-radius:25px; padding:10px 25px; text-align:center; position:relative; box-shadow:1px 2px 3px #ccc; min-width:220px;} .degree-bx2.micro2 .r-cont .badge-wrap p:nth-child(2){margin:10px 0;} .degree-bx2.micro2 .r-cont .badge-wrap p:nth-child(2):before{width:40px; left:-18%;} .degree-bx2 .r-cont .badge-wrap p:before{content:"";position:absolute; z-index:0; border-top:1px solid #CCCCCC; width:15px; left:-7%; top:50%; transform:translateY(-50%);} .degree-bx2.nano2{background:#F6F6F6;} .degree-bx2.nano2 .r-cont .badge-wrap:before{height:55%;} .degree-bx2.nano2 .r-cont .badge-wrap p:nth-of-type(2){margin-top:10px;} .degree-bx2.nano2 .r-cont .badge-wrap:after{content:""; border-top:1px solid #ccc; position:absolute; left:-18%; top:50%; transform:translateY(-50%); width:25px;} /* 마이크로 디그리 반응형 */ @media only screen and (max-width:1440px){ .degree-bx2 .l-cont{width:450px;} .degree-bx2 .r-cont .badge-wrap{margin-left:140px;} } @media only screen and (max-width:1023px){ .degree-bx{padding:30px;} .degree-bx .tit{font-size:22px; padding-bottom:15px;} .degree-bx .txt{margin-top:15px; width:80%; } .degree-bx .txt br{display:none;} .degree-bx.micro{background-size:15%;} .degree-bx.nano{background-size:15%;} .degree-bx2 {padding:30px; flex-wrap:wrap;} .degree-bx2 .l-cont{width:100%;} .degree-bx2 .l-cont .tit{font-size:22px; padding-bottom:15px; display:flex; align-items:center;} .degree-bx2 .l-cont .tit:before{display:inline-block;} .degree-bx2 .l-cont .stit{margin-top:15px;} .degree-bx2.nano2 .r-cont{margin:50px 0 30px 0;} .degree-bx2 .r-cont{width:100%;} .degree-bx2 .r-cont{margin-top:30px; margin-left:0;} .degree-bx2 .r-cont .circle-1{width:85px; height:85px; line-height:85px; font-size:16px;} .degree-bx2 .r-cont .circle-2{width:120px; height:120px;} .degree-bx2 .r-cont .circle-3{width:170px; height:170px;} .degree-bx2 .r-cont .circle-wrap{width:170px;} .degree-bx2 .r-cont .badge-wrap{margin-left:40px;} .degree-bx2 .r-cont .badge-wrap p{min-width:420px;} .degree-bx2.micro2 .r-cont .badge-wrap p:nth-child(2):before{width:75px;} .degree-bx2 .r-cont .badge-wrap:before{left:-25px;} .degree-bx2 .r-cont .badge-wrap p:before{left:-6%; width:24px;} .degree-bx2.nano2 .r-cont .badge-wrap:after{left:-12%;} } @media only screen and (max-width:767px){ .degree-bx {padding:20px;} .degree-bx .tit{font-size:18px; padding-bottom:10px;} .degree-bx .txt{margin-top:10px;} .degree-bx2{padding:20px;} .degree-bx2 .l-cont .tit{font-size:18px; padding-bottom:10px;} .degree-bx2 .l-cont .stit{font-size:16px; margin-top:10px;} .degree-bx2 .r-cont .badge-wrap p{min-width:220px;} .degree-bx2 .r-cont .circle-wrap{width:150px;} .degree-bx2 .r-cont .circle-3{width:150px; height:150px;} .degree-bx2 .r-cont .circle-2{width:100px; height:100px;} .degree-bx2 .r-cont .circle-1{width:65px; height:65px; line-height:65px; font-size:14px;} .degree-bx2.nano2 .r-cont{margin:30px 0;} .degree-bx2 .r-cont{margin-top:20px;} .degree-bx2 .r-cont .badge-wrap p:before{left:-11%;} .degree-bx2.micro2 .r-cont .badge-wrap p:nth-child(2):before{width:50px; left:-23%;} .degree-bx2.nano2 .r-cont .badge-wrap:after{left:-22%;} } @media only screen and (max-width:576px){ .degree-bx .tit{width:100%;} .degree-bx .txt{width:100%;} .degree-bx.micro{background:none;} .degree-bx.nano{background:none;} .degree-bx2 .l-cont .tit{flex-wrap:wrap;} .degree-bx2 .r-cont{margin-top:80px;flex-wrap:wrap; justify-content:center;} .degree-bx2 .r-cont .circle-wrap{width:100%;} .degree-bx2.nano2 .r-cont{margin:80px 0 0 0;} } .degree-bx2 .r-cont .badge-wrap{margin-top:80px; margin-left:0;} .degree-bx2 .r-cont .badge-wrap:before{left:50%;} .degree-bx2 .r-cont .badge-wrap p:before{display:none;} .degree-bx2 .r-cont .circle-3{width:140px; height:140px;} .degree-bx2.nano2 .r-cont .badge-wrap:after{display:none; } /* //마이크로 디그리 [E]*/ /* 프로그램안내[S] */ .program-view .thumb{height:240px;} .program-view .thumb .num {position:absolute; right:20px; bottom:20px; width:40px; height:40px; line-height:40px; border-radius:50%; background:#000000; color:#fff; z-index:1; text-align:center; font-size:14px; font-weight:800;} .program-view > .row{margin:-20px; justify-content:flex-end;} .program-view .col_d2{width:calc(50% - 40px); margin:20px;} .program-view .cont .tit{font-size:20px; font-weight:600; margin:20px 0; letter-spacing:-1px;} .program-view .info li{color:#333;} .program-view .info span{color:#607A99; letter-spacing:-.3px; margin-right:15px; font-weight:600; width:60px; display:inline-block;} .program-view .info .detail-list li{width:calc(100% - 75px);} .program-view .info .detail-list li:not(:nth-of-type(1)){margin-left:75px;} /* 프로그램 안내 반응형*/ @media only screen and (max-width:1023px){ .program-view .cont .tit{font-size:18px; margin:10px 0;} .program-view .info span{margin-right:10px;} .program-view > .row{margin:-10px;} .program-view .col_d2{width:calc(50% - 20px); margin:10px;} .program-view .thumb .num{right:10px; bottom:10px;} } @media only screen and (max-width:767px){ .program-view .info li{display:flex; flex-wrap:wrap;} .program-view .info span{width:100%; margin-right:0;} .program-view .info .detail-list li{width:100%;} .program-view .info .detail-list li:not(:nth-of-type(1)){margin-left:0;} } @media only screen and (max-width:576px){ .program-view .thumb{height:150px;} .program-view .col_d2{width:100%;} } /* //프로그램안내[E] */ /* 협력기관 [S] */ .company{background:#F2F6F9 url(../img/company_back.png) no-repeat center / cover; padding:150px 0 250px 0; position:relative; min-height:960px; display:flex; align-items:center; justify-content:center;} .company .cont{padding:0px 40px;} .company .cont li{width:25%; padding:15px 30px;text-align:center; border-right:1px solid rgba(0,0,0,10%); border-bottom:1px solid rgba(0,0,0,10%);} .company .cont li:nth-child(4n){border-right:unset;} .company .cont li:nth-child(n+13){border-bottom:unset;} .company .cont li .logo{position:relative; width:100%; height:60px; display:flex; align-items:center; justify-content:center;} .company .cont li .name{font-weight:500; margin-top:10px;} .partner{background:#F2F6F9 url(../img/company_back2.png) no-repeat center / cover; padding:150px 130px 250px; position:relative; min-height:730px; overflow:hidden;} .partner .collabo_swiper{overflow-X:hidden;} .partner li{ background:#fff; margin:20px; padding:50px 20px; box-shadow:2px 2px 20px 0px #ccc; width:240px !important; height:300px;} .partner li .logo{position:relative; width:100%;display:flex; align-items:center; justify-content:center; min-height:130px;} .partner li .name{font-weight:600; margin-top:20px; font-size:18px; text-align:center; word-break:keep-all; line-height:1.2;} /*협력기관 반응형*/ @media only screen and (max-width:1440px){ .partner {padding:150px 60px 250px;} .partner li{width:220px !important;} } @media only screen and (max-width:1240px){ .partner li{width:240px !important;} } @media only screen and (max-width:1023px){ .company{min-height:660px; padding:100px 0 150px 0;} .company .cont li .logo{transform:scale(0.7); margin-top:0;} } @media only screen and (max-width:767px){ .company{min-height:auto; padding:100px 0;} .company .cont li{width:50%; padding:10px;} .company .cont li:nth-child(2n){border-right:unset;} .company .cont li:nth-child(13n){border-bottom:1px solid rgba(0,0,0,10%);} .company .cont li:nth-child(14n){border-bottom:1px solid rgba(0,0,0,10%);} .company .cont li .name{margin-top:0;} } @media only screen and (max-width:576px){ .company .cont li .logo{transform:scale(0.5);} } /* 협력기관 [E] */ /* 프로그램 신청 */ .db-search {} .db-search .bx-round {position:relative;background:var(--basic-bg);} .db-search .search-bx {padding:30px 20%;} .db-search .search-pp {font-size:15px;margin-top:10px;color:var(--main-color);} .db-search .search-pp em {display:inline-block;margin-right:10px} .db-search .search-pp a {color:#888;display:inline-block;margin-right:5px;text-decoration:underline;} .db-search .form-bx {display:flex;flex-flow:row} .db-search .form-bx .btn-d {width:110px;margin-left:10px;line-height:46px;} .db-search .formarea {position:Relative;border:2px solid var(--main-color);border-radius:4px;width:calc(100% - 120px)} .db-search .formarea input {width:100%;border:none;border-radius:4px;line-height:46px;padding:0 10px;color:var(--main-color);font-weight:600;font-size:20px;} .db-search .formarea input:focus {box-shadow:inset 0 2px 2px rgba(0,0,0,0.1),0 4px 20px rgba(0,92,176,0.1);outline:0;} .db-search .formarea a {position:Absolute;right:0;top:0;display:block;text-align:Center;width:50px;line-height:46px;font-size:1.25rem;color:var(--main-color);} .db-search .filter {padding:15px 40px;border-top:1px solid rgba(0,0,0,0.05)} .db-search .filter dl {display:flex;flex-flow:row wrap;line-height:35px;margin:5px 0;} .db-search .filter dt {width:100px;font-weight:700;color:var(--main-color);} .db-search .filter dd {width:calc(100% - 100px);} .db-search .filter ul {display:flex;flex-flow:row wrap;} .db-search .filter ul li {/*flex:0 1 16.6666%;*/} .db-search .filter label {margin-right:10px;} .db-search .btnarea a {width:140px;} /* [S]241014 비교과 css */ .lms-category {font-size:var(--font-base);color:var(--main-color);margin-bottom:5px;display:flex;flex-flow:row wrap;align-items:center;line-height:1.2} .lms-category span {display:inline-block;} .lms-category span:before {content:"\f105";font-family:var(--faw);font-size:0.725rem;vertical-align:top;display:inline-block;margin:0.165rem 6px 0;} .lms-category span:nth-child(1):before {display:none;} .lms-subject {font-size:var(--font-xlg);font-weight:var(--font-bold);color:#111;line-height:1.2;letter-spacing:-1px;word-break:keep-all;word-wrap:break-word;} .lms-subject.sm {font-size:var(--font-lg);letter-spacing:0} .lms-subject.lg {font-size:var(--font-2xlg);letter-spacing:-1px} .lms-subject.sm.tit-clamp {height:45px;} .lms-subject.lg.tit-clamp {height:120px;-webkit-line-clamp:3;} .lms-list>ul {display:flex;flex-flow:row wrap;margin:0 -1rem; flex-wrap:wrap;} .lms-list>ul>li {width:calc(33.333% - 2rem);margin:0 1rem 2rem 1rem;position:relative;} .lms-list.ing-list > ul > li {width:calc(25% - 2rem);} .lms-list .badge-area {position:absolute;right:0;top:0;z-index:9} .lms-list .badge-area [class*="badge"] {border-radius:0 0 3px 3px;} .lms-list .badge-level, .lms-list .badge-point {line-height:28px;padding:0 10px;box-shadow:0 1px 1px rgba(0,0,0,0.2);border-top:none;font-size:0.815rem} .lms-list .badge-onair {position:absolute;z-index:3;left:10px;top:10px;} .lms-list .badge-mylms {position:absolute;left:5px;top:-5px;border:none;z-index:4;} .lms-list .badge-area2 {position:absolute;left:20px;top:-14px;z-index:5;} .lms-list .badge-area2 [class*="badge"] {border:none;box-shadow:0 1px 2px rgba(0,0,0,0.1)} .lms-list .badge-new {background:#FF6666;color:#fff;letter-spacing:1px} .lms-list .badge-state.state1 {background:#FF9933} .lms-list .badge-state.state2 {background:#3DB979} .lms-list .bx {position:relative;background:var(--basic-bg);border-radius:var(--basic-round);overflow:hidden} .lms-list .thumb {position:relative;height:220px;} .lms-list .thumb img {position:relative;z-index:1;} .lms-list .cont {position:relative;} .lms-list .cont .info {padding:1.5rem;} .lms-list .cont .info .desc {margin-top:15px;} .lms-list .cont .info dl {display:flex;flex-flow:row wrap;/* align-items:flex-start; */} .lms-list .cont .info dt {width:70px;color:var(--main-color);letter-spacing:-0.045rem} .lms-list .cont .info dd {width:calc(100% - 70px);letter-spacing:-0.045rem} .lms-list .cont .info2 {padding: 20px;line-height:50px;border-top:1px solid #eaeaea;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;white-space:nowrap;text-overflow:ellipsis} .lms-list .cont .info2 .time:before {content:"\f022";font-family:var(--faw);margin-right:10px;color:#999} .lms-list .bx.nodata {border:1px dashed #eee;} .lms-list .bx.nodata .cont {height:250px;display:flex;flex-flow:row wrap} .lms-list .bx.nodata .cont .info {text-align:center;align-items:center;width:100%;color:#aaa} .lms-list .overcont {display:none;position:absolute;z-index:10;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.85);color:#fff;text-align:center;} .lms-list .bx:hover .overcont {display:block;} .lms-list .overcont .center {width:calc(100% - 60px);margin-top:-25px} .lms-list .overcont .lms-category {color:var(--main-color);text-align:center;justify-content:center} .lms-list .overcont .lms-subject {color:#fff;} .lms-list .overcont .btn-view {display:block;position:absolute;left:0;bottom:0;width:100%;background:var(--main-color);color:#fff;line-height:50px;} .lms-list .overcont .btn-view span {display:inline-block;background:#fff;border-radius:80px;padding:0 12px;line-height:28px;margin:-2px 0 0 10px;font-size:var(--font-sm);font-weight:var(--font-bold)} .lms-list .overcont .btn-view.state1 {background:#FF9933;} .lms-list .overcont .btn-view.state1 span {color:#FF9933;} .lms-list .overcont .btn-view.state2 {background:#3DB979} .lms-list .overcont .btn-view.state2 span {color:#3DB979} .lms-list .bx.end .info *, .lms-list .bx.end .info2 * {color:#999 !important} .lms-list .bx.end .thumb:before {content:"완료된 프로그램";position:absolute;left:0;top:0;width:100%;height:100%;line-height:220px;background:rgba(0,0,0,0.8);text-align:Center;color:#fff;font-size:var(--font-lg);font-weight:var(--font-bold);z-index:5} .lms-list .bx.end:hover .overcont {display:none;} .lms-list .ico-group-active {margin-top:10px} .bd-project-ing, .bd-project-end {display:flex;align-items:center;justify-content:center;width:76px;height:76px;line-height:72px;font-weight:var(--font-bold)} .bd-project-ing {background:#fff;border:4px solid var(--main-color);color:var(--main-color)} .bd-project-end {background:#ddd;border:4px solid #ddd;color:#fff} .project-view {border-top:2px solid #111;border-bottom:1px solid var(--basic-border);} .project-view .title {position:relative;display:flex;flex-flow:row wrap;align-items:center;padding:1.5rem 0;} .project-view .title .cont {width:calc(100% - 80px);padding:0 200px 0 30px;} .project-view .title .subject {font-size:1.5rem;font-weight:var(--font-exbold);color:#111} .project-view .title a {position:absolute;right:0;top:1.5rem;} .project-view table {background:var(--basic-bg);padding:0.5rem 1.5rem} .project-view table tr {border-top:1px solid var(--basic-border)} .project-view table tr:first-child {border-top:none;} .project-view table th {width:120px;color:#111} .project-view table th, .project-view table td {padding:1rem 0.5rem;vertical-align:top;} .prof-list {border-top:2px solid var(--main-color)} .prof-list ul li {border-bottom:1px solid var(--basic-border);} .prof-list .bx {display:flex;flex-flow:row wrap;} .prof-list .bx .name {width:320px;padding:2rem;background:var(--basic-bg)} .prof-list .bx .cont {width:calc(100% - 320px);padding:1.5rem 2rem;} .prof-list .bx .name p:nth-child(1){font-size:var(--font-xlg);font-weight:var(--font-bold);color:#111} .list-info {display:flex;flex-flow:row wrap;justify-content:space-between;margin:20px 0;} .list-info .total {width:100px;line-height:45px;font-size:18px;} .list-info .sort {width:calc(100% - 100px);display:flex;flex-flow:row wrap;justify-content:flex-end;} .list-info .sort select {flex-basis:160px;margin-left:5px;} @media only screen and (max-width:1023px){ .project-view .bd-project-ing, .project-view .bd-project-end {width:66px;height:66px;line-height:62px;} .project-view .title .cont {width:calc(100% - 70px);padding:0 0 0 20px} .project-view .title a {position:relative;right:auto;top:auto;text-align:center;margin:1rem auto 0;} .project-view table, .project-view table tr, .project-view table th, .project-view table td {display:block;width:100%;padding:0;text-align:left;} .project-view table tr {padding:1rem} .project-view table th {font-size:0.875rem;font-weight:var(--font-bold)} .prof-list .bx .name {width:240px;} .prof-list .bx .cont {width:calc(100% - 240px);} #resume-desc .desc-head {padding:2rem 2rem 4rem 2rem;} #resume-desc .contwrap1 {margin:-2rem 2rem 0rem 2rem;padding:2rem;} #resume-desc .contwrap1 .name b {font-size:var(--font-2xlg);} #resume-desc .contwrap2 {padding:2rem} } @media only screen and (max-width:767px){ .project-view .title .subject {font-size:1.25rem;} .prof-list .bx {flex-flow:column;padding:1.5rem 0} .prof-list .bx .name {width:100%;padding:0;background:none;} .prof-list .bx .cont {width:100%;padding:0;font-size:var(--font-sm);margin-top:0.5rem} .prof-list .bx .name p:nth-child(1) {font-size: var(--font-lg);} #resume-desc .desc-head b {display:block;} #resume-desc .contwrap1 .row {flex-flow:column;} #resume-desc .contwrap1 .cont {width:100%;padding:0 0 20px 0;} #resume-desc .contwrap1 .photo {width:200px;margin:0 auto;} } @media only screen and (max-width:576px){ .project-view .title {padding:1rem 0} .project-view .title .subject {font-size:1.125rem;} .project-view .title a {display:block;width:100%;} #resume-desc .desc-head {padding:1rem 1.5rem 2rem 1.5rem;} #resume-desc .desc-head span {display:none;} #resume-desc .contwrap1 {margin:-1rem 1.5rem 0rem 1.5rem;padding:1.5rem;} #resume-desc .contwrap2 {padding:1.5rem} #resume-desc .contwrap1 .name b {font-size:var(--font-xlg);} #resume-desc .contwrap1 .photo {width:160px;height:200px;padding:20px;} #resume-desc .contwrap1 .cont dl {flex-flow:column;} #resume-desc .contwrap1 .cont dt {width:100%;font-size:0.825rem;font-weight:var(--font-semibold);color:#111} #resume-desc .contwrap1 .cont dd {width:100%;} } @media only screen and (max-width:415px){ } /* //프로그램 신청 */ /* 갤러리 커스텀*/ .board-gallery.type1 .thumb {border:none;} .board-gallery.type1 a:hover .thumb:after{color:var(--main-color);} .board-gallery.type1 a:hover .thumb:before{content:"";width:100%;height:100%;background:linear-gradient(0deg, #000c, rgba(0,0,0,0.2));position:absolute;top:0;left:0;opacity:0;transition:all 0.3s;} .board-gallery.type1 a:hover .thumb {border:none; transition:all .3s;} .board-gallery.type1 a:hover .thumb:before{content:"";opacity:1;position:absolute;left:0;top:0;width:100%;height:100;background:linear-gradient(0deg, #000c, rgba(0,0,0,0.2));} .board-gallery.type1 a:hover .thumb:after{content:"\f067";transform:rotate(0deg);transition: all .3s; font-family:var(--faw);font-size:2rem;position:relative;width:100%;height:100%;vertical-align:middle;text-align:center;color:var(--main-color);display:flex;flex-flow:row wrap;align-items:center;justify-content:center;} .board-gallery.type1 .subject {margin-top:0.5rem;height:1.5rem;line-height:1.5rem;overflow:hidden;text-overflow:ellipsis; font-size: 21px; font-weight: 700; color: #333;} .board-gallery.type1 .date {font-size:.725rem;color:#999; font-weight: 500; padding: 10px 0 0;} /* //갤러리 커스텀 */ /* mypage */ .my-page header{position:relative;} .my-page #gnb{position:relative;} .my-page #logo .logo1{display:block;} .my-page #logo .logo2{display:none;} .my-page .sub_name{color:#121314;} .my-page #gnbmn ul.depth1 > li > a{color:#121314;} .my-page #gnb .topmn a{color:#666666;} .my-page #gnb .topmn .ico-sitemap i{color:var(--main-color);} #mypage-topwrap{background:#0074E7; position:relative;} #mypage-topwrap.co {background:#0AB3D6;} #mypage-topwrap.pr {background:#0D1793;} #mypage-topwrap .menu{border-bottom:1px solid rgba(255,255,255,.2);} #mypage-topwrap .menu > .row{align-items:center;} #mypage-topwrap .menu .cont-l{width:300px; color:#fff;} #mypage-topwrap .menu .cont-l.row{align-items:center;} #mypage-topwrap .menu .cont-l a{background:rgba(0,0,0,.2); border:none; line-height:22px; padding:0 15px;} #mypage-topwrap .menu .nav_h{width:calc(100% - 300px);} #mypage-topwrap .menu ul{display:flex; flex-wrap:wrap; justify-content:space-between;} #mypage-topwrap .menu ul li a{color:#fff; display:block; text-align:center; line-height:50px; font-size:17px; padding:0 20px;} #mypage-topwrap .menu ul li a:hover{color:#ffff99;} #mypage-topwrap .menu ul li a.on{color:#00FFBB; font-weight:800;} #mypage-topwrap .badge{font-size:14px; font-weight:600;border:none; margin-right:5px;} #mypage-topwrap .badge.badge-stu{background:#33CCCC; } #mypage-topwrap .badge.badge-co{background:#0D1793;} #mypage-topwrap .badge.badge-pr{background:#0074E7;} #mypage-topwrap > .d_width{ height:230px;} #mypage-topwrap > .d_width.row{align-items:center;padding:20px 0;} #mypage-topwrap .cont-l .name{font-size:45px;line-height:1;margin:0.5rem 0 1rem 0;word-break:keep-all;letter-spacing:-2px; color:#fff;} #mypage-topwrap .cont-l .name strong{font-weight:800;display:block;} #mypage-topwrap > .d_width .cont-l{display:flex; width:calc(100% - 690px);} #mypage-topwrap .s_info{width:300px;} #mypage-topwrap .swiper-cont {width: calc(100% - 300px); position:relative; max-height:190px;} #mypage-topwrap .swiper-cont .swiper{height:190px;} #mypage-topwrap .badge_img {background:url(../img/micro-badge.png) no-repeat center; width:105px; height:105px; display:inline-block;} #mypage-topwrap .txt-wrap{margin-left:20px; color:#fff;} #mypage-topwrap .tit{font-size:20px; font-weight:800; letter-spacing:-1px; color:#FFFFCC; margin-bottom:10px;} #mypage-topwrap .txt {font-size:18px; font-weight:600; letter-spacing:-.5px;} #mypage-topwrap .year{font-size:15px; font-weight:500; letter-spacing:-.5px; color:#EAF4FF;} #mypage-topwrap .cont-r{width:690px;} #mypage-topwrap .cont-r > .row{justify-content:space-between; align-items:center;} #mypage-topwrap .info li{color:#fff; font-weight:500; font-size:15px;} #mypage-topwrap .info li span{margin-right:30px; display:inline-block; width:45px;} #mypage-topwrap .badge-control{position:absolute;top:50%; transform:translateY(-50%); right:0; display:flex; flex-direction:column; align-items:center; background:rgba(0,0,0,40%); padding:5px 10px ; border-radius:20px; z-index:9;} #mypage-topwrap .badge-control a:before{font-size:0.725rem;} #mypage-topwrap .badge-control a.ico-pause:before{font-size:0.725rem; content:"\f04c"; font-family:'fontAwesome'; color:#fff;} #mypage-topwrap .badge-control a.ico-play:before{content:"\f04b";font-family:'fontAwesome'; color:#fff;} #mypage-topwrap .badge-control .ico-prev:before{content:"\f077"; font-family:'fontAwesome'; color:#fff;} #mypage-topwrap .badge-control .ico-next:before{content:"\f078"; font-family:'fontAwesome'; color:#fff;} #mypage-topwrap .swiper-wrapper { align-items: center; } #mypage-topwrap .badge-wrap { display: flex; align-items:center;} #mypage-topwrap .bx-wrap{width:100%;} #mypage-topwrap .bx-wrap > div {width:calc(100% / 3); height:190px; padding:20px;} #mypage-topwrap .bx-wrap > div a{text-align:center; display:block;} #mypage-topwrap .bx-wrap > div a span{display:inline-block; width:60px; height:60px; background:rgba(16,16,16,20%); border-radius:50%; position:relative;} #mypage-topwrap .bx-wrap > div a span:before{content:""; background:url(../img/mypage-top-ico.png) no-repeat; width:40px; height:40px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} #mypage-topwrap .bx-wrap > div a span.ico-2:before{background-position:-40px 0;} #mypage-topwrap .bx-wrap > div a span.ico-3:before{background-position:-80px 0;} #mypage-topwrap .bx-wrap > div a span.ico-4:before{background-position:-120px 0;} #mypage-topwrap .bx-wrap a p{color:#fff; font-weight:600; letter-spacing:-.5px;} #mypage-topwrap .bx-wrap a p.num{font-size:32px; letter-spacing:-1px; font-weight:800;} #mypage-topwrap .bx-graph{background:rgba(16,16,16,20%); text-align:center; } #mypage-topwrap .bx-graph .graph{width:81px; height:81px; /*background:#fff; border-radius:50%;*/ display:inline-block; margin:5px 0;} #mypage-topwrap .bx-graph p{color:#fff;} #mypage-topwrap .bx-graph p:last-child{font-size:14px; font-weight:500;} .swiper-button-lock{display:block !important;} .mypage-content{background:#f5f5f5;} .mypage-main {padding:40px 0 120px 0; display:flex;flex-flow:row wrap;} .mypage-main .cont-l{width:260px;margin-right:40px;position:relative;} .mypage-main .cont-r{width:calc(100% - 300px);padding-bottom:40px;} #my-active {} #my-active:before {content:"";position:absolute;left:0.5rem;top:0;height:100%;border-left:4px solid rgba(0,0,0,0.1)} #my-active h3 {margin:0;padding:0.5rem 1rem;background:#3A4870;color:#fff;position:relative;font-size:15px;border-radius:0.25rem; font-weight:600;} #my-active h3:before{background:url(../img/mypage-active-ico.png) no-repeat; width:20px; height:20px;} #my-active li {position:relative;} #my-active li:before{width:0.825rem;height:0.825rem;left:0.25rem;top:1rem;border:2px solid #fff;background:#0AB2C7;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,0.1);content:"";position:absolute;} #my-active li .bx {margin:1rem 0 1rem 2rem;padding:1rem;background:#fff;border-radius:0.5rem;display:block;line-height:1.4} #my-active li .bx .date{font-size:13px;margin-bottom:0.5rem;color:#999} #my-active li .bx .txt{font-size:16px; letter-spacing:-.5px; font-weight:500;} #my-active li .bx.on{border:2px solid #0074E7;} #my-active li .bx.on p{color:#0074E7;} #my-active li .bx.on .txt{font-weight:600;} .my-alarm-bx > p{background:var(--grd);padding:20px; color:#fff; font-size:18px; font-weight:600; letter-spacing:-1px;} .my-alarm-bx > p:before{content:"\f130"; font-family:fontAwesome;margin-right:15px;} .my-alarm-bx ul{background:#E7EEF8; padding:0 20px;} .my-alarm-bx ul li {font-size:24px; color:#121314; display:flex; justify-content:space-between; align-items:center; padding:20px 0;} .my-alarm-bx ul li:not(:last-child){border-bottom:1px dotted rgba(0,0,0,20%); } .my-alarm-bx ul li em{font-weight:800;} .my-alarm-bx ul li p:before{content:"\f0a1"; font-family:FontAwesome; display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; background:rgba(0,0,0,0.2); color:#fff; font-size:16px; margin-right:20px;} .my-alarm-bx ul li a{background:#fff; padding:10px 40px; color:#0074E7; border:2px solid #0074E7; font-size:16px; letter-spacing:-1px; font-weight:500;} .my-alarm-bx ul li a:hover{background:var(--main-color); color:#fff;} .row.bx1{margin:30px -10px;} .row.bx1 .d2{position:relative; width:calc(50% - 20px); margin:0 10px; } .bx1 .bnr{padding:30px; display:flex; justify-content:space-between; align-items:center;} .bx1 .bnr p{color:#fff;} .bx1 .bnr span{display:block; width:100px; height:100px; border:5px solid rgba(0,0,0,8%); border-radius:50%; position:relative;} .bx1 .bnr span:before{content:"";background:url(../img/mypage-bnr-ico.png) no-repeat; width:50px; height:50px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} .bx1 .bnr span.ico2:before{background-position:-50px 0;} .bx1 .bnr span.ico3:before{background-position:-100px 0;} .bx1 .bnr span.ico4:before{background-position:-150px 0;} .bx1 .bg2{background:#0AB2C7;} .bx1 .bg3{background:#0074E7;} .bx1 .bg4{background:#7EC40B;} .bx1 .bnr .txt{font-size:18px; font-weight:600; letter-spacing:-1px; } .bx1 .bnr .tit{font-size:30px; font-weight:800; letter-spacing:-1px; } .bx2{background:#fff; padding:30px;} .bx2 > .tit{font-size:28px; font-weight:800; color:#121314; letter-spacing:-1px; line-height:1.2; padding:10px; width:130px;} .bx2 .cont{width:calc(100% - 130px); background:rgba(0,0,0,3%); max-height:180px; overflow-y:scroll; padding:20px 40px 0 20px; position:relative;} .bx2 .cont:-webkit-scrollbar-button {display: none; height: 0; width: 0;} .bx2 .cont .tit{position:relative;padding-bottom:20px; border-bottom:1px dotted rgba(0,0,0,20%); font-size:18px; font-weight:600; color:#121324; display:flex; align-items:center; } .bx2 .cont .year{font-size:14px; font-weight:400; letter-spacing:-.3px; color:#555555; margin-left:10px;} .bx2 .cont p{color:#333333; font-size:17px; letter-spacing:-1px;} .bx2 .cont p .subject{font-weight:600; margin-left:10px;} .bx2 .cont span.btn-main{font-size:14px; font-weight:500; letter-spacing:-1px; background-color:var(--main-color); border:none; } .bx2 .cont span.btn-yellow,.bx2 .cont span.btn-b-main{margin-right:5px;} .bx2 .cont .btn-c1{position:absolute; right:0;} .bx2 .cont li a{padding:5px 0; display:flex; justify-content:space-between; align-items:center;} .bx2 .cont li .ing{background:none;} .bx3{background:#fff; border:1px solid #DADADA; padding:40px;} .bx3 .tit{display:flex; justify-content:space-between; font-size:28px; font-weight:800; letter-spacing:-1px; color:#121314; align-items:center; margin-bottom:20px;} .bx3 .tit span{color:#000000; font-size:22px; font-weight:600; } .bx3 .tit span em{font-weight:600; margin:0 2.5px;} .bx3 ul li:first-child{border-top:1px dotted #E1E1E1;} .bx3 ul li{padding:20px 0; border-bottom:1px dotted #E1E1E1; display:flex; justify-content:space-between; align-items:center; color:#000; font-size:18px; font-weight:600; letter-spacing:-1px; flex-wrap:wrap;} .bx3 ul li .list-ico:before{content:"\f022";font-family:fontAwesome; color:#999; margin-right:10px;} .bx3 ul li .date{font-size:16px; font-weight:400; color:#666666;} .bx3 ul li .date span{margin-left:25px; width:63px; font-size:14px; font-weight:500;} .bx3 ul li .date span.c1{color:#0AB2C7; border-color:#0AB2C7;} .mypage-sub{ margin-top:-120px; background:#f4f4f4; padding-bottom:120px;} .mypage-sub > .d_width:first-child{background:#fff;padding:40px;} .mypage-sub .bx-info{border:1px solid var(--main-color);} .mypage-sub .bx-info p{font-size:18px; font-weight:600; letter-spacing:-1px; display:flex; align-items:center; flex-wrap:wrap;} .mypage-sub .bx-info p:before{content:""; width:40px; height:40px; display:inline-block; background:url(../img/bx-info-ico.png) no-repeat; margin-right:10px; } .mypage-sub .bx-info p em{font-weight:800; margin:0 5px;} .mypage-sub .tab-txt{margin-top:20px;} .mypage-sub .tab-txt a{width:160px; text-align:center; color:#555555; font-size:17px;} .mypage-sub .tab-txt a.on{color:var(--sub-color); font-weight:600;} .mypage-sub .tab-txt:after{border-color:#204578; z-index:11; } h1.mysub-tit{font-size:34px; font-weight:600; letter-spacing:-2px; color:#fff; margin:0; padding:30px 0; display:flex; align-items:center;} h1.mysub-tit:before{content:""; width:30px; height:30px; display:inline-block; background:url(../img/tit-ico.png) no-repeat center; margin-right:10px;} h2.mysub-tit{font-size:27px; color:#121314; font-weight:800; letter-spacing:-1px; margin:0;} .mypage-sub .tit-wrap{margin:0 0 30px 0; justify-content:space-between;} h3.mysub-tit{font-size:22px; letter-spacing:-1px; color:#000000; font-weight:600; } h3.mysub-tit em{font-weight:600; margin:0 5px ;} h3.mysub-tit:before{display:none;} [class*="vod-ico"]:before {content:"";font-family:var(--faw);display:inline-block;} .vod-ico-pre:before {content:"\f111";color:#aaaaaa} .vod-ico-ing:before {content:"\f111";color:#3CA5C8;font-weight:900} .vod-ico-finish:before {content:"\f058";color:#3DB979;font-weight:900} .vod-ico-yet:before {content:"\f057"; color:#FF6633; font-weight:400;} @media only screen and (max-width:1440px){ #mypage-topwrap .cont-r .txt-wrap{margin-left:0;} #mypage-topwrap .cont-l .name{font-size:var(--font-3xlg);} #mypage-topwrap .badge-wrap{justify-content:center;} #mypage-topwrap.sub .menu .name {width:200px;} #mypage-topwrap > .d_width .cont-l{width:calc(100% - 600px);} #mypage-topwrap .cont-r{width:600px;} #mypage-topwrap .badge-wrap{flex-wrap:nowrap;} #mypage-topwrap .s_info{width:200px;} #mypage-topwrap .swiper-cont{width:calc(100% - 200px);} .bx1 .bnr{padding:20px;} .bx1 .bnr .txt{font-size:14px;} } @media only screen and (max-width:1240px){ #mypage-topwrap .top-info .name {font-size:var(--font-3xlg);} #mypage-topwrap .menu .cont-l {width:180px;} #mypage-topwrap .menu .nav_h {width:calc(100% - 180px); } #mypage-topwrap > .d_width{height:auto;} #mypage-topwrap > .d_width .cont-l{width:100%;} #mypage-topwrap .cont-r{width:100%;} #mypage-topwrap .cont-l{display:flex; align-items:center; flex-wrap:wrap;} #mypage-topwrap .s_info{display:flex; align-items:center; width:40%;} #mypage-topwrap .swiper-cont{width:60%;} #mypage-topwrap .bx-wrap > div{height:auto;} #mypage-topwrap .cont-l .name{margin:0;} #mypage-topwrap .cont-l .info{margin-left:40px;} #mypage-topwrap .badge-wrap{flex-wrap:nowrap;} #mypage-topwrap .bx-graph{margin-left:0;} #mypage-topwrap .cont-r .tit{font-size:18px;} #mypage-topwrap .badge-control{top:50%;} .mypage-main .cont-l{margin-right:30px;} .mypage-main .cont-r{width:calc(100% - 290px);} .my-alarm-bx ul li{font-size:20px;} .bx1 .bnr .txt{display:none;} .bx1 .bnr .tit{font-size:24px;} .bx2 .cont{padding:20px 20px 0 20px;} } @media only screen and (max-width:1023px){ #wrap.my-page .d_width{width:auto; margin:0 1.5rem;} #mypage-topwrap .menu .d_width{padding:15px 0;} #mypage-topwrap .menu .cont-l{width:100%;} #mypage-topwrap .menu .nav_h{width:100%; overflow-x:scroll; overflow-Y:hidden;} #mypage-topwrap .menu ul{flex-wrap:nowrap;} #mypage-topwrap .cont-l .name{font-size:var(--font-2xlg); width:100%;} #mypage-topwrap .s_info{flex-wrap:wrap;} #mypage-topwrap .cont-l .info{margin-left:0; margin-top:15px;} #mypage-topwrap .cont-r{margin-top:10px;} #mypage-topwrap .tit{font-size:18px;} #mypage-topwrap .badge-wrap{flex-direction:column;} #mypage-topwrap .bx-wrap a p.num{font-size:20px;} #mypage-topwrap .txt-wrap{margin-left:0;} #mypage-topwrap .nav_h {width:100%;} #mypage-topwrap .nav_h ul li a {font-size:1rem; white-space:nowrap;} .mypage-main {padding:2rem 0 0 0;} .mypage-main .cont-l{width:100%;margin:0;} .mypage-main .cont-r{width:100%;} #my-active {margin:0 0 1rem 0;} #my-active:before {top:3rem;width:calc(100% - 0.5rem);height:auto;border-left:none;border-top:2px solid rgba(0,0,0,0.1)} #my-active ul {display:flex;flex-flow:row nowrap;overflow:hidden;} #my-active li:before{top:0.615rem} #my-active li .bx {margin:2rem 1rem 1rem 0;height:100%;font-size:var(--font-sm)} .bx3{padding:30px;} } @media only screen and (max-width:767px){ #my-active ul{display:flex;margin:0 -10px;padding-bottom:1rem;overflow-x:scroll; padding-bottom:40px;} #my-active li{min-height:auto;margin:0 10px;flex:0 0 auto;} #my-active ul:before, #my-active li:before, #my-active li:after{content:none;} #mypage-topwrap .bx-wrap > div{padding:15px;} .my-alarm-bx > p{font-size:16px;} .my-alarm-bx ul{padding:15px;} .my-alarm-bx ul li{font-size:16px;} .my-alarm-bx ul li p:before{margin-right:10px;} .my-alarm-bx ul li a{padding:5px 20px; font-size:14px;} .row.bx1{margin:15px 0;} .bx1 .bnr span{width:60px; height:60px;} .bx1 .bnr span:before{transform:translate(-50%, -50%) scale(0.7);} .bx1 .bnr .tit{font-size:20px;} .bx1 .bnr{padding:15px;} .bx2{padding:20px;} .bx2 > .tit{width:100%; font-size:24px; padding:10px 0;} .bx2 > .tit br{display:none;} .bx2 .cont{width:100%;} .bx2 .cont .tit a{width:100%;} .bx3{padding:20px;} .bx3 .tit{font-size:24px;} .bx3 .tit span{font-size:20px;} .bx3 ul li{padding:10px 0;} } @media only screen and (max-width:576px){ #mypage-topwrap .cont-l .name{font-size:var(--font-xlg);} #mypage-topwrap .cont-l .info{width:100%; margin-top:10px;} #mypage-topwrap .s_info{width:100%;} #mypage-topwrap .swiper-cont{width:100%;} #mypage-topwrap .badge_img{transform:scale(0.8);} #mypage-topwrap .tit{font-size:16px;} #mypage-topwrap .badge-wrap{justify-content:unset; align-items:unset;} #mypage-topwrap .bx-wrap{overflow-Y:scroll; max-height:180px;} #mypage-topwrap .bx-wrap > div{margin:10px;width:100%;} .my-alarm-bx > p{padding:15px;} .my-alarm-bx ul li{flex-wrap:wrap; padding:0;} .my-alarm-bx ul li a{margin-top:5px;} .row.bx1 .d2{width:100%; margin:0;} .bx2 > .tit{font-size:20px;} .bx2 .cont{padding:20px 10px 0 20px;} .bx2 .cont .tit{flex-wrap:wrap; padding-bottom:10px;} .bx2 .cont .btn-c1{line-height:25px; top:0;} .bx2 .cont p{font-size:16px;} .bx3 .tit{font-size:20px; margin-bottom:10px;} .bx3 .tit span{font-size:18px;} } @media only screen and (max-width:415px){ .bx3 ul li .date span{margin-left:0;} } .mypage-sub .tab-full {margin-top:30px;} .mypage-sub .tab-full a.on{background:var(--main-color);} .degree-list-top{display:flex; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap;} .degree-list-top h3{margin:0;} .degree-list-top h3 em{font-weight:800; margin-left:10px;} .traffic-info{align-items:center;} .traffic-info > span{font-size:14px; font-weight:500; letter-spacing:-.3px; color:#121314;} .traffic-info .traffic-light{margin-top:0;} .traffic-light {position:relative;background:#828282;border-radius:5px;padding:3px;width:34px;text-align: center;vertical-align: middle;box-shadow:inset 0px 4px 1px 1px rgb(0,0,0,0.1);} .traffic-light.sm{transform:scale(0.6);} .traffic-light span {position:relative;display:inline-block;width:18px;height:18px;border-radius:100%;background:#555;border:2px solid #888;margin-top:6px;z-index:1;} .traffic-light:before {position:absolute;display:block;content:"";width:20px;height:20px;background:#555;border-radius:100%;top:4px;left:50%;transform:translateX(-50%);} .traffic-light span.red {background:#ff3300;box-shadow:0 0 10px rgb(255,50,0,1);-webkit-box-shadow-:0 0 10px rgb(255,50,0,1);-moz-box-shadow-:0 0 10px rgb(0,255,0,1);} .traffic-light span.yellow {background:#ffcc00;box-shadow:0 0 10px rgb(255,200,0,1);-webkit-box-shadow-:0 0 10px rgb(255,200,0,1);-moz-box-shadow-:0 0 10px rgb(0,255,0,1);} .traffic-light span.green {background:#00FF00;box-shadow:0 0 10px rgb(0,255,0,1);-webkit-box-shadow-:0 0 10px rgb(0,255,0,1);-moz-box-shadow-:0 0 10px rgb(0,255,0,1);} .traffic-light span.white {background:#ffffff;box-shadow:0 0 10px rgb(255,255,255,1);-webkit-box-shadow-:0 0 10px rgb(255,255,255,1);-moz-box-shadow-:0 0 10px rgb(255,255,255,1);} .degree-list{border:1px solid #EAEAEA; position:relative; width:calc(100% - 140px);} .degree-list-bottom a.btn-more{margin-left:20px; width:120px; color:#fff; height:80px; line-height:80px; font-weight:600; font-size:17px;} .degree-list .traffic-bx{padding:20px 20px 20px 30px;} .degree-list .cont{padding:20px 100px 20px 30px;} .degree-list .traffic-bx{width:180px; border-right:1px solid #EAEAEA; display:flex; align-items:center;} .degree-list .traffic-bx .badge{font-weight:500; letter-spacing:-1px; color:#fff; font-size:14px; } .degree-list .traffic-light{margin-right:20px;} .degree-list .traffic-bx .badge.btn-end {background:#01C901; border:1px solid #01C901;} .degree-list .traffic-bx .badge.btn-ing {background:#FFAD00; border:1px solid #FFAD00;} .degree-list .traffic-bx .badge.btn-yet {background:#8993A5; border:1px solid #8993A5;} .degree-list-bottom:not(:last-child){margin-bottom:10px;} .degree-list .row{align-items:center; position:relative;} .degree-list .cont{display:flex; justify-content:space-between; width:calc(100% - 180px); align-items:center;} .degree-list .cont > div{display:flex;} .degree-list .cont:after{content:"\f107"; position:absolute; right:30px; top:40px; font-family:var(--faw); font-weight:400; font-size:35px; color:#666666; transform:translateY(-50%);} .degree-list .cont .subject{font-size:21px; font-weight:800; color:#000000; letter-spacing:-1px; } .degree-list .cont-l .badge{font-size:13px; font-weight:500; letter-spacing:-.5px; line-height:1.2;margin-right:10px; width:45px;} .degree-list .cont-l .badge.btn-s1{color:#2C9099; border-color:#2C9099;} .degree-list .cont-l .badge.btn-s2{color:#0074E7; border-color:#0074E7;} .degree-list .cont-r span{color:#607A99; font-weight:600; letter-spacing:-.5px; margin-right:10px;} .degree-list .cont-r span:last-child{margin-left:15px; margin-right:0;} .degree-list .cont-r span:last-child:before{margin-right:0;} .degree-list .cont-r p{color:#333; letter-spacing:-1px;} .degree-list .cont-r p em{font-weight:500;} .degree-list.on {border:2px solid var(--main-color);} .degree-list.on .cont:after{content:"\f106";} .degree-list.on .cont{border-bottom:1px solid #EAEAEA;} .degree-list.on .traffic-bx{border-bottom:1px solid #EAEAEA;} .detail-degree-cont {width:100%;padding:20px; } .detail-degree-cont ul{background:#FAFAFA;} .detail-degree-cont ul li{padding:10px 5px;} .detail-degree-cont ul li a{font-size:14px; font-weight:500; color:#333333; letter-spacing:-.3px;} .detail-degree-cont ul li span{margin-right:10px;} .detail-degree-cont ul li:not(:last-child){border-bottom:1px solid rgba(0,0,0,5%);} .badge.ing{color:#FFAD00; border-color:#FFAD00;} .badge.yet{color:#FF6666; border-color:#FF6666;} .badge.end{color:var(--main-color); border-color:var(--main-color);} .bx1.degree .tit{font-size:24px;} .bx1.degree .txt{font-size:16px;} .bx1.degree .bnr{padding:20px 30px;} .bx1.degree .bnr span {width:80px; height:80px; } .bx1.degree .bnr span:before{transform:translate(-50%, -50%) scale(0.8) ;} .mydegree-bx{padding:40px; background:#F6F6F6; border:1px solid #CCCCCC; margin-bottom:40px;} .mydegree-bx .medal-wrap{width:310px; background:url(../img/medal-yet.png) no-repeat center; position:relative;} .mydegree-bx .medal-wrap .subject{color:#4B586D;font-size:20px;max-width: 90px;position: absolute;font-weight:900;left: 50%;letter-spacing:-1px;top: 50%;text-align: center;line-height: 1.2;transform: translate(-50%, -50%);} .medal-wrap .medal-stat{position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:rgba(0,0,0,70%); font-size:22px; font-weight:600; letter-spacing:-1px; color:#fff; width:210px; line-height:50px; text-align:center; border-radius:5px;} .mydegree-bx .cont{width:calc(100% - 330px); margin-left:20px;} .mydegree-bx .cont .tit p{font-size:26px; font-weight:900; color:#121314; letter-spacing:-1px;} .mydegree-bx .cont .tit.row{align-items:Center;} .mydegree-bx .cont .tit span{margin-right:10px;} .mydegree-bx .cont ul{margin:20px 0;} .mydegree-bx .cont ul li {font-size:15px; font-weight:500;} .mydegree-bx .cont ul li em{font-weight:600;} .mydegree-bx .cont ul li span{font-weight:600; color:#121314; letter-spacing:-.5px; width:60px; margin-right:10px;} .cert-wrap .comment2 {padding: 30px 20px 30px 120px; width: 100%; font-size: 16px;background: #fff url(../img/comment-ico.png) no-repeat 20px 20px;} .cert-wrap .comment2 .fs2 {color: #0AB2C7;font-size: 17px; font-weight: 800; letter-spacing:-.5px;margin-bottom: 10px;} .cert-wrap .comment2 .fs2 span {background: #808080;color: #fff;padding: 4px 8px; font-size:15px; font-weight:600; letter-spacing:-.5px; margin:0 5px;} .cert-wrap .comment2 .fs2 .txt{font-weight:500; letter-spacing:-.5px; color:#333;} .degree-list-top.degree{margin-bottom:20px;} /* .achieve 클래스 추가시*/ .achieve{position:relative;} .achieve .medal-wrap{width:310px; background:url(../img/medal-achieve.png) no-repeat center; position:relative;} .achieve:before{content:""; background:url(../img/medal-achieve-plus.png) no-repeat; position:absolute; width:190px; height:120px; left:100px; top:0;} .achieve .medal-wrap .subject{color:#002A57;} .achieve .cert-wrap .comment2 .fs2 span{background:#000000;} .achieve .medal-wrap .medal-stat{top:0; bottom:unset;} .achieve .btn-achieve{position:absolute; right:40px;} .btn-achieve{color:#fff !important; font-size:17px; font-weight:600; letter-spacing:-1px; padding:0 60px; line-height:55px;} .achieve-bnr{background: linear-gradient(90deg,rgba(80, 167, 254, 1) 0%, rgba(0, 237, 192, 1) 100%); margin-top:70px; padding:35px 40px 35px 240px; position:relative;} .achieve-bnr:before{content:""; background:url(../img/achieve-bnr-img.png) no-repeat; position:absolute; left:20px; bottom:0; width:212px; height:182px; background-size:Cover;} .achieve-bnr.row{justify-content:space-between; align-items:center;} .achieve-bnr .txt-wrap{width:calc(100% - 200px);} .achieve-bnr .txt-wrap p{color:#fff; font-size:20px; font-weight:600; letter-spacing:-1px;} .achieve-bnr .txt-wrap p.tit{font-size:25px; font-weight:800;} .achieve-bnr .btn-achieve{background:rgba(0,0,0,.7); border-color:rgba(0,0,0,.7);} /*//achieve클래스 추가시 */ /* nano 클래스 추가시*/ .achieve.nano .medal-wrap .subject{color:#123743;} .achieve.nano .medal-wrap{background:url(../img/medal-achieve2.png) no-repeat center;} .cert-wrap.nano .comment2 .fs2{color:#7EC40B;} .cert-wrap.nano .comment2{background:#fff url(../img/comment-ico2.png) no-repeat 20px 20px;} .achieve-bnr.nano{background:linear-gradient(90deg,rgba(84, 207, 73, 1) 0%, rgba(0, 237, 192, 1) 100%);} /* // nano 클래스 추가시 */ .new-table thead th{font-size:17px; font-weight:600; color:#566C98; letter-spacing:-1px;} .new-table tbody .traffic-light{margin:0 auto 10px;} .new-table tbody th{background:#FAFAFA; border-right:1px solid #dadada;} .new-table tbody .subject{font-size:21px; letter-spacing:-.5px; font-weight:600;} .new-table tbody td{color:#333; font-size:17px; border-right:1px solid #DADADA;} .new-table tbody td:last-child{border-right:none;} .new-table tbody tr:last-child{border-bottom: 1px solid #dadada;} /* 디그리 수료현황 반응형*/ @media only screen and (max-width:1440px){ .achieve-bnr .txt-wrap p{font-size:18px;} .achieve-bnr .txt-wrap p.tit{font-size:22px;} } @media only screen and (max-width:1240px){ .mydegree-bx .medal-wrap{width:250px;} .achieve:before{left:75px;} .mydegree-bx .cont{width:calc(100% - 270px);} .achieve-bnr .txt-wrap{width:100%;} .btn-achieve{padding:0 25px; line-height:45px; margin-top:10px;} } @media only screen and (max-width:1023px){ .degree-list{width:calc(100% - 110px);} .degree-list .traffic-bx{width:140px; padding:10px 10px 10px 20px;} .degree-list .traffic-light{margin-right:10px;} .degree-list .cont{padding:20px 50px 20px 30px; width:calc(100% - 140px); flex-wrap:wrap;} .degree-list .cont:after{right:10px;} .degree-list-bottom a.btn-more{width:100px; margin-left:10px;} .mypage-sub{padding-bottom:80px;} .mypage-sub .tit-wrap{margin:0 0 20px 0;} .mydegree-bx .medal-wrap{height:250px;} .mydegree-bx .cont{width:100%; margin-left:0;} .achieve-bnr{padding:25px 40px 25px 180px; margin-top:50px;} .achieve-bnr:before{width:159px; height:136px; left:0;} .achieve-bnr .txt-wrap p{font-size:16px;} .achieve-bnr .txt-wrap p.tit{font-size:18px;} .mydegree-bx.row{justify-content:center;} .mydegree-bx{padding:20px;} .mydegree-bx:before{left:50%; transform:translateX(-50%);} .medal-wrap .medal-stat{font-size:20px; width:180px;} .mydegree-bx .medal-wrap{width:200px; height:200px; background-size:cover;} .mydegree-bx .medal-wrap .subject{font-size:18px;} .mydegree-bx .cont .tit p{font-size:22px;} .achieve .cont{margin-top:50px;} .achieve .btn-achieve{right:auto; left:50%; top:36%;transform:translateX(-50%); margin-top:0;} .achieve-bnr:before{display:none;} .achieve-bnr{padding:25px;} .achieve-bnr .btn-achieve{width:100%;} } @media only screen and (max-width:767px){ .bx-info{padding:20px;} .mypage-sub .bx-info p:before{background-size:80%; background:url(../img/bx-info-ico.png) no-repeat 50% 50%;} .degree-list{width:100%;} .degree-list-bottom a.btn-more{width:100%; margin-left:0; height:40px; line-height:40px; margin-top:10px; font-size:14px; padding:0 8px;} .degree-list .cont .subject{font-size:18px;} .degree-list .cont:after{top:35px;} .cert-wrap .comment2{padding:20px 20px 20px 120px;} .bx1.degree .tit {font-size:20px;} .bx1.degree .bnr{padding:15px;} h3.mysub-tit{font-size:18px;} .achieve-bnr{margin-top:30px;} } @media only screen and (max-width:576px){ .mypage-sub .d_width{padding:0;} .mypage-sub .bx-info p{font-size:16px;} .mypage-sub .bx-info p:before{background:url(../img/bx-info-ico.png) no-repeat 50% 50% / 80%;} .degree-list-top{flex-wrap:wrap; margin-bottom:15px;} .degree-list .traffic-bx{width:100%; border-bottom:1px solid #eaeaea;} .degree-list .cont{width:100%;} .degree-list .cont:after{top:70%;} .degree-list.on .cont:after{top:28%;} .mypage-sub{padding-bottom:60px;} .mydegree-bx .medal-wrap{width:180px; height:180px;} .mydegree-bx .medal-wrap .subject{font-size:16px;} .medal-wrap .medal-stat{font-size:16px; width:120px; line-height:40px;} .btn-achieve{padding:0 10px; line-height:45px; font-size:16px;} .mydegree-bx .cont .tit p{font-size:20px;} .cert-wrap .comment2{background:#fff; padding:20px;} .cert-wrap.nano .comment2{background:#fff; padding:20px;} } @media only screen and (max-width:415px){ .bx-info{padding:10px;} .degree-list .cont .subject{font-size:16px;} .degree-list .cont{padding:20px 50px 20px 10px;} .degree-list .cont-l .badge{font-size:12px; width:40px;} .degree-list .cont:after{right:20px;} .mypage-sub{padding-bottom:40px;} .achieve .btn-achieve{top:30%;} .cert-wrap .comment2 .fs2{font-size:16px;} .mydegree-bx{margin-bottom:20px;} .mydegree-bx .cont ul{margin:10px 0;} .btnarea{margin:1rem 0;} } /* //디그리 수료현황 반응형 */ /*종합보고서*/ .report .row .table3 {width:calc(100% - 470px);} .report .badge-cont{width:450px; margin-left:20px; background:#204578; padding: 30px 20px; border-radius:5px; position:relative; border:none;} .report .tit-badge{position:absolute; left:20px; top:-15px; background:#fff; color:#204578; border:2px solid #204578; border-radius:25px; font-size:14px; font-weight:600; letter-spacing:-.3px; line-height:30px; padding:0 10px;} .report .badge-list{justify-content:space-between;} .report .badge-list li{width:calc(33.33% - 20px); text-align:center;} .report .badge-list li p{color:#fff; font-size:14px; font-weight:600; letter-spacing:-.3px; line-height:1.2;} .report .badge-list li p .subject{position:absolute; left:50%; top:calc(50% - 10px); transform:translate(-50%,-50%); color:#002A57; font-size:10px; font-weight:900; letter-spacing:-1px; line-height:1.0;} .report .badge-list li p .subject.nano{color:#123743;} .report .badge-list li p.date{font-size:12px; font-weight:600; color:#B3BCCC; letter-spacing:-.3px; margin-bottom:10px; position:relative;} .report .badge-list li p.date:before{content:""; width:100px; height:100px; display:block; margin:0 auto 10px;} .report .badge-list li.ico1 p.date:before{background:url(../img/mybadge-ico1.png)} .report .badge-list li.ico2 p.date:before{background:url(../img/mybadge-ico2.png)} .report .badge-list li.nodata p.date:before{background:url(../img/mybadge-nodata.png)} .report .badge-list li.nodata p{color:#B3BCCC !important;} .report .tit-badge.main{color:var(--main-color); border-color:var(--main-color);} .report .my-active-grapgh,.report .my-badge-cont{margin-top:40px;} .report .my-active-grapgh{width:calc(100% - 470px); border:1px solid #E4E7E9; height:220px; border-radius:5px; position:relative;} .report .my-badge-cont{width:450px; margin-left:20px; border-radius:5px; padding: 30px 20px; border:1px solid #E4E7E9; position:relative;} .my-badge-cont .my-badge-list{margin:-10px;} .my-badge-cont .my-badge-list li {width:calc(50% - 20px); margin:10px;} .my-badge-cont .my-badge-list li.row{align-items:center;} .my-badge-cont .my-badge-list li span{background:url(../img/sm-badge-ico.png); width:70px;height:70px; display:block;} .my-badge-cont .my-badge-list li span.my-badge-ico2{background-position-X:-70px;} .my-badge-cont .my-badge-list li span.my-badge-ico3{background-position-X:-140px;} .my-badge-cont .my-badge-list li span.my-badge-ico4{background-position-X:-210px;} .my-badge-cont .my-badge-list li .txt-wrap{width:calc(100% - 70px);} .my-badge-cont .my-badge-list li .txt-wrap p{font-size:14px; font-weight:600; letter-spacing:-.3px; color:#121314; line-height:1.2;} .my-badge-cont .my-badge-list li .txt-wrap p:not(.tit){font-size:12px; margin-top:10px; color:#555555; font-weight:400;} .my-edu .my-edu-list > li:first-child{border-top:1px solid rgba(0,0,0,10%);} .my-edu .my-edu-list > li{padding-top:20px;} .my-edu .my-edu-list .small-badge{background:url(../img/mybadge-ico1.png) no-repeat; width:100px; height:100px; display:block; position:relative;} .my-edu .my-edu-list .small-badge.nano{background:url(../img/mybadge-ico2.png)} .my-edu .my-edu-list .small-badge .subject{position:absolute; text-align:center; left:50%; top:50%; transform:translate(-50%,-50%); color:#002A57; font-size:10px; font-weight:900; letter-spacing:-1px; line-height:1.0;} .my-edu .my-edu-list .cont{width:calc(100% - 130px); margin-left:30px;} .my-edu .my-edu-list .cont .subject-wrap.row{justify-content:space-between; margin-bottom:20px;} .my-edu .my-edu-list .cont .subject-wrap span{font-weight:500; letter-spacing:-.5px; margin-right:10px;} .my-edu .my-edu-list .cont .subject-wrap .subject{font-size:18px; font-weight:600; letter-spacing:-1px; color:#000000;} .my-edu .my-edu-list .cont ul{background:#FAFAFA; padding:10px;} .my-edu .my-edu-list .cont ul li{padding:5px 10px; font-size:14px; color:#333; font-weight:500; letter-spacing:-.3px; } .my-edu .my-edu-list .cont ul li:not(:last-child){border-bottom:1px solid rgba(0,0,0,10%);} .my-edu .my-edu-list .cont ul li span{margin-right:10px; width:auto;} .my-edu .my-edu-list .cont .info p:first-child{margin-right:20px;} .my-edu .my-edu-list .cont .info p{font-weight:400; letter-spacing:-1px;} .my-edu .my-edu-list .cont .info p em{font-weight:500; margin-right:2.5px;} .my-edu .my-edu-list .cont .info p span{font-weight:600; color:#607A99; letter-spacing:-.5px;} .report-program ul{overflow-Y:scroll;} .report-program ul li {padding:15px 10px 15px 0; border-top:1px solid rgba(0,0,0,10%);} .report-program ul li:last-child{border-bottom:1px solid rgba(0,0,0,10%);} .report-program ul li a.row{justify-content:space-between; align-items:center;} .report-program ul li .subject{font-size:18px; font-weight:600; letter-spacing:-1px;color:#000000; margin-left:10px;} .report-program ul li .badge{font-size:14px; font-weight:500; color:#788A9C; letter-spacing:-1px; min-width:63px; border-color:#788A9C;} .report-program ul li.nodata .subject{color:#919191;} /* 프로젝트 리뷰*/ .review .name {font-size:17px; font-weight:600; letter-spacing:-1px; color:#000;} .review .name:not(:first-child) {margin-top:30px;} .review .name:before {content:"\f007"; font-family:var(--faw); margin-right:10px;} .review {background:var(--basic-bg);border-radius:0.5rem;padding:2rem} .review .stit {color:#005ADE;margin:10px 0 5px 0; font-weight:600;} .review .txt {color:#666666; font-weight:500; letter-spacing:-1px;} .review table{border-top:1px solid #DADADA;} .review .table2 tr{border:1px solid #dadada;} .review .table2 table th, .review .table2 table td{border:1px solid #dadada;} .review .table2 table tbody th{font-weight:500;color:#666666;} /*별점책정부분*/ .star-form fieldset{display:inline-block;border:0;direction:rtl;} .star-form label {font-size:1rem;color:transparent;text-shadow:0 0 0 #f0f0f0;} .star-form label:hover, .star-form label:hover ~ label{text-shadow: 0 0 0 #8298D3;} .star-form input[type=radio]{display: none;} .star-form input[type=radio]:checked ~ label{text-shadow: 0 0 0 #8298D3;} .star-rating {color:transparent;text-shadow: 0 0 0 rgba(0,0,0,0.2);} .star-rating b {text-shadow: 0 0 0 #8298D3;} .star-rating.star-sm{font-size:0.725rem} .star-rating em {color:#333;display:inline-block;margin-left:5px;font-weight:500} /* //프로젝트 리뷰*/ /* 종합보고서 반응형*/ @media only screen and (max-width:1240px){ .report .table3 tr th{font-size:14px;} } @media only screen and (max-width:1023px){ .report .row .table3{width:100%;} .report .badge-cont{width:100%; margin-left:0; margin-top:40px;} .report .my-active-grapgh{width:100%;} .report .my-badge-cont{width:100%; margin-left:0;} } @media only screen and (max-width:576px){ .report .badge-cont{padding:20px;} .report .badge-list li p.date:before{margin:0 auto; transform:scale(0.8);} .report .badge-list li p .subject{top:45%; font-size:9px;} .report .badge-list li{width:100%;} .my-badge-cont .my-badge-list li{width:100%; margin:5px 0;} .my-edu .my-edu-list .cont{width:100%; margin-left:0;} .my-edu .my-edu-list .cont .subject-wrap .subject{font-size:16px;} .my-edu .my-edu-list .cont .subject-wrap span{font-size:12px;} .my-edu .my-edu-list .cont ul li span{font-size:12px;} .report-program ul li .subject{font-size:16px;} .report-program ul li .badge{font-size:12px;} .my-edu .my-edu-list .cont ul{padding:0;} .my-edu .my-edu-list > li{justify-content:center;} .my-edu .my-edu-list .cont .subject-wrap.row{margin-bottom:10px;} } /*// 종합보고서 반응형*/ /*//종합보고서*/ /*프로그램 신청현황*/ .ing-program h2.mysub-tit{margin:40px 0 30px 0;} .app-program h2.mysub-tit{margin-bottom:30px;} .my-total-bx {padding:3rem 3rem 3rem 4rem;position:relative;border:2px solid var(--main-color);display:flex;flex-flow:row wrap;align-items:flex-start;} .my-total-bx dl {flex:1;padding:0 1rem;line-height:1.2} .my-total-bx dt {font-size:var(--font-lg);font-weight:var(--font-bold);color:#111;word-break:keep-all;} .my-total-bx dd em {font-size:var(--font-3xlg);font-weight:var(--font-bold);letter-spacing:-0.025rem} .my-total-bx .btn-d:after {content:"\f054";font-family:FontAwesome;color:#fff;margin-left:10px;display:inline-block;width:24px;height:24px;line-height:20px;border:2px solid #fff;border-radius:50%;text-align:center;font-size:0.5rem} .my-total-bx a {} .my-table-bx {position:relative;border:2px solid var(--main-color);} .my-table-bx table th, .my-table-bx table td {padding:1rem 0.5rem;border-top:1px dotted #ccc;} .my-table-bx table tr:first-child th, .my-table-bx table tr:first-child td{border:none;} .my-ing-bx {position:relative;background:var(--basic-bg);padding:2rem 2.5rem;} .my-ing-bx .badge.po-ab {position:absolute;left:2.5rem;top:-0.25rem} .my-ing-bx .btn-d.po-ab {position:absolute;right:2.5rem;top:2rem} .my-ing-bx a.subject {display:block;margin-bottom:1.5rem;font-size:var(--font-xlg);font-weight:var(--font-bold);color:#111;padding-right:440px;line-height:1.2} .my-ing-bx ul.info li {display:flex;flex-flow:row wrap;} .my-ing-bx ul.info li .tit {width:100px;} .my-ing-bx ul.info li .txt {width:calc(100% - 100px);} .my-ing-bx .process {position:absolute;right:3rem;top:3rem;width:400px;} .my-ing-bx .process .bx {background:#fff;} .my-ing-bx .process .bx:before {border-left-color:#fff;} .my-ing-bx .process .bx.active {background:var(--main-color) !important;} .my-ing-bx .process .bx.active a {color:#fff;} .my-ing-bx .process .bx.active:before {border-left-color:var(--main-color) !important;} /* [S]241014 비교과 css */ .lms-category {font-size:var(--font-base);color:var(--main-color);margin-bottom:5px;display:flex;flex-flow:row wrap;align-items:center;line-height:1.2} .lms-category span {display:inline-block;} .lms-category span:before {content:"\f105";font-family:var(--faw);font-size:0.725rem;vertical-align:top;display:inline-block;margin:0.165rem 6px 0;} .lms-category span:nth-child(1):before {display:none;} .lms-subject {font-size:var(--font-xlg);font-weight:var(--font-bold);color:#111;line-height:1.2;letter-spacing:-1px;word-break:keep-all;word-wrap:break-word;} .lms-subject.sm {font-size:var(--font-lg);letter-spacing:0} .lms-subject.lg {font-size:var(--font-2xlg);letter-spacing:-1px} .lms-subject.sm.tit-clamp {height:45px;} .lms-subject.lg.tit-clamp {height:120px;-webkit-line-clamp:3;} .lms-list>ul {display:flex;flex-flow:row wrap;margin:0 -1rem; flex-wrap:wrap;} .lms-list>ul>li {width:calc(33.333% - 2rem);margin:0 1rem 2rem 1rem;position:relative;} .lms-list.ing-list > ul > li {width:calc(25% - 2rem);} .lms-list .badge-area {position:absolute;right:0;top:0;z-index:9} .lms-list .badge-area [class*="badge"] {border-radius:0 0 3px 3px;} .lms-list .badge-level, .lms-list .badge-point {line-height:28px;padding:0 10px;box-shadow:0 1px 1px rgba(0,0,0,0.2);border-top:none;font-size:0.815rem} .lms-list .badge-onair {position:absolute;z-index:3;left:10px;top:10px;} .lms-list .badge-mylms {position:absolute;left:5px;top:-5px;border:none;z-index:4;} .lms-list .badge-area2 {position:absolute;left:20px;top:-14px;z-index:5;} .lms-list .badge-area2 [class*="badge"] {border:none;box-shadow:0 1px 2px rgba(0,0,0,0.1)} .lms-list .badge-new {background:#FF6666;color:#fff;letter-spacing:1px} .lms-list .badge-state.state1 {background:#FF9933} .lms-list .badge-state.state2 {background:#3DB979} .lms-list .bx {position:relative;background:var(--basic-bg);border-radius:var(--basic-round);overflow:hidden} .lms-list .thumb {position:relative;height:220px;} .lms-list .thumb img {position:relative;z-index:1;} .lms-list .cont {position:relative;} .lms-list .cont .info {padding:1.5rem;} .lms-list .cont .info .desc {margin-top:15px;} .lms-list .cont .info dl {display:flex;flex-flow:row wrap;/* align-items:flex-start; */} .lms-list .cont .info dt {width:70px;color:var(--main-color);letter-spacing:-0.045rem} .lms-list .cont .info dd {width:calc(100% - 70px);letter-spacing:-0.045rem} .lms-list .cont .info2 {padding: 20px;line-height:50px;border-top:1px solid #eaeaea;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;white-space:nowrap;text-overflow:ellipsis} .lms-list .cont .info2 .time:before {content:"\f022";font-family:var(--faw);margin-right:10px;color:#999} .lms-list .bx.nodata {border:1px dashed #eee;} .lms-list .bx.nodata .cont {height:250px;display:flex;flex-flow:row wrap} .lms-list .bx.nodata .cont .info {text-align:center;align-items:center;width:100%;color:#aaa} .lms-list .overcont {display:none;position:absolute;z-index:10;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.85);color:#fff;text-align:center;} .lms-list .bx:hover .overcont {display:block;} .lms-list .overcont .center {width:calc(100% - 60px);margin-top:-25px} .lms-list .overcont .lms-category {color:var(--main-color);text-align:center;justify-content:center} .lms-list .overcont .lms-subject {color:#fff;} .lms-list .overcont .btn-view {display:block;position:absolute;left:0;bottom:0;width:100%;background:var(--main-color);color:#fff;line-height:50px;} .lms-list .overcont .btn-view span {display:inline-block;background:#fff;border-radius:80px;padding:0 12px;line-height:28px;margin:-2px 0 0 10px;font-size:var(--font-sm);font-weight:var(--font-bold)} .lms-list .overcont .btn-view.state1 {background:#FF9933;} .lms-list .overcont .btn-view.state1 span {color:#FF9933;} .lms-list .overcont .btn-view.state2 {background:#3DB979} .lms-list .overcont .btn-view.state2 span {color:#3DB979} .lms-list .bx.end .info *, .lms-list .bx.end .info2 * {color:#999 !important} .lms-list .bx.end .thumb:before {content:"완료된 프로그램";position:absolute;left:0;top:0;width:100%;height:100%;line-height:220px;background:rgba(0,0,0,0.8);text-align:Center;color:#fff;font-size:var(--font-lg);font-weight:var(--font-bold);z-index:5} .lms-list .bx.end:hover .overcont {display:none;} .lms-list .ico-group-active {margin-top:10px} @media only screen and (max-width:1440px){ .my-total-bx {padding:3rem;} .my-total-bx dd em {font-size:var(--font-2xlg);} .lms-list>ul{margin:0 -.5rem;} .lms-list>ul>li {width:calc(33.33333% - 1rem);margin:0 0.5rem 1rem 0.5rem} .lms-list.ing-list > ul > li{width:calc(33.33333% - 1rem); margin:0 0.5rem 1rem 0.5rem;} } @media only screen and (max-width:1240px){ #mypage-topwrap.sub > .d_width{height:230px;} .my-total-bx {padding:2rem;} .my-total-bx dd em {font-size:var(--font-xlg);} .my-ing-bx {padding:2rem;} .my-ing-bx a.subject {margin-bottom:1rem;} .my-ing-bx .process {position:relative;right:auto;top:auto;width:100%;margin-top:1rem} } @media only screen and (max-width:1023px){ #mypage-topwrap.sub > .d_width{height:200px;} #mypage-topwrap .mysub-tit{font-size:26px;} .my-total-bx {padding:1.5rem 1.5rem 1.5rem 2rem;} .my-total-bx dd em {font-size:var(--font-lg);} .my-total-bx .btn-d.btn-xlg {font-size:var(--font-base);padding:0 24px;line-height:48px;} .my-ing-bx a.subject {margin-bottom:0.5rem;font-size:var(--font-lg);padding:0;} .db-search .search-bx {padding:30px} .db-search .filter {padding:15px 30px} .db-search .filter dl {flex-direction:column;font-size:14px;line-height:25px;} .db-search .filter dt, .db-search .filter dd {width:auto;} .db-search .filter dd {display:flex;flex-flow:row wrap;justify-content: flex-start;} .db-search .filter label{flex:1 1 22%;} .db-search .filter li {margin-right:0.5rem;width:auto !important} .lms-list>ul>li {width:calc(50% - 1rem);} .lms-list.ing-list > ul > li{width:calc(50% - 1rem);} .lms-subject.lg{font-size:var(--font-xlg);} .lms-subject.lg.tit-clamp{height:80px;} } @media only screen and (max-width:767px){ #mypage-topwrap.sub > .d_width{padding:0;} h2.mysub-tit{font-size:20px;} .my-total-bx {padding:0;flex-direction:column;} .my-total-bx dl {flex:auto;width:100%;justify-content:space-between;border-bottom:1px dotted var(--basic-border);padding:1rem 1.5rem} .my-total-bx dl:last-child{border-bottom:none} .my-total-bx dt {font-size:var(--font-base);} .my-total-bx dd em {font-size:var(--font-lg);} .my-total-bx .btn-d {text-align:Center;margin:1rem auto;} .lms-subject {font-size:var(--font-lg);min-height:50px;} .lms-list .thumb {height:180px;} .lms-list .cont .subject {font-size:var(--font-lg);} .lms-list .cont .info2 {font-size:var(--font-sm);} .lms-list .overcont .info {margin:20px 0;} .lms-list-namecard .thumb {width:120px;height:75px} .lms-list-namecard .cont {width:calc(100% - 120px - 20px);margin-left:20px;} .lms-list-namecard .cont .subject {font-size:var(--font-lg);} .lms-list-namecard .info {font-size:var(--font-sm)} .db-search .search-bx {padding:20px} .db-search .filter {padding:10px 20px} .db-search .filter label{flex:1 1 45%;font-size:13px;white-space:nowrap;margin:0;} .db-search .filter .tv-checkbox input[type="checkbox"] + label::before{margin-right:0.25rem} .db-search .btnarea a {line-height:38px;width:120px;} } @media only screen and (max-width:576px){ .mypage-sub > .d_width:first-child{padding:20px;} #mypage-topwrap .mysub-tit{font-size:22px;} .ing-program h2.mysub-tit{margin:20px 0;} .app-program h2.mysub-tit{margin-bottom:20px;} .my-total-bx dl {padding:1rem} .my-ing-bx {padding:1.5rem;} .lms-list-sorting form {width:calc(100% - 121px);} .lms-list-sorting form .form-control{width:100%;} .lms-list>ul {margin:0} .lms-list>ul>li {width:100%;margin:0 0 10px 0} .lms-list.ing-list > ul > li{width:100%; margin:0 0 1rem 0;} .lms-list-namecard .thumb {width:80px;height:50px} .lms-list-namecard .cont {width:calc(100% - 80px - 20px);} .lms-list-namecard .btn-d {top:-4px;padding:0 6px;font-size:var(--font-xsm);line-height:28px;} .db-search .form-bx .btn-d span {display:none;} .db-search .form-bx .btn-d {width:50px;} .db-search .formarea {width:calc(100% - 60px)} } @media only screen and (max-width:415px){ .lms-list .cont .info .desc{margin-top:0;} .lms-list .cont .info2{line-height:20px;} } /*//프로그램 신청현황*/ /*//mypage*/ /* 로그인 */ .login-wrap{position:relative;text-align:center;border:1px solid #DCE3E7;display:flex;flex-wrap:wrap;word-break:keep-all;} .login-wrap .btn-login {width:100%;line-height:62px;background:var(--main-color);border-radius:0;} .login-wrap .login-tab {justify-content:space-between;} .login-wrap .login-tab span {width:calc(100% / 3);} .login-wrap .login-tab a {display:block;line-height:70px;text-align:center;color:#fff; background:var(--main-color); font-size:18px; } .login-wrap .login-tab a.on {background:#fff; color:var(--main-color); font-weight:600;} .login-wrap:after{content:"";width:400px;display:block;background:url(../img/login-bg.png) no-repeat 50% 50% /cover; filter:brightness(0.8);} .login-wrap .login-bx{width:calc(100% - 400px);} .login-wrap .login-bx .tit {font-size:52px;font-weight:700;color:#000;line-height:1.2;} .login-wrap .login-bx .txt {margin:0 0 30px;padding:0;background:0;} .login-wrap .login-bx {position:relative;} .login-wrap .login-bx .cont{padding:60px 100px;} .login-wrap .login-bx dl{line-height:55px;margin:2px 0;border:1px solid #eaeaea;} .login-wrap .login-bx dl:after{content:"";clear:both;display:block;float:none} .login-wrap .login-bx dt, .login-wrap .login-bx dd{float:left;} .login-wrap .login-bx dt{width:40px;color:#919191;font-size:.9rem;} .login-wrap .login-bx dd{width:calc(100% - 40px);text-align:left} .login-wrap .login-bx input{margin:0;border:none; width:100%; padding:0 10px;} .login-wrap .btn-login {display:block;line-height:60px;padding:0;margin:10px 0 60px;text-align:center;border:none;background:var(--main-color);color:#fff;} .login-wrap .note{text-align:left;font-size:.925rem;} @media only screen and (max-width:1600px){ .login-wrap .login-bx .tit{font-size:var(--font-4xlg);} } @media only screen and (max-width:1440px){ } @media only screen and (max-width:1240px){ } @media only screen and (max-width:1023px){ .login-wrap .login-bx{width:100%;} .login-wrap:after{display:none;} .login-wrap .login-bx .tit{font-size:var(--font-3xlg);} .login-wrap .login-bx{padding:0;} } @media only screen and (max-width:767px){ .login-wrap .login-bx .cont{padding:60px;} } @media only screen and (max-width:576px){ .login-wrap .login-tab a{line-height:50px; font-size:16px;} .login-wrap .login-bx .tit{font-size:var(--font-2xlg);} .login-wrap .login-bx .cont{padding:20px;} .login-wrap .login-bx .txt{font-size:.925rem;margin:0 0 20px;line-height:1.2;} .login-wrap .login-bx dl{line-height:40px;} .login-wrap .btn-login{line-height:45px;margin:10px 0 40px;} .login-wrap .note{font-size:.825rem;} } @media only screen and (max-width:415px){ } /* 개인정보 관리 */ .table-info th{background:#f5f5f5; font-weight:600;} /* //개인정보 관리 */ /* 마이페이지 교수 */ #mypage-topwrap .top-msg {background-image:url(../img/top_msg_bg.png);background-repeat:no-repeat;background-position:0 50%;box-shadow:0 10px 20px rgba(0,0,0,0.3)} #mypage-topwrap.co .top-msg {position:relative;background-color:#25A1BD;padding:0.5rem 0} #mypage-topwrap.st .top-msg {position:relative;background-color:rgba(255,255,255,0.4);} #mypage-topwrap.pr .top-msg {position:relative;background-color:rgba(0,0,0,0.4);} #mypage-topwrap.pr .menu .cont-l {width:300px;} #mypage-topwrap.pr .bx-wrap > div {width:calc(100% / 5);} #mypage-topwrap.pr .top-msg {position:relative;background-color:rgba(0,0,0,0.4);} #mypage-topwrap .top-msg ul {padding:10px 0 10px 180px;} #mypage-topwrap .top-msg li a {display:block;width:calc(100% - 240px);border-bottom:1px dashed rgba(0,0,0,0.1);padding:10px 0;font-size:var(--font-xlg);color:#fff;letter-spacing:-0.025rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} #mypage-topwrap .top-msg li a:before {content:"\f0a1";font-family:FontAwesome;font-size:0.875rem;display:inline-block;width:40px;height:40px;line-height:40px;text-align:center;border-radius:50%;background:rgba(0,0,0,0.2);margin-right:1rem} #mypage-topwrap .top-msg li:last-child a {border-bottom:none;} #mypage-topwrap .top-msg li a:hover {color:var(--sub-color);transition:all 0.5s;} #mypage-topwrap .top-msg li a:hover:before {background:var(--sub-color);color:rgba(0,0,0,0.4);color:#FFF;transition:all 1s;} #mypage-topwrap .top-msg .item-updown {position:absolute;right:1.5rem;top:50%;transform:translateY(-50%)} #mypage-topwrap .top-msg .item-updown a:before {color:#fff} #mypage-topwrap.pr .info .desc{color:rgba(255,255,255,0.8); font-size:.875rem;} #mypage-topwrap.pr .cont-l{width:300px; color:#fff;} #mypage-topwrap.pr .cont-r{width:calc(100% - 300px);} .my-main-box {width:calc(66.6666% - 2rem);} .mypage-pr [class*="my-main-bx"] h3 {padding:1.5rem 2rem;margin:0;font-size:1.5rem;font-weight:var(--font-exbold);color:#333333;letter-spacing:-0.0145rem;line-height:1;} .mypage-pr .my-main-bx1 h3:before{display:none;} [class*="my-main-bx"] .cont {} [class*="my-main-bx"] .more {position:absolute;right:2rem;top:1.25rem;display:block;width:34px;height:34px;line-height:30px;text-align:center;border-radius:50%;border:2px solid #ccc;color:#ccc;} [class*="my-main-bx"] .more:before {content:"\f061";font-family:FontAwesome;font-size:0.875rem;} [class*="my-main-bx"] .more:hover {border-color:var(--main-color);color:var(--main-color);} [class*="my-main-bx"] .nodata {display:flex;border:1px dashed var(--basic-border);border-radius:0.5rem;margin:0 2rem 2rem 2rem;padding:2rem !important;justify-content:center;align-items:center;} [class*="my-main-bx"] .badge-ing {position:absolute;left:1.875rem;top:-0.75rem} [class*="my-main-bx"] *::-webkit-scrollbar {width:5px;border-radius:80px;overflow:hidden;} [class*="my-main-bx"] *::-webkit-scrollbar-thumb {background-color:var(--dgray1);} [class*="my-main-bx"] *::-webkit-scrollbar-track {background-color:transparent;} /* mypage-pr 프로그램 현황*/ .program-status h3{padding:40px 0 20px 0 !important;} .program-status .more{right:0; top:35px; border-color:#3A4870; color:#3A4870;} .program-status h3:before{display:none;} .program-status .program-table{background:#fff; border-top:none;} .program-status .program-table thead th{background:#115BAD; color:#fff; border-bottom:none;} .program-table .badge{color:#fff; width:60px; font-size:14px;} .program-table .badge.yet{background:#0CD5DE; border-color:#0CD5DE;} .program-table .badge.ing{background:#0C9DF3; border-color:#0C9DF3;} .program-table .badge.end{background:#A7A7A7; border-color:#A7A7A7;} .program-table p{letter-spacing:-.5px;} .program-table .subject{font-size:1.125rem; color:#000; font-weight:600;} .program-table tbody td{font-size:17px; font-weight:500; color:#757575;} .program-table em{font-weight:600;margin-right:5px;} /* //mypage-pr 프로그램 현황*/ /* mypage-pr 수료현황, 취업자현황 */ .status-wrap{margin:30px -10px 0;} .status-wrap > article{background:#fff;} .status-wrap h3{border-bottom:1px solid #DADADA;} .status-wrap li{padding:12.5px 30px; justify-content:space-between; align-items:center; height:80px;} .status-wrap li:not(:last-child){border-bottom:1px dotted #DADADA;} .status-wrap .tit-clamp{min-height:20px; -webkit-line-clamp:1;} .degree-status p{font-weight:600; letter-spacing:-.5px;} .degree-status .txt-wrap{width:calc(100% - 200px);} .degree-status .subject{ font-size:1.125rem; color:#333;} .degree-status .name{color:#72798D; font-size:.875rem; min-height:15px;} .degree-status li.complete .badge{color:#FF9900; border-color:#FF9900;} .degree-status .badge{width:65px; line-height:35px; border:1.5px solid #0C9DF3; color:#0C9DF3; letter-spacing:-.5px; border-radius:5px; font-size:15px; font-weight:600;} .degree-status li.complete a{background-color:var(--main-color); border-color:var(--main-color);} .degree-status li a{width:100px; line-height:43px; font-size:14px; padding:0;} .job-status .txt-wrap{width:calc(100% - 200px);} .job-status .txt-wrap p{font-weight:600; letter-spacing:-.5px;} .job-status .txt-wrap .major{color:#72798D; font-size:.875rem; min-height:15px; margin-bottom:2.5px;} .job-status .txt-wrap .name{color:#121314; font-weight:800; letter-spacing:0; font-size:1.25rem;} .job-status .badge-wrap{width:180px;} .job-status .badge-wrap span{width:100%; font-size:13px; padding:5px 7.5px; } .job-status .badge-wrap span:first-child{margin-bottom:5px;} /* // mypage-pr 수료현황, 취업자현황 */ /* mypage-pr 기업정보*/ .com-info{position:relative;} .com-info h3:before{display:none;} .com_info_Swiper{overflow:hidden;} .com_info_Swiper li > a{padding:30px; background:#fff; display:block;} .com_info_Swiper li > a:hover{background-color:var(--main-color);} .com_info_Swiper li > a:hover p{color:#fff;} .com_info_Swiper li > a:hover .category{color:#fff;} .com_info_Swiper li > a:hover span:before{filter: brightness(0) invert(1);} .com_info_Swiper .category{color:#544CB9; font-weight:600; font-size:15px; letter-spacing:-.5px;} .com_info_Swiper .subject{font-size:23px; font-weight:800; color:#333333; letter-spacing:-1px; margin:10px 0 20px 0;} .com_info_Swiper .subject{} .com_info_Swiper .txt{font-size:14px; color:#666666; font-weight:500; letter-spacing:-.2px; position:relative; padding-left:30px; -webkit-line-clamp:1; min-height:18px;} .com_info_Swiper .txt span:before{content:""; background:url(../img/com-info-ico.png) no-repeat; width:20px; height:20px; position:absolute; left:0; top:50%; transform:translateY(-50%);} .com_info_Swiper .txt span.ico1:before{background-position:0 0;} .com_info_Swiper .txt span.ico2:before{background-position-X:-20px;} .com-info .more-wrap{position:absolute; right:0; top:0; display:flex; align-items:center;} .com-info .item-control {margin-right:5px;} .com-info .item-control a{width:34px; height:34px; line-height:30px; text-align:center; background:#fff; border:2px solid #CCCCCC; border-radius:50%;} .com-info .item-control a:hover{border-color:var(--main-color); } .com-info .item-control a:hover:before{color:var(--main-color);} .com-info .item-control a:before{color:#ccc; font-size:0.75rem; font-weight:200;} .com-info .more {display:block;width:34px;height:34px;line-height:30px;text-align:center; background: var(--main-color);border-radius:50%;border:2px solid var(--main-color); } .com-info .more:before {content:"\2b";font-family:FontAwesome;font-size:0.875rem; color:#fff;} .com-info .more:hover {border-color:var(--main-color);color:var(--sub-color); transform:rotate(180deg);} .com-info .more:hover:before{color:#fff;} /* //mypage-pr 기업정보 */ .mypage-pr .mypage-main.sub .cont-r{background:#fff; padding:30px;} .mypage-pr .mypage-main.sub .board-search{justify-content:center;} .mypage-pr .mypage-main.sub .board-search .form-control{width:300px; border:2px solid var(--sub-color);} .mypage-pr .mypage-main.sub .board-search .btn-d{border-color:var(--sub-color); background:var(--sub-color);} .mypage-pr .mypage-main.sub .board-info{justify-content:flex-end;} .my-main-bx1 {position:relative;width:calc(50% - 20px);margin:10px;} .my-main-bx2 {position:relative;width:calc(100% - 2rem);margin:1rem;border-radius:0.5rem} .my-main-bx3 {position:relative;width:calc(33.3333% - 2rem);margin:1rem;border-radius:0.5rem} .my-main-bx4 {position:relative;width:calc(66.6666% - 2rem);margin:1rem;border-radius:0.5rem} .my-main-bx5 {position:relative;width: 100%; } .my-main-active {background:#ffffff} .my-main-active .cont {padding: 1rem 2rem 2rem 2rem;height: 160px;border-top: 1px solid var(--basic-border);} .my-main-active .process-wrap {border-top:1px solid var(--basic-border);padding:1rem 1.875rem;display:flex;flex-flow:row wrap;align-items:center;} .my-main-active .process-wrap em:before {content:"진행율";display:block;font-size:0.725rem;line-height:1.1;color:#111} .my-main-active .process-wrap em {width:60px;font-size:1.125rem;font-weight:var(--font-bold);} .my-main-active .process-wrap .graph-bar-h {width:calc(100% - 60px);} .my-main-active .cont dl {display:flex;flex-flow:row wrap;align-items:center;} .my-main-active .cont dt {width:100px;color:var(--sub-color);font-weight:600;} .my-main-active .cont dd {width:calc(100% - 100px)} .my-main-poll {background:#ffffff} .my-main-poll .cont {border-top:1px solid var(--basic-border);padding:0;height:220px;overflow-y:scroll} .my-main-poll .cont li {border-top:1px dashed var(--basic-border);padding:1rem 2rem} .my-main-poll .cont li:first-child {border:none;} .my-main-poll .cont li a {display:flex;flex-flow:row wrap;align-items:flex-start;} .my-main-poll .cont li a .tag {width:60px;line-height:46px;border-radius:0.25rem;text-align:center;border:2px solid var(--org);background:#fff;color:var(--org);} .my-main-poll .cont li a .tag + div {width:calc(100% - 60px);padding-left:20px;line-height:1.2} .my-main-poll .cont li a .subject {margin-top:0.25rem} .my-main-poll .cont li a span {color:#999;font-size:15px;} .my-main-jobinfo {display:flex;flex-flow:row wrap;align-items:center;overflow:hidden;position:relative;background:#fff;border:4px solid #65799A} .my-main-jobinfo h3 {font-size:1.5rem;color:#65799A;} .my-main-jobinfo h3:before {content:"\f005";font-family:FontAwesome;font-weight:300;margin-right:0.5rem;} .my-main-jobinfo .cont {margin:0!important;white-space:nowrap;overflow:hidden;} .my-main-jobinfo .cont a {padding:2rem 0;display:flex;flex-flow:row nowrap;align-items:center;} .my-main-jobinfo .cont .subject {margin:0 1rem 0 0.5rem} .my-main-jobinfo .cont .date {color:var(--main-color);display:none;} .my-main-jobinfo .item-updown {position:absolute;right:1.5rem;} .my-main-jobinfo .item-updown a {color:#65799A;padding:0 0.5rem;font-size:1.25rem} .my-main-jobinfo_pro {display:flex;flex-flow:row wrap;align-items:center;overflow:hidden;position:relative;background:#fff;margin:30px 0 40px auto;} .my-main-jobinfo_pro h3 {font-size:1.5rem;color:#3D5369;} .my-main-jobinfo_pro h3:before {content:"\f005";font-family:FontAwesome;font-weight:300;margin-right:0.5rem; background:none;} .my-main-jobinfo_pro .com_swiper_area {max-width:500px; overflow:hidden;} .my-main-jobinfo_pro .swiper-slide {padding:2rem 15px;} .my-main-jobinfo_pro .swiper-slide .subject{font-size:22px; color:#111; line-height:1.2; font-weight:700;} .my-main-jobinfo_pro .cont {margin:0!important;white-space:nowrap;overflow:hidden;} .my-main-jobinfo_pro .cont a {display:flex;flex-flow:row nowrap;align-items:center;padding:2rem 15px;} .my-main-jobinfo_pro .cont .badge.badge-company {border-radius:80px;background:#fff;} .my-main-jobinfo_pro .cont .subject {margin:0 1rem 0 0.5rem} .my-main-jobinfo_pro .cont .date {color:var(--main-color);display:none;} .my-main-jobinfo_pro .item-control {position:absolute;top:50%; right:5rem; transform:translateY(-50%);} .my-main-jobinfo_pro .more {top:50% !important;transform:translateY(-50%) !important;} .my-main-edu {background:#ffffff;padding:0;} .my-main-edu li:nth-child(1){border-top:1px solid #eee;} .my-main-edu li {border-top:1px dashed #eee;padding:1rem 2rem} .my-main-edu li .category {font-size:var(--font-sm);color:#C7AD90} .my-main-edu li .subject {font-size:var(--font-lg)} .my-main-score {padding:3rem;background:#0F275C;display:flex;flex-flow:row wrap;overflow:hidden;} .my-main-score .title {width:45%;position:relative;} .my-main-score .cont {width:55%;display:flex;flex-flow:row wrap;color:#fff;font-family:'ns-neo';} .my-main-score .title h3 {padding:0;color:#fff;margin:0 0 2rem 0} .my-main-score .title h4 {color:rgba(255,255,255,0.6);margin:0;font-size:var(--font-sm)} .my-main-score .title em {font-size:4rem;font-weight:var(--font-exbold);line-height:1} .my-main-score .title .medal{position:absolute;right:0;top:-3rem;background:url(../img/my_score_img.png) no-repeat 50% 0 /contain;width:220px;height:300px;text-align:center;} .my-main-score .title .medal p{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);text-shadow:0 2px 2px rgba(0,0,0,0.1);color:#fff;font-weight:var(--font-exbold);font-size:2rem;line-height:1} .my-main-score .cont dl {width:50%;} .my-main-score .cont dt {display:block;font-size:var(--font-lg);font-weight:var(--font-bold)} .my-main-score .cont dd {display:block;font-size:var(--font-xlg);font-weight:var(--font-exbold);} .my-main-biz {background:#ffffff} .my-main-biz .cont {flex:1;border-top:1px solid var(--basic-border);padding:2rem} .my-main-biz .cont:nth-child(2){border-left:1px dotted var(--basic-border)} .my-main-biz .subject {min-height:45px;margin-bottom:1rem} .my-main-biz .subject:hover {color:var(--main-color)} .my-main-biz .cont dl {display:flex;flex-flow:row wrap;align-items:center;} .my-main-biz .cont dt {width:100px} .my-main-biz .cont dd {width:calc(100% - 100px)} .my-main-biz .process .bx.active{background:var(--main-color)} .my-main-biz .process .bx.active:before, .my-main-biz .process .bx.active:after{border-left-color:var(--main-color)} .my-main-project {background:#ffffff} .my-main-project .cont {padding:2rem;border-top:1px solid var(--basic-border);} .my-main-project .cont .subject {min-height:20px;margin-bottom:1rem} .my-main-project .cont dl {display:flex;flex-flow:row wrap;align-items:center;background:var(--basic-bg);padding:1rem} .my-main-project .cont dt {width:100px} .my-main-project .cont dd {width:calc(100% - 100px)} .my-main-eqp {background:#ffffff} .my-main-eqp .cont {border-top:1px solid var(--basic-border);padding:0;height:220px;overflow-y:scroll} .my-main-eqp .cont li {border-top:1px dashed var(--basic-border);padding:1rem 2rem} .my-main-eqp .cont li:first-child {border:none;} .my-main-eqp .cont li a {display:flex;flex-flow:row wrap;align-items:flex-start;} .my-main-eqp .cont li a .dday {width:60px;line-height:46px;border-radius:0.25rem;text-align:center;border:2px solid var(--main-color);background:#fff;color:var(--main-color);} .my-main-eqp .cont li a .dday + div {width:calc(100% - 60px);padding-left:20px;line-height:1.2} .my-main-eqp .cont li a .subject {margin-top:0.25rem} .my-main-practice {background:#ffffff;} .my-main-practice .cont {display:flex;flex-flow:row wrap;align-items:stretch;padding:0 2rem 2rem 2rem} .my-main-practice dl {background:var(--basic-bg);width:50%;padding:3rem 0;display:flex;flex-flow:column} .my-main-practice dt, .my-main-practice dd {display:block;text-align:center;} .my-main-practice dd em {display:inline-block;font-size:var(--font-3xlg);font-weight:var(--font-exbold);color:var(--main-color)} .my-main-practice dl:nth-child(2){border-left:1px dashed var(--basic-border)} .my-main-resume {background:#ffffff} .my-main-resume .cont {border-top:1px solid var(--basic-border);padding:0;height:220px;overflow-y:scroll} .my-main-resume .cont li {border-top:1px dashed var(--basic-border);padding:1rem 2rem;position:relative;font-size:var(--font-sm)} .my-main-resume .cont li:first-child {border:none;} .my-main-resume .cont li a {display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;} .my-main-resume .cont .name {display:inline-block;font-size:20px;font-weight:var(--font-bold);color:#111;margin-right:0.5rem;} .my-main-resume .cont .badge {} .my-main-resume .cont .badge-area {} .my-main-family {display:block;height:260px;padding:2.5rem 10rem 2.5rem 2.5rem;word-break:keep-all;background:var(--main-color) url(../img/main_co_bnr03.png) no-repeat 100% 100%;overflow:hidden;color:#fff} .my-main-family h3 {color:#ffffcc;padding:0 0 1rem 0 !important;margin:0;} .my-main-family p {color:#fff} .my-main-family .view {color:#ffffcc;margin-top:3rem;display:block;} .my-main-family .view:after {content:"\f061";font-family:FontAwesome;display:inline-block;border:2px solid #ffffcc;color:#ffffcc;width:24px;height:24px;line-height:20px;border-radius:50%;font-size:0.75rem;text-align:center;margin-left:0.5rem} .my-main-counsel {background:#fff;} .my-main-counsel .cont {border-top:1px solid var(--basic-border);} .my-main-counsel .cont li {border-top:1px dashed var(--basic-border);padding:1rem 2rem;display:flex;flex-flow:row wrap;justify-content:space-between;font-family:ns-neo;} .my-main-counsel .cont li:first-child{border-top:none;} .my-main-counsel .cont em {font-weight:Var(--font-bold)} .my-main-manage {padding:2rem;background:#fff;display:flex;flex-flow:row wrap; margin-top:40px;} .my-main-manage .title {width:240px;} .my-main-manage .title h3 {padding:0;margin:0;} .my-main-manage .title em {display:block;font-size:var(--font-3xlg);font-weight:var(--font-exbold);margin-top:2rem} .my-main-manage .cont {width:calc(100% - 240px);display:flex;align-items:center;/*justify-content:space-evenly;*/justify-content: flex-end;} .my-main-manage .cont ul {display:flex;flex-flow:row wrap;justify-content:center;} .my-main-manage .cont li {flex:1;font-size:1.125rem;text-align:center;padding:0 2rem;word-break:keep-all;line-height:1.2} .my-main-manage .cont li span {width:80px;height:80px;display:block;margin:0 auto 1rem;transition:all ease-out 0.2s;overflow:hidden;background-position:50% 0;background-repeat:no-repeat;background-size:100% auto} .my-main-manage .cont li span:hover{background-position:50% -80px;} .my-main-manage .cont li .ico1 {background-image:url(../img/mymain_manage_ico01.png)} .my-main-manage .cont li .ico2 {background-image:url(../img/mymain_manage_ico02.png)} .my-main-manage .cont li .ico3 {background-image:url(../img/mymain_manage_ico03.png)} .my-main-prbnr {padding:3rem;background:var(--basic-color);color:#fff;font-family:'ns-neo';} .my-main-prbnr .tit {font-size:var(--font-xlg);letter-spacing:-0.0125rem;line-height:1.2} .my-main-prbnr .tit span {display:inline-block;line-height:1.1} .my-main-prbnr .tit p:nth-child(2) span{background:var(--main-color);color:#fff} .my-main-prbnr .txt {font-weight:300;word-break:keep-all;font-size:0.875rem;margin-top:1rem;} /* 교수 반응형 */ @media only screen and (max-width:1440px){ #mypage-topwrap.pr .s_info{width:300px;} } @media only screen and (max-width:1240px){ #mypage-topwrap.pr .s_info{flex-wrap:wrap;} #mypage-topwrap.pr .cont-l .info{margin-left:0;} #mypage-topwrap.pr .cont-l .name{margin-bottom:20px;} #mypage-topwrap.pr .cont-l{width:250px;} #mypage-topwrap.pr .s_info{width:250px;} #mypage-topwrap.pr .cont-r{width:calc(100% - 250px);} .mypage-pr [class*="my-main-bx"] h3 {font-size:22px; padding:1.5rem;} .mypage-pr .com-info h3{font-size:22px;} .job-status .txt-wrap{width:calc(100% - 150px);} .job-status .badge-wrap{width:150px;} .my-main-jobinfo_pro .swiper-slide .subject{font-size:18px;} } @media only screen and (max-width:1023px){ #mypage-topwrap.pr .cont-l .name{margin-bottom:10px;} #mypage-topwrap.pr > .d_width.row{flex-direction:column;} #mypage-topwrap.pr .cont-l{width:100%;} #mypage-topwrap.pr .cont-r{width:100%;} #mypage-topwrap.pr .s_info{width:100%;} #mypage-topwrap.pr .cont-l .name{width:auto;margin-bottom:0;} #mypage-topwrap.pr .cont-l .info{margin-top:0; margin-left:20px;} #mypage-topwrap.pr .s_info{align-items:flex-start;} .mypage-pr [class*="my-main-bx"] h3{padding:20px !important;} .mypage-pr .my-main-jobinfo_pro h3{padding:20px !important;} .status-wrap{margin:20px -10px 0;} .my-main-jobinfo_pro{margin:20px 0 auto;} .mypage-pr .com-info h3{margin-top:20px;} .mypage-pr .row.bx1{margin:20px -10px;} } @media only screen and (max-width:767px){ .mypage-pr [class*="my-main-bx"] h3 {font-size:1.25rem;} .my-main-bx1{width:100%; margin:10px;} .my-alarm-bx ul li{padding:0;} .degree-status .badge{font-size:14px;} .program-table table tbody th, .program-table table tbody td, .program-table table tfoot th, .program-table table tfoot td{padding:.25rem 1rem;} .com_info_Swiper li > a{padding:15px;} .com_info_Swiper .subject{font-size:20px;} .program-status .more{top:10px;} .mypage-pr .my-main-jobinfo_pro h3{width:100%; border-bottom:1px dashed #dedede;} .my-main-jobinfo_pro .swiper-slide{padding:20px;} .my-main-jobinfo_pro .more{top:75% !important;} .status-wrap li{height:auto;} } @media only screen and (max-width:576px){ #mypage-topwrap.pr .cont-l .info{margin-left:0;} #mypage-topwrap.pr .cont-l .name{margin-bottom:10px;} #mypage-topwrap.pr .bx-wrap{overflow-X:scroll; overflow-y:hidden;flex-wrap:nowrap; max-height:unset;} #mypage-topwrap.pr .bx-wrap > div{width:200px; margin:0 20px;} #mypage-topwrap.pr .bx-wrap a p{font-size:14px;} .mypage-pr .row.bx1{margin:20px 0;} .degree-status .txt-wrap{width:100%;} .degree-status .badge{line-height:1.2; font-size:12px;} .degree-status .txt-wrap{width:100%; margin:10px 0;} .degree-status li a{line-height:30px; width:100%;} .job-status .txt-wrap{width:100%; margin-bottom:10px;} .job-status .badge-wrap{width:100%;} .mypage-pr .mypage-main.sub .board-search .form-control{width:100%;} .mypage-pr .mypage-main.sub .board-search .btn-d{width:100%; margin-top:5px;} .board-info .form-control{width:100% !important;} } /* //교수 반응형 */ /* //마이페이지 교수 */ /* 마이페이지 기업 */ #mypage-topwrap.co .cont-l{width:300px; position:relative;} #mypage-topwrap.co .cont-r{width:calc(100% - 300px);} #mypage-topwrap.co .bx-wrap > div{width:calc(100% / 4);} #mypage-topwrap.co .info .desc {color:rgba(255, 255, 255, .8); font-size:.875rem;} #mypage-topwrap.co .co-home{position:absolute; right:60px; top:15px; width: 30px; height:30px; line-height:30px; background:var(--main-color); border-radius:50%; text-align:center;} #mypage-topwrap.co .co-home i{color:#fff; font-size:.875rem;} .mypage-co h3:before{display:none;} .mypage-co [class*="my-main-bx"] h3 {padding:1.5rem 2rem;margin:0;font-size:1.5rem;font-weight:var(--font-exbold);color:#333333;letter-spacing:-0.0145rem;line-height:1;} /* //마이페이지 기업 */ /* 마이페이지 기업 반응형 */ @media only screen and (max-width:1440px){ #mypage-topwrap.co .s_info{width:300px;} } @media only screen and (max-width:1240px){ #mypage-topwrap.co .s_info{flex-wrap:wrap;} #mypage-topwrap.co .cont-l .info{margin-left:0; margin-top:20px;} .mypage-co .my-alarm-bx ul li:last-child{padding-top:20px;} .mypage-co [class*="my-main-bx"] h3{font-size:22px;padding:1.5rem;} .mypage-co .status-wrap h3 h3{font-size:22px;} } @media only screen and (max-width:1023px){ #mypage-topwrap.co .cont-l{width:100%;} #mypage-topwrap.co .cont-r{width:100%;} } @media only screen and (max-width:767px){ .mypage-co .my-alarm-bx ul li:last-child{padding-top:0;} } @media only screen and (max-width:576px){ #mypage-topwrap.co .bx-wrap > div{width:50%;} #mypage-topwrap.co .bx-wrap{flex-wrap:nowrap; overflow-X:scroll; overflow-Y:unset; max-height:unset;} .mypage-co [class*="my-main-bx"] h3{font-size:1.25rem;} } /* //마이페이지 기업 반응형 */