@charset "utf-8";
/* CSS Document */
body {}
#Cover {width:100%; min-width: 1280px; position:relative; background:#f9f9f9;}

/* .cbp-spmenu {background:#f1f1f1; position:fixed;}
.cbp-spmenu h2 {color:#d7d7d7; font-size:1.9em; padding:20px; margin:0; background:#1d3e69;}
.cbp-spmenu h2 .today_work {display:block; margin-top:20px; padding:10px; font-size:14px; text-align:center; color:#fff; border:1px solid #6fc2f4;}
.cbp-spmenu h2 .today_work:hover {background:#2da7f0;}
.cbp-spmenu .article {height:calc(100% - 130px); overflow-y:auto;}
.cbp-spmenu .article > a {display:block; border-bottom:1px solid #d7d7d7; padding:1em; color:#666; font-size:14px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.cbp-spmenu .article > a:hover {color:#fff; background:#636363;}
.cbp-spmenu-vertical {width:240px; height:100%; top:0; border-right:1px solid #999; z-index:1200;}

Vertical menu that slides from the left or right
.cbp-spmenu-left {left:-240px;}
.cbp-spmenu-right {right:-240px; display:none;}
.cbp-spmenu-left.cbp-spmenu-open {left:0px;}
.cbp-spmenu-right.cbp-spmenu-open {right:0px;}

Horizontal menu that slides from the top or bottom
.cbp-spmenu-top {top:-150px;}
.cbp-spmenu-bottom {bottom:-150px;}
.cbp-spmenu-top.cbp-spmenu-open {top:0px;}
.cbp-spmenu-bottom.cbp-spmenu-open {bottom:0px;}

Push classes applied to the body
.cbp-spmenu-push {overflow-x:hidden; position:relative; left:0;}
.cbp-spmenu-push-toright {left:240px;}
.cbp-spmenu-push-toleft {left:0;}

Transitions
.cbp-spmenu, .cbp-spmenu-push {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;}

#showLeft {position:absolute; top:150px; left:240px; width:100px; height:80px; font-size:14px; font-weight:500; color:#fff; border:none; display:none;}
#showLeft span {display:inline-block;}
#showRightPush {display:none;}

상단 헤더부분 CSS
#header {position: absolute; width:100%; background:#fff; z-index: 999;}
#loginForm {display:inline-block; vertical-align:middle;}
#header div.class_sbox select {width:180px; margin-left:10px;}
#header div.class_sbox a {color:#666 !important;}

#header div.topCover {display: flex; align-items: center; width:1200px; margin:0 auto;}
#header div.topCover h1 {display:inline-block; margin: 15px;}
#header div.topCover h1 img {height: 42px;}
#header div.topCover div.login {display: flex; align-items: center; margin-left: auto;}
#header div.topCover div.login p {display: inline-block; margin-right:5px; vertical-align: middle;}
#header div.topCover div.login p.photo {width:54px; height:54px;}
#header div.topCover div.login p.photo img {width: 100%; border-radius: 100%;}
#header div.topCover div.login p span {color:#000; font-weight:500;}
#header div.topCover div.login ul.user_box {display: inline-block;}
#header div.topCover div.login ul.user_box li {position: relative; display: inline-block; width:180px; margin-right:5px;}
#header div.topCover div.login ul.user_box li i {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 19px; z-index: 1;}
#header div.topCover div.login ul.user_box li input::placeholder {font-size: 13px;}
#header div.topCover div.login #loginForm #id {position: relative; width:100%; padding-left: 35px; box-sizing: border-box;}
#header div.topCover div.login #loginForm #pw {position: relative; width:100%; padding-left: 35px; box-sizing: border-box;}
#header div.topCover div.login #loginForm .loginBtn {display:block; text-align:center; color:#fff; padding:8px 20px; border-radius:4px; background:#eb297b;}

#header div.topCover div.login ul.member {display: inline-block;}
#header div.topCover div.login ul.member li {display:inline-block; padding:5px 10px; border-radius: 4px; border: 1px solid #d7d7d7; background: #f1f1f1;}
#header div.topCover div.login ul.member li a {display:block; font-size: 12px; color:#222;}
#header div.topCover div.login ul.member li.find {}
#header div.topCover div.login ul.member li.find a {color:#696f76;}
#header div.topCover div.login ul.message {display: inline-block;}
#header div.topCover div.login ul.message li {display: inline-block; padding:0 8px; text-align:center; vertical-align: middle;}
#header div.topCover div.login ul.message li a {display:block;}
#header ul.util {float:right; margin-left: 10px;}
#header ul.util li {display:inline-block; padding:0 4px;}
#header ul.util li a {font-weight:500; color:#999; font-size:13px;}
#header ul.util li a:hover {color:#333;}
#header ul.util li:first-child a:before {display:none;}
#header ul.util li a:before {content:""; display:inline-block; vertical-align: middle; width:1px; height:11px; margin:0 10px 0 0; background:#cdcdcd;}
#header ul.util li select {height: inherit; padding: 0 30px 0 0; font-size: 13px; border: none;}
#header div.topCover div.login .total_login {margin-top:2px;}
#header div.topCover div.login .total_login li {display:inline-block; vertical-align:top;}
#header div.topCover div.login .total_login li a {display:block; font-size:14px; text-align:center; color:#fff; padding:8px 16px; border-radius:2px; background:#d7272b;}

#header #gnb {height:60px; background:#3d5595; overflow:hidden;}
#header #gnb .gnbList {position:relative; width:1200px; margin:0 auto; overflow:hidden;}
#header #gnb .gnbList:after {clear:both; display:block; content:''; *zoom:1;}
#header #gnb .gnbList > li {float:left; text-align:center;}
#header #gnb .gnbList > li:hover a {padding-bottom:0px; cursor:pointer;}
#header #gnb .gnbList > li:hover .twoDep {margin:0;}
#header #gnb .gnbList li > a {position:relative; display:block; font-size:18px; margin:17px 0; color:#fff; overflow:hidden;}
#header #gnb .gnbList li a span {display:block; width:100%; padding:0 0 0px 0;}
#header #gnb .gnbList li:first-child .twoDep ul {border-left:1px solid rgba(0, 0, 0, .1);}
#header #gnb .gnbList li.on {background: rgba(0, 0, 0, .1);}
#header #gnb .gnbList .twoDep {position: relative; height:400px; margin-top:0px; display:block; overflow: hidden;}
#header #gnb .gnbList .twoDep ul {height:400px; padding:2px 0 0 30px; border-right:1px solid rgba(0, 0, 0, .1);}
#header #gnb .gnbList .twoDep ul li {}
#header #gnb .gnbList .twoDep ul li a {height:auto; font-size:15px; color:#fff; text-align:left;}
#header #gnb .gnbList .twoDep ul li a:hover {text-decoration:underline;}

#container {padding-top: 154px;}
#container:after {content:''; display:block; height:0; clear:both;}

왼쪽 Aside 영역
#aside {position: absolute; width:230px; margin-right: 20px; border-radius: 7px; box-shadow: 0px 1px 5px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; background: #fff; overflow: hidden;}
#aside .lm-tit {display: flex; align-items: center; height:84px; text-align:center; background:#395bb5;}
#aside .lm-tit h2 {flex: 1;; font-size:24px; font-weight:500; color:#fff;}
#aside .lm-tit span.txt {display:block; font-size:13px; color:rgba(225,225,225,0.75);}
#aside ul.lnb {}
#aside ul.lnb li {position: relative; padding:12px 0; font-size:16px; font-weight:500; border-bottom:1px solid #f1f1f1;}
#aside ul.lnb li:last-child {border-bottom: none;}
#aside ul.lnb li:hover {background:#f9f9f9;}
#aside ul.lnb li a {display:block; color:#333; text-indent:20px;}
#aside ul.lnb li.over {}
#aside ul.lnb li.over:before {content: '\f383'; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-family: "Ionicons"; font-size: 19px; color:#406ace;}
#aside ul.lnb li.over a {text-indent:40px; color:#406ace !important;}

내용 컨텐츠 CSS
#bodyContent {position:relative; width:935px; min-height:680px; margin-left: 250px; padding:20px; border-radius: 7px; box-shadow: 0px 1px 5px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; background:#fff;}


메인 CSS
#container.main_layout{padding-top: 132px;}
#mainContent {position:relative; width:1200px; margin:0 auto; margin-top:-74px; padding:20px 19px 0px 19px; background:#fff; z-index:998; overflow:hidden; box-sizing:border-box;}
#mainContent .left_box {float:left; width:330px;}
#mainContent .left_box:after {clear:both; display:block; content:'';}

메인 롤링 이미지
.mainvisual {position:relative;}
.mainvisual .cycle-slideshow {text-align:center; height:440px; overflow:hidden;}
.mainvisual .cycle-slideshow .slide {text-align:center; width:100%; height:440px;}
.mainvisual .pagerWrap {position:absolute; left:50%; top:300px; margin-left:-490px; width:980px; z-index:201; text-align:center;}
.mainvisual .pagerWrap #adv-custom-pager {display:inline-block;}
.mainvisual .pagerWrap #adv-custom-pager a{display:inline-block;width:18px;height:18px;margin-left:4px;background:url(../img/template_common/bg_pagerOff.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .pagerWrap #adv-custom-pager a.cycle-pager-active{width:52px;background:url(../img/template_common/bg_pagerOn.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .pagerWrap button {display:inline-block; width:18px; height:18px; vertical-align:top; border:none; font-size:0; line-height:0; text-indent:-999px; box-sizing:border-box;}
.mainvisual .pagerWrap .btnStop {background:url(../img/template_common/btn_stop.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .pagerWrap .btnPlay {background:url(../img/template_common/btn_play.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .contentBox {position:absolute; top:120px; left:50%; width:400px; text-align:center; margin-left:160px; padding:20px 20px 25px 20px; background:rgba(0,0,0,0.4); z-index:200;}
.mainvisual .textBox {color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.mainvisual .textBox span {font-size:34px; color:rgba(255,255,255,0.85); letter-spacing:-1px;}
.mainvisual .textBox strong {display:block; margin-top:4px; color:#87f4ff; font-size:23px; font-weight:500; letter-spacing:-1px;}
.mainvisual .textBox p {margin-top:0px; color:#fff; font-size:17px; font-weight:400; letter-spacing:-1px;}

메인 최근게시물 탭
#mainContent div.boardList { position:relative; overflow:hidden;}
#mainContent div.boardList ul.boardTab {height:38px; line-height:36px; border-bottom:1px solid #d6d6d6;}
#mainContent div.boardList ul.boardTab li {display:inline; float:left; width:110px; margin-top:0px; margin-right:-1px; border:1px solid #bbbbbb; background:#efefef;}
#mainContent div.boardList ul.boardTab li a {display:block; font-weight:500; text-align:center; color:#6d6d6d;}
#mainContent div.boardList ul.boardTab li.select {border:1px solid #3d5595; background:#3d5595;} 
#mainContent div.boardList ul.boardTab li.select a {color:#fff;}

메인 최근게시물 - 리스트
#mainContent div.boardList .more {position:absolute; top:8px; right:0; padding: 2px 10px; font-size: 11px; font-weight: 700; color:rgba(0, 0, 0, .6) !important; border: 1px solid rgba(0, 0, 0, .3); border-radius: 20px; z-index:auto;}
#mainContent div.boardList div.listContent {width:100%; padding:10px 0;}
#mainContent div.boardList div.listContent ul li {position:relative; line-height:38px; vertical-align:top; overflow:hidden; border-bottom:1px solid #eaeaea;}
#mainContent div.boardList div.listContent ul li span {float:left; width:73%;}
#mainContent div.boardList div.listContent ul li span.date {float:right; width:27%; text-align:right; font-size: 13px; color:#a9a9a9;}
#mainContent div.boardList div.listContent ul li span a {display:block; padding-left:12px; font-size: 14px; color:#484848; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; background:url(../img/template1/icon_dot.gif) 2px 50% no-repeat;}
#mainContent div.boardList div.listContent ul li span a:hover {text-decoration:underline;}
#mainContent div.boardList div.listContent ul li .icon-new-color {position:absolute; font-size:10px; font-weight: 700; left: 73%; top: 50%; transform: translateY(-50%);}
#mainContent div.boardList div.listContent .tab_content1{display:none;}
#mainContent div.boardList div.listContent .tab_content {min-height:280px; background-size:150% 100%;}

메인 중앙배너
#mainContent .center_box {float:left; width:533px; margin:-20px 18px 0 19px; padding-bottom:40px; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; box-sizing:border-box;}
#mainContent .center_box ul.feed_list {overflow:hidden;}
#mainContent .center_box ul.feed_list > li {position:relative; float:left; width:33.333333%; height:175px;}
#mainContent .center_box ul.feed_list > li:last-child {margin-right:0;}
#mainContent .center_box ul.feed_list > li span.more {position:absolute; top:0; right:0; width:27px; height:27px; text-indent:-9999px; background:url(../img/template1/feed_list_more.png) no-repeat;}
#mainContent .center_box ul.feed_list > li a.box01 {display:block; text-align:center; height:175px; padding-top:35px; font-size:19px; font-weight:500; color:#fff; background:#427cb8 url(../img/template1/center_banner_img01.png) no-repeat; background-position:center 97px; background-size:69px; box-sizing:border-box;}
#mainContent .center_box ul.feed_list > li a.box02 {display:block; text-align:center; height:175px; padding-top:35px; font-size:19px; font-weight:500; color:#fff; background:#4263b8 url(../img/template1/center_banner_img02.png) no-repeat; background-position:center 97px; background-size:69px; box-sizing:border-box;}
#mainContent .center_box ul.feed_list > li a.box03 {display:block; text-align:center; height:175px; padding-top:35px; font-size:19px; font-weight:500; color:#fff; background:#4255b8 url(../img/template1/center_banner_img03.png) no-repeat; background-position:center 97px; background-size:69px; box-sizing:border-box;}
#mainContent .center_box ul.feed_list > li a span {display:block; padding-bottom:0px; font-size:12px; font-weight:normal; color:rgba(225,225,225,0.8);}
#mainContent .center_box ul.feed_list > li a {-webkit-transition: background-color 0.4s, background-image 0.4s, background-position 0.4s; For Safari 3.1 to 6.0
    transition: background-color 0.4s, background-image 0.4s, background-position 0.4s;}
#mainContent .center_box ul.feed_list > li a:hover{background-position:50% 70% !important;}

메인 중앙 내 강의실 list
#mainContent .myclass {width:93%; margin:17px auto 0 auto;}
#mainContent .myclass h2 {padding:4px 0 6px 40px; font-size:18px; font-weight:500; color:#3a63a5; letter-spacing:-0.5px; background:url(../img/template1/myclass_bg_title.png) no-repeat left 4px;}
#mainContent .myclass ul.board-latest {height:114px; padding:5px 5px 5px 20px; border:1px solid #dddddd; border-top:2px solid #3c6cc8; background: #f7f7f7;}
#mainContent .myclass ul.board-latest li {line-height:30px; margin-right:10px; border-bottom:1px dashed #c5c5c5;}
#mainContent .myclass ul.board-latest li:last-child {border-bottom:none;}
#mainContent .myclass ul.board-latest li span.boardTxt {display:inline-block; width:calc(100% - 84px); overflow:hidden; font-size: 14px; text-indent:8px; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle; background:url(../img/template1/icon_dot.gif) left 13px no-repeat;}
#mainContent .myclass ul.board-latest li span.prof {display:inline-block; width: 84px; color:#707070; font-size: 14px; text-align:left;  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle;}
#mainContent .myclass ul.board-latest li span.prof i {display:inline-block; vertical-align:middle; margin-right:5px; width:16px; height:16px; background:url(../img/template1/icon_people.png) left top no-repeat;}
#mainContent .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools {opacity:1;}

메인 오른쪽 배너영역
#mainContent .right_box {float:right; width:259px;}
#mainContent .right_box ul.cont_unit2 {margin-top:4px;}
#mainContent .right_box ul.cont_unit2 li.info {height:100px; padding-top:6px; background:url(../img/template1/goban_info.gif) right bottom no-repeat;}
#mainContent .right_box ul.cont_unit2 li h2 {font-size:16px; line-height:24px; margin-top:5px; margin-bottom:5px; font-weight:600; color:#1a1a1a;}
#mainContent .right_box ul.cont_unit2 li h2 span {color: #999; font-size:14px;}
#mainContent .right_box ul.cont_unit2 li span {display:block; font-weight:500; font-size:13px; margin-bottom:3px;}
#mainContent .right_box ul.cont_unit2 li strong {font-weight:500; color:#2369ac;}
#mainContent .right_box ul.cont_unit {overflow:hidden;}
#mainContent .right_box ul.cont_unit li {float:left; width:48%; position:relative;}
#mainContent .right_box ul.cont_unit li:first-child {margin-right:4%;}
#mainContent .right_box ul.cont_unit li:last-child {width:100%;}
#mainContent .right_box ul.cont_unit a {display:block; border:1px solid #dddddd; box-sizing:border-box; letter-spacing:-0.5px;}
#mainContent .right_box ul.cont_unit a.stu_mn,  
#mainContent .right_box ul.cont_unit a.prof_mn {padding:15px 0 0 16px; height:105px; font-size:16px; font-weight:500; color:#272727; box-sizing:border-box;}
#mainContent .right_box ul.cont_unit a.stu_mn {background:url(../img/template1/manual_icon01.png) no-repeat right 5px bottom 5px;}
#mainContent .right_box ul.cont_unit a.prof_mn {background:url(../img/template1/manual_icon02.png) no-repeat right 10px bottom 5px;}
#mainContent .right_box ul.cont_unit a.faq {margin-top:10px; width:100%; height:96px; padding:15px 0 0 20px; font-size:16px; font-weight:500; color:#272727; background:url(../img/template1/faq_icon.png) no-repeat right 17px bottom 15px;}
#mainContent .right_box ul.cont_unit a.faq span {margin-top:3px; line-height:16px; font-size:12px; letter-spacing:0.2px; display:block; color:#666;}
#mainContent .right_box ul.cont_unit .arr {position:absolute; top:50px; left:20px;  width:17px; height:17px; background:url(../img/template1/icon_arrow_ban.png) left top no-repeat;}


하단 내용 컨텐츠 CSS
#footer {background:#323232; padding-bottom:50px;}
#footer .foot-link {border-bottom:1px solid #4f4f4f;}
#footer .foot-link .inner-box {position: relative; width:1200px; margin:0 auto;}
#footer .foot-link .inner-box dl {padding: 10px 0; text-align: center;}
#footer .foot-link .inner-box dl dt {display:inline-block; font-weight:500; color: #999;}
#footer .foot-link .inner-box dl dt i {margin-left:5px;}
#footer .foot-link .inner-box dl dd {display:inline-block; margin-left:26px; padding:2px;}
#footer .foot-link .inner-box dl dd a {display:block; font-size:14px; line-height:30px; font-weight:500; color:#999;}
#footer .foot-link .inner-box dl dd a:hover {text-decoration:underline;}
#footer .foot-link .inner-box dl dd a:before {content:""; display:inline-block; vertical-align: middle; width:1px; height:13px; margin:0 30px 0 0; background:#4f4f4f;}
#footer .foot-link dl dd.first a:before {display: none;}

#footer .inner-wrap {position:relative; width:1200px; margin:0 auto;}
#footer .inner-wrap:after {display:block; clear:both; content:''}
#footer .inner-wrap ul.copy {float:left; margin-top:20px;}
#footer .inner-wrap ul.copy a {color:#f1f1f1;}
#footer .inner-wrap ul.copy li {padding:2px 0; font-size:1em; color:#999;}
#footer .inner-wrap ul.copy li address {font-style:normal;}
#footer .inner-wrap ul.copy li address span:before {content:"/"; display:inline-block; margin:0 20px;}
#footer .inner-wrap .policy-btn {position:absolute; top:22px; right:20px;}
#footer .inner-wrap .policy-btn a {padding:5px 15px; color:#fff; font-size:13px; border-radius:4px; background:#505050;} */

