@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; }
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: 155px; }
.wrap { position: relative; width: 100%; height: 100%; }
.category .wrap {overflow: hidden; overflow-y:auto;}
.inner { display: block; width: 100%; max-width: 1200px; font-size: 0; padding: 0 12px; margin: 0 auto; }
.inner.mt40 {margin-top: 40px;}

.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}

.tof {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tof22 {
    display: -webkit-box; /* 유연한 박스 모델 적용 */
    -webkit-box-orient: vertical; /* 세로 방향 박스 설정 */
    -webkit-line-clamp: 2; /* 최대 2줄까지 표시, 이후 말줄임표(...) */
    overflow: hidden; /* 넘치는 내용 숨기기 */
    text-overflow: ellipsis; /* 말줄임표(...) 적용 */
    word-wrap: break-word; /* 단어가 길면 줄바꿈 */
}

/* bx-slider */
.bx-wrapper { position: relative; width: 100%; height: 100%; }
.bx-wrapper .bx-viewport { display: block; width: 100%; height: 100%; }
.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("../img/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("../img/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%; }




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

/* BT_TXT */
.btTxt { position: relative; display: inline-block; overflow: hidden; min-width: 100px; height: 40px; line-height: 40px; color: #000; font-size: 16px; font-weight: 400; text-align: center; border-radius: 20px; background-color: #ececec; 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 .ico { position: relative; width: auto; height: 100%; text-indent: 0; padding-left: 25px; }
.btTxt .ico.view { background: url("../img/ico_view.png") no-repeat 0 50%; }
.btTxt .ico.have { background: url("../img/ico_have.png") no-repeat 0 50%; }
.btTxt .ico.rental { background: url("../img/ico_rental.png") no-repeat 0 50%; }
.btTxt .ico.heart { background: url("../img/ico_like.png") no-repeat 0 50%; }
.btTxt .ico.edit { background: url("../img/bt_edit.png") no-repeat 0 50%; background-size: 13px; padding-left: 18px; }
.btTxt .ico.del { background: url("../img/bt_delete.png") no-repeat 0 50%; background-size: 13px; padding-left: 18px; }
.btTxt .ico.scrap { color: #448ccb; font-weight: 400; background: url("../img/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.del{display:none;}

.btTxt.s { color: #fff; background-color: #0a3b64; }
.btTxt.s .ico.next::before { border-top: 2px solid #fff; border-right: 2px solid #fff; }
.btTxt.ss { color: #fff; background-color: #448ccb; }
.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; }

#removeBtn{background-color:  #F4792A; color: #FFFFFF; }

/* BT_WRITE */
.btWrite { display: inline-block; overflow: hidden; min-width: 100px; height: 40px; line-height: 39px; 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("../img/bt_delete.png") no-repeat center 50%; background-size: auto 20px; text-indent: -9999px; }

/* BT_MY */
.btMy { display: inline-block; overflow: hidden; width: 45px; height: 45px; background: url("../img/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: url("../img/bt_find_b.png") no-repeat center 50%; background-size: auto 21px; text-indent: -9999px; }

/* BT_OUT */
.btOut { display: block; overflow: hidden; text-align: center; background-color: #dbdbdb; }
.btOut i { display: inline-block; height: 35px; line-height: 35px; color: #555; font-size: 12px; background: url("../img/bt_out.png") no-repeat 0 50%; padding-left: 20px; }

/* 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("../img/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("../img/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;cursor: default; }
.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; word-break: break-all;}
.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 #f9bc94; 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 #f9bc94; 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: #f9bc94; }
.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: 180px; height: 35px; line-height: 34px; color: #000; font-size: 16px; border: 1px solid #f9bc94; border-radius: 10px; background: url("../img/ico_ebook.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: -4.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); }
.btMore.mt5 { margin-top: 5px !important;}

/* 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: 25px; height: 25px; border-radius: 50%; background: #e6e7e8 url("../img/ico_question.png") no-repeat center 50%; background-size: 10px; vertical-align: middle; }
.btTip span { position: absolute; left: calc(100% + 10px); top: 0; z-index: 200; display: none; height: auto; min-height: 35px; color: #0a3b64; 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; }

/* 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("../img/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("../img/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("../img/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("../img/bt_book_see.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("../img/bt_book_down.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; margin-right: 8px;}
.btDown{display : none;}
/* BT_LIKE */
.btLike { position: relative; display: inline-block; overflow: hidden; width: 35px; height: 35px; background: url("../img/bt_book_like.png") no-repeat center 50%; text-indent: -9999px; vertical-align: middle; }
.btLike.on { background-image: url("../img/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("../img/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("../img/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("../img/bt_list_on.png") no-repeat center 50%; text-indent: -9999px; cursor: pointer; }
.btList i:first-of-type { background: #396999 url("../img/bt_list_w.png") no-repeat center 50%; margin-right: 5px; }
.btList.on i { background: #396999 url("../img/bt_list_on_w.png") no-repeat center 50%; }
.btList.on i:first-of-type { background: #e2e2e2 url("../img/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("../img/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("../img/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("../img/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("../img/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("../img/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("../img/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 20px; }
.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; }

/* btnInterest on*/

.btTxt.btnInterest.on{
	background-color: #0a3b64;
	color: #ffffff;
}

/****************************** 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; }
.input.h45 {height: 45px;}
.input.h-45 {padding: 0 30px;}
.input.pd30 {padding: 0 30px;}
.inputstar{    
	position: absolute;
    z-index: 100;
    color: red;
    width: 10px;
    height: 10px;
    font-size: 15px;
    top: 10px;
    left: 10px; 
}
.inputstar2{    
	position: absolute;
    z-index: 100;
    color: red;
    width: 10px;
    height: 10px;
    font-size: 15px;
    top: 10px;
    left: 191px; 
}
.redstar{color:red;}


/* SELECT */
.select { position: relative; display: inline-block; overflow: visible; vertical-align: middle; min-width: 75px; }
.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 16px 0 7px; 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: 16px; 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%; }



/* 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: #000; font-size: 14px; 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: 15px; height: 15px; border: 1px solid #898989; background-color: #fff; }
.check label::after { position: absolute; left: 3px; top: 50%; margin-top: -6px; z-index: 2; content: ""; display: none; overflow: hidden; width: 10px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); }
.check input:checked ~ label::before { border-color: #0069b5; background-color: #0069b5; }
.check input:checked ~ label::after { display: block; }

/* CHECKBOX : RADIO */
.check.radio label::before { border-radius: 50%; }
.check.radio label::after { margin-top: -5px; width: 9px; height: 9px; border: 0; border-radius: 50%; background-color: #0069b5; transform: none; }
.check.radio input:checked ~ label::before { border-color: #0069b5; background-color: #fff; }

/* 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: 10px; }
.check.radio.noTxt label::after { left: 9px; margin-top: -6px; width: 12px; height: 12px; }

/* CHECKBOX : ONOFF */
.check.onoff label { padding: 0; padding-right: 95px; }
.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; }
.check.onoff.mr{ margin-right : 15px;}
.check.onoff.mr i {font-size : 16px;}


/* 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("../img/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; }

.field.date.exp{ z-index: 111; }

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

/* ICON */
.ico { display: inline-block; overflow: hidden; width: 30px; height: 30px; text-indent: -9999px; }
.ico.ebook { background: url("../img/ico_ebook.png") no-repeat center 50%; background-size: 100%; }
.ico.home { background: url("../img/ico_home.png") no-repeat center 50%; }
.ico.clip { background: url("../img/ico_clip.png") no-repeat 0 50%; background-size: 20px; }
.ico.file { background: url("../img/ico_file.png") no-repeat center 50%; }
.ico.link { background: url("../img/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("../img/bt_x.png") no-repeat center 50%; vertical-align: text-top; margin-left: 10px; cursor: pointer;}
 */
/* PATH */
.path { display: none; overflow: hidden; background: #f9f9f9 url("../img/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; margin-bottom: 5px; height: 30px; color: #fff799; font-size: 18px; font-weight: 500; line-height: 30px; }
.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: 43px; 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: 240px; 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: #3d2926; font-size: 20px; font-weight: 300; line-height: 30px; text-align: left; text-overflow: ellipsis; white-space: normal; margin-top: 20px; }
.book .tit em { display: block; color: #898989; font-size: 16px; }
.book .tit mark { display: block; color: #0072bc; font-size: 16px; }
.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 #f4792a; 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: #f4792a; padding-top: 5px; }
.book .tit.recom.col02::after {background-color:#8fc587; }
.book .tit.recom.col02::before {border: 9px solid #8fc587; border-bottom: 5px solid transparent; }
.book .tit.tc em { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;  overflow: hidden; text-overflow: ellipsis; white-space: normal; font-size:14px;}
.book .txt { display: block; overflow: hidden; color: #000; font-size: 16px; font-weight: 300; line-height: 120%; margin-top: 20px; text-align: left; }
.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; text-align: left; }
.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: 14px; }
.book .word .btTxt { height: 25px; line-height: 25px; min-width: 75px; font-size:14px; color: #0072bc; border: 1px solid #cbcbcb; background-color: #fff; margin: 10px; margin-left: 0; cursor: default; }
.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; text-align: left; }
.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: #000; font-size: 16px; font-weight: 500; line-height: 20px; text-align: left; margin-top: 10px; }
.book .intro dd { display: block; overflow: hidden; color: #000; font-size: 16px; line-height: 20px; text-align: left; margin-top: 10px; }/*
.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: 50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; padding-right: 25px;line-height: 28px; 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: #f4792a; }
.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; }

/* 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("../img/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; word-break:break-all; font-weight: 300; line-height: 120%; text-align: left; border-top: 1px solid #396999; border-bottom: 1px solid #396999; padding: 35px 0 10px; }
.teach .report .tit {padding-bottom: 30px;}
.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;word-break:break-all;-webkit-box-orient:vertical; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; height: 60px; overflow: hidden; line-height: 30px; text-overflow: ellipsis; white-space: normal; }
.report .con { display: block; overflow: hidden; color: #000; font-size: 15px; line-height: 28px; text-align: left; padding: 50px 0; }
.report .re { display: block; overflow: hidden; height: 50px; border-bottom:1px solid #f9ae40; line-height: 50px; color: #000; font-size: 14px; text-align: right; /* border-top: 6px solid #ececec; */ background: url("../img/ico_reply.png") no-repeat right 50%; padding-right: 50px; }
.report .btns { text-align: right;/*  border-bottom: 1px solid #d7d7d7; */ padding: 10px 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: 16px; font-weight: 300; line-height: 150%; text-align: left; vertical-align: middle; background-color: #ececec; padding: 15px 20px; }
.cate .txt strong { position: absolute; bottom: 105%; left: 0; right: 0; display: block; line-height: 32px; color: #fff; font-size: 25px; font-weight: 500; padding: 0 20px; }

/* CARD */
.card { display: table; width: 400px; height: 400px; margin: auto; }
.card .pic { display: table-row; width: 100%; height: 1%; }
.card .pic img { width: 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: 400px; vertical-align: middle; }
.shuffle .book { display: inline-block; width: 180px; 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: 220px; }
.shuffle li.on .book { opacity: 1; transform: scale(1.2,1.2); }
.shuffle li.on .book .pic { height: 240px; box-shadow: 0 10px 15px rgba(0,0,0,0.3); cursor: pointer;}
.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: 30px; }
.title.mt30 {margin-top: 30px;}
.title::before { content: ""; display: block; width: auto; height: 11px; background: url("../img/bg_line.png"); margin-bottom: 30px; }
.title.title-no-bg::before {content:''; background: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: 20px; }
.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; }


/* STEP */
.step { display: flex; overflow: hidden; font-size: 0; vertical-align: middle; }
.step li { flex: 1; position: relative; display: inline-block; height: 60px; line-height: 60px; color: #959595; font-size: 22px; font-weight: 300; text-align: center; background-color: #ececec; }
.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.on { color: #fff; background-color: #f4792a;}
.step li.on::before { border-left: 30px solid #f4792a; }


/* 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: 65px; line-height: 65px; 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: #0a3b64; }
.tap li.on i.ico.clip { background-image: url("../img/ico_clip_on.png"); }
.tap li.on i.ico.link { background-image: url("../img/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: 40px; font-size: 0; background: none; padding-right: 30px; margin-top: 15px; }
.tap.index li::after { position: absolute; top: 0; bottom: 0; right: -30px; content: ""; display: block; width: auto; height: auto; font-size: 0; border: 30px solid #ececec; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.red::after { position: absolute; top: 0; bottom: 0; right: -30px; content: ""; display: block; width: auto; height: auto; font-size: 0; border: 30px solid #EA9999; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.blue::after { position: absolute; top: 0; bottom: 0; right: -30px; content: ""; display: block; width: auto; height: auto; font-size: 0; border: 30px solid #94CFEC; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.yellow::after { position: absolute; top: 0; bottom: 0; right: -30px; content: ""; display: block; width: auto; height: auto; font-size: 0; border: 30px solid #fcd542; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li span { display: block; height: 100%; line-height: 45px; color: #000; font-size: 18px; font-weight: 300; background-color: #ececec; padding-left: 30px; }
.tap.index li.red span { display: block; height: 100%; line-height: 45px; color: #000; font-size: 18px; font-weight: 300; background-color: #EA9999; padding-left: 30px; }
.tap.index li.blue span { display: block; height: 100%; line-height: 45px; color: #000; font-size: 18px; font-weight: 300; background-color: #94CFEC; padding-left: 30px; }
.tap.index li.yellow span { display: block; height: 100%; line-height: 45px; color: #000; font-size: 18px; font-weight: 300; background-color: #fcd542; padding-left: 30px; }
.tap.index li + li { border-left: 0; }
.tap.index li.on { height: 50px; margin: 0; margin-top: 5px; }
.tap.index li.on::after { top: 0; border: 30px solid #0a3b64; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.on.red::after { top: 0; border: 30px solid #EA9999; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.on.blue::after { top: 0; border: 30px solid #94CFEC; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.on.yellow::after { top: 0; border: 30px solid #fcd542; border-top: 30px solid transparent; border-right: 30px solid transparent; }
.tap.index li.on span { line-height: 55px; color: #fff; font-weight: 500; background-color: #0a3b64;}
.tap.index li.on.red span { line-height: 55px; color: #000; font-weight: 500; background-color: #EA9999; }
.tap.index li.on.blue span { line-height: 55px; color: #000; font-weight: 500; background-color: #94CFEC; }
.tap.index li.on.yellow span { line-height: 55px; color: #000; font-weight: 500; background-color: #fcd542; }


.tap.full { display: flex; width: 100%; }
.tap.full li { flex: 1;/*  min-width: auto !important; */ }
.tap.t-30 {margin-top:30px;}

.tapCon { display: none; }

.tapScroll { clear: both; position: relative; display: block; overflow: visible; }
.sub .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; }
.sub .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); 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; }

.tap.h-65 li {height: 65px !important; line-height: 65px !important;}

.tap.exp04 {
    font-size: 18px;
    line-height: normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    text-align: center;
}

.tap_menu {
    display: inline;
    font-size: 20px;
}

/* BTNS */
.btns { display: block; overflow


: hidden; text-align: center; font-size: 0; padding: 20px 0; }
.btns .btTxt ~ .btTxt { margin-left: 10px; }
.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; }


/* 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: 35px; line-height: 35px; color: #fff; font-size: 16px; 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: 93px; height: 30px; line-height: 30px; color: #000; font-size: 16px; font-weight: 300; text-align: center; border-radius: 15px; margin: 1px 20px; }
.filter .item.on { color: #fff; fefqont-weight: 500; background-color: #f4792a; }
span#subjectList .item {
    width: 125px;
}

/*.filter .btFilter { position: absolute; bottom: 0; left: 50%; margin-left: -70px; display: block; overflow: hidden; width: 140px; height: 35px; text-align: center; background: url("../img/bt_filter.png") no-repeat center 0; background-size: contain; padding: 0 20px; }*/
/*.filter .btFilter i { display: inline-block; overflow: hidden; height: 35px; line-height: 35px; color: #fff; font-size: 14px; font-weight: 200; text-align: left; background: url("../img/ico_filter.png") no-repeat 0 8px; background-size: 25px; padding-left: 35px; }*/
.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: 14px; 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: 160px; 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; min-width: 500px;}
.sort .btSort { position: absolute; top: 25px; right: 0; display: none; }
.sort .total { display: inline-block; line-height: 40px; color: #000; font-size: 19px; 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; }



/* SEARCH */
.search { display: block; overflow: hidden; font-size: 0; text-align: center; }
.search .find { display: inline-block; overflow: visible; width: calc(100% - 24px); max-width: 700px; height: 64px; margin: 23px 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 25px; }
.search .find .btFind { right: 15px; background-color: #fff; background-size: auto; cursor:pointer;}
.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: 15px 0 5px 0; }
.search .month a { position: relative; display: inline-block; overflow: hidden; height: 25px; line-height: 25px; color: #000; font-size: 15px; 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; }



/* LIST */
.list { clear: both; display: block; overflow: visible; width: 100%; font-size: 0; padding-top: 30px; }
.list.subject{padding-top: 10px;}
.list.mt30 {margin-top: 30px;}
.list .book { display: block; width: 100%; }
.list ul { display: block; width: 100%; text-align: left; font-size: 0; }
.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 ul > li > div.btns{ display : none;}
.list ul > li > span.btns { position: absolute; top: 0; right: 0; display: none; padding: 0; }
.list ul > li > .btns.exp03{ display : none;}
.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; position:relative; }
.list.on ul.search-book-ca-list > li{margin-bottom: 10px;}
.list.on.subject ul > li { display: block; overflow: hidden; width: 100%; margin: 0; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #dcdcdc; position:relative; }
.list.on.subject ul > li:last-child{border-bottom: 0;}
.list.on ul > li > span.btns { display: block; }
.list.on ul > li > div.btns { display: none; }
.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: 180px; margin-right: 40px; }
.list.on.subject .book .pic{margin-right: 35px;}
.list.on .book .pic ~ .ctg { display: block; text-align: left; }/*20210113수정*/
.list.on .book .ctg ~ .tit { margin-top: 10px; }
.list.on .book .tit { height: auto; /* min-height: 40px; max-height: 60px; */ font-size: 24px; font-weight: 400; line-height: 120%; margin: 0; }
.list.on.subject .book .tit{font-size: 26px; padding-left: 25px;}
.list.on.subject .book .tit.recom{padding-left:25px;}
.list.on .book .info { display: block; margin-top: 10px; }
.list.on.subject .book .info{font-size: 16px; padding-left: 25px; display: -webkit-box;}
.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.subject .book .con{height: 56px; line-height:28px; font-size: 16px; color: #000; padding-left: 25px; margin-top: 25px; position: unset; -webkit-line-clamp: 2;}
.list.on .book .btns { display: block; }
.list.on.subject .book .ca{display: flex; padding-left: 25px; margin-top: 25px;}
.list.on.subject .book .ca span{width: 88px; height: 38px; margin-right: 5px; text-align: center; line-height: 38px; color: #fff; display: inline-block; font-size: 16px;}
.list.on.subject .book .ca .bl{background: #448ccb;}
.list.on.subject .book .ca .or{background: #f4792a;}

.subject-ca{background: #f5f5f5; height: 86px;}
.subject-ca li{display: inline-block; font-size: 18px; line-height: 86px; width: 16.3%; text-align:center;}
.subject-ca li.on a{color: #fff; background: #f4792a; padding:10px 15px; border-radius: 20px; }
.subject-ca li.on > span{color: #fff; background: #f4792a; padding:10px 15px; border-radius: 20px; }

.subject-ca.mainsearch{height: 140px;}
.subject-ca.mainsearch li{height: 70px; line-height: 70px; width:auto; margin: 0 28px;}

.search-book-ca-list li{padding: 24px 0; border-bottom: 1px solid #dcdcdc;}
.search-book-ca-list li:last-child{border-bottom: unset;}
.search-book-ca-list .tit{font-size: 22px; color: #0a3b64; margin-bottom: 10px; line-height: 30px;}
.search-book-ca-list .author{font-size: 16px; color: #7d7d7d; margin-bottom: 20px; padding-top: 20px; }
.search-book-ca-list .text{font-size:16px; color: #7d7d7d; line-height: 28px; height: 84px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden; margin-top: 10px;}

.list.mcard-list{padding-top:0;}
.list .search-book-card li{display:inline-block; width: 25%; width: calc((100% - 42px)/4); margin:0; margin-right: 14px; margin-bottom: 40px;}
.list .search-book-card li:nth-of-type(5n + 1){margin-left :unset;}
.list .search-book-card li:nth-of-type(5n){margin-right :14px;}
.list .search-book-card li:last-child{margin-right :0;}
.search-book-card li:nth-of-type(4n){margin-right: 0;}
.search-book-card li .card{width: 280px; height:auto;}
.search-book-card li .pic{width: 280px; height: 280px; display: block; border:1px solid #dcdcdc;}
.search-book-card li .pic img{width: 100%; height: 100%;}
.search-book-card li p{font-size: 18px; color: #000; line-height:24px; height: 48px; margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden;}
/* 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: 40%; z-index: 100; }
.scroll .btNext.w { right: -20px; top: 50%; margin-top: -20px; width: 40px; border-radius: 50%; background: #0a3b64 url("../img/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("../img/bt_next_view.png"); }

.scroll .btPrev { position: absolute; left: -40px; top: 40%; z-index: 100; }
.scroll .btPrev.w { left: -20px; top: 50%; margin-top: -20px; width: 40px; border-radius: 50%; background: #0a3b64 url("../img/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("../img/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 > ul.exp{width:99.5%;}

.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%; }

.main-card .scroll.three > ul > li { width: 33%; }
.main-card .scroll.three > ul > li:nth-of-type(3n) .card {margin-right: auto;}
.main-card .scroll.three > ul > li:nth-of-type(3n + 1) .card { margin-left: auto; }
.main-card .scroll.three > ul > li:nth-of-type(3n - 1) { margin:auto; }

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


.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; table-layout:fixed; }
.grid ul > li .row.on { background : #ececec; }
.subject-icon{background :url(../img/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;}
.grid ul > li .td { display: table-cell;word-break:break-all; cursor: pointer; 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; display: block;}
.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: 130px; word-break:break-all;}
.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; position: relative; word-break:break-all;  border-bottom: 6px solid #ececec; padding: 0;padding-bottom: 20px; }
.grid .report .tit em { position: absolute; bottom:-10px; right:0;}
.grid .report .pic { position: absolute; right: 0; bottom: 60px; 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 10px; }

.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: 70px; }
.grid.box .td.num { width: 80px; }
.grid.box .td.tit { text-align: left;}

#comment-ul .td.tit {padding: 10px 0;}

.notice_icon { width: 80px; background-image: url("../img/hangYImg.png"); background-position: center; background-repeat:no-repeat;}

.notice .grid.box .td.tit {width: 854px;}
.grid.box .td.tit.ta-l {text-align: center;}
.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 #commentList-ul .td.tit {width: 200px;}
.grid.box #commentList-ul .td.con {width: 700px;}
.grid.box #commentList-ul .td.day {width: 280px;}
.grid.box #commentList-ul .td.btn {position: absolute; right:0; top:6px;}

.grid.box #commentList-ul .td{cursor:default;}

/* 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("../img/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: 20px; /* background-image: url("../img/bg_nodata_book.png"); */ background-repeat:no-repeat; background-position: top center;}
.noData.docu { border: 0 !important; }
.noData.docu .txt { font-size: 20px; /* background-image: url("../img/bg_nodata_docu.png"); background-repeat:no-repeat; background-position:top center; padding-top: 180px; */ }
.noData.reply { border: 0 !important; }
.noData.reply .txt { font-size: 20px; /* background: url("../img/bg_nodata_reply.png") no-repeat top center; padding-top: 180px; */ }
.noData.write { border: 0 !important; }
.noData.write .txt { font-size: 20px; /* background: url("../img/bg_nodata_write.png") no-repeat top center; padding-top: 180px; */ }
.noData.scrap { border: 0 !important; }
.noData.scrap .txt { font-size: 20px; /* background: url("../img/bg_nodata_scrap.png") no-repeat top center; 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: 100px; }
.write .textarea.h-200 {height: 200px;}
.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; }
.attach .txt { display: block; color: #000; font-size: 14px; font-weight: 300; text-align: center; background: url("../img/bg_attach.png") no-repeat center 0; padding-top: 50px; 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; }
.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 */
.viewer { position: relative; display: block; padding-top: 50px; }
.viewer > .tit { position: relative; display: block; word-break:break-all; line-height: 1.2; overflow: hidden; color: #000; 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: 30px; }
.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 .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: #000; font-size: 16px; line-height: 180%; text-align: left; padding: 20px 0; }
.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; border-bottom: 1px solid #000; }


/* 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; word-break:break-all; width: 100%; color: #000; font-size: 15px; font-weight: 400; line-height: 28px; 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: 35px; bottom: 10px; display: block; color: #448ccb; 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: 10px; }

.comment.box .textarea { padding-right: 150px; }
.comment.box > .btTxt { position: absolute; right: 0; bottom: 0; width: 140px; height: 140px; line-height: 140px; border-radius: 0; border: 1px solid #d7d7d7; border-left: 0; }
.comment.box > .btTxt ~ .txt { right: 180px; bottom: 10px; }

.comment .btTxt.on{background: #F4792A; color: #fff;}

/* PAGES */
.pages { clear: both; display: block; overflow: hidden; width: 100%; text-align: center; font-size: 0; padding-top: 10px; }
.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; }
.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("../img/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; }

.tap-bn{ height: 153px; overflow:hidden; margin : 30px 0;}

/* SLIDER */
.slider { position: relative; display: block; width: 400px; height: 400px; margin: 40px auto; }
.slider .bx-prev { left: -50px; margin-left: 0; background-image: url("../img/bt_prev_view.png"); }
.slider .bx-next { right: -50px; margin-right: 0; background-image: url("../img/bt_next_view.png"); }
.slider .bx-pager { right: 0; margin-right: 0; bottom: -30px; height: 30px; line-height: 30px; color: #3d2926; font-size: 14px; font-weight: 200; padding: 0 10px; }
.slider .card { border: 1px solid #cbcbcb; }





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

/* HEADING */

/* HEADING : SITE */
h1 { display: inline-block; width: 215px; height: 45px; background: 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: 26px; 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); }
h3.mt30 {margin-top: 30px;}

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

/* 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; }

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

/* 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: #757575; font-size: 22px; font-weight: 400; border-bottom: 3px solid transparent; cursor: pointer; }
nav.gnb .m:hover { border-color: #f47929; }
nav.gnb .m.on { font-weight: 500; border-color: #f47929; color:#323232;}
nav.gnb ul { display: flex; height: 46px; font-size: 0; }
nav.gnb li { flex: auto; display: inline-block; font-size: 0; text-align: left; }

/* 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: 13px; font-weight: 400; }
nav.fnb a + a { position: relative; margin-left: 5px; padding-left: 5px; }
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 h7 { float: left; transition: all 0.1s; }
header .btMy { display: none; }
header .btFinder { display: none; float: right; }
header .find { position: absolute; top: 35px; right: 50px; 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%; cursor:pointer;}
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: 10px; transition: all 0.1s; }
header .gnb { float: left; width: calc(100% - 370px); 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); z-index: 500; }
header.fix h1 { height: 26px; }
header.fix .inner { padding-top: 10px; }
header.fix .find { top: 20px; }
header.fix .btUser { top: 20px; }
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("../img/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 #f7ad56; 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("../img/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: #ececec; padding: 20px; }
aside.my .myBox .book::before { content: "지금 읽고 있는 도서"; display: block; color: #396999; font-size: 14px; padding-bottom: 10px; }
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: #ececec; padding: 10px 20px; }
aside.my .myBox .copyright { display: block; overflow: hidden; color: #3d2926; font-size: 10px; line-height: 150%; background: #ececec url("../img/logo_m.png") no-repeat 20px 0; background-size: 120px; padding: 20px; padding-top: 40px; }




/****************************** 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: 0; }
article.popup .popBox { position: relative; display: inline-block; overflow: hidden; min-width: 400px; background-color: #fff; animation: popBox 0.2s ease forwards; }
@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 20px; }
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: #000; font-size: 20px; line-height: 30px; padding: 25px 0; }
article.popup .popBox .msg b { color: #f4792a; font-weight: 500; }
article.popup .popBox > .btns { padding: 30px; }

article.popup .popBox .txt02 { width : 600px; height:800px; }
article.popup .popBox .txt02>img { width : 100%; height :100%; }
article.popup .popBox .txt02.mo {display:none; width:100%; height:870px; }
article.popup .popBox .txt02.mo>img {width : 100%; height :100%; }
/* 모바일용 검색 */
article.popup.mSearch > .wrap { vertical-align: top; }
article.popup.mSearch .search { position: relative; background: #ececec url("../img/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 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("../img/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; cursor: pointer; }
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: 640px; padding: 14px; }
article.popup.custom .popBox .tit { background-color: #accd7e; }
article.popup.custom .popBox .tit h6 { color: #0a3b64; text-align: center; }
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-top: 30px; }
article.popup.custom .popBox .msg { position: relative; display: inline-block; text-align: left; padding: 0; padding-left: 80px; }
article.popup.custom .popBox .msg b { position: absolute; left: 8px; top: 0; }
article.popup.custom .popBox .msg br { display: none; }
article.popup.custom .popBox .items { display: block; overflow: hidden; font-size: 0; text-align: center; padding: 40px 0; }
article.popup.custom .popBox .items > span { display: inline-block; overflow: hidden; text-align: left; width: 220px; }
article.popup.custom .popBox .item { display: inline-block; overflow: hidden; min-width: 130px; height: 35px; line-height: 35px; color: #000; font-size: 18px; text-align: center; border-radius: 20px; background-color: #ececec; padding: 0 15px; margin: 5px 10px; }
article.popup.custom .popBox .item.on { color: #fff; background-color: #f4792a; }
article.popup.custom .popBox .btns { background-color: #c2c2c2; }

article.popup.custom.step1 .popBox .items { padding: 30px 0; }
article.popup.custom.step1 .popBox .item { width: 120px; height: 120px; line-height: 120px; }

article.popup.custom .popBox .items > span.w-450 {width: 450px;}

/* 팝업 : 상세검색 */
article.popup.search .popBox { width: 630px; padding: 14px; }
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% - 100px); }
article.popup.search .popBox dd .field ~ .select { float: right; width: 80px; }
article.popup.search .popBox dd .field ~ .select label { color: #fff; border-color: #448ccb; background-color: #448ccb; }
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 10%; }
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; }
article.popup.search .search .find .btFind { background-color: #ececec; }
article.popup.search .sort { padding: 10px 0; }
article.popup.search .book .pic { width: 100px; height: auto; min-height: 120px; margin-right: 20px; }
article.popup.search .list { overflow: auto; max-height: 280px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; background-color: #f9f9f9; padding: 0; }
article.popup.search .list ul > li { padding: 20px; 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: 10px 30px; }
article.popup.search .txt .btTip { position: absolute; left: 0; top: 45%; margin-top: -12.5px; }
article.popup.search .pages { padding: 10px 0; }



/* 패싯검색 */
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 18px; }
article.facet .btDrop.on ~ .m { color: #f4792a; }
article.facet .btDrop.on ~ .drop { display: block; }
article.facet ul { display: block; overflow: hidden; padding-bottom: 15px;}
article.facet li { position: relative; display: block; overflow: hidden; }


/* 게시판검색 */
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 > .input { width: 25%; margin-right: 5px; }
article.finder dd > .input:last-of-type { width: 80%; 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; overflow-y:auto; height: 170px; 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: 5px; 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: 30px; margin-bottom: 45px; }
article.detail .inner { position: relative; font-size: 0; }
article.detail .inner > .btns { position: absolute; top: 0; right: 12px; padding: 0; }
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; }
article.detail .book .tit { position: absolute; top: 0; left: 260px; right: 150px; display: block; height: auto; min-height: 40px; color: #000; font-size: 26px; font-weight: 400; line-height: 140%; text-overflow: clip; margin-top: 0; }
article.detail .book .txt { position: absolute; top: 70px; left: 260px; margin: 0; } 
article.detail .book .info { display: none; position: absolute; top: 60px; left: 260px; margin: 0; }
article.detail .book .intro { left: 260px; right: 0; }
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 #f4792a; background-color: #fff; padding: 10px 30px; padding-left: 40px; 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: #f4792a; font-size: 20px; font-weight: 400; text-align: left; padding-top: 30px; }
article.detail .dropBox dt:first-of-type { padding-top: 3px; }
article.detail .dropBox dd { display: block; overflow: hidden; color: #000; font-size: 16px; font-weight: 350; text-align: left; line-height: 28px; 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: 0; top: 50%; margin-top: -10px; z-index: 1; content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #f4792a; }
article.detail .select > label::after { border: 2px solid transparent; border-top: 2px solid #fff; border-right: 2px solid #fff; }
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 12px; padding-top: 20px; }
article.detail .tap ~ .select > label { border-bottom: 1px solid #d7d7d7; }


/* 댓글 */
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: #000; font-size: 16px; padding: 15px 0; }
article.reply .total b { color: #000; }
article.reply .grid ul { border-top: 3px solid #448ccb; }
article.reply .grid.box .td.con { display: table-cell; word-break:break-all; width: 776px; float: none; overflow: visible; width: auto; color: #000; line-height: 150%; text-align: left; white-space: normal; text-overflow: clip; padding:10px 0; }
article.reply .pages { padding: 0; padding-bottom: 50px; }
article.reply .btns { position: relative; border-top: 3px solid #448ccb; margin-top: 20px; }
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: #f4792a; }
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: #f4792a; }
article.units .unit { display: block; overflow: hidden; color: #3d2926; font-size: 15px; font-weight: 300; line-height: 20px; text-align: left; background-color: #eeddc5; padding: 20px; margin-top: 10px; }
article.units .unit:first-of-type { margin: 0; }
article.units .unit.recom { position: relative; padding-right: 40px; }
article.units .unit.recom::before { position: absolute; right: 10px; top: 25px; content: ""; display: block; width: 0; height: 0; border: 9px solid #0a3b64; border-bottom: 5px solid transparent; }
article.units .unit.recom::after { position: absolute; right: 10px; 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: #0a3b64; padding-top: 5px; }
article.units .unit.contain { position: relative; padding-right: 40px; }
article.units .unit.contain::before { position: absolute; right: 10px; top: 25px; content: ""; display: block; width: 0; height: 0; border: 9px solid #f4792a; border-bottom: 5px solid transparent; }
article.units .unit.contain::after { position: absolute; right: 10px; 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: #f4792a; padding-top: 5px; }
article.units .unit.connection { position: relative; padding-right: 40px; }
article.units .unit.connection::before { position: absolute; right: 10px; top: 25px; content: ""; display: block; width: 0; height: 0; border: 9px solid #448ccb; border-bottom: 5px solid transparent; }
article.units .unit.connection::after { position: absolute; right: 10px; 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: #448ccb; padding-top: 5px; }
article.units .unit.on { color: #fff; background-color: #f4792a; }
article.units .unit.on + .drop { display: block; }
/*.units.sc { left: 364px; top: 150px; z-index: 100;}*/


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

section { display: block; overflow: hidden; width: 100%; min-height:590px; padding-bottom: 150px; }

section.sub { border-top: 3px solid #f7ad56; }
section.sub .title { padding-top: 40px; }
section.career .title {padding-top: 10px;}
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: 153px; object-fit: cover; margin-right: 2px; }
section.sub .inform .wrap { display: table-cell; color: #000; font-size: 15px; line-height: 26px; text-align: left; vertical-align: middle; background-color: #f5f5f5; padding:19px; padding-left: 25px; padding-right: 25px; }
section.sub .inform .wrap b { display: block; font-size: 20px; font-weight: 500; padding-bottom: 10px; }

section.sub.view .inner { position: relative; }
section.sub.view .inner.mt40 {margin-top: 40px;}
section.sub.view .inner .units ~ .content { width: calc(100% - 250px); margin-left: 250px; }
section.sub.view .title { position: relative; padding-top: 50px; padding-bottom: 5px; border-bottom: 1px solid #f9bc94; }
section.sub.view .title h4 { color: #f4792a; font-size: 20px; margin-left: 10px;}
section.sub.view .title:first-of-type { padding-top: 0; }
section.sub.view .title.mt50 {margin-top: 50px;}
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-top:30px; padding-bottom:40px; }
section.sub.view .content > .con b { display: block; height: 35px; line-height: 35px; font-size: 20px; font-weight: 500; margin-bottom: 20px; }
section.sub.view .content > .con em { display: block; font-size: 16px; font-weight: 400; }
section.sub.view .content > .con .con-title {color:#0a3b64; font-weight: 500; font-size:18px; margin-bottom: 5px;}
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("../img/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("../img/acc_dream01.png") no-repeat center 50%; }
section.sub.view .openbook ul.maj::before { background: #898989 url("../img/acc_dream02.png") no-repeat center 50%; }
section.sub.view .openbook ul.job::before { background: #898989 url("../img/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("../img/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("../img/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("../img/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("../img/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("../img/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("../img/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("../img/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("../img/input_id.png") no-repeat 10px 50%; padding-left: 45px; }
section.login .input.pw { display: block; background: #f5f5f5 url("../img/input_pw.png") no-repeat 12px 50%; padding-left: 45px; }
section.login .check.fl { display: block; }
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 40px 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("../img/bg_line.png"); }
section.login .content::after { position: absolute; bottom: 0; left: 0; right: 0; content: ""; display: block; width: 100%; height: 11px; background: url("../img/bg_line.png"); }
section.login .info{padding-top:60px; font-size: 15px; color:#828C93;}

/* 메인 */
section.main .search { background: #ececec url("../img/bg_line.png"); }
section.main .search + .content .title { padding-top:10px; }
section.main .search + .content .title::before { display: none; }
section.main .search + .content.bg2 .title::before { content: ""; display: block; width: auto; height: 11px; background: url("../img/bg_line.png"); margin-bottom: 30px; }
section.main .search + .content.bg2 .title.title-no-bg::before {content:''; background:none; display: inline;}
section.main .search + .content.bg2 .title.title-no-bg.exp::before {content:''; background:none; display: block;}
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: 470px; padding-top: 10px; }
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 { height: 280px; border: 0; }
section.main .visual .book .tit { margin-top: 10px;-webkit-line-clamp:1; height: 30px;  }

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: 20px; }
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("../img/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("../img/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; margin-bottom: 10px; }
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 { margin-bottom: 10px; }
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("../img/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("../img/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("../img/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("../img/bg_layer04.png"); }

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

section.main .content.curation { margin: 0px 0; }
section.main .content.curation .scroll { float: right; width: 400px; height: 400px; vertical-align: middle; margin: 0; border-radius: 10px; background-color: #fff; padding: 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); }
section.main .content.curation .scroll .card { width: 100%; height: 100%; }
section.main .content.curation .tapCon .inner { height: 500px; padding: 50px 12px; }
section.main .content.curation > .tapCon.view1 { background-color: #fec377; }
section.main .content.curation > .tapCon.view2 { background-color: #8fc786; }
section.main .content.curation > .tapCon.view3 { background-color: #f6989d; }
section.main .content.curation > .tapCon.view4 { background-color: #a8a8a8; }
.tapCon.mt30{margin-top:30px;}

/* 메인 > 우리학교 인기도서 */
section.popular { border-top: 3px solid #f7ad56; }
section.popular .title { padding-top: 10px; }
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: 24px 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: 10px; }
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("../img/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 .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 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; margin-top: 20px; 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("../img/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("../img/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("../img/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; }

.ebookChk{cursor : pointer;}



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

section.career .visual { height: 470px; background-color: #f6989d; padding-top: 20px; }
section.career .visual .banner { background-color: #f6989d; }
section.career .visual .banner .inner { background: url("../img/acc01.png") no-repeat 30px bottom, url("../img/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: 65px; margin-top: 15px; }
section.career .bandBnr .inner { background-image: url("../img/acc02.png"); }
section.career .content { padding-bottom: 50px; }
section.career .content.today .btMore { float: right; }
section.career .content.today .scroll { display: inline-block; clear: none; float: right; width: calc(100% - 500px); padding-top: 0; vertical-align: middle; margin-top:70px;}
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; }

.tap-more { display: inline-block; position: absolute; padding-left: 95px; }
.tap-more a{height : auto; line-height : unset; }
.tap-more i {display: inline-block;  padding-left: 15px; }
.tap-more h3{line-height:20px; }

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

/* 진로독서 > 도서상세 */
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("../img/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("../img/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("../img/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: 40px; font-weight: 300; line-height: 100px; text-align: left; padding-right: 20px; }
section.career.test .scroll .tit b { font-size: 70px; 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("../img/acc04.png") no-repeat 30px bottom, url("../img/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; */ padding-top: 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.teach .title { padding-bottom: 10px; margin-bottom: 20px;}
section.my.act.view .title:first-of-type { border: 0; }

section.my.info .grid { border-top: 1px solid #dfdfdf; margin-top: 30px; }
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.commu.data .mb10 {margin-bottom:10px !important;}
section.commu.data .mt10 {margin-top:10px !important;}
section.commu.data .inner.exp {max-width:1500px !important;}
section.commu.data .bl_ft {position:relative !important;width:100% !important; margin: 0 auto !important; height:50px !important;bottom:0px !important;left:0 !important;background:#F9D0D0;}
section.commu.data .bl_ft li {font-size:16px !important;display:inline-block !important;line-height:50px !important;padding:0 50px !important;}
section.commu.data .bl_ft .inner {position:relative !important;}
section.commu.data .bl_ft .bt_box {font-size:24px !important;position:absolute !important;right:0 !important;top:50% !important;transform:translateY(-50%) !important;}
section.commu.data .bl_ft .bt_box button {padding:0 20px !important;}
.noData.dataList {height: 500px; display: flex; justify-content: center; align-items: center;}

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

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; }


/******************** 내 맞춤도서 ********************/
.custom-title {border-bottom:1px solid #ff7837; padding-bottom:15px;}
.bandBnr.mt20 {margin-top: 20px;}


/******************** 팝업 ********************/
.guide .popBox .tit {margin:10px;background:#003c62;}
.guide .popBox .tit h6 { font-size:18px; color:#fff;}

article.popup.contents .popBox {padding: 0;}
article.popup.contents .popBox .tit {margin: 0; position: relative; background:#003c62;}
article.popup.contents .popBox .tit h6 {color:#fff;}
article.popup.contents .popBox .tit .popup-close {background:url('../img/close.png') no-repeat center; width: 20px; height: 20px; position: absolute; right:20px; top:18px; }

article.popup.contents .popBox .msg {display: block; padding-left: 40px;}

article.popup.contents .popBox .items{max-height :330px;}
article.popup.contents .popBox .items > span {width: 100%; padding:0 25px;}
article.popup.contents .popBox .item {height: 45px; line-height: 45px; min-width: 46%;}
article.popup.contents .popBox .btns {background:none;}

article.popup.contents .popBox .items.items100p .item {width: 98% !important;}


/******************** 추가 css ********************/
.btn-top {position: fixed; width: 60px; z-index:999; height: 60px; background:url('../img/top.png') no-repeat; background-size:60px; bottom:30px; right:70px;}
.pc-n {display: none !important;}

.recd-title {margin-top: 40px;}
.num-title {float: left; color:#0a3b64; font-size:20px; margin-top: 15px;}
.num-title b {font-weight: normal;}

.select.w-200 {width: 196px;}
.select.w-200>label {width: 196px;}
.select.w-125 {width: 125px;}
.select.w-125>label {width: 125px;}

.book .intro dt.mt20 {margin-top: 20px;}

.pw-ph {color:red; font-size:13px; margin-top: 5px; display:block;}
.p-grid .td {padding:10px 0;}

section.commu .sort.pb0 {padding-bottom: 0;}

aside.my .book .tit {font-size:14px; height: 40px;}

.plumb .book .intro dt {margin-top: 19px;}

/* .bts-po {width: 1118px; margin:0 auto; text-align: right;}
.bts-banner {position: absolute; margin-top: 10px; font-size:14px; color:#646464;}
.banner.on .bx-wrapper {height: 50px !important;}
.banner.on .bx-pager {}
.banner.on .bx-controls-direction {display: none;} */

.con {word-break:break-all;}

.grid .noData {border-bottom:1px solid #e2e2e2 !important; }
.grid .noData .txt {font-weight: normal; font-size:20px;}
.grid .noData .txt b {font-weight: 600;}

.filter .con span br {display: none;}

.thema-select {margin-top: 3px; margin-left: 5px !important;}

article.po-facet {position: static; margin-right: 0; float: left; margin-left: 164px; margin-top: 20px;}

.po-inner {
    float: left;
    width: 1200px;
}

.po-inner.exp {
    float: unset;
    width: auto;
}

.po-inner.flunset{
	float: unset;
	margin: 0 auto;
}

.main-card .scroll .btNext, .main-card .scroll .btPrev {top:30%;}
.main-card .curation .scroll .btNext, .main-card .curation .scroll .btPrev {top:50%;}

.tab-br li {width: 33.3% !important;}
.tab-br li br {display: none;}
.tab-br li span {padding-top: 0px !important;line-height: 45px !important;}
.tab-br li.on {}
.tab-br li.on span {padding-top: 0px !important;line-height: 65px !important;}

.fileDiv h4 {font-size:18px;}

.subject.plumb .book .tit {margin-top: 10px;}

.search-page .sort {float: left;} 

.wrap > .input.w80p {width: 80%; }
.pr0 {padding-right: 0 !important;}


/* 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;
}


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

/*--------------토론콘텐츠-------------------*/

.bt_talks{
	cursor:pointer;
	padding-right: 45px;
	position: relative;
}

.bt_talks::before{
	content:"";
	position:absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background : #f4792a;
	top:2px;
	right:0;
}

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


.bt_talks img{
	width : 150px;
}

/*------------------소장정보 테이블 -----------------*/

.have_tb{
	margin-top:30px;
}

.have_tb tr:first-child {
    background: #f4792a;
    color: white;
}

.have_tb tr {
    background: #ece0d2;
    font-size: 16px;
    color: #000;
    text-align: center;
    width: 25%;
}

/* .have_tb tr{
	background: #f2f2f2;
	font-size: 16px;
	color : #000; 
	text-align: center;
	width:25%;
} */

.have_tb th{
	border-bottom : 1px solid #fff;
	border-right: 1px solid #fff;
	width: 20%;
	padding: 10px 0;
}

.have_tb th:last-child{
	border-right:none;
}

.have_tb td{
	border-right: 1px solid #fff;
	word-break : break-all;
	width: 20%;
	padding: 10px 0;
}

.have_tb td:last-child{
	border-right:none;
}


/*----------------------내정보 ------------------------*/

.my_info.grid ul > li:nth-of-type(1){
	border-top: 1px solid #e2e2e2;
}

.my_info.grid ul > li:hover {
    background-color: unset;
}

.my_info.grid.pw ul > li .td{
	vertical-align: baseline;
}

.my_info.grid.pw ul > li .row{
	padding: 10px 0;
}

.my_info.grid.pw ul > li .input{
	width: 100%
}

.my_info.grid.pw ul > li .err{
	font-size: 12px;
	color: red;
	padding-top:4px;
}

.my_info.grid.pw ul > li:nth-of-type(1) .btns{
	padding: 0;
}

/*----------------로그인 드롭박스 ----------------*/

.id_box{
	width: 100%;
	height:70px; 
	position: relative;
}


.login_drop{
	background: #fff;
	border: 1px solid #d7d7d7;
	height : 200px;
	font-size: 16px;
	color:#646464;
	text-align : left;
	overflow-y: scroll;
	position:absolute;
	z-index: 900;
	width: 100%;
	top:45px;
	border-top:unset;
}

.login_drop ul{
	width: 100%;
	height: 100%;
}

.login_drop li{
	height: 40px;
	line-height: 40px;
	padding-left:44px;
}

.login_drop li.on{
	background: #f5f5f5;
}


/* --------------- 해쉬태그 -------------*/

.hashTag{
	width:100%; color: #404040; font-size :16px; margin-top: 15px;
}
.hashTag li{float: left; display:inline-block; border: 1px solid #16336d;
    padding: 10px; margin-right: 10px;}
    
    
    
/* 로딩 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;
}

.content .nodata_around {
    width: 100%;
}

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

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

.content .nodata_around .txt_box .sj{
    font-size: 22px;
    color: #0a3b64;
    margin: 20px 0;
}
 @-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);
   }
 }  
 
 .policy-tbl {
	width: 720px;
	margin:50px auto;
	text-align: center;
}
.policy-tbl th {
	background:#dcdee0;
	color:#323232;
	font-size:15px;
	height: 60px;
	border-bottom:1px solid #b4b4b4;
}
.policy-tbl td {
	color:#5a5a5a;
	font-size:15px;
	height: 60px;
	border-bottom:1px solid #b4b4b4;
}
.policy-tbl tr:first-child th, .policy-tbl tr:first-child td {
	border-top:1px solid #787a7c;
}
.policy-tbl tr:last-child th, .policy-tbl tr:last-child td {
	border-bottom:1px solid #787a7c;
}

.black{
	color: #000;
}