@charset "utf-8";










.live-page #article {
    padding: 0px 0px 20px;
}
/* 상단 뒤로가기 메뉴랑 페이지 제목 */
.live-page #article .top-bar {
    background: #eee; color: #000;
    width: 100%;
    margin-bottom: 20px; padding: 10px 0px;
    text-align: center;
    position: relative;
    font-size: 20px;
}
.live-page #article .top-bar div {
    display: inline-block;
    position: absolute; left: 20px;
}
.live-page #article .top-bar h2 {
    display: inline-block;
}
/* 상단 텍스트----------------------------------------------------------------------------------- */
.live-txt {
    padding: 0px 0px 30px 10px;
}
.live-txt p {
    font-size: 15px;
}
/* 국내현황/세계현황 버튼-------------------------------------------------------------------------- */
.live-btn {
    padding-left: 10px;
}
.live-btn button {
    width: 100px; height: 30px;
    background: #ccc; color: #333;
    font-weight: bold;
    border-radius: 10px;
}
.live-btn button.on {
    width: 100px; height: 30px;
    background: #555; color: #fff;
    font-weight: bold;
    border-radius: 10px;
}
/* 국내 환자 현황판-------------------------------------------------------------------------------- */
.live .korea-live-number {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 30px 0px;
}
.live .korea-live-number > div {
    text-align: center;
    border-right: 1px solid #ccc;
}
.live .korea-live-number > div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.live .korea-live-number > div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.live .korea-live-number > div:nth-child(3) {
    grid-area: 1 / 3 / 2 / 4;
}
.live .korea-live-number > div:nth-child(4) {
    border-right: none;
    grid-area: 1 / 4 / 2 / 5;
}
.live .korea-live-number > div:nth-child(5) {
    border-right: none;
    grid-area: 2 / 1 / 3 / 5;
    padding: 20px 0px;
}
/* 국내 현황판 아이콘 */
.live .korea-live-number > div i {
    font-size: 35px;
}
.live .fa-thermometer-half {
    color: red;
}
.live .fa-child {
    color: yellowgreen;
}
.live .fa-bed {
    color: gray;
}
.live .fa-globe-asia {
    color: blue;
}
/* 국내 현황판 숫자 */
.live .korea-live-number > div p {
    font-size: 20px;
    padding: 10px 0px 0px;
}
/* 국내 현황판 텍스트 */
.live .korea-live-number > div span {
    font-size: 12px;
}
/* 세계 환자 현황판-------------------------------------------------------------------------------- */
.live .world-live-number {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 30px 0px;
    /* display: none; */
}
.live .world-live-number > div {
    text-align: center;
    border-right: 1px solid #ccc;
}
.live .world-live-number > div:nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
}
.live .world-live-number > div:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
}
.live .world-live-number > div:nth-child(3) {
    border-right: none;
    grid-area: 1 / 3 / 2 / 4;
}
.live .world-live-number > div:nth-child(4) {
    border-right: none;
    grid-area: 2 / 1 / 3 / 4;
    padding: 20px 0px;
}
/* 세계 현황판 아이콘 */
.live .world-live-number > div i {
    font-size: 35px;
}
/* 세계 현황판 숫자 */
.live .world-live-number > div p {
    font-size: 20px;
}
/* 세계 현황판 텍스트 */
.live .world-live-number > div span {
    font-size: 12px;
    padding: 10px 0px 0px;
}









.canvas-box {
    /* background: blue; */
    /* width: 400px; height: 300px; */
    width: 90%;
    margin: 20px auto;
    /* border: 1px solid #555; border-radius: 10px; */
}