/* 메인 레이어 팝업 CSS */
.popup-wrap {display: flex; align-items: center; justify-content: center; position: absolute; top: 0px; left: 0px; right: 0px; height: 100vh; z-index: 9999;}
.popup-wrap .inner-box {position: relative; max-width: 1200px; opacity: 1; z-index: 1;}  
.popup-wrap .inner-box .head-box {display: flex; align-items: center; padding-bottom: 10px;}
.popup-wrap .inner-box .head-box a {display: inline-block; margin-left: auto; padding: 5px 20px; font-size: 15px; color: #fff; text-align: center; border: 2px solid #fff; border-radius: 24px;}
.popup-wrap .inner-box .head-box a:after {content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle; background: url(../img/template1/inbox_close.png) no-repeat;}
.popup-wrap .inner-box .head-box a:last-child {margin-left: 10px;}
.popup-wrap .inner-box ul li {text-align: center;}
.popup-wrap .overlay {position: fixed; left: 0; top: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; background: rgba(0, 0, 0, 0.7);}
.popup-wrap .bx-pager {margin-top: 10px; text-align: center;}
.popup-wrap .bx-pager .bx-pager-item {display: inline-block;}
.popup-wrap .bx-pager .bx-pager-item a {display: inline-block; margin: 5px; width: 32px; height: 32px; line-height: 32px; text-align: center; color: #fff; border-radius: 100%; background: #999;}
.popup-wrap .bx-pager .bx-pager-item a.active {background: #3d5595;}
.popup-wrap .bx-wrapper .bx-controls-direction a {position: absolute; top: 50%; margin-top: -30px; outline: 0; width: 60px; height: 60px; text-indent: -9999px;}
.popup-wrap .bx-wrapper .bx-prev {left: -60px; background: url(../img/template1/popup_arrow_left.png) no-repeat;}
.popup-wrap .bx-wrapper .bx-next {right: -60px; background: url(../img/template1/popup_arrow_right.png) no-repeat;}