@charset "utf-8";

/* 작성자 : 이영란 */
/* 최종작성일 : 2021-08-20 */
/* 버전 : v1.1 */

/****************************** RESET ******************************/

* { padding: 0; margin: 0; border: 0; outline: 0; box-sizing: border-box; }
:focus { outline: 0; }
::before, ::after { box-sizing: border-box; }
::-webkit-input-placeholder { font-size: 14px; font-weight: 300; color: #707070; text-transform: none; }
:-moz-placeholder { font-size: 14px; font-weight: 300; color: #707070; text-transform: none; opacity: 1; filter: alpha(opacity=100); }
::-moz-placeholder { font-size: 14px; font-weight: 300; color: #707070; text-transform: none; opacity: 1; filter: alpha(opacity=100); }
:-ms-input-placeholder { font-size: 14px; font-weight: 300; color: #707070; text-transform: none; }
html { width: 100%; height: 100%; -webkit-text-size-adjust: none; }
body { width: 100%; height: 100%; font: 400 16px/120% 'S-Core Dream', sans-serif; word-break: keep-all; -webkit-overflow-scrolling: touch;  overflow-x: hidden;}
h1, h2, h3, h4, h5, h6 { display: block; line-height: 100%; }
b, strong { font-weight: 700; }
i, em, address { font-style: normal; }
input, select, textarea, button, label { color: inherit; font-family: inherit; font-size: 100%; vertical-align: middle; border-radius: 0; box-shadow: 0; outline: none; -webkit-appearance: none; appearance: none; }
select::-ms-expand { display:none; }
textarea { resize: none; }
label { cursor: pointer; }
fieldset, img, iframe { border: none; }
img { vertical-align: top; outline: none; }
a { color: inherit; text-decoration: none; }
a:hover, a:active, a:visited { text-decoration: none; }
menu, li { list-style: none; }
button { font-family: inherit; cursor: pointer; vertical-align: middle; background: none; }
caption { width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; visibility: hidden; }
table { width: 100%; border-spacing: 0; }
th, td { font-weight: normal; }
mark { background: none; }
canvas { display: block; width: 100%; height: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
hr { display: none; }


/****************************** COMMON ******************************/

.container { position: relative; width: 100%; padding-top: 137px; overflow: hidden;}
.wrap { position: relative; width: 100%; height: 100%; }
.inner { display: block; width: 100%; max-width: 1200px;  padding: 0 12px; margin: 0 auto; }

.hide { display: none !important; }
.overflow { overflow: hidden !important; }

.fl { float: left !important; }
.fr { float: right !important; }
.cb { clear: both !important; }
.tl { text-align: left !important}
.tr { text-align: right !important}
.tc { text-align: center !important}

.after::after{
    display: block;
    content: "";
    clear: both;
}

.tof {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tof2 {
    white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 1.5; 
}
.tof3 {
    white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 1.5;
}

.tof5 {
    white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
	/* line-height: 1.5; */
}

/* bx-slider */
.bx-wrapper { position: relative; width: 500px !important; height: 500px !important; }
.bx-wrapper .bx-viewport { display: block; width: 500px !important; height: 500px !important; }
.bx-prev { position: absolute; left: 50%; margin-left: -700px; top: 50%; margin-top: -35px; z-index: 100; display: inline-block; overflow: hidden; width: 40px; height: 70px; text-indent: -9999px; background: url("/resources/img/talks/bt_slide_prev.png") no-repeat center 50%; opacity: 0.6; }
.bx-prev:hover { opacity: 1; }
.bx-next { position: absolute; right: 50%; margin-right: -700px; top: 50%; margin-top: -35px; z-index: 100; display: inline-block; overflow: hidden; width: 40px; height: 70px; text-indent: -9999px; background: url("/resources/img/talks/bt_slide_next.png") no-repeat center 50%; opacity: 0.6; }
.bx-next:hover { opacity: 1; }
.bx-pager { position: absolute; right: 50%; margin-right: -590px; bottom: 10px; z-index: 50; display: table; }
.bx-pager-item { display: table-cell; width: 25px; height: 26px; font-size: 0; vertical-align: bottom; }
.bx-pager-link { display: block; overflow: hidden; float: right; width: 15px; height: 15px; border-radius: 7.5px; background-color: #fff; transition: all 0.3s; }
.bx-pager-link.active { height: 100%; }


/* pd mg */

.pl110{
    padding-left: 110px;
}

.pl20{
    padding-left:20px;
}

.mt10{
    margin-top: 10px;
}
.mt20{
    margin-top: 20px;
}

.mt30{
    margin-top: 30px;
}

.mt40{
    margin-top: 40px;
}

.mt50{
    margin-top: 50px;
}

.mt70{
    margin-top: 70px;
}


.mt100{
    margin-top: 100px;
}

.mb10{
    margin-bottom: 10px;
}

.mb20{
    margin-bottom: 20px;
}

.mb30{
    margin-bottom: 30px;
}

.mb50{
    margin-bottom: 50px;
}

.mb60{
    margin-bottom: 60px;
}

.mb70{
    margin-bottom: 70px;
}

.mb100{
    margin-bottom: 100px;
}

.mb140{
    margin-bottom: 140px;
}

.mr10{
    margin-right: 10px;
}
/* ----------------------------------------------------------------star -------------- */

.star::after {
    content: '*';
    position: absolute;
    color: #f06e64;
    padding-left: 5px;
    font-weight: 500;
}

/****************************** BUTTON ******************************/

/* BT_TXT */
.btTxt { position: relative; display: inline-block; overflow: hidden; min-width: 200px; height: 50px; line-height: 50px; color: #fff; font-size: 16px; font-weight: 400; text-align: center; border-radius: 8px; background-color: #b7b7b7; vertical-align: middle; padding: 0 15px; }
.btTxt input { position: absolute; top: 0; bottom: 0; left: -100px; right: 0; z-index: 5; display: block; width: auto; height: 100%; opacity: 0; }
.btTxt input:hover { cursor: pointer; }

.btTxt.prev{
    color: #000;
    height: 50px;
    line-height: 50px;
    width: 175px;
    min-width: 175px;
    padding: 0;
    text-align: left;
}

.btTxt.prev .ico{
    height: 15px;
}

.btTxt .ico { position: relative; width: auto; height: 100%; text-indent: 0; padding-left: 25px; }
.btTxt .ico.view { background: url("/resources/img/talks/ico_view.png") no-repeat 0 50%; }
.btTxt .ico.have { background: url("/resources/img/talks/ico_have.png") no-repeat 0 50%; }
.btTxt .ico.rental { background: url("/resources/img/talks/ico_rental.png") no-repeat 0 50%; }
.btTxt .ico.heart { background: url("/resources/img/talks/ico_like.png") no-repeat 0 50%; }
.btTxt .ico.edit { background: url("/resources/img/talks/bt_edit.png") no-repeat 0 50%; background-size: 13px; padding-left: 18px; }
.btTxt .ico.del { background: url("/resources/img/talks/bt_delete.png") no-repeat 0 50%; background-size: 13px; padding-left: 18px; }
.btTxt .ico.scrap { color: #448ccb; font-weight: 400; background: url("/resources/img/talks/ico_scrap.png") no-repeat 0 50%; background-size: 13px; padding-left: 18px; }
.btTxt .ico.prev { padding-left: 15px; }
.btTxt .ico.prev::before { position: absolute; left: 2px; top: 50%; margin-top: -4px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(-135deg); }
.btTxt .ico.next { padding: 0; padding-right: 15px; }
.btTxt .ico.next::before { position: absolute; right: 2px; top: 50%; margin-top: -4px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); }

.btTxt.exp{background: #0b3b65; color: #fff; }
.btTxt .ico.rental.exp{padding-left: 20px; font-size: 14px;}

.btTxt.s { color: #fff; background-color: #6eb92c; }
.btTxt.s .ico.next::before { border-top: 2px solid #fff; border-right: 2px solid #fff; }
.btTxt.ss { color: #fff; background-color: #366999; }
.btTxt.m { color: #fff; background-color: #f4792a; }

.btTxt.dis,
.btTxt:disabled { border-color: #787878; background-color: #787878; cursor: default; }

.btTxt.fr + .btTxt.fr { margin-right: 10px; }


.btMy {
    display: inline-block;
    overflow: hidden;
    width: 45px;
    height: 45px;
    background: url(/resources/img/talks/bt_menu.png) no-repeat center 50%;
    background-size: auto 20px;
    text-indent: -9999px;
    display: none;
}

.pop_bt{
    width: 160px;
    height: 40px;
    border-radius: 20px;    
    background: #6eb92c;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: middle;
    font-size: 16px; 
    font-weight: 400; 
}

.pop_bt2{
    width: 120px;
    height: 40px;
    border-radius: 20px;    
    background: #6eb92c;
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: middle;
    font-size: 16px; 
    font-weight: 400; 
}

.pop_bt.c{
    background: #ececec;
    color: #000;
}

.pop_bt.gray{
    background: #ececec;
    color: #000;
} 

.pop_bt.gray.on{
    background: #6eb92c;
    color: #fff;
}

.pop_bt2.c{
    background: #ececec;
    color: #000;
}

.pop_bt.mini{
    background: #396999;
    color: #fff;
    border-radius: 8px;
    width: 80px;
    margin-left: 10px;
}

.pop_bt.p{
    background: #cc5ba7;
    width: 120px;
}

.pop_bt.p.d{
    background: #ececec;
    color: #000;
    width: 120px;
}

.pop_bt.wi02.p{
    background: #cc5ba7;
}

.pop_bt.b{
    background: #448ccd;
    width: 120px;
}

.pop_bt.num{
    width: 120px;
}

.complete_bt{
    color: #fff;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.pop_prev_bt{
    color: #fff;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
}

.st_title{
    position: relative;
}

.st_title .btMore{
    vertical-align: baseline;
}

.st_title .btMore i{
    line-height: unset;
    height: auto;
}

.st_title  .al{
    position: absolute;
    display: inline-block;
    z-index: 5;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: -2px;
    background: #ed1c24;
    line-height: 20px;
    text-align: center;
    color: #fff;
    right: 5px;
    font-size: 14px;
}

.btns .pop_bt ~ .pop_bt {
    margin-left: 10px;
}

.btns .pop_bt2 ~ .pop_bt2 {
    margin-left: 10px;
}

.attach > .btTxt.file{
    width: 140px;
    background: #448ccd;
    border-radius: 20px;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    min-width: 140px;
    bottom: 102%;
}

/* BT_WRITE */
.btWrite { display: inline-block; overflow: hidden; min-width: 100px; height: 34px; line-height: 34px; color: #fff; font-size: 15px; font-weight: 300; text-align: center; border-radius: 20px; background-color: #f4792a; vertical-align: middle; padding: 0 15px; }

/* BT_DELETE */
.btDelete { display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("/resources/img/talks/bt_delete.png") no-repeat center 50%; background-size: auto 20px; text-indent: -9999px; }
.thr { display: inline-block; overflow: hidden; width: 35px; height: 25px; background: url("/resources/img/talks/bt_delete.png") no-repeat center 50%; background-size: auto 20px; text-indent: -9999px; margin-top: -10px;}



/* BT_MY */
.btMy { display: inline-block; overflow: hidden; width: 45px; height: 45px; background: url("/resources/img/talks/bt_menu.png") no-repeat center 50%; background-size: auto 20px; text-indent: -9999px; }

/* BT_FINDER */
.btFinder { display: inline-block; overflow: hidden; width: 45px; height: 45px; background: #ececec url(/resources/img/talks/bt_find.png) no-repeat center 50%; background-size: auto 25px; text-indent: -9999px; border-radius: 50%; }

/* BT_OUT */
.btOut { display: block; overflow: hidden; text-align: center; background-color: #e8e8e8; }
.btOut i { display: inline-block; height: 46px; line-height: 46px; color: #323232; font-size: 14px; background: url("/resources/img/talks/bt_out.png") no-repeat 0 50%; padding-left: 20px;  background-size: 16px;}

/* BT_USER */
.btUser { position: relative; display: inline-block; overflow: visible; width: 45px; height: 45px; cursor: pointer; }
.btUser::before { position: absolute; top: 100%; left: 0; right: 0; z-index: 101; content: ""; display: none; width: 100%; height: 16px; background: url("/resources/img/talks/ico_user_acc.png") no-repeat center bottom; }
.btUser > i { position: relative; display: block; overflow: hidden; width: 45px; height: 45px; border-radius: 50%; background: #0b3b65 url("/resources/img/talks/ico_user.png") no-repeat center 50%; text-indent: -9999px; }
.btUser .dropBox { position: absolute; right: 50%; margin-right: -60px; top: 100%; z-index: 100; display: none; width: 120px; border: 1px solid #e3e3e3; background-color: #fff; margin-top: 15px; }
.btUser .dropBox li { position: relative; display: block; overflow: hidden; color: #000; font-size: 12px; font-weight: 300; line-height: 150%; text-align: center; padding: 10px 15px; }
.btUser .dropBox li::before { position: absolute; top: 0; left: 10px; right: 10px; content: ""; display: block; width: auto; height: 1px; background-color: #d7d7d7; }
.btUser .dropBox li:first-of-type::before,
.btUser .dropBox li:last-of-type::before { display: none; }
.btUser .dropBox li strong { display: block; font-size: 18px; font-weight: 300; padding: 5px 0; }
.btUser .dropBox li b { display: block; color: #448ccb; font-weight: 400; }
.btUser .dropBox li .go { display: block; height: 22px; line-height: 22px; font-weight: 400; border-radius: 11px; background-color: #e2e2e2; margin-top: 5px; }
.btUser .dropBox li .book { width: 100%; margin-top: 5px; }
.btUser .dropBox li .book .pic { height: auto; border: 0; }
.btUser .dropBox li .book .tit { display: block; height: 30px; color: #555; font-size: 12px; white-space: nowrap; margin-top: 0; }
.btUser .dropBox li:last-of-type { padding: 0; }
.btUser.on::before,
.btUser.on .dropBox { display: block; }

/* BT_MEMU */
.btMenu { position: relative; display: inline-block; overflow: visible; width: 180px; height: 35px; vertical-align: middle; }
.btMenu i { position: relative; display: block; overflow: visible; height: 35px; line-height: 34px; color: #000; font-size: 16px; border: 1px solid #6eb92c; border-radius: 10px; padding: 0 40px 0 20px; }
.btMenu i::before { position: absolute; right: 20px; top: 8px; content: ""; display: block; width: 10px; height: 10px; border: 2px solid transparent; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(135deg); }
.btMenu .dropBox { position: absolute; left: 0; right: 0; top: 100%; z-index: 90; display: none; border: 1px solid #6eb92c; border-top: 0; border-radius: 0 0 10px 10px; background-color: #fff; padding: 15px 20px; }
.btMenu .dropBox::before { position: absolute; top: 0; left: 5px; right: 5px; content: ""; display: block; width: auto; height: 1px; background-color: #6eb92c; }
.btMenu .dropBox li { display: block; overflow: hidden; color: #000; font-size: 14px; font-weight: 300; line-height: 120%; text-align: left; padding: 5px 0; margin-top: 10px; }
.btMenu .dropBox li.mg0 { margin: 0; }
.btMenu .dropBox li:first-of-type { margin: 0; }
.btMenu:hover { cursor: pointer; }
.btMenu.on i { border-bottom: 0; border-radius: 10px 10px 0 0; }
.btMenu.on i::before { top: 16px; transform: rotate(-45deg); }
.btMenu.on .dropBox { display: block; }

/* BT_EBOOK */
.btEbook { position: relative; display: inline-block; overflow: hidden; width: 190px; height: 35px; line-height: 34px; color: #000; font-size: 16px; border: 1px solid #6eb92c; border-radius: 10px; background: url("/resources/img/talks/ic_sbgo.png") no-repeat 15px 50%; background-size: auto 20px; padding-left: 45px; vertical-align: middle; }

/* BT_MORE */
.btMore { display: inline-block; overflow: hidden; font-size: 0; vertical-align: middle; }
.btMore i { position: relative; display: block; height: 35px; line-height: 35px; color: #959595; font-size: 17px; font-weight: 300; padding-right: 15px; }
.btMore i::before { position: absolute; right: 2px; top: 50%; margin-top: -5px; content: ""; display: block; width: 9px; height: 9px; border: 2px solid transparent; border-top: 2px solid #959595; border-right: 2px solid #959595; transform: rotate(45deg); }

/* BT_FOLD */
.btFold { display: inline-block; overflow: hidden; font-size: 0; vertical-align: middle; }
.btFold i { position: relative; display: block; height: 35px; line-height: 35px; color: #000; font-size: 16px; font-weight: 300; padding-left: 25px; }
.btFold i::before { position: absolute; left: 2px; top: 50%; margin-top: -3px; content: ""; display: block; width: 10px; height: 10px; border: 2px solid transparent; border-top: 2px solid #221f1f; border-right: 2px solid #221f1f; transform: rotate(-45deg); }

/* BT_TIP */
.btTip { position: relative; display: inline-block; overflow: visible; width: 30px; height: 30px; border-radius: 50%; background: #ebebeb url("/resources/img/talks/ico_question.png") no-repeat center 50%; top: -4px;  background-size: 10px; }
.btTip span { position: absolute; left: calc(100% + 10px); top: 0; z-index: 200; display: none; height: auto; min-height: 35px; color: #0a3b64 !important; font-size: 15px; font-weight: 300; line-height: 20px; text-align: left; white-space: nowrap; border-radius: 5px; background-color: #fdde61; padding: 7.5px 15px; cursor: default; }
.btTip span::before { position: absolute; left: -11px; top: 8px; content: ""; display: block; width: 0; height: 0; border: 5px solid transparent; border-right: 7px solid #fdde61; }
.btTip.on span { display: block; }

.btTip.sj{
    display: none;
}

/* BT_GUIDE */
.btGuide { position: relative; display: inline-block; overflow: hidden; height: 30px; line-height: 30px; color: #f4792a; font-size: 14px; text-align: left; vertical-align: middle; padding-left: 40px; }
.btGuide::before { position: absolute; left: 0; top: 0; content: ""; display: inline-block; overflow: hidden; width: 30px; height: 30px; border-radius: 50%; background: #e6e7e8 url("/resources/img/talks/ico_guide.png") no-repeat center 50%; background-size: 3px; vertical-align: middle; }

/* BT_CARD */
.btCard { position: relative; display: inline-block; overflow: hidden; width: 43px; height: 43px; border-radius: 5px; background: #7ca7d9 url("/resources/img/talks/bt_card.png") no-repeat center 50%; background-size: 100%; text-indent: -9999px; vertical-align: middle; margin: 0 6px; }

/* BT_VIEW */
.btView { position: relative; display: inline-block; overflow: hidden; width: 43px; height: 43px; border-radius: 5px; background: #f6905a url("/resources/img/talks/bt_view.png") no-repeat center 50%; background-size: 100%; text-indent: -9999px; vertical-align: middle; margin: 0 6px; }

/* BT_SEE */
.btSee { position: relative; display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("/resources/img/talks/bt_book_see.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }

.btSee.on { position: relative; display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("/resources/img/talks/bt_book_see_on.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }

/* BT_DOWN */
.btDown { position: relative; display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("/resources/img/talks/bt_book_down.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }

.btDown.on { position: relative; display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("/resources/img/talks/bt_book_down_on.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }

/* BT_LIKE */
.btLike { position: relative; display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("/resources/img/talks/bt_book_like.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }
.btLike.on { background-image: url("/resources/img/talks/bt_book_like_on.png"); }

/* BT_BANNER */
.btBnr { position: relative; display: block; overflow: hidden; width: 90px; height: 90px; vertical-align: middle; }
.btBnr i { display: block; height: 100%; line-height: 100%; border: 45px solid transparent; border-bottom: 45px solid rgba(256,256,256,0.2); border-right: 45px solid rgba(256,256,256,0.2); text-indent: -9999px; }
.btBnr i::before { position: absolute; bottom: 5px; right: 5px; content: ""; display: block; width: 30px; height: 30px; background: url("/resources/img/talks/bt_bnr.png") no-repeat center 50%; }
.btBnr.on i { border: 45px solid transparent; border-top: 45px solid rgba(256,256,256,0.2); border-left: 45px solid rgba(256,256,256,0.2); }
.btBnr.on i::before { bottom: auto; right: auto; top: 5px; left: 5px; background-image: url("/resources/img/talks/bt_bnr_on.png"); }

/* BT_LIST */
.btList { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
.btList i { display: inline-block; float: left; width: 40px; height: 30px; border-radius: 15px; background: #e2e2e2 url("/resources/img/talks/bt_list_on.png") no-repeat center 50%; text-indent: -9999px; cursor: pointer; }
.btList i:first-of-type { background: #396999 url("/resources/img/talks/bt_list_w.png") no-repeat center 50%; margin-right: 5px; }
.btList.on i { background: #396999 url("/resources/img/talks/bt_list_on_w.png") no-repeat center 50%; }
.btList.on i:first-of-type { background: #e2e2e2 url("/resources/img/talks/bt_list.png") no-repeat center 50%; }

/* BT_DROP */
.btDrop { display: inline-block; overflow: hidden; vertical-align: middle; }
.btDrop i { position: relative; display: block; width: 35px; height: 35px; overflow: hidden; text-indent: -9999px; }
.btDrop i::before { position: absolute; left: 50%; margin-left: -3.5px; top: 50%; margin-top: -7px; content: ""; display: block; overflow: hidden; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(135deg); }
.btDrop.on i::before { margin-top: -1px; transform: rotate(-45deg); }

/* BT_CLOSE */
.btClose { display: block; width: 40px; height: 40px; overflow: hidden; }
.btClose i { position: relative; display: block; width: 100%; height: 100%; text-indent: -9999px; }
.btClose i::before { position: absolute; top: 50%; left: 50%; margin-top: -11px; content: ""; display: block; overflow: hidden; width: 1px; height: 23px; background-color: #000; transform: rotate(-45deg); }
.btClose i::after { position: absolute; top: 50%; left: 50%; margin-top: -11px; content: ""; display: block; overflow: hidden; width: 1px; height: 23px; background-color: #000; transform: rotate(45deg); }

/* BT_NEXT */
.btNext { display: inline-block; overflow: hidden; width: 20px; height: 40px; background: url("/resources/img/talks/bt_next.png") no-repeat center 50%; text-indent: -9999px; opacity: 0.3; }
.btNext:hover { opacity: 1; }
.btNext:disabled { opacity: 0.1; }

/* BT_PREV */
.btPrev { display: inline-block; overflow: hidden; width: 20px; height: 40px; background: url("/resources/img/talks/bt_prev.png") no-repeat center 50%; text-indent: -9999px; opacity: 0.3; }
.btPrev:hover { opacity: 1; }
.btPrev:disabled { opacity: 0.1; }

/* BT_FIND */
.btFind { display: block; overflow: hidden; width: 45px; height: 45px; border-radius: 50%; background: url("/resources/img/talks/bt_find.png") no-repeat center 50%; background-size: 22px; text-indent: -9999px; vertical-align: middle; margin: auto; }

/* BT_FILTER */
.btSearch { display: block; overflow: hidden; width: 90px; height: 45px; border: 1px solid #a1a1a1; border-radius: 25px; background: #a1a1a1 url("/resources/img/talks/ico_filter.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; margin: auto; }

/* BT_SORT */
.btSort { display: block; overflow: hidden; width: 50px; height: 30px; border-radius: 15px; background: #e2e2e2 url("/resources/img/talks/ico_sort.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }

/* BT_DELETE */
.btDel { display: inline-block; overflow: hidden; width: 20px; height: 20px; background: url("/resources/img/talks/bt_x.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; margin: auto; }


/* BT_CATEGORY */
.btCategory { display: block; overflow: hidden; width: 100%; text-align: center; background-color: #3f71ae; margin: 50px 0; }
.btCategory i { position: relative; display: inline-block; height: 50px; line-height: 50px; color: #fff; font-size: 16px; font-weight: 300; padding-left: 20px; }
.btCategory i::before { position: absolute; left: 2px; top: 50%; margin-top: -7px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); }
.btCategory.on { background-color: #acacac; margin-top: 0; }
.btCategory.on i::before { margin-top: -3px; transform: rotate(-45deg); }


/* BT_BACK */
.btBack { display: inline-block; overflow: hidden; font-size: 0; vertical-align: middle; }
.btBack i { position: relative; display: block; width: 35px; height: 35px; text-indent: -9999px; margin: auto; }
.btBack i::before { position: absolute; left: 40%; top: 50%; margin-top: -8px; content: ""; display: block; width: 15px; height: 15px; border: 2px solid transparent; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(-135deg); }


/* BT_STAR */
.btStar { display: block; overflow: hidden; width: 100px; height: 50px; line-height: 50px; color: #000; font-size: 16px; text-align: center; border-radius: 5px; background-color: #e2e2e2; vertical-align: middle; }
.btStar.on { color: #fff; background-color: #f47929; }




/****************************** COMPONENT ******************************/

/* TEXTAREA */
.textarea { display: inline-block; overflow: auto; width: 100%; height: 140px; color: #646464; font-size: 15px; line-height: 24px; text-align: left; vertical-align: middle; border: 1px solid #d7d7d7; background-color: #fff; padding: 15px 10px; }


/* INPUT */
.input { position: relative; display: inline-block; overflow: hidden; width: 150px; height: 40px; line-height: 38px; color: #646464; font-size: 15px; text-align: left; vertical-align: middle; border: 1px solid #d7d7d7; background-color: #f5f5f5; padding: 0 10px; }



/* SELECT */
.select { position: relative; display: inline-block; overflow: visible; vertical-align: middle; }
.select > label { position: relative; display: block; overflow: hidden; width: 100%; height: 40px; line-height: 38px; color: #646464; font-size: 14px; text-align: left; border: 1px solid #d7d7d7; background-color: #f5f5f5; padding: 0 30px 0 10px; transition: all 0.2s ease; }
.select > label::after { position: absolute; right: 6px; top: 50%; margin-top: -6px; z-index: 2; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #221f1f; border-right: 2px solid #221f1f; transform: rotate(135deg); }
.select select { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; display: block; width: 100%; height: 100%; color: #646464; font-size: 13px; font-weight: 350; padding: 0 20px; opacity: 0; }
.select .drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; display: none; overflow: hidden; width: 100%; background-color: #fff; }
.select .drop .check { display: block; width: 100%; }

.popup.search .select > label::after {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
    z-index: 2;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid transparent;
    border-top: 2px solid #221f1f;
    border-right: 2px solid #221f1f;
    transform: rotate(
135deg
);
}

/* CHECKBOX */
.check { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; }
.check input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; display: block; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.check label { position: relative; display: block; overflow: hidden; width: 100%; height: 30px; line-height: 30px; color: #707070; font-size: 15px; font-weight: 400; text-align: left; padding-left: 20px; }
.check label::before { position: absolute; left: 0; top: 50%; margin-top: -8px; z-index: 1; content: ""; display: block; width: 30px; height: 30px;  background-color: #ececec; }
.check label::after { position: absolute; left: 8px; top: 50%; margin-top: -9px; z-index: 2; content: ""; display: none; overflow: hidden; width: 23px; height: 11px; border-top: 2px solid #787878; border-right: 2px solid #787878; transform: rotate(135deg); }
.check input:checked ~ label::before { border-color: #0a3b64; background-color: #0a3b64; }
.check input:checked ~ label::after { display: block; }

.step_box .facet_sc_box .check label::after{
    left: 14px;
}

.step_box .check label{
    padding-left: 25px;
}
.step_box .check input:checked ~ label::before {
    border: 1px solid #b4b4b4;
    background-color: #ffffff;
}

.step_box .check label::before{
    width: 20px;
    height: 20px;
    margin-top: -9.5px;
}

.step_box .check label::after{
    left: 0px;
}

.step_box .check label::before { position: absolute; left: 0; top: 50%; margin-top: -9.5px; z-index: 1; content: ""; display: block; width: 20px; height: 20px;  background-color: #fff; border: 1px solid #b4b4b4;}

/* CHECKBOX : RADIO */
.check.radio label::before { border-radius: 50%; }
.check.radio label::after { margin-top: -1px; width: 15px; height: 15px; border: 0; border-radius: 50%; background-color: #396999; transform: none; }
.check.radio input:checked ~ label::before { border-color: #ececec; background-color: #ececec; }

/* CHECKBOX : NO TEXT */
.check.noTxt label { width: 30px; text-indent: -9999px; padding: 0; }
.check.noTxt label::before { left: 5px; margin-top: -10px; width: 20px; height: 20px; }
.check.noTxt label::after { left: 14px; }
.check.radio.noTxt label::after { left: 9px; margin-top: -6px; width: 12px; height: 12px; }

/* CHECKBOX : ONOFF */
.check.onoff label { padding: 0; padding-right: 90px; }
.check.onoff label::before { left: auto; right: 0; margin-top: -15px; width: 85px; height: 30px; border: 0; border-radius: 15px; background-color: #e2e2e2; text-indent: 0; padding: 0 8px 0 5px; transition: all 0.3s ease; }
.check.onoff label::after { left: auto; right: 30px; margin-top: -15px; content: "OFF"; display: block; width: 55px; height: 30px; line-height: 31px; color: #fff; font-size: 16px; font-weight: 300; text-align: center; border: 0; border-radius: 15px; background-color: #808080; transform: none; opacity: 1; transition: all 0.3s ease; }
.check.onoff input:checked ~ label::before { background-color: #e2e2e2; }
.check.onoff input:checked ~ label::after { content: "ON"; right: 0; font-weight: 500; background-color: #396999; }



/* FIND */
.find { position: relative; display: inline-block; overflow: hidden; font-size: 0; vertical-align: middle; }
.find .input { width: 100%; padding-right: 45px; }
.find .btFind { position: absolute; right: 0; top: 50%; margin-top: -22.5px; }
.find .btSearch { float: right; }
.find .btSearch ~ .input { width: calc(100% - 100px); float: left; }
.find .btSearch ~ .btFind { right: 120px; }


/* FIELD */
.field { position: relative; display: block; overflow: visible; width: 100%; }
.field .input { float: left; width: 80%; }
.field .select { float: left; width: 20%; }
.field .select:first-of-type label { border-right: 0; }
.field .select + .input { border-left: 0; }
.field .btFind { position: absolute; top: 0; right: 0; z-index: 10; width: 40px; height: 40px; border-radius: 0; background: #448ccb url("/resources/img/talks/bt_find_w.png") no-repeat center 50%; background-size: 18px; }

.field.date::before { position: absolute; left: 27%; top: 0; content: "~"; display: block; width: 6%; height: 30px; line-height: 30px; color: #000; font-size: 14px; text-align: center; }
.field.date .input { width: 27%; }
.field.date .input ~ .input { margin-left: 6%; }
.field.date .btns.set { float: right; width: calc(40% - 10px); margin-left: 10px; }



/****************************** UNIT ******************************/

/* ICON */
.ico { display: inline-block; overflow: hidden; width: 30px; height: 30px; text-indent: -9999px; }
.ico.ebook { background: url("/resources/img/talks/ico_ebook.png") no-repeat center 50%; background-size: 100%; }
.ico.home { background: url("/resources/img/talks/ico_home.png") no-repeat center 50%; }
.ico.clip { background: url("/resources/img/talks/ico_clip.png") no-repeat 0 50%; background-size: 20px; }
.ico.file { background: url("/resources/img/talks/ico_file.png") no-repeat center 50%; }
.ico.link { background: url("/resources/img/talks/ico_link.png") no-repeat 0 50%; background-size: 20px; }

/* MARK */
.mark { display: block; overflow: hidden; width: 100%; height: 20px; line-height: 19px; color: #fff; font-size: 13px; font-weight: 300; text-align: center; border-radius: 10px; background-color: #505050; }

/* KEY */
.key { display: inline-block; overflow: hidden; color: #f4792a; font-size: 16px; line-height: 150%; text-align: left; padding: 5px 0; }
.key::after { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #e2e2e2 url("/resources/img/talks/bt_x.png") no-repeat center 50%; vertical-align: text-top; margin-left: 10px; }

/* PATH */
.path { display: block; overflow: hidden; background: #f9f9f9 url("/resources/img/talks/bg_line.png"); padding: 10px 0; }
.path p { height: 30px; line-height: 31px; color: #000; font-size: 14px; text-align: left; }
.path .ico { vertical-align: top; }

/* BOOK */
.book { position: relative; display: inline-block; overflow: visible; vertical-align: middle; }
.book .typ { display: block; height: 30px; color: #fff799; font-size: 18px; font-weight: 500; }
.book .ctg { display: table; width: 100%; height: 52px; font-size: 0; }
.book .ctg .wrap { display: table-cell; text-align: left; vertical-align: bottom; }
.book .ctg i { display: inline-block; width: 45px; height: 22px; line-height: 22px; color: #fff; font-size: 12px; text-align: center; border-radius: 3px; margin: 0 4px 4px 0; vertical-align: middle; }
.book .ctg i.ct1 { background-color: #7da7d9; }
.book .ctg i.ct2 { background-color: #8fc587; }
.book .ctg i.ct3 { background-color: #f5999e; }
.book .ctg i.ct4 { background-color: #b8b8b8; }
.book .pic { position: relative; display: block; overflow: hidden; width: 100%; height: 250px; border: 1px solid #e2e2e2; cursor: pointer; }
.book .pic img { width: 100%; height: 100%; }
.book .pic .icon { position: absolute; top: 5px; left: 5px; z-index: 1; font-size: 0; }
.book .pic .icon .ico.ebook { width: 22px; height: 22px; }
.book .pic .check { position: absolute; top: 5px; left: 5px; }
.book .pic .btns { display: block; bottom: auto; left: 0; right: 0; top: 50%; margin-top: 0; opacity: 0; transition: all 0.3s; }
.book .pic:hover .btns { margin-top: -21px; opacity: 1; }
.book .pic ~ .ctg { display: none; height: auto; }
.book .tit { display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 60px; overflow: hidden; color: #323232; font-size: 20px; font-weight: 300; line-height: 30px; text-align: left; text-overflow: ellipsis; white-space: normal; margin-top: 10px; }
.book .tit em { display: block; color: #898989; font-size: 16px; }
.book .tit mark { display: block; color: #0072bc; font-size: 18px; }
.book .tit.recom { position: relative; padding-left: 25px; }
.book .tit.recom::before { position: absolute; left: 0; top: 25px; content: ""; display: block; width: 0; height: 0; border: 9px solid #6cb82c; border-bottom: 5px solid transparent; }
.book .tit.recom::after { position: absolute; left: 0; top: 0; content: "이슈"; display: block; width: 18px; height: 30px; color: #fff; font-size: 12px; font-weight: 200; line-height: 100%; text-align: center; word-break: break-all; background-color: #6cb82c; padding-top: 5px; }
.book .txt { display: block; overflow: hidden; color: #323232; font-size: 16px; font-weight: 300; line-height: 120%; margin-top: 20px; }
.book .more { display: block; overflow: hidden; text-align: center; padding-top: 15px; }
.book .more a { display: inline-block; color: #0072bc; font-size: 16px; font-weight: 300; line-height: 100%; border-bottom: 1px solid #0072bc; }
.book .info { display: none; color: #000; font-size: 18px; font-weight: 300; line-height: 150%; margin-top: 10px; }
.book .info + .btTxt { margin-top: 20px; }
.book .info + .btTxt.on { color: #fff; background-color: #0b3b65; }
.book .word { position: absolute; left: 220px; right: 0; bottom: 70px; display: none; color: #0072bc; font-size: 16px; }
.book .word .btTxt { color: #0072bc; margin: 10px; margin-left: 0; }
.book .word ~ .con { bottom: 0; }
.book .con { position: absolute; left: 220px; right: 0; bottom: 45px; display: none; /*display: -webkit-box;*/ -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 60px; overflow: hidden; color: #7d7d7d; font-size: 14px; font-weight: 400; line-height: 20px; text-overflow: ellipsis; white-space: normal; }
.book .intro { position: absolute; left: 250px; right: 0; bottom: 0; display: block; overflow: hidden; }
.book .intro dt { display: inline-block; overflow: hidden; float: left; width: 90px; color: #323232; font-size: 16px; font-weight: 500; line-height: 20px; text-align: left; margin-top: 15px; }
.book .intro dd { display: block; overflow: hidden; color: #323232; font-size: 16px; line-height: 20px; text-align: left; margin-top: 15px; }/*
.book .intro dd .select { display: block; width: 100%; }
.book .intro dd .select label { color: #000; font-size: 16px; line-height: 20px; border: 0; background: none; padding: 0; }
.book .intro dd .select label::after { display: none; }*/
.book .intro dd.drop { position: relative; height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; padding-right: 25px; cursor: pointer;}
.book .intro dd.drop::before { position: absolute; right: 0; bottom: 0; z-index: 1; content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #7bbf3e; }
.book .intro dd.drop::after { position: absolute; right: 6px; bottom: 8px; z-index: 2; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); }
.book .intro dd.drop.on::after { bottom: 4px; transform: rotate(-45deg); }
.book .btns { position: absolute; bottom: 0; left: 220px; display: none; padding: 0; }
.book .btBlank { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: none; width: 100%; height: 100%; text-indent: -9999px; }
.book .btGuide { position: absolute; right: 0; bottom: 0; }

.book.bnt .intro{
    bottom: 55px;
}

/* RENT */
.rent { position: relative; clear: both; display: block; overflow: visible; color: #000; font-size: 15px; line-height: 18px; text-align: right; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; padding-top: 10px; margin: 10px 0 80px 0; }
.rent::before { position: absolute; left: 0; right: 0; top: -11px; content: ""; display: block; width: 100%; height: 11px; background: url("/resources/img/talks/ico_user_acc.png") no-repeat center 0; }
.rent .btTxt { width: calc(50% - 3px); min-width: auto; }
.rent .btTxt.s { width: 100%; margin-bottom: 6px; }
.rent .btns { text-align: left; padding: 10px 0; }
.rent .btns .btTxt ~ .btTxt { margin: 0; margin-right: 6px; }
.rent .btns .btTxt:last-child { margin: 0; }

/* REPORT */
.report { position: relative; display: block; overflow: hidden; margin-top: 30px; }
.report .tit { display: block; overflow: hidden; color: #000; font-size: 22px; font-weight: 300; line-height: 120%; text-align: left; border-top: 1px solid #396999; border-bottom: 1px solid #396999; padding: 35px 0; }
.report .tit em { display: block; font-size: 14px; padding-bottom: 10px; }
.report .pic { display: table; width: 100%; height: 180px; background-color: #ececec; margin-top: 20px; }
.report .pic img { height: 180px; }
.report .pic .wrap { display: table-cell; color: #898989; font-size: 14px; line-height: 26px; text-align: left; vertical-align: middle; padding: 25px; }
.report .pic .wrap strong { color: #448ccb; font-size: 20px; font-weight: 400; }
.report .con { display: block; overflow: hidden; color: #000; font-size: 14px; line-height: 28px; text-align: left; padding: 50px 0; }
.report .re { display: block; overflow: hidden; height: 50px; line-height: 50px; color: #000; font-size: 14px; text-align: right; border-top: 6px solid #ececec; background: url("/resources/img/talks/ico_reply.png") no-repeat right 50%; padding-right: 50px; }
.report .btns { text-align: right; border-bottom: 1px solid #d7d7d7; padding: 30px 0 10px 0; }

/* CATE */
.cate { position: relative; display: inline-block; width: 400px; height: 400px; }
.cate .pic { position: relative; display: block; width: 100%; height: 240px; }
.cate .pic img { width: 100%; height: 100%; }
.cate .tit { display: block; height: 65px; overflow: hidden; color: #000; font-size: 22px; font-weight: 300; line-height: 65px; text-align: center; text-overflow: ellipsis; white-space: nowrap; background-color: #ececec; padding: 0 15px; }
.cate .tit b { font-size: 24px; font-weight: 500; }
.cate .txt { position: relative; display: block; width: 100%; height: calc(100% - 240px); color: #000; font-size: 18px; font-weight: 300; line-height: 150%; text-align: left; vertical-align: middle; background-color: #ececec; padding: 15px 20px; }
.cate .txt strong { position: absolute; bottom: 100%; left: 0; right: 0; display: block; height: 60px; line-height: 60px; color: #fff; font-size: 40px; font-weight: 500; padding: 0 20px; }

/* CARD */
.card { display: table; width: 500px; height: 500px; margin: auto; }
.card .pic { display: table-row; width: 100%; height: 1%; }
.card .pic img { width: 100%;  height: 100%;}
.card .txt { display: table-row; width: 100%; height: 99%; color: #3d2926; font-size: 17px; font-weight: 300; line-height: 120%; background-color: #f2f2f2; }
.card .txt span { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; }

/* SHUFFLE */
.shuffle { position: relative; display: inline-block; width: 50%; height: 350px; vertical-align: middle; }
.shuffle .book { display: inline-block; width: 250px; height : 250px; opacity: 0.5; }
.shuffle .book .pic { border: 0; }
.shuffle .book .tit { visibility: hidden; }
.shuffle ul { position: relative; display: block; width: 100%; height: 100%; }
.shuffle li { display: table; float: left; width: 50%; height: 100%; }
.shuffle li .wrap { display: table-cell; height: 100%; text-align: center; vertical-align: middle; }
.shuffle li.on { position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -120px; z-index: 10; width: 250px; }
.shuffle li.on .book { opacity: 1; transform: scale(1.2,1.2); }
.shuffle li.on .book .pic { height: 250px; box-shadow: 0 10px 15px rgba(0,0,0,0.3); border-radius: 15px; overflow: hidden; }
.shuffle li.on .book .tit { visibility: visible; }


/* TITLE */
.title { clear: both; position: relative; display: block; width: 100%; font-size: 0; text-align: left; padding-bottom: 20px;}
.title::after { content: ""; display: block; width: auto; height: 11px; background: url("/resources/img/talks/bg_line.png"); margin-top: 15px; }
.title.exp::after{display: none;}
.title .count { height: 40px; line-height: 40px; color: #0a3b64; font-size: 14px; }
.title .btns { float: right; padding: 0; margin: 5px 0 5px 10px; }
.title .btns .check { float: none; margin-right: 10px; }
.title .btTip { margin-left: 10px; }
.title .btMore {margin-top: 10px; margin-left: 40px; }
.title .tap { display: inline-block; float: right; margin-left: 50px; }
.title .tap li { min-width: 100px; height: 35px; line-height: 35px; }
.title .tap.br { margin-left: 0; margin-top: 30px; }
.title .check { float: right; margin: 5px 0; }
.title .interest { display: inline-block; overflow: hidden; min-width: 95px; height: 35px; line-height: 32px; color: #ffa53e; font-size: 18px; font-weight: 400; text-align: center; border: 2px solid #ffa53e; border-radius: 5px; background-color: #fff; padding: 0 15px; margin-right: 10px; vertical-align: middle; cursor: pointer; }
.title .interest.on { color: #fff; background-color: #ffa53e; }


/* service-guide */
.service-guide{
    width: 100%; padding: 200px 0; text-align: center; color: #000; font-size: 20px;
}


/* STEP */
.step { display: flex; overflow: hidden; font-size: 0; vertical-align: middle; border-radius: 10px; }
.step li { width: 25%; position: relative; display: inline-block; height: 60px; line-height: 60px; color: #959595; font-size: 18px; font-weight: 300; text-align: center; background-color: #ebebeb; margin-right: 0.3%; }
.step li b { font-weight: 500; }
.step li a { display: block; width: 100%; height: 100%; }
.step li::before { position: absolute; left: 100%; top: 0; z-index: 10; content: ""; display: block; width: 0; height: 0; border: 30px solid transparent; border-left: 30px solid #ececec; }
.step li::after { position: absolute; left: 101%; top: 0; z-index: 5; content: ""; display: block; width: 0; height: 0; border: 30px solid transparent; border-left: 30px solid #fff; }
.step li p:nth-child(1){display: none;}
.step li.on p:nth-child(1){display: block;}
.step li.on { color: #fff; background-color: #366999; line-height: 1.3;}
.step li.on p:nth-child(1){ margin-top: 7px;}
.step li.on::before { border-left: 30px solid #366999; }


/* TAP */
.tap { display: block; overflow: hidden; font-size: 0; text-align: left; vertical-align: middle; }
.tap li { position: relative; display: inline-block; overflow: visible; height: 60px; line-height: 60px; color: #0a3b64; font-size: 18px; font-weight: 400; background-color: #ececec; text-align: center; }
.tap li i { display: inline-block; height: 100%; }
.tap li i.ico { width: auto; height: 100%; text-indent: 0; padding-left: 30px; }
.tap li > a { display: block; width: 100%; height: 100%; }
.tap li + li { border-left: 1px solid #fff; }
.tap li:hover { background-color: rgba(0,0,0,0.1); cursor: pointer; }
.tap li.on { color: #fff; font-weight: 500; background-color: #396999; }
.tap li.on i.ico.clip { background-image: url("/resources/img/talks/ico_clip_on.png"); }
.tap li.on i.ico.link { background-image: url("/resources/img/talks/ico_link_on.png"); }

.tap.br { float: none; width: 100%; }

.tap.rd li { min-width: 120px; border-radius: 20px; }
.tap.rd li + li { border-left: 0; margin-left: 10px; }

/* .tap.index { border-bottom: 1px solid #0a3b64; } */
.tap.index li { float: left; overflow: hidden; height: 45px; font-size: 0; background: none; padding-right: 45px; margin-top: 10px; }
/* .tap.index li::after { position: absolute; top: 0; bottom: 0; right: 0px; content: ""; display: block; font-size: 0; width: 45px; height: 45px; border-top-right-radius: 50px; background: #ececec;
} */
.tap.index li span { display: block; height: 100%; line-height: 45px; color: #000; font-size: 16px; font-weight: 300; background-color: #ececec;  width: calc(100% + 45px); border-top-right-radius:  50px; text-align: center; }
.tap.index li + li { border-left: 0; }
.tap.index li.on { height: 55px; margin: 0; }
/* .tap.index li.on::after { top: 0; background: #0a3b64; width: 45px; height: 55px; border-top-right-radius: 50px; } */
.tap.index li.on span { line-height: 55px; color: #fff; font-weight: 500; background-color: #0a3b64; }

.search .tap.index li::after {
    background: #fff;
}

.search .tap.index li.on::after {
    background: #0a3b64;
}


.tap.full { display: flex; width: 100%; }
.tap.full li { flex: 1; min-width: auto !important; }

.tapCon { display: none;}

.tapScroll { clear: both; position: relative; display: block; overflow: visible; }
.tapScroll .btNext { position: absolute; right: -10px; top: 50%; margin-top: -10px; z-index: 100; height: 20px; border-radius: 50%; background: #363636; box-shadow: 0 3px 5px rgba(0,0,0,0.2); opacity: 1; }
.tapScroll .btNext::before { position: absolute; right: 8px; top: 50%; margin-top: -4.5px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.tapScroll .btNext:disabled { background-color: #b7b7b7; }
.tapScroll .btPrev { position: absolute; left: -10px; top: 50%; margin-top: -10px; z-index: 100; width: 20px; height: 20px; border-radius: 50%; background: #363636; box-shadow: 0 3px 5px rgba(0,0,0,0.2); opacity: 1; }
.tapScroll .btPrev::before { position: absolute; left: 8px; top: 50%; margin-top: -4.5px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-135deg); }
.tapScroll .btPrev:disabled { background-color: #b7b7b7; }
.tapScroll .tap { overflow: hidden; overflow-x: scroll; -ms-overflow-style: none; width: 100%; height: 60px; white-space: nowrap; }
.tapScroll .tap::-webkit-scrollbar { width: 0; display: none !important; }
.tapScroll .tap li { width: calc(100% / 6); min-width: 120px; height: 60px; line-height: 120%; text-align: center; padding: 0; }
.tapScroll .tap li span { display: table; width: 100%; height: 100%; }
.tapScroll .tap li span i { display: table-cell; width: 100%; height: 100%; word-break: break-all; text-align: center; vertical-align: middle; }
.tapScroll .tap li + li { border-left: 2px solid #fff; }

.popup .tap li {
    color: #707070;
    background-color: #ececec;
}

.popup .tap li.on {
    background: #808080;
    color: #fff;
}

.tap2 li {
    position: relative;
    display: inline-block;
    overflow: visible;
    height: 40px;
    line-height: 40px;
    color: #707070;
    font-size: 15px;
    font-weight: 400;
    background-color: #ececec;
    text-align: center;
    width: 33.333%;
    cursor: pointer;
}

.tap2 li.on{
    background: #808080;
    color: #fff;
}


/* BTNS */
.btns { display: block; overflow: hidden; text-align: center; font-size: 0; padding-top: 25px; }
.btns .btTxt ~ .btTxt { margin-left: 20px; }
.btns .btExcel.big ~ .btTxt.big { min-width: 200px; margin: 0 5px; }

.btns .field { width: 60%; margin: 0 auto; }
.btns .field .input { height: 34px; line-height: 34px; }
.btns .field .select label { height: 34px; line-height: 34px; }
.btns .field .btFind { height: 34px; }

.btns.set { display: flex; padding: 0; }
.btns.set .btTxt { flex: 1; min-width: auto; border-radius: 0; }
.btns.set .btTxt ~ .btTxt { margin-left: 1px; }
.btns.set .btTxt.on { color: #fff; background-color: #959595; }

.btns.detail button~button{
    margin-top: 10px;
}

.btns.detail .pop_bt{
    padding-left: 25px;
}
.btns.detail  .pop_bt.int{
    width: 145px;
}

.btns.detail  .pop_bt.have{
    background:  #ececec url(/resources/img/talks/ico_have.png) left+15px center no-repeat;
    width: 145px;
    color: #000;
}

/* FILTER */
.filter { position: relative; clear: both; display: block; overflow: hidden; width: 100%; border-top: 5px solid #3e71ad; padding-bottom: 35px; margin-top: 30px; }
.filter .tit { position: absolute; top: 0; left: 0; right: 0; display: block; width: 100%; height: 40px; line-height: 40px; color: #fff; font-size: 20px; font-weight: 400; text-align: center; border-right: 1px solid #3e71ad; background-color: #7da7d9; }
.filter .con { display: table-cell; width: 100%; height: 100%; color: #898989; font-size: 18px; text-align: center; vertical-align: middle; padding: 5px 0; }
.filter .item { display: inline-block; width: 85px; height: 30px; line-height: 30px; color: #000; font-size: 16px; font-weight: 300; text-align: center; border-radius: 15px; margin: 5px 20px; }
.filter .item.on { color: #fff; font-weight: 500; background-color: #f4792a; }

.filter .btFilter { position: absolute; bottom: 0; left: 50%; margin-left: -70px; display: block; overflow: hidden; width: 140px; height: 35px; text-align: center; background: url("/resources/img/talks/bt_filter.png") no-repeat center 0; background-size: contain; padding: 0 20px; }
.filter .btFilter i { display: inline-block; overflow: hidden; height: 37px; line-height: 35px; color: #fff; font-size: 16px; font-weight: 200; text-align: left; background: url("/resources/img/talks/ico_filter.png") no-repeat 0 6px; background-size: 30px; padding-left: 40px; }
.filter .btFilter.on i { position: relative; background: none; padding: 0; }
.filter .btFilter.on i::before { content: "닫기"; display: block; height: 37px; line-height: 35px; color: #fff; font-size: 16px; font-weight: 200; padding-right: 25px; padding-left: 10px; }
.filter .btFilter.on i::after { position: absolute; right: 2px; top: 15px; content: ""; display: block; width: 10px; height: 10px; border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); }
.filter .btFilter.on ~ ul { display: block; }

.filter ul { display: none; overflow: hidden; border-bottom: 5px solid #3e71ad; background-color: #fff; }
.filter ul li { position: relative; display: table; overflow: hidden; float: left; width: 25%; height: 180px; font-size: 0; text-align: center; padding-top: 40px; }
.filter ul li:last-of-type { width: 50%; }
.filter ul li:last-of-type .tit { border: 0; }


/* SORT */
.sort { position: relative; display: block; overflow: hidden; font-size: 0; text-align: left; padding: 20px 0; }
.sort .btSort { position: absolute; top: 25px; right: 0; display: none; }
.sort .total { display: inline-block; line-height: 40px; color: #000; font-size: 18px; text-align: left; vertical-align: middle; }
.sort .total mark { color: #3e71ad; font-weight: 500; }
.sort .total b { font-weight: 500; }
.sort .key { float: left; }
.sort > .select { float: right; }
.sort .btns { float: right; padding: 0; margin-left: 10px; }
.sort .check { float: right; margin: 5px 0; }
.sort .check ~ .select { float: none; vertical-align: middle; }
.sort .btList { margin: 5px 0; }
.sort .select label { background-color: #fff; }
.sort li { display: block; overflow: hidden; }
.sort ul { display: block; overflow: hidden; padding-bottom: 10px; }
.sort .field { float: right; width: 50%; }
.sort .field .select label { background-color: #f5f5f5; }

.sort.mo{
    display: none;
}


/* SEARCH */
.search { display: block; font-size: 0; text-align: center; }
.search .find { display: inline-block; overflow: visible; width: calc(100% - 24px); max-width: 700px; height: 64px; margin: 28px 0; }
.search .find .input { height: 64px; line-height: 64px; font-size: 20px; border: 0; border-radius: 32px; background-color: #fff; box-shadow: 5px 0 10px rgba(0,0,0,0.07); padding: 0 65px 0 125px; }
.search .find .btFind { right: 15px; background-color: #fff; background-size: auto; }
.search .find .btSearch { height: 64px; border-radius: 32px; }
.search .find .btSearch ~ .btFind { right: 115px; }
.search .month { display: block; font-size: 0; text-align: center; padding: 20px 0 5px 0; width: 100%;}
.search .month a { position: relative; display: inline-block; overflow: hidden; height: 25px; line-height: 25px; color: #000; font-size: 16px; font-weight: 300; text-shadow: 0 0 5px #fff; padding: 0 15px; }
.search .month a.on { color: #f4792a; font-weight: 500; }
.search .month a ~ a::before { position: absolute; left: 0; top: 50%; margin-top: -10px; content: ""; display: block; width: 1px; height: 20px; background-color: #000; opacity: 0.3; }
.search .month ~ .find { margin-top: 0; }
.search .tap.index { border: 0; }
.search .tap.index li { min-width: auto; }
.search .tap.index li::after { border: 30px solid #fff; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.search .tap.index li span { background-color: #fff; }
.search .tap.index li.on::after { border: 30px solid #0a3b64; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.search .tap.index li.on span { background-color: #0a3b64; }

.search .inner.mpd{
    padding: 0;
}

.content.search .search {
    background: #ececec url(/resources/img/talks/bg_line.png);
}

.content.search .sort{
    padding-bottom: 0;
}

.content.search .input::placeholder{
    font-size: 18px;
}

.search .find .select{
    position: absolute;
    z-index: 10;
    color: #6eb92c;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    width:120px;
    height:50px;
    line-height: 50px;
    left:-5px;
    
} 

.search .find .select p::after{
    position: absolute;
    right: 10px;
    top: 15.5px;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: 3px solid transparent;
    border-top: 3px solid #6eb92c;
    border-right: 3px solid #6eb92c;
    transform: rotate(135deg);
}

.search .find .select .select_inbox{
    border: 1px solid #6eb92c;
    width: 100px;
   	height: 144px; 
   	line-height: 22px;
    position: absolute;
    left: 9px;
    font-size: 16px;
    background: #fff;
    color: #5a5a5a;
    border-radius: 4px;
    top: 40px;
    padding: 5px 0;
    -webkit-box-shadow: 8px 3px 14px -1px rgba(50,50,50,0.18); 
box-shadow: 8px 3px 14px -1px rgba(50,50,50,0.18);
}

.search .find .select .select_inbox li{
    padding: 6.3px 0;
}

.search .find .select .select_inbox li.on{
    color: #6eb92c;
}

.moSearch{
    display: none;
}

/* LIST */
.main .list { clear: both; display: block; overflow: visible; width: 100%; font-size: 0; padding-top: 20px; overflow-x: auto; white-space:nowrap; }
.list { clear: both; display: block; overflow: visible; width: 100%; font-size: 0; padding-top: 20px;  }
.list .book { display: block; width: 100%; }
.main .list ul { display: block; width: 100%; text-align: left; font-size: 0; height: 100%; }
.list ul { display: block; width: 100%; text-align: left; font-size: 0; height: 100%; }
.list ul > li { position: relative; display: inline-block; overflow: visible; width: 16%; margin: 0 2.5%; margin-bottom: 30px; vertical-align: top; }
.list ul > li:nth-of-type(5n + 1) { margin-left: 0; }
.list ul > li:nth-of-type(5n) { margin-right: 0; }

.list.one ul > li:nth-of-type(5n) { margin-right: 2.5%; }
.list.one ul > li:nth-of-type(5n + 1) { margin-left: 2.5%; }
.list.one ul > li:first-child { margin-left: 0%; }

.list ul > li > .btns { position: absolute; top: 0; right: 0; display: none; padding: 0; }
.list ul > li > .btns .btTxt { display: block; margin: 0; }
.list ul > li > .btns .btTxt ~ .btTxt { margin-top: 10px; }

.list ul > li.noData { text-align: center !important; }

.list ul.four > li { width: 19%; margin: 0 4%; margin-bottom: 30px; }
.list ul.four > li:nth-of-type(4n + 1) { margin-left: 0; }
.list ul.four > li:nth-of-type(4n) { margin-right: 0; }

.list ul.three > li { width: 30%; margin: 0; margin-bottom: 30px; }
.list ul.three > li:nth-of-type(3n - 1) { margin: 0 5%; }

.list.on ul > li { display: block; overflow: hidden; width: 100%; margin: 0; margin-bottom: 50px; }
.list.on ul > li > .btns { display: block; }
.list.on ul > li > .btns ~ .book { padding-right: 120px; }
.list.on ul > li > .btns ~ .book .con { right: 120px; }
.list.on .book { width: 100%; overflow: hidden; }
.list.on .book .pic { display: inline-block; float: left; width: 186px; margin-right: 40px; }
.list.on .book .pic ~ .ctg { display: block; }
.list.on .book .ctg ~ .tit { margin-top: 10px; }
.list.on .book .tit { height: auto; min-height: 40px; max-height: 60px; font-size: 26px; font-weight: 400; line-height: 120%; margin: 0; }
.list.on .book .info { display: block; margin-top: 10px; }
.list.on .book .word { display: block; }
.list.on .book .con { display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.list.on .book .btns { display: block; }


/* SCROLL */
.scroll { clear: both; position: relative; display: block; overflow: visible; }
.scroll .page { position: absolute; top: 100%; right: 0; display: block; height: 30px; line-height: 30px; color: #3d2926; font-size: 16px; font-weight: 200; text-align: right; padding: 0 10px; }
.scroll .btNext { position: absolute; right: -40px; top: 30%; z-index: 100; }
.scroll .btNext.w { right: -20px; top: 50%; margin-top: -20px; width: 40px; border-radius: 50%; background: #0a3b64 url("/resources/img/talks/bt_next_w.png") no-repeat 18px 50%; box-shadow: 0 3px 5px rgba(0,0,0,0.2); opacity: 1; }
.scroll .btNext.w:disabled { background-color: #b7b7b7; }
.scroll .btNext.b { width: 31px; height: 62px; top: 50%; margin-top: -31px; background-image: url("/resources/img/talks/bt_next_view.png"); }

.scroll .btPrev { position: absolute; left: -40px; top: 30%; z-index: 100; }
.scroll .btPrev.w { left: -20px; top: 50%; margin-top: -20px; width: 40px; border-radius: 50%; background: #0a3b64 url("/resources/img/talks/bt_prev_w.png") no-repeat 12px 50%; box-shadow: 0 3px 5px rgba(0,0,0,0.2); opacity: 1; }
.scroll .btPrev.w:disabled { background-color: #b7b7b7; }
.scroll .btPrev.b { width: 31px; height: 62px; top: 50%; margin-top: -31px; background-image: url("/resources/img/talks/bt_prev_view.png"); }

.scroll > ul { display: block; overflow: hidden; overflow-x: scroll; -ms-overflow-style: none; width: 100%; height: 100%; font-size: 0; text-align: left; white-space: nowrap; }
.scroll > ul::-webkit-scrollbar { width: 0; display: none !important; }
.scroll > ul > li { display: inline-block; overflow: visible; height: 100%; vertical-align: top; }
.scroll > ul > li .book { display: block; width: 100%; }
.scroll > ul > li .cate { display: block; width: 100%; height: auto; }

.scroll.one { width: 400px; margin: auto; }
.scroll.one .card { padding: 0; border-radius: 0; }
.scroll.one > ul > li { width: 100%; }

.scroll.three > ul > li .card { width: 100%; }
.scroll.three > ul > li { width: 30%; }
.scroll.three > ul > li:nth-of-type(3n) .card { margin-right: 0; }
.scroll.three > ul > li:nth-of-type(3n + 1) .card { margin-left: 0; }
.scroll.three > ul > li:nth-of-type(3n - 1) { margin: 0 5%; }

.scroll.four > ul > li { width: 19%; margin: 0 4%; }
.scroll.four > ul > li:nth-of-type(4n + 1) { margin-left: 0; }
.scroll.four > ul > li:nth-of-type(4n) { margin-right: 0; }

.scroll.five > ul > li { width: 16%; margin: 0 2.5%; }
.scroll.five > ul > li:nth-of-type(5n + 1) { margin-left: 0; }
.scroll.five > ul > li:nth-of-type(5n) { margin-right: 0; }





/* GRID */
.grid { clear: both; display: block; overflow: hidden; width: 100%; margin-top: 20px; }
.grid ul { display: block; overflow: hidden; width: 100%; }
.grid ul > li { display: block; overflow: hidden; width: 100%; font-size: 0; border-bottom: 1px solid #e2e2e2; }
/* .grid ul > li:hover { background-color: #f8f8f8; } */
.grid ul > li .row { position: relative; display: table; width: 100%; height: 50px; }

.grid.notice ul > li .td{
    color: #5a5a5a;
    font-weight: 300;
    font-size: 16px;
}

.grid.notice ul > li.on .td{
    font-weight: 400;
    color: #323232;
}

.td.tit .file{
    background: url(/resources/img/talks/ic_file.png) center center no-repeat;
    width: 21px;
    height: 21px;
    display: inline-block;
    vertical-align: bottom;
    margin-left: 10px;
}

.td.tit .number{
    margin-left: 10px;
    font-size: 16px;
    color: #448ccd;
}

.ico.file {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e2e2e2;
    vertical-align: bottom;
    margin-left: 5px;
}

/* -------------------------------------------추가 css  */
.grid ul > li .row.on { background : #ececec; }
.subject-icon{background :url(/resources/img/talks/bt_book_down.png); position: absolute; width: 25px; height: 25px; display: inline-block; top:50%; transform: translateY(-50%); margin-left: 5px; }
.file-upload { width: 100%; border: 1px solid #b7b7b7;  margin-bottom: 10px;  margin-top: 20px; background: #fff;}
.file-upload>ul>li{ font-size: 14px; border-bottom: none; padding-left: 15px; height: 28px; line-height: 28px;}
.file-upload>ul>li:hover { background-color: #fff; }
.file-upload>ul>li:nth-of-type(odd){ float: left; width: 85%; }
.file-upload>ul>li:nth-of-type(even){ float: left; width: 15%; text-align: center; padding-top: 5px; }
.file-upload>ul>li>p{cursor: pointer;}
.file-upload>ul>li:nth-of-type(even)>img{cursor: pointer; width: 18px; height: auto;}
.file-subject{display: inline-block; font-size: 16px; display: none;}

@media (max-width: 960px){
    .file-upload>ul>li{padding: 0 0 0 15px !important; }
    .file-upload>ul>li:nth-of-type(even){padding-top: 5px !important;}
}

@media (max-width: 540px){
    .file-subject{display: block; margin-top: 20px;}
    .file-upload{margin-top: 0px;}
}

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

.grid ul > li .td { display: table-cell; height: 100%; color: #000; font-size: 15px; font-weight: 400; line-height: 120%; text-align: center; vertical-align: middle; }
.grid ul > li .td b { font-weight: 500; }
.grid ul > li .td mark { color: #f4792a; }
.grid ul > li .td .ico.file { width: 20px; height: 20px; border-radius: 50%; background-color: #e2e2e2; vertical-align: text-bottom; margin-left: 5px; }
.grid ul > li .td .btDelete { display: block; margin: 0 auto; }
.grid ul > li .td .txt { height: 20px; line-height: 18px; color: #000; font-size: 12px; border: 1px solid #000; padding: 0 2px; vertical-align: text-bottom; margin-left: 5px; }
.grid ul > li .td.xs { width: 80px; }
.grid ul > li .td.sm { width: 100px; }
.grid ul > li .td.md { width: 120px; }
.grid ul > li .td.lg { width: 150px; }
.grid ul > li .td.xl { width: 200px; }

.grid ul > li.noData:hover { background-color: #fff; }

.grid ul > li.answer { display: none; color: #000; font-size: 14px; font-weight: 300; line-height: 200%; text-align: left; background-color: #f9f9f9; padding: 20px; padding-left: 100px; }
.grid ul > li.answer .btns { display: none; padding: 0; padding-top: 20px; text-align: right; }

.grid .report { padding: 0; margin-top: 60px; }
.grid .report .tit { font-size: 20px; border-top: 0; border-bottom: 6px solid #ececec; padding: 0; }
.grid .report .tit em { float: right; padding-bottom: 10px; }
.grid .report .pic { position: absolute; right: 0; bottom: 80px; width: 450px; margin-top: 0; }
.grid .report .con { position: relative; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; height: 180px; overflow: hidden; line-height: 30px; text-overflow: ellipsis; white-space: normal; padding: 0; padding-right: 480px; margin: 30px 0; }

.grid ul > li.th { background-color: #b7b7b7; border: 0; }
.grid ul > li.th:hover { background-color: #b7b7b7; }
.grid ul > li.th .td { color: #fff; font-size: 16px; font-weight: 400; }

.grid.bd ul > li { border-color: #f9ae40; }
.grid.bd ul > li:hover { background: none; }

.grid.box { margin: 0; margin-bottom: 20px; }
.grid.box .td.chk { width: 50px; }
.grid.box .td.num { width: 80px; }
.grid.box .td.tit { text-align: left; }
.grid.box .td.con { display: inline-block; float: right; width: 300px; overflow: hidden; color: #959595; line-height: 50px; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.grid.box .td.day { width: 150px; }
.grid.box .td.now { width: 80px; }
.grid.box .td.btn { width: 50px; font-size: 0; }
.grid.box .td .mT { display: none; }
.grid.box .re { color: #448ccb; padding-left: 5px; }

.grid.box.mg{
    margin-bottom: 20px;
}
.grid.box2 { margin-top:0; }

/* NO DATA */
.noData { display: block; width: 100% !important; text-align: center; padding: 0; margin: 0 !important; }
.noData .txt { display: inline-block; line-height: 50px; color: #000; font-size: 20px; font-weight: 200; background: url("/resources/img/talks/bg_nodata.png") no-repeat center 0; padding-top: 100px; margin: 80px 0 50px 0; }
.noData .txt b { font-weight: 400; }
.noData .txt br ~ b { font-size: 24px; }
.noData.noImg .txt { font-size: 16px; background: none; padding: 0; margin: 0; }
.noData.book { border: 0 !important; }
.noData.book .txt { font-size: 30px; background-image: url("/resources/img/talks/bg_nodata_book.png"); padding-top: 180px; }
.noData.docu { border: 0 !important; }
.noData.docu .txt { font-size: 30px; background-image: url("/resources/img/talks/bg_nodata_docu.png"); padding-top: 180px; }
.noData.reply { border: 0 !important; }
.noData.reply .txt { font-size: 30px; background-image: url("/resources/img/talks/bg_nodata_reply.png"); padding-top: 180px; }
.noData.write { border: 0 !important; }
.noData.write .txt { font-size: 30px; background-image: url("/resources/img/talks/bg_nodata_write.png"); padding-top: 180px; }
.noData.scrap { border: 0 !important; }
.noData.scrap .txt { font-size: 30px; background-image: url("/resources/img/talks/bg_nodata_scrap.png"); padding-top: 180px; }



/* WRITE */
.write { position: relative; display: block; overflow: hidden; margin-top: 30px; }
.write h4 { color: #000; font-size: 20px; }
.write .input { width: 100%; background-color: #fff; margin-bottom: 10px; }
.write .select { width: 15%; margin-right: 5px; margin-bottom: 10px; }
.write .select label { background-color: #fff; }
.write .select ~ .input { width: calc(85% - 5px); }
.write .select + .select ~ .input { width: calc(70% - 10px); }
.write .textarea { height: 400px; }
.write .editer { position: relative; display: block; width: 100%; height: 400px; border: 1px solid #d7d7d7; margin-bottom: 50px; }
.write .editer textarea { display: block; overflow-y: scroll; width: 100%; height: 100%; color: #000; font-size: 14px; line-height: 180%; text-align: left; padding: 20px; }
.write .editer .byte { position: absolute; right: 35px; bottom: 10px; display: block; color: #448ccb; font-size: 14px; font-weight: 300; text-align: right; }

.write .involve { position: relative; display: block; width: 600px; min-height: 150px; border: 1px solid #d7d7d7; margin-bottom: 50px; }
.write .involve .noData.book .txt { font-size: 14px; background-size: auto 50px; background-position: center 20px; padding-top: 80px; margin: 0; }
.write .involve .book { width: 100%; height: auto; overflow: hidden; padding: 20px; }
.write .involve .book .ctg { display: block; }
.write .involve .book .ctg i { height: 16px; line-height: 16px; font-size: 11px; }
.write .involve .book .pic { float: left; width: 95px; height: auto; margin-right: 10px; }
.write .involve .book .tit { margin-top: 5px; }
.write .involve .book .info { display: block; font-size: 14px; }
.write .involve .btDel { position: absolute; right: 15px; top: 15px; z-index: 5; }
.write .involve > .btTxt { position: absolute; left: 100%; top: 0; margin-left: 20px; }
.write .check { margin-left: 30px; }

.write dl { display: block; overflow: hidden; border-top: 1px solid #448ccb; border-bottom: 1px solid #448ccb; }
.write dt { display: inline-block; float: left; width: 200px; color: #000; font-size: 16px; font-weight: 400; line-height: 34px; text-align: left; border-top: 1px solid #e2e2e2; padding: 10px 0; }
.write dt:first-of-type { border: 0; }
.write dd { display: inline-block; float: left; width: calc(100% - 200px); font-size: 0; text-align: left; border-top: 1px solid #e2e2e2; padding: 10px 0; }
.write dd:first-of-type { border: 0; }
.write dd .check { margin: 2px 30px 2px 0; }
.write dd .txt { display: block; color: #000; font-size: 14px; line-height: 20px; padding: 7px 0; }


/* ATTACH */
.attach { position: relative; display: block; width: 100%; border: 1px solid #d7d7d7; margin-bottom: 50px; background: #f5f5f5; }
.attach .txt { display: block; color: #888888; font-size: 15px; font-weight: 300; text-align: center; background: url("/resources/img/talks/bg_attach.png") no-repeat center 0; padding-top: 70px; margin: 30px 0; }
.attach .txt b { color: #448ccb; font-weight: 400; }
.attach ul { display: block; padding: 5px 0; }
.attach li { display: block; color: #000; font-size: 14px; text-align: left; padding: 5px 10px 5px 20px; }
.attach li em { color: #a1a1a1; padding: 0 10px; }
.attach li .btDel { vertical-align: baseline; }
.attach:hover { cursor: default; }
.attach:hover .txt { opacity: 0.5; }
.attach > .btTxt { position: absolute; right: 0; bottom: 100%; margin-bottom: 5px; }

.viewer .attach{
    background: #fff;
}
 

/* VIEWER */
.viewer { position: relative; display: block; }
.viewer > .tit { position: relative; display: block;  color: #323232; font-size: 20px; text-align: left; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; padding: 20px 0 10px 0; }
.viewer > .tit .info { display: block; font-size: 0; text-align: right; padding-top: 20px; }
.viewer > .tit .info li { display: inline-block; color: #000; font-size: 14px; padding-left: 10px; }
.viewer > .tit .info li:nth-of-type(1) { float: left; padding: 0; }
.viewer > .tit .info li:nth-of-type(2) { float: left; color: #959595; }
.viewer > .tit .info li:nth-of-type(3) { float: left; color: #959595; }
.viewer > .tit .btns { position: absolute; right: 0; bottom: 10px; padding: 0; }
.viewer > .tit .btns ~ .info li:nth-of-type(2) ~ li { float: left; color: #959595; }
.viewer > .con { display: block; overflow: hidden; color: #5a5a5a; font-size: 16px; text-align: left; padding: 20px 0; line-height: 1.7; }
.viewer .detail .book .pic { left: 0; }
.viewer .detail .dropBox ~ .btns { position: absolute; top: 0; right: 0; padding: 0; }
.viewer .detail .dropBox ~ .btns .btTxt { display: block; margin: 0; }
.viewer .detail .dropBox ~ .btns .btTxt ~ .btTxt { margin-top: 10px; }
.viewer .btCategory { width: 100%; margin: 30px 0; }
.viewer .btStar { margin: 30px auto; }
.viewer > .btns { min-height: 40px; padding-top: 0;  }

.viewer h4{
    font-size: 20px;
}

/* REPLY */
.comment { position: relative; display: block; overflow: hidden; font-size: 0; text-align: center; }
.comment .t { display: inline-block; float: left; height: 54px; line-height: 54px; color: #000; font-size: 18px; font-weight: 400; text-align: left; }
.comment .t em { font-size: 14px; font-weight: 300; }
.comment .c { clear: both; display: block; width: 100%; color: #000; font-size: 14px; font-weight: 400; line-height: 150%; text-align: left; border-bottom: 1px solid #d7d7d7; padding-bottom: 40px; }
.comment .c ~ .txt { right: 0; }
.comment .btns { float: right; padding: 10px 0; }
.comment .textarea { clear: both; }
.comment .txt { position: absolute; right: 0px; bottom: 10px; display: block; color: #888888; font-size: 14px; font-weight: 300; text-align: right; }
.comment > .btTxt { height: 40px; line-height: 40px; margin-top: 20px; }
.comment > .btTxt ~ .txt { bottom: 70px; }
.comment ~ .comment { border-top: 1px solid #d7d7d7; padding-top: 20px; margin-top: 40px; }

.comment.box .textarea { padding-right: 150px;  height: 120px; padding-left: 20px;}
.comment.box > .btTxt { position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; line-height: 120px; border-radius: 0; border: 1px solid #d7d7d7; border-left: 0; min-width: 120px; font-size: 16px; color: #000; background: #ececec;}
.comment.box > .btTxt ~ .txt { right: 140px; bottom: 10px; }


/* PAGES */
.pages { clear: both; display: block; overflow: hidden; width: 100%; text-align: center; font-size: 0; padding-top: 50px; }
.pages .btMore { display: none; height: 40px; border-radius: 20px; background-color: #ececec; padding: 0 40px; }
.pages .btMore i { color: #3d2926; font-weight: 400; padding-right: 20px; }
.pages .btMore i::before { margin-top: -8px; width: 10px; height: 10px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(135deg); }
.pages .pg { display: inline-block; overflow: hidden; width: 44px; height: 44px; line-height: 44px; color: #000; font-size: 18px; font-weight: 200; text-align: center; border-radius: 50%; background-color: #ececec; vertical-align: middle; margin: 0 5px; cursor: pointer; }
.pages .pg.on { color: #fff; font-weight: 400; background-color: #3e71ad; }

.pages .pgBtn { position: relative; display: inline-block; overflow: hidden; width: 30px; height: 30px; text-indent: -9999px; vertical-align: middle; }
.pages .pgBtn::before { position: absolute; left: 50%; margin-left: -2px; top: 50%; margin-top: -4px; content: ""; display: block; width: 9px; height: 9px; border: 2px solid transparent; border-top: 2px solid #898989; border-right: 2px solid #898989; }
.pages .pgBtn::after { position: absolute; left: 50%; margin-left: -4px; top: 50%; margin-top: -4px; content: ""; display: none; width: 9px; height: 9px; border: 2px solid transparent; border-top: 2px solid #898989; border-right: 2px solid #898989; }
.pages .pgBtn.prev::before { transform: rotate(-135deg); }
.pages .pgBtn.prev.end::before { margin-left: 2px; }
.pages .pgBtn.prev.end::after { display: block; margin-left: -4px; transform: rotate(-135deg); }
.pages .pgBtn.next::before { margin-left: -6px; transform: rotate(45deg); }
.pages .pgBtn.next.end::after { display: block; margin-left: 0; transform: rotate(45deg); }
.pages .pgBtn.next.end::before { margin-left: -4px; }
.pages .pgBtn.next.end::after { display: block; margin-left: -10px; transform: rotate(45deg); }



/* BAND BANNER */
.bandBnr { clear: both; display: block; overflow: hidden; width: 100%; text-align: left; font-size: 0; background-color: #accd7e; }
.bandBnr .inner { position: relative; overflow: hidden; background: url("/resources/img/talks/acc01.png") no-repeat 10px bottom; background-size: 120px; padding: 0 10px 0 150px; }
.bandBnr .txt { display: block; overflow: hidden; color: #0a3b64; font-size: 18px; font-weight: 300; line-height: 120%; text-align: left; padding: 40px 0; }
.bandBnr .txt b { display: block; color: #fff; font-size: 30px; font-weight: 500; line-height: 100%; text-shadow: 3px 3px 3px rgba(0,0,0,0.1); padding-top: 10px; }
.bandBnr .btMore { position: absolute; right: 10px; bottom: 40px; border-radius: 10px; background-color: #0a3b64; padding: 10px 20px; }
.bandBnr .btMore i { height: auto; color: #fff; line-height: 100%; }
.bandBnr .btMore i::before { border: 2px solid transparent; border-top: 2px solid #fc8e68; border-right: 2px solid #fc8e68; }


/* SLIDER */
.step_wrap > .slider { position: relative; display: block; width: 500px; height: 500px; margin: 50px auto; border: 1px solid #CBCBCB;}
.slider .bx-prev { left: -80px; margin-left: 0; background-image: url("/resources/img/talks/bt_prev_view.png"); }
.slider .bx-next { right: -80px; margin-right: 0; background-image: url("/resources/img/talks/bt_next_view.png"); }
.slider .bx-pager { right: 0; margin-right: 0; bottom: -30px; height: 30px; line-height: 30px; color: #5a5a5a; font-size: 14px; font-weight: 200; padding: 0 10px; }





/****************************** RAYOUT ******************************/

/* HEADING */

/* HEADING : SITE */
h1 { display: inline-block; width: 215px; height: 45px; background: url("/resources/img/talks/logo.png") no-repeat 0 50%; background-size: contain; text-indent: -9999px; }
h1 a { display: block; width: 100%; height: 100%; }

/* HEADING : AREA */
h2 { display: inline-block; height: 45px; }
h2 img { max-height: 45px; }
h2 span { color: #000; font-size: 20px; font-weight: 300; text-align: left; }

/* HEADING : CATEGORY */
h3 { position: relative; display: inline-block; height: 40px; line-height: 40px; color: #0a3b64; font-size: 28px; font-weight: 400; vertical-align: middle; }
h3 em { font-weight: 300; padding-left: 10px; }
h3 b { color: #448ccb; font-weight: 500; }
h3 a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; width: 100%; height: 100%; text-indent: -9999px; }
h3 a::before { position: absolute; right: 5px; top: 50%; margin-top: -4.5px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 2px solid #16446b; border-right: 2px solid #16446b; transform: rotate(45deg); }

/* HEADING : PAGE */
h4 { display: inline-block; height: 40px; line-height: 40px; color: #0a3b64; font-size: 24px; font-weight: 400; vertical-align: middle; }

/* HEADING : PARAGRAPH */
h5 { color: #0069b5; font-size: 20px; font-weight: bold; line-height: 100%; padding: 0 0 10px 20px; }

/* HEADING : POPUP */
h6 { display: inline-block; overflow: hidden; width: 100%; height: 55px; line-height: 55px; color: #fff; font-size: 24px; font-weight: 300; text-align: left; vertical-align: middle; }



/* GNB */
nav.gnb { clear: both; display: block; overflow: visible; height: 46px; font-size: 0; }
nav.gnb .m { display: inline-block; overflow: hidden; height: 46px; line-height: 46px; color: #000; font-size: 22px; font-weight: 400; border-bottom: 3px solid transparent; cursor: pointer; }
nav.gnb .m:hover { border-color: #6eb92c; }
nav.gnb .m.on { font-weight: 500; border-color: #6eb92c; }
nav.gnb ul { display: flex; height: 46px; font-size: 0; width: 70%;}
nav.gnb li { flex: auto; display: inline-block; font-size: 0; text-align: left; }

nav.gnb .m_gnb{
    display: none;
}

/* GNB : COMMU */
nav.gnb.commu .m:hover { border-color: transparent; }
nav.gnb.commu .m.on { color: #f47929; border-color: transparent; }
nav.gnb.commu ul { display: inline-block; }
nav.gnb.commu li { flex: none; }
nav.gnb.commu li ~ li { padding-left: 80px; }

/* FNB */
nav.fnb { display: block; overflow: hidden; }
nav.fnb a { display: inline-block; float: left; height: 30px; line-height: 30px; color: #3d2926; font-size: 14px; font-weight: 400; }
nav.fnb a + a { position: relative; margin-left: 7px; padding-left: 7px; }
nav.fnb a + a::before { position: absolute; left: 0; top: 8px; content: ""; display: block; width: 1px; height: 14px; background-color: #878180; }




/* HEADER */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: block; overflow: visible; width: 100%; background-color: #fff; transition: all 0.1s; }
header .inner { position: relative; padding: 35px 10px 0 10px; transition: all 0.1s; }
header h1 { float: left; transition: all 0.1s; }
header h2 { float: left; }
header h2 span { position: relative; display: block; height: 40px; line-height: 40px; text-align: left; padding-left: 35px; margin-top: 5px; }
header h2 span::before { position: absolute; left: 20px; top: 50%; margin-top: -10px; content: ""; display: block; width: 1px; height: 20px; background-color: #000; opacity: 0.1; }
header .btMy { display: none; }
header .btFinder { display: none; float: right; }
header .find { position: absolute; top: 35px; right: 115px; width: 45px; height: 45px; border-radius: 30px; background-color: #ececec; margin-right: 15px; transition: all 0.1s; }
header .find::before { position: absolute; top: 0; right: 0; z-index: 10; content: ""; display: block; width: 100%; height: 100%; }
header .find .input { height: 45px; line-height: 45px; border: 0; background: none; padding-left: 20px; }
header .find .btFind { width: 45px; height: 45px; background-size: 20px; }
header .find.on { width: 300px; }
header .find.on::before { display: none; }
header .btUser { position: absolute; top: 35px; right: 70px; transition: all 0.1s; }
header .gnb { float: left; width: calc(100% - 380px); margin: 20px 0 10px 0; transition: all 0.1s; }
header .btMenu { float: right; margin-top: 25px; margin-left: 10px; }
header .btEbook { float: right; margin-top: 25px; }

header.fix { box-shadow: 0 0 5px rgba(0,0,0,0.3); }
header.fix h1 { height: 30px; }
header.fix .inner { padding-top: 10px; }
header.fix .find { top: 20px; }
header.fix .btUser { top: 20px; }
header.fix .al_box { top: 10px; }
header.fix .btEbook { display: none; }
header.fix .btMenu { display: none; }
header.fix .gnb { padding: 0; margin: 0; }


/* FOOTER */
footer { background-color: #b7b7b7; }
footer .inner { position: relative; overflow: hidden; color: #3d2926; font-size: 13px; font-weight: 300; line-height: 150%; text-align: left; background: url("/resources/img/talks/logo_w.png") no-repeat 10px 50%; padding: 40px 10px 40px 360px; }
footer .inner strong { display: block; font-size: 15px; font-weight: 400; padding-bottom: 5px; }
footer .inner .copy { display: block; padding-top: 10px; }
footer .inner .fnb { position: absolute; right: 10px; bottom: 35px; }






/****************************** ASIDE ******************************/

/* MY */
aside.my { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; display: block; overflow: hidden; width: 100%; height: 100%; }
aside.my > .wrap { overflow: hidden; background-color: rgba(0,0,0,0.5); }
aside.my h2 { display: block; width: 100%; height: 50px; border-bottom: 4px solid #6eb92c; padding-right: 40px; }
aside.my h2 a { display: table; width: 100%; height: 100%; }
aside.my h2 span { display: table-cell; width: 100%; height: 100%; line-height: 120%; vertical-align: middle; padding-left: 20px; }
aside.my h2 img { max-width: 100%; max-height: 35px; }
aside.my .btClose { position: absolute; top: 3px; right: 0; }
aside.my .myBox { position: relative; display: block; overflow: hidden; overflow-y: auto; width: 260px; height: 100%; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3); animation: myBox 0.2s ease forwards; }
@keyframes myBox { from { margin-left: -260px; } to { margin-left: 0; } }
aside.my .myBox .name { position: relative; display: block; overflow: hidden; color: #000; font-size: 14px; line-height: 120%; padding: 10px 50px 10px 20px; }
/* aside.my .myBox .name::before { position: absolute; right: 20px; top: 50%; margin-top: -12.5px; content: ""; display: block; overflow: hidden; width: 25px; height: 25px; border-radius: 50%; background: #0b3b65 url("/resources/img/talks/ico_user.png") no-repeat center 50%; background-size: 15px; text-indent: -9999px; } */

aside.my .myBox .book { overflow: hidden; width: 100%; height: auto; background-color: #e8e8e8; padding: 20px; }
aside.my .myBox .book::before { content: "지금 읽고 있는 도서"; display: block; color: #004b81; font-size: 16px; padding-bottom: 10px; }
aside.my .myBox .book p{
    font-size: 14px;
    text-align: center;
    padding: 55px 0;
}
aside.my .myBox .book .ctg { display: block; }
aside.my .myBox .book .ctg i { height: 16px; line-height: 16px; font-size: 11px; }
aside.my .myBox .book .pic { float: left; width: 95px; height: auto; min-height: 120px; margin-right: 10px; }
aside.my .myBox .book .tit { margin-top: 5px; }
aside.my .myBox .book .btn { position: absolute; bottom: 20px; left: 125px; display: inline-block; height: 30px; line-height: 30px; color: #fff; font-size: 12px; text-align: center; border-radius: 15px; background-color: #396999; padding: 0 20px; }

aside.my .myBox .menu { clear: both; display: block; overflow: hidden; border-bottom: 1px solid #dedede; }
aside.my .myBox .menu li { display: block; overflow: hidden; border-top: 1px solid #dedede; }
aside.my .myBox .dropBox { display: none; background-color: #ececec; }
aside.my .myBox .s { position: relative; display: block; overflow: hidden; height: 45px; line-height: 45px; color: #000; font-size: 16px; padding-left: 40px; }
aside.my .myBox .s::before { position: absolute; left: 20px; top: 50%; margin-top: -6px; content: ""; display: block; width: 8px; height: 8px; border-bottom: 1px solid #000; border-left: 1px solid #000; }
aside.my .myBox .m { display: block; overflow: hidden; height: 45px; line-height: 45px; color: #000; font-size: 16px; padding: 0 20px; }
aside.my .myBox .m.drop { position: relative; padding-right: 40px; }
aside.my .myBox .m.drop::before { position: absolute; right: 15px; top: 50%; margin-top: -7px; content: ""; display: block; width: 8px; height: 8px; border: 2px solid transparent; border-top: 1px solid #221f1f; border-right: 1px solid #221f1f; transform: rotate(135deg); }
aside.my .myBox .m.drop.on { color: #fff; background-color: #898989; }
aside.my .myBox .m.drop.on::before { margin-top: -2px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(-45deg); }
aside.my .myBox .m.drop.on ~ .dropBox { display: block; }

aside.my .myBox .fnb { clear: both; background-color: #b7b7b7; padding: 10px 20px; }
aside.my .myBox .copyright { display: block; overflow: hidden; color: #3d2926; font-size: 10px; line-height: 150%; background: #b7b7b7 url("/resources/img/talks/logo_m.png") no-repeat 20px 0px; background-size: 180px; padding: 20px; padding-top: 50px; }


.m.sb{
    background: url(/resources/img/talks/m_header_sb_logo.png) left+20px center no-repeat;
    background-size: 120px;
}

/****************************** POPUP ******************************/

/* 팝업 */
article.popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 500; display: table; overflow: hidden; width: 100%; height: 100%; }
article.popup > .wrap { display: table-cell; text-align: center; vertical-align: middle; background-color: rgba(0,0,0,0.5); }
article.popup .btClose { position: absolute; top: 0; right: 10px; }
article.popup .popBox { position: relative; display: inline-block; overflow: hidden; min-width: 400px; background-color: #fff; animation: popBox 0.2s ease forwards;  max-width: 600px;}
@keyframes popBox { from { margin-top: 100px; opacity: 0; } to { margin-top: 0; opacity: 1; } }
article.popup .popBox .wrap { overflow: hidden; text-align: center; padding: 30px; padding-bottom: 0; }
article.popup .popBox > .tit { position: relative; display: block; overflow: hidden; padding: 0 30px; }
article.popup .popBox > .tit .btClose { top: 50%; margin-top: -20px; }
article.popup .popBox > .tit .btClose i::before,
article.popup .popBox > .tit .btClose i::after { background-color: #fff; }
article.popup .popBox .txt { display: block; color: #000; font-size: 16px; line-height: 24px; text-align: left; padding: 25px; }
article.popup .popBox .msg { color: #323232; font-size: 18px;  padding: 30px 25px 20px 0px; position: relative;}
article.popup .popBox .msg b { color: #f4792a; font-weight: 500; }
article.popup .popBox > .btns { padding: 30px; }
article.popup .popBox .msg_con{
    font-size: 16px;
    color: #5a5a5a;
    text-align: left;
    line-height: 25px;
}
article.popup .popBox .msg_er{
    text-align: left;
    font-size: 16px;
    color: #6eb92c;
    margin-top: 20px;
}

.msg.cir::before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #6eb92c;
    border-radius: 50%;
    top:7px;
    left: -15px;
}

.popup .msg2{
    font-size: 20px;
    color: #323232;
}

.popup .msg_con2{
    color: #323232;
    font-size: 16px;
    line-height: 2;
}

/* 모바일용 검색 */
article.popup.mSearch > .wrap { vertical-align: top; }
article.popup.mSearch .search { position: relative; background: #ececec url("/resources/img/talks/bg_line.png"); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
article.popup.mSearch .search .btBack { position: absolute; left: 0; top: 10px; width: 45px; height: 45px; padding: 5px; }
article.popup.mSearch .search .find { width: calc(100% - 100px); margin: 10px 50px; }


/* 팝업 : 알림 */
article.popup.alert .popBox { padding: 0 30px; }
article.popup.alert .msg { text-align: left; }
article.popup.alert .btns { text-align: right; }


/* 팝업 : 기관선택 */
article.popup.organ { display: block; }
article.popup.organ > .wrap { display: block; background: #fff url("/resources/img/talks/logo.png") no-repeat center 25px; background-size: 140px; padding: 24px; padding-top: 70px; }
article.popup.organ .find { display: block; margin-bottom: 15px; }
article.popup.organ .find .input { height: 45px; line-height: 45px; border-color: #d7d7d7; background-color: #f5f5f5; }
article.popup.organ .find .btFind { background-image: url("/resources/img/talks/bt_find_sb.png"); }
article.popup.organ .result { display: block; overflow: hidden; overflow-y: auto; width: 100%; height: calc(100% - 120px); border: 1px solid #d7d7d7; }
article.popup.organ .result li { display: block; overflow: hidden; color: #000; font-size: 16px; font-weight: 300; text-align: left; line-height: 120%; padding: 10px; }
article.popup.organ .result li.on { color: #448ccb; font-weight: 500; }
article.popup.organ .btn { display: block; width: 100%; height: 45px; line-height: 45px; color: #fff; font-size: 20px; font-weight: 300; border-radius: 30px; background-color: #f4792a; margin-top: 15px; }


/* 팝업 : 맞춤도서 */
article.popup.custom .popBox { width: 550px;}
article.popup.custom .popBox .tit { background-color: #0a3b64; }
article.popup.custom .popBox .tit h6 { color: #fff; text-align: left; font-size: 20px; }
article.popup.custom .popBox .tit .btTxt { position: absolute; left: 0; top: 50%; margin-top: -17px; min-width: auto; border-radius: 0; background: none; padding: 0 10px; }
article.popup.custom .popBox .con { padding: 30px; overflow-y: auto; max-height: 700px ; }
article.popup.custom .popBox .msg { font-size:18px; text-align: left; padding: 0; }
article.popup.custom .popBox .msg span{
    font-size: 14px;
    color: #888888;
    padding-left: 10px;
}
article.popup.custom .popBox .msg b { position: absolute; left: 0; top: 0; }
article.popup.custom .popBox .msg br { display: none; }
article.popup.custom.code .popBox .input{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
} 
.popBox .tit h6{
    position: relative;
}
.popBox .tit .close_bt{
    position: absolute;
    cursor: pointer;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}
article.popup.custom.code2 .popBox .debate_room_wrap{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
} 

article.popup.custom.code2 .popBox .debate_room_wrap li{
    width: 250px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

article.popup.custom.code2 .popBox .debate_room_wrap .txt{
    padding: 0;
    font-size: 18px;
}

article.popup.custom.code2 .popBox .msg{
    margin-bottom: 20px;
}

/* 팝업 : 상세검색 */
article.popup.search .popBox { width: 540px;  }
article.popup.search .popBox > .tit { background-color: #0a3b64; }
article.popup.search .popBox dl { display: block; overflow: hidden; text-align: left; padding: 0 18px; }
article.popup.search .popBox dt { display: block; overflow: hidden; color: #000; font-size: 18px; padding-top: 25px; }
article.popup.search .popBox dt em { color: #959595; font-size: 14px; padding-left: 10px; }
article.popup.search .popBox dd { display: block; overflow: hidden; padding-top: 10px; }
article.popup.search .popBox dd .field { display: inline-block; float: left; width: calc(100% - 90px); }
article.popup.search .popBox dd .field ~ .select { float: right; width: 80px; }
article.popup.search .popBox dd .field ~ .select label { color: #fff; border-color: #396999; background-color: #396999; }
article.popup.search .popBox dd .field ~ .select label::after { border-top-color: #fff; border-right-color: #fff; }
article.popup.search .popBox .btTxt { min-width: 134px; height: 50px; line-height: 50px; font-size: 20px; border-radius: 25px; }
article.popup.search .popBox .btns { clear: both; text-align: right; padding-bottom: 0; }

article.popup.search .search { padding: 0; }
article.popup.search .search .find { width: 100%; height: 45px; margin: 20px 0; }
article.popup.search .search .find .input { height: 45px; line-height: 45px; background-color: #ececec; box-shadow: none;  padding: 0 65px 0 20px; }
article.popup.search .search .find .btFind { background-color: #ececec; }
article.popup.search .sort { padding: 10px 0px; }
article.popup.search .book .pic { width: 105px; height: 140px; min-height: 120px; margin-right: 20px; }
article.popup.search .list { overflow: auto; max-height: 322px; border-top: 1px solid #b4b4b4; border-bottom: 1px solid #b4b4b4;  background: #ffffff;  padding: 0; }
article.popup.search .list ul > li:hover{
    background-color: #f1f1f1;   
}
article.popup.search .list ul > li { padding: 10px; margin: 0; }

article.popup.search .list ul > li:last-of-type { margin: 0; }
article.popup.search .list ul > li.on { background-color: rgba(0,0,0,0.1); }
article.popup.search .list ~ .btns { text-align: center; }
article.popup.search .txt { position: relative; border-top: 1px solid #ececec; padding: 0px 30px; }
article.popup.search .txt.qu { border-top: none; padding-left: 40px;}
article.popup.search .txt .btTip { position: absolute; left: 0; top: 50%; margin-top: -15px; }
article.popup.search .pages { padding: 10px 0; }

.pop_wrap{
    padding: 0 30px;
}

.popup.search .tap li{
    height: 40px;
    line-height: 40px;
    font-size: 15px;
}

/* 패싯검색 */
article.facet { position: absolute; top: 370px; right: 50%; margin-right: 600px; display: block; overflow: hidden; width: 200px; }
article.facet .tit { position: relative; display: none; overflow: hidden; background-color: #accd7e; padding: 0 20px; }
article.facet .tit h6 { color: #0a3b64; font-weight: 500; text-align: center; }
article.facet .tit .btClose { position: absolute; top: 50%; margin-top: -20px; right: 10px; }
article.facet .tit .btClose i::before,
article.facet .tit .btClose i::after { background-color: #fff; }
article.facet .btns { display: none; }
article.facet .t { display: block; color: #7ca7d9; font-size: 18px; font-weight: 500; text-align: left; padding: 15px 10px; }
article.facet .m { position: relative; display: block; float: left; height: 35px; line-height: 35px; color: #000; font-size: 16px; font-weight: 400; text-align: left; padding: 0 10px 0 20px; }
article.facet .m::before { position: absolute; left: 10px; top: 50%; margin-top: -2px; content: ""; display: block; width: 3px; height: 3px; background-color: #f4792a; }
article.facet .check { margin: 5px 0; }
article.facet .check input:checked ~ label { color: #f4792a; }
/* article.facet .check input:checked ~ label::before { border-color: #f4792a; background-color: #f4792a; } */
article.facet .drop { display: none; clear: both; padding: 0 20px; }
article.facet .btDrop.on ~ .m { color: #f4792a; }
article.facet .btDrop.on ~ .drop { display: block; }
article.facet ul { display: block; overflow: hidden; }
article.facet li { position: relative; display: block; overflow: hidden; }
article.facet .grid.box { overflow-y: scroll;  height: 686px; }

/* 게시판검색 */
article.finder { display: block; overflow: hidden; margin-top: 30px; }
article.finder .tit { position: relative; display: none; overflow: hidden; background-color: #accd7e; padding: 0 20px; }
article.finder .tit h6 { color: #0a3b64; font-weight: 500; text-align: center; }
article.finder .tit .btClose { position: absolute; top: 50%; margin-top: -20px; right: 10px; }
article.finder .tit .btClose i::before,
article.finder .tit .btClose i::after { background-color: #fff; }
article.finder dl { display: block; overflow: hidden; border-top: 1px solid #396999; border-bottom: 1px solid #396999; padding: 10px 15% 25px 15%; }
article.finder dt { display: inline-block; overflow: hidden; float: left; width: 75px; color: #000; font-size: 14px; line-height: 40px; text-align: left; margin-top: 15px; }
article.finder dd { position: relative; display: block; overflow: hidden; padding-right: 120px; margin-top: 15px; }
article.finder dd .select { width: 25%; margin-right: 5px; }
article.finder dd .select:last-of-type { width: calc(50% - 10px); margin: 0; }
article.finder dd .btTxt.ss { position: absolute; right: 0; top: 0; }



/* 게시판 카테고리 */
article.category { display: block; overflow: hidden; margin-top: 50px; }
article.category .tit { position: relative; display: none; overflow: hidden; background-color: #accd7e; padding: 0 20px; }
article.category .tit h6 { color: #0a3b64; font-weight: 500; text-align: center; }
article.category .tit .btClose { position: absolute; top: 50%; margin-top: -20px; right: 10px; }
article.category .tit .btClose i::before,
article.category .tit .btClose i::after { background-color: #fff; }
article.category .tap { display: none; }
article.category .btns { display: none; }
article.category .m { display: block; height: 50px; line-height: 50px; color: #fff; font-size: 16px; font-weight: 400; text-align: left; background-color: #3f71ae; padding: 0 20px; }
article.category .drop { display: block; overflow: hidden; height: 260px; border-left: 1px solid #e1e1e1; padding: 10px 0; margin: 10px 0; }
article.category .drop li { display: block; overflow: hidden; width: 100%; height: 30px; line-height: 30px; color: #000; font-size: 16px; font-weight: 300; text-align: left; padding: 0 20px; }
article.category .drop li:hover { background-color: #f5f5f5; cursor: pointer; }
article.category .drop li.on { color: #f47929; font-weight: 500; }
article.category .btDrop.on ~ .m { color: #f4792a; }
article.category .btDrop.on ~ .drop { display: block; }
article.category .bbs { display: block; overflow: hidden; font: 0; }
article.category .bbs > li { position: relative; display: inline-block; overflow: hidden; width: calc(100% / 8); }
article.category .bbs > li .btDrop { position: absolute; top: 0; right: 0; left: 0; display: none; width: 100%; }
article.category .bbs > li .btDrop i { float: right; }
article.category .bbs > li:nth-of-type(8n) .drop { border-right: 1px solid #e1e1e1; }


/* 도서상세 */
article.detail { position: relative; display: block; margin-top: 45px; margin-bottom: 45px; }
article.detail .inner { position: relative; font-size: 0; }
article.detail .inner > .btns { position: absolute; top: 0; right: 12px; padding: 0;     width: 145px;}
article.detail .inner > .btns .btTxt { display: block; margin: 0; }
article.detail .inner > .btns .btTxt ~ .btTxt { margin: 0; margin-top: 10px; }
article.detail .inner > .btns ~ .book { padding-right: 120px; }
article.detail .book { width: 100%; height: auto; min-height: 300px; font-size: 0; padding-right: 150px; position: relative; }
article.detail .book .tit { position: absolute; top: 0; left: 260px; display: block; height: auto; min-height: 40px; color: #000; font-size: 26px; font-weight: 400; line-height: 120%; text-overflow: clip; margin-top: 0;    width: calc(100% - 400px); }
article.detail .book .txt { position: absolute; top: 80px; left: 260px;    width: calc(100% - 400px);}
article.detail .book .info { display: none; position: absolute; top: 60px; left: 260px; margin: 0; }
article.detail .book .intro { left: 260px; right: 0; overflow:hidden;}
article.detail .book .pic { display: block; width: 220px; height: auto; }
article.detail .book .pic img { height: auto; }
article.detail .book > .btTxt { position: absolute; top: 100px; left: 260px; margin: 0; }

article.detail .dropBox { position: absolute; top: calc(100% - 40px); left: 360px; right: 0; z-index: 200; display: none; width: auto; max-height: 300px; overflow: auto; border: 1px solid #6eb92c; background-color: #fff; padding: 10px 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.3); }
article.detail .dropBox .btFold { float: right; }
article.detail .dropBox dl { clear: both; display: block; overflow: hidden; padding-bottom: 20px; }
article.detail .dropBox dt { display: block; overflow: hidden; color: #6eb92c; font-size: 20px; font-weight: 400; text-align: left; padding-top: 30px; }
article.detail .dropBox dt:first-of-type { padding-top: 0; }
article.detail .dropBox dd { display: block; overflow: hidden; color: #000; font-size: 14px; font-weight: 300; text-align: left; line-height: 24px; padding-top: 10px; }
article.detail .dropBox .check { display: block; width: 100%; }
article.detail .dropBox .check label::before,
article.detail .dropBox .check label::after { display: none; }
article.detail .dropBox .check input:checked ~ label { background-color: #ececec; }
article.detail .select { width: 100%; background-color: #fff; }
article.detail .select > label { text-overflow: ellipsis; border: 0; background-color: #fff; padding-right: 30px; }
article.detail .select > label::before { position: absolute; right: 20px; top: 50%; margin-top: -10px; z-index: 1; content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #6eb92c; }
article.detail .select > label::after { border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff;  right: 26px;}
article.detail .tap { display: none; }
article.detail .tap li span { font-size: 14px; background-color: #fff; padding: 0; }
article.detail .tap li::after { border: 30px solid #fff; border-top: 30px solid transparent; border-right: 30px solid transparent; }
article.detail .tap ~ .select { display: none; width: 100%; background-color: #fff; padding: 0;  }
article.detail .tap ~ .select > label { border-bottom: 1px solid #55a014; border-top: 1px solid #55a014; height: 50px; line-height: 50px; padding: 0 20px;}



/* 댓글 */
article.reply { clear: both; display: block; overflow: hidden; }
article.reply .wrap > .tit { position: relative; display: none; overflow: hidden; background-color: #accd7e; padding: 0 20px; }
article.reply .wrap > .tit h6 { color: #0a3b64; font-weight: 500; text-align: center; }
article.reply .wrap > .tit .btClose { position: absolute; top: 50%; margin-top: -20px; right: 10px; }
article.reply .wrap > .tit .btClose i::before,
article.reply .wrap > .tit .btClose i::after { background-color: #fff; }
article.reply .t { display: none; }
article.reply .total { display: block; overflow: hidden; color: #0a3b63; font-size: 20px; padding: 15px 0; }
article.reply .total b { color: #000; }
article.reply .grid ul { border-top: 1px solid #0a3b63; }
article.reply .grid.box .td.con { display: table-cell; float: none; overflow: visible; width: auto; color: #000; line-height: 120%; text-align: left; white-space: normal; text-overflow: clip; word-break:break-all; padding: 10px 0;}
article.reply .pages { padding: 0; padding-bottom: 30px; }
article.reply .btns { position: relative; margin-top: 0px; padding-top: 0px;}
article.reply .btns .btTxt { background-color: #fff; }


/* 교과단원 */
article.units { position: absolute; top: 0; left: 12px; display: block; overflow: hidden; width: 220px; }
article.units .tap li { height: 40px; line-height: 40px; min-width: auto; color: #3d2926; font-size: 15px; }
article.units .tap li.on { color: #fff; background-color: #55a014; }
article.units .drop { display: none; overflow: hidden; background-color: #f4f4f4; padding: 20px; }
article.units .drop .go { position: relative; display: block; color: #3d2926; height: 30px; line-height: 30px; font-size: 16px; font-weight: 400; text-align: left; padding-left: 10px; }
article.units .drop .go.on { color: #55a014; }
article.units .unit { display: block; overflow: hidden; color: #3d2926; font-size: 15px; font-weight: 300; line-height: 20px; text-align: left; background-color: #d2ebbe; padding: 20px; margin-top: 10px; }
article.units .unit:first-of-type { margin: 0; }
article.units .unit.on { color: #fff; background-color: #55a014; }
article.units .unit.on + .drop { display: block; }



/****************************** CONTENTS ******************************/

section { display: block; overflow: hidden; width: 100%; }

section.sub { border-top: 3px solid #6eb92c; }
section.sub .title { padding-top: 40px; }
section.sub .title::before { display: none; }
section.sub .title.bk::before { background: #c7c7c7; }
section.sub .title.bk h4 { color: #000; }

section.sub .inform { display: table; overflow: hidden; margin: 30px 0; }
section.sub .inform img { width: 194px; height: 194px; object-fit: cover; margin-right: 2px; }
section.sub .inform .wrap { display: table-cell; color: #000; font-size: 16px; line-height: 26px; text-align: left; vertical-align: middle; background-color: #f5f5f5; padding: 25px; }
section.sub .inform .wrap b { display: block; font-size: 22px; font-weight: 500; padding-bottom: 10px; }

section.sub.view .inner { position: relative; }
section.sub.view .inner .units ~ .content { width: calc(100% - 250px); margin-left: 250px; }
section.sub.view .title { position: relative; padding-top: 40px; padding-bottom: 5px; border-bottom: 1px solid #f9bc94; }
section.sub.view .title h4 { color: #f4792a; font-size: 20px; }
section.sub.view .title .btns { position: absolute; right: 0; bottom: -1px; background-color: #fff; }
section.sub.view .content .scroll.one { margin-top: 20px; }
section.sub.view .content > .con { position: relative; display: block; overflow: hidden; color: #000; font-size: 16px; font-weight: 400; line-height: 28px; text-align: left; padding: 10px 0; }
section.sub.view .content > .con b { display: block; height: 35px; line-height: 35px; font-size: 18px; font-weight: 500; margin-bottom: 10px; }
section.sub.view .content > .con em { display: block; font-size: 16px; font-weight: 400; }
section.sub.view .content > .con .btTxt { position: absolute; top: 10px; right: 0; }

section.sub.view .openbook { display: block; overflow: hidden; font-size: 0; text-align: center; background: url("/resources/img/talks/bg_view.png") no-repeat center bottom; padding-top: 80px; padding-bottom: 140px; margin-bottom: 50px; }
section.sub.view .openbook ul { position: relative; display: inline-block; overflow: visible; width: 170px; height: 228px; border-radius: 0 10px 10px 0; background-color: #e8e8e8; padding-top: 60px; vertical-align: top; margin: 0 3%; }
section.sub.view .openbook ul::before { position: absolute; left: 50%; margin-left: -40px; top: -40px; content: ""; display: block; width: 80px; height: 80px; line-height: 80px; color: #fff; font-size: 16px; text-align: center; border-radius: 50%; }
section.sub.view .openbook ul.ann::before { background: #898989 url("/resources/img/talks/acc_dream01.png") no-repeat center 50%; }
section.sub.view .openbook ul.maj::before { background: #898989 url("/resources/img/talks/acc_dream02.png") no-repeat center 50%; }
section.sub.view .openbook ul.job::before { background: #898989 url("/resources/img/talks/acc_dream03.png") no-repeat center 50%; }
section.sub.view .openbook ul.grade { background-color: #ece0d2; }
section.sub.view .openbook ul.grade::before { content: "학년"; background-color: #f4792a; }
section.sub.view .openbook ul.grade li:hover { background: none; cursor: default; }
section.sub.view .openbook ul.sbjt { background-color: #ece0d2; }
section.sub.view .openbook ul.sbjt::before { content: "주과목"; background-color: #f4792a; }
section.sub.view .openbook ul.sbjt li:hover { background: none; cursor: default; }
section.sub.view .openbook ul.on { background-color: #ece0d2; }
section.sub.view .openbook ul.on::before { background-color: #f4792a; }
section.sub.view .openbook li { display: block; overflow: hidden; color: #000; font-size: 16px; text-align: center; padding: 5px; margin-bottom: 10px; }
section.sub.view .openbook li:hover { background-color: rgba(0,0,0,0.05); cursor: pointer; }
section.sub.view .openbook li.on { color: #f4792a; font-weight: 500; background-color: rgba(256,256,256,0.3); }

section.sub.view .openbook .polygon { position: relative; display: inline-block; width: 200px; height: 200px; background: url("/resources/img/talks/bg_polygon.png") no-repeat center 50%; background-size: 100% 98%; margin-left: 150px; }
section.sub.view .openbook .polygon span { position: absolute; display: inline-block; width: auto; height: 80px; line-height: 80px; color: #898989; font-size: 15px; }
section.sub.view .openbook .polygon span::before { position: absolute; content: ""; display: inline-block; width: 60px; height: 60px; border-radius: 50%; vertical-align: middle; }
section.sub.view .openbook .polygon span.p1 { bottom: 100%; left: 0; right: 0; line-height: 100%; padding-top: 20px; }
section.sub.view .openbook .polygon span.p1::before { bottom: -30px; left: 50%; margin-left: -30px; background: #c4c6c7 url("/resources/img/talks/bg_poly1.png") no-repeat center 50%; background-size: 40px; }
section.sub.view .openbook .polygon span.p2 { right: 100%; top: 10px; text-align: right; padding-right: 40px; }
section.sub.view .openbook .polygon span.p2::before { right: -30px; top: 50%; margin-top: -30px; background: #c4c6c7 url("/resources/img/talks/bg_poly2.png") no-repeat center 50%; background-size: 40px; }
section.sub.view .openbook .polygon span.p3 { left: 100%; top: 10px; text-align: left; padding-left: 40px; }
section.sub.view .openbook .polygon span.p3::before { left: -30px; top: 50%; margin-top: -30px; background: #c4c6c7 url("/resources/img/talks/bg_poly3.png") no-repeat center 50%; background-size: 40px; }
section.sub.view .openbook .polygon span.p4 { right: 100%; bottom: 10px; text-align: right; padding-right: 40px; }
section.sub.view .openbook .polygon span.p4::before { right: -30px; top: 50%; margin-top: -30px; background: #c4c6c7 url("/resources/img/talks/bg_poly4.png") no-repeat center 50%; background-size: 40px; }
section.sub.view .openbook .polygon span.p5 { left: 100%; bottom: 10px; text-align: left; padding-left: 40px; }
section.sub.view .openbook .polygon span.p5::before { left: -30px; top: 50%; margin-top: -30px; background: #c4c6c7 url("/resources/img/talks/bg_poly5.png") no-repeat center 50%; background-size: 40px; }
section.sub.view .openbook .polygon span.p6 { top: 100%; left: 0; right: 0; line-height: 100%; padding-top: 40px; }
section.sub.view .openbook .polygon span.p6::before { top: -30px; left: 50%; margin-left: -30px; background: #c4c6c7 url("/resources/img/talks/bg_poly6.png") no-repeat center 50%; background-size: 40px; }

section.sub.view .openbook .polygon span.on { color: #000; font-weight: 500; }
section.sub.view .openbook .polygon span.on::before { background-color: #689bd2; transform: scale(1.1,1.1); }
section.sub.view .openbook + .con { border-top: 1px solid #dfdfdf; margin-top: 30px; }


/* 로그인 */
section.login { display: table; height: 100%; border: 0; padding: 0; }
section.login > .wrap { display: table-cell; text-align: center; vertical-align: middle; padding: 24px; }
section.login h1 { margin: 0 auto; }
section.login .hello { display: none; color: #000; font-size: 16px; font-weight: 300; text-align: left; padding-bottom: 20px; }
section.login .hello mark { display: block; color: #448ccb; font-size: 20px; font-weight: 400; line-height: 25px; padding-bottom: 10px; }
section.login .input { display: none; width: 100%; height: 45px; line-height: 45px; margin-bottom: 25px; }
section.login .input::-webkit-input-placeholder { font-size: 18px; }
section.login .input:-moz-placeholder { font-size: 18px; }
section.login .input::-moz-placeholder { font-size: 18px; }
section.login .input:-ms-input-placeholder { font-size: 18px; }
section.login .input.id { display: block; background: #f5f5f5 url("/resources/img/talks/input_id.png") no-repeat 10px 50%; padding-left: 45px; }
section.login .input.pw { display: block; background: #f5f5f5 url("/resources/img/talks/input_pw.png") no-repeat 12px 50%; padding-left: 45px; }
section.login .check.fl { display: none; }
section.login .btn { clear: both; display: block; width: 100%; height: 45px; line-height: 45px; color: #fff; font-size: 20px; font-weight: 300; border-radius: 30px; text-align: center; background-color: #f4792a; margin: 30px 0 20px 0; }
section.login .loginBox { display: block; width: 100%; max-width: 370px; margin: 0 auto; }
section.login .content { position: relative; overflow: hidden; padding: 100px 0 80px 0; margin-top: 20px; }
section.login .content::before { position: absolute; top: 0; left: 0; right: 0; content: ""; display: block; width: 100%; height: 11px; background: url("/resources/img/talks/bg_line.png"); }
section.login .content::after { position: absolute; bottom: 0; left: 0; right: 0; content: ""; display: block; width: 100%; height: 11px; background: url("/resources/img/talks/bg_line.png"); }


/* 메인 */
section.main .search { background: #ececec url("/resources/img/talks/bg_line.png"); }
section.main .search + .content .title { padding-top: 60px; }
section.main .search + .content .title::before { display: none; }
section.main .card .txt { background: none; }

section.main .banner { display: block; overflow: hidden; width: 100%; }
section.main .banner .slideBnr { display: block; width: 100%; height: 100%; }
section.main .banner .slideBnr li { display: block; width: 100%; }
section.main .banner .inner { overflow: hidden; height: 260px; padding: 0; }
section.main .banner img { display: none; }
section.main .banner ~ .search { border-top: 0; }

section.main > .btBnr { position: absolute; top: 155px; left: 0; z-index: 50; }
section.main .visual { position: relative; display: block; overflow: hidden; width: 100%; height: 435px; }
section.main .visual > .inner { position: absolute; bottom: 0; left: 50%; z-index: 50; margin-left: -600px; }
section.main .visual .banner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; display: block; overflow: hidden; width: 100%; height: 100%; }
section.main .visual .banner .inner { height: calc(100% - 30px); color: #fff; font-size: 20px; font-weight: 400; line-height: 30px; text-align: left; text-shadow: 0 0 10px rgba(0,0,0,0.2); }
section.main .visual .banner strong { display: block; font-size: 56px; font-weight: 500; line-height: 100%; padding-top: 20px; }
section.main .visual .banner .btBnr { position: absolute; bottom: 0; right: 0; z-index: 60; }

section.main .visual .book .pic { border: 0; }

section.main .visual .tap.index { border-bottom: 0; }
section.main .visual .tap.index li { min-width: auto; height: 50px; padding: 0; padding-left: 30px; margin-top: 15px; }
section.main .visual .tap.index li::after { right: auto; left: -30px; border: 30px solid #fff; border-top: 30px solid transparent; border-left: 30px solid transparent; }
section.main .visual .tap.index li span { line-height: 50px; font-size: 20px; background-color: #fff; padding: 0; padding-right: 30px; }
section.main .visual .tap.index li.on { height: 65px; margin: 0; }
section.main .visual .tap.index li.on::after { border: 30px solid #0a3b64; border-top: 30px solid transparent; border-left: 30px solid transparent; }
section.main .visual .tap.index li.on span { line-height: 65px; color: #fff; background-color: #0a3b64; }

section.main .content .bg { display: block; width: 100%; text-align: left; background-color: #e8e8e8; padding: 30px 0; }

section.main .content.interest { margin-bottom: 50px; }
section.main .content.interest .bg .title::before { display: none; }
section.main .content.interest .bg .title h4 { position: relative; padding-right: 40px; }
section.main .content.interest .bg .title h4::before { position: absolute; right: 20px; top: 50%; margin-top: -7px; content: ""; display: block; width: 12px; height: 12px; border-top: 1px solid #0a3b64; border-right: 1px solid #0a3b64; transform: rotate(45deg); }
section.main .content.interest .noInterest { display: block; width: 350px; height: 45px; line-height: 45px; color: #0a3b64; font-size: 24px; font-weight: 400; text-align: right; background: url("/resources/img/talks/ico_interest.png") no-repeat 0 50%; margin: 15px auto; }

section.main .content.floating { position: relative; }
section.main .content.floating:first-of-type .title::before { display: none; }
section.main .content.floating .title .btMore { float: none; margin-left: 30px; }
section.main .content.floating .scroll.five > ul > li { position: relative; padding-bottom: 30px; }
section.main .content.floating .scroll.five > ul > li::before { position: absolute; left: 0; right: 0; bottom: -30px; content: ""; display: block; width: 100%; height: 32px; background: url("/resources/img/talks/bg_layer01.png") no-repeat center bottom; opacity: 0; transition: all 0.3s ease; }
section.main .content.floating .scroll.five > ul > li.on::before { bottom: 0; opacity: 1; }
section.main .content.floating .scroll.five > ul > li.on .book .btns { margin-top: -21px; opacity: 1; }

section.main .content.floating .btGo { display: inline-block; overflow: hidden; float: right; width: 125px; height: 35px; line-height: 35px; color: #3d2926; font-size: 16px; text-align: center; border-radius: 20px; background-color: #fdc469; box-shadow: 3px 3px 5px rgba(0,0,0,0.1); margin-top: 10px; }

section.main .content.floating .layer { position: absolute; left: 0; right: 0; top: 100%; z-index: 300; display: block; overflow: hidden; width: 100%; padding: 10px 0 30px 0; animation: floating 0.3s ease forwards; }
@keyframes floating { from { margin-top: -30px; opacity: 0; } to { margin-top: 0px; opacity: 1; } }
section.main .content.floating .layer .btClose { float: right; }
section.main .content.floating .layer .btClose i::before { background-color: #fff; }
section.main .content.floating .layer .btClose i::after { background-color: #fff; }
section.main .content.floating .layer .scroll .btNext { top: 45%; }
section.main .content.floating .layer .scroll .btPrev { top: 45%; }
section.main .content.floating .layer .card { width: 300px; height: 300px; border-radius: 10px; background-color: #fff; padding: 10px; }
section.main .content.floating:nth-of-type(1) .layer { background-color: #7da7d9; }
section.main .content.floating:nth-of-type(1) .scroll.five > ul > li::before { background-image: url("/resources/img/talks/bg_layer01.png"); }
section.main .content.floating:nth-of-type(2) .layer { background-color: #8fc786; }
section.main .content.floating:nth-of-type(2) .scroll.five > ul > li::before { background-image: url("/resources/img/talks/bg_layer02.png"); }
section.main .content.floating:nth-of-type(3) .layer { background-color: #f6989d; }
section.main .content.floating:nth-of-type(3) .scroll.five > ul > li::before { background-image: url("/resources/img/talks/bg_layer03.png"); }
section.main .content.floating:nth-of-type(4) .layer { background-color: #a8a8a8; }
section.main .content.floating:nth-of-type(4) .scroll.five > ul > li::before { background-image: url("/resources/img/talks/bg_layer04.png"); }

section.main .content.floating ~ .content.floating { margin-top: 50px; }

section.main .content.curation { margin: 80px 0; }
section.main .content.curation .scroll { float: right; width: 380px; height: 380px; vertical-align: middle; margin: 0; border-radius: 10px; background-color: #fff; padding: 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); margin-right: 60px;}
section.main .content.curation .scroll .card { width: 100%; height: 100%; }
section.main .content.curation .tapCon .inner { height: 480px; padding: 50px 12px; }
section.main .content.curation > .tapCon.view1 { background: #bed3ec; }

/* 메인 > 우리학교 인기도서 */
section.popular { border-top: 3px solid #f7ad56; }
section.popular .title { padding-top: 40px; }
section.popular .title::before { display: none; }

/* 메인 > 전자책 모아보기 */
section.collage { border-top: 3px solid #f7ad56; }
section.collage .scroll { margin-bottom: 50px; }


/* 메인 > 통합검색 */
section.result { border-top: 3px solid #f7ad56; }
section.result .scroll { margin-bottom: 50px; }




/******************** 교과독서 ********************/

section.subject .content.bg { background-color: #f7f7f7; padding: 30px 0 20px 0; }
section.subject .content.bg .filter { margin-top: 0; }
section.subject .content.bg .sort { padding-top: 0; }
section.subject .content.bg ~ .content .title { padding-top: 40px; }
section.subject .content.bg ~ .content .title::before { display: none; }

section.subject.sub { border-top: 3px solid #7da7d9; }

/* 교과독서 > 도서상세 */
section.subject.view .content .words .tap { margin-top: 30px; }
section.subject.view .content .words .tap li { height: 50px; line-height: 50px; color: #fff; background-color: #448ccb; }
section.subject.view .content .words .tap li.on { color: #448ccb; background-color: #f2f2f2; }
section.subject.view .content .words .tapCon { color: #000; font-size: 16px; font-weight: 300; line-height: 28px; text-align: left; background-color: #f2f2f2; padding: 30px; }
section.subject.view .content .q { display: block; overflow: hidden; background-color: #f2f2f2; padding: 30px; margin-top: 30px; }
section.subject.view .content .q li { display: block; overflow: hidden; color: #000; font-size: 16px; font-weight: 300; line-height: 28px; text-align: left; background: url("/resources/img/talks/ico_q.png") no-repeat 0 5px; padding-left: 30px; margin-top: 10px; }
section.subject.view .content .q li:first-of-type { margin: 0; }


/* 교과독서 > 검색결과 */
section.subject.result { border-top: 3px solid #7da7d9; }
section.subject.result .facet { top: 310px; }
section.subject.result .check.onoff input:checked ~ label::after { background-color: #f4792a; }


/* 교과독서 > 교과서 파헤치기 */
section.subject.plumb .title h3 { display: none; }
section.subject.plumb .detail .book .info { display: block; }
section.subject.plumb .detail .book .intro { border-bottom: 1px solid #d7d7d7; }
section.subject.plumb .detail .book .intro dd.drop { height: 40px; color: #0a3b64; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; padding: 0; }
section.subject.plumb .detail .book .intro dd.drop::before,
section.subject.plumb .detail .book .intro dd.drop::after { display: none; }
section.subject.plumb .detail .book .intro dd.drop.on::after { bottom: 14px; }
section.subject.plumb .detail .dropBox { top: 100%; border-color: #0a3b64; padding: 0; }
section.subject.plumb .tapScroll { margin: 30px 0; }
section.subject.plumb .tapScroll .tap li { border-radius: 10px; }
section.subject.plumb .tapScroll .tap li.on { background-color: #f4792b; }
section.subject.plumb .tap.index { margin: 40px 0; }
section.subject.plumb .tap.index li { width: 260px; }




/******************** 한학기 한권 ********************/

section.semester .filter ~ .sort { padding-top: 0; }

section.semester.sub { border-top: 3px solid #8fc786; }

/* 한학기 한권 > 도서상세 */
section.semester.view .content .title { position: relative; }
section.semester.view .content .title ~ .inner .con { color: #000; font-size: 14px; font-weight: 400; line-height: 28px; text-align: left; }
section.semester.view .content .title ~ .inner > .btTxt { width: 160px; color: #3d2926; font-size: 16px; margin-bottom: 10px; }
section.semester.view .content h5 { clear: both; display: block; height: 43px; line-height: 43px; color: #000; font-size: 14px; font-weight: 400; text-align: center; border-top: 1px solid #cdcdcd; background-color: #fef2ea; padding: 0; margin-top: 20px; }
section.semester.view .content dl { display: block; overflow: hidden; border-bottom: 1px solid #cdcdcd; background-color: #f5f5f5; }
section.semester.view .content dt { display: inline-block; overflow: hidden; float: left; width: 20%; color: #000; font-size: 16px; text-align: center; border-top: 1px solid #cdcdcd; padding: 15px 25px; }
section.semester.view .content dd { display: block; overflow: hidden; color: #000; font-size: 14px; text-align: left; border-top: 1px solid #cdcdcd; background-color: #fff; padding: 15px 25px; }
section.semester.view .content img { display: block; max-width: 100%; margin: 0 auto; }
section.semester.view .content .data { display: none; border-top: 3px solid #3e71ad; border-bottom: 3px solid #3e71ad; }
section.semester.view .content .data th { color: #fff; font-size: 12px; text-align: center; border-top: 1px solid #d7d7d7; background-color: #7da7d9; padding: 10px; }
section.semester.view .content .data td { color: #000; font-size: 12px; text-align: left; border-top: 1px solid #d7d7d7; padding: 10px; }
section.semester.view .content .data tr:first-of-type th,
section.semester.view .content .data tr:first-of-type td { border: 0; }
section.semester.view .content .file { display: block; overflow: hidden; border-top: 1px solid #cdcdcd; background-color: #ecf3fa; }
section.semester.view .content .file li { display: block; overflow: hidden; text-align: left; border-bottom: 1px solid #cdcdcd; }
section.semester.view .content .file a { position: relative; display: inline-block; color: #000; font-size: 16px; line-height: 120%; padding: 15px; padding-right: 40px; }
section.semester.view .content .file a::after { position: absolute; right: 0; top: 50%; margin-top: -15px; content: ""; display: block; width: 30px; height: 30px; border: 1px solid #cdcdcd; border-radius: 5px; background: #fff url("/resources/img/talks/ico_download.png") no-repeat center 50%; background-size: 15px; }

section.semester.view .content .ex { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; display: block; overflow: hidden; width: 100%; padding-top: 15px; margin-top: -5px; }
section.semester.view .content .ex::before { position: absolute; left: 0; right: 0; top: 0; content: ""; display: block; width: 100%; height: 15px; background: url("/resources/img/talks/bg_layer01.png") no-repeat 134px top; background-size: 30px; }
section.semester.view .content .ex .tit { position: relative; display: block; color: #fff; font-size: 20px; font-weight: 500; text-align: center; background-color: #7da7d9; padding: 20px; }
section.semester.view .content .ex .tit em { display: block; color: #0a3b64; font-size: 16px; font-weight: 400; padding-top: 10px; }
section.semester.view .content .ex .tit b { color: #fff; font-weight: 500; }
section.semester.view .content .ex .tit .btClose { position: absolute; top: 20px; right: 20px; }
section.semester.view .content .ex .tit .btClose i::before,
section.semester.view .content .ex .tit .btClose i::after { background-color: #fff; }
section.semester.view .content .ex .con { display: block; width: 100%; height: 450px; background: #ececec url("/resources/img/talks/pic_semester.png") no-repeat center 50%; padding: 20px; }
section.semester.view .content .ex .con img { width: 100%; opacity: 0; }

/* 한학기 한권 > 검색결과 */
section.semester.result .facet { top: 310px; }





/******************** 진로독서 ********************/

section.career .visual { background-color: #f6989d; }
section.career .visual .banner { background-color: #f6989d; }
section.career .visual .banner .inner { background: url("/resources/img/talks/acc01.png") no-repeat 30px bottom, url("/resources/img/talks/acc03.png") no-repeat right 80%; padding-top: 100px; padding-left: 380px; }
section.career .visual .scroll { margin-top: 5px; }
section.career .bandBnr { background-color: #75dcca; margin: 0; margin-bottom: 50px; }
section.career .bandBnr .inner { background-image: url("/resources/img/talks/acc02.png"); }
section.career .content { padding-bottom: 50px; }
section.career .content.today .cate { }
section.career .content.today .scroll { display: inline-block; clear: none; float: right; width: calc(100% - 500px); padding-top: 0; vertical-align: middle; }
section.career .sort .select { float: left; }

section.career.main .content:first-of-type .title::before { display: none; }

section.career.sub { border-top: 3px solid #f6989d; }


/* 진로독서 > 검색결과 */
section.career.result { border-top: 3px solid #f6989d; }
section.career.result .facet { top: 310px; }
section.career.result .content:first-of-type .title::before { display: block; }

/* 진로독서 > 도서상세 */
section.career.view .content .dream ~ .inner .con { position: relative; color: #000; font-size: 14px; font-weight: 400; line-height: 21px; text-align: left; padding: 0 12px; margin-bottom: 20px; }
section.career.view .content .dream ~ .inner .con b { display: block; color: #448ccb; font-size: 18px; font-weight: 500; line-height: 34px; border-top: 1px solid #d7d7d7; padding-top: 40px; margin-bottom: 20px; }
section.career.view .content .dream ~ .inner .con .btTxt { position: absolute; top: 40px; right: 12px; }

/* 진로독서 > 진로검사 */
section.career.test .title { background: #ececec url("/resources/img/talks/bg_line.png"); padding: 30px 0; margin: 0; }
section.career.test .title::before { display: none; }
section.career.test .title .inner { display: table; height: 120px; background: url("/resources/img/talks/bg_annea.png") no-repeat left 50%; }
section.career.test .title h3 { display: table-cell; height: 100%; color: #000; padding: 0 50px 0 150px; vertical-align: middle; }
section.career.test .title h3 em { display: block; padding: 0; }
section.career.test .title .txt { display: table-cell; color: #000; font-size: 14px; line-height: 25px; text-align: left; border-left: 1px solid #b7b7b7; padding-left: 30px; vertical-align: middle; }
section.career.test .title .txt b { font-weight: 500; }

section.career.test .content { position: relative; background-color: #707070; padding-bottom: 0; }
section.career.test .content::before { position: absolute; top: 0; left: 0; right: 70%; bottom: 0; content: ""; display: block; width: auto; height: 100%; background-color: #cdcdcd; }
section.career.test .content .inner { position: relative; overflow: hidden; padding-left: 365px; }
section.career.test .enneagram { position: absolute; left: 0; top: 0; display: block; overflow: hidden; width: 365px; height: 100%; color: #000; font-size: 13px; font-weight: 300; text-align: center; background-color: #cdcdcd; }
section.career.test .enneagram a { display: block; color: #448ccb; }
section.career.test .enneagram ul { position: relative; display: block; width: 296px; height: 290px; background: url("/resources/img/talks/bg_enneagram.png") no-repeat center 50%; margin: 20px auto; }
section.career.test .enneagram ul::before { position: absolute; left: 50%; margin-left: -60px; top: 140px; content: "각 유형번호를 클릭해보세요"; display: block; width: 120px; color: #fff; font-size: 16px; font-weight: 500; text-align: center; }
section.career.test .enneagram li { position: absolute; display: block; width: 45px; height: 45px; line-height: 40px; color: #000; font-size: 20px; font-weight: 500; text-align: center; border: 3px solid #fff; border-radius: 50%; background-color: #cdcdcd; }
section.career.test .enneagram li:nth-of-type(1) { top: 30px; right: 40px; }
section.career.test .enneagram li:nth-of-type(2) { top: 105px; right: 0; }
section.career.test .enneagram li:nth-of-type(3) { bottom: 52px; right: 15px; }
section.career.test .enneagram li:nth-of-type(4) { bottom: 0; right: 80px; }
section.career.test .enneagram li:nth-of-type(5) { bottom: 0; left: 80px; }
section.career.test .enneagram li:nth-of-type(6) { bottom: 52px; left: 15px; }
section.career.test .enneagram li:nth-of-type(7) { top: 105px; left: 0; }
section.career.test .enneagram li:nth-of-type(8) { top: 30px; left: 40px; }
section.career.test .enneagram li:nth-of-type(9) { top: 0; left: 50%; margin-left: -23px; }
section.career.test .enneagram li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); cursor: pointer; }
section.career.test .enneagram li.on { color: #fff; background-color: #707070; }

section.career.test .scroll { width: 410px; margin: auto; }
section.career.test .scroll .tit { position: absolute; right: 100%; top: 20px; color: #fff; font-size: 34px; font-weight: 300; line-height: 100px; text-align: left; padding-right: 20px; }
section.career.test .scroll .tit b { font-size: 100px; font-weight: 200; }
section.career.test .scroll .btPrev { background-color: #000; }
section.career.test .scroll .btPrev:disabled { display: none; }
section.career.test .scroll .btNext { background-color: #000; }
section.career.test .scroll .btNext:disabled { display: none; }
section.career.test .scroll img { width: 410px; height: 410px; }




/******************** 교양독서 ********************/

section.refine .visual { background-color: #a8a8a8; }
section.refine .visual .banner { background-color: #a8a8a8; }
section.refine .visual .banner .inner { background: url("/resources/img/talks/acc04.png") no-repeat 30px bottom, url("/resources/img/talks/acc05.png") no-repeat 90% 50%; padding-top: 50px; padding-left: 280px; }
section.refine .visual .scroll { margin-top: 25px; }

section.refine.main .content { padding-bottom: 50px; }

section.refine.sub { border-top: 3px solid #a8a8a8; }


/* 교양독서 > 검색결과 */
section.refine.result { border-top: 3px solid #a8a8a8; }
section.refine.result .facet { top: 310px; }



/******************** 마이페이지 ********************/

section.my { border-top: 3px solid #0a3b64; }

section.my .sort { position: relative; padding-bottom: 10px; border-bottom: 1px solid #dfdfdf; margin-bottom: 20px; }
section.my .sort .btSort { display: none; }

section.my.act .border { border-top: 1px solid #0a3b64; border-bottom: 1px solid #0a3b64; padding: 20px 0; margin: 30px 0 20px 0; }
section.my.act .border .step { margin-bottom: 20px; }
section.my.act .border .field { overflow: hidden; width: 60%; margin: 10px 20%; }
section.my.act .border .field::before { content: "검색"; display: inline-block; float: left; width: 50px; height: 40px; line-height: 40px; color: #000; font-size: 16px; text-align: left; }
section.my.act .border .field .input { width: calc(80% - 50px); }
section.my.act .detail { margin-top: 20px; margin-bottom: 0; }
section.my.act .detail .book { min-height: auto; }
section.my.act .detail .book .pic { width: 180px; }
section.my.act .detail .book .tit { left: 210px; }
section.my.act .detail .book .intro { bottom: auto; top: 60px; left: 210px; }

section.my.act.view .title { padding-bottom: 20px; }
section.my.act.view .title:first-of-type { border: 0; }

section.my.info .grid { border-top: 1px solid #dfdfdf; margin-top: 50px; }
section.my.info .input { width: 60%; }




/******************** 소통하기 ********************/

section.commu { border-top: 3px solid #0a3b64; }
section.commu .title:first-of-type { border: 0; }
section.commu .sort h4 em { color: #3e71ad; }
section.commu .btns .btSearch { display: none; }
section.commu .btns .btWrite { float: right; }

section.commu.mine .tap { margin-top: 30px; }




/******************** 이용문의 ********************/

section.cs { border-top: 3px solid #0a3b64; }

section.cs.qna .viewer ~ .title { border-bottom: 2px solid #7da7d9; padding-bottom: 10px; }

section.cs.notice .tap { margin-bottom: 40px; }


/* go list */

.golist01{
    position: fixed;
    z-index: 999;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #f6989d;
    bottom:20px;
    right: 360px;
    text-align: center;
    color: #fff;
    font-size: 22px;
    line-height: 28px;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgb(129, 129, 129);
    letter-spacing: 1px;
}
.golist01>p:nth-child(1){margin-top: 18px;}
.golist01>p:nth-child(2){font-size: 16px;}

.golist01.col01{
    background: #8fc587;
}

.units.on {
    left: 364px;
    top: 150px;
    z-index: 100;
}
/* 
.units.scdown{
    top:79px;
    left: 364px;
} */

.units.down {
    position: absolute;
    bottom: 350px;
    left:364px;
  }


  /* al_box */

  
 .al_box{
    background: #0b3b65 url(/resources/img/talks/ic_al.png) center no-repeat;
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-left: 15px;
    cursor: pointer;
    top: 0px;
    right: 0px;
    transition: all 0.1s;
}

 .al_box.num{
    background: #6eb92c url(/resources/img/talks/ic_al.png) center no-repeat;
    position: relative;
}

.al_box .al{
    display: none;
}

 .al_box.num .al{
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    background: #f26522;
    border-radius: 50%;
    right: -10px;
    bottom: 0px;
}

.al_box .al p{
    text-align: center;
    line-height: 26px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

 .al_box.on .al{
    display: block;
}

.al_box .al_box_tab{
    position: absolute;
    width: 490px;
    /* height: 300px; */
    border: 1px solid #6eb92c;
    background: #fff;
    right: 0;
    z-index: 100;
    top: 60px;
    display: none;
}

.al_box.on .al_box_tab{
    display: block;
}

.al_box .al_box_tab::after{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 13px 13px 12px;
    border-color: #fff transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -10px;
    right: 10px;
}

.al_box .al_box_tab::before{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0px 12px 12px 11px;
    border-color: #6eb92c transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -12px;
    right: 11px;
}

 .al_box .al_box_tab > div > p{
    color: #323232;
    font-size: 20px;
    font-weight: 400;
    padding: 20px 10px 0px 10px;
}

.al_box .al_box_tab .al_box_tab_sc{
    padding: 20px 10px 0px 10px;
    font-size: 16px;
    max-height: 421px;
    overflow-y: auto;
}

.al_box .al_box_tab .no_al p{
    font-size: 20px;
    color: #323232;
    text-align: center;
    background: url(/resources/img/talks/no_al.png) top+45px center no-repeat;
    padding-top: 130px;
    padding-bottom: 50px;
}

.al_box .al_box_tab .al_box_tab_sc li{
    padding-left: 25px;
    position: relative;
    padding-bottom: 15px;
    color: #5a5a5a;
}

 .al_box .al_box_tab .al_box_tab_sc li::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: #6eb92c;
    border-radius: 50%;
    top:8px;
    left: 5px;
}

 .al_box .al_box_tab .al_box_tab_sc li .dc_name{
    font-weight: 400;
    color: #000;
}

 .al_box .al_box_tab .al_box_tab_sc li span{
    font-weight: 300;
}

.al_box .al_box_tab .al_box_tab_sc li .con_day{
    font-weight: 300;
    color: #6eb92c;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.al_box .al_box_tab .al_box_tab_sc li.confirm span{
    color: #5a5a5a;
}
.al_box .al_box_tab .al_box_tab_sc li.confirm::before{
    background: #5a5a5a;
}

/* 팝업 알람 박스 */




article.popup.al_box_tab .popBox .tit h6{
    text-align: center;
}


.popup.al_box_tab .al_box_tab::before{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0px 12px 12px 11px;
    border-color: #6eb92c transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -12px;
    right: 11px;
}

.popup.al_box_tab .al_box_tab > div > p{
    color: #323232;
    font-size: 20px;
    font-weight: 400;
    padding: 20px 10px;
    text-align: left;
}

.popup.al_box_tab .al_box_tab > div {
    width: 100%;
    height: calc(100% - 55px);
    position: fixed;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc{
    padding: 0 10px;
    font-size: 16px;
    position: relative;
    height: calc(100% - 59px);
    overflow-y: scroll;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc ul{
    
}

.popup.al_box_tab .al_box_tab .no_al p{
    font-size: 18px;
    color: #323232;
    text-align: center;
    background: url(/resources/img/talks/no_al.png) top+45px center no-repeat;
    padding-top: 130px;
    padding-bottom: 50px;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc li{
    padding-left: 25px;
    position: relative;
    padding-bottom: 15px;
    color: #5a5a5a;
    text-align: left;
    line-height: 1.5;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc li::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: #6eb92c;
    border-radius: 50%;
    top:8px;
    left: 5px;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc li .dc_name{
    font-weight: 400;
    color: #000;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc li span{
    font-weight: 300;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc li .con_day{
    font-weight: 300;
    color: #6eb92c;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.popup.al_box_tab .al_box_tab .al_box_tab_sc li.confirm span{
    color: #5a5a5a;
}
.popup.al_box_tab .al_box_tab .al_box_tab_sc li.confirm::before{
    background: #5a5a5a;
}


/* 내 토론방 */

.title_acc{
    position: absolute;
    bottom: 32px;
}

.title_acc img{
    width: 70px;
}

.title_sub{
    padding-left: 100px;
}

.my_debate_room{
    width: 100%;
}

.my_debate_room .left{
    width: 600px;
    margin-right: 50px;
}

.debate_making{
    background: #51a8a2;
    width: 260px;
    height: 260px;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 6px 6px rgb(0 0 0 / 12%);
    margin-right: 10px;
    cursor: pointer;
}
.debate_making .sj{
    font-size: 22px;
    margin-bottom: 20px;
}

.debate_making .txt{
    width: 80%;
    margin: 0 auto;
    line-height: 1.5;
}

.debate_making .icon{
    width: 104px;
    height: 130px;
    background: url(/resources/img/talks/debate_making.png) center no-repeat;
    margin: 0 auto;
}

.debate_making .icon.code{
    background: url(/resources/img/talks/debate_making_code.png) center no-repeat;
}

.debate_playing{
    background: #c76d63;
    width: 330px;
    height: 125px;
    margin-bottom: 10px;
    border-radius: 6px;
    box-shadow: 0 6px 6px rgb(0 0 0 / 12%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.debate_playing .sj{
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.debate_playing .txt{
    line-height: 1.5;
}

.debate_playing .icon{
    width: 125px;
    height: 100%;
    float: left;
    background: url(/resources/img/talks/debate_play.png) center no-repeat;
}

.debate_completion{
    width: 330px;
    height: 125px;
    background: #edb71c;
    border-radius: 6px;
    box-shadow: 0 6px 6px rgb(0 0 0 / 12%);
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

.debate_completion .icon{
    width: 125px;
    height: 100%;
    float: left;
    background: url(/resources/img/talks/debate_com.png) center no-repeat;
}

.debate_completion .sj{
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.debate_completion .txt{
    line-height: 1.5;
}

.my_debate_room .right{
    width: calc(100% - 650px);
}

.my_debate_room .right h4{
    margin-bottom: 10px;
    padding-left: 10px;
}

.debate_recent{
    width: 100%;
    height: 210px;
    border-radius: 12px;
    border: 1px solid #c1c1c1;
    box-shadow: 0 6px 6px rgb(0 0 0 / 12%);
    position: relative;
    cursor: pointer;
}
.debate_recent div{
    width: 100%;
    height: 100%;
}

.debate_recent .pic{
    background: url(/resources/img/talks/sample10.png) no-repeat;
    width: 40%;
    height: 100%;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
}

.debate_recent .pic .pic_ic{
    background: url(/resources/img/talks/pic_ic.png) no-repeat center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    left: 10px;
    top: -5px;
}

.debate_recent .pic .pic_ic.p{
    background: url(/resources/img/talks/pic_ic.png) no-repeat center;
}
.debate_recent .pic .pic_ic.e{
    background: url(/resources/img/talks/pic_ic_ee.png) no-repeat center;
}
.debate_recent .pic .pic_ic.c{
    background: url(/resources/img/talks/pic_ic_cc.png) no-repeat center;
}

.debate_recent .txt_box{
    width: 60%;
    height: 100%;
    padding: 25px 30px;
}

.debate_recent .sj{
    color: #323232;
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 20px;
}
.lock{
    background: url(/resources/img/talks/input_pw.png) center/cover no-repeat; 
    background-size: 16px;
    padding-left: 20px;
}

.debate_recent .txt{
    color: #5a5a5a;
    font-size: 16px;
    line-height: 1.8;
}
.debate_recent .txt span:nth-child(1){
    width: 80px;
    display: inline-block;
}

.debate_recent .nodata_room{
    width: 100%;
    height: 100%;
}

.debate_recent .nodata_room .ic_box{
    width: 30%;
    height: 100%;
    /* margin-right: 5%;s */
    background: url(/resources/img/talks/acc01.png) right center no-repeat;
    float: left;
}

.debate_recent .nodata_room .txt_box{
    float: left;
    width: 70%;
    padding:  45px 0;
}

.debate_recent .nodata_room p{
    text-align: center;
}

.debate_recent .nodata_room .sj{
    color: #0a3b64;
    margin-top: 10px;
}

.debate_room_wrap{
    width: 100%;
    text-align: left;
    margin-top: 20px;
}

.debate_room_wrap li{
    float: left;
    width: 22%;
    margin-right: 4%;
    margin-bottom: 30px;
}

.debate_room_wrap li:nth-of-type(4n){
    margin-right: 0;
}

.pic_box{
    position: relative;
    width: 100%;
    border: 1px solid #dfdfdf;
    border-radius: 10px;
    overflow: hidden;
}

.pic_box:after {
   	content: "";
    display: block;
    padding-bottom: 100%;
}

.pic_box img{
    width: 100%;
    height: 100%;
    position: absolute;
}

.pic_ic{
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 35px;
    position: absolute;
    left: 10px;
    top: -5px;
    z-index: 1;
}

.pic_ic.p{
    background: url(/resources/img/talks/pic_ic_p.png) no-repeat center;
}
.pic_ic.e{
    background: url(/resources/img/talks/pic_ic_e.png) no-repeat center;
}
.pic_ic.c{
    background: url(/resources/img/talks/pic_ic_c.png) no-repeat center;
}

.debate_room_wrap .txt_box{
    color: #5a5a5a;
    font-size: 18px;
}
.debate_room_wrap .txt_box .sj{
    font-size: 20px;
    color: #323232;
    margin: 10px 0;
    line-height: 1.5;
    min-height: 60px;
}
.debate_room_wrap .txt_box .txt span:nth-child(1){
    width: 64px;
    display: inline-block;
    line-height: 1.7;
    position: relative;
}
.debate_room_wrap .txt_box .txt span:nth-child(1)::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background: #5a5a5a;
    top: 5px;
    right: 4px;
}

.content.interest .nodata_around {
    width: 100%;
}

.content.interest .nodata_around .ic_box{
    background: url(/resources/img/talks/acc02.png) no-repeat;
    width: 136px;
    height: 140px;
    margin: 0 auto;
    margin-top: 80px;
}

.content.interest .nodata_around .txt_box{
    font-size: 16px;
    color: #5a5a5a;
    text-align: center;
    line-height: 1.5;
}

.content.interest .nodata_around .txt_box .sj{
    font-size: 22px;
    color: #0a3b64;
    margin: 20px 0;
}

.bt_debate{
    font-size: 15px;
    color: #fff;
    background: #6eb92c;
    width: 180px;
    height: 40px;
    border-radius: 20px;
    line-height: 40px;
    margin-top: 30px;
    margin-bottom: 80px;
}

.nodata_interest{
    width: 100%;
}

.nodata_interest .ic_box{
    background: url(/resources/img/talks/acc03.png) no-repeat;
    width: 126px;
    height: 133px;
    margin: 0 auto;
    margin-top: 80px;
}

.nodata_interest .txt_box{
    font-size: 22px;
    color: #0a3b64;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 100px;
}

.debate_sj{
    color: #0a3b63;
    font-size: 26px;
    font-weight: 400;
    height: auto;
    display: block;
}

.step{
    margin-top: 30px;
    margin-bottom: 30px;
}

.step_box{
    width: 100%;
}

.step_box h4{
    font-size: 20px;
    color: #0a3b63;
}

.step_box .sj_step{
    font-size: 20px;
    color: #fff;
    background: #366999;
    width: 105px;
    height: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: center;
    margin-right: 10px;
}

.step_box h4 span{
    color: #959595;
    font-size: 14px;
    margin-left: 10px;
}

.step_wrap{
    width: 100%;
    margin-top: 40px;
}

.step_wrap>div{
    width: 100%;
    margin-bottom: 25px;
}

.step_wrap .left{
    float: left;
    width: 12%;
    position: relative;
    color: #323232;
    font-size: 16px;
    line-height: 50px;
}
.step_wrap .right{
    float: left;
    width: 88%;
}

.step_wrap .date .right p{
    /*display: none;*/
    font-size: 14px;
    margin-top: 5px;
    color: #fa3200;
}

.step_wrap .right .input{
    width: 100%;
    height: 50px;
    
}

.name .input{
    padding-left: 20px;
}

.open_box{
    width: 180px;
    height: 40px;
    background: #ececec;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 5px;
}

.open_box li{
    float: left;
    width: 50%;
    height: 100%;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.open_box li.on{
    background: #366999;
    color: #fff;
}

.open_box .btTxt{
    display: none;
}

.img .open_box{
    width: 320px;
}
.img .basic_img>div{
    display: none;
}

.teacher .right{
    line-height: 40px;
}

.bt_ta{
    background: #6eb92c;
    color: #fff;
    width: 180px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
}

.bt_ta.b{
    background: #366999;
    width: 100px;
    margin-top: 5px;
    display: none;
}

.bt_ta.b.on{
    background: #7d7d7d;
}


.bt_ta.c{
    background: #7d7d7d;
}

.bt_ta.cs{
    background: #ececec;
    width: auto;
    padding: 0 15px;
    color:  #323232;
    margin-right: 10px;
    cursor: default;
}

.bt_ta.cs .del{
    padding-left: 30px;
    background: url(/resources/img/talks/bt_del2.png) right center no-repeat;
    width: 12px;
    height: 12px;
}

.img .right .attach{
    height: 50px;
    line-height: 50px;
    background: #f5f5f5;
    border : 1px solid #d7d7d7;
    margin-bottom: 0;
    margin-top: 25px;
}

.img .right .attach ul{
    padding: 0;
}

.img .right .attach li{
    padding: 0;
    padding-left: 20px;
}

.img .right .attach a{
    color: #888888;
    font-size: 14px;
}

.img .right .attach button{
    background: url(/resources/img/talks/bt_del.png) center no-repeat;
    width: 50px;
    height: 48px;
}

.date .right .input.date{
    width: 220px;
    background: #f5f5f5 url(/resources/img/talks/bt_cal.png) left+10px center no-repeat;
    padding-left: 50px;
}

.date .right .field.date::before {
    left: 220px;
    height: 50px;
    line-height: 50px;
}

.date .right .field.date .check{
    margin-left: 20px;
    margin-top: 10px;
    width: 337px;
    height: 40px;
    overflow: unset;
}

.date .right .field.date .check input{
	width :100px; 
}

.date .right .field.date .check label{
	width :100px; 
}

.date .right .field.date .check .notice{
    color: #f06e64;
    font-size: 14px;
    top:25px;
    left: 27px;
    position: absolute;
    display: block;
}

.basic_img{
    margin-top: 25px;
    width: 100%;
    height: 580px;
    overflow-y: auto;
}

.basic_img ul{
    width: 100%;
}

.basic_img li{
    width: 23.5%;
    margin-right: 2%;
    margin-bottom: 2%;
    float: left;
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    overflow:hidden;
}

/*.basic_img li::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}*/

.basic_img li>img{
    width: 100%;
    height: 100%;
}

.basic_img li:nth-of-type(4n){
    margin-right: 0;
}

.basic_img li div{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) url(/resources/img/talks/debate_room_img_on.png) center no-repeat;
    border-radius: 12px;
    position: absolute;
    display: none;
}

.basic_img li.on div{
    display: block;
}

.teacher .right .sub{
    width: 100%;
    margin-top: 5px;
}

.popup.custom .input.wi01{
    width: calc(100% - 90px);
}

.popup.custom .sub.popup1{
    text-align: left;
}

.popup.custom .sub.popup1 .bt_ta{
    font-size: 15px;
    background: #396999;
    color: #fff;
    margin-bottom: 10px;
    margin-right:10px;
    cursor:pointer;
}




.popup.custom .sub.popup1 .bt_ta.cs .del {
    padding-left: 30px;
    background: url(/resources/img/talks/bt_close2.png) right center no-repeat;
}

.popup.custom .sub.popup2{
	height: 200px;
	overflow-y : auto;
}


.popup.custom .sub.popup2 .bt_ta{
    width: 98%;
    margin-bottom: 10px;
    text-align: left;
    font-size: 15px;
}
.popup.custom .sub.popup2 .bt_ta.cs{
	cursor:pointer;
}


.popup.custom .sub.popup2 .bt_ta.on{
    background: #396999;
    color: #fff;
}

article.popup.custom .popBox.debate_room{
    width: 630px;
}

.popBox.debate_room .notice{
    color : #fa321e;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
}

.step_wrap .bk_search h4{
    font-size: 20px;
    color: #323232;
    margin-top: 5px;
}
.step_wrap .bk_search .search .find{
    width: 1040px;
    height: 50px;  
    max-width: none;
    margin: 0;
    margin-bottom: 10px;
}
.step_wrap .bk_search .search .find .input{
    height: 50px;
    line-height: 50px;
    border:  1px solid #55a014;
}

.step_wrap .bk_search .nodata{
    font-size: 20px;
    color: #323232;
    text-align: center;
    background: url(/resources/img/talks/no_data01.png) top+40px center no-repeat;
    padding-top: 190px;
    padding-bottom: 80px;
}

.step_wrap .bk_search .nodata .more{
    background: #c76d63;
    color: #fff;
    width: 200px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 20px;
}

.debate_room_com{
    background: url(/resources/img/talks/bg_com.png) top+110px center no-repeat;
    text-align: center;
    padding-top: 250px;
    padding-bottom: 100px;
}

.debate_room_com .sj{
    font-size: 20px;
    color: #000;
    margin-bottom: 10px;
}

.debate_room_com p{
    color: #888888;
    font-size: 16px;
}

.bk_cover{
    background: rgba(0, 0, 0, 0.5) url(/resources/img/talks/bk_cover_ic.png) center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}
.bk_cover.on{
    display: block;
}

.step_wrap>.bnt_box{
    width: 100%;
    height: 370px;
    border-radius: 12px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 6px 6px rgba(0,0,0,0.12); 
}

.step_wrap>.bnt_box.mb50{
    margin-bottom: 50px;
}


.bnt_box .left{
    width: 45%;
    height: 100%;
    float: left;
}

.bnt_box .left .shuffle{
    width: 100%;
    height: 100%;
}

.bnt_box .left .shuffle .book{
    width: 190px;
    height: 260px;
}

.bnt_box .left .shuffle li.on{
    width: 230px;
}

.bnt_box .left .shuffle li.on .book .pic{
    height: 250px;
    box-shadow: 0 3px 4px rgb(0 0 0 / 20%);
    border-radius: 0px;
    overflow: hidden;
}

.bnt_box .right{
    width: 55%;
    height: 100%;
    float: left;
    padding: 20px;
}

.bnt_box .right .bkt_book_detail{
    width: 100%;
    height: 100%;
}

.bnt_box .right .bkt_book_detail .book{
    width: 100%;
    height: 100%;
}

.bnt_box .right .bkt_book_detail .book .intro{
    left: 0;
    bottom: 20px;
}

.bnt_box.detail .shuffle li .book .tit{
    display: none;
}

.bnt_box.detail{
    position: relative;
}

.bnt_box.detail .dropBox {
    position: absolute;
    top: calc(100% - 40px);
    right: 0;
    z-index: 200;
    display: none;
    width: 600px;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #7bbf3e;
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

.bnt_box.detail .dropBox .btFold {
    float: right;
}

.bnt_box.detail .dropBox dl {
    clear: both;
    display: block;
    overflow: hidden;
    padding-bottom: 20px;
}

.bnt_box.detail .dropBox dt {
    display: block;
    overflow: hidden;
    color: #7bbf3e;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    padding-top: 30px;
}

.bnt_box.detail .dropBox dt:first-of-type {
    padding-top: 0;
}

.bnt_box.detail .dropBox dd {
    display: block;
    overflow: hidden;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    line-height: 24px;
    padding-top: 10px;
}

.step_box .book h4{
    color: #004486;
    font-size: 20px;
    height: 40px;
    margin-top: 0;
    padding-top: 5px;
    font-weight: 400;
}
.step_box .book h3{
    font-size: 26px;
    font-weight: 400;
    height: auto;
    min-height: 40px;
    margin-bottom: 10px;
}

.step_box .book .txt{
    margin-top: 0px;
    padding-left: 25px;
}

.bnt_box.detail.case2 .left{
    width: 27%;
}

.bnt_box.detail.case2 .right{
    width: 73%;
    padding-left: 0;
}

.bnt_box.detail.case2 .right h3{
    margin-top: 10px;
}

.bnt_box.detail.case2.mdr .right h3{
    margin-top: 0px;
}


.bnt_box.detail.case2 .left .shuffle li.on .book .pic{
    height: 260px;
}

.bnt_box.detail.case2 .dropBox{
    width: 860px;
}

.bnt_box.detail.case2 .txt{
    padding-left: 0px;
}


.nodata{
    font-size: 20px;
    color: #323232;
    text-align: center;
    background: url(/resources/img/talks/no_data01.png) top+40px center no-repeat;
    padding-top: 190px;
    padding-bottom: 80px;
}

.nodata .more.gr{
    background: #7bbf3e;
    color: #fff;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 20px;
}


.nodata.choose{
    background: url(/resources/img/talks/bg_nodata_book.png) top+40px center no-repeat;
}

.nodata.choose .sj{
    color: #323232;
    font-size: 20px;
}

.nodata.choose p{
    font-size: 16px;
    line-height: 1.5;
}

.nodata.student{
    background: url(/resources/img/talks/bg_nodata_student.png) top+40px center no-repeat;
}

.popup .list.on .book .tit{
    font-size: 16px;
    margin-top: 10px;
}

.popup .list.on .book .info{
    font-size: 15px;
    color: #5a5a5a;
    margin-top: 40px;
}

.popup.search .nodata{
    font-size: 18px;
    border-top: 1px solid #b4b4b4;
    background: url(/resources/img/talks/no_data01.png) top+80px center no-repeat;
    background-size: 18%;
}


.step_wrap.student>.left_top{
    width: 528px;
    margin-bottom: 0px;
}

.step_wrap.student .left_top .search{
    width: 100%;
}

.step_wrap.student .left_top .search .find{
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    margin-top: 0px;
}

.step_wrap.student .left_top .search .find .input{
    line-height: 40px;
    height: 100%;
    box-shadow: none;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
    background: #f5f5f5;
    padding: 0 65px 0 20px;
    font-size: 15px;
}

.step_wrap.student .left_top .search .find .btFind{
    background: url(/resources/img/talks/bt_find.png) no-repeat center 50%;
    background-size: 60%;
    right: 5px;
}

.step_wrap.student .left{
    width: calc( (100% - 120px) / 2 );
    height: 800px;
    border: 1px solid #b4b4b4;
    border-radius: 12px;
    float: left;
    padding: 0 10px;
}

.step_wrap.student .right{
    width: calc( (100% - 120px) / 2 );
    height: 800px;
    border: 1px solid #b4b4b4;
    border-radius: 12px;
    float: left;
    padding: 0 10px;
}

.step_wrap.student .bt_box{
    width: 120px;
    height: 800px;
    float: left;
}

.step_wrap.student .left .facet, .step_wrap.student .right .facet {
    position: unset;
    display: block;
    overflow: hidden;
    width: 100%;
}

.step_wrap.student .left  .t, .step_wrap.student .right  .t{
    text-align: center;
    color: #5093d0;
    padding: 0;
    height: 50px;
    line-height: 50px;
}

.step_wrap.student .left  article.facet .mt{
    width: 100%;
    background: #ececec;
}

.step_wrap.student .left  article.facet button{
    position: absolute;
    right: 10px;
    top: 8px;
}

.btDrop.big i::before {
    width: 12px;
    height: 12px;
    border: 3px solid transparent;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
}


.step_wrap.student .left  article.facet .facet_sc_box{
    width: 100%;
    height: 720px;
    overflow-y: auto;
}


.step_wrap.student .left  article.facet .check{
    top: 50%;
    transform: translateY(10px);
    vertical-align: baseline;
}

.step_wrap.student  article.facet .check label::before {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -15px;
    z-index: 1;
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #d7d7d7;
    background-color: #fff;
}

.step_wrap.student article.facet .check {
    margin: 0;
}

.step_wrap.student  article.facet .check label{
    font-size: 18px;
    color: #000;
    padding-left: 50px;
}


.step_wrap.student .left  article.facet .drop.main{
    padding: 0;
}

.step_wrap.student .left article.facet .drop.main .check label {
    font-size: 15px;
    color: #5a5a5a;
    padding-left: 50px;
}

.step_wrap.student .left article.facet .drop.main button{
    position: absolute;
    left: 110px;
    top: -2px;
}

.step_wrap.student .left article.facet .drop.main{
    line-height: 45px;
}

.step_wrap.student .left article.facet .drop.main>li{
    margin-top: 15px;
}

.step_wrap.student .left article.facet  .drop.main .check{
    top: 0%;
    transform: unset;
}
.step_wrap.student .left article.facet .drop.sub{
    padding: 0 40px;
}

.step_wrap.student .left article.facet .drop.sub li{
    height: unset;
    width: 50%;
    float: left;
}

.step_wrap.student  .grid ul > li{
    border-bottom: none;
}

.step_wrap.student .grid ul > li:hover{
    background: #fff;
}

.step_wrap.student .grid ul > li.on {
    background: #f5f5f5;
}

.step_wrap.student  .grid ul > li.th{
    background: #ececec;
}

.step_wrap.student .grid ul > li.th .td{
    color: #323232;
    font-size: 18px;
}

.step_wrap.student .grid ul > li .td{
    color: #5a5a5a;
    font-size: 16px;
}

.step_wrap.student .grid ul > li.th .row{
    height: 50px;
    margin-bottom: 0;
}
.step_wrap.student .grid ul > li.th .row{
    margin-top: 0;
}


.step_wrap.student .grid ul > li .row{
    height: 30px;
    margin-bottom: 15px;
    margin-top: 15px;
}


.step_wrap.student .nodata{
    font-size: 18px;
    background: url(/resources/img/talks/no_data01.png) top+200px center no-repeat;
    background-size: 100px;
    line-height: 300px;
}
.step_wrap.student .right .txt{
    text-align: center;
    /* line-height: 700px; */
    line-height: 650px;
    font-size: 20px;
}

.bt_box div{
    width: 70px;
    height: 80px;
    position: relative;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bt_box div.on{
    height: 100px;
}

.bt_box div.on p{
    display: block;
}

.bt_box p{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    font-size: 14px;
    display: none;
    color: #366999;
}

.bt_box div~div{
    margin-bottom: 10px;
}

.bt_box button{
    width: 80px;
    height: 80px;
    border-radius: 8px;
}

.bt_box .next.de{
     border: 1px solid #cecece;
     background: url(/resources/img/talks/next_de.png) center no-repeat;
}

.bt_box .next{
    background: #ebebeb url(/resources/img/talks/next_g.png) center no-repeat;
}

.bt_box .prev{
    background: #ebebeb url(/resources/img/talks/prev_g.png) center no-repeat;
}

.bt_box .next.on{
    background: #366999 url(/resources/img/talks/next_w.png) center no-repeat;
}

.bt_box .prev.on{
    background: #366999 url(/resources/img/talks/prev_w.png) center no-repeat;
}

.st_title{
    color: #0a3b63;
    font-size: 23px;
    border-bottom: 1px solid #0a3b63;
    background: none;
    padding-bottom: 10px;
    padding-top: 20px;
    font-weight: 500;
    margin-bottom: 0px !important;
    position: relative;
}

.st_title.exp{
    border-bottom: none;
    font-weight: 400;
}

.debate_choice{
    width: 100%;
    margin-top: 50px;
}
.debate_choice_box{
    width: 820px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.debate_choice_box div{
    width: 400px;
    height: 160px;
    background: #ececec;
    float: left;
    border-radius: 12px;
    padding-left: 200px;
    padding-top: 35px;
    cursor: pointer;
}

.debate_choice_box div:nth-child(1){
    margin-right: 20px;
}

.debate_choice_box div p{
    color: #888888;
    font-size: 15px;
}

.debate_choice_box div p:nth-of-type(2){
    margin-top: 15px;
}

.debate_choice_box div.on p{
    color: #ececec;
}

.debate_choice_box .sj{
    font-size: 22px;
}

.debate_choice_box .one{
    background: #ececec url(/resources/img/talks/chat.png) left+40px center no-repeat;
}

.debate_choice_box .one.on{
    background: #6eb92c url(/resources/img/talks/chat_on.png) left+40px center no-repeat;
}

.debate_choice_box .two.on{
    background: #6eb92c url(/resources/img/talks/write_on.png) left+40px center no-repeat;
}

.debate_choice_box .two{
    background: #ececec url(/resources/img/talks/write.png) left+40px center no-repeat;
}


.step_box .st_sub_title{
    color: #448ccd;
    font-size: 20px;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.step_box .st_sub_title::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #448ccd;
    left: 0px;
    top: 5px;
}

.st_sub_title{
    color: #448ccd;
    font-size: 20px;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.st_sub_title::before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #448ccd;
    left: 0px;
    top: 5px;
}

.contents_box{
    width: 100%;
    height: 50px;
    background: #ececec;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 20px;
}

.content_box_text{
    width: 100%;
    height: 180px;
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    margin-bottom: 20px;
    padding: 20px 10px;
    font-size: 16px;
}

.content_box_text:last-child{
    margin-bottom: 0px;
}

.content_box_text::placeholder{
    font-size: 16px;
    color: #888888;
    line-height: 1.7;
}

.contents.link .link_inputbox{
    width: 100%;
    /* height: 50px; */
    margin-bottom: 10px;
}

.contents.link .input{
    width: calc((100% - 70px)/2);
    height: 50px;
    float: left;
}

.input_plus{
    background: #cecece;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    font-size: 42px;
    line-height: 50px;
    text-align: center;
    float:right;
}

.input_plus:hover{
    background: #6eb92c;
    color: #fff;
}

.input_minus{
    background: #cecece;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    font-size: 42px;
    line-height: 50px;
    text-align: center;
    float:right;
}

.input_minus:hover{
    background: #cc5ba7;    
    color: #fff;
}

.contents.book{
    width: 100%;
    margin-bottom: 20px;
    overflow:hidden;
    overflow-x: auto;
    white-space: nowrap;
}

.contents_book_box{
    width: 100%;
    height: 330px;
}

.contents_book_box li{
    width: 16%;
    height: 250px;
    margin-right: 5%;
    background: #ececec;
    position: relative;
    margin-bottom: 2%;
    display:inline-block;
    vertical-align: top;
}

.contents_book_box li:nth-of-type(5n){
    margin-right: 0;
}
.contents_book_box li .book_plus{
    position: absolute;
    width: 60px;
    height: 60px;
    background: #cecece;
    font-size: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    cursor: pointer;
}

.contents_book_box li:hover .book_plus{
    background: #6eb92c;
    color: #ececec;
}

.contents_book_box li .book_minus2{
    position: absolute;
    width: 60px;
    height: 60px;
    background: #cecece;
    font-size: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    cursor: pointer;
}

.contents_book_box li:hover .book_minus2{
    background: #cc5ba7;
    color: #ececec;
}

.contents_book_box.border li{
    height: auto;
    background: none;
}

.contents_book_box li .book_minus{
    width: 100%;
    height: 250px;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
}

.contents_book_box li .book_minus p{
    position: absolute;
    width: 60px;
    height: 60px;
    background: #cecece;
    font-size: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0px;
}

.contents_book_box li:hover .book_minus p{
    background: #cc5ba7;
    color: #fff;
}

.contents_book_box li img{
    width: 100%;
    height: 250px;
    border: 1px solid #dddddd;
    display: block;
}

.contents_book_box li p{
    margin-top: 20px;
    color: #323232;
    font-size: 20px;
}

.st_title .drop {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.st_title .drop::before {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #7bbf3e;
}

.st_title .drop::after {
    position: absolute;
    right: 6px;
    bottom: 8px;
    z-index: 2;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(
135deg
);
}

.st_title .drop.on::after {
    bottom: 4px;
    transform: rotate(
-45deg
);
}

.st_title .btns{
    display: inline-block;
    padding-top: 0px;
    position: absolute;
    left: 150px;
    top: 5px;
}

.st_title span{
    color: #959595;
    font-size: 14px;
    font-weight: 400;
    padding-left: 20px;
}


.topic_box .open_box{
    width: 280px;
    margin: 20px 0;
}

.topic_box .input{
    height: 50px;
    width: calc(100% - 55px);
    margin-bottom: 20px;
}

.topic_box .input_num{
    padding-top: 32px;
    width: 55px;
    float: right;
    text-align: right;
    font-size: 15px;
    color: #888888;
}


.topic_box .topic_sj div{
    width: 100%;
    min-height: 60px;
    height: auto;
    border-radius: 30px;
    padding-left: 75px;
    color: #323232;
    background: #ececec url(/resources/img/talks/topic_bg.png) left+30px center no-repeat;
}

.topic_box .topic_sj div{
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    display:flex;
    align-items : center;
}

.topic_box .topic_sj div p{
    word-break: break-all;
    padding-right: 20px;
}

.topic_box .topic_sj div:last-child{
    margin-bottom: 0px;
}

.topic_box .topic_sj div.on{
    width: 100%;
    border-radius: 30px;
    padding-left: 75px;
    color: #fff;
    background: #448ccd url(/resources/img/talks/topic_bg_on.png) left+25px center no-repeat;
}

.topic_box .topic_sj .pop_bt.wi{
    width: 180px;
}



.card_sj div{
    width: 100%;
    min-height: 60px;
    border-radius: 30px;
    color: #fff;
    background: #448ccd;
    padding-left: 55px;
    font-size: 20px;
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.card_sj div p{
    padding: 5px ;
}


.topic_box .nodata {
    background: none;
    padding-top: 25px;
    padding-bottom: 25px;
}

.topic_box.nodata p{
    color: #323232;
    font-size: 16px;
}

.topic_box .nodata .sj{
    color: #448ccd;
    font-size: 20px;
    margin-bottom: 15px;
}

.topic_box .nodata .more {
    background: #448ccd;
    color: #fff;
    width: 180px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 20px;
}

.pop_bt.wi{
    width: 120px;
}

.pop_bt.wi.editBtn{
	margin-left: 0;
}

.pop_bt.wi02{
    width: 100px;
}

.pop_bt.wi03{
    width: 120px;
}

.pop_bt.make{
    width: 150px;
    background: #6eb92c url(/resources/img/talks/search_detail.png) left+20px center no-repeat;
    padding-left: 35px;
}

.contents .drop {
    position: relative;
    width: 100%;
    padding: 0 10px;
    cursor: pointer;
    font-size: 16px;
    color: #5a5a5a;
    line-height: 1.8;
    margin-bottom: 20px;
}

.contents .drop::before {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #7bbf3e;
}

.contents .drop::after {
    position: absolute;
    right: 6px;
    bottom: 8px;
    z-index: 2;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(
135deg
);
}

.contents .drop.on::after {
    bottom: 4px;
    transform: rotate(
-45deg
);
}

.dropBox.book {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    display: none;
    width: 100%;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #7bbf3e;
    background-color: #fff;
    padding: 10px 20px;
}

.contents .drop p{
	word-break: break-all;
}

/* .contents .drop.book2{
    padding-bottom: 10px;
} */
/* 
.contents .drop.book2::after{
    display: none;
}
.contents .drop.book2::before{
    display: none;
} */

.contents .drop.book2::after {
    right: 6px;
    bottom: 11px;
}

.contents .drop.book2::before {
    right: 0;
    bottom: 4px;
}

.contents .drop.book2.on::after {
    bottom: 7px;
}

.link_box{
    padding-left: 20px;
    padding-bottom: 10px;
}

.link_box .st_sub_title{
    font-size: 16px;
    color: #5a5a5a;
    margin: 5px 0;
    text-decoration: underline;
    cursor: pointer; 
}

.link_box .st_sub_title::before{
    background: #5a5a5a;
}


.mdr_search_box{
    width: 100%;
    height: 150px;
    background: #ececec url(/resources/img/talks/bg_line.png);
    margin-top: 15px;
}

.inner.mdr .debate_room_wrap li{
    width: 22%;
    margin-right: 4%;
    margin-bottom: 5%;
}

.inner.mdr .debate_room_wrap li:nth-of-type(4n){
    margin-right: 0;
}

.inner.mdr .debate_room_wrap li .pic_ic{
    left: 20px;
}

.mdr_num{
    display: block;
    color: #323232;
    font-size: 19px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mdr_num .more {
    background: #6eb92c;
    color: #fff;
    width: 160px;
    height: 40px;
    font-size: 15px;
    border-radius: 20px;
}

.debate_sj .more {
    background: #0a3b64;
    color: #fff;
    width: 160px;
    height: 40px;
    font-size: 14px;
    border-radius: 20px;
    margin-top: -10px;
}

.mdr.date{
    width: 840px;
    margin: 0 auto;
    padding-top: 25px;
}

.mdr.date .left{
    width: 10%;
    float: left;
    height: 40px;
    line-height: 40px;
}

.mdr.date .right{
    width: 90%;
    float: left;
}

.mdr.date .right .field{
    width: calc(100% - 310px);
    height: 40px;
}

.mdr.date .right .field.date::before {
    left: 44.5%; 
    height: 40px;
    line-height: 40px;
}

.mdr.date .right .field.date .input.date{
    background: #fff url(/resources/img/talks/bt_cal.png) left+10px center no-repeat;
    width: 200px;
    border: none;
    box-shadow: 5px 0 10px rgb(0 0 0 / 7%);
}

.mdr.date .right .month .bt_month{
    width: 100px;
    height: 40px;
    background: #fff;
    box-shadow: 5px 0 10px rgb(0 0 0 / 7%);
    font-size: 15px;
    float: left;
}

.mdr.date .right .month .bt_month.on{
    background: #828282;
    color: #fff;
}

.mdr.date .right .month button~button{
    margin-left: 5px;
}
.mdr.date .right .input.name{
    background: #fff;
    box-shadow: 5px 0 10px rgb(0 0 0 / 7%);
    border: none;
    font-size: 15px;
    width: calc(100% - 110px);
}

.mdr.date .drName{
    margin-top: 20px;
}

.mdr.date .drName .btns{
    padding-top: 0;
}

.mdr.date .stxt{
    display: none;
}

.mdr.date .btns.mo{
    display: none;
}

/* .pic_box:hover .pic_box_hover{
    display: block;
} */
.pic_box_hover{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    border-radius: 12px;
}

.pic_box_hover p{
    font-size: 22px;
    color: #fff;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.5;
}

.nodata .txt_box{
    font-size: 16px;
    color: #5a5a5a;
    text-align: center;
}

.nodata .txt_box .sj{
    font-size: 22px;
    color: #0a3b64;
    margin: 20px 0;
}
.nodata .bt_debate.wi{
    width: 150px;
}

.nodata.mdr .txt_box .sj{
    margin: 15px 0;
    color: #323232;
}

.step_wrap > .mdr_box{
    width: 450px;
    height: 300px;
    border: 1px solid #b4b4b4;
    border-radius: 12px;
    box-shadow: 0px 6px 6px rgb(0 0 0 / 12%);
    margin-right: 30px;
    padding: 40px 30px;
    position: relative;
    /* overflow: hidden; */
}

.mdr_box .pic_ic{
    left: unset;
    right: 20px;
}

.mdr_box .txt_box .sj{
    color: #323232;
    font-size: 20px;
    margin-bottom: 70px;
}

.mdr_box .txt_box .txt{
    color: #5a5a5a;
    font-size: 18px;
    line-height: 1.5;
}
.mdr_box .txt_box .txt span:nth-child(1){
    position: relative;
    padding-right: 10px;
}

.mdr_box .txt_box .txt span:nth-child(1)::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 18px;
    background: #5a5a5a;
    top: 4px;
    right: 0px;
}

.mdr_box .txt_box .txt.code span:nth-child(2){
    width: 150px;
    height: 40px;
    display: inline-block;
}
.mdr_box .txt_box .txt.code span:nth-child(2) button{
    background: url(/resources/img/talks/code_ic.png) center/cover no-repeat ;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-bottom: 8px;
}


.step_wrap > .bnt_box.detail.case2.mdr{
    width: calc(100% - 480px);
    height: 300px;
    overflow: hidden;
} 
.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book {
    transform: scale(1.0);
}

.step_wrap > .bnt_box.detail.case2.mdr .left .shuffle li.on .book .pic{
    width: 187px;
    height: 250px;
    overflow: hidden;
    cursor: default;
}

.bnt_box.detail.case2.mdr .left{
    width: 230px;
}

.bnt_box.detail.case2.mdr .right{
    width: calc(100% - 230px);
}

.bnt_box.detail.case2.mdr  .right .bkt_book_detail .book .intro{
    bottom: 70px;
}


.bnt_box.detail.case2.mdr  .right .bkt_book_detail .book .btns.mdr{
    display: block;
    bottom: 5px;
    right: 0px;
    left: unset;
    width: 270px;
}

.bnt_box.detail.case2.mdr  .right .bkt_book_detail .book .btns.mdr.exp{
    width: auto;
}

.bnt_box.detail.case2.mdr  .right .bkt_book_detail .book .btns.mdr .pop_bt{
    font-size: 15px;
    height: 35px;
    line-height: 35px;
    padding-left: 25px;
}

.step_wrap > .mdr_box>p{
    display: none;
}


.bnt_box.detail.case2.mdr.off p{
    display: none;
}

.pop_bt.open{
    background: #448ccd url(/resources/img/talks/bt_book_open.png) left+15px center no-repeat;
    width: 145px;
    color: #fff;
}
.pop_bt.int{
    background: #ececec url(/resources/img/talks/bt_like_on.png) left+15px center no-repeat;
    color: #000;
    width: 145px;
}

.pop_bt.making{
    width: 220px;
}

.banner_box{
    width: 100%;
    min-height: 80px;
    background: #448ccd url(/resources/img/talks/acc07.png) left+50px bottom no-repeat;
    border-radius: 12px;
    box-shadow: 0px 6px 6px rgb(0 0 0 / 12%);
    color: #fff;
    font-size: 18px;
    /* line-height: 80px; */
    padding-left: 150px;
    margin-bottom: 60px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}


.inner.exp{
    padding: 0;
}

.inner.exp2{
    padding: 0;
    margin-top: 50px;
}

.nodata.scrap{
    background: url(/resources/img/talks/bg_nodata_scrap.png) top+50px center no-repeat;
    padding-bottom: 150px;
}


.nodata.scrap2{
    background: url(/resources/img/talks/bg_nodata_write.png) top+50px center no-repeat;
    padding-bottom: 150px;
}

.nodata.scrap2 .sj{
    font-size: 20px;
    margin-bottom: 15px;
    color: #323232;
}

.nodata.scrap2 p{
    color: #5a5a5a;
    font-size: 16px;
}

.nodata.scrap2.secret{
    background: url(/resources/img/talks/acc02.png) top+30px center no-repeat;
    padding-bottom: 150px;
}

.inf_wrap .pop_bt {
    width: 145px;
}

.score{
    width: 100%;
    height: 60px;
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    color: #448ccd;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    border-radius: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}
.score_box{
    width: 100%;
}

.score_list{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 60px;
}
.score_list li{
    width: 100%;
    min-height: 50px;
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    color: #323232;
    /* line-height: 50px; */
    color: #323232;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.score_list li .num{
    color: #448ccd;
    font-size: 20px;
    width: 50px;
    text-align: center;
}

.score_list li span:nth-of-type(2){
    width: calc(100% - 110px);
}

.score_list li .sc{
    color: #448ccd;
    font-size: 16px;
    width: 70px;
}

.score_list li ~ li{
    margin-top: 10px;
}

.score_list.mb0{
    margin-bottom: 0;
}

.score_list2{
    margin-bottom: 60px;
    margin-top: 10px;
}

.score_list2 li {
    background: #448ccd;
    color: #fff;
    padding: 0 10px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.score_list2 li .sc {
    font-size: 16px;
    color: #fff;
    padding-right: 8px;
}

/* 학생의견 */

.comment_box .top h4{
    color: #000;
    font-size: 19px;
}

.nodata.scrap2 .more.gr{
    background: #7bbf3e url(/resources/img/talks/bt_op.png) left+20px center no-repeat;
    padding-left: 30px;
}

.comment_box .top .more.gr {
    background: #7bbf3e url(/resources/img/talks/bt_op.png) left+20px center no-repeat;
    color: #fff;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 0px;
    padding-left: 30px;
}

.comment_box .top .more.gr2{
    background: #7bbf3e url(/resources/img/talks/bt_whole.png) left+25px center no-repeat;
    color: #fff;
    width: 150px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 0px;
    padding-left: 30px;
}

.cmt_list>li{
    width: 100%;
    /* background: #f5f5f5; */
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    margin-top: 20px;
}

.inf_wrap{
    width: 100%;
    padding: 20px 30px;
}

.inf_wrap .id{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #448ccd;
    color: #fff;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
}
.inf_wrap .id.o{
    background: #7bbf3e;
}

.inf_wrap .id.x{
    background: #cc5ba7;
}

.inf_wrap .id_name{
    padding-left: 20px;
}

.inf_wrap .id_name p:nth-of-type(1){
    margin-top: 10px;
    margin-bottom: 3px;
}

.inf_wrap .id_name p:nth-of-type(2){
    color: #888888;
}

.inf_wrap .btns{
    padding-top: 10px;
}

.drop.op{
    color: #5a5a5a;
    font-size: 16px;
    line-height: 1.7;
    position: relative;
    padding: 0px 30px 20px 30px;
}

.drop.op::before {
    position: absolute;
    right: 20px;
    bottom: 23px;
    z-index: 1;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #7bbf3e;
    cursor: pointer;
}

.drop.op::after {
    position: absolute;
    right: 26px;
    bottom: 31px;
    z-index: 2;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(
135deg
);
cursor: pointer;
}


.drop.op.on::after {
    bottom: 26px;
    transform: rotate( 
-45deg
 );
}


.cm_bt li{
    width: 50%;
    float: left;
    /* text-align: center; */
    height: 50px;
    line-height: 50px;
    color: #5a5a5a;
    font-size: 16px;
    border-top: 1px solid #d7d7d7;
    cursor: pointer;
}

.cm_bt li:nth-of-type(1){
    background: #fff url(/resources/img/talks/rec.png) 32% center no-repeat;
    border-right: 1px solid #d7d7d7;
    border-bottom-left-radius: 12px;
    padding-left: 19%;
}

.cm_bt li.on:nth-of-type(1){
    color: #6eb92c;
    background: #fff url(/resources/img/talks/rec_on.png) 32% center no-repeat;
    font-weight: 500;
}

.cm_bt li.on:nth-of-type(2){
    color: #0a3b64;
    background: #fff url(/resources/img/talks/comment_on.png) 40% center no-repeat;
    font-weight: 500;
}

.cm_bt li:nth-of-type(2){
    background: #fff url(/resources/img/talks/comment.png) 40% center no-repeat;
    border-bottom-right-radius: 12px;
    padding-left: 22.5%;
}

.cm_bt .answer{
    width: 100%;
    padding: 1px 0 10px 0;
    height: auto;
}

.cm_bt .answer .input{
    width: calc(100% - 160px);
    height: 50px;
    border-radius: 25px;
    margin-top: 10px;
    margin-left: 10px;
}

.cm_bt .answer .pop_bt{
    background: #0a3b64;
    margin-top: 14px;
    margin-right: 10px;
    width: 120px;
}

.an_comment{
    width: 100%;
    padding: 20px 30px;
}
.an_comment .user{
    width: 65px;
    height: 50px;
    background: url(/resources/img/talks/user.png) left center no-repeat;
}
.an_comment .nc{
    width: calc(100% - 65px);
    text-align: left;
    font-size: 16px;
    color: #5a5a5a;
    line-height: 1.5;
}

.an_comment .nc .name{
    font-size: 16px;
    color: #323232;
    margin-bottom: 5px;
    margin-top: 5px;
}

.an_comment .nc .name span{
    font-size: 14px;
    color: #888888;
}


.more.gr.big {
    background: #7bbf3e;
    color: #fff;
    width: 180px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;

}

.more.gr.big.bl{
    background: #396999;
    width: 100px;
    margin-top: 0;
    float: right;
    display: none;
}

.more.gr.big2 {
    background: #7bbf3e;
    color: #fff;
    width: 180px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.more.gr.big3{
    background: #7bbf3e;
    color: #fff;
    width: 180px;
    height: 40px;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.blind .blind_top{
    margin-top: 20px;
    margin-right: 30px;
}

.blind_top h4{
    font-size: 19px;
    color: #0a3b64;
}

.blind p{
    font-size: 20px;
    color: #323232;
    text-align: center;
    padding-top: 110px;
    padding-bottom: 90px;
}

.popup.op h4{
    font-size: 18px;
    color: #323232;
    font-weight: 400;
    position: relative;
    display: block;
    text-align: left;
    margin-top: 25px;
}

.popup.op h4::before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #6eb92c;
    border-radius: 50%;
    top: 17px;
    left: -10px;
}

.popup.op h4>span{
    color: #888888;
    font-size: 14px;
}

article.popup.op .popBox .btns{
    text-align: center;
}

.radio_bt_box{
    text-align: left;
}

.radio_bt_box span{
    margin-right: 35px;
    margin-bottom: 10px;
}

.radio_bt_box .check label {
    height: 45px;
    line-height: 57px;
    padding-left: 40px;
}

.popup.op .textarea{
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    padding-left: 20px;
    padding-top: 10px;
    height: 220px;
}

.text_area_box{
    position: relative;
}

.txt_number{
    position: absolute;
    z-index: 10;
    font-size: 14px;
    color: #959595;
    bottom: 10px;
    right: 20px;
}

.btTxt.end{
    position: absolute;
    right: 0;
    color: #5a5a5a;
    background: #fff;
    border: 1px solid #b4b4b4;
}
.btns.por{
    position: relative;
}

.btns.pd0{
    padding-top: 0px;
}

.btns.exp3{
    position: absolute;
    right: 20px;
    bottom: 30px;
}

.btns.exp3 .pop_bt{
    background: #ececec;
    color: #000;
    width: 130px;
    height: 34px;
    line-height: 34px;
    font-size: 15px;
}

.st_title .btns.re{
    right: 0;
    text-align: right;
}

.notice_write_box{
    width: 100%;
}

.notice_write_box .input{
    width: calc(100% - 60px);
    margin-bottom: 20px;
}
.notice_write_box .content_box_text{
    font-size: 15px;
    padding: 10px;
    color: #323232;
}

.notice_write_box .content_box_text::placeholder{
    font-size: 15px;
}

.notice_write_box .check label {
    padding-left: 25px;
}

.notice_write_box .check input:checked ~ label::before {
    border: 1px solid #b4b4b4;
    background-color: #ffffff;
}

.notice_write_box .check label::after {
    left: 0px;
}

.notice_write_box .check label::before {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9.5px;
    z-index: 1;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #b4b4b4;
}

.notice_write_box .check{
    vertical-align: baseline;
    margin-top: 2px;
    width: 55px;
}

.grid.box.mg .input_minus.on{
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 38px;
    background: #cc5ba7;
    color: #fff;
}

.grid ul > li .td.sc{
    color: #448ccd;
    cursor: pointer;
}

.select_box{
    width: 100%;
}

.select_box .select{
    width: 125px;
    margin-right: 10px;
}

.select_box .find{
    width: 270px;
}

.select_box .input{
    border-radius: 20px;
    padding-left: 20px;
}

.select_box .student{
    width: 15%;
    height: 40px;
    line-height: 40px;
}

.select_box .select.wi04{
    width: 83%;
}

.grid.pop .check label::before {
    margin-top: -15px;
    background-color: #fff;
    border: 1px solid #b4b4b4;
    width: 30px;
    height: 30px;
    left: 0px;
}

.grid.pop .check label::after{
    left: 4px;
    margin-top: -11px;
}



.nodata_grid{
    border-bottom: none !important;
}

.nodata_grid p{
    font-size: 18px;
    color: #323232;
    padding: 90px 0;
}

.total_grade{
    text-align: left;
}
.total_grade span{
    vertical-align: middle;
    padding-right: 20px;
}
.total_grade span:nth-of-type(2){
    padding-left: 10px;
}

.total_grade .input{
    width: 80px;
}

.grade_list{
    text-align: left;
}

.grade_list .contents.link input:nth-of-type(1){
    width: 400px;
    height: 40px;
}

.grade_list .contents.link input:nth-of-type(2){
    width: 70px;
    height: 40px;
    margin-right: 5px;
}

.grade_list .contents.link .input_minus{
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 34px;
}

.grade_list .contents.link .input_plus{
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 34px;
}

.popup.custom .student{
    text-align: left;
    /* overflow-y: auto;
    max-height: 350px; */
}

.popup.custom .student.maxh{
    /* max-height: 200px; */
}

.popup.custom .student p{
    margin-bottom: 10px;
    margin-top: 20px;
}

.popup.custom .student_sj{
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: left;
}

.popup.custom .student .box{
    width: 100%;
    min-height: 50px;
    background: #ececec;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
}

.popup.custom .student .grade{
    color: #448ccd;
}

.popup.custom .grade_list.student .box {
    text-align: left;
    padding: 0 10px;
}

.popup.custom .student .box .list_tit{
    font-weight: 500;
}

.popup.custom .student .box span{
    color: #448ccd;
    padding: 0 5px;
}

.popup.custom .student .box .col{
    color: #323232;
    width: calc(100% - 220px);
    display: inline-flex;
    align-content: center;
    line-height: normal;
    margin-bottom: 14px;
}

.popup.custom .student .box .input{
    width: 45px;
    height: 30px;
    vertical-align: baseline;
    padding-left: 5px;
}


.popup.custom .grade_list.student .box.heauto{
    height: auto;
    padding: 0;
    margin-bottom: 20px;
}
.grade_list.student .box.heauto span:nth-of-type(4){
    margin-right: 15px;
}

.grade_list.student .drop_bt{
    background: url(/resources/img/talks/drop_bt.png) no-repeat center;
    margin-right: 5px;
    margin-left: 15px;
    cursor: pointer;
}

.grade_list.student .drop_bt.on{
    background: url(/resources/img/talks/dropbt_on.png) no-repeat center;
}

.grade_list.student .drop_bt_subbox{
    width: 100%;
    background: #fff;
    padding: 0 25px;
    display: none;
}

.grade_list.student .drop_bt_subbox.on{
    display: block;
}

.grade_list.student .drop_bt_subbox span{
    font-size: 16px;
    color: #5a5a5a !important;
}

.grade_list.student .drop_bt_subbox .grade span{
    padding: 0px;
}

.grade_list.student .drop_bt_subbox .grade span:nth-of-type(2){
    color: #448ccd !important;
}

.grade_list.student .drop_bt_subbox>ul>li>span:nth-of-type(1){
    margin-right: 20px;
}

.key_box{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 50px;
    display: flex;
    justify-content: left;
}

.key_box div{
    padding: 10px 20px;
    /* height: 40px;
    line-height: 40px; */
    border: 1px solid #55a014;
    border-radius: 20px;
    color: #55a014;
    cursor : pointer;
}

.key_box div~div{
    margin-left: 10px;
}

.content.debate_book .title h3{
    font-size: 26px;
    color: #0a3b63;
}

.content.debate_book .title::after{
    display: none;
}

.content.debate_book .btns button~button{
    margin-left: 5px;
}

.bnt_month{
    width: 100%;
    margin: 30px 0;
}

.bnt_month li{
    width: 30%;
    margin-right: 5%;
    float: left;
    overflow: hidden;
}

.bnt_month li:nth-of-type(3n){
    margin-right: 0;
}

.bnt_month li img{
    width: 100%;
    height: 352px;
    display: block;
}

.bnt_month a{
    display: block;
    height: 100%;
}

.bnt_month li p{
    margin-top: 10px;
    color: #323232;
    font-size: 20px;
    text-align: left;
}

.bnt_month.lib{
    margin: 0;
}

.bnt_month.lib li{
    width: 22%;
    margin-right: 4%;
    height : 329px;
    margin-bottom: 50px;
}

.bnt_month.lib li:nth-of-type(4n){
    margin-right: 0;
}

.bnt_month.lib li img{
    width: 100%;
    height: 259px;
}

.nodata.bkt{
    background: url(/resources/img/talks/acc08.png) top+90px center no-repeat;
    padding-top: 250px;
}

.nodata.bkt .sj{
    color: #0a3b64;
}

.search_left{
    width: 20%;
    height: 40px;
    line-height: 40px;
    float: left;
    font-size: 16px;
    color: #5a5a5a;
    margin-top: 20px;
    text-align: left;
}
.search_right{
    width: 80%;
    float: left;
}

.search_right .check{
    width: 108px;
    height: 30px;
}

.search_right .check label{
    padding-left: 30px;
    padding-top: 2px;
}

.search_right .check label::before {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    z-index: 1;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #b4b4b4;
}

.search_right .check input:checked ~ label::before {
    border-color: #8d8d8d;
    background-color: #fff;
}

.search_right .check label::after {
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -9px;
    z-index: 2;
    content: "";
    display: none;
    overflow: hidden;
    width: 23px;
    height: 11px;
    border-top: 2px solid #787878;
    border-right: 2px solid #787878;
    transform: rotate(
135deg
);
}

.search_right .month .bt_month{
    width: 32.666%;
    height: 40px;
    background: #ececec;
    font-size: 15px;
    float: left;
    margin-top: 10px;
    margin-right: 1%;
}

.search_right .month .bt_month:last-child{
    margin-right: 0;
}

.search_right .month .bt_month.on{
    background: #828282;
    color: #fff;
}

/* .search_right .month button~button{
    margin-left: 5px;
} */

.search_right .input.date {
    width: 203px;
    background: #f5f5f5 url(/resources/img/talks/bt_cal.png) left+10px center no-repeat;
    padding-left: 50px;
}

.search_right.content .check {
    width: 108px;
    height: 30px;
    padding-left: 10px;
    padding-top: 2px;
}

.search_right .check label {
    padding-left: 25px;
    padding-top: 2px;
}

.search_right .field.date::before {
    position: absolute;
    left: 46.5%;
    top: 7px;
    content: "~";
    display: block;
    width: 6%;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-size: 14px;
    text-align: center;
}


.detail_search_bt{
    width: 60px;
    height: 40px;
    background: #ececec url(/resources/img/talks/search_detail_bt.png) center no-repeat;
    float: right;
    border-radius: 20px;
    background-size: 25px;
    display: none;
    margin-top: -10px;
}

.detail_search_bt2 {
    width: 60px;
    height: 40px;
    background: #ececec url(/resources/img/talks/search_detail_bt.png) center no-repeat;
    float: right;
    border-radius: 20px;
    background-size: 25px;
    display: none;
    margin-top: 0px;
}

.mdr_search_top{
    display: none;
}

.up_down{
    position: relative;
}

/* .md.up_down::after{
    content: "";
    width: 0px;
    height: 0px;
    border-top:  none;
    border-bottom:10px solid #000;
    border-right: 7px solid transparent;
    border-left: 7px solid  transparent;
    bottom: 18px;
    position: absolute;
    cursor: pointer;
    left: 60%;
}

.xs.up_down::after{
    content: "";
    width: 0px;
    height: 0px;
    border-top:  none;
    border-bottom:10px solid #000;
    border-right: 7px solid transparent;
    border-left: 7px solid  transparent;
    bottom: 18px;
    position: absolute;
    cursor: pointer;
    left: 75%;
} */

.td.up_down>div{
    cursor: pointer;
    display: inline-block;
}
.td.up_down.on>div{
    transform: rotate(1800deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}


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

.mobile_popup div{
    position: relative;
    width: 90%;
    background: #fff;
    border-radius: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    text-align: center;
    font-size: 18px;
}

.mobile_popup div li{
    padding: 20px;
    border-bottom: 1px solid #b4b4b4;
    color: #323232;
}

.mobile_popup div li:last-child{
    border-bottom: none;
}

.mobile_popup div li:nth-of-type(1){
    line-height: 1.7;
}

.mobile_popup div li:nth-of-type(1) b{
    color: #366999;
    font-weight: 400;
}

.mobile_popup div li:nth-of-type(1) p:nth-of-type(2){
    font-size: 16px;
}

.mo_img_box{
    display: none;
    width: 150px;
    height: 150px;
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    margin-top: 10px;
    text-align: center;
    position: relative;
}

.mo_img_box p{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #888888;
    font-size: 18px;
}

.popup.search .msg {
    font-size: 18px;
    text-align: left;
    padding: 0;
}

.popup.search .msg span {
    font-size: 14px;
    color: #888888;
    padding-left: 10px;
}


.txt.tof3{
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.5;
}

.mo_write{
    width: 50px;
    height: 50px;
    background: url(/resources/img/talks/mo_write.png)  center/cover no-repeat;
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 100;
    display: none;
}

.mo_tab_bt {
    position: absolute;
    background: url(/resources/img/talks/mobile_tab_bt.png) center/cover no-repeat;
    width: 35px;
    height: 35px;
    right: 10px;
    top: 10px;
    display: none;
}

.grade_list .contents.link input:nth-of-type(2).score-input-standard {
	margin-right: 0;
}
.popup.custom .student .box .input[name=scoreInput]{
	width: 50px;
	padding: 0;
	padding-left: 5px;
}
.popup.custom .student .box .input[name=scoreInput].eachpop {
	width: 45px;
}


/* 로딩 css */
.nb-spinner_wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	background:rgba(0,0,0,0.6);
	top:0;
	left:0;
	z-index: 1000;
}
.nb-spinner {
   width: 75px;
   height: 75px;
   margin: 0;
   background: transparent;
   border-top: 4px solid #32aae6;
   border-right: 4px solid transparent;
   border-radius: 50%;
   -webkit-animation: 1s spin linear infinite;
   animation: 1s spin linear infinite;
   position: absolute;
   left: calc(50% - 50px);
   top: calc(50% - 50px);
   z-index: 998;
 }
.nb-spinner_msg {
	position: absolute;
	left: calc(50% - 185px);
	top: calc(50% - -50px);
	color: white;
	font-size: 25px;
	text-align: center;
	width: 360px;
}
 @-webkit-keyframes spin {
   from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes spin {
   from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }