@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

html { overflow:hidden; }
body { margin:0;padding:0; font-family: "Noto Sans KR", sans-serif; overflow:hidden; }

#container-menu { position:absolute;left:-301px;top:0;bottom:0; width:240px; background-color:#ffffff; border-right:1px solid #333333; z-index:100; padding:30px; overflow-y:scroll; }
#container-menu > div { margin-bottom:7px; line-height:40px; }
#container-menu > div:hover { background-color:#eeeeee; cursor:pointer; }
#container-menu div.category { }
#container-menu div.program { padding-left:25px; }

#container-header { position:relative;height:70px; background-color:#F8981D;}
#btn-all-menus { position:relative;float:left; padding-left:15px;top:10px; cursor:pointer;}
#label-page-title { position:relative;float:left; padding-left:20px; font-size:25pt;color:#ffffff;line-height:65px; }

#container-content { position:absolute;left:0;top:70px;right:0;bottom:0; padding:10px 0 0 10px; overflow-y:scroll;}

div.container-item { position:relative;float:left; border:1px solid #cccccc; margin:0 10px 10px 0; background-color:#fafafa; cursor:pointer; }
div.container-item:hover { border:1px solid #3388f1; }
div.container-item > div.title { position:relative;height:60px;line-height:60px; padding-left:20px; font-size:20pt;font-weight:normal;color:#666666;}
div.container-item > div.center { position:relative; }
div.container-item > div.center > div.percent { position:relative;float:left; width:170px;height:180px; line-height:180px;font-size:42pt;color:#666666;text-align:center; }
div.container-item > div.center > div.chart {  position:relative;float:left; width:210px;height:180px; border:1px solid #dddddd; }
div.container-item > div.bottom { position:relative; clear:both; padding:15px 20px 20px 20px; overflow:auto; }
div.container-item > div.bottom > div { border:1px solid #dddddd; background-color:#ffffff; overflow:auto; }
div.container-item > div.bottom > div > div.item1 { position:relative;float:left; padding:10px 0 10px 0; text-align:center; }
div.container-item > div.bottom > div > div.sepItem { position:relative;float:left; width:1px;height:60px; background-color:#cccccc; }
div.container-item > div.bottom > div > div.item2 { position:relative;float:left; padding:10px 0 10px 0; text-align:center; }
div.container-item > div.bottom > div > div > div.t { font-size:17pt; color:#707070; }
div.container-item > div.bottom > div > div > div.r { font-size:21pt; color:#dc1000; }
div.container-item > div.bottom > div > div > div.b { font-size:21pt; color:#3388f1; }

#panel-full-screen { display:none; position:absolute; left:0;top:0;right:0;bottom:0; z-index:10; background:#999999;opacity:0.6; }

#panel-popup { display:none; position:absolute; left:300px;top:200px; width:900px;height:600px; background-color:#ffffff; z-index:11; border-radius:20px; }
#panel-popup-title-bar { position:relative; overflow:auto; }
#label-popup-title {  position:relative;float:left;margin-left:40px;margin-top:30px; font-size:21pt; }
#btn-x-button { position:relative;float:right; cursor:pointer; margin-right:30px;margin-top:30px; }

#panel-popup-content { padding:20px 30px 30px 30px; }
#panel-popup-content > div.top-content { padding-bottom:10px; overflow:auto; }
#panel-popup-content > div.top-content > div.top-content-left { position:relative;float:left; width:300px; height:240px; }
#panel-popup-content > div.top-content > div.top-content-right { position:relative;float:left; height:240px; overflow-y:scroll; }

#label-popup-content-target { position:relative; height:35px; font-size:15pt;color:#3388F1; line-height:35px; text-align:center; }
#chart-popup-content-top { position:relative; height:150px; padding-left:80px;padding-top:10px; }
#label-popup-content-progress { position:relative;height:42px; padding:0 40px; }
#label-popup-content-progress > div { position:relative;height:40px; border:2px solid #cccccc; line-height:41px;text-align:center; font-size:15pt; border-radius:40px; }

table.table-popup-content { table-layout:auto; border:1px solid #dddddd; border-collapse:collapse; width:100%; }
table.table-popup-content th { font-size:14pt;font-weight:normal; border:1px solid #dddddd; height:30px; }
table.table-popup-content td { font-size:14pt;font-weight:normal; border:1px solid #dddddd; height:30px; }
table.table-popup-content td.left { text-align:left; }
table.table-popup-content td.center { text-align:center; }
table.table-popup-content td.right { text-align:right;padding-right:10px; }

#panel-popup-content > div.bottom-content { position:relative; clear:both; width:400px; height:230px; border:1px solid #eeeeee; }

#a5a67465c8074a9da7c4fe29e4df50c6 { position:absolute;left:0;top:0;right:0;bottom:0;z-index:10; background-color:#ffffff; opacity:0.8; display:none; }
#a5a67465c8074a9da7c4fe29e4df50c6 > div { position:absolute;left:50%;top:50%;width:240px;height:160px; margin:-80px 0 0 -120px; text-align:center;}
#a5a67465c8074a9da7c4fe29e4df50c6 > div > img { width:80px;height:80px; }
#a5a67465c8074a9da7c4fe29e4df50c6 > div > p { line-height:80%; font-weight:bold; font-size:11pt; }