#wrap {width:840px}

.tab_container {width:100%; overflow:hidden}
.tab_container .tab_1 {float:left; padding:15px;border-right:1px solid #ddd; border-top:1px solid #ddd;background:#f8f8f8;cursor:pointer}
.tab_container .tab_1:first-child {border-left:1px solid #ddd}
.tab_container .tab_1:hover {background:#fff}
.tab_container .tab_1_on {background:#fff}
.tab_container .next_time {float:right; border:1px solid #fff;padding:15px 0px;}

.date_container {padding:8px; border:1px solid #c8c8c8}
.stat_datetime {display:inline-block; font-size:18px;margin:0px 8px; font-weight:bold;vertical-align:middle}
.date_btn {padding:4px 8px; border:1px solid #c8c8c8; color:#fff; background:#505050; }
.pattern_option {float:right}
.pattern_option > span {display:inline-block; margin:4px 2px 0px 12px}

.pattern_container {width:838px; border:1px solid #c8c8c8; border-top:0px;overflow-x:scroll}

.sum_table {width:100%}
.sum_table thead td {background:#f1f1f1;border-top:1px solid #ddd;height:38px; font-weight:bold}
.sum_table tbody td {height:40px}
.sum_table td {width:10%; text-align:center}
.sum_table td {border-right:1px solid #ddd; border-bottom:1px solid #ddd}
.sum_table td:first-child {border-left:1px solid #ddd}

.list_container {margin-top:15px}
.list_table {width:100%}
.list_table thead td {background:#f1f1f1; font-weight:bold}
.list_table td {width:3%;height:38px; text-align:center}
.list_table td {border-right:1px solid #ddd; border-bottom:1px solid #ddd}
.list_table thead td {border-top:1px solid #ddd}
.list_table td:first-child {border-left:1px solid #ddd}

.list_red {font-weight:bold; color:#d12121}
.list_blue {font-weight:bold; color:#1e6fcb}
.list_black {font-weight:bold; color:#000}

.pattern_table th {padding: 11px 0px;
    color: #e43405;
    font-size: 11px;
    border: 1px solid #ccc;
    border-top: 0px none;
    background: #f5f5f5;}
.pattern_table th > span {padding:0; font-weight:normal;}
.pattern_table td {border-right:1px solid #ddd;border-bottom:1px solid #ddd}
.pattern_table tr:first-child div {background:#f1f1f1}
.pattern_table div {width:38px;height:34px; *padding-top:6px; text-align:center}

.font_red {display:inline-block; padding-top:6px; font-weight:bold; color:#d12121}
.font_blue {display:inline-block; padding-top:6px; font-weight:bold; color:#1e6fcb}
.font_green {display:inline-block; padding-top:6px; font-weight:bold; color:#478a41}
.pattern_no {display:inline-block; width:28px; height:22px; margin:3px; padding-top:6px; border-radius:20px; text-align:center; color:#fff; font-family: 'Nanum'!important; font-weight: bold; font-size: 10px;}

.pattern_red {background:#d12121}
.pattern_blue {background:#1e6fcb}
.pattern_green {background:#478a41}
.pattern_gray {background:#aaa}

@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
address, big, cite, code, del, dfn, em, font, img, ins, 
q, s, samp, small, strike, strong, sub, sup, tt, var, b, 
u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:none 0; font-family:'Dotum', 'Noto Sans Korean'; font-weight:normal} /글자 없앰
h1, h2, h3, h4, h5, h6 {font-size:12px}
img, fieldset, iframe {border:0 none}
table, div {border-collapse: collapse; font-size:12px}
textarea {overflow:auto; outline-style:none; font-family:'Dotum', 'Noto Sans Korean'}
select, input, img, li {vertical-align:middle; text-align:left;  font-family:'Dotum', 'Noto Sans Korean'; outline-style:none} /폰트크기12없앰, 글자 순서
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:normal}
ul, li, ol {list-style-type:none}
legend, caption {display:none}
hr {border-collapse:collapse; display:none}
a { text-decoration:none; cursor:pointer; color:#222}
html, body {width:100%; height:100%}
body {background:#FFF; font-size:12px; color:#222}
.sound_only {display:none}

#iframe_wrap {}

#sub_wrap {width:840px}	
.font_s { font-size:11px;}
.font_s {}



/*사다리*/
.sub_tab {width:840px; height:50px; background:url('./img/analysis_bg.gif') no-repeat}/*탭*/
	.sub_tab li {float:left; padding:18px 20px; border-right:1px solid #ccc; cursor:pointer}
	.sub_tab li:hover {text-decoration:underline;}
	.sub_tab_active {background:#21324c; padding:17px 19px !important; border:1px solid #112038 !important; color:#fff}

.sub_stitle {overflow:hidden; padding:25px 0; width:840px; height:41px} /*날짜/달력/갱신*/
	.sub_stitle>div {float:left; margin:0 30px 0 40px}
		.sub_stitle>div>div {float:left; margin-top:12px; cursor:pointer}
		.sub_stitle>div>code {float:left; display:block; margin:0 22px; font-size:28px; font-family:'Noto Sans Korean'; font-weight:500; letter-spacing:-1px; color:#404040; }
	.sub_stitle>span {float:left; display:block; margin:8px 10px 0 0; cursor:pointer}
	.sub_stitle>pre {float:right; display:block; margin:14px 10px 0 110px; font-size:11px}
		.sub_stitle>pre b {color:#4684e7; font-weight:bold}			
		.sub_stitle>pre font {color:#4684e7; font-weight:bold}
	.sub_stitle>label {float:right; display:block; margin-top:4px; padding:8px 10px;  border:1px solid #ccc; font-size:11px; color:#8c8c8c; cursor:pointer}
		.sub_stitle>label img {margin-top:-2px}
		.sub_stitle>label:hover {color:#000; text-decoration:underline;}

	.today_icon {width:27px; height:25px; background:url('./img/today.png')}
	.today_icon:hover {opacity:0.5}
	.cal_icon :hover {opacity:0.5}


#sub_stitle2 > div { height:100%; line-height:41px; }
	#sub_stitle2 > div > span { vertical-align:middle; margin-left:15px; }

.sadari_toptable {width:100%}/*탑 테이블*/
	.sadari_toptable tr {border:1px solid #ccc; text-align:center}
	.sadari_toptable tr th {*width:16.66%; padding:18px 20px; border:1px solid #ccc;  font-size:11px; color:#222222; background:#f5f5f5}
	.sadari_toptable tr:last-child th:hover{text-decoration:underline}
	.sadari_toptable tr td {padding:15px 0px; color:#777777;  font-size:11px; border-right:1px dotted #ccc;}

	.sadari_toptable tr td:nth-child(2n) {border-right:1px solid #ccc !important}
	/*
	.sadari_toptable tr td:nth-child(1) {border-right:1px solid #ccc !important;}
	.sadari_toptable tr td:nth-child(4) {border-right:1px solid #ccc !important;}
	*/

	.toptable_menu > td {}

	.toptable_active {background:#404040 !important;; color:#fff !important;}
	.toptable_color td {}		
		.toptable_color td:nth-child(2n) span {color:#ed1f24 !important}
		.toptable_color span {display:block; color:#002d74 !important; font-weight:500; font-family:'Noto Sans Korean'!important; font-size:13px !important;}
		.toptable_color div {font-size:11px; font-family:'nanum'}
		.toptable_color td font {color:#777 !important; font-family:Dotum !important; font-size:11px !important}	

.add_width {overflow-x:scroll; width:838px;border-left:1px solid #ccc;border-right:1px solid #ccc}
.add_table { }/*홀짝패턴*/
	.add_table tr {text-align:center}
	.add_table tr th {padding:11px 0px; color:#e43405; font-size:11px; *font-weight:bold; border:1px solid #ccc; border-top:0px none; background:#f5f5f5; }

	.add_table tr td {width:33px; height:33px; border:1px solid #eeeeee}
	.add_table tr td div {width:28px; height:22px; padding-top:6px; margin:3px; background:#e43405; color:#fff; font-family:'Nanum'!important; font-weight:bold; font-size:10px;border-radius:20px}

	.add_table tr:last-child {background:#6b6b6b !important; color:#fff; font-size:11px}
	.sadari_num_2 {background:#f7f7f7; font-size:11px}

.sub_contable {width:100%; margin-top:35px}/*테이블 내용*/
	.sub_contable tr {border:1px solid #ccc; text-align:center}
	.sub_contable tr th {padding:18px 0; border:1px solid #ccc;  font-size:11px; color:#222222; background:#f5f5f5}
	.sub_contable tr td {padding:12px 0; color:#777777;  font-size:11px; border:1px solid #ccc;}
		.sub_contable tr td font {color:#333 !important; font-weight:500; font-family:'Noto Sans Korean'!important; font-size:14px !important}
		.sub_contable tr td code {display:inline-block; width:28px; height:20px; padding-top:8px; margin:3px; color:#fff; *font-weight:bold; font-size:11px; border-radius:20px}

		.sub_contable tr td b {color:#a9a9a9}
		.sub_contable tr td span {display:block; /*margin-top:5px;*/ font-weight:bold; font-family: 'namum';}/*언더*/
			.sadari_under {color:#3563f8}
			.sadari_over {color:#da4a50}

	.sadari_graph {position:relative; width:384px; height:35px}
		.sadari_graph > code {position:absolute; left:170px; top:-11px}
		.sadari_graph > div {position:absolute; top:7px; width:182px; height:20px; overflow:hidden}
		.sadari_graph > div > span {display:block; max-width:130px; height:18px; border-radius:4px;}
		.sadari_graph > div.sadari_left_g {left:1px}
		.sadari_graph > div.sadari_left_g > span {position:absolute; right:0; top:0; background:#4684e7; border:1px solid #3070d6}
		.sadari_graph > div.sadari_left_g > span > label {position:absolute; left:-65px; top:2px; font-family:'namum'; font-weight:bold; display:block; width:60px; text-align:right;}
		.sadari_graph > div.sadari_right_g {right:1px}
		.sadari_graph > div.sadari_right_g > span {position:absolute; left:0; top:0; background:#da4a50; border:1px solid #c12b31}
		.sadari_graph > div.sadari_right_g > span > label {position:absolute; right:-65px; top:2px; font-family:'namum'; font-weight:bold; display:block; width:60px; text-align:left;}

.pattern_menu_box > th {cursor:pointer;}

.more_btn {padding:12px 0px; margin-top:10px; margin-bottom:20px; width:838px; border:1px solid #ccc; text-align:center;cursor:pointer}

#selectbox_lately {width:110px; height:32px; margin:0px 5px 2px 5px; padding:5px 10px 5px 15px; border:1px solid #ccc;} /*최근분석탭*/
	#selectbox_lately:hover {border:1px solid #a9a9a9 }



/*기간별분석*/
.period_stitle {overflow:hidden; padding:25px 0} 
	.period_stitle>div {float:left; margin:0 30px 0 40px; }
		.period_stitle>div>code {float:left; display:block; margin:0 22px; font-size:28px; font-family:'Noto Sans Korean'; font-weight:500; letter-spacing:-1px; color:#404040; }
		.period_stitle>div>div {float:left; margin-top:16px; color:#8c8c8c; }
		.period_stitle>div>div>font {color:#616161; font-weight:bold}
	.period_stitle>label {float:right; display:block; margin-top:4px; padding:8px 10px;  border:1px solid #ccc; font-size:11px; color:#8c8c8c; cursor:pointer}
		.period_stitle>label:hover {color:#000; *text-decoration:underline;}

.period_cal {overflow:hidden; width:808px; margin:0px 0 11px 0; padding:10px 15px; background:#fbfbfb; border:1px solid #ccc;} /*기간 달력*/
	.period_cal_button {float:left; margin-top:4px; width:128px; padding:8px 0px 9px 0px; border:1px solid #ccc;text-align:center;cursor:pointer}	
	.period_cal_button:hover {border:1px solid #a9a9a9 }
	.period_cal b {float:left;margin-top:12px; padding:0 10px}
	.period_cal>span {display:block; float:left; width:36px; height:12px; margin:4px 0 0 5px; padding:10px 10px; border:1px solid #006be1; color:#fff; text-align:center; background:#4684e7;cursor:pointer}

	.period_data {overflow:hidden; float:left; margin-left:90px}
		.period_data li {float:left; width:52px; height:12px; margin-top:4px; padding:10px 10px; border:1px solid #ccc; border-right:0px none; text-align:center; background:#fff;cursor:pointer}
		.period_data li:last-child {border-right:1px solid #ccc; *color:#006be1; *background:#404040; *color:#fff}
		.period_data li:hover {text-decoration:underline; color:#7b7b7b; background:#fff}
		.period_data_active {background:#4684e7 !important; color:#fff !important}

	.table_description {padding:20px 0; border:1px solid #ccc; background:#fbfbfb}
	.table_description font {font-weight:bold; color:#4684e7 }

	.period_table {width:100%; text-align:center; color:#474747 ; font-size:11px;margin-top:35px;}	
		.period_table thead th {width:7.2%; padding:14px 0; background:#fbfbfb; border:1px solid #ccc;}
		.period_table thead th:first-child {width:12.4%}
		.period_table tbody tr td {padding:11px 0; border:1px solid #ccc; }
		.period_table tbody tr td span {font-family:'Noto Sans Korean'; font-weight:500; font-size:13px; letter-spacing:-1px; color:#404040; }
		.period_table tbody tr td b {font-family:'nanum'; font-size:10px; color:#777777}
		.period_table tbody tr:hover {background:#f6f8fc}
	

/*회차분석*/
.num_stitle {overflow:hidden; padding:25px 0} /*날짜/달력/갱신*/
	.num_stitle>div {float:left; margin:0 30px 0 40px; }
		.num_stitle>div>div {float:left; margin-top:12px; cursor:pointer}
		.num_stitle>div>code {float:left; display:block; margin:0 22px; font-size:28px; font-family:'Noto Sans Korean'; font-weight:500; letter-spacing:-1px; color:#404040; }
	.num_stitle>b {float:left; margin:4px 5px 0 0; padding:8px 10px; border:1px solid #ccc;cursor:pointer}
		.num_stitle>b:hover{color:#666; text-decoration:underline; border:1px solid #a9a9a9}
	.num_stitle>span {display:block; float:left; margin:10px 15px 20px 00px}
	.num_stitle>label {float:right; display:block; margin-top:4px; padding:8px 10px;  border:1px solid #ccc; font-size:11px; color:#8c8c8c; cursor:pointer}
		.num_stitle>label:hover {color:#000; *text-decoration:underline;}

#num_stitle {float:left; width:130px; height:32px; margin:4px 20px 0 0px; padding:5px 10px 5px 15px; border:1px solid #ccc; } /*최근분석탭*/
	#num_stitle:hover {border:1px solid #a9a9a9 }

.num_data {width:840px; text-align:center}
	.num_data thead tr { border:1px solid #ccc}
	.num_data thead tr td {padding:15px 0; background:#fbfbfb; font-size:11px}