@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/Nanum Gothic.css);


html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button,hr{border:0 none}
img{vertical-align:middle; max-width:100%; }
body li{*vertical-align:top}
ul li{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer}
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
body{position:relative;line-height:1;font-family:'Nanum Gothic', '나눔고딕', "맑은고딕",Malgun Gothic,'돋움',dotum,Verdana,AppleGothic,Arial,Helvetica,sans-serif; color:#303b4f; }
a { text-decoration:none; color:#303b4f}
em { font-style:normal }
input[type="text"],
input[type="password"] ,
textarea,button { font-family:'Nanum Gothic', '나눔고딕','돋움',dotum,Verdana,AppleGothic,Arial,Helvetica,sans-serif; }
select { font-family:'Nanum Gothic','나눔고딕',"맑은고딕",Malgun Gothic,'돋움',dotum,Verdana,AppleGothic,Arial,Helvetica,sans-serif; }


/**************************************************************************************************************
	공통
**************************************************************************************************************/
.m0 { margin:0  !important }
.mb0 { margin-bottom:0 !important }
.mb2 { margin-bottom:2px !important }
.mb4 { margin-bottom:4px !important }
.mb5 { margin-bottom:5px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb30 { margin-bottom:30px !important }
.mb35 { margin-bottom:35px !important }
.mb40 { margin-bottom:40px !important }
.mb45 { margin-bottom:45px !important }
.mb50 { margin-bottom:50px !important }
.mb55 { margin-bottom:55px !important }
.mb70 { margin-bottom:70px !important }
.mb80 { margin-bottom:80px !important }
.mb110 { margin-bottom:110px !important }
.mr5 { margin-right:5px !important }
.mr10 { margin-right:10px !important }
.mr20 { margin-right:20px !important }
.mr40 { margin-right:40px !important }
.mr50 { margin-right:50px !important }
.pd0 { padding:0 !important }
.mbr10 { margin-right:10px }
.pdl50 { padding-left:50px !important }
.pdtop90 { padding-top:90px }
.none-bor { border:0 !important }
.text-center { text-align:center !important }
.text-left { text-align:left !important }
.text-right { text-align:right !important }
.f12 { font-size:12px !important; line-height: 1.4em; }
.f16 { font-size:16px !important; line-height: 1.4em; }
.f17 { font-size:17px !important; line-height: 1.4em; }
.f18 { font-size:18px !important; line-height: 1.4em; }
.f19 { font-size:19px !important; line-height: 1.4em; }
.f20 { font-size:20px !important; line-height: 1.4em; }
.f24 { font-size:24px !important; line-height: 1.4em; }
.f25 { font-size:25px !important; line-height: 1.4em; }
.f29 { font-size:29px !important; line-height: 1.4em; }
.f31 { font-size:31px !important; line-height: 1.4em; }
.f34 { font-size:34px !important; line-height: 1.4em; }

.lh34 { line-height: 34px !important; }
.lh44 { line-height: 44px !important; }

.text-under { text-decoration:underline !important }
.blue { color:#646ce8 !important } 
.org { color:#fb6827 !important }
.bold { font-weight:bold !important }
.red { color:#fe4e00 !important }
.gray { color:#8d8d8d !important }
.inline { display:inline-block; }
.under { text-decoration: underline !important; }
h1,h2,h3,h4,h5,h6,h7,strong,th  { font-weight:700; }
.clear { clear: both;}
.col-box:after { display: block; content: ''; clear: both;}
.col-box { clear: both;}
.col-left { float:left; }
.col-right { float:right; }
/***********************************************************************************
	Common
************************************************************************************/
.inner { width:960px; margin: 0 auto; }
.inner:after { display: block; content: ''; clear: both; }

.inp { height:34px; border: 1px solid #ccc; font-size:14px; padding-left: 15px; vertical-align: middle; box-sizing:border-box; color: #555; }
.textarea { border: 1px solid #ccc; font-size:14px; line-height: 1.4em; padding:10px 15px; vertical-align: middle; box-sizing:border-box; resize:none;}
.btn { display: inline-block; vertical-align: middle; -webkit-appearance:none; border:0; box-shadow:none; text-align: center; font-size:18px; color: #fff;  box-sizing:border-box; height:40px; line-height: 32px; padding:0 25px; vertical-align: middle; background: #646ce8; border: 3px solid #646ce8;}
.btn-white { background: #fff; color: #646ce8; }
.btn-black { background: #fff; color: #303b4f; border-color:#303b4f; }
.btn-gray { background: #ebecf0 !important; color: #646ce8 !important; border-color:#ebecf0 !important; }
.btn-gray2 { background: #9ca3ad !important; color: #fff !important; border-color:#9ca3ad !important; }
::-webkit-input-placeholder { color: #888; }
::-moz-placeholder {  color: #888;}
:-ms-input-placeholder { color: #888;}
:-moz-placeholder { color: #888;}

.inp { height: 38px; border: 1px solid #d7dfe9; font-size:18px; color: #303b4f; line-height: 38px; padding-left: 10px;  display:  inline-block; vertical-align: middle;box-sizing:border-box;}

.select { width:250px; height: 38px; border: 1px solid #d7dfe9; font-size:18px; color: #303b4f; line-height: 38px; padding-left: 10px; background: url(../img/common/bu_select.png) no-repeat 100% 50%; position: relative; display: inline-block; vertical-align: middle; box-sizing:border-box;}
.select select { position: absolute; left:0;top:0; width:100%; bottom:0; opacity:0;}
.btn-srch { display: inline-block; vertical-align: middle; -webkit-appearance:none; appearance:none;width:45px; height: 38px; border: 1px solid #646ce8; background: url(../img/common/ico_search.png) no-repeat 50% 50%; text-indent: -9999px; }

.radio1 { position: absolute; left: -9999px;}
.radio1 + label { display: inline-block; vertical-align: middle; font-size:18px; color: #303b4f; width:39px; height: 39px; border-radius:100%; text-align: center; line-height: 38px; font-size:#03b4f; border: 3px solid #abb1ba; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; cursor: pointer; }
.radio1:checked + label { border-color:#303b4f; background: #303b4f; color: #fff; }
.radio1.correct + label { border-color:#646ce8; background: #646ce8; color: #fff; }

.radio2 { position: absolute; left: -9999px;}
.radio2 + label { display: inline-block; vertical-align: middle; width:26px; height: 26px; border-radius:100%; text-align: center;  border: 3px solid #9ca3ad;  box-sizing:border-box; position: relative; cursor: pointer; }
.radio2 + label:before { content: ''; opacity:0; position: absolute; left: 5px; top:5px; width:10px; height: 10px; border-radius:100%; background: #303b4f; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; transform:scale(2); -webkit-transform:scale(2); }
.radio2:checked + label:before {transform:scale(1); transform:scale(1); opacity:1; }

.tabs1:after { display: block; content: ''; clear: both; }
.tabs1 { border-bottom: 1px solid #646ce8; height: 40px; margin-bottom: 40px; position: relative; }
.tabs1 a { float:left; margin-right:8px; width:150px; height: 38px; border: 1px solid #646ce8; text-align: center; line-height: 36px; font-size:20px; font-weight: 600; color: #646ce8; position: relative; top:1px; }
.tabs1 a.active { color: #303b4f; border-bottom: 1px solid #fff;  }
.tabs1 .btns a { width:auto; padding:0 20px; font-size:18px; font-weight: normal; position: relative;}
.tabs1 .btns a span { position: absolute; right:-6px; top:-6px; width:25px; height: 25px; box-sizing: border-box; border: 2px solid #646ce8; line-height: 22px; text-align: center; font-size:16px; font-family:arial; color: #646ce8; font-weight: 600; background: #fff; border-radius:100%; box-shadow:0 3px 0 rgba(0,0,0,0.2); }
.tabs1 .sort { position: absolute; right:15px; bottom:10px; }
.tabs1 .sort a { float:none; display: inline-block; vertical-align: middle; margin: 0; width:auto; height: auto; border: 0; line-height: 20px; font-size:14px; color: #303b4f; font-weight: normal; position: static; padding:0 5px; height:20px; margin:0 2px; }
.tabs1 .sort a.active { background: #646ce8; color: #fff; }

/* MODAL */
/* MODAL */
.hidden { overflow:hidden; }
.modal-backdrop {position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index:7500; opacity:.5; filter:alpha(opacity=50);}
.modal {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8000; overflow:auto; -webkit-overflow-scrolling:touch; outline:0; }
.modal-dialog {position:relative; width:auto;margin:0 auto; border-radius:10px; width: 430px; box-shadow:0 0 7px rgba(0,0,0,0.3); }
.modal-header { height:60px; line-height: 59px;  text-align:center; font-size:30px; color:#646ce8; background:#edf2f8;font-weight: 600;}
.modal-header .modal-tit { line-height: 59px;}
.modal-header .modal-tit.text-left {  padding-left: 20px;}
.modal-content {position:relative; background-color:#fff; outline:none;  overflow:hidden; padding:35px; }
.modal .btn-close { position:absolute; top:0; right:0; width:60px; height:60px; padding:0; border:0; background:url(../img/common/modal_close.png) no-repeat 50% 50%; text-indent: -9999px; }
.modal-foot .btn { display: block; width:100%; height: 60px; line-height: 59px; font-size:24px; color: #fff; background: #646ce8; padding:0; }
.modal-foot .btn.black { color: #303b4f !important; }
.modal-foot.col2 { overflow: hidden;	}
.modal-foot.col2 .btn { float:left; width:50%;}
.modal-foot.col2.line { position: relative;}
.modal-foot.col2.line:before { content:''; position: absolute; left:50%; top:0;bottom:0; width:1px; background: #fff;}

.join-end { text-align: center; padding:10px; font-size:15px; line-height: 1.3em; }
.join-end strong { font-weight: normal; font-size:24px; color: #646ce8; }
.join-end em { color: #646ce8; font-size:18px; }
.join-end em span { text-decoration: underline; }
.alert-msg { height:25px; line-height: 15px; padding-top:3px; font-size:12px; color: #CC191C; font-weight: 600;}
.modal .agree { font-size:18px; padding:8px 0;}
.modal .txt1 { font-size:18px;  padding:15px 0;}
.modal .txt2 { line-height: 1.6em; padding:15px 0 15px 100px;}
body,html { height: 100%; }
.pass-txt1 { font-size:14px; margin-bottom: 8px;}
.modal .book-serial { width:300px; margin: 0 auto; }
.modal .book-serial .txt { font-size:20px; margin-bottom: 10px;}
.modal .book-img { text-align: center; }
.modal .book-img .txt { font-size:20px; line-height: 1.3em; margin-bottom: 15px;}
.modal .join-txt2 { font-size:18px; padding:15px 0 15px 80px; line-height: 30px;  }
.modal .join-txt2 strong { font-size:20px; display: inline-block; vertical-align: middle; position: relative; font-weight: normal; letter-spacing: -1px; white-space: nowrap;}
.modal .join-txt2 strong:before { content: ''; position: absolute; left: 0; right:0; bottom:0; height: 1px; background: #646ce8; }
.modal .student-list { padding:20px; background: #646ce8; max-height: 170px; overflow: auto; position: relative; }
.modal .student-list table { width:100%; border-collapse: collapse; }
.modal .student-list table td { padding:8px 10px; font-size:18px; color: #fff; border-bottom: 1px solid #fff;  }
.modal .student-list table tr:last-child td { border-bottom: 0;}
.modal .student-list .on-active { position: absolute; left:80px; top:0; width:37px; height: 16px; background: url(../img/common/bu_graph_on.png) no-repeat 0 0;}
.modal .table-posi table { width:100%; border-collapse: collapse; border-top:2px solid #646ce8; }
.modal .table-posi table tbody td { padding:10px; font-size:18px; border-bottom: 1px solid #9ca3ad; }
.modal .table-posi table .btn-del { border:0; text-indent: -9999px; width:30px; height: 30px; background: url(../img/common/btn_list_del.png) no-repeat 50% 50%; }

/***********************************************************************************
	Footer
************************************************************************************/
#footer { height:66px; background: #303b4f; position: absolute; left: 0; right:0; bottom:0; }
#footer .col-left { padding-top:14px; font-size:12px; color: #fff; }
#footer .col-left a { color: #fff; text-transform: uppercase; }
#footer .col-left a.btn-user { display: inline-block; vertical-align: middle; width:11px; height: 14px; background: url(../img/common/ico_footer_user.png) no-repeat 0 0; margin-top:-2px;}
#footer .col-left span { margin:0 4px;}
#footer .col-left p { font-size:11px; color: #fff; padding-top:9px;}

#footer .col-right { padding-top:20px;}
#footer .col-right .logo { display: inline-block; vertical-align:middle; margin-right:10px;}
#footer .col-right .dropdown { position: relative; display: inline-block; vertical-align:middle;	}
#footer .col-right .dropdown .dropdown-toggle { width:150px; height: 18px; line-height: 16px; background: #303b4f url(../img/common/footer_partner.png) no-repeat 100% 50%; padding-left: 10px; border-radius:0; border: 1px solid #434c5c; font-size:11px; color: #fff;  position: relative; text-align: left; cursor: pointer; padding-top:0; outline:none;}
#footer .col-right .dropdown .dropdown-menu { display: none;position: absolute; left: 0; right:0; bottom:18px; background: #303b4f; border:1px solid #434c5c; border-top:0; }
#footer .col-right .dropdown .dropdown-menu a { display: block; font-size:11px; color: rgba(255,255,255,0.6); line-height: 22px; padding-left:10px;; border-top:1px solid #434c5c; }
#footer .col-right .dropdown .dropdown-menu a:hover { background: #182337; color:#fff; }
#footer .col-right .dropdown.open .dropdown-menu { display: block; }



/***********************************************************************************
	Login
************************************************************************************/

#login { background: url(../img/common/bg_login.png) no-repeat 50% 0; box-sizing:border-box; padding-bottom:130px;}
#login .login-inner { width:600px; margin: 0 auto; }
#login .login-inner .title { padding:69px 0 59px; }
#login .login-inner .title .desc { font-size:20px; color: #1a0063; margin-bottom: 17px; }
#login .form-box { padding:46px 76px; background: #fff; }
#login .form-box .inps-box { position: relative; padding-right:111px;}
#login .form-box .inps-box p { margin-bottom: 15px;}
#login .form-box .inps-box p input[type=text],
#login .form-box .inps-box p input[type=password] { width:320px; height:40px; background: #fff; border: 1px solid #ddd; font-size:18px; color: #333; padding-left: 15px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; outline:none; }
#login .form-box .inps-box p input[type=text]:focus,
#login .form-box .inps-box p input[type=password]:focus { border-color:#7a84f7; }
#login .form-box .inps-box .btn-login { position: absolute; right:0; top:0; width:100px; height: 100px; border: 3px solid #7a84f7; text-align: center; background: #fff; font-size:20px; color: #646ce8; }
#login .form-box .etc { overflow: hidden; margin-bottom: 18px; }
#login .form-box .etc label { font-size:18px; color: #303b4f; }
#login .form-box .etc a { float:right; font-size:18px; color: #646ce8; }
#login .form-box .social-btns a { display: block; height:43px; margin-bottom: 18px; }
#login .form-box .social-btns a.btn-g { border: 1px solid #db4437; background: url(../img/common/ico_login_g.png) no-repeat 50% 50%;}
#login .form-box .social-btns a.btn-f { border: 1px solid #4267b2; background: url(../img/common/ico_login_f.png) no-repeat 50% 50%;}
#login .form-box .get-btns { overflow: hidden; }
#login .form-box .get-btns a { float:right; width:210px; height: 61px; background: #646ce8; text-align: center; color: #fff; text-transform: uppercase; }
#login .form-box .get-btns a:first-child { float:left; }
#login .form-box .get-btns a span { display: block; font-size:19px; padding:9px 0 1px; }
#login .form-box .get-btns a strong { font-weight: normal; font-size:24px; }


/***********************************************************************************
	Main
************************************************************************************/

#main { background: url(../img/common/bg_login.png) no-repeat 50% 0; box-sizing:border-box; padding-bottom:130px;}
#main .main-inner { width:960px; margin: 0 auto; }
#main .lnb { text-align: right; padding:38px 0 75px;}
#main .lnb a { display: inline-block; vertical-align: middle; font-size:20px; font-weight: 600; padding:0 10px; position: relative; color: #fff;}
#main .lnb a:before { content: ''; position: absolute; left: 0; top:3px; bottom:5px; width:1px;background: #fff; }
#main .lnb a:last-child:after { content: ''; position: absolute; right: 0; top:3px; bottom:5px; width:1px;background: #fff; }
#main .form-box { margin-bottom: 190px; }
#main .form-box .logo { float:left; margin-right:80px; }
#main .form-box .form { overflow: hidden;}
#main .form-box .form .txt1 { font-size:24px; color: #1a0063; margin-bottom: 15px; }
#main .form-box .form .txt2 { font-size:18px; line-height: 1.3em; color: #fff; margin-bottom: 15px; }
#main .form-box .form input[type=text] { width:120px; padding-left: 15px; height: 30px; border: 0; background: #fff; font-size:18px; color: #666; vertical-align: middle;}
#main .form-box .form .btn-add { background: #24c7fe; width:40px; height: 30px; text-align: center; font-size:14px; color: #fff; vertical-align: middle;}
#main .main-course { text-align: center; margin-bottom: 80px; }
#main .main-course p { display: inline-block; vertical-align: middle; width:99px; height: 99px; border-radius:100%; border:2px solid #edf2f8; text-align: center; line-height:1.3em; font-size:18px; color: #303b4f; box-sizing:border-box; padding-top:24px; margin-left: 93px; position: relative; }
#main .main-course p:before { content: ''; position: absolute; left: -93px; top:50%; width:93px; height:6px; background: url(../img/main/main_course_dot.png) no-repeat 50% 0;}
#main .main-course p:first-child { margin-left: 0;}
#main .main-course p:first-child:before { display: none; }
#main .main-course p.line1 { line-height:98px; padding:0; }
#main .main-course p.active { background: #02c384; color: #fff; }


/***********************************************************************************
	Common
************************************************************************************/

#header { height: 75px; background: #646ce8; position: absolute; left: 0; right:0; top:0; }

#header .inner { position: relative; height: 75px;}
#header h1 { position: absolute; left: 0; top:20px; }
#gnb { position: absolute; right:0; bottom:0; white-space: nowrap; }
#gnb > a { float:left; padding:0 17px; font-size:20px; color: #fff; font-weight: 600; padding-bottom: 20px; position: relative;  line-height: 20px; }
#gnb > a:after { content: ''; position: absolute; right:0; top:5px; bottom:25px; width:1px; background: #fff; }
#gnb > a:before { content: ''; opacity:0; position: absolute; left: 17px; right:17px; bottom:-5px; height: 5px;  background: #fff;  transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
#gnb > a.active:before,
#gnb > a:hover:before { opacity:1; bottom:0; }
#gnb > a em { position: absolute; right:5px; top:-22px; min-width:25px; height:25px; border-radius:25px; background: #fff; border: 2px solid #646ce8; box-shadow: 0 3px 0 rgba(0,0,0,0.3); text-align: center; font-size:16px; color: #646ce8; font-family: Arial; line-height: 24px; box-sizing: border-box;}
#gnb .my {  display: inline-block; vertical-align: middle; position: relative; z-index:10;}
#gnb .my .btn-my { display: inline-block; vertical-align: middle; width:16px; height: 19px; background: url(../img/common/gnb_my.png) no-repeat 50% 0; padding:0 12px; }
#gnb .my .btn-my:after { bottom:4px;}
#gnb .my ul { display: none;position: absolute; right:0; top:39px; padding:6px 25px; background: #fff; border: 1px solid #b1b5f3;}
#gnb .my ul li a { display: block; font-size:14px; line-height: 30px; color: #000000; }
#gnb .my ul:before { content: ''; position: absolute; right:10px;background: url(../img/common/bu_gnb_arr.png) no-repeat 0 0; width:24px; height: 16px; top:-16px;}

#snb { position: absolute; left: 0; right:0; top:75px; height: 45px; background: #f6f5fa; }
#snb .inner:after { display: block; content: ''; clear: both; }
#snb .inner a { float:left; font-size:18px; height:45px; line-height: 44px; color: #646ce8; position: relative; margin-right:48px;}
#snb .inner a:before { content: ''; position: absolute; left: 0; right:0; bottom:-3px; opacity:0; height: 3px; background: #646ce8; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; }
#snb .inner a:hover:before,
#snb .inner a.active:before {  bottom:0; opacity:1; }


#contents { width:960px; margin: 0 auto; padding:140px 0 80px; }
.description { padding:28px 0; background: #f6f5fa;  position: relative;  margin-bottom: 145px; }
.description .tit { float:left; font-size:40px; color: #646ce8; font-weight: 600;margin:5px 35px 0; line-height: 50px; height: 50px; position: relative; }
.description .tit:before { content: ''; position: absolute; right:-35px; top:0; bottom:0; width:5px; background: #fff;  }
.description .info { font-size:18px; line-height: 30px; color: #303b4f; padding-left: 35px; overflow: hidden;}
.description .info.line1 { padding-top:15px; padding-bottom: 15px;}
.description .btn-plus { position: absolute; right:30px; top:50%; margin-top:-39px; width:78px; height: 78px; border-radius:100%; background: #fff url(../img/sub/btn_plus.png) no-repeat 50% 50%; text-indent: -9999px;}

.description2 { padding:20px 0; background: #303b4f;  position: relative;  }
.description2 .tit { float:left; font-size:16px; color: #00c484; font-weight: normal;margin:0 74px 0 20px; height: 50px; position: relative; }
.description2 .tit:before { content: ''; position: absolute; right:-74px; top:0; bottom:0; width:3px; background: #00c484;  }
.description2 .info { font-size:18px; line-height: 24px; color: #fff; padding-left: 15px; overflow: hidden; padding-top:2px;}


.books { margin-bottom: 50px; }
.books li { float:left; width:180px; position: relative; margin-left: 80px; overflow: hidden;}
.books li:first-child { margin-left: 0;}
.books li .btns { opacity:0; position: absolute; left: 0; right:0; bottom:-20px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; }
.books li .btns a { display: block; height: 50px; line-height: 49px; text-align: center; font-size:18px; color: #fff; }
.books li .btns a.btn1 { background: rgba(100,108,232,0.8)}
.books li .btns a.btn2 { background: rgba(0,0,0,0.75)}
.books li:hover .btns { opacity:1; bottom:0; }


.sort-box { font-size:0; margin-bottom: 30px;}
.sort-box .select + .btn-srch { margin-left: -1px; position: relative; z-index:2;}

/* Chapter */
.chapter-wrap { border-top:2px solid #646ce8; }
.chapter-wrap .section { position: relative; padding-left:190px;}
.chapter-wrap .section .tit { position: absolute; left: 0; top:0; line-height:37px; padding-top:11px; font-size:18px; color: #646ce8; padding-left: 10px;  width:140px; border-bottom: 2px solid #646ce8; }
.chapter-wrap .section .list ul li { font-size:18px; color: #303b4f; padding:11px 0 0; line-height: 37px; border-bottom: 1px solid #bfbfbf; }
.chapter-wrap .section .list ul li:after { display: block; content: ''; clear: both; }
.chapter-wrap .section .list ul li .num { float:left; width:60px; padding-left: 9px; }
.chapter-wrap .section .list ul li .subj { float:left; width:360px; }
.chapter-wrap .section .list ul li .abc { overflow: hidden; }
.chapter-wrap .section .list ul li .abc a { margin-right:15px;}


.question-wrap {  }
.question-wrap .head {margin-bottom: 50px;font-size:0; height: 40px; border-bottom: 1px solid #646ce8;}
.question-wrap .head .tit { float:left; padding-top:5px; }
.question-wrap .head .tit strong { font-size:20px; color: #646ce8; margin-right:25px; }
.question-wrap .head .tit span { font-size:18px; color: #303b4f; font-weight: 600;}
.question-wrap .head .list { display: inline-block; vertical-align: bottom; position: relative; top:1px; margin-left: 30px;}
.question-wrap .head .list a { display: inline-block; vertical-align: bottom; width:43px; height: 38px; border: 1px solid #7a84f7; text-align: center; font-size:24px; color: #646ce8; font-weight: 600; line-height: 36px; margin:0 3px;}
.question-wrap .head .list a.active { border-color:#646ce8; color: #303b4f; border-bottom: 1px solid #fff; z-index:2;}
.question-wrap .head .col-right { position: relative; top:1px; z-index:2;}
.question-wrap .derection { margin-bottom: 40px; }
.question-wrap .derection .subj { margin-bottom: 1px;}
.question-wrap .derection .subj:after { display: block; content: ''; clear: both; }
.question-wrap .derection .subj .tit { float:left; font-size:20px; color: #000; margin-top:-2px; }
.question-wrap .derection .subj .btn-flip { float:right; padding:0 25px 0 10px; height: 20px; line-height: 19px; font-size:16px; background: #ebecf0 url(../img/common/bu_derection_off.png) no-repeat 95% 50%; color: #646ce8; }
.question-wrap .derection .text { display: none;padding:15px 10px; background: #f6f5fa; font-size:16px; line-height: 24px; color: #303b4f;}
.question-wrap .derection.active .subj .btn-flip { background-image:url(../img/common/bu_derection_on.png)}
.question-wrap h4 { font-size:18px; color: #303b4f; margin-bottom: 10px; font-weight: normal;}
.question-list { border-top:2px solid #646ce8; }
.question-list .sound-head { padding:12px 15px; border-bottom: 1px solid #646ce8; }
.question-list .section { padding:16px 10px; border-bottom: 1px solid #646ce8; }
.question-list .section h5:after { content: ''; display: block; clear: both; }
.question-list .section h5 { font-weight: normal; margin-bottom: 18px; position: relative; }
.question-list .section h5.x:before { content: ''; position: absolute; left: -5px; top:-3px; background: url(../img/common/ico_q_x.png) no-repeat 0 0; width:31px; height: 33px; }
.question-list .section h5.o:before { content: ''; position: absolute; left: -8px; top:-9px; background: url(../img/common/ico_q_o.png) no-repeat 0 0; width:39px; height: 40px; }
.question-list .section h5 span { font-size:18px; color: #303b4f; }
.question-list .section h5 span img { margin-left: 10px; }
.question-list .section h5 em { float:right; font-size:16px; color: #646ce8; padding-top:3px;}
.question-list .section ul li { margin-bottom: 17px; }
.question-list .section ul li:last-child { margin-bottom: 0; }
.question-list .section ul li span { display: inline-block; vertical-align: middle; font-size:18px; color: #303b4f; margin-left: 20px;}
.question-list .section .image-type { padding-left:10px;}
.question-list .section .image-type:after{ content: ''; display: block; clear: both; }
.question-list .section .image-type .img { float:left; margin-right:40px; }
.question-list .section .image-type ul { position: relative; top:-5px;}
.question-list .q-desc { padding:13px 0; font-size:18px; line-height:1.5em; color: 3303b4f; border-bottom: 1px solid #646ce8; }

.bottom-btns { text-align: right; padding:12px 0 20px;}
.bottom-etc { padding:20px 0 40px;}
.bottom-etc .col-left .btn-top { display: inline-block; vertical-align: middle; font-size:18px; color: #303b4f; }
.bottom-etc .col-left .btn-top:before { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/bu_top.png) no-repeat 0 0; width:14px; height: 16px; margin:-3px 8px 0 0;}
.bottom-etc .col-right .btn-more { display: inline-block; vertical-align: middle; font-size:18px; color: #303b4f; }
.bottom-etc .col-right .btn-more:after { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/bu_more.png) no-repeat 0 0; width:15px; height: 11px; margin:-3px 0 0 8px;}

#login,
#main,
#wrap { min-height:100%; padding-bottom:66px; position: relative; box-sizing:border-box; }

.notice { padding-top:30px; }
.notice .head { position: relative; margin-bottom: 30px; }
.notice .head input[type=text] { width:100%; border: 1px solid #dae0e8; height: 40px; padding-left: 15px; padding-right:50px; box-sizing:border-box; font-size:18px; }
.notice .head .btn-srch { position: absolute; right:0; top:0;}
.notice .body {}
.notice .body ul { border-top:2px solid #646ce8;}
.notice .body ul li { border-bottom: 1px solid #cbcfd4; }
.notice .body ul li .q a { display: block; height: 60px; line-height: 59px; padding:0 150px 0 10px; font-size:18px; color: #3303b4f; position: relative; }
.notice .body ul li .q a span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice .body ul li .q a em { position: absolute; right:10px; top:0; line-height: 59px;}
.notice .body ul li .a { display: none; padding:10px; font-size:18px; line-height: 30px; color: #303b4f; margin-bottom: 20px; }


.faq { padding-top:30px; }
.faq .head { position: relative; margin-bottom: 30px; }
.faq .body {}
.faq .body ul { border-top:2px solid #646ce8;}
.faq .body ul li { border-bottom: 1px solid #cbcfd4; }
.faq .body ul li .q a { display: block; height: 60px; line-height: 59px; padding:0 150px 0 10px; font-size:18px; color: #3303b4f; position: relative; background: url(../img/common/bu_faq_off.png) no-repeat 98% 50%; }
.faq .body ul li .q a span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faq .body ul li .a { display: none; padding:10px 20px; font-size:18px; line-height: 30px; color: #303b4f; margin-bottom: 20px; }
.faq .body ul li.active .q a { background-image:url(../img/common/bu_faq_on.png); }

.pagenate { text-align: center; margin:40px 0; font-size:0;}
.pagenate a { display: inline-block; vertical-align: middle; width:40px; height: 40px; text-align: center; font-size:20px; color: #303b4f; border: 1px solid #ddd; margin-right:-1px; line-height: 38px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; }
.pagenate a.first,
.pagenate a.prev,
.pagenate a.next,
.pagenate a.last { font-size:12px; }
.pagenate a:hover,
.pagenate a.active { background: #646ce8; border-color:#646ce8; position: relative; z-index:2; color: #fff;}

.table { margin-bottom: 15px; }
.table table { width:100%; border-collapse: collapse; }
.table table thead th { background: #f6f5fa; height: 45px; border-bottom: 1px solid #dae0e8; border-top: 1px solid #dae0e8; font-size:18px; color: #303b4f; text-align: center; font-weight: normal;}
.table table thead th:first-child { border-left: 1px solid #dae0e8; }
.table table thead th:last-child { border-right: 1px solid #dae0e8; }
.table table tbody td { height: 60px; border-bottom: 1px solid #cbcfd4; font-size:18px; color: #303b4f; text-align: center;}
.table table .text-left { padding:0 15px;}

.privacy-txt { font-size:14px; line-height: 1.4em; color: 3303b4f; }

.graph-wrap { padding:30px 38px; background: #f5fafe; margin-bottom: 70px; }
.description2 + .graph-wrap { padding-top:50px;}
.graph-wrap .col2:after { display: block; content: ''; clear: both; }
.graph-wrap .col2 > div { width:430px;}
.graph-wrap .title { text-align: center; height: 50px; line-height: 49px; font-size:24px; color: #fff; background: #8b92ff; font-weight: 600; }
.graph-wrap .graph { background: #fff; }
.graph-wrap .category { padding:15px; font-size:15px; line-height: 1.3em; color: #9ca3ad; }
.graph-wrap .category ul:after { display: block; content: ''; clear: both; }
.graph-wrap .category ul li { float:left; width:50%; }
.graph-wrap .category ul li.w100 { width:100%; }

/* 20180427 추가 */
.quiz-list:after { display: block; content: ''; clear: both; }
.quiz-list li { float:left; padding-left: 80px; width:180px; margin-bottom: 90px; }
.quiz-list li:nth-child(4n+1) {padding-left: 0; }
.quiz-list li a { display: block; height: 120px; background: #8b92ff; position: relative;}
.quiz-list li a .txt1 { font-size:18px; line-height: 24px; color: #fff; max-height:48px; overflow: hidden; text-align: center; padding:10px 8px 0; word-break: break-all; word-wrap: break-word;}
.quiz-list li a .date { font-size:14px; color: #646ce8; position: absolute; left: 0; right:0; bottom:29px; text-align: center; }
.quiz-list li a .status { position: absolute; left: 0; right:0; bottom:0; height:25px; line-height: 24px; text-align: center; font-size:14px; color: #fff; background: #646ce8;}
.quiz-list li a .status.score { background: #9ca3ad; }
.quiz-list.type2 li a { background: #f5fafe; }
.quiz-list.type2 li a .txt1 { color: #646ce8; }
.quiz-list.type2 li a .date { color: #8b92ff; }
.quiz-list.type2 li a .status { background: #8b92ff; }
.quiz-list.type2 li a .status.score { background: #9ca3ad; }
.quiz-list.type2 li.active a { position: relative;}
.quiz-list.type2 li.active a:before { content: ''; position: absolute; left: 0; right:0; top:0; bottom:0; border: 5px solid #8b92ff;}
.quiz-list.type3 li a { position: relative;}
.quiz-list.type3 li a .txt2 { position: absolute; left: 0; right:0; bottom:4px; text-align: center; font-size:14px; line-height: 1.2; }
.quiz-list.type3 li a .details { opacity:0;  position: absolute; left: 0; right:0; bottom:0; height:40px; line-height: 39px; text-align: center; font-size:18px; color: #fff; background: rgba(0,0,0,0.75); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
.quiz-list.type3 li a:hover .details { opacity:1;}
.quiz-list.type4 li a { background: #8b92ff; }
.quiz-list.type4 li.active a:before { content: ''; position: absolute; left: 0; right:0; bottom:0; top:0; border: 5px solid #464f9a; z-index:10; }

.graph-wrap .download { text-align: right; margin:-30px 0 10px;}
.graph-wrap .download a { display: inline-block; vertical-align: middle; height:38px; padding:0 10px; border: 1px solid #646ce8; line-height: 37px; font-size:18px; color: #646ce8; background: #fff; }
.graph-wrap .download a:before { content: ''; display: inline-block; vertical-align: middle; width:25px; height: 25px; background: url(../img/common/ico_pdf.png) no-repeat 0 0; margin:-2px 5px 0 0; }

.modal-header.type2 { background: #8b92ff; color: #fff;}
.quiz-modal .tit { font-size:14px;font-weight: 600; color: #303b4f; margin-bottom: 5px; padding-top:30px; }
.quiz-modal .info-box:after {display: block; content: ''; clear: both; }
.quiz-modal .info-box { position: relative;}
.quiz-modal .info-box > div { float:left; }
.quiz-modal .info-box .info1 { font-size:14px; line-height: 20px; color: #303b4f; }
.quiz-modal .info-box .info2 { font-size:14px; line-height: 20px; color: #303b4f;  padding-left: 100px; margin-left: 100px; position: relative;}
.quiz-modal .info-box .info2 .green { color: #00c484; }
.quiz-modal .info-box .info2:before { content: ''; position: absolute; left: 0; top:0; bottom:0; width:1px; background: #ddd;}

.quiz-txt1 { }
.quiz-txt1 .tit { font-size:14px; color: #303b4f; margin-bottom: 4px; font-weight: 600;}
.quiz-txt1 .txt { font-size:14px; color: #303b4f; margin-bottom: 18px; line-height: 1.4; }
.quiz-txt2 { margin-top:-15px;}
.quiz-txt2 .no { text-align: center; }
.quiz-txt2 .no p { font-size:18px; color: #303b4f; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #646ce8; }
.quiz-txt2 .no strong { font-size:14px; color: #646ce8; }
.quiz-txt2 .tit { font-size:14px; color: #303b4f; margin-bottom: 5px; font-weight: 600; padding-left: 10px; text-indent: -18px;}
.quiz-txt2 .txt { font-size:14px; color: #303b4f; margin-bottom: 5px; line-height: 1.4; }
.quiz-txt3 { color: #303b4f; }
.quiz-txt3 .tit { font-size:18px; font-weight: 600; margin-bottom: 10px; }
.quiz-txt3 .txt { font-size:14px; line-height: 20px; padding-left: 10px; text-indent: -10px; }
.quiz-txt3 .tit2 { font-size:14px; font-weight: 600; padding-top:15px;}

.setquiz-modal { font-size:14px; line-height: 25px; }
.setquiz-modal dl:after { display: block; content: ''; clear: both; }
.setquiz-modal dl  { margin-bottom: 5px;}
.setquiz-modal dl dt { float:left; width:100px; }
.setquiz-modal dl dd { overflow: hidden; }

#modalQuiz5 .table-posi table tbody td { font-size:14px; line-height: 1.2;}


.setquiz-list:after { display: block; content: ''; clear: both; }
.setquiz-list li { float:left; padding-left: 80px; width:180px; margin-bottom: 50px; }
.setquiz-list li:nth-child(4n+1) {padding-left: 0; }
.setquiz-list li a { display: block; height: 120px;position: relative; box-sizing: border-box; border:5px solid #ebecf0; text-align: center;  font-size:14px;}
.setquiz-list li a .txt1 {   line-height: 18px; height:36px; overflow: hidden; color: #646ce8; padding:13px 10px 5px;}
.setquiz-list li a .txt2 { }
.setquiz-list li a .details { opacity:0;  position: absolute; left: -5px; right:-5px; bottom:-5px; height:40px; line-height: 39px; text-align: center; font-size:18px; color: #fff; background: rgba(0,0,0,0.75); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
.setquiz-list li a .icon { position: absolute; right:-12px; top:-12px; width:30px; height: 30px; border:3px solid #fff; background: #8b92ff url(../img/common/ico_user_s.png) no-repeat 50% 50%;border-radius:100%;  }
.setquiz-list li a:hover .details { opacity: 1;}
.setquiz-list li.add a { border-color:#8b92ff; background: url(../img/common/ico_setquiz.png) no-repeat 50% 50%; }

.myquiz-list:after { display: block; content: ''; clear: both; }
.myquiz-list li { float:left; padding-left: 80px; width:180px; margin-bottom: 40px; }
.myquiz-list li:nth-child(4n+1) {padding-left: 0; }
.myquiz-list li > div { display: block; height: 120px; background: #8b92ff; position: relative;}
.myquiz-list li > div .txt1 { font-size:18px; line-height: 24px; color: #fff; max-height:48px; overflow: hidden; text-align: center; padding:10px 8px 0; word-break: break-all; word-wrap: break-word;}
.myquiz-list li > div .date { font-size:14px; color: #646ce8; position: absolute; left: 0; right:0; bottom:29px; text-align: center; }
.myquiz-list li > div .status { position: absolute; left: 0; right:0; bottom:0; height:25px; line-height: 24px; text-align: center; font-size:14px; color: #fff; background: #646ce8;}
.myquiz-list li > div .status.score { background: #9ca3ad; }
.myquiz-list li > div .txt2 { position: absolute; left: 0; right:0; bottom:4px; text-align: center; font-size:14px; line-height: 1.2; }
.myquiz-list li > div .more { opacity:0; position: absolute; left: 0; right:0; bottom:0; height:40px; line-height: 39px; text-align: center; font-size:18px; color: #fff; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
.myquiz-list li > div .more .btn-del { float:left; width:30px; height: 40px; text-align: center; line-height: 39px; font-size:18px; color: #fff; font-weight: 600; background: #9ca3ad; }
.myquiz-list li > div .more .btn-details { float:left; width:150px; height:40px; line-height: 39px; text-align: center; font-size:18px; color: #fff; background: rgba(0,0,0,0.75); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
.myquiz-list li > div:hover .more { opacity:1;}
.myquiz-list li > div .icon { position: absolute; right:-12px; top:-12px; width:30px; height: 30px; border:3px solid #fff; background: #8b92ff url(../img/common/ico_user_s.png) no-repeat 50% 50%;border-radius:100%;  }

.extra-quiz {}
.extra-quiz .title { position: relative; min-height:40px; }
.extra-quiz .title strong { font-size:20px; font-weight: normal;}
.extra-quiz .title .btn-tip { display: inline-block; vertical-align: middle; width:31px; height: 31px; border-radius:100%; text-align: center; line-height: 30px; font-size:24px; font-family: arial; background: #f6f5fa; color: #646ce8;  margin:-2px 0 0 12px;}
.extra-quiz .title .btn { position: absolute; right:0; top:-3px; }
.extra-quiz .tip-txt { display: none;padding:15px 10px; font-size:16px; line-height: 24px; background: #f6f5fa; }
.extra-quiz .tip-txt .q { display: inline-block; vertical-align: middle; width:21px; height: 21px; border-radius:100%; text-align: center; line-height: 20px; font-size:14px; background: #646ce8; margin:-4px 3px 0;}

.quiz-table {}
.quiz-table table { width:100%; border-collapse: collapse; }
.quiz-table table thead th { height: 45px; font-size:18px; background: #f6f5fa; border-top:2px solid #646ce8; font-weight: normal;}
.quiz-table table thead th:nth-child(3) { text-align: left; }
.quiz-table table tbody td { font-size:18px; line-height: 1.3; padding:10px 0; border-bottom: 1px solid #bfbfbf;   text-align: center; }
.quiz-table table tbody td:nth-child(3) { text-align: left; }
.quiz-table table tbody td .btn-sl { display: inline-block; vertical-align: middle; background: none; -webkit-appearance:none; border:0; box-shadow:none; font-size:14px; color: #646ce8;}

.check-q { position: absolute; left: -9999px; }
.check-q + label span { display: inline-block; vertical-align: middle; width:26px; height: 26px; box-sizing: border-box; border-radius:100%; line-height: 23px; text-align: center; font-size:14px; border: 1px solid #ddd; cursor: pointer; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: #fff;}
.check-q:checked + label span { background: #646ce8; border-color:#646ce8;}

.btn-numbering { display: inline-block; vertical-align: middle; width:31px; height: 31px; border-radius:100%; box-sizing: border-box; border: 1px solid #9ca3ad; line-height: 28px; font-size:18px; text-align: center; background: #fff; font-weight: normal;}
.btn-numbering.active { background: #646ce8; border-color:#646ce8; color: #fff; }
#modalQuizSelect .title { font-size:18px; padding:10px; font-weight: 600;}
#modalQuizSelect .modal-content { padding:0; }
#modalQuizSelect .modal-content { max-height:650px; overflow: auto; }
#modalQuizSelect .question-list .section .image-type .img img { width:500px; }