@charset "utf-8";
/*
font-family: 'Montserrat', sans-serif;
*/
/* 적용css */
/* inv_tab */
ul.inv_tab{width: 100%; overflow:hidden; text-align:center; font-size:0; letter-spacing:-4px; margin-bottom:30px;}
ul.inv_tab li{ display:inline-block;  letter-spacing:-0.5px; border:1px solid #cfcfcf; border-right:none; border-top:2px solid #333;}
ul.inv_tab li:last-child { border-right:1px solid #cfcfcf;}
ul.inv_tab li a { font-size:18px; height:80px; line-height:80px; display:block; width:260px;}
ul.inv_tab li.on a {background:#333; color:#fff;}

.stock{margin-bottom:70px;}
.inv_section{margin-top:70px;}
.inv_tit { color:#333; margin-bottom:20px; position:relative; z-index:10; position:relative;}
.inv_tit.right { text-align:right; }
.inv_tit.right span { position:static;}
.inv_tit span {}
.inv_tit p { font-size:40px; font-weight:500; margin-top:5px;}
.inv_tit .inv_date{ color:#555; opacity:0.8;  font-size:16px; position:absolute; right:0; bottom:0;}

/* clearfix가 정의되어 있지 않아 float된 자식(.stock/.market, money_box의 li)이 부모 높이에 반영되지 않고
   밖으로 밀려나오던 문제 → 실제 clear 동작 부여 */
.clearfix:after { content:""; display:table; clear:both; }

.top_info { margin-bottom:100px;}
.top_info > div { width:47.42857142857%; float:left; margin-right:5.14285714286%; box-sizing:border-box; }
.top_info > div:last-child { margin:0; }
.money_box {  color:#fff; }
.money_box .now { background:#3b3b3b; position:relative; padding:24px 20px;}
.money_box .now p { font-size:20px;}
.money_box .now p span { font-size:40px; font-family: 'Montserrat', sans-serif; font-weight:500; display:inline-block; margin-left:14px;}
.money_box .now > div  { position:relative; }
.money_box .now .date { position:absolute; right:0; bottom:0; opacity:0.8;}
.money_box .list { background:#555; height:auto; margin-bottom:30px; overflow:hidden; }
.money_box .list ul {padding:24px 20px; }
.money_box .list ul li { float:left; width:25%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.2); padding:0 20px;}
.money_box .list ul li:last-child { border:none;}
.money_box .list ul li dl {}
.money_box .list ul li dl dt { font-size:18px; font-weight:500;}
.money_box .list ul li dl dd { font-family: 'Montserrat', sans-serif;  font-size:30px; font-weight:500; text-align:right; margin-top:28px;}


/*
div.now{position:relative;font-size:16px;color:#292b2c;background:#f8f8f8;border:1px solid #d7d7d7;border-bottom:none;padding:26px;}
div.now span{font-size:30px;color:#3366cc}
div.now em{color:#8a9096;position:absolute;right:30px;top:43%;}
*/
table.inv_tb{width: 100%; border-top:2px solid #eeeeee;line-height:1.4;}
table.inv_tb th{padding:18px;color:#333;background:#fafafa; border-right:1px solid #eeeeee; border-bottom:1px solid #eeeeee;}
/*table.inv_tb th:first-child, table.inv_tb th:last-child { width:25%; }*/
table.inv_tb td {padding:18px 10px;border-bottom:1px solid #eeeeee;border-right:1px solid #eeeeee;text-align:center;  text-align:center;}
table.inv_tb td a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
table.inv_tb .br_none{border-right:none;}
table.inv_tb .bg_red{background:#ffe7e7;}
table.inv_tb .bg_yellow{background:#fff3e7;}
table.inv_tb .bg_blue{background:#e7f1ff;}
table.inv_tb .bg_skyblue{background:#e7fbff;}


@media screen and (max-width:1200px){
	.top_info > div { width: 100%; float: none; margin-right: 0; margin-bottom:30px;}
	#chart_div { margin:-80px 0 0 0 !important;  }
}

@media screen and (max-width:1024px){
	/* 컬럼 많은 테이블(일별시세 등)이 모바일에서 화면 밖으로 밀려나지 않도록 가로 스크롤 처리 */
	.table { overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.table .inv_tb { min-width:700px; }
}

@media screen and (max-width:960px){
	ul.inv_tab li { width:33.3333333%; overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	ul.inv_tab li a { display:block; width:100%; height:60px; line-height:60px;}
}

@media screen and (max-width:767px){
	/* money_box 4단 리스트가 좁은 화면에서 찌그러지지 않도록 2단으로 전환 */
	.money_box .now p { font-size:16px;}
	.money_box .now p span { font-size:30px;}
	.money_box .list ul li { width:50%; border-bottom:1px solid rgba(255,255,255,0.2); padding:15px 20px;}
	.money_box .list ul li:nth-child(2n) { border-right:none;}
	.money_box .list ul li:nth-child(3) { border-bottom:none;}
}

@media screen and (max-width:640px){
	/* ir*/
	ul.inv_tab { margin-bottom:32px;}
	.top_info {
		margin-bottom: 50px;
	}
	.inv_tit .inv_date { position:static; margin-top:10px; display:block;}
	/* 표를 좀 더 촘촘하게 줄여서 스크롤은 유지하되 한눈에 보이는 범위를 넓힘 */
	table.inv_tb td,
	table.inv_tb th { font-size:13px; padding:12px 8px;}
	.table .inv_tb { min-width:600px; }
}

@media screen and (max-width:480px){
	/* ir*/
	table.inv_tb td,
	table.inv_tb th { font-size:12px; padding:10px 5px;}
	.table .inv_tb { min-width:300px; }
	ul.inv_tab li.on a,
	.money_box .now p { font-size:16px;}
	.inv_tit p,
	.money_box .now p span { font-size:30px;}
	.money_box .now .date { position:static; margin-top:10px;}
	.money_box .list ul { padding:15px;}
	.money_box .list ul li { width:50%; border-bottom:1px solid rgba(255,255,255,0.2); padding:20px;}
	.money_box .list ul li:nth-child(2n) { border-right:none;}
	.money_box .list ul li:nth-child(3) { border-bottom:none;}
	.money_box .list ul li dl dt { font-size:16px;}
	.money_box .list ul li dl dd { font-size:22px;}

}