@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:1200px;
	font-size:14px;
	font-family:"Malgun Gothic", "맑은 고딕", "Open Sans", "Arial";
	color:#51555D;
}

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

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 #51555D;}
th, td {height:40px; line-height:40px; border-bottom:1px solid #E0E0E0;}
th {font-weight:400;}
thead th {background:#E0E0E0;}
tbody th {text-align:left; padding-left:10px;}
tbody td {text-align:right; padding-right:10px;}

h1, h2, h3, h4, h5, h6 { text-align:left; line-height:30px; height:30px; letter-spacing:0;}
h3 {font-size:22px; font-weight:600;}
h4 {font-size:18px; font-weight:600;}

caption, .hidden{visibility:hidden;  margin:0; padding:0; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}
input{vertical-align:middle;}
label{padding-right:5px; cursor:pointer; font-size:13px;}
select{height:20px; padding-left:3px; font-size:11px; vertical-align:middle;}

/* 링크 */
a {color:#555; text-decoration:none}
a:visited {color:#555; text-decoration:none;}
a:hover {color:#008BCC; text-decoration:none;}

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

/* 등락 색상*/
.up{color:#E8252D;}
.down{color:#2281EC;}
.same{color:#51555D;}

/*----- top_current -----*/
#stock_info {width:100%; height:30px; margin-bottom:25px;}
#stock_info .name {float:left; width:45%; text-align:left; }
#stock_info .code {font-size:15px; font-weight:normal;}
#stock_info .d_date{float:right; width:55%; line-height:25px; font-size:13px; text-align:right; }

/* 현재가, 전일대비, 등락률 */
#quote_box {clear:both; position:relative; width:100%; height:129px; border-top:2px solid #51555D; border-bottom:1px solid #E0E0E0; margin-bottom:45px;}

.cur_quote #cur_close {
	position:absolute;
	top:33px;
	width:25%;
	line-height:55px;
	text-align:center;
	font-weight:600;
	font-size:40px;
	color:#373737;
}

.cur_quote #change_ohlv {
	position:absolute;
	top:0;
	right:0;
	width:75%;
}

#change_ohlv dt, #change_ohlv dd {
	position:absolute;
	width:16.66%;
	text-align:center;
	font-size:14px;
}

#change_ohlv dt {padding:10px 0 10px 0; border-bottom:1px solid #E0E0E0;}
#change_ohlv dd {top:41px; padding-top:35px;}

#updown_title, #updown {left:0%;}
#percent_title, #percent {left:16.66%; }
#open_title, #open {left:33.32%;}
#high_title, #high {left:49.98%;}
#low_title, #low { left:66.64%;}
#volume_title, #volume {left:83.3%;}


/* 현재가 : 자본금 */
#capital_area{
	clear:both;
	float:left;
	width:48%;
}

.capital_tb tbody th {width:28%; text-align:center; padding:0; background:#FAFAFA;}
.capital_tb tbody td {width:22%; text-align:right; padding-right:13px;}

/* 현재가 : 지수 */
#index_area {float:right; width:48%; overflow:hidden; }
#index_area dl {float:left; width:33.3%; text-align:center;}
#index_area dt {padding:10px 0 10px 0; border-top:2px solid #51555D; border-bottom:1px solid #E0E0E0; background:#FAFAFA;}
#index_area dd.index_close {height:130px; padding-top:98px; font-size:25px; font-weight:400;}
#index_area dd.index_updown {padding-bottom:30px; line-height:100%; border-bottom:1px solid #E0E0E0;}


/*----- 차트 -----*/
#daily_chart1 {
	float:left;
	width:48%;
	text-align:left;
}

#daily_chart1 .btn {margin-left:10px;}

#daily_chart2{
	float:right;
	width:48%;
	height:215px;
	margin-bottom:54px;
	text-align:right;
}

/* 버튼 */
.btn {
	display:inline-block;
	width:50px;
	height:27px;
	line-height:27px;
	color:#51555D !important;
	background:url('../images/btn_bg.gif') no-repeat;
	text-align:center;
	font-size:12px;
}

#pc_tb {display:block;}
#mb_tb {display:none;}



/* 모바일 최적화 */
@media screen and (max-width:820px) {
	body {font-size:13px;}

	.cur_quote #cur_close {font-size:35px;}

	#capital_area {width:55%;}
	#index_area {width:41%;}

	.capital_tb tbody th {width:30%;}
	.capital_tb tbody td {width:20%; padding-right:7px;}
}

@media screen and (max-width:640px) {
	tbody th {padding-left:5px;}
	tbody td {padding-right:5px;}

	#pc_tb, .name{display:none;}
	#mb_tb {display:block;}

	#stock_info {margin-bottom:5px;}

	#quote_box {height:145px;}

	.cur_quote #cur_close {top:3px;	width:100%;}
	.cur_quote #change_ohlv {top:65px; width:100%;}

	#change_ohlv dt {border-top:1px solid #E0E0E0; font-size:12px;}
	#change_ohlv dd {top:41px; padding-top:10px; font-size:12px;}

	#capital_area, #index_area, #daily_chart1, #daily_chart2 {float:none; width:100%;}
	#capital_area {margin-bottom:40px;}
	#daily_chart1, #daily_chart2 h4{text-align:center;}
	#daily_chart2 h4 {margin-top:10px; font-size:16px;}

	.capital_tb tbody th {width:50%;}
	.capital_tb tbody td {width:50%; text-align:right; padding-right:30px;}

	#index_area dd.index_close {font-size:22px;}
}