*{
	box-sizing:border-box;
}
body {
	background-color: rgb(245, 245, 247);
	
}
.wrap {
	width: 100%; border-top-color: rgb(29, 60, 155); border-top-width: 3px; border-top-style: solid; 
}
.header {
	padding: 15px;  border-bottom-color: rgb(211, 211, 220); border-bottom-width: 1px; border-bottom-style: solid; background-color: rgb(255, 255, 255);
}
.container {
	padding:15px 20px;
}
.hide {
	display: none;
}
#help {
	cursor: pointer;
}
.header h1 {
    padding:3px 15px 0;height:35px; line-height:35px;color: #555; font-size:20px; font-weight:bold; 
}
.header h1 img{vertical-align:middle; margin:-3px 10px 0 0}

.topArea .inner{float:left; width:calc(100% - 290px)}
.editArea {
	width:60%; 
	float:left; border: 1px solid #3057ab; border-image: none; height: 400px; background-color: rgb(255, 255, 255);
}
.editArea .tit{
	/* font-size:15px; font-weight:bold; border-bottom:1px solid #9aa9d0; padding:15px; color:#2c4b9b;*/
	    padding: 11px 10px 10px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: bold;
    background-color: #3c5da5
	}
.editArea .inner{height:363px; padding: 20px;  -overflow-y: auto; -ms-overflow-y: auto; width:100%;}
.editArea textarea {
	border: currentColor; border-image: none; width: 100%; height: 100%; font-size:17px; line-height: 2;
}

.viewArea {
	float:left; width:50%;  border: 1px solid rgb(221, 221, 221); border-image: none; height:450px;font-size: 18px;background-color: rgb(255, 255, 255);
}
.viewArea .tit{font-size:15px; font-weight:bold; border-bottom:1px solid #9aa9d0; padding:10px; color:#fff; background:#2c7ac7}
.viewArea .inner{height:363px; padding:20px; overflow-y: auto;  auto; line-height: 2;  }
.viewArea p.category {
	font-size: 12px;
}
.viewArea p.title {
	line-height: 1.5; font-size: 24px; font-weight: bold; margin-bottom: 20px;
}
.viewArea p.etc {
	text-align: right; font-size: 18px; font-weight: bold; margin-bottom: 20px;
}
/* 추가  s*/
.viewAreaActive {
	float:left; width:50%;  border: 1px solid rgb(221, 221, 221); border-image: none; height:450px;font-size: 18px;background-color: rgb(255, 255, 255);
	background:rgba(0,0,0,.3) url(/images/recommend/loading_spinner.svg) no-repeat center;
}
.viewAreaActive .tit{font-size:15px; font-weight:bold; border-bottom:1px solid #9aa9d0; padding:10px; color:#fff; background:#2c7ac7}
.viewAreaActive .inner{height:363px; padding:20px; overflow-y: auto;  auto; line-height: 2;  }
.viewAreaActive p.category {
	font-size: 12px;
}
.viewAreaActive p.title {
	line-height: 1.5; font-size: 24px; font-weight: bold; margin-bottom: 20px;
}
.viewAreaActive p.etc {
	text-align: right; font-size: 18px; font-weight: bold; margin-bottom: 20px;
}
/* 추가  e */


.maArea {
	margin: 10px 15px 15px; padding: 20px; border: 1px solid rgb(221, 221, 221); border-image: none; height: 100px; line-height: 2; font-size: 13px; -ms-overflow-y: auto; background-color: rgb(255, 255, 255);
}

.text_area dt {
	font-size: 15px; font-weight: bold;
}
.cloud{float:left; width:calc(40% - 17px); height:400px; border: 1px solid #26b8b4; margin:0 0 15px 15px}
.cloud p {
	padding:10px; color: rgb(255, 255, 255); font-size: 13px; font-weight: bold; background-color: #26b8b4;
}
.cloud p img{vertical-align:middle; margin:-2px 0 0 3px}
.dateFilter p {
	padding: 7px; color: rgb(255, 255, 255); font-size: 13px; font-weight: bold; background-color: rgb(77, 113, 35);
}
.input p {
	padding: 7px; color: rgb(255, 255, 255); font-size: 13px; font-weight: bold; background-color: rgb(57, 179, 209);
}
.key p {
	padding:10px; color: rgb(255, 255, 255); font-size: 13px; font-weight: bold; background-color: rgb(57, 179, 209);
}
.key p img{vertical-align:middle; margin:-2px 0 0 3px}
.cloudArea {
	padding: 5px;  border-image: none; height:350px; -ms-overflow-y: auto; background-color: rgb(255, 255, 255);
}
.dateFilterArea {
	padding: 5px; border: 1px solid rgb(77, 113, 227); border-image: none; height: 90px; margin-bottom: 8px; -ms-overflow-y: auto; background-color: rgb(255, 255, 255);
}
.keyArea {
	padding: 5px; border: 1px solid rgb(57, 179, 209); border-image: none; height: 200px; margin-bottom: 8px; -ms-overflow-y: auto; background-color: rgb(255, 255, 255);
}
.inputArea {
	padding: 5px; border: 1px solid rgb(57, 179, 209); border-image: none; height: 90px; margin-bottom: 8px; vertical-align: middle; -ms-overflow-y: auto; background-color: rgb(255, 255, 255);
}

.list{ 
	width:calc(50% - 19px); margin-right:15px; float:left; height:450px; overflow:auto; border: 1px solid rgb(221, 221, 221); background:#fff;
}
/* 추가S */
.listActive{ 
	width:calc(50% - 19px); margin-right:15px; float:left; height:450px; overflow:auto; border: 1px solid rgb(221, 221, 221); background:#fff;
	background:rgba(0,0,0,.3) url(/images/recommend/loading_spinner.svg) no-repeat center;
}
.listActive p {
	font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #9aa9d0;
    padding: 10px;
    color: #fff;
	background:#3c5da5;
}
.listActive .tab {
	height: 25px; margin-top: 10px; border-bottom-color: rgb(236, 106, 0); border-bottom-width: 1px; border-bottom-style: solid;
}
.listActive .tab li {
	line-height: 24px; float: left;
}
.listActive .tab li a {
	border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(236, 106, 0); width: 70px; text-align: center; color: rgb(153, 153, 153); font-size: 13px; display: block; background-color: rgb(238, 238, 238);
}
.listActive .tab li a.on {
	border-width: 1px; border-style: solid; border-color: rgb(236, 106, 0) rgb(236, 106, 0) rgb(255, 255, 255); color: rgb(236, 106, 0); font-weight: bold; background-color: rgb(255, 255, 255);
}
/* 추가E */




.list .tab::after {
	clear: both; display: block; content: "";
}
.search::after {
	clear: both; display: block; content: "";
}
.sel_key::after {
	clear: both; display: block; content: "";
}
.list p {
	font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #9aa9d0;
    padding: 10px;
    color: #fff;
	background:#3c5da5;
}
.list .tab {
	height: 25px; margin-top: 10px; border-bottom-color: rgb(236, 106, 0); border-bottom-width: 1px; border-bottom-style: solid;
}
.list .tab li {
	line-height: 24px; float: left;
}
.list .tab li a {
	border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(236, 106, 0); width: 70px; text-align: center; color: rgb(153, 153, 153); font-size: 13px; display: block; background-color: rgb(238, 238, 238);
}
.list .tab li a.on {
	border-width: 1px; border-style: solid; border-color: rgb(236, 106, 0) rgb(236, 106, 0) rgb(255, 255, 255); color: rgb(236, 106, 0); font-weight: bold; background-color: rgb(255, 255, 255);
}
.tblArea {
	height: 361px; border-right-color: #3057ab; border-bottom-color: #3057ab; border-left-color:#3057ab; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: rgb(255, 255, 255); 
}
.search li {
	float: left;
}
.search input[type='text'] {
	padding: 3px; border-radius: 5px 0px 0px 5px; border: 1px solid rgb(170, 170, 170); border-image: none; width: 258px; height: 16px; line-height: 16px; margin-bottom: 10px;
}
.search .btn_search {
	border-radius: 0px 5px 5px 0px; width: 25px; height: 21px; text-align: center; padding-top: 3px; display: block; background-color: rgb(136, 136, 136);
}
.search .btn_detail {
	border-radius: 5px; border: 1px solid rgb(153, 153, 153); border-image: none; width: 55px; height: 22px; text-align: center; color: rgb(255, 255, 255); line-height: 22px; font-weight: bold; margin-left: 10px; display: inline-block; background-color: rgb(170, 170, 170);
}
.sel_key li {
	margin: 0px 5px 5px 0px; float: left;
}
.sel_key li a {
	color: rgb(0, 36, 217);
}
.sel_key li a.btn_close img {
	vertical-align: middle;
}
.container table tr:hover{background-color:#f5f5f5}
.container table td {
	height:42px; vertical-align: middle; border-bottom-color: #ddd; border-bottom-width: 1px; border-bottom-style: solid; white-space: nowrap; font-size:15px
}
.container table td.align_c{text-align:center;}
.container table td a.tit {
	font-weight: bold; line-height:19px; display:block; overflow:hidden; text-overflow:ellipsis
}
.container table td a.tit:active {
	color: rgb(0, 10, 207);
}
.container table td .btn_keep {
	border-radius: 5px; border: 1px solid rgb(153, 153, 153); border-image: none; width: 38px; height: 17px; text-align: center; color: rgb(102, 102, 102); line-height: 17px; display: inline-block; background-color: rgb(255, 255, 255);
}
.container table td .btn_keep:hover {
	background: rgb(245, 245, 245);
}
.container table td .btn_keep.off {
	background: rgb(218, 218, 218); border-radius: 5px; border: 1px solid rgb(153, 153, 153); border-image: none; width: 38px; height: 17px; text-align: center; color: rgb(68, 68, 68); line-height: 17px; display: inline-block;
}
.container table td .num_top{padding:4px 10px; background-color:#ff7600; color:#fff; border-radius:30px; }
.container table td .num{padding:4px 10px; background-color:#999; color:#fff; border-radius:30px; }
.container table td .btn_plus{display:inline-block; width:20px; height:20px; background:url(/images/recommend/snb_icon_on.png) no-repeat center 4px; }
.container table td .btn_minus{display:inline-block; width:20px; height:20px; background:url(/images/recommend/snb_icon_off.png) no-repeat center 4px; }
.container table td .icon_list{display:inline-block; width:20px; height:20px; background:url(/images/recommend/snb_icon_dot.png) no-repeat center 4px; }

.container table.sub_tbl td{border:none; height:36px; font-size:14px; background:#f5f7ff }


.btn_num::after {
	clear: both; display: block; content: "";
}
.btn_num .right {
	border: 1px solid rgb(204, 204, 204); border-image: none; width: 22px; height: 22px; color: rgb(163, 163, 163); line-height: 22px; margin-right: 5px; display: inline-block; background-color: rgb(248, 248, 248);
}
.btn_num a:hover {
	color: rgb(51, 51, 51);
}
.btn_num .num.click {
	border: 1px solid rgb(204, 204, 204); border-image: none; color: rgb(236, 106, 0); font-weight: bold; background-color: rgb(255, 255, 255);
}
.btn_num .right.click {
	border: 1px solid rgb(204, 204, 204); border-image: none; color: rgb(236, 106, 0); font-weight: bold; margin-right: 5px; background-color: rgb(255, 255, 255);
}
.opt_box{float:left; width:272px; height:400px;background-color:#fff; border:1px solid #2c7ac7; margin:0 15px 15px 0 ;}
.opt_box .tit{padding:10px; color: rgb(255, 255, 255); font-size:14px; font-weight: bold; background-color:#2c7ac7;}

.container dl {padding:23px 12px; border-top: 1px solid #ddd; }
.container dl:first-child{border:none}
.container dl dt {font-size:14px; font-weight:bold; margin-bottom:20px}
.container dl dt span img{vertical-align:middle; margin:-2px 0 0 5px}

.container .recommendArea dd img {
	vertical-align: middle; margin-left:3px;
}
.container .recommendArea dd .btn_on {
	border-radius: 3px 0px 0px 3px; border: 1px solid rgb(170, 170, 170);  width: 35px; height: 20px; text-align: center; color: rgb(170, 170, 170); line-height: 20px; font-weight: bold; display: inline-block; font-size:13px
}
.container .recommendArea dd .btn_off {
	border-radius: 0px 3px 3px 0px; border: 1px solid rgb(170, 170, 170); width: 35px; height: 20px; text-align: center; color: rgb(170, 170, 170); line-height:20px; font-weight: bold; margin-left: -1px; display: inline-block; font-size:13px
}
.container .recommendArea dd a.click {
	border:1px solid #0770c8; color: rgb(255, 255, 255); background-color: #0770c8;
}
.container .recommendArea .btn_recommend {
	border-radius: 3px; width: 55px; height: 24px; text-align: center; color: rgb(255, 255, 255); line-height: 22px; float: right; display: inline-block;  font-weight:bold; background-color: #154d84; 
}

.choice_chk li{margin:0 17px 10px 0; font-size:13px}
.choice_chk input[type="checkbox"]{display:none; }
.choice_chk li .txt{font-size:13px; vertical-align:top}
.choice_chk li .txt2{margin-left:20px}
.choice_chk input[type="checkbox"] + label .icon_chk{display:inline-block;width:15px;height:15px; margin-right:5px; background:url(/images/recommend/btn_checkbox.png) no-repeat 0 0;}
.choice_chk input[type="checkbox"]:checked + label .icon_chk{background-position: 0 -15px;}
.choice_chk input[type="checkbox"]:checked + label{color: #0770c8; font-weight:bold;}

body .btnClose{
	display:none;
}
body.help::after{
	content:'';
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.7);
	z-index:1;
}
body.help .btnClose{
	display:block;
	position:fixed;
	width:40px;
	height:40px;
	border:solid 3px #fff;
	border-radius:40px;
	background:#000;
	color:#fff;
	right:30px;
	top:30px;
	z-index:3;
}
body.help .list,
body.help .cloud,
body.help .editArea,
body.help .viewArea{
	position:relative;
	
}

body.help .list::after,
body.help .cloud::after,
body.help .editArea::after,
body.help .viewArea::after{
	content : '2단계. 추천된 결과리스트가 보여집니다.';
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	color:#fff;
	text-align:center;
	font-size:28px;
	top:0;
	left:0;
	z-index:2;
	box-sizing:border-box;
	border:solid 2px #fff;
	
	display:flex;
	align-items : center;
	justify-content:center;
	letter-spacing:-0.05em;
	opacity:0;
}
body.help .list::after{
	animation : helpAct .5s .30s ease-in  1 ;
	animation-fill-mode : forwards;
}
body.help .cloud::after
{
	content:'3단계. 비교분석 문서의 주제어가 표시됩니다.';
	animation : helpAct .5s 1s ease-in  1 ;
	animation-fill-mode : forwards;
	
}
body.help .editArea::after{
	white-space:pre;
	content:'1단계. 비교분석 문서를 입력합니다. \A 입력 후 추천 버튼을 눌러주세요. \A \A ※추천이 나오지 않을때는 \A 문서의 내용을 입력해주세요.';
	animation : helpAct .5s 0s ease-in  1 ;
	animation-fill-mode : forwards;
}
body.help .viewArea::after{
	white-space:pre;
	content:'3단계. 추천결과 제목을  클릭시 \A 문서상세내용을 볼 수 있습니다.';
	animation : helpAct .5s 1s ease-in  1 ;
	animation-fill-mode : forwards;
	
}

@keyframes helpAct {
	0{
		opacity:0;
		
	}
	100%{
		opacity:1;
		
	}
}
@media screen and (max-width: 1024px) {
	.opt_box{
		width:99%;
		height:auto;
		float:none;
	}
	.topArea .inner,.editArea,.viewArea{
		width:99%;
		float:none;
		
	}
	.cloud, .list{
		width:100% !important;
		float:none;
		margin:0 0 10px;
	}
	
	
}

@media screen and (max-width: 780px) {
	div.jqcloud{
		font-size:5px !important;
	}
	.cloudArea, .cloud{
		height: auto;
	}
	#cloudArea{
		height:200px !important;
	}
}