@charset "utf-8";

html, body {background:#e5e4e2}
.ui-loader {display:none}

#wrap #header {overflow:hidden;position:fixed;top:0;left:0;width:100%;height:50px;padding:15px 20px;background:#272727;box-sizing:border-box;z-index:60}
#wrap #header h1 {float:left;padding:0}
#wrap #header h1 img {max-height:20px}
#wrap #header .btn_viewer_guide {display:block;float:right;padding-right:20px;color:#8f8f8f;line-height:20px;background:url(../images/icon_guide.png) right center no-repeat;background-size:17px}
#wrap .tit_project {position:fixed;top:50px;left:0;width:100%;height:48px;padding:15px 20px 15px 40px;font-size:13px;border-bottom:1px solid #dcdbd9;background:#fff url(../images/icon_project.png) 20px center no-repeat;background-size:17px;box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,0.1);z-index:60}
#wrap .tit_project > a {overflow:hidden;display:block;height:17px;padding-right:25px;background:url(../images/icon_arrow_down.png) right center no-repeat;background-size:contain;text-overflow:ellipsis;white-space:nowrap}
#wrap .tit_project.on > a {background:url(../images/icon_arrow_up.png) right center no-repeat;background-size:contain}
#wrap .tit_project + .project_list {overflow:auto;display:none;position:absolute;left:0;width:100%;padding-left:20px;background:#fff;box-sizing:border-box;z-index:60}
#wrap .tit_project.on + .project_list {display:block}
#wrap .tit_project.on + .project_list li {padding:15px 0}
#wrap .tit_project.on + .project_list li a {display:block;padding:0 20px;font-size:13px}
#wrap .tit_project.on + .project_list li.on {background:url(../images/icon_project_selected.png) left center no-repeat;background-size:17px}
#wrap .tit_project.on + .project_list li.on a {color:#e54234}
#wrap .subject_list {display:none;position:absolute;width:100%;background:rgba(0,0,0,0.8);z-index:70}
#wrap .subject_list .depth01 {position:absolute;top:0;left:0;width:50%;height:100%;font-size:13px;background:#fff;box-sizing:border-box;z-index:60}
#wrap .subject_list .depth01 > li > a {display:block;padding:15px 10px 15px 20px}
#wrap .subject_list .depth01 > li.on > a {color:#fff;background:#e54234}
#wrap .subject_list .depth02 {overflow-y:auto;position:absolute;top:0;width:100%;height:100%;border-left:1px solid #d9d9d9;background:#fff}
#wrap .subject_list .depth02 > li > a {display:block;padding:15px 10px 15px 20px}
#wrap .subject_list .depth02 > li > a:focus {color:#e54234}

/* util 버튼 영역 */
#wrap .util_wrap {position:absolute;top:125px;right:20px;box-shadow:2px 3px 5px rgba(0,0,0,0.1);z-index:50}
#wrap .util_wrap > a {display:inline-block;width:55px;height:47px;vertical-align:top;text-indent:-9999px}
#wrap .util_wrap > a:first-child {border-radius:5px 0 0 5px}
#wrap .util_wrap > a:nth-child(3) {border-radius:0 5px 5px 0}
#wrap .util_wrap > a + a {margin-left:-5px;border-left:1px solid #dcdbd9}
#wrap .util_wrap > a.btn_subject_list {background:#fff url(../images/icon_subject_list.png) center center no-repeat;background-size:20px}
#wrap .util_wrap > a.btn_interest {background:#fff url(../images/icon_interest_off.png) center center no-repeat;background-size:25px}
#wrap .util_wrap > a.btn_interest.on {background:#fff url(../images/icon_interest_on.png) center center no-repeat;background-size:25px}
#wrap .util_wrap > a.btn_bookmark {position:relative;background:#fff url(../images/icon_bookmark_off.png) center center no-repeat;background-size:15px}
#wrap .util_wrap > a.btn_bookmark.on,
#wrap .util_wrap > a.btn_bookmark[data-bookmark ='checked'] {background:#fff url(../images/icon_bookmark_on.png) center center no-repeat;background-size:15px}
#wrap .util_wrap > a.btn_bookmark.on:after {position:absolute;bottom:-9px;left:50%;width:0;height:0;margin-left:-11px;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;content:'';z-index:10}
#wrap .util_wrap .pop_bookmark {display:none;position:absolute;top:60px;right:-2px;min-width:320px;border:1px solid #c9c9c9;background:#fff}
#wrap .util_wrap .btn_bookmark.on + .pop_bookmark {display:block}
#wrap .util_wrap .pop_bookmark .tab_bookmark {overflow:hidden}
#wrap .util_wrap .pop_bookmark .tab_bookmark > li {float:left;width:50%}
#wrap .util_wrap .pop_bookmark .tab_bookmark > li a {display:block;height:60px;padding:20px 0 17px;font-weight:bold;font-size:15px;color:#676767;text-align:center;letter-spacing:-1px;border-bottom:3px solid #c9c9c9;box-sizing:border-box}
#wrap .util_wrap .pop_bookmark .tab_bookmark > li.on a {color:#000;border-bottom:3px solid #e3443c}
#wrap .util_wrap .pop_bookmark .tab_cont > div {display:none}
#wrap .util_wrap .pop_bookmark .tab_cont > div.on {display:block}

/* util - 책갈피 항목 */
#wrap .util_wrap .pop_bookmark .tab_cont .select_area {padding:15px 20px;border-bottom:1px solid #c9c9c9}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl {overflow:hidden;font-size:14px}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dt {float:left;padding:0 25px 0 20px;font-weight:bold;color:#555;letter-spacing:-1px;border-right:1px solid #d1d1d1;background:url(../images/icon_search_filter.png) left center no-repeat}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd {float:left;margin-left:25px}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd .ui-radio {float:left}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd label {display:block;float:right;font-size:13px;color:#000}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd .ui-radio + .ui-radio {margin-left:15px}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd label > input[type="radio"] {display:block;float:left}
#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd label > span {display:inline-block;margin-left:5px;vertical-align:middle}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area {overflow:auto;max-height:250px;padding:25px 20px;text-align:center;box-sizing:border-box}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area.none {padding:50px 0 39px}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area .notice {padding-top:93px;font-weight:bold;font-size:14px;color:#666;letter-spacing:-1px;background:url(../images/icon_no_bookmark.png) top center no-repeat}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area .notice span {color:#000}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area .btn_register {display:inline-block;height:34px;margin-top:15px;padding:0 13px;font-size:13px;color:#333;line-height:34px;border:1px solid #d7d7d7;border-radius:8px}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area ul li {padding:20px 0;text-align:left;border-top:1px solid #f2f2f2}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area ul li:first-child {padding-top:0;border-top:0}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area ul li:last-child {padding-bottom:0}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area dl dt {font-weight:bold;font-size:14px;color:#000;line-height:25px}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area dl dd {font-size:14px;line-height:25px}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area dl dd + dd {margin-top:15px;font-size:13px;line-height:13px}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area dl dd span.date {display:inline-block;padding-right:5px;color:#888;border-right:1px solid #dedede}
#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area dl dd .btn_clear {display:inline-block;color:#888;margin-left:5px}

/* util - 현재 페이지 등록 */
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child {position:relative;padding:20px;background:#fff}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child p {font-size:13px;color:#333;text-align:left;line-height:1;letter-spacing:-0.5px}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child textarea {display:block;width:100%;height:85px;padding:15px;margin-top:20px;border:1px solid #d8d8d8;border-radius:4px;box-sizing:border-box;resize:none}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child .input_cnt {display:block;position:absolute;top:20px;right:20px;font-size:13px;color:#b8b8b8}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child .btn_area {overflow:hidden;margin-top:20px}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child .btn_area > a {display:block;padding-left:18px;font-size:13px;color:#000}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child .btn_area .btn_clear {float:left;background:url(../images/icon_clear.png) center left no-repeat;background-size:13px 13px}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child .btn_area .btn_confirm {float:right;background:url(../images/icon_confirm.png) center left no-repeat}
#wrap .util_wrap .pop_bookmark .tab_cont > div:first-child .btn_area .btn_cancel {float:right;margin-right:5px;background:url(../images/icon_cancel.png) center left no-repeat}

/* 슬라이드 영역 */
#wrap .swiper-slide {overflow:hidden;position:relative;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center;padding-top:100px;box-sizing:border-box}
#wrap .swiper-slide a {display:inline-block}
#wrap .swiper-slide a.btn_slide_bookmark {display:none}
#wrap .swiper-slide img {box-shadow:2px 5px 5px rgba(0,0,0,0.2)}
#wrap .swiper-pagination {font-size:16px;color:#000;letter-spacing:-1px;bottom:auto}
#wrap .swiper-pagination .swiper-pagination-current {font-weight:bold}

/* slide - bookmark */
#wrap .pop_slide_bookmark {display:none;position:absolute;top:56px;/* left:50%; */width:50%;padding:22px 25px;border:1px solid #d8d8d8;background:#fff;box-sizing:border-box}
#wrap .btn_slide_bookmark.on + .pop_slide_bookmark {display:block}
#wrap .pop_slide_bookmark:before {display:block;position:absolute;top:-1px;right:0;width:55px;height:1px;background:#fff;content:'';}
#wrap .pop_slide_bookmark .pop_cont {position:relative}
#wrap .pop_slide_bookmark .pop_cont p {font-size:14px;color:#333;text-align:left;line-height:1;letter-spacing:-0.5px}
#wrap .pop_slide_bookmark .pop_cont textarea {display:block;width:100%;height:85px;padding:20px;margin-top:20px;border:1px solid #d8d8d8;border-radius:4px;box-sizing:border-box;resize:none}
#wrap .pop_slide_bookmark .pop_cont .input_cnt {display:block;position:absolute;top:0;right:0;font-size:13px;color:#b8b8b8}
#wrap .pop_slide_bookmark .pop_cont .btn_area {overflow:hidden;margin-top:20px}
#wrap .pop_slide_bookmark .pop_cont .btn_area > a {display:block;padding-left:18px;font-size:13px;color:#000}
#wrap .pop_slide_bookmark .pop_cont .btn_area .btn_clear {float:left;background:url(../images/icon_clear.png) center left no-repeat}
#wrap .pop_slide_bookmark .pop_cont .btn_area .btn_confirm {float:right;background:url(../images/icon_confirm.png) center left no-repeat}
#wrap .pop_slide_bookmark .pop_cont .btn_area .btn_cancel {float:right;margin-right:5px;background:url(../images/icon_cancel.png) center left no-repeat}

/* 메시지 알림 */
#wrap .message_box {display:none;position:fixed;bottom:30px;left:0;width:100%;text-align:center;z-index:100}
#wrap .message_box > p {display:inline-block;max-width:90%;padding:10px;background:rgba(0,0,0,0.7);border-radius:5px}
#wrap .message_box > p span {display:block;padding-left:20px;font-size:14px;color:#fff;text-align:left;letter-spacing:-1px;word-break:break-all;background:url(../images/icon_confirm.png) center left no-repeat}

/* viewer_guide */
#wrap .viewer_guide {display:none;position:fixed;top:0;left:0;padding-top:98px;width:100%;height:100%;box-sizing:border-box;z-index:150}
#wrap .viewer_guide .dim_guide {width:100%;height:100%;background:rgba(0,0,0,0.8)}
#wrap .viewer_guide .dim_guide > ul {position:relative;width:100%;height:100%}
#wrap .viewer_guide .dim_guide > ul > li:first-child {position:absolute;top:-10px;left:50%;margin-left:-48px}
#wrap .viewer_guide .dim_guide > ul > li:nth-child(2) {position:absolute;top:28px;right:9px}
#wrap .viewer_guide .dim_guide > ul > li:nth-child(3) {position:absolute;top:50%;left:5%;right:5%}
#wrap .viewer_guide .dim_guide > ul > li:nth-child(3) ul li {font-weight:bold;font-size:15px;color:#fff;line-height:1.6;letter-spacing:-1px}
#wrap .viewer_guide .dim_guide .btn_area {overflow:hidden;position:absolute;top:19px;right:105px;padding-right:10px;border-right:1px solid #8f8f8f}
#wrap .viewer_guide .dim_guide .btn_area .ui-checkbox {float:left;color:#8f8f8f}
#wrap .viewer_guide .dim_guide .btn_area .ui-checkbox > label {float:right;line-height:1}
#wrap .viewer_guide .dim_guide .btn_area .ui-checkbox > input {float:left;margin-right:5px}
#wrap .viewer_guide .dim_guide .btn_area .btn_guide_close {display:block;float:left;margin-left:10px;color:#8f8f8f;line-height:1}

/* 전체화면 일 때 */
#wrap.full_mode #header, #wrap.full_mode .tit_project, #wrap.full_mode .subject_list, #wrap.full_mode .util_wrap, #wrap.full_mode .swiper-pagination, #wrap.full_mode .viewer_guide {display:none}
#wrap.full_mode .swiper-slide {padding-top:0}
#wrap.full_mode .swiper-slide a.btn_slide_bookmark {overflow:hidden;display:block;position:absolute;top:10px;left:50%;width:55px;height:47px;border:1px solid #d8d8d8;text-indent:-9999px;background:#fff url(../images/icon_bookmark_off.png) center center no-repeat;background-size:15px}
#wrap.full_mode .swiper-slide a.btn_slide_bookmark[data-bookmark ='checked'], #wrap.full_mode .swiper-slide a.btn_slide_bookmark.on {background:#fff url(../images/icon_bookmark_on.png) center center no-repeat;background-size:15px}


/* width가 360px미만일 때 */
@media screen and (max-width: 359px) {
	#wrap .util_wrap .pop_bookmark {min-width:280px}
	#wrap .util_wrap .pop_bookmark .tab_bookmark > li a {height:50px;padding:15px 0 12px}
	#wrap .util_wrap .pop_bookmark .tab_cont .bookmark_list_area {max-height:250px}
	#wrap .util_wrap .pop_bookmark .tab_cont .select_area {padding:15px 20px;border-bottom:1px solid #c9c9c9}
	#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl {overflow:hidden;font-size:14px}
	#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dt {float:left;padding:0 15px 0 20px;font-weight:bold;color:#555;letter-spacing:-1px;border-right:1px solid #d1d1d1;background:url(../images/icon_search_filter.png) left center no-repeat}
	#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd {float:left;margin-left:15px}
	#wrap .util_wrap .pop_bookmark .tab_cont .select_area dl dd label {font-size:13px}
	/* viewer_guide */
	#wrap .viewer_guide {background:url(../images/bg_small_viewer.jpg) top left repeat-x}
	#wrap .viewer_guide .dim_guide > ul > li:nth-child(3) {top:60%}
	#wrap .viewer_guide .dim_guide > ul > li:nth-child(3) ul li {font-size:14px}
	#wrap .viewer_guide .dim_guide .btn_area {right:20px;padding-right:0;border-right:0}
}