@charset "euc-kr";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Noto+Sans+KR:300,700,900&display=swap&subset=korean');

body, html {padding: 0; margin: 0; font-family: 'Noto Sans', Lato, Calibri, Arial, sans-serif; font-size : 12px; line-height: 1.5; width: 100%; height: 100%;}
button {border:0; padding: 5px 0; line-height: 1; cursor: pointer; outline: none;}
button:hover {opacity: 0.7;}
a, a:visited {text-decoration: none; color: inherit; font-size: inherit;}
div, ul, li, h1, h2, h3, h4, h5, p {list-style: none; margin: 0; padding: 0; box-sizing: border-box;}
.wrap {width: 100%; height: 100%;}
.header {width: 100%; margin: 0; height: auto;}
.contaner {width: 100%; margin: 0 auto; height: auto;}
.section {width: 960px; margin: 0 auto; position: relative;}
.section_full {width: 100%; position: relative;}
.inlineblock {width: 100%; display: inline-block; position: relative;}
.wrap p, .wrap div, .wrap ul, .wrap li, .wrap button {font-family: 'Noto Sans', Lato, Calibri, Arial, sans-serif;}

/* header */
.topArea {width: 1240px; display: table; padding: 20px 0; position: relative;}
.topLogo {float: left;}
.topTxt {float: left; margin-left: 20px; margin-top: 7px; font-weight: 700;}
.topTxt p:first-child {color: #00b3ff; font-size: 14px; font-family: 'Noto Sans', Lato, Calibri, Arial, sans-serif; text-align: left;}
.topTxt p:last-child {color: #424973; font-size: 15px; font-family: 'Noto Sans', Lato, Calibri, Arial, sans-serif;}
.topLogin {float: right;}
.topLogin .txtBox {display: inline-block; float: left; margin-right: 20px; font-weight: 700; color: #ff9900; font-family: 'Noto Sans', Lato, Calibri, Arial, sans-serif;}
.topLogin a {display: block; float: left; color: #333;}
.topLogin a + a {margin-left: 20px;}
.topLogin a:nth-child(1), .topLogin a:nth-child(2) {font-weight: 700;}
.topNaver {display: inline-block; position: absolute; top: 43px; right: 193px; padding: 5px 10px; background: #1ec800; color: #fff; font-weight: 700;}
.topNaver span {display: inline-block; width: 10px; height: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; margin-right: 5px; position: relative; top: -1px;}
.topNaver span:before {content: ""; display: block; width: 0; height: 0; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; border-left: 5px solid transparent; position: absolute; top: -9px; left: -6px;}
.menuBody {width: 100%; background: #333d78; height: 60px; position: relative;}
.topMenu {display: table; font-family: 'Noto Sans', Lato, Calibri, Arial, sans-serif;}
.topMenu{
    /* width: 950px !important; */
    width: 1240px !important;
}
.topMenu li {
    float: left; height: 60px; line-height: 60px; font-size: 15px; font-weight: 700; text-align: center; letter-spacing: -2px; 
    /* margin: 0 20px; */
    margin: 0 35px;
    /* width: calc(100% / 9); */
}
.is-mobile .topMenu {
    left: 0 !important;
}
.is-mobile .topMenu li {
    margin: 0 18px;
    /* width: calc(100% / 9.5); */
}
.topMenu li a {color: #fff; white-space: nowrap;}
.topMenu li a.myclass {background: #fff; width: 100%; height: 100%; color: #333d78; padding: 10px 15px; border-radius: 2px;}
.topMenu li a.myclass:hover {background: #00ab33; color: #fff;}
.dropdown-content {display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding: 10px 0; left: -55px;}
.dropdown-content:before {content:""; display: block; width: 0; height: 0; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 13px solid #f1f1f1; border-left: 5px solid transparent; position: absolute; top: -15px; left: 78px;}
.topMenu li .dropdown-content a {color: #333; font-size: 13px; display: block; height: 40px; line-height: 40px;}
.dropbtn {position: relative;}
.dropbtn:hover .dropdown-content {display: block;}
.barndTop {position: absolute; right: 10px; bottom: 10px; background: #558ed5; padding: 0 20px; height: 30px; line-height: 28px; text-align: center; border: 1px solid #f5f5f5;}
.barndTop a {color: #fff; display: block; font-weight: bold; text-decoration: none;}


/* 메인 */
.bx-wrapper {margin: 0 auto 40px;}
.boardBox {display: table; margin: 20px auto;}
.boardBox .left {float: left; width: 48%; position: relative;}
.boardBox .right {float: right; width: 48%; position: relative;}
.con-title {font-size: 18px; font-weight: 800; color: #333; padding: 10px 0; border-bottom: 1px solid #ddd;}
.boardBox .title .moreBtn {font-size: 14px; float: right; position: relative; top: 5px;}
.board-con {padding: 15px 10px;}
.board-con a {display: block; font-size: 15px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;}
.board-con a + a {margin-top: 15px;}
a.moreBtn {font-size: 13px; position: absolute; right: 0; top: 20px;}
.board-con a span {font-size: 12px; color: #2196F3;}

.centerBanner {height: 199px; background: url(/images/main-bg2.jpg) no-repeat center top; text-align: center; color: #fff; padding: 40px 0;}
.centerBanner div {font-size: 34px; margin-bottom: 5px;}
.centerBanner div span {font-weight: 900;}
.centerBanner p {font-size: 16px; color: #fff; letter-spacing: -2px;}

.studyInfo {margin-top: 20px;}
.main-c1-1 {float: left; width: 683px !important;}
.studyInfo .con-title {margin-bottom: 20px;}
.main-c1-1 h5 {font-size: 15px; font-weight: 700; color: #242e64; margin-bottom: 5px;}
.main-c1-2 {float: left; width: 200px;}
.main-c1-3 {float: left; width: 255px;}
.main-c1-2, .main-c1-3 {margin-left: 22px;}
/*.compu, .wordp {border: 1px solid #ddd;}*/
.compu li, .wordp li {float: left; width: 49%; border-bottom: 1px solid #ddd; position: relative;}
.compu li span, .wordp li span, .office span, .itq span {display: inline-block; text-align: center; line-height: 60px; width: 139px; font-size: 15px; font-weight: 700; color : #333d78;}

.compu li button, .wordp li button, .office button, .itq button {position: absolute; right: 0; width: 45px; height: 60px; color: #fff; font-size: 14px;}
.compu .pil, .wordp .pil {background: #333d78; right: 45px;}
.compu .sil, .wordp .sil {background: #4e5fc2;}

.compu li {border: 1px solid #ddd; margin-bottom: 10px;}
.compu li:nth-child(2), .compu li:nth-child(4) {margin-left: 2%;}
.compu li span {width: 240px; text-align: center;}

.masch::after {content: ""; display: block; clear: both;}
.masch li {float: left; border: 1px solid #ddd; width: 221px; height: 60px; text-align: center; font-size: 15px; line-height: 59px; margin-right: 10px; margin-bottom: 10px}
.masch li a {float: left; width: 221px; height: 60px; color: #fff; font-weight: 600;}
.masch li:nth-child(1) {background: #0195ff;}
.masch li:nth-child(2) {background: #47aef9;}
.masch li:nth-child(3) {background: #47aef9;margin-right: 0px;}
.masch li:nth-child(4) {background: #31b48c;}
.masch li:nth-child(5) {background: #3eaeb9;}
/*
.masch li:hover {background: #444; }
.masch li:hover a {color: #fff;}
*/
.masch li
.masch li:nth-child(3n) {margin-right: 0px;}

h5.word {color: #0096ff; margin-top: 10px;}
.wordp li {border-bottom: 0;}
.wordp .pil {background: #0096ff;}
.wordp .sil {background: #46aff9;}
.office, .itq {border: 1px solid #ddd; height: 60px; width: 100%; margin-top: 15px; position: relative;}
.office span {display: inline-block; text-align: center; width: 368px;}
.office .pil {right: 45px; background: #000;}
.office .sil {background: #636363;}
.itq .hangl {background: #1e445f; right: 90px;}
.itq .powpo {background: #ab0c42; right: 45px;}
.itq .exel {background: #2b862e;}
.main-c1-2 ul {width: 100%; border: 1px solid #ddd;}
.main-c1-2 ul li {height: 58px; font-size: 15px; color: #444444; line-height: 58px; text-align: center; font-weight: 700;}
.main-c1-2 ul li + li {border-top: 1px solid #ddd;}
.main-c1-2 ul li:hover {background: #444;}
.main-c1-2 ul li:hover a {display: block; color: #fff; font-weight: 700;}
.movie_popup {display: none; background: #f5f5f5; padding: 20px; text-align: center; position: absolute; left: 394px; width: auto; height: auto; z-index: 1000; top: 781.5px;}


.ytBlock {margin-top: 20px; display: table;}
.ytBlock .left {float: left; width: 632px;}
.ytBlock .right {float: right; width: 302px;}
.ytBlock .left ul li {float: left; width: 306px;}
.ytBlock .left .con-title, .ytBlock .right .con-title {margin-bottom: 20px;}
.ytBlock .left ul li:nth-child(even) {margin-left: 20px;}
.ytBlock .left ul li:nth-child(3), .ytBlock .left ul li:nth-child(4) {margin-top: 30px;}
.ytBlock .left .con-title span {float: right;font-size: 13px; display: inline-block; padding: 5px 25px 5px 10px; background: #4cab24; color: #fff; position: relative;}
.ytBlock .left .con-title span:after {content:""; display: block; width: 0; height: 0; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #fff; position: absolute; top: 9px; right: 5px;}
.ytBlock .left .con-title span a {display: block; color: #ffffff;}
.custom, .bankBox {border: 1px solid #ddd; padding: 20px; height: 182px;}
.custom p, .bankBox p {font-size: 15px; line-height: 2;}
.custom p b, .bankBox p b {width: 75px; display: inline-block;}
.custom p span {font-size: 13px; letter-spacing: -1px; color: #ff9900;}
.master {font-size: 15px; background: #666; color: #fff; letter-spacing: -1px; text-align: center; padding: 5px 0; margin-top: 5px;}
.custom p:nth-child(4) {margin-top: -10px;}
.ytBlock .right .con-title {letter-spacing: -1px;}
.studyTime {width: 100%; border: 1px solid #ddd;}
.studyTime li {font-size: 15px; display: table; height: 50px; line-height: 48px;}
.studyTime li + li {border-top: 1px solid #ddd;}
.studyTime .timeth {width: 138px; font-weight: 700; border-right: 1px solid #ddd;}
.studyTime .timetd {width: 164px;}
.studyTime li div {display: table-cell; text-align: center;}
.studyTime .timeth.compil {color: #fff; background: #333d78;}
.studyTime .timeth.comsil {color: #fff; background: #4e5fc2;}
.studyTime .timeth.word {color: #fff; background: #00b3ff;}

.customer {margin-top: 30px;}
.customer ul {margin: 20px 0;}
.customer ul li {border: 1px solid #ddd; width: 24%; float: left; font-size: 15px; font-weight: 700; text-align: center; height: 60px; line-height: 60px; margin-bottom: 15px;}
.customer ul li + li {margin-left: 1.3%;}
.customer ul li:nth-child(5) {margin-left: 0;}
.customer ul li a {display: block;}
.customer ul li img {margin-right: 10px; position: relative; top: 4px;}


/* 푸터 */
.footer {}
.linkBottom {padding: 20px 0; border-top: 1px solid #ddd;}
.linkBottom a {font-size: 14px; display: inline-block; padding: 0 30px; color: #333; position: relative;}
.linkBottom a:first-child {padding-left: 0;}
.linkBottom a:before {content:""; display: block; width: 1px; height: 10px; border-left: 1px solid #777; position: absolute; left: 0; top: 6px;}
.linkBottom a:first-child:before {display: none;}
.compamyBottom {padding: 40px 0; background: #444; color: #aaa; font-size: 13px; letter-spacing: -1px;}
.compamyBottom span {display: inline-block; padding: 0 10px; position: relative; margin-bottom: 5px; word-break: keep-all;}
.compamyBottom span:before {content:""; display: block; width: 1px; height: 8px; border-left: 1px solid #aaa; position: absolute; left: 0; top: 5px;}
.compamyBottom span:nth-child(1), .compamyBottom span:nth-child(6) {padding-left: 0;}
.compamyBottom span:nth-child(1):before, .compamyBottom span:nth-child(6):before {display: none;}
.compamyBottom span a {text-decoration: underline; color: #aaa;}
.logoBottom {position: absolute; right: 0; top: 0;}


/* 메인퀵메뉴 */
.mainQuick {width: 90px; height: auto; position: absolute; 
    /* left: 50%;  */
    left: 45%; 
    top: 91px; margin-left: -590px; background: #fff; z-index: 9; text-align: center;}
.mainQuick .title {font-size: 16px; color: #fff; background: #4cab24; padding: 7px 0;}
.mainQuick ul {border: 1px solid #ddd;}
.mainQuick ul li {font-size: 14px; font-weight: 700; padding: 15px 0;}
.mainQuick ul li a {display: block;}
.mainQuick ul li + li {border-top: 1px solid #ddd;}
.mainQuick ul li p, .mainQuick ul li div {font-size: 13px; letter-spacing: -1.5px;}
.mainQuick ul li div {color: #3e871f;}
.mainQuick ul li .TOP {color: #333; position: relative; display: inline-block; padding-left: 10px;}
.mainQuick ul li .TOP:before {content:""; display: block; width: 0; height: 0; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #333; border-left: 5px solid transparent; position: absolute; top: 0; left: -2px;}