@charset "utf-8";
/* CSS Document */

*{padding:0; margin:0; font:Apple Gothic,arial,sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

li{list-style:none;}
a{text-decoration:none;}

body{overflow:hidden; min-width:300px;}

/*로그인*/
.login_top{width:152px; height:35px; position:relative; margin:8px auto;  z-index:101}
.login{float:left; height:180px; background:#eceff0; width:100%; border-bottom:1px #e5e5e5 solid; margin-top:53px;}
.login .login_form{display:block;position:relative;margin-bottom:10px; font-size:15px; line-height:1.25em;padding:20px 12px;}
.login .ini{margin-bottom:5px;padding:3px 32px 3px 5px; height:26px;border:1px solid #b6b6b6;border-radius:3px;background:#fff;-webkit-box-shadow:0 1px #eee inset;}
.login .ini input{display:block; position:relative; border:none; width:100%; height:26px; }
.btn_login{height:35px;padding-bottom:2px; font-weight:bold;text-shadow:0 0 2px #000;text-align:center;color:#fff;  width:100%; margin-top:5px; display:inline-block;font-size:15px;border-radius:4px;
-webkit-box-shadow:0 1px 2px #bdbfc0}
.login .remember{float:left; margin:5px 0; line-height:20px; }
.login .remember input{float:left; margin-top:3px; margin-right:5px;}

/* 상단부분 디자인 */
#top{width:100%; height:48px; position:fixed; background:#fff;  z-index:101; min-width:300px; }
 
.btn_menu{width:42px; height:47px; display:block;  cursor:pointer; float:left;}
.btn_menu .img{width: 20px; height: 20px;background:url(../images/menu.png) 0 0 no-repeat;  margin-top:15px; margin-left:10px; text-indent:-9999px;background-size: 20px 20px; opacity:0.5;}
.btn_search{width:42px; height:47px; display:block;  cursor:pointer; float:right;}
.btn_search .img{width: 20px; height: 20px;background:url(../images/search.png) 0 0 no-repeat;  margin-top:15px; margin-left:10px; text-indent:-9999px;background-size: 20px 20px; opacity:0.5;}
.calendar{width:42px; height:47px; display:block;  cursor:pointer; float:right;}
.calendar .img{width: 20px; height: 20px;background:url(../images/calendar.png) 0 0 no-repeat;  margin-top:15px; margin-left:10px;  text-indent:-9999px;background-size: 20px 20px;opacity:0.5;}
.btn_email{width:42px; height:47px; display:block;  cursor:pointer;  float:right;}
.btn_email .img{width: 20px; height: 20px;background:url(../images/email.png) 0 0 no-repeat;  margin-top:15px; margin-left:10px;  text-indent:-9999px;background-size: 20px 20px;opacity:0.5;}

.content{float:right;}

#btn_thumb{position:fixed; bottom:8px; left:8px; width:37px; height:37px; background-image:url(../images/btn_thumb.png); background-position:0 0; z-index:101}
#btn_thumb:active{background-position:-120px 0;}
#btn_thumb.disable{background-position:-60px 0;}
#main{margin-top:53px; float:left; width:100%;  overflow:auto;}
#main_online{margin-top:53px; float:left; width:100%;  overflow:auto; background:#E6E6E6;}
#listWrap{ width:100%; height:100%; position:absolute; overflow-y:auto; z-index:0;}

/*
#mail_send {display: block; position: absolute; top: 53px; left: 50%; margin:0 0 0 -170px; width: 340px; height: 440px; z-index: 102; background:#fff; border-radius:5px;}
.mail_edit{float:left; width:80px;height:40px; margin-top:-13px;}

.mail_middle{float:left; width:100%; height:auto;}
.add_mail{float:left; width:100%; height:66px!important; border-bottom:1px #e5e5e5 solid;}
.mail_left{width:270px; float:left;}
.mail_right{float:left;}
.add_mail .input{width:210px; height:24px; float:left; margin:3px 20px; padding:0 10px; border:none; border-bottom:1px #09F solid;}
li.add_mail .input{ background-color:#F7F7F7; }
.add_mail .btn{width:48px; height:48px; float:left; margin:15px 0 0 6px;  background:url(../images/mail_add.png); background-size:48px 48px; text-indent:-9999px; border:0}
#mail_list{width:100%;  overflow-y:auto; overflow-x:hidden; background:#f7f7f7}
#mail_list li{height:50px; float:left; border-bottom:1px #ccc solid; width:100%; margin-top:5px;}
.mail_check{ float:left; width:40px;height:40px; }
.mail_check input{ float:left; margin:8px 10px; width:20px; height:20px}
.mail_name{ float:left; padding:0 15px; min-width:200px; height:16px; line-height:18px; font-size:16px; margin-top:4px; }
.mail_address{float:left; padding:0 15px;min-width:200px;height:25px; line-height:25px; font-size:18px; color:#888;  margin-top:3px;}
.mail_edit{float:right; width:85px;height:40px; margin-top:-13px;}
.btn_edit{float:left; width:30px; height:30px; background-image:url(../images/mail_edit.png); background-size:30px 30px; text-indent:-9999px;}
.btn_del{float:left; width:30px; height:30px; background-image:url(../images/mail_del.png); background-size:30px 30px; text-indent:-9999px; margin-left:15px;}
.mail_bottom{ width:100%; height:60px; bottom:0; position:absolute; border-top:1px #e5e5e5 solid;}
.btn-primary{width:240px; height:35px; background:#e74c3c; color:#fff; font-weight:bold; border:none; margin:10px 50px;}
*/
.popup{display: block; position: absolute; top: 53px; left: 50%; margin:0 0 0 -150px; width: 300px; height: 410px; z-index: 102; background:#fff; border-radius:5px;}
.popup .mail_address, .popup .mail_name{width:200px; padding:0!important}
.popup .mail_edit{float:left;!important}

#mail_send {display: block; position: absolute; top: 53px;  background:#fff; }

.mail_top{float:left; width:270px; height:45px; line-height:48px; padding:0 15px; background:#ebebeb; border-bottom:3px #e5e5e5 solid; font-size:18px; font-weight:bold;}
.search{height:47px; margin:0 auto; display:none; position:relative; float:left;}
.search img{float:left; margin-right:3px;}
.search form{float:left;}
.search input{border:none; padding:8px 8px 8px 33px; margin-top:6px; width:260px; border-bottom:2px #33B5E5 solid; background:url(../images/btn_search.png) 4px 5px no-repeat; background-size:24px 24px; font-size:17px;}
.prev{float:left;}
.menu_prev{width: 7px; height:14px;background:url(../images/btn_menu2.png) 0 0 no-repeat; margin-top:17px; left:5px;position:absolute; text-indent:-9999px;}
.mail_close{width:30px; height:30px; background:url(../images/cancel.png) 0 0; background-size:30px; position:absolute; right:8px; top:8px; text-indent:-9999px;}

/*email*/
.mail_middle{float:left; width:100%; height:auto;}
.add_mail{float:left; width:100%; height:66px!important; border-bottom:1px #e5e5e5 solid;}
.mail_left{width:73%; float:left;}
.mail_right{width:20%; float:right;}
.add_mail .input{ width:100%; height:24px; float:left; margin:3px 5px; padding:0 5px; border:none; border-bottom:1px #09F solid;}
li.add_mail{ background-color:#fcfcfc; margin-top:0!important;}
li.add_mail .btn{background:#1abc9c;}
.add_mail .btn{max-width:70px; width:100%; height:66px; right:0; background:#e74c3c; color:#fff; font-weight:bold; font-size:15px; border:0; float:right;}
#mail_list{width:100%;  overflow-y:auto; overflow-x:hidden; background:#f7f7f7}
#mail_list li{height:50px; float:left; border-bottom:1px #ccc solid; width:100%; margin-top:5px;}
.mail_check{ float:left; width:40px;height:40px; }
.mail_check input{ float:left; margin:8px 10px; width:20px; height:20px}
.mail_name{ float:left; padding-left:15px; min-width:200px; width:70%; height:16px; line-height:18px; font-size:16px; margin-top:4px; }
.mail_address{float:left; padding-left:15px;min-width:200px;width:70%; height:25px; line-height:25px; font-size:18px; color:#888;  margin-top:3px;}
/*.mail_edit{float:right;  width:80px;height:40px; position:absolute; right:0}*/
/*.mail_edit i{width:20px; height:20px; float:left; display:block; padding:10px 7px;margin:0 3px; color:#666; font-size:25px;}*/
 /*webable 2013.10.04 스크롤 되지 않아서 변경 합니다.*/ 
.mail_edit{float:right; width:80px; height:40px; position:relative; right:0; margin-top:-10px;}
.mail_edit i{width:20px; height:20px; float:left; display:block; padding:0px 7px;margin:0 3px; color:#666; font-size:25px;}


.mail_bottom{ width:100%; height:60px; bottom:0; position:absolute; border-top:1px #e5e5e5 solid;}
.btn-primary{width:240px; height:35px; background:#e74c3c; color:#fff; font-weight:bold; border:none; margin:10px 30px;}

/* keyword */
#keyword_send{float:left; width:100%; height:auto;}
.add_keyword{float:left; width:100%; height:46px; border-bottom:1px #ccc solid;}
.add_keyword .input{min-width:255px; width:100%; height:34px; float:left; margin:5px 5px; padding:0 5px; border:none; border-bottom:1px #09F solid;}
.keyword_left{ float:left;width:73%; }
.keyword_right{float:right;width:20%; }
.add_keyword .btn{width:70px; height:46px; right:0; background:#e74c3c; color:#fff; font-weight:bold; font-size:15px; border:0; float:right;}
#keyword_list{width:100%;  overflow-y:auto; overflow-x:hidden; background:#f7f7f7}
#keyword_list li{height:40px!important; float:left; border-bottom:1px #ddd solid; width:100%;}
.keyword{ float:left; padding:0 15px; min-width:200px; height:16px; font-size:16px; margin:12px 0; }
.keyword_edit{float:right; width:80px;height:40px; }
.keyword_edit i{width:20px; height:20px; float:left; display:block; padding:10px 7px;margin:0 3px; color:#666; font-size:25px;}
#keyword_list .add_mail .btn{height:40px;}
#keyword_list .add_mail input{margin-top:9px;}
/*pagination*/
#bottom{bottom:0;}
#btn_thumb_off{ position:absolute; right:7px; bottom:173px; width:22px; height:22px; background:url(../images/close.png) 0 0 no-repeat; background-size:24px; text-indent:-9999px; opacity:0.5; z-index:106}
.pagination{width:auto; min-width:100%;height:175px; padding-top:25px; background: rgba(0, 0, 0, 0.7 ); z-index:105; bottom:0; position:absolute; white-space:nowrap; overflow-x:auto; overflow-y:hidden;}
.pagination #data_list{width:200%; }
.pagination li{width:100px; height:142px; float:left; margin:10px 5px;opacity:0.6}
.pagination li img{width:100px;}
.pagination li.active{border:2px #e74c3c solid; margin:8px 3px; opacity:1}
.pagination li .li_num{ margin:0 auto; font-size:14px; font-weight:bold; color:#ccc;width:100px; text-align:center; display:block;}
.pagination li.active .li_num{color:#e74c3c;}

/*달력*/
.ui-widget-header { border:none; background: #f8f8f8; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-datepicker{padding:0;}
.ui-datepicker .ui-datepicker-prev{position: absolute;top: 2px;width: 30px;height:30px;}

/* 온라인 */
.online_title{float:left; width:auto; height:25px;font-size:19px; margin:14px 0 0 5px; font-weight:600;}
.online{float:left; display:block; width:100%; height:500px; overflow-y:auto; overflow-x:hidden;}
.online li{width:100%; height:115px; border-bottom:1px #ccc solid;}
.online .tit{font-size: 17px;font-weight: 700;color: #333;float: left;padding-left: 15px;padding-right: 15px;margin: 15px 0 5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap: break-word;}
.online .tit_thumb{font-size: 17px;font-weight: 700;color: #333;float: left;padding-left: 15px;padding-right: 126px;margin: 15px 0 5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-wrap: break-word;}
.online .txt{font-size: 14px;color: #777;padding-left: 15px;padding-right: 15px;float: left;line-height: 22px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word;}
.online .txt_thumb{font-size: 14px;color: #777;padding-left: 15px;padding-right: 126px;float: left;line-height: 22px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap: break-word;}
.online .info{color: #999;padding-left: 15px;float: left;line-height: 16px;font-size: 13px;margin-top:7px;}
.online .thumb{width: 96px;height: 72px;border: 0; float:right; margin:-55px 18px 0 0}
.online .search_thumb{width: 96px;height: 100%;border: 1; float:right; margin:0px 0px 0}

/*온라인뷰어*/
.view_top{width:100%; height:auto; background:#fff; float:left;}
.view_title{padding:15px 15px 4px; font-size:21px; line-height:32px;}
.view_date{padding:2px 15px 15px; font-size:16px; color:#888;}
.view_bottom{float:left; overflow:hidden;}
.view_img{width:100%; height:auto; background:#333; float:left; text-align:center;}
.view_img img{margin:0 auto;}
.view_txt{ float:left; padding:15px; font-size:16px; line-height:26px;}
		
/*메뉴*/
.menu_list{width:240px;height:100%;background:#303033; color:#666; position:absolute; top:48px; left:0; z-index:106; overflow-y:auto;}
.list_tit{ color: #fff;font-size: 17px;font-weight: bold;height: 27px;line-height: 20px;padding: 15px 0 5px 15px; border-bottom:1px #484848 solid; background-color:#555;}
.list_tit a{color: #fff}
.list_tit.on,.list_tit:hover,.list_tit:active{background-color:#33b5e5;}
.menu_list .shadow{width:10px; height:100%; position:absolute; right:0;box-shadow:-moz-box-shadow: inset -7px 0 7px 0 rgba(0,0,0,0.5);-webkit-box-shadow: inset -7px 0 7px 0 rgba(0,0,0,0.5);box-shadow: inset -7px 0 7px 0 rgba(0,0,0,0.5);}


/*webable 2013.09.23 달력 위젯 변경*/
#ui-datepicker-div{width: 300px;z-index: 102; background:#fff; border-radius:5px;}
.ui-widget-header { border:none; background: #f8f8f8; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-datepicker .ui-datepicker-header{padding:8px 0;}
.ui-datepicker table{margin:0 0 -1px 0;}
.ui-datepicker-calendar td{width:40px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border:none; background: #fff;  color: #000;}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none; background:none; color:#000;}
.ui-datepicker td a{padding:0; text-align:center;}
.ui-datepicker-calendar thead{background:#f8f8f8; font-size:14px; border-bottom:1px #ccc solid; font-size:13px;}
.ui-datepicker-week-end, .ui-datepicker-week-end .ui-state-default{color:#999;}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover{ position:relative;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{position: absolute;top:10px;width:30px;height: 30px;}
.ui-datepicker .ui-datepicker-prev:hover{position: absolute;top:10px; left:2px;width:30px;height: 30px;}
.ui-datepicker .ui-datepicker-next:hover{position: absolute;top:10px; right:2px;width:30px;height: 30px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {display: block;position: absolute;left:0;top:0;margin:3px;}
.ui-widget-header .ui-icon {background-image:url(./images/cal_move.png); background-size:48px;}
.ui-icon{width:24px; height:24px;}
.ui-icon-circle-triangle-w {background-position:0 0;}
.ui-icon-circle-triangle-e {background-position:-26px 0;}
.ui-datepicker select.ui-datepicker-month {width:80px; font-size:24px; padding:0 4px; height:36px; line-height:42px;}
.ui-datepicker select.ui-datepicker-year {width:95px; margin-right:5px; font-size:24px; padding:0 4px; height:36px; line-height:42px;}

.ui-datepicker-calendar tbody td{height:45px; line-height:45px; font-size:18px;}
.ui-datepicker td{padding:0;}
.ui-datepicker tr{ border-bottom:1px #d3d3d3 solid;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus{ border: 0; background:url(images/cal_highlignt_over.png) center no-repeat; background-size:36px; color:#fff}
.ui-widget-header .ui-state-hover, .ui-widget-header .ui-state-focus {background:none;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{ border: 0; background:url(images/cal_highlignt_active.png) center no-repeat; background-size:36px; color:#fff}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{color:#fff; font-weight:bold; background:url(images/cal_highlignt.png) center no-repeat; background-size:36px;}
#ui-datepicker-close{width:100%;height:40px;margin:0;background-color:#ebebeb;border-radius: 6px 6px 0 0; border-bottom:3px #e5e5e5 solid}
#ui-datepicker-close span{background:url(../images/cancel.png);background-size:25px;text-indent:-9999px;right:5px; top:8px;width: 30px;height: 30px;display: block; position:absolute}
#ui-datepicker-close .date_title{float:left; width:210px; height:35px; line-height:40px; padding:0 15px; font-size:18px; font-weight:bold;}
/* zoom */
#zoom_control{position:fixed; top:63px; right:8px; width:36px; height:72px; z-index:101; text-indent:-9999px;}
#zoom_plus{width:36px; height:36px; background-image:url(../images/zoom.png); background-position:0 0; display:block; }
#zoom_minus{width:36px; height:37px; background-image:url(../images/zoom.png); background-position:-60px 0; display:block;}
#zoom_plus:active{background-position:-240px 0;}
#zoom_minus:active{background-position:-300px 0;}
#zoom_plus.disable{background-position:-120px 0;}
#zoom_minus.disable{background-position:-180px 0;}

/*menu 추가 2013.10.02 */
.depth{height:18px; padding:16px 10px 13px 27px; border-bottom:1px #3f3f3f solid; font-size:18px; line-height:18px; color:#fff; background:#303030; font-weight:normal; cursor:pointer;}
.depth:hover, .depth.on{background-color:#33b5e5;}
.list_tit i{margin-right:20px; color:#e5e5e5; font-size:16px; }
.arrow_down{background-image:url(../images/arrow_down.png); background-position:205px 14px; background-repeat: no-repeat;}
.arrow_up{background-image:url(../images/arrow_up.png); background-position:205px 14px; background-repeat: no-repeat;}

/*webable 2013.10.06 검색페이지 이미지 */
.auto_search{width:97%;float:left; padding:1.5%; display:block;  overflow-y:auto; overflow-x:hidden;}
.auto_search li{width:29.3%; height:auto; margin:5px 2%; float:left;}
.auto_search .txt_thumb{width:100%;font-size: 14px; line-height:20px;font-weight: 700;color: #666;float: left;margin: 5px 0; overflow: hidden; text-align:center;}
.auto_search .thumb_search {border: 0; float:left; width:100%;}
.auto_search .thumb_search img{width:100%; border:1px #CCC solid; margin-left:-1px;}

/*page btn */
#gapan_page_btn span{width:35px; height:35px; padding:5px 0; background-color:rgba(0,0,0,0.3); text-indent:-9999px;top:50%;position:absolute;}
.gapan_page_prev{ display:block; background-image:url(../images/page_prev.png);  background-position:-2px 5px; background-size:35px; left:0; }
.gapan_page_next{display:block; background-image:url(../images/page_next.png); background-position:2px 5px; background-size:35px; right:0;}

#search_guide{width:200px; height:23px; color:#fff; line-height:23px; font-size:12px; text-align:center; background:#333; border:none; border-radius:3px; left:50%; top:70px; margin-left:-100px; box-shadow:-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow0 3px 7px rgba(0,0,0,0.3); position:fixed; z-index:100;}

.icon_fn01{ background-image:url(../images/logo_icon_fn01.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_dt01{ background-image:url(../images/logo_icon_dt01.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_kh01{ background-image:url(../images/logo_icon_kh01.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_km01{ background-image:url(../images/logo_icon_km01.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_sg01{ background-image:url(../images/logo_icon_sg01.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_rp00{ background-image:url(../images/logo_icon_rp00.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_kp00{ background-image:url(../images/logo_icon_kp00.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_pc00{ background-image:url(../images/logo_icon_pc00.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_kq00{ background-image:url(../images/logo_icon_kq00.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_sr00{ background-image:url(../images/logo_icon_sr00.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}
.icon_bn00{ background-image:url(../images/logo_icon_bn00.png); background-repeat:no-repeat; background-size:24px;width:24px; height:24px; text-indent:-9999px; margin:12px 15px 12px 10px;}


#help{position:absolute; width:100%; top:0; left:0; z-index:200;}
#help img{width:100%;}
#help_btn{width:220px; height:37px;  text-align:center; font-size:15px; font-weight:bold; position:absolute; bottom:10px; left:50%; margin-left:-110px; z-index:201; color:#fff;}
.nomoreview{width:130px; height:37px; line-height:37px; background:#1abc9c; float:left; margin-right:10px; }
.close{width:80px; height:37px; line-height:37px; background:#e74c3c; float:left; }


#thumb_div{background:#fff;}