@charset "utf-8";

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight:300;
	src: url('../fonts/Pretendard-Light.woff') format('woff');
	src: url('../fonts/Pretendard-Light.eot') format('eot');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight:400;
	src: url('../fonts/Pretendard-Regular.woff') format('woff');
	src: url('../fonts/Pretendard-Regular.eot') format('eot');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight:500;
	src: url('../fonts/Pretendard-Medium.woff') format('woff');
	src: url('../fonts/Pretendard-Medium.eot') format('eot');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight:600;
	src: url('../fonts/Pretendard-SemiBold.woff') format('woff');
	src: url('../fonts/Pretendard-SemiBold.eot') format('eot');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight:700;
	src: url('../fonts/Pretendard-Bold.woff') format('woff');
	src: url('../fonts/Pretendard-Bold.eot') format('eot');
}

@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight:800;
	src: url('../fonts/Pretendard-ExtraBold.woff') format('woff');
	src: url('../fonts/Pretendard-ExtraBold.eot') format('eot');
}

:root {
	--lem-black: #000;
	--lem-light-black :#222;
	--lem-gray: #c6c6c6;
	
	--lem-white: #fff;
	--lem-dark-white: #f9f9f9;    
	
	--lem-background-color:var(--lem-dark-white);
	--lem-border-line: 1px solid var(--lem-gray);
	--lem-border-highlight-line: 2px solid var(--lem-black);
  
	--lem-gap-l: 3.25rem;
	--lem-gap-m: 2.5rem;
	--lem-gap-s: 1rem;

	--lem-height:79px;


}


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;
}

html{
	font-size:16px;
}

body {
	width:100%;
	font-size:1.25rem;
	font-family:'Pretendard','Noto Sans KR', 'Roboto', '맑은 고딕', 'Nanum Gothic', '돋움', dotum, Helvetica, sans-serif;
	overflow-x: hidden;

}
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%; box-sizing:border-box; }
table, tr, th, td {
	border-collapse: collapse;
	text-align: center;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
th, td { border-bottom:var(--lem-border-line); border-left:var(--lem-border-line); }
th:first-child, td:first-child { border-left:none; }
th { color:#000; font-weight:500; background:var(--lem-background-color); }
thead th { }
tbody th { text-align:left; padding-left:15px; }
tbody td { text-align:center; }

h1, h2, h3, h4, h5, h6 { text-align:left; /*line-height:30px; height:30px; letter-spacing:0;*/ }
h3 { font-size:16px; }
h4 { font-size:15px; }

.hidden {
  overflow: hidden;
  border: 0;
  position: absolute;
  /* use relative if the layout doesn't look well*/
  z-index: -1;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

caption.hidden{
	overflow: hidden;
	border: 0;
	position: relative;
	z-index: -1;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
} 


.clear { clear:both; }

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

input { vertical-align:middle; color:#868686; cursor:pointer; }
label { padding-right:15px; vertical-align:middle; cursor:pointer; color:#868686; }
select { height:20px; padding-left:3px; /*font-size:15px;*/ vertical-align:middle; }

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

/* 등락 색상*/
.up { color:#DA291C; }
.down { color:#3e4fb1; }
.same { color:#1D9D5C; }

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


/* Global Control */
th,dt{
	font-weight:600;
}
td,dd{
	color:var(--lem-light-black);
}
dd,dt{
	display:flex;
	justify-content: center;
	align-items: center;
}

dd>img{
	padding-right: 0.25rem;
}



tbody th, tbody td{
	height:var(--lem-height);
}



/* 현재가 : 지수 */
#index_tb {display:flex; justify-content: space-between; gap:3rem; margin-bottom:3.5rem;}
#index_tb dl {padding:60px 0; width:calc(100% / 3); text-align:center; border:var(--lem-border-line);  border-radius:30px 0;}
#index_tb dt { height:40px; font-size:2rem; }
#index_tb dd.index_close { padding-top:20px; font-size:2.5rem; font-weight:700; color:#000; }
#index_tb dd.index_updown { padding:10px 0; }

/* 주가 top */
#cur_top_box {display:flex; justify-content:space-between; 
	gap: 3rem;
	margin-bottom:3.5rem;
}

#cur_top_box dl {width:50%; }

/* 현재가, 전일대비, 등락률 */
#cup {
	display:grid;
	grid-template-columns: 60% 20% 20%;
	grid-template-rows: 50% 50%;
	grid-row-gap: var(--lem-gap-s);
}
#cur_close { 
	grid-area:1/1/3/2;
	font-size:3.625rem; font-weight:700;
}

#updown_title,#updown{align-self: flex-end;}
#percent_title,#percent{align-self: flex-start;}

/* 현재가 : 시가, 고가, 저가, 거래량 */
#ohlv { display:grid; grid-template-rows: repeat(2, 50%); grid-template-columns: repeat(4,25%); border-top:var(--lem-border-line);}
#ohlv dt, #ohlv dd { height:var(--lem-height);text-align:center; vertical-align:middle; border-right:var(--lem-border-line); border-bottom:var(--lem-border-line); }
#ohlv dt:last-of-type,#ohlv dd:last-of-type{
	border-right:none;
}
#ohlv dt { background:var(--lem-background-color); white-space: nowrap;}
#open{
	grid-area: 2/1/3/2;
}
#high{
	grid-area: 2/2/3/3;
}
#low{
	grid-area: 2/3/3/4;
}
#volume{
	grid-area: 2/4/3/5;
}



