@charset "utf-8";

@import url("https://www.hdec.kr/common/css/font.css");

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width:100%;
	font-family: "Kopub", "맑은 고딕", "돋움", "Malgun Gothic", "Dotum", "NanumGothic", "나눔고딕", "Arial", sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	color: #333;
	border: none;
	}

.won { font-family: "Kopub", "맑은 고딕", "돋움", "Malgun Gothic", "Dotum", "NanumGothic", "나눔고딕", sans-serif; }

h3 { padding:0; margin:0; font-size:14px; }
h2 { padding:0; margin:0 0 32px 0; font-size:28px; font-weight:normal; }

.sub_tt { padding-top:72px; }
.sub_tt div{border-top:2px solid #bb162b; width:55px; height:2px; }

.visible_tt{
	visibility:visible;
	width:100%;
	height:30px;
	text-align:left;
	font-size: 16px;
	line-height:110%;
}

table, div, img, fieldset, form { margin:0; padding:0; border:0; }
input, select{vertical-align:middle; }
label{padding-right:10px; font-size:12px;}
select { font-family: "Kopub", "맑은 고딕", "돋움", "Malgun Gothic", "Dotum", "NanumGothic"; font-size: 12px;}
a:link, a:visited, a:hover, a:active { text-decoration: none; color:#fff; }
ol, ul, li, dl, dt, dd {	list-style: none; margin:0; padding:0; }

table { width:100%; border-top: 2px solid #000; border-bottom:1px solid #000; }

table, tr, th, td {
	border-collapse: collapse;
	font-weight:normal;
}

thead th {
	/* height:40px; */
	text-align:center;
	font-weight:600;
	border-bottom:1px solid #CCC;
	background:#F1F1F1;
}

tfoot th, tfoot td { background:#EFEFEF; }

tr:first-child td, tr:first-child th { border-top:none; }

th, td { padding:17px 0; border-top: 1px solid #CCC; }

tbody td { text-align:right; padding-right:0; }
tbody td div { text-align:right; width:80%; padding-right:20%; }
tbody .date { text-align:center; padding-right:0; }
.n_right { border-right:none !important; }

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

.up { color:#BB0000; }
.down { color:#0288D1; }
.same { color:#000000; }

.updown_mark { text-align:right; display:inline-block; width:40%; }
.updown_num { text-align:right; display:inline-block; width:45%; }
.mk_table tbody td div { text-align:right; width:85%; padding-right:15%; }
/* .mk_table .updown_mark { width:36%; } */
/* .mk_table .updown_num { width:60%; } */


/*--- Current ---*/
#date_time {
	padding-bottom:12px;
	height:22px;
	text-align:right;
	font-size:14px;
}
#cur_top { width:100%; height:240px; margin-bottom:40px; border:1px solid #E5E5E5; }
#cur_top .cur_quote { width:45%; left:3%; }
#cur_top #stock, #cur_top #ohlv { width: 100%; }
#cur_top #ohlv { top:90px; }

.cur_quote { position: relative; width:100%; margin-bottom:40px; }
.cur_quote dl { position: absolute; top:0; }
.cur_quote dt, .cur_quote dd { position: absolute; width:100%;}
.cur_quote dt { top:0; }

#stock { left:0; width:48%; height:100%; }

#close_title { visibility:hidden; margin:0; padding:0; width:0; height:0; overflow:hidden; font-size:0; line-height:0; }
#updown, #percent, #updown_title, #percent_title { padding-top:25px; width:26%; text-align:center; height:45px;}

#updown_title, #updown { right:26%; }
#percent_title, #percent { right:0; }

#updown, #percent { top:24px; }


#ohlv { width:48%; right:0; border-top:2px solid #333333; text-align: center;} /* OHL, volume */

#ohlv dt {
	top: 0;
	width: 25%;
	padding: 17px 0;
	font-weight:600;
	background:#F1F1F1;
	border-bottom: 1px solid #CCC;
}

#ohlv dd {
	top: 60px;
	width: 25%;
	padding: 17px 0;
	border-bottom:1px solid #000;
}

#open_title, #open { left: 0%; }
#high_title, #high { left: 25%; }
#low_title, #low { left: 50%; }
#volume_title, #volume { left: 75%; }

#stock .close {
	top:36px;
	left:4%;
	width:47%;
	line-height:100%;
	font-size:24px;
	font-weight:600;
}

/* Top Current */
#top_box { width:99.8%; height:130px; margin-bottom:30px; border:1px solid #E5E5E5; }
#top_box #stock { top:20px; }
#top_box #ohlv { top:15px; right:20px; }
#top_box #stock .close { left:10%; }

/* Current : Chart */
#chart_area { position:absolute; top:48px; right:2%; width:45%; text-align:center; }
#big_chart { width:98%; margin-bottom:20px; margin-left:2%; text-align:center; }

/* Current : invest */
#invest_tb { margin-bottom:40px; }
#invest_tb td { text-align:center; }

/* Current :  daily */
#daily_tb { float:left; width:48%; }
#daily_tb tbody th { font-weight:600; }
#daily_tb td { text-align:center; /*margin:0 24px;*/ }

#cap_ind { float:right; width:48%; }
#capital_tb tbody th { text-align:left; padding-left:10px; font-weight:600; }

#index_tb { margin-top:57px; height:225px; text-align:center; }
#index_tb dl { float:left; width:33.3%; border-top:2px solid #333;}
#index_tb dt { padding:17px 0; font-weight:600; background:#F1F1F1; border-bottom:1px solid #CCC; }
#index_tb dd.index_close { height:118px; }
#index_tb dd.up { padding-top:50px; color:#FFF; background:url('../images/index_up.gif') no-repeat center; background-size:100px; }
#index_tb dd.down { padding-top:45px; color:#FFF; background:url('../images/index_down.gif') no-repeat center; background-size:100px; }
#index_tb dd.same { padding-top:45px; color:#CCC; }
#index_tb dd.index_updown { padding:17px 0; border-bottom:1px solid #000; }

/*--- day + min---*/
#chart_area1{float:left; width:47%; text-align:center;}
#chart_area2{float:right; width:47%; text-align:center;margin-bottom:20px;}

#day_chart #chart_area2 {margin-top:29px;}

#btn_list {clear:both; font-size:12px; margin-bottom:10px;}
.bun_tab{text-align:right;}
.period_select {text-align:left; padding-left:1%; }

h2.rival_title { position:relative; }
h2.rival_title .line { position:absolute; top:0; left:0; width:55px; height:2px; background-color:#bb162b }
h2.rival_title span { display:inline-block; padding-top:20px; margin-bottom:46px; }

.rival_select_part { width:100%; text-align:right; margin-bottom:5px; }
.rival_select_title { display:inline-block; padding:1px 11px 2px; border:1px solid #ccc; font-size:12px; color:#666; margin-top:72px;}
.rival_select { display:inline-block; margin-left:5px; padding-top:72px; }
.wstock_tb { display:none; margin-top:7px; }
#wstock0_tb { display:block; }


/*--- marketview ---*/
.mk_price {clear:both; width:100%; padding-top:72px;}


/*.mk_info {height:410px; }
.bond{height:355px; }*/

.mk_table {
	width:50%;
	float:left;
	margin-bottom:15px;
}

.mk_table table tbody th {
	text-align:left;
	padding-left:24px;
	background:#fafafa;
}

.mk_table table tbody th a{
	color:#333;
	background:url('../images/ico_chart.gif') no-repeat;
	padding-left:20px;
}

.mk_chart {
	width:45%;
	height:260px;
	float:right;
}

.mk_chart img{clear:both; margin-top:10px;}

/* ��Ʈ ����*/
.chart_info{width:100%; }
.chart_info h5{
	float:left;
	width:40%;
	margin:0;
	padding-bottom: 16px;
	display:inline-block;
	font-size: 14px;
	background:none;
}
.chart_info .name_date span {
	 width:35%;
	 float:right;
	 text-align:right;

}
.chart_info li{float:left; padding-right:2%;}
.chart_info .chart_data{
	clear:both;
	/*width:98%;*/
	height:30px;
	background:#F7F7F7;
	padding:10px 0 0 2%;
	font-size: 14px;
}
.chart_info .chart_data dd, .chart_info .chart_data dt{float:left;}
.chart_info .chart_data dt{padding-left:10px;}
.chart_info .chart_data dd{padding-left:5px;}
.chart_info .chart_data dd img{margin-top:0;}
.chart_info .line_ex{float:right; width:200px; text-align:right; padding-right:3%; }
.chart_info .line_ex span{ text-align:left; line-height:90%;}

/*--- chart analysis ---*/
#chart_set {padding-bottom:20px; padding-top:72px; }
#chart_set th, #chart_set td{	vertical-align:middle; margin:0; height:40px; text-align:left;}
#chart_set th{background:#fff; text-align:center;}
#chart_set a {margin-left:50px;}
#chart_set  input, #chart_set select{margin-left:10px;}
#chart_set .hidden {margin:0;}
#chart_area3{clear:both; width:100%; text-align:center; margin-bottom:0px; }


/*---- paging ----*/
.page_navi {
	padding:0;
	margin-top:18px;
	vertical-align:middle;
	text-align:center;
}
.page_navi li{display:inline;}
.page_navi li a, .page_navi li span {display:inline-block; width:40px; vertical-align:top;  text-align:center; color:#000000;}
.page_navi li.on a { color:#bb0000; text-decoration: underline;}

/*--- button ---*/
.btn01{
	display:inline-block;
	vertical-align:middle;
	padding-left:10px;
}
.btn02{
	display:inline-block;
	width:54px;
	height:22px;
	vertical-align:middle;
}

/*-- chart_accessibility --*/
.chart_accessibility { visibility:hidden; margin:0; padding:0; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}

/*----- 정보제공 -----*/
#bottom_box {
	clear:both;
	margin:0;
	text-align: right;
}

.pc_view { display:block; }
.mb_view { display:none; }

@media screen and (max-width:810px) {
	body { font-size:13px; }
	th, td { padding:12px 0; }

	#cur_top { height:460px; }
	#cur_top .cur_quote { width:94%; }
	#cur_top #stock, #cur_top #ohlv { width:100%; }

	#ohlv dt { padding:12px 0; }
	#ohlv dd { top:48px; padding:12px 0; }

	#chart_area { position:relative; top:0; right:0; margin-top:230px; width:100%; text-align:center; margin-bottom:30px; }

	#daily_tb { clear:both; width:100%; margin-bottom:30px; }
	#cap_ind { width:100%; }
	#index_tb { margin-top:30px; }

	#capital_tb tbody th { padding-left:24px; }
	#capital_tb tbody td { padding-right:24px; }
}

@media screen and (max-width:480px) {
	.pc_view { display:none; }
	.mb_view { display:block; }
}