@charset "utf-8";
/*@import url('font.css');*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* Reset */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;height:100%;font-family: 'Noto Sans KR', sans-serif;font-weight:400}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd, p {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=submit]{cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {border-radius:0;-webkit-appearance:none}
textarea, select {font-size:1em;font-family:dotum}
textarea {border-radius:0;-webkit-appearance:none}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
ul,ol,li{list-style:none;padding:0;margin:0;}
input, textarea, select {font-family: 'Noto Sans KR', sans-serif; outline: none}
.clear {clear:both}
.fl { float: left; }
.fr { float: right; }

/*--------------------------------------------------------------------------------------------------------------------------*/

/*셀렉트 커스텀*/
select {
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none; /* 화살표 없애기 공통*/
    background-image: url('../img/btn_arrow_bottom1.png');
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 12px;
	background-color: #fff;
}
select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }

/*placeholder*/
input::-ms-input-placeholder { font-weight: 400; color: #999; }
input::-webkit-input-placeholder { font-weight: 400; color: #999; } 
input::-moz-placeholder { font-weight: 400; color: #999; }

textarea::-ms-input-placeholder { font-weight: 400; color: #999; }
textarea::-webkit-input-placeholder { font-weight: 400; color: #999; } 
textarea::-moz-placeholder { font-weight: 400; color: #999; }

/*--------------------------------------------------------------------------------------------------------------------------*/


/*가변형 팝업*/
.pop-layer { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 72%; height: auto; background: #fff; z-index: 10; }
.dim-layer { display: none; position: fixed; _position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.dim-layer_on { display: block; }
.dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); }
.dim-layer .pop-layer { display: block; }

.dim-layer .pop-conts { padding: 15px; box-sizing: border-box; }
.dim-layer .pop-info { margin-bottom: 20px; font-size: 15px; font-weight: 400; color: #000; text-align: center; }
.dim-layer .btn-pop { display: block; height: 40px; line-height: 40px; text-align: center; background: #3963cf; border-radius: 3px; font-size: 15px; font-weight: 400; color: #fff; }

/*기본 팝업창*/
.pop-basic .pop-info { margin-top: 20px; }

/*메뉴 팝업창*/
.pop-menu .pop-conts { padding: 0; }
.pop-menu .list-menu li { border-bottom: 1px solid #d6d6d6; box-sizing: border-box; text-align: center; }
.pop-menu .list-menu li:last-child { border-bottom: 0; }
.pop-menu .list-menu li a { display: block; padding: 12px 0; font-size: 14px; font-weight: 500; color: #000; }

/*수강료 팝업창*/
.pop-tuition .name { margin-right: 10px; font-size: 14px; font-weight: 700; color: #000; }
.pop-tuition .academy { font-size: 14px; font-weight: 400; color: #a7a9ac; }
.pop-tuition .date { display: block; margin: 5px 0; font-size: 14px; font-weight: 400; color: #000; }
.pop-tuition strong { display: block; margin-bottom: 15px; font-size: 20px; font-weight: 700; color: #000; line-height: 32px; }

/*학생 정보 팝업창*/
.pop-attend .pop-conts { padding: 0; }
.pop-attend ul li { padding: 15px 20px; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
.pop-attend ul li span { font-size: 14px; font-weight: 400; color: #a7a9ac; }
.pop-attend ul li strong { display: block; font-size: 16px; font-weight: 500; color: #000; }
.pop-attend ul li .point { font-weight: 500; color: #3963cf; }
.pop-attend .btn-area { padding: 20px 15px; box-sizing: border-box; }

/*--------------------------------------------------------------------------------------------------------------------------*/


/*header*/
#header { position: fixed; z-index: 999; top: 0; width: 100%; height: 45px; background: #fff; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; }
.hd:after { content: ''; display: block; clear: both; }
.hd .btn-hamburger { position: absolute; z-index: 9; line-height: 45px; padding: 0 10px; box-sizing: border-box; }
.hd .btn-hamburger img { width: 20px; cursor: pointer; }
.hd .btn-back { position: absolute; z-index: 9; line-height: 45px; padding: 0 10px; box-sizing: border-box; }
.hd .btn-back img { width: 9px; }
.hd .btn-close { position: absolute; right: 0; z-index: 9; line-height: 45px; padding: 0 10px; box-sizing: border-box; }
.hd .btn-close img { width: 16px; }
.hd .logo { position: absolute; left: 0; right: 0; margin: auto; width: 100%; line-height: 45px; text-align: center; }
.hd .logo img { width: 62px; }
.hd .hd-tit { position: absolute; left: 0; right: 0; margin: auto; width: 100%; line-height: 45px; text-align: center; font-size: 20px; font-weight: 500; color: #000; }
.hd .btn-search { position: absolute; right: 0; z-index: 9; line-height: 45px; padding: 0 10px; box-sizing: border-box; }
.hd .btn-search img { width: 18px; cursor: pointer; }

#header.bg-black { background: #000; }
#header.bg-black .hd .hd-tit { color: #fff; }
#header.bg-black .btn-txt { position: absolute; right: 0; z-index: 9; line-height: 45px; padding: 0 20px; box-sizing: border-box; font-size: 13px; font-weight: 600; color: #fff; }

/*메뉴*/
.gnb { position: fixed; z-index: 1000; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; overflow: scroll;}
.gnb .inner { padding: 15px; box-sizing: border-box; }
.gnb .btn-close { position: absolute; top: 15px; right: 15px; width: 16px; height: 16px; cursor: pointer; }

.gnb .link-grade { margin-bottom: 45px; }
.gnb .link-grade a { display: inline-block; background: #939598; padding: 3px 8px; border-radius: 10px; box-sizing: border-box; font-size: 10px; font-weight: 400; color: #fff; }
.gnb .link-grade img { width: 21px; height: 21px; border-radius: 50%; margin-left: 5px; }

.gnb .user-info { position: relative; margin-bottom: 35px; }
.gnb .user-info:after { content: ''; display: block; clear: both; }
.gnb .user-info .profile { float: left; position: relative; width: 65px; height: 65px; margin-right: 15px; }
.gnb .user-info .profile .pic-profile { width: 65px; height: 65px; border-radius: 50%; }
.gnb .user-info .profile a img { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.gnb .user-info .contents { float: left; }
.gnb .user-info .contents .name { display: block; font-size: 20px; font-weight: 700; color: #000; }
.gnb .user-info .contents .name img { width: 16px; margin-left: 10px; vertical-align: 1px; }
.gnb .user-info .contents .nick { display: block; font-size: 12px; font-weight: 400; color: #333; }
.gnb .user-info .contents .campus { display: block; font-size: 11px; font-weight: 400; color: #999; }

.gnb .list-push { position: absolute; top: 0; right: 0; }
.gnb .list-push li { float: left; margin-right: 10px; text-align: center; }
.gnb .list-push li:last-child { margin-right: 0; }
.gnb .list-push li a { display: block; }
.gnb .list-push li img { display: block; width: 37px; height: 37px; border-radius: 50%; margin-bottom: 5px; }
.gnb .list-push li span { display: block; font-size: 9px; font-weight: 700; color: #000; }

.gnb .search-area { width: 100%; height: 33px; background: #eee; border-radius: 15px; }
.gnb .search-area .bar-search { display: block; float: left; width: 85%; height: 33px; background: transparent; padding: 0 15px; border: 0; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #000; }
.gnb .search-area .btn-search { display: block; float: left; width: 15%; height: 33px; background: url('../img/btn_search2.png') center center no-repeat transparent; background-size: 19px; border: 0; box-sizing: border-box; }

.gnb .list-menu { margin-bottom: 40px; }
.gnb .list-menu:after { content: ''; display: block; clear: both; }
.gnb .list-menu li { float: left; width: 50%; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; }
.gnb .list-menu li:nth-child(n+1):nth-child(-n+2) { border-top: 1px solid #dbdbdb; box-sizing: border-box; }
.gnb .list-menu li:nth-child(odd) { clear: both; border-right: 1px solid #dbdbdb; }
.gnb .list-menu li a { display: block; padding: 10px 0 10px 20px; box-sizing: border-box; }
.gnb .list-menu li img { width: 22px; height: 22px; margin-right: 10px; vertical-align: -4px; }
.gnb .list-menu li span { font-size: 20px; font-weight: 400; color: #000; }

.gnb .btn-logout { display: block; width: 100%; height: 33px; line-height: 33px; text-align: center; border: 1px solid #dbdbdb; box-sizing: border-box; margin-bottom: 15px; font-size: 15px; font-weight: 400; color: #000; }
.gnb .line { content: ''; display: block; clear: both; width: 100%; height: 1px; background: #000; border: 0; margin-bottom: 20px; }

.gnb .best-area .tit-best { margin-bottom: 5px; font-size: 15px; font-weight: 600; color: #000; }
.gnb .best-area .btn-more { float: right; font-size: 10px; font-weight: 500; color: #333; }
.gnb .best-area .btn-more img { width: 11px; margin-left: 4px; vertical-align: 0; }
.gnb .best-area .pic-best img { width: 100%;  }
.gnb .best-area .tag { display: block; margin: 8px 0; font-size: 12px; font-weight: 600; color: #000; }

.gnb-bg { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: none; }

/*검색창*/
.snb { position: fixed; z-index: 1000; top: 0; right: -100%; width: 76%; height: 100%; background: #fff; display: none; }
.snb .inner { padding: 15px 20px; box-sizing: border-box; }
.snb .btn-close img { width: 9px; }

.snb .search-area { width: 100%; height: 33px; background: #eee; border-radius: 15px; margin: 40px 0 20px; }
.snb .search-area .bar-search { display: block; float: left; width: 80%; height: 33px; background: transparent; padding: 0 15px; border: 0; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #000; }
.snb .search-area .btn-search { display: block; float: left; width: 20%; height: 33px; background: url('../img/btn_search2.png') center center no-repeat transparent; background-size: 19px; border: 0; box-sizing: border-box; }

.snb .list-latest { margin-bottom: 130px; }
.snb .list-latest:after { content: ''; display: block; clear: both; }
.snb .list-latest li { position: relative; padding: 6px 0; border-bottom: 1px solid #dfdfdf; box-sizing: border-box; }
.snb .list-latest li a { font-size: 13px; font-weight: 400; color: #000; }
.snb .list-latest li .btn-delete img { position: absolute; top: 12px; right: 0; width: 8px; }

.snb .line { content: ''; display: block; clear: both; width: 100%; height: 1px; background: #dbdbdb; border: 0; margin-bottom: 15px; }

.snb .list-best:after { content: ''; display: block; clear: both; }
.snb .list-best li { display: inline-block; float: left; background: #fff; padding: 5px 8px; border: 1px solid #2e5bcc; border-radius: 15px; box-sizing: border-box; margin-right: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #2e5bcc; }
.snb .list-best li:first-child { background: #2e5bcc; border: 1px solid transparent; color: #fff; }
.snb .list-best a { display: block; font-size: 13px; font-weight: 500; color: #2e5bcc; }

.snb-bg { position: fixed; z-index: 999; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: none; }


/*공통*/
.wrap { padding: 45px 0; box-sizing: border-box; }

/*기본 버튼*/
.btns-basic:after { content: ''; display: block; clear: both; }
.btns-basic .btn:after { content: ''; display: block; clear: both; }
.btns-basic .btn { display: block; float: left; width: 48.5%; height: 35px; line-height: 35px; text-align: center; background: #000; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; margin-right: 3%; font-size: 15px; font-weight: 400; color: #fff; }
.btns-basic .btn.inactive { background: #fff; border: 1px solid #000; color: #000; }
.btns-basic .btn:last-child { margin-right: 0; }

/*관리자 버튼*/
.btns-master { margin: 15px 0; }
.btns-master:after { content: ''; display: block; clear: both; }
.btns-master a { display: block; float: left; width: 48.5%; height: 35px; line-height: 35px; text-align: center; background: #000; border-radius: 3px; margin-right: 3%; font-size: 15px; font-weight: 400; color: #fff; }
.btns-master a:last-child { margin-right: 0; }

/*페이지 이동*/
.paging { margin-bottom: 10px; text-align: center; }
.paging a, .paging strong { display: inline-block; position: relative; min-width: 34px; height: 36px; line-height: 36px; padding: 0 4px; border-right: 0; box-sizing: border-box; margin: 0 2px; font-size: 12px; font-weight: 400; color: #a7a9ac; }
.paging strong { font-weight: 800; color: #000; }
.paging a.prev img, .paging a.next img { width: 7px; }


/*인트로*/
#intro { position: relative; width: 100%; height: 100%; background: url('../img/bg_intro1.png') center top no-repeat; background-size: cover; }


/*메인*/
.box-main { margin-bottom: 20px; }

.top-main { position: relative; padding: 8px 10px; box-sizing: border-box; }
.top-main .pic-profile { width: 25px; height: 25px; border-radius: 50%; margin-right: 5px; }
.top-main .writer { font-size: 13px; font-weight: 500; color: #000; }
.top-main .ico-grade { width: 13px; height: 13px; border-radius: 50%; vertical-align: -1px; }
.top-main .btn-menu { position: absolute; top: 0; right: 0; width: 41px; height: 41px; line-height: 41px; text-align: center; }
.top-main .btn-menu img { width: 14px; }

.box-main .pic-main { width: 100%; }
.box-main .inner { padding: 10px; box-sizing: border-box; }

#main .util-area { position: relative; margin-bottom: 10px; }
#main .util-area .list-util:after { content: ''; display: block; clear: both; }
#main .util-area .list-util li { float: left; height: 19px; }

.list-util .btn-like input[type="checkbox"] { display: none; }
.list-util .btn-like input[type="checkbox"] + label { display: inline-block; margin-right: 12px; cursor: pointer; }
.list-util .btn-like input[type="checkbox"] + label span { display: inline-block; width: 20px; height: 19px; background: url('../img/btn_like1_off.png') center center no-repeat; background-size: 100%; cursor: pointer; }
.list-util .btn-like input[type="checkbox"]:checked + label span { background-image: url('../img/btn_like1_on.png'); }

.list-util .btn-scrap input[type="checkbox"] { display: none; }
.list-util .btn-scrap input[type="checkbox"] + label { display: inline-block; margin-right: 12px; cursor: pointer; }
.list-util .btn-scrap input[type="checkbox"] + label span { display: inline-block; width: 15px; height: 19px; background: url('../img/btn_scrap1_off.png') center center no-repeat; background-size: 100%; cursor: pointer; }
.list-util .btn-scrap input[type="checkbox"]:checked + label span { background-image: url('../img/btn_scrap1_on.png'); }

.list-util .best img { width: 19px; }

#main .util-area .btn-review { position: absolute; top: 0; right: 0; font-size: 11px; font-weight: 400; color: #000; }
#main .util-area .btn-review img { width: 14px; margin-left: 3px; vertical-align: -3px; }

.num-like { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 500; color: #000; }
/*.txt-main { display: block; height: 36px; overflow: hidden; }
.txt-main.active { height: auto; margin-bottom: 10px; }*/
.txt-main { width: 95%; margin: 0 auto; }
.txt-main .writer { display: inline-block; font-size: 11px; font-weight: 900; color: #000; }
.txt-main .contents { font-size: 11px; font-weight: 400; color: #000; cursor: pointer; }
.txt-main .hashtag {  color: #2e5bcc; }
.box-main .btn-more { display: inline-block; margin-bottom: 10px; font-size: 10px; font-weight: 400; color: #999; }
.box-main .btn-more.active { display: none; }

.box-main .btn-cmt-list { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 300; color: #999; }
.box-main .btn-cmt-write { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 400; color: #999; }
.box-main .btn-cmt-write .pic-profile { width: 18px; height: 18px; border-radius: 50%; margin-right: 5px; }
.box-main .date { display: block; font-size: 8px; font-weight: 400; color: #999; }

#main .reply-area { display: none; }
.reply-area { position: fixed; bottom: 0; z-index: 9999; width: 100%; background: #fff; padding: 15px; border-top: 1px solid #ccc; box-sizing: border-box; }
.reply-area:after { content: ''; display: block; clear: both; }
.reply-area .pic-profile { float: left; width: 15%; margin-right: 2%; }
.reply-area .pic-profile img { width: 42px; height: 42px; border-radius: 50%; }
.reply-area .bar-reply { float: left; position: relative; width: 83%; height: 42px; padding: 10px; border: 1px solid #e4e4e4; border-radius: 20px; box-sizing: border-box; }
.reply-area .bar-reply .inp-reply { display: block; float: left; width: 88%; height: 42px; background: none; border: none; box-sizing: border-box; resize: none; }
.reply-area .bar-reply .btn-reply { display: block; position: absolute; top: 10px; right: 15px; background: none; border: none; box-sizing: border-box; font-size: 12px; font-weight: 500; color: #3963cf; }
.bg-reply { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: none; }

#main .btn-write { position: fixed; right: 15px; bottom: 60px; z-index: 9; }


/*댓글*/
#reply .top-area { padding: 10px; border-bottom: 1px solid #ccc; box-sizing: border-box; }
#reply .top-area:after { content: ''; display: block; clear: both; }
#reply .top-area .pic-profile { float: left; width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; }
#reply .top-area .box { padding-left: 40px; box-sizing: border-box; }

.list-reply { padding: 10px; box-sizing: border-box; }
.list-reply:after { content: ''; display: block; clear: both; }
.list-reply li { margin-bottom: 20px; }
.list-reply li:last-child { margin-bottom: 0; }
.list-reply .pic-profile { float: left; width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; }
.list-reply .box { padding-left: 40px; box-sizing: border-box; }
.list-reply .box .reply2 { display: block; font-size: 11px; font-weight: 400; color: #b1b1b1; cursor: pointer; }
.list-reply .box .reply2 .date { margin-right: 5px; }
.list-reply .box .btn-replyview { margin: 8px 0 0; }
.list-reply .list-reply { display: none; }
.list-reply .list-reply.active { display: block; }


/*회원가입*/
#sign .inner { padding: 0 15px; box-sizing: border-box; }
#sign .point { display: inline-block; width: 6px; height: 6px; background: #2e5bcc; border-radius: 50%; margin-left: 4px; vertical-align: 6px; }

.sign-info { display: block; background: #e6e7e8; padding: 10px 0; box-sizing: border-box; font-size: 11px; font-weight: 400; color: #2e5bcc; text-align: center; }
.sign-info .point { margin-right: 4px; vertical-align: middle; }

#sign .profile { position: relative; width: 97px; height: 97px; margin: 30px auto; }
#sign .profile .pic-profile { width: 97px; height: 97px; border-radius: 50%; }
#sign .profile a img { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
#sign .profile input { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; opacity: 0;}
.box-form { margin-bottom: 25px; }
.box-form:after { content: ''; display: block; clear: both; }
.box-form .tit-form { margin-bottom: 8px; font-size: 15px; font-weight: 500; color: #000; }
.box-form .tit-form .point { display: inline-block; width: 6px; height: 6px; background: #2e5bcc; border-radius: 50%; margin-left: 4px; vertical-align: 6px; }
.box-form .inp-basic { display: block; float: left; width: 100%; height: 35px; line-height: 35px; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; }
.box-form .inp-btn { height: 35px; line-height: 35px; background: #000; padding: 0 8px; border: 1px solid transparent; box-sizing: border-box; font-size: 12px; font-weight: 400; color: #fff; }
.box-form .inp-textarea { display: block; width: 100%; height: 240px; padding: 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; resize: none; }
/*변경 불가 표시*/
.box-form .no-edit { background: linear-gradient(45deg, #eaeaeb 25%, #fff 0, #fff 50%, #eaeaeb 0, #eaeaeb 75%, #fff 0); -webkit-background-size: 5px 5px; background-size: 5px 5px; border: 1px solid #eaeaeb; color: #d1d3d4; }

.list-gender li { float: left; width: 48.5%; margin-right: 3%; }
.list-gender li:last-child { margin-right: 0; }
.list-gender input[type="radio"] { display: none; }
.list-gender input[type="radio"] + label { display: inline-block; width: 100%; cursor: pointer; }
.list-gender input[type="radio"] + label span { display: inline-block; width: 100%; height: 35px; line-height: 35px; text-align: center; background: #fff; border: 1px solid #000; border-radius: 3px; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; }
.list-gender input[type="radio"]:checked + label span { background: #000; border: 1px solid transparent; color: #fff; }

.list-agree { margin-bottom: 20px; }
.list-agree li { margin-bottom: 5px; }
.list-agree li:last-child { margin-bottom: 0; }
.list-agree li:after { content: ''; display: block; clear: both; }
.list-agree input[type="checkbox"] { display: none; }
.list-agree input[type="checkbox"] + label { display: inline-block; font-size: 11px; font-weight: 500; color: #312e30; }
.list-agree input[type="checkbox"] + label span { display: inline-block; width: 16px; height: 16px; background: url('../img/btn_check1_off.png') right center no-repeat; background-size: 100%; margin-right: 8px; vertical-align: middle; cursor: pointer; }
.list-agree input[type="checkbox"]:checked + label span { background-image: url('../img/btn_check1_on.png'); }
.list-agree li .link-agree { float: right; font-size: 10px; font-weight: 400; color: #999; text-decoration: underline; }

#sign .inp-sign { width: 100%; height: 40px; line-height: 40px; background: #000; padding: 0 8px; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #fff; }
#sign .inp-btn { height: 35px; line-height: 35px; background: #000; padding: 0 8px; border: 1px solid transparent; box-sizing: border-box; font-size: 12px; font-weight: 400; color: #fff; }


/*갤러리 어플 업로드*/
#upload { height: 100%; background: #000; }
#upload .pic-upload { position: fixed; width: 100%; height: 54%; text-align: center; overflow-y: scroll; }
#upload .pic-upload img { max-width: 100%; min-height: 100%; }

.list-upload { position: fixed; bottom: 0; height: 40%; overflow-y: scroll; }
.list-upload li { float: left; width: 25%; height: 35%; border: 0.5px solid #fff; box-sizing: border-box; }
.list-upload li img { width: 100%; height: 100%; }


/*로그인 및 아이디 비번 찾기*/
#login .inner { padding: 0 40px; box-sizing: border-box; }
#login .logo { width: 110px; margin: 60px auto; }
#login .logo img { width: 100%; }

.list-login li { margin-bottom: 5px; }
.list-login li:last-child { margin-bottom: 0; }
.inp-login { display: block; width: 100%; height: 35px; line-height: 35px; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 11px; font-weight: 400; color: #000; }

.auto-login { margin-top: 8px; }
.auto-login input[type="checkbox"] { display: none; }
.auto-login input[type="checkbox"] + label { display: inline-block; font-size: 11px; font-weight: 500; color: #312e30; }
.auto-login input[type="checkbox"] + label span { display: inline-block; width: 16px; height: 16px; background: url('../img/btn_check1_off.png') right center no-repeat; background-size: 100%; margin-right: 8px; vertical-align: middle; cursor: pointer; }
.auto-login input[type="checkbox"]:checked + label span { background-image: url('../img/btn_check1_on.png'); }

.btn-login { width: 100%; height: 35px; line-height: 35px; background: #000; padding: 0 8px; border: 1px solid transparent; box-sizing: border-box; margin-top: 20px; font-size: 13px; font-weight: 400; color: #fff; }

.link-login { margin-top: 15px; text-align: center; }
.link-login:after { content: ''; display: block; clear: both; }
.link-login li { display: inline-block; }
.link-login li a { font-size: 12px; font-weight: 500; color: #4d4d4f; }
.link-login li span { margin: 0 5px; color: #cfcfcf; }

.box-term { position: fixed; left: 0; bottom: 25px; width: 100%; text-align: center; }
.link-term { margin-bottom: 5px; text-align: center; }
.link-term:after { content: ''; display: block; clear: both; }
.link-term li { display: inline-block; }
.link-term li a { font-size: 9px; font-weight: 500; color: #4d4d4f; }
.link-term li span { margin: 0 5px; color: #cfcfcf; }
.box-term .copyright { font-size: 9px; font-weight: 500; color: #4d4d4f; }


/*아이디 비번 찾기*/
#find .inner { padding: 0 40px; box-sizing: border-box; }
.find-info { display: block; margin: 50px 0 15px; font-size: 12px; font-weight: 500; color: #4d4d4f; text-align: center; }
.list-find li { margin-bottom: 5px; }
.list-find li:last-child { margin-bottom: 0; }
.inp-find { display: block; width: 100%; height: 35px; line-height: 35px; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 11px; font-weight: 400; color: #000; }
.btn-find { width: 100%; height: 35px; line-height: 35px; background: #000; padding: 0 8px; border: 1px solid transparent; box-sizing: border-box; margin-top: 20px; font-size: 13px; font-weight: 400; color: #fff; }


/*평가보기*/
#review .pic-review { width: 100%; }
#review .inner { padding: 10px; box-sizing: border-box; }

.review-area { border: 1px solid #aeaeae; box-sizing: border-box; }
.review-area .tit-review { height: 40px; line-height: 40px; background: #ebebeb; padding-right: 10px; border-bottom: 1px solid #dadada; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; font-size: 14px; font-weight: 600; color: #000; }
.review-area .tit-review img { width: 40px; height: 40px; margin-right: 10px; vertical-align: top; }
.review-area .contents { padding: 50px 15px 15px; box-sizing: border-box; }
.review-area .contents .txt-review { font-size: 11px; font-weight: 400; color: #777; }

.box-progress { display: block; margin-bottom: 50px; text-align: center; }
.list-progress { display: inline-block; }
.list-progress li { float: left; position: relative; margin-right: 12px; font-weight: 800; }
.list-progress li:last-child { margin-right: 0; }
.list-progress li .tit-progress { display: block; position: absolute; left: 0; right: 0; bottom: -20px; font-size: 10px; font-weight: 500; color: #000; text-align: center; }

.tit-review2 { display: block; margin: 30px 0 8px; font-size: 13px; font-weight: 500; color: #000; }
.tit-review2 img { width: 25px; height: 25px; border-radius: 50%; margin-left: 4px; vertical-align: -6px; }

.box-picture { width: 100%; }
.list-picture { white-space: nowrap; overflow-x: scroll; }
.list-picture li { display: inline-block; width: 100px; height: 100px; border: 1px solid #dadada; box-sizing: border-box; margin-right: 2px; }
.list-picture li:last-child { margin-right: 0; }
.list-picture li img { width: 100%; height: 100%; }


/*평가작성*/
#reviewwrite .inner { padding: 30px 15px 15px; box-sizing: border-box; }

.review-info { display: block; background: #e6e7e8; padding: 10px 0; box-sizing: border-box; font-size: 11px; font-weight: 400; color: #2e5bcc; text-align: center; }
.review-info .point { margin-right: 4px; vertical-align: middle; }

#reviewwrite .btn-add { display: inline-block; width: 100%; height: 40px; line-height: 40px; text-align: center; background: #000; border-radius: 3px; margin-bottom: 25px; font-size: 12px; font-weight: 500; color: #fff; }
#reviewwrite .btn-add img { width: 17px; margin-right: 3px; vertical-align: -4px; }


/*그림등록*/
.pic-editor { position: relative; }
.pic-editor img { width: 100%; }
.pic-editor input[type="file"] { position: absolute; top: 0; left: 0; opacity: 0; }

#editor .inner { padding: 0 15px; box-sizing: border-box; }

.range-area { margin: 25px 0; text-align: center; }
.range-area:after { content: ''; display: block; clear: both; }
.range-area img { display: block; float: left; width: 6%; margin-right: 1%; }
.range-area div { display: block; float: left; width: 93%; }

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid #fff;
    
    /*required for proper track sizing in FF*/
    width: 100%;
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 1px; background: #000; border: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 15px; width: 15px; border-radius: 50%; background: #fff; border: 1px solid #000; margin-top: -7px; }
input[type=range]:focus { outline: none; }
input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; }

input[type=range]::-moz-range-track { width: 100%; height: 1px; background: #000; border: none; }
input[type=range]::-moz-range-thumb { border: none; height: 15px; width: 15px; border-radius: 50%; background: #fff; border: 1px solid #000; }

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{ outline: 1px solid white; outline-offset: -1px; }

input[type=range]::-ms-track { width: 100%; height: 1px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 8px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower { background: #777; border-radius: 10px; }
input[type=range]::-ms-fill-upper { background: #ddd; border-radius: 10px; }
input[type=range]::-ms-thumb { border: none; height: 15px; width: 15px; border-radius: 50%; background: #fff; border: 1px solid #000; }
input[type=range]:focus::-ms-fill-lower { background: #888; }
input[type=range]:focus::-ms-fill-upper { background: #ccc; }

#editor textarea { width: 100%; height: 280px; padding: 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; resize: none; }


/*회원등급*/
#grade .inner { padding: 30px 15px 0; box-sizing: border-box; }

.user-grade { margin-bottom: 30px; text-align: center; }
.user-grade .ico-grade { display: block; width: 53px; height: 53px; border-radius: 50%; margin: 0 auto 10px; }
.grade-info { font-size: 12px; font-weight: 400; color: #000; line-height: 24px; }
.grade-info strong { font-weight: 700; }

.box-grade { background: #f5f5f5; padding: 25px 20px; box-sizing: border-box; margin-bottom: 30px; }
.list-grade li { margin-bottom: 15px; }
.list-grade li:last-child { margin-bottom: 0; }
.list-grade li:after { content: ''; display: block; clear: both; }
.list-grade strong { display: block; float: left; width: 40%; font-size: 12px; font-weight: 700; color: #000; }
.list-grade span { display: block; float: left; width: 60%; font-size: 12px; font-weight: 400; color: #000; }
.list-grade img { width: 19px; height: 19px; border-radius: 50%; vertical-align: -5px; }

#grade p { font-size: 12px; font-weight: 400; color: #000; text-align: center; }

/*NEW*/
#new .wrap { padding-bottom: 0; }
#new .date { padding: 10px 15px 0; box-sizing: border-box; font-size: 18px; font-weight: 500; color: #000; }
.list-new { padding: 15px; border-bottom: 1px solid #dfdfdf; box-sizing: border-box; }
.list-new:last-child { border-bottom: 0; }
.list-new li { position: relative; background: #fff; margin-bottom: 14px; }
.list-new li:last-child { margin-bottom: 0; }
.list-new li:after { content: ''; display: block; clear: both; }
.list-new .pic-profile { float: left; display: block; width: 44px; height: 44px; border-radius: 50%; margin-right: 10px; }
.list-new .tit-new { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 18px; max-width: 65%; max-height: 36px; font-size: 14px; font-weight: 500; color: #000; }
.list-new .thumb-new { position: absolute; top: 0; right: 0; width: 44px; height: 44px; }


/*BEST*/
.date-tool { padding: 20px 0; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; text-align: center; }
.date-tool .btn-date { font-size: 10px; font-weight: 400; color: #000; vertical-align: 1px; }
.date-tool .txt-date { margin: 0 15px; font-size: 13px; font-weight: 700; color: #000; }

#best .inner { padding: 8px; box-sizing: border-box; }
.gallery-area { position: relative; margin-bottom: 5px; height: 115px overflow: hidden;}
.gallery-area .bg-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); }
.gallery-area .pic-gallery { width: 100%; }
.list-gallery .gallery-area .pic-gallery { width: 100%;  }

.gallery-area .btn-like { position: absolute; top: 2px; left: 8px; z-index: 100;}
.gallery-area .btn-like input[type="checkbox"] { display: none; }
.gallery-area .btn-like input[type="checkbox"] + label { display: inline-block; cursor: pointer; font-size: 11px; font-weight: 500; color: #fff; }
.gallery-area .btn-like input[type="checkbox"] + label span { display: inline-block; width: 11px; height: 8px; background: url('../img/btn_like2_off.png') center center no-repeat; background-size: 100%; margin-right: 4px; cursor: pointer; }
.gallery-area .btn-like input[type="checkbox"]:checked + label span { background-image: url('../img/btn_like2_on.png'); }
.gallery-area .btn-menu { position: absolute; top: 2px; right: 10px; }
.gallery-area .btn-menu img { width: 11px; }

.list-gallery { margin-top: 15px; }
.list-gallery:after { content: ''; display: block; clear: both; }
.list-gallery li { float: left; width: 48.5%; margin-right: 3%; margin-bottom: 15px; }
.list-gallery li:nth-child(2n) { margin-right: 0; }


/*내그림*/
#mypic .inner { padding: 8px; box-sizing: border-box; }


/*검색*/
#search .inner { padding: 8px; box-sizing: border-box; }

#search .box-search { padding: 20px 15px; box-sizing: border-box; }
#search .search-area { width: 100%; height: 33px; background: #eee; border-radius: 15px; }
#search .search-area .bar-search { display: block; float: left; width: 85%; height: 33px; background: transparent; padding: 0 15px; border: 0; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #000; }
#search .search-area .btn-search { display: block; float: left; width: 15%; height: 33px; background: url('../img/btn_search2.png') center center no-repeat transparent; background-size: 19px; border: 0; box-sizing: border-box; }

.tab-board { width: 100%; margin-bottom: 15px; }
.tab-board:after { content: ''; display: block; clear: both; }
.tab-board li { float: left; width: 33.33%; height: 45px; text-align: center; background: #f1f2f2; border: 1px solid #d2d4d5; border-right: 0; border-bottom: 1px solid #000; box-sizing: border-box; }
.tab-board li a { display: block; width: 100%; height: 100%; padding: 5px 0; box-sizing: border-box; font-size: 13px; font-weight: 400; color: #6d6e71; line-height: 16px; }
.tab-board li a .num { display: block; font-size: 12px; }
.tab-board li:last-child { border-right: 1px solid #d2d4d5; box-sizing: border-box; }
.tab-board li.active { background: #fff; border: 1px solid #000; border-bottom: 0; }
.tab-board li.active a { color: #000; }

.sort-tool:after { content: ''; display: block; clear: both; }
.sort-tool select { float: left; height: 32px; background-position: 90%; padding: 0 8px; border: 1px solid #bbb; border-right: 0; box-sizing: border-box; font-size: 13px; font-weight: 500; color: #000; }
.sort-tool select:last-of-type { border-right: 1px solid #bbb; box-sizing: border-box; }
.sort-tool a { display: block; float: right; width: 126px; height: 32px; background: url('../img/btn_plus4.png') right center no-repeat; background-size: 11px; padding-top: 5px; border-bottom: 2px solid #000; box-sizing: border-box; font-size: 13px; font-weight: 700; color: #000; }


/*스크랩*/
#scrap .inner { padding: 8px; box-sizing: border-box; }


/*필터*/
.like-range { padding: 20px 15px; border-bottom: 1px solid #dfdfdf; box-sizing: border-box; }
.like-range:after { content: ''; display: block; clear: both; }
.like-range .tit-filter { display: block; float: left; width: 80px; font-size: 14px; font-weight: 700; color: #000; }
.like-range .tit-filter img { width: 14px; margin-left: 5px; vertical-align: 0; }
.like-range .like-filter { float: left; width: 190px; height: 35px; border: 1px solid #bbb; box-sizing: border-box; }
.like-range .like-filter .inp-like { display: block; float: left; width: 65%; height: 100%; padding: 0 10px; border: 0; box-sizing: border-box; }
.like-range .like-filter .txt-like { display: block; float: left; width: 35%; height: 100%; line-height: 35px; padding-right: 10px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #a7a9ac; text-align: right; }

.color-range { padding: 20px 15px; border-bottom: 1px solid #dfdfdf; box-sizing: border-box; }
.color-range:after { content: ''; display: block; clear: both; }
.color-range .tit-filter { display: block; float: left; width: 80px; font-size: 14px; font-weight: 700; color: #000; }
.color-range .list-color { float: left; width: 190px; }

.list-color li { float: left; margin-right: 7.5px; margin-bottom: 7.5px; }
.list-color li:last-child { margin-right: 0; }
.list-color li input[type="radio"] { display: none; }
.list-color li input[type="radio"] + label { display: inline-block; height: 40px; cursor: pointer; }
.list-color li input[type="radio"] + label span { display: inline-block; width: 40px; height: 40px; background: #ed2a2a; border-radius: 50%; cursor: pointer; }

.list-color li.color2 input[type="radio"] + label span { background: #f4aa24; }
.list-color li.color3 input[type="radio"] + label span { background: #f1f223; }
.list-color li.color4 input[type="radio"] + label span { background: #a5dd0c; }
.list-color li.color5 input[type="radio"] + label span { background: #37b400; }
.list-color li.color6 input[type="radio"] + label span { background: #99d1ea; }
.list-color li.color7 input[type="radio"] + label span { background: #3131fd; }
.list-color li.color8 input[type="radio"] + label span { background: #1c2c85; }
.list-color li.color9 input[type="radio"] + label span { background: #8a0094; }
.list-color li.color10 input[type="radio"] + label span { background: #fff; border: 1px solid #c6c6c6; box-sizing: border-box; }
.list-color li.color11 input[type="radio"] + label span { background: #c6c6c6; }
.list-color li.color12 input[type="radio"] + label span { background: #000; }

.list-color li input[type="radio"]:checked + label span { border: 2px solid #000; box-sizing: border-box; }

.btns-filter { position: fixed; bottom: 0; width: 100%; padding: 10px; border-top: 1px solid #000; box-sizing: border-box; }
.btns-filter .btn { display: block; float: left; width: 35%; height: 38px; line-height: 38px; text-align: center; background: #fff; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; margin-right: 3%; font-size: 15px; font-weight: 500; }
.btns-filter .btn.active { width: 62%; background: url('../img/btn_filter1.png') 32% center no-repeat #000; background-size: 14px; padding-left: 20px; margin-right: 0; color: #fff; }


/*출석부 반 리스트*/
.list-class li { background: url('../img/btn_arrow_right2.png') 95% center no-repeat; background-size: 8px; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; }
.list-class li a { display: block; padding: 20px; box-sizing: border-box; font-size: 17px; font-weight: 500; color: #000; }


/*출석부*/
#attend .util-area { position: relative; padding: 10px; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; }

.btns-attend:after { content: ''; display: block; clear: both; }
.btns-attend .btn:after { content: ''; display: block; clear: both; }
.btns-attend .btn { display: block; float: left; width: 26%; height: 35px; line-height: 35px; text-align: center; border: 1px solid #000; border-radius: 3px; box-sizing: border-box; margin-right: 2%; font-size: 12px; font-weight: 400; color: #000; }
.btns-attend .btn.inactive { background: #fff; border: 1px solid #000; color: #000; }
.btns-attend .btn:last-child { margin-right: 0; }

#attend .search-area { position: absolute; top: 10px; right: 10px; width: 36%; height: 35px; background: #eee; border-radius: 15px; }
#attend .search-area .btn-search { display: block; float: left; width: 30%; height: 33px; background: url('../img/btn_search2.png') center center no-repeat transparent; background-size: 19px; border: 0; box-sizing: border-box; }
#attend .search-area .bar-search { display: block; float: left; width: 70%; height: 35px; background: transparent; padding-right: 10px; border: 0; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #000; }

.list-attend:after { content: ''; display: block; clear: both; }
.list-attend > li { float: left; width: 50%; padding: 15px; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; }
.list-attend .profile { float: left; width: 35%; padding-top: 10px; box-sizing: border-box; margin-right: 5%; text-align: center; }
.list-attend .pic-profile { display: inline-block; width: 42px; height: 42px; border-radius: 50%; margin-bottom: 5px; }
.list-attend .name { display: inline-block; font-size: 13px; font-weight: 700; color: #000; }

.attend-info { float: left; width: 60%; }
.attend-info li { position: relative; width: 100%; height: 26px; line-height: 21px; padding: 2px; border-radius: 15px; box-sizing: border-box; margin-bottom: 5px; text-align: center; cursor: pointer; }
.attend-info li:last-child { margin-bottom: 0; }
.attend-info li span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; color: #000; }
.attend-info li strong { padding-left: 10px; box-sizing: border-box; font-size: 12px; font-weight: 500; }

/*수업없음*/
.attend-info li.sort0 { background: #d1d3d4; }
.attend-info li.sort0 strong { color: #999; }


/*출석*/
.attend-info li.sort1 { background: #2e5bcc; }
.attend-info li.sort1 strong { color: #fff; }

/*지각*/
.attend-info li.sort2 { background: #ff4c20; }
.attend-info li.sort2 strong { color: #fff; }

/*결석*/
.attend-info li.sort3 { background: #000; }
.attend-info li.sort3 strong { color: #fff; }

/*보강*/
.attend-info li.sort4 { background: #00d26d; }
.attend-info li.sort4 strong { color: #fff; }

/*휴원*/
.attend-info li.sort5 { background: #d1d3d4; }
.attend-info li.sort5 strong { color: #b2b3b4; }

/*  출결상태 */
.attend-info li.sort6 { background: #fff; border: 1px solid #ccc; }
.attend-info li.sort6 strong { color: #333;}
/*출석부 보기*/
#datepicker { width: 100%; margin: 0 auto; }
#datepicker .ui-widget.ui-widget-content { width: 100%; border: 0; border-radius: 0; box-sizing: border-box; }
#datepicker .ui-widget-header { width: 130px; background: #fff; padding: 18px; border: 0; margin: auto; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 700; color: #000; }
#datepicker .ui-datepicker tr { border-bottom: 1px solid #dbdbdb; box-sizing: border-box; }
#datepicker .ui-datepicker th { font-size: 10px; font-weight: 700; }
#datepicker .ui-datepicker td { height: 50px; padding-top: 10px; box-sizing: border-box; vertical-align: top; }
#datepicker .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { width: 30px; background: #fff; padding: 0; border: 0; box-sizing: border-box; margin: auto; font-size: 13px; font-weight: 700; color: #000; text-align: center; }
#datepicker .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { display: block; width: 80%; height: 47px; background: #eee; padding-top: 9px; box-sizing: border-box; margin-top: -9px; }
/*#datepicker tr th:first-child { color: red; }
#datepicker tr td:first-child a { color: red; }*/
#datepicker .ui-widget-header .ui-icon { width: 7px; height: 11px; background: url('../img/btn_arrow_left3.png') center center no-repeat; background-size: 100%; margin-top: 10px; }
#datepicker .ui-datepicker .ui-datepicker-next span { transform: rotate(180deg); }

/*달력 수정*/
.calendar-area { width: 100%; padding: 20px 0 0; box-sizing: border-box; }
.calendar-control { position: relative; text-align: center; margin-bottom: 20px; }
.calendar-control .btn-prev { display: inline-block; width: 7px; height: 11px; background: url('../img/btn_arrow_left3.png') center center no-repeat; background-size: 100%; }
.calendar-control .btn-next { display: inline-block; width: 7px; height: 11px; background: url('../img/btn_arrow_left3.png') center center no-repeat; background-size: 100%; transform: rotate(180deg); }
.calendar-control .tit { margin: 0 30px; font-size: 13px; font-weight: 700; color: #000; text-align: center; }

.calendar-custom { width: 100%; border-collapse: collapse; }
.calendar-custom th { width: 14.28%; height: 20px; padding-bottom: 5px; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; font-size: 11px; font-weight: 500; text-align: center; vertical-align: bottom; }
.calendar-custom td { width: 14.28%; height: 50px; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; font-size: 12px; font-weight: 500; text-align: center; vertical-align: top; }
.calendar-custom th:first-child,
.calendar-custom td:first-child { color: red; }
.calendar-custom td > span { display: inline-block; width: 100%; height: 100%; padding-top: 5px; box-sizing: border-box; }
.calendar-custom td.active > span { display: inline-block; width: 100%; height: 100%; background: #eee; }

.calendar-custom td .point { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.calendar-custom td .sort1 .point { background: #3863ce; }
.calendar-custom td .sort2 .point { background: #ff4c20; }
.calendar-custom td .sort3 .point { background: #000; }
.calendar-custom td .sort4 .point { background: #00d26d; }
.calendar-custom td .sort5 .point { background: #b1b3b5; }

.sort-list { position: fixed; bottom: 173px; width: 100%; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
.sort-list:after { content: ''; display: block; clear: both; }
.sort-list li { float: left; width: 20%; padding: 10px; box-sizing: border-box; font-size: 11px; font-weight: 400; color: #333; text-align: center; }
.sort-list li .point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

.sort-list li.sort1 .point { background: #3863ce; }
.sort-list li.sort2 .point { background: #ff4c20; }
.sort-list li.sort3 .point { background: #000; }
.sort-list li.sort4 .point { background: #00d26d; }
.sort-list li.sort5 .point { background: #b1b3b5; }

.sort-detail { position: fixed; bottom: 45px; width: 100%; height: 128px; background: #eee; }
.sort-detail li { background: #eee; height: 32px; line-height: 32px; padding: 0 30px; border-bottom: 1px solid #ccc; box-sizing: border-box; }
.sort-detail li:after { content: ''; display: block; clear: both; }
.sort-detail li .tit-lecture { float: left; width: 70%; font-size: 12px; font-weight: 500; color: #000; }
.sort-detail li .tit-lecture .point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.sort-detail li .state { float: left; width: 30%; font-size: 11px; font-weight: 400; color: #000; }

.sort-detail li.sort1 .point { background: #3863ce; }
.sort-detail li.sort2 .point { background: #ff4c20; }
.sort-detail li.sort3 .point { background: #000; }
.sort-detail li.sort4 .point { background: #00d26d; }
.sort-detail li.sort5 .point { background: #b1b3b5; }


/*내 수강료*/
#tuition .inner { padding: 10px; box-sizing: border-box; }
.box-tuition { position: relative; border: 1px solid #e4e4e4; box-sizing: border-box; margin-bottom: 15px; }
.box-tuition:last-child { margin-bottom: 0; }
.tit-tuition { padding: 15px; box-sizing: border-box; }
.tit-tuition .name { margin-right: 10px; font-size: 12px; font-weight: 500; color: #000; }
.tit-tuition .academy { font-size: 12px; font-weight: 400; color: #757575; }
.tit-tuition strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; color: #3963cf; }

.box-tuition .btn-more { display: block; position: absolute; top: 15px; right: 15px; width: 62px; height: 20px; line-height: 18px; text-align: center; background: #fff; border: 1px solid #2e5bcc; border-radius: 10px; box-sizing: border-box; font-size: 10px; font-weight: 500; color: #2e5bcc; }
.box-tuition .contents { display: none; }
.box-tuition .contents.active { display: block; }

.list-tuition { width: 90%; margin: 0 auto; border-top: 1px solid #e4e4e4; box-sizing: border-box; }
.list-tuition li { position: relative; padding: 10px; box-sizing: border-box; }
.list-tuition li .month { font-size: 12px; font-weight: 500; color: #000; }
.list-tuition li strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; color: #000; }
.list-tuition li .btn-push { display: block; position: absolute; top: 15px; right: 0; width: 62px; height: 20px; line-height: 18px; text-align: center; background: #000; border-radius: 10px; font-size: 10px; font-weight: 500; color: #fff; }


/*동영상*/
#video .box-search { padding: 15px; box-sizing: border-box; }
#video .box-search:after { content: ''; display: block; clear: both; }
#video .box-search select { float: left; width: 30%; height: 32px; background-position: 90%; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; margin-right: 3%; font-size: 13px; font-weight: 500; color: #000; }
#video .search-area { float: left; width: 67%; height: 32px; border-bottom: 2px solid #000; box-sizing: border-box; }
#video .search-area .inp-search { display: block; float: left; width: 85%; height: 100%; border: 0; box-sizing: border-box; }
#video .search-area .btn-search { display: block; float: left; width: 15%; height: 100%; background: url('../img/btn_search1.png') right center no-repeat transparent; background-size: 19px; border: 0; }


#video .inner { padding: 10px; box-sizing: border-box;}

.box-video { margin-bottom: 30px; }
.video-area iframe { display: block; width: 100%; min-height: 200px; }
.txt-video { position: relative; display: block; }
.txt-video .contents { display: block; margin-bottom: 5px; width: 80%; font-size: 14px; font-weight: 500; color: #000; }
.txt-video .hashtag { margin: 0 2px; color: #2e5bcc; }

.txt-video .btn-scrap { position: absolute; top: 0; right: 0; }
.txt-video .btn-scrap input[type="checkbox"] { display: none; }
.txt-video .btn-scrap input[type="checkbox"] + label { display: inline-block; cursor: pointer; }
.txt-video .btn-scrap input[type="checkbox"] + label span { display: inline-block; width: 15px; height: 19px; background: url('../img/btn_scrap1_off.png') center center no-repeat; background-size: 100%; cursor: pointer; }
.txt-video .btn-scrap input[type="checkbox"]:checked + label span { background-image: url('../img/btn_scrap1_on.png'); }

.box-video .views-date { font-size: 10px; font-weight: 400; color: #808285; }


/*동영상 작성*/
#videowrite .inner { padding: 15px; box-sizing: border-box; }

#videowrite .box-video { margin-bottom: 25px; }
#videowrite .box-video:after { content: ''; display: block; clear: both; }
#videowrite .box-video .tit-form { margin-bottom: 8px; font-size: 15px; font-weight: 500; color: #000; }
#videowrite .box-video .inp-basic { display: block; float: left; width: 100%; height: 35px; line-height: 35px; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; }
#videowrite .box-video .inp-textarea { display: block; width: 100%; height: 240px; padding: 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; }


/*공지사항*/
#notice .box-search { padding: 15px; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
#notice .box-search:after { content: ''; display: block; clear: both; }
#notice .search-area { float: left; width: 64%; height: 32px; border-bottom: 2px solid #000; box-sizing: border-box; margin-right: 6%; }
#notice .search-area .inp-search { display: block; float: left; width: 85%; height: 100%; border: 0; box-sizing: border-box; }
#notice .search-area .btn-search { display: block; float: left; width: 15%; height: 100%; background: url('../img/btn_search1.png') right center no-repeat transparent; background-size: 19px; border: 0; }
#notice .box-search select { float: left; width: 30%; height: 32px; background-position: 90%; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; font-size: 13px; font-weight: 500; color: #000; }

.list-notice { margin-bottom: 10px; }
.list-notice li { padding: 18px 15px; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #000; }
.list-notice .tit-notice { display: inline-block; max-width: 80%; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
.list-notice .ico-new { width: 18px; height: 18px; border-radius: 50%; vertical-align: 0; }
.list-notice .ico-file { float: right; width: 9px; }


/*공지사항 상세*/
#noticeview .inner { padding: 30px 15px 0; box-sizing: border-box; }
#noticeview .tit-notice { position: relative; padding: 18px 0; border-top: 2px solid #000; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: #000; }
#noticeview .tit-notice a { display: inline-block; max-width: 70%; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
#noticeview .tit-notice .ico-new { width: 18px; height: 18px; border-radius: 50%; vertical-align: 0; }
#noticeview .tit-notice .date { position: absolute; top: 20px; right: 0; font-size: 11px; font-weight: 400; color: #000; }
#noticeview .contents { margin-bottom: 50px; }
#noticeview .contents img { width: 100% !important; height: auto !important; margin-bottom: 10px; }
#noticeview .contents p { margin-bottom: 10px; font-size: 11px; font-weight: 400; color: #777; }

.download-area { background: #e6e7e8; padding: 10px 15px; border-top: 1px solid #ccc; border-bottom: 2px solid #000; box-sizing: border-box; }
.download-area a { font-size: 11px; font-weight: 400; color: #000; }
.download-area img { width: 7px; margin-right: 5px; }


/*공지사항 작성*/
#noticewrite .inner { padding: 15px; box-sizing: border-box; }

/*파일첨부 커스텀*/
.file-area { position: relative; width: 100%; height: 35px; }
.file-area input[type="text"] { display: block; float: left; width: 88%; height: 35px; padding: 0 10px; border: 1px solid #cfcfcf; box-sizing: border-box; font-size: 13px; font-weight: 300; color: #000; }
.file-area label { display: block; float: left; width: 12%; height: 35px; background: url('../img/ico_file2.png') center center no-repeat #000; background-size: 18px; box-sizing: border-box; cursor: pointer; }
.file-area label input { display: none; }


/*커리큘럼*/
#curriculum .inner { padding: 15px 15px 0; box-sizing: border-box; }
#curriculum .search-area { width: 100%; height: 32px; border-bottom: 2px solid #000; box-sizing: border-box; margin-bottom: 20px; }
#curriculum .search-area .inp-search { display: block; float: left; width: 85%; height: 100%; border: 0; box-sizing: border-box; }
#curriculum .search-area .btn-search { display: block; float: left; width: 15%; height: 100%; background: url('../img/btn_search1.png') right center no-repeat transparent; background-size: 19px; border: 0; }

#curriculum select { width: 30%; height: 32px; background-position: 90%; padding: 0 8px; border: 1px solid #bbb; box-sizing: border-box; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #000; }

.list-curriculum li { clear: both; height: 128px; border: 1px solid #d0d1d3; box-sizing: border-box; margin-bottom: 8px; }
.list-curriculum .thumb-area { float: left; position: relative; width: 50%; height: 100%; }
.list-curriculum .thumb-curriculum { width: 100%; height: 100%; }

.list-curriculum .btn-scrap { position: absolute; top: 8px; left: 8px; }
.list-curriculum .btn-scrap input[type="checkbox"] { display: none; }
.list-curriculum .btn-scrap input[type="checkbox"] + label { display: inline-block; cursor: pointer; }
.list-curriculum .btn-scrap input[type="checkbox"] + label span { display: inline-block; width: 15px; height: 19px; background: url('../img/btn_scrap2_off.png') center center no-repeat; background-size: 100%; cursor: pointer; }
.list-curriculum .btn-scrap input[type="checkbox"]:checked + label span { background-image: url('../img/btn_scrap1_on.png'); }

.list-curriculum .contents { float: left; position: relative; width: 50%; height: 100%; padding: 8px; box-sizing: border-box; }
.list-curriculum .tit-curriculum span { display: inline-block; width: 85%; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; font-size: 13px; font-weight: 700; color: #000; }
.list-curriculum .tit-curriculum .ico-new { width: 16px; height: 16px; border-radius: 50%; vertical-align: 1px; }
.list-curriculum .class { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 400; color: #808285; }

.list-curriculum .bottom-area { padding-top: 5px; border-top: 1px solid #d0d1d3; box-sizing: border-box; }
.list-curriculum .preview { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 18px; max-height: 36px; font-size: 11px; font-weight: 400; color: #808285; }
.list-curriculum .date-views { position: absolute; left: 0; bottom: 8px; width: 100%; padding: 0 8px; box-sizing: border-box; font-size: 10px; font-weight: 400; color: #777; }
.list-curriculum .date-views .views { float: right; }


/*1:1문의*/
#question .inner { padding: 30px 10px 15px; box-sizing: border-box; }
.question-info { display: block; padding: 20px 10px; text-align: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-sizing: border-box; font-size: 15px; font-weight: 400; color: #000; }

#question .inp-textarea { height: 170px; }
#question .btn-file { margin-top: 20px; }
#question .btn-file input { display: none; }
#question .btn-file input + label { display: inline-block; width: 104px; height: 32px; line-height: 32px; text-align: center; background: #58595b; border-radius: 3px; font-size: 15px; font-weight: 400; color: #fff; cursor: pointer; }
#question .btn-file input + label img { width: 20px; margin-right: 5px; vertical-align: -2px; }
#question .file-info { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; color: #58595b; }

#question .list-file:after { content: ''; display: block; clear: both; }
#question .list-file li { position: relative; float: left; width: 22%; height: 52px; margin-right: 4%; margin-bottom: 15px; }
#question .list-file li:nth-child(4n) { margin-right: 0; }
#question .list-file label { display: block; width: 100%; height: 100%; background: url('../img/ico_camera1.png') center center no-repeat #fff; background-size: 30px; border-radius: 5px; box-sizing: border-box; }
#question .list-file li img { width: 100%; height: 100%; border-radius: 5px; box-sizing: border-box; }
#question .list-file input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }


#question .sms-area:before { content: ''; display: block; clear: both; margin-bottom: 20px; }
#question .sms-info { font-size: 14px; font-weight: 500; color: #000; }

#question .sms-area div { float: right; }
#question .sms-area input[type="checkbox"] { display: none; }
#question .sms-area input[type="checkbox"] + label { display: inline-block; cursor: pointer; }
#question .sms-area input[type="checkbox"] + label span { display: inline-block; width: 45px; height: 22px; background: url('../img/btn_check2_off.png') center center no-repeat; background-size: 100%; cursor: pointer; }
#question .sms-area input[type="checkbox"]:checked + label span { background-image: url('../img/btn_check2_on.png'); }


/*문의 리스트*/
#inquiry .link-inquiry { display: block; width: 100%; background: url('../img/btn_arrow_right2.png') 96% center no-repeat #e6e7e8; background-size: 8px; padding: 10px; border-bottom: 1px solid #c5c5c5; box-sizing: border-box; font-size: 16px; font-weight: 500; color: #000; }
#inquiry .date-area { padding: 18px 10px; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
#inquiry .date-list { border: 1px solid #f1f1f1; border-radius: 3px; box-sizing: border-box; }
#inquiry .date-list:after { content: ''; display: block; clear: both; }
#inquiry .date-list li { float: left; width: 25%; padding: 10px 0; box-sizing: border-box; }
#inquiry .date-list li:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
#inquiry .date-list li:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
#inquiry .date-list li.active { background: #939598; }
#inquiry .date-list li a { display: block; width: 100%; height: 100%; border-right: 1px solid #e0e0e0; box-sizing: border-box; font-size: 13px; font-weight: 400; color: #000; text-align: center; }
#inquiry .date-list li:last-child a { border-right: 0; }
#inquiry .date-list li.active a { border-right: 0; color: #fff; }

#inquiry .inner { padding: 15px; box-sizing: border-box; }
#inquiry .box-category { padding: 20px 15px 20px; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
#inquiry .box-category:after { content: ''; display: block; clear: both; }
#inquiry .box-category .box-form { margin-bottom: 0; }

.box-inquiry { position: relative; border: 1px solid #e4e4e4; box-sizing: border-box; margin-bottom: 15px; }
.box-inquiry:last-child { margin-bottom: 0; }

.box-inquiry .top-area { cursor: pointer; }
.box-inquiry .tit-inquiry { padding: 10px; box-sizing: border-box; }
.box-inquiry .tit-inquiry span { display: block; margin-bottom: 15px; font-size: 12px; font-weight: 600; color: #000; }
.box-inquiry .tit-inquiry span img { width: 16px; height: 16px; margin-right: 5px; }
.box-inquiry .tit-inquiry strong { display: block; font-size: 16px; font-weight: 700; color: #000; }

.box-inquiry .upload-info { width: 94%; padding: 10px 0; border-top: 1px solid #e4e4e4; box-sizing: border-box; margin: 0 auto; }
.box-inquiry .upload-info li:after { content: ''; display: block; clear: both; }
.box-inquiry .upload-info span { float: left; width: 20%; font-size: 11px; font-weight: 400; color: #777; }
.box-inquiry .upload-info strong { float: left; width: 80%; font-size: 11px; font-weight: 400; color: #777; }
.box-inquiry .state { display: block; position: absolute; top: 10px; right: 10px; width: 62px; height: 20px; line-height: 18px; text-align: center; background: #fff; border: 1px solid #2e5bcc; border-radius: 10px; box-sizing: border-box; font-size: 10px; font-weight: 500; color: #2e5bcc; }
.box-inquiry .state.active { border: 1px solid #ff4c20; color: #ff4c20; }

.box-inquiry .contents { display: none; width: 94%; padding: 10px 0; border-top: 1px solid #e4e4e4; box-sizing: border-box; margin: 0 auto; }
.box-inquiry .contents.active { display: block; }
.box-inquiry .contents .question-area { font-size: 11px; font-weight: 400; color: #777; }

.box-inquiry .btn-answer { display: block; width: 62px; height: 20px; line-height: 18px; text-align: center; background: #3963cf; border: 1px solid transparent; border-radius: 10px; box-sizing: border-box; margin: 20px 0 10px; font-size: 10px; font-weight: 500; color: #fff; }

.btns-inquiry { margin: 20px 0 10px; }
.btns-inquiry:after { content: ''; display: block; clear: both; }
.btns-inquiry .btn { display: block; float: left; width: 62px; height: 20px; line-height: 18px; text-align: center; background: #000; border: 1px solid transparent; border-radius: 10px; box-sizing: border-box; margin-right: 5px; /**/font-size: 10px; font-weight: 500; color: #fff; }
.btns-inquiry .btn:last-child { margin-right: 0; }
#inquiry .btn-search { width: 100%; height: 35px; background: #939598; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; margin-top: 10px; font-size: 15px; font-weight: 500; color: #fff; cursor: pointer; }

.box-inquiry .contents .inp-textarea { display: block; width: 100%; height: 350px; padding: 8px; border: 1px solid #e4e4e4; box-sizing: border-box; margin-top: 20px; font-size: 15px; font-weight: 400; color: #000; resize: none; }

.box-answer { background: #e6e7e8; padding: 15px; box-sizing: border-box; margin-top: 20px; }
.box-answer .date { display: block; margin-bottom: 15px; font-size: 12px; font-weight: 500; color: #000; }
.box-answer .date img { width: 17px; height: 17px; border-radius: 50%; margin-right: 5px; }
.box-answer .answear-area { font-size: 11px; font-weight: 400; color: #777; }
.box-answer .btns-inquiry { margin-bottom: 0 }
.box-answer .btns-inquiry .btn { background: #ff4c20; }

.no-result { margin-top: 40px; font-size: 16px; font-weight: 500; color: #000; text-align: center; }


/*개인정보취급방침 및 이용약관*/
#term .wrap { padding-bottom: 0; }
#term .inner { padding: 15px 20px 20px; box-sizing: border-box; white-space: pre-wrap; text-align: justify; }


#footer { position: fixed; bottom: 0; width: 100%; height: 45px; background: #fff; z-index: 99; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); }
.ft:after { content: ''; display: block; clear: both; }
.ft li { float: left; position: relative; width: 25%; height: 45px; text-align: center; }
.ft li a { display: block; width: 100%; height: 100%; }
.ft li.active a { border-top: 4px solid #000; box-sizing: border-box; }
.ft li a img { position: absolute; top: 10px; left: 0; right: 0; margin: auto; width: 15px; height: 15px; margin-bottom: 5px; }
.ft li a span { position: absolute; left: 0; right: 0; bottom: 4px; margin: auto; font-size: 9px; font-weight: 500; color: #000; }


@media only screen and (max-width: 320px) {
    .sort-list, .sort-detail { position: static; }
    .sort-list { margin-top: 10px; }
}

@media only screen and (min-width: 450px) {
	.video-area iframe { display: block; width: 100%; min-height: 400px; }
}
.pic_div {
	position: relative;
}
	#img_cover {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 8;
		top: 0;
	}
#main .btn-load { display: block; left: 0; right: 0; margin: auto; width: 96%; height: 35px; line-height: 35px; text-align: center; background: #000; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-size: 15px; font-weight: 500; color: #fff; }
#main .btn-load img { width: 15px; margin-right: 5px; vertical-align: -1px; }

#search .btn-load { display: block; left: 0; right: 0; margin: auto; width: 96%; height: 35px; line-height: 35px; text-align: center; background: #000; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-size: 15px; font-weight: 500; color: #fff; }
#search .btn-load img { width: 15px; margin-right: 5px; vertical-align: -1px; }

#pic_more .btn-load { display: block; left: 0; right: 0; margin: auto; width: 96%; height: 35px; line-height: 35px; text-align: center; background: #000; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-size: 15px; font-weight: 500; color: #fff; }
#pic_more .btn-load img { width: 15px; margin-right: 5px; vertical-align: -1px; }