/*----- 차트 -----*/
#chart-container{
	display:flex;
	justify-content: space-between;
	gap:3rem
}
#daily_chart { }
#intraday_chart { }
.chart_area {width:50%;}
/* .chart_area h4 { padding-left:30px; width:60%; height:58px; font-size:25px; color:#000; background:url("../images/bullet_title.png") no-repeat 0 8px; } */
.chart_area h4 { width:100%; height:67px; font-size:2.0rem; color:#000; }
.chart_area .chart { width:100%; padding:30px 0;text-align:center; border:1px solid #ddd; }
.chart_area .chart form { margin-left:5%; text-align:left; }
#intraday_chart .chart { padding-top: 75px; }

/* 버튼 */
.btn { display:inline-block; padding: 0.75rem; font-weight:600; border-radius: 0.5rem; background:#efefef; color:#000; text-align:center; vertical-align:middle; }
.btn:active{
	transform:scale(0.98);
}
/* 현재가 : 자본금 */

/* margin-top:10px; */
.capital_tb tbody th, .capital_tb tbody td { width:25%; }
.capital_tb tbody th { padding-left:20px; }
.capital_tb tbody td { width:25%; }
.capital_tb tbody td.strong { }


/* pc, mobile 테이블 */
#pc_tb, #pc_nt { display:block; margin-top: 3.5rem}
#mb_tb, #mb_nt { display:none; }
.capital_tb { border-top:var(--lem-border-line);}
/* Paging */
#_uiPaging li,
#_uiPaging li._uiBtn,
#_uiPaging li._uiBtn>a { background-color:#d5d5d5; }
#_uiPaging li._uiOn,
#_uiPaging li>a:hover, #_uiPaging li>a:focus,
#_uiPaging li._uiBtn>a:hover, #_uiPaging li._uiBtn>a:focus { background-color:#999; }
#_uiPaging li>a:hover, #_uiPaging li>a:focus { }

/* 태블릿 최적화 */
@media screen and (max-width:1024px) {	
	#cur_top_box { 
	flex-direction: column; 
	}
	
	#cur_top_box dl{
		width:100%;
	}

	/* 차트 fieldset */
	label{padding-right:0px;}

	.btn{
		padding:0.625rem 0.5rem;
	}
}

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

	#index_tb dd>img {
		padding-right: 0.125rem;
		width: 9px;
    	height: 7px;
	}
	#cur_close > img {
		width: 20px;
    	height: 15px;
	}
	#updown > img { 
		width: 12px;
    	height: 8px;
	}

	/* height control */
	#ohlv dt, #ohlv dd{
		height:50px;
	}

	tbody th, tbody td{
		height:50px;
	}



	/* #pc_tb, #pc_nt, .tab_menu { display:none; }
	#mb_tb, #mb_nt { display:block; } */

	/* 현재가 : 지수 */
	#index_tb{
	gap:var(--lem-gap-s);
	margin-bottom: 2.25rem;
	}
	#index_tb dl{padding:15px 0;}
	#index_tb dt {
		height: 40px;
		font-size: 0.875rem;
	}

	#index_tb dd.index_close {
		font-size: 1.125rem;
		padding-top: 0.125rem;
	}

	#index_tb dd.index_updown {
		font-size: 0.625rem;
		white-space:nowrap;
	}

	/* 주가 top */
	#cur_top_box{
		margin-bottom: 2.25rem;
		gap:var(--lem-gap-s);
	}
	#cur_close { width:100%; text-align:center; }

	#cup{
		grid-row-gap: 0.375rem;
	}

	#cur_close{
		/* grid-area: 1/1/2/3; */
		font-size: 2rem;
	} 

	#updown_title, #updown, #percent_title, #percent { width:100%; }
	/* #updown_title, #percent_title { font-size:0.875rem;} */
	#updown, #percent { justify-content:flex-start;}



	/*----- 차트 -----*/
	#chart-container{
		flex-direction: column;
		gap: 0;
		margin-bottom:2.25rem;
	}
	#daily_chart{margin-bottom:2.25rem;}
	.chart_area { padding-top:0; width:100%;}
	#intraday_chart.chart_area {}
	#intraday_chart.chart_area .chart { padding-top:15px;}
	
	.chart_area .chart{ padding:15px 0;}
	.chart_area h4{
		height: 2rem;
		font-size: 1.25rem;
	}
	

	/* 현재가 : 자본금 */
	#pc_tb{
		margin-top:var(--lem-gap-s); 
	}

	.capital_tb tbody th{
		padding-left: 0px;
		white-space: nowrap;
		text-align: center;
		font-size: 0.625rem;
	}
	.capital_tb tbody td{
		font-size:0.625rem;
	}
}