@charset "utf-8";

html, body, div, span, iframe, h1, h2, h3, h4, h5, p, a, button, img, dl, dt, dd, ul, li, fieldset, form, label, table, caption {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
}

body{
	width: 100%;
	/*max-width:900px;*/
	padding:0;
    margin:0;
	font-size:14px;
	font-family: "Malgun Gothic", "NanumGothic", "Open Sans", "Arial";
	color:#777;
}

ul, li, dl, dt, dd{
	list-style-type:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

dt {color:#333333; font-weight:600;}

table, div {
	width: 100%;
}

table, tr, th, td {
	border-collapse: collapse;
	text-align: center;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

table {	border-top: 2px solid #666;}
th, td {height:40px; border-right: 1px solid #999; border-bottom:1px solid #999;}
th, tfoot td {font-weight:600; color:#333333; background:#F5F5F5;}

tbody th{text-align: left; padding-left:15px;}
tbody td {text-align:right; padding-right:15px;}

h1, h2, h3, h4, h5, h6 {text-align:left; letter-spacing:0; font-weight:600; line-height:20px; color:#000;}

h4{
	font-size:14px;
	margin-bottom:4px;
	vertical-align:middle;
}

caption, .hidden{visibility:hidden;  margin:0; padding:0; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}

.r_line{border-right:none;}
.date{text-align:center; padding:0; background:none;}

input{vertical-align:middle;}
label{padding-right:5px; cursor:pointer;}
select{height:25px; padding-left:5px; font-size: 13px; color:#8A8A8A; vertical-align:middle;}

/* 링크 */
a:link {color:#696969; text-decoration:none}
a:visited {color:#696969; text-decoration:none;}
a:hover {color:#FF6600; text-decoration:none;}

/* 등락 색상*/
.up{color:#FE0000;}
.down{color:#0000FE;}
.same{color:#047832;}

.clear:after{
	content:'';
	display:block;
	clear:both;
}

#info {font-size:13px; color:#777 !important; text-align:left;}

/*----- top_current -----*/
#stock_info {width:100%; height:30px;}
#stock_info .name{float:left; width:50%; font-size:16px; text-align:left; }
#stock_info .date{float:right; width:50%; text-align:right; }

/* 현재가, 전일대비, 등락률 */

.cur_quote dl{position: absolute;}
.cur_quote dt, .cur_quote dd {position: absolute; text-align: center;}

.cur_quote #cup {
	width:100%;
	text-align:center;
}

#close_title {visibility:hidden;}

.cur_quote #cur_close {
	top:20px;
	width:50%;
	text-align:left;
	font-family: Arial;
	font-size: 36px;
	font-weight: bold;
	text-align:center;
}

#updown_title, #updown, #percent_title, #percent {width:70px; text-align:left;}
#updown_title, #updown {top:20px;}
#percent_title, #percent {top:45px;}
#updown_title, #percent_title{left:62%;}
#updown, #percent{left:77%;}


/* 현재가 : 시가, 고가, 저가, 거래량 */
.cur_quote #ohlv {
	top:80px;
	width:100%;
	border-top:2px solid #666;
}

#ohlv dt, #ohlv dd {
	width:25%;
	padding: 10px 0 10px 0;
	border-right: 1px solid #999;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#ohlv dt {
	background: #F5F5F5;
	border-bottom: 1px solid #999;
}

#ohlv dd {
	top:39px;
	border-bottom: 1px solid #999;
}

#open_title, #open { left: 0%; }
#high_title, #high { left: 25%;}
#low_title, #low { left: 50%;}
#volume_title, #volume { left: 75%; border-right:none !important;}

/* 현재가 + 차트 */
#quote_chart{ clear:both; position: relative; width:100%; height:200px; margin-bottom:40px;	border-top:2px solid #eeeeee;border-bottom:1px solid #eeeeee; border-bottom:1px solid #eeeeee;}

#cur_chart_box{
	position: absolute;
	left:20px;
	top:5px;
	width: 42%;
	height:170px;
}

#chart_min {
	position: absolute;
	right:0;
	overflow:hidden;
	margin-top: 15px;
	width: 52%;
	text-align:center;
}

/* 현재가 : 호가 */
#hoga_tb{
	float:left;
	width:43%;
}


/* 현재가 : 자본금 */
#cap_ind{
	float:right;
	width:52%;
}

#cap_ind tbody th{text-align: left; padding-left:10px;}
#cap_ind tbody td{text-align: right; padding-right:10px;}

/* 현재가 : 지수 */
#index_tb{margin-top:38px;}
#index_tb dl {float:left; width:33.3%; border-top: 2px solid #666;}
#index_tb dt {height:40px; line-height:40px; text-align:center; background:#F5F5F5; border-bottom:1px solid #999;}
#index_tb dd {font-weight:bold; text-align:center;}

#index_tb dd.index_close {height:119px; padding-top:45px; color:#ffffff; }
#index_tb dd.index_updown {padding:12px 0 13px 0; border-top: 1px solid #999; border-bottom: 1px solid #999; line-height:100%;}


/* 주가 top */

#cur_top_box {
	position: relative;
	margin-bottom:30px;
	width:100%;
	height:125px;
	border-top:2px solid #eeeeee;
	border-bottom:1px solid #eeeeee;
}

#cur_top_box #cup {
	top:20px;
	width:48%;
}

#cur_top_box #cup #updown_title, #cur_top_box #cup #percent_title { left:57%; }
#cur_top_box #cup #updown, #cur_top_box #cup #percent { left:75%; }

#cur_top_box #ohlv {
	top: 20px;
	left: 50%;
	width:50%;
}

/*----- 분주가,일주가 -----*/

#daily_chart1, #min_chart1 {
	float: left;
	width:50%;
	text-align:left;
}

#daily_chart2, #min_chart2 {
	float: right;
	width:50%;
	height:185px;
	margin-bottom:40px;
	text-align:right;
}

#btn_list {
	clear: both;
	width: 100%;
	text-align:right;
	margin-bottom:10px;
}

/* 버튼 */
.btn {
	display:inline-block;
	width:60px;
	height:18px;
	padding:7px 0;
	background:#666;
	color:#ffffff !important;
	text-align:center;
	vertical-align:middle;
}

/*---- 외국인 ----*/
#chart_box {margin-bottom:30px;}

/*----- 재무 -----*/
#fnchart_area { width:100%; padding:13px 0; height:260px; margin-bottom:40px; border-top:3px solid #F5F5F5; border-bottom:3px solid #F5F5F5; text-align:center;}
#fnchart_area .img_chart {display:inline-block; width:32%;}
#fnchart_area h5 {text-align:center;}

.title_unit {width:100%; margin-bottom:10px;}
.fn_title {width:59%; display:inline-block; }
.unit {float:right; width:40%; text-align:right; display:inline-block; }

.fn_list { clear:both; margin-bottom:30px; }
.fn_list th, .fn_list td { width:15%; }
/*.fn_list th { background:none; }*/
.fn_list tbody th { width:25%; text-align:left; padding-left:40px; color:#777; background:none; }
.fn_list tbody .em th, .fn_list tbody .em td { color:#333; }
.fn_list tbody .em th { padding-left:20px; }

.fn_list tr th:last-child, .fn_list tr td:last-child { border-right:none !important; }


#pc_tb, #pc_nt {display:block;}
#mb_tb, #mb_nt {display:none;}
th.pc_view, td.pc_view { display:table-cell; }



/* 모바일 최적화 */
@media screen and (max-width:640px) {
	tbody th {padding-left:5px;}
	tbody td {padding-right:5px;}

	#pc_tb, #pc_nt {display:none;}
	#mb_tb, #mb_nt {display:block;}
	#mb_tb th, #mb_tb td{width:20%;}
	th.pc_view, td.pc_view {display:none;}


	/*현재가*/
	#quote_chart{ height:380px; margin-bottom:30px;}

	#updown_title, #percent_title, #cur_top_box #cup #updown_title, #cur_top_box #cup #percent_title{left:57%;}
	#updown, #percent, #cur_top_box #cup #updown, #cur_top_box #cup #percent{left:77%;}

	#cur_close img { display: none; }

	#cur_chart_box{
		left:0;
		top:0;
		width: 100%;
		height:170px;
	}

	#chart_min {
		left:0;
		top:170px;
		width: 100%;
	}

	#hoga_tb, #cap_ind{
		float:none;
		width:100%;
	}

	#hoga_tb {margin-bottom:30px;}
	#index_tb {margin-top:30px;}
	#capital_tb th, #capital_tb td{width:50%;}
	#capital_tb td{border-right:none;}

	#index_tb dd.index_updown { font-weight:normal; font-size:12px; }


	/* 주가 top */
	#cur_top_box {
		height:160px;
		border-bottom:none;
	}

	#cur_top_box #cup {
		top:0;
		width:100%;
	}

	#cur_top_box #ohlv {
		top: 80px;
		left: 0;
		width:100%;
	}


	/* 일주가, 분주가 */
	#daily_chart2, #min_chart1 {display:none;}
	#daily_chart1, #min_chart2 {width:100%; margin-bottom:30px; text-align:center;}

	/* 재무 */
	#fnchart_area { padding:13px 3%;  height:740px; margin-bottom:40px; border:3px solid #F5F5F5; box-sizing:border-box;}
	#fnchart_area .img_chart {display:block; width:100%; margin-bottom:20px;}
	.fn_list tbody th, .n_list tbody td { padding-left:10px; }
	.fn_list tbody .em th { padding-left:5px; }
	.fn_list th:nth-child(2), .fn_list td:nth-child(2),.fn_list th:nth-child(3), .fn_list td:nth-child(3) { display:none; }

	.fn_title {width:50%; display:inline-block; }
	.unit {float:right; width:40%; text-align:right; display:inline-block; }

	#mb_tb tbody th { text-align:center; }
}