@font-face {
	font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SpoqaHanSansNeo-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*{padding: 0px; margin: 0px; font-family: 'SpoqaHanSansNeo-Regular';}
*.bold{font-family: 'SpoqaHanSansNeo-Medium';}
a{text-decoration: none;}
li{list-style: none;}

body{position: relative; width: 100%; min-height: 100vh; background: #f6f6f6;}
		
header{position: fixed; z-index: 100; width: 100%; max-height: 48px; background: #fff;}
	.headerBox{width: 100%; max-width: 1200px; margin: 0px auto; padding:10px 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
	.headerBox a{display: flex; justify-content: center; align-items: center;}
	.headerBox .menuBtn{transition: .3s; background-repeat: no-repeat; background-size: contain; background-position: center center;} 
	.headerBox .menuBtn:hover{cursor: pointer;}
	.headerBox .menuBtn.on{background: url('../images/menu_on.png'); background-repeat: no-repeat; background-size: contain; background-position: center center;}
	.headerBox .menuBtn.on img{opacity: 0;}
	.menuBox{
		width: 100%; min-height: 100%; height: calc(100vh - 47px);visibility: hidden; opacity: 0; background: #63b3f6; transition: .3s; color: #fff;
		padding: 40px; box-sizing: border-box; overflow-y: auto;
	}
	.menuBox .menuSection{width: 100%; max-width: 1200px; margin: 0px auto;}
		.menuBox.on{visibility: visible; opacity: 1;}
			.menuBox div.mainMenu{padding: 20px 0px; border-bottom: 1px solid #fff; font-size: 1.2rem;}
			.menuBox div.mainMenu.menuTit{font-size: 2rem; text-align: left;}
			.menuBox div.subMenu{overflow: hidden; height: 0px; transition: .3s; padding-top: 0px; font-size: 1rem;}
			.menuBox div.subMenu.on{height: auto; padding-top: 10px;}
			.menuBox div.subMenu li{padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
			.menuBox div.subMenu li:last-child{border: none;}
			.menuBox a{color: #fff; display: flex; justify-content: space-between; align-items: center;}
			.menuBox a img{transition: .3s;}
			.menuBox a.on img{transform: rotate(180deg);}
	.wrapBox{padding-top: 40px;}
	.wrapBox{width: 100%; min-height: calc(100vh - 70px); display: flex; justify-content: center;}
	.wrapBox .contentBox{width: 100%; max-width: 1200px; margin: 0px auto;
	padding: 20px; box-sizing: border-box;}
	.wrapBox .titBox{display: flex; align-items: center; border-bottom: 1px solid #eee; margin-bottom: 20px; padding-bottom: 10px;}
	.wrapBox .titBox img{margin-right: 5px;}
	.wrapBox .titBox p{margin-right: 10px; font-size: 2rem;}
	.wrapBox .titBox span{font-size: 1.2rem; color: #666; display: none;}
	.tabBox{display: flex; gap: 10px; overflow-x:auto;}
	.tabBox>a{background: #fff; max-width: 20%; padding: 10px 20px; border-radius: 10px 10px 0px 0px; background: #eee; word-break: keep-all;}
	.tabBox>a.on{color:#63b3f6; background: #fff;}
	.tableBox{background: #fff; padding: 20px; padding-bottom: 100px; width: 100%; box-sizing: border-box;}
	.tableBox table{border-spacing: 0px; min-width: 100%;}
	.tableBox>div{display: none; overflow-x: none; width: 100%;}
	.tableBox div.tableTop{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
	.tableBox .dustBox{display: flex; margin-bottom: 20px; align-items: center;}
			.dustBox>div{padding: 0px 10px; position: relative;}
			.dustBox>div.dust2{border-left: 1px solid #eee;}
			.dustBox>div.tempBox{font-size: 14px; color: #999;}
					.tempBox p{font-size: 16px; color: #333;}
			.dustBox .popup{display: none; position: absolute; top: 20px; left: 10px; background: #fff; border: 1px solid #eee; padding: 20px; box-sizing: border-box; font-size: .9rem; color: #333; 
				flex-direction: column; width: max-content;}
				.dustBox .popup.on{display: flex; z-index: 10;}
			.dustBox .popup p{font-size: .9rem;}
			.dustBox .popup i{position: absolute; top: 5px; right: 5px; font-size: .7rem;}
			.dustBox span.tit{display: flex; font-size: .8rem; margin-bottom: 5px; align-items: center; gap: 2px;}
			.dustBox span.tit i{color: #ccc; font-size: 1.1rem;}
			.dustBox> p{font-size: 1.2rem; font-weight: bold; display: flex; align-items: center;}
			.dustBox p.bColor{color: #32a1ff;}
			.dustBox p.gColor{color: #00c73c;}
			.dustBox p.yColor{color: #fda60e;}
			.dustBox p.rColor{color: #e64746;}
	.tableBox div.dataBox{overflow-x: scroll;}
	.tableBox div.dataBox .xi-location-arrow{color: #63b3f6;}
	.tableBox div.timeBox{margin-bottom: 10px; display: flex; justify-content: flex-end;}
	.tableBox div.timeBox p{font-size: .8rem; color: #666; text-align: right;}
	.tableBox div.timeBox p#now:after{content: ','; display: inline; margin-right: 5px;}
	.tableBox div.timeBox p#now2{text-align: left; width: 100%;}
	div.sourceBox{display: block; padding-top: 10px; font-size: .8rem; color: #666;}
	div.sourceBox > div.p1{display: flex; align-items: center; gap: 5px; margin-bottom: 10px;}
	div.sourceBox > div.p1 > span{display: inline-block;}
	div.sourceBox > div.p1 > img{height: 22px;}
    div.sourceBox > div.p2{ font-size: 13px;}

	div.sourceBox span{color: #999;}
	.tableBox .searchBox{display: block; margin-bottom: 20px; text-align: right;}
	.tableBox .searchBox select.selectBox{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding: 2px 20px 2px 10px; 
		background: url('../images/select_arr.png') no-repeat 90% 50%; background-size: auto; border-radius: 5px; border: 1px solid #63b3f6;}
	.tableBox .searchBox .selectBox{border-radius: 5px; border: 1px solid #63b3f6; padding: 2px 10px; }	
	.tableBox .searchBox select.selectBox::-ms-expand{display:none;}
	.tableBox .searchBox input.searchBtn{padding: 3px 10px; background: #63b3f6; color: #fff; border: none; border-radius: 5px;}
	.tableBox .searchBox input.readonly{background: #eee; max-width: 75px; border: none;}
	.tableBox .searchBox span.arrow{margin: 0px 3px; color: #63b3f6;}
	.tableBox>div tr{}
	.tableBox>div th{background: #63b3f6; color: #fff; font-weight: normal; padding: 10px; border-left: 1px solid #fff; 
		word-break: keep-all; border-bottom: 1px solid #fff; }
		.tableBox>div th:first-child{position: sticky; top: 0; left: 0;}
		.tableBox>div th.backslash{min-width: 50px;}
	.tableBox>div td{text-align: center; vertical-align: middle; padding: 10px 20px; border-bottom: 1px solid #eee; 
		word-break: keep-all; color: #666;}
	.tableBox>div td:first-child{border-left: none; color: #000; position: sticky; left: 0px; background: #fff; z-index: 20;}
	.tableBox>div tr.wind td span{display: block; font-size: .8rem; color: #63b3f6;}
	.tableBox>div.on{display: block;}
	.dataBox .graphBox{width: 100%; position: relative; min-height: 100px;}
	.dataBox .graphBox .circle{width: 4px; height: 4px; border-radius: 100%; background: #63b3f6; position: absolute; top:calc(50% - 2px); left: calc(50% - 2px);}
	.backslash {position: relative;}
	.backslash:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="white" /></svg>');}
	.backslash { text-align: left; }
	.backslash div { text-align: right; }
	span.bColor{color: #32a1ff;}
	span.gColor{color: #00c73c;}
	span.yColor{color: #fda60e;}
	span.rColor{color: #e64746;}
@media all and (max-width:640px){
	.wrapBox{height: auto;}
	.tableBox div.tableTop>div{width: 100%;}
	.tableBox>div th{font-size: .8rem;}
	.tableBox>div td{font-size: .8rem; padding: 10px;}
	.tableBox>div td img{max-width: 25px;}
	div.sourceBox > div.p1{}
	div.sourceBox > div.p1 > span{display: inline-block;}
	div.sourceBox > div.p1 > img{height: 20px;}
	div.sourceBox > div.p2{font-size: 8px}
	.tabBox>a{padding: 8px 20px;}
}