/************** 0001_login *************/
body.login_body{
    background-image: none;
    height: 100%;
}
.login_body .head{
    background-color: #FFFFFF;
}
.login_body .wrapper{
    height: 100%;
}
.login{
    width: 800px;
    height: 500px;
    box-sizing: border-box;
    background-color: #F9F9F9;
    border-radius: 15px;
    box-shadow: 0 3px 6px rgba(000, 000, 000, 0.16);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin: 200px auto;
    border: 1px solid #ddd;
    overflow: hidden;
}
.login_left{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    background-image: url(../img/login_bg.jpg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 98%;
    background-color: #fff;
    /* background-size: contain; */
}
.login_right{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    position: relative;
}
.login_content{
    position: absolute;
    width: 298px;
    height: auto;
    box-sizing: border-box;
    top: calc(50% - 137px);
    left: calc(50% - 149px);
}
.login_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 22px;
    line-height: 25px;
    letter-spacing: 1px;
    color: #1D2B46;
    margin-bottom: 35px;
}
.inp_part{
    width: 100%;
    height: auto;
    position: relative;
}
.inp_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #1D2B46;
    padding-bottom: 10px;
}
.login .inp_wrap{
    border-color: #CCCCCC;
}
.login input::placeholder{
    color: #CCCCCC;
}
.login_body .copyright{
    width: 800px;
    position: absolute;
    bottom: -40px;
    color: rgba(000, 000, 000, 0.5);
    text-align: center;
}
/***************** 0100_main *****************/
.using_user_section{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    align-items: center;
    gap: 10px 1px;
}
.user{
    width: 11px;
    height: 13px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.602' height='14.063' viewBox='0 0 12.602 14.063'%3E%3Cg id='user_2_' data-name='user (2)' transform='translate(1 1)'%3E%3Cg id='그룹_510' data-name='그룹 510' transform='translate(2.12)'%3E%3Cg id='그룹_509' data-name='그룹 509'%3E%3Cg id='패스_135' data-name='패스 135' transform='translate(-121)' fill='%23148f77'%3E%3Cpath d='M 124.1806182861328 6.861201286315918 C 122.151123046875 6.861201286315918 120.5 5.210091114044189 120.5 3.180601119995117 C 120.5 1.151111125946045 122.151123046875 -0.4999988675117493 124.1806182861328 -0.4999988675117493 C 126.2101135253906 -0.4999988675117493 127.8612213134766 1.151111125946045 127.8612213134766 3.180601119995117 C 127.8612213134766 5.210091114044189 126.2101135253906 6.861201286315918 124.1806182861328 6.861201286315918 Z' stroke='none'/%3E%3Cpath d='M 124.1806182861328 9.5367431640625e-07 C 122.4268188476562 9.5367431640625e-07 121 1.426821231842041 121 3.180601119995117 C 121 4.934381008148193 122.4268188476562 6.361201286315918 124.1806182861328 6.361201286315918 C 125.9344177246094 6.361201286315918 127.3612213134766 4.934381008148193 127.3612213134766 3.180601119995117 C 127.3612213134766 1.426821231842041 125.9344177246094 9.5367431640625e-07 124.1806182861328 9.5367431640625e-07 M 124.1806182861328 -0.9999990463256836 C 126.4858093261719 -0.9999990463256836 128.3612213134766 0.8754110336303711 128.3612213134766 3.180601119995117 C 128.3612213134766 5.485791206359863 126.4858093261719 7.361201286315918 124.1806182861328 7.361201286315918 C 121.8754196166992 7.361201286315918 120 5.485791206359863 120 3.180601119995117 C 120 0.8754110336303711 121.8754196166992 -0.9999990463256836 124.1806182861328 -0.9999990463256836 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='그룹_512' data-name='그룹 512' transform='translate(0 7.068)'%3E%3Cg id='그룹_511' data-name='그룹 511'%3E%3Cg id='패스_136' data-name='패스 136' transform='translate(-31 -300)' fill='%23148f77'%3E%3Cpath d='M 41.24861526489258 305.4947509765625 L 31.35339546203613 305.4947509765625 C 30.88283538818359 305.4947509765625 30.5000057220459 305.1119384765625 30.5000057220459 304.641357421875 C 30.5000057220459 303.2801513671875 31.02827644348145 301.9941711425781 31.98748588562012 301.020263671875 C 32.95293807983398 300.0399475097656 34.23382568359375 299.5000610351562 35.59420776367188 299.5000610351562 L 37.00780487060547 299.5000610351562 C 38.36818695068359 299.5000610351562 39.64908599853516 300.0399475097656 40.61453628540039 301.0202941894531 C 41.57374572753906 301.9941711425781 42.10201644897461 303.2801513671875 42.10201644897461 304.641357421875 C 42.10201644897461 305.1119384765625 41.71918487548828 305.4947509765625 41.24861526489258 305.4947509765625 Z' stroke='none'/%3E%3Cpath d='M 35.59420776367188 300.0000610351562 C 34.3688850402832 300.0000610351562 33.21449661254883 300.4869384765625 32.34371566772461 301.3711242675781 C 31.47720718383789 302.2508850097656 30.99999618530273 303.4122314453125 30.99999618530273 304.641357421875 C 30.99999618530273 304.8365478515625 31.15822601318359 304.9947509765625 31.35339736938477 304.9947509765625 L 41.24860382080078 304.9947509765625 C 41.44378662109375 304.9947509765625 41.60201644897461 304.8365478515625 41.60201644897461 304.641357421875 C 41.60201644897461 303.4122314453125 41.12479400634766 302.2508850097656 40.25828552246094 301.3711242675781 C 39.38751602172852 300.4869384765625 38.23313522338867 300.0000610351562 37.00780487060547 300.0000610351562 L 35.59420776367188 300.0000610351562 M 35.59420776367188 299.0000610351562 L 37.00780487060547 299.0000610351562 C 38.5031852722168 299.0000610351562 39.91059494018555 299.5929260253906 40.97077560424805 300.66943359375 C 42.02268600463867 301.7374267578125 42.60201644897461 303.1480407714844 42.60201644897461 304.641357421875 C 42.60201644897461 305.3876037597656 41.99487686157227 305.9947509765625 41.24860382080078 305.9947509765625 L 31.35339736938477 305.9947509765625 C 30.60712814331055 305.9947509765625 29.99999618530273 305.3876037597656 29.99999618530273 304.641357421875 C 29.99999618530273 303.1480407714844 30.57932662963867 301.7374267578125 31.63126754760742 300.6694030761719 C 32.6914176940918 299.5929260253906 34.09883499145508 299.0000610351562 35.59420776367188 299.0000610351562 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 50%;
    position: relative;
}
.user:hover{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.602' height='14.063' viewBox='0 0 12.602 14.063'%3E%3Cg id='user_2_' data-name='user (2)' transform='translate(1 1)'%3E%3Cg id='그룹_510' data-name='그룹 510' transform='translate(2.12)'%3E%3Cg id='그룹_509' data-name='그룹 509'%3E%3Cg id='패스_135' data-name='패스 135' transform='translate(-121)' fill='%23148f77'%3E%3Cpath d='M 124.1806182861328 6.861201286315918 C 122.151123046875 6.861201286315918 120.5 5.210091114044189 120.5 3.180601119995117 C 120.5 1.151111125946045 122.151123046875 -0.4999988675117493 124.1806182861328 -0.4999988675117493 C 126.2101135253906 -0.4999988675117493 127.8612213134766 1.151111125946045 127.8612213134766 3.180601119995117 C 127.8612213134766 5.210091114044189 126.2101135253906 6.861201286315918 124.1806182861328 6.861201286315918 Z' stroke='none'/%3E%3Cpath d='M 124.1806182861328 9.5367431640625e-07 C 122.4268188476562 9.5367431640625e-07 121 1.426821231842041 121 3.180601119995117 C 121 4.934381008148193 122.4268188476562 6.361201286315918 124.1806182861328 6.361201286315918 C 125.9344177246094 6.361201286315918 127.3612213134766 4.934381008148193 127.3612213134766 3.180601119995117 C 127.3612213134766 1.426821231842041 125.9344177246094 9.5367431640625e-07 124.1806182861328 9.5367431640625e-07 M 124.1806182861328 -0.9999990463256836 C 126.4858093261719 -0.9999990463256836 128.3612213134766 0.8754110336303711 128.3612213134766 3.180601119995117 C 128.3612213134766 5.485791206359863 126.4858093261719 7.361201286315918 124.1806182861328 7.361201286315918 C 121.8754196166992 7.361201286315918 120 5.485791206359863 120 3.180601119995117 C 120 0.8754110336303711 121.8754196166992 -0.9999990463256836 124.1806182861328 -0.9999990463256836 Z' stroke='none' fill='%23f1c40f'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='그룹_512' data-name='그룹 512' transform='translate(0 7.068)'%3E%3Cg id='그룹_511' data-name='그룹 511'%3E%3Cg id='패스_136' data-name='패스 136' transform='translate(-31 -300)' fill='%23148f77'%3E%3Cpath d='M 41.24861526489258 305.4947509765625 L 31.35339546203613 305.4947509765625 C 30.88283538818359 305.4947509765625 30.5000057220459 305.1119384765625 30.5000057220459 304.641357421875 C 30.5000057220459 303.2801513671875 31.02827644348145 301.9941711425781 31.98748588562012 301.020263671875 C 32.95293807983398 300.0399475097656 34.23382568359375 299.5000610351562 35.59420776367188 299.5000610351562 L 37.00780487060547 299.5000610351562 C 38.36818695068359 299.5000610351562 39.64908599853516 300.0399475097656 40.61453628540039 301.0202941894531 C 41.57374572753906 301.9941711425781 42.10201644897461 303.2801513671875 42.10201644897461 304.641357421875 C 42.10201644897461 305.1119384765625 41.71918487548828 305.4947509765625 41.24861526489258 305.4947509765625 Z' stroke='none'/%3E%3Cpath d='M 35.59420776367188 300.0000610351562 C 34.3688850402832 300.0000610351562 33.21449661254883 300.4869384765625 32.34371566772461 301.3711242675781 C 31.47720718383789 302.2508850097656 30.99999618530273 303.4122314453125 30.99999618530273 304.641357421875 C 30.99999618530273 304.8365478515625 31.15822601318359 304.9947509765625 31.35339736938477 304.9947509765625 L 41.24860382080078 304.9947509765625 C 41.44378662109375 304.9947509765625 41.60201644897461 304.8365478515625 41.60201644897461 304.641357421875 C 41.60201644897461 303.4122314453125 41.12479400634766 302.2508850097656 40.25828552246094 301.3711242675781 C 39.38751602172852 300.4869384765625 38.23313522338867 300.0000610351562 37.00780487060547 300.0000610351562 L 35.59420776367188 300.0000610351562 M 35.59420776367188 299.0000610351562 L 37.00780487060547 299.0000610351562 C 38.5031852722168 299.0000610351562 39.91059494018555 299.5929260253906 40.97077560424805 300.66943359375 C 42.02268600463867 301.7374267578125 42.60201644897461 303.1480407714844 42.60201644897461 304.641357421875 C 42.60201644897461 305.3876037597656 41.99487686157227 305.9947509765625 41.24860382080078 305.9947509765625 L 31.35339736938477 305.9947509765625 C 30.60712814331055 305.9947509765625 29.99999618530273 305.3876037597656 29.99999618530273 304.641357421875 C 29.99999618530273 303.1480407714844 30.57932662963867 301.7374267578125 31.63126754760742 300.6694030761719 C 32.6914176940918 299.5929260253906 34.09883499145508 299.0000610351562 35.59420776367188 299.0000610351562 Z' stroke='none' fill='%23f1c40f'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.user.no_ac{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.602' height='14.063' viewBox='0 0 12.602 14.063'%3E%3Cg id='user_2_' data-name='user (2)' transform='translate(1 1)'%3E%3Cg id='그룹_510' data-name='그룹 510' transform='translate(2.12)'%3E%3Cg id='그룹_509' data-name='그룹 509'%3E%3Cg id='패스_135' data-name='패스 135' transform='translate(-121)' fill='%23737a85'%3E%3Cpath d='M 124.1806182861328 6.861201286315918 C 122.151123046875 6.861201286315918 120.5 5.210091114044189 120.5 3.180601119995117 C 120.5 1.151111125946045 122.151123046875 -0.4999988675117493 124.1806182861328 -0.4999988675117493 C 126.2101135253906 -0.4999988675117493 127.8612213134766 1.151111125946045 127.8612213134766 3.180601119995117 C 127.8612213134766 5.210091114044189 126.2101135253906 6.861201286315918 124.1806182861328 6.861201286315918 Z' stroke='none'/%3E%3Cpath d='M 124.1806182861328 9.5367431640625e-07 C 122.4268188476562 9.5367431640625e-07 121 1.426821231842041 121 3.180601119995117 C 121 4.934381008148193 122.4268188476562 6.361201286315918 124.1806182861328 6.361201286315918 C 125.9344177246094 6.361201286315918 127.3612213134766 4.934381008148193 127.3612213134766 3.180601119995117 C 127.3612213134766 1.426821231842041 125.9344177246094 9.5367431640625e-07 124.1806182861328 9.5367431640625e-07 M 124.1806182861328 -0.9999990463256836 C 126.4858093261719 -0.9999990463256836 128.3612213134766 0.8754110336303711 128.3612213134766 3.180601119995117 C 128.3612213134766 5.485791206359863 126.4858093261719 7.361201286315918 124.1806182861328 7.361201286315918 C 121.8754196166992 7.361201286315918 120 5.485791206359863 120 3.180601119995117 C 120 0.8754110336303711 121.8754196166992 -0.9999990463256836 124.1806182861328 -0.9999990463256836 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg id='그룹_512' data-name='그룹 512' transform='translate(0 7.068)'%3E%3Cg id='그룹_511' data-name='그룹 511'%3E%3Cg id='패스_136' data-name='패스 136' transform='translate(-31 -300)' fill='%23737a85'%3E%3Cpath d='M 41.24861526489258 305.4947509765625 L 31.35339546203613 305.4947509765625 C 30.88283538818359 305.4947509765625 30.5000057220459 305.1119384765625 30.5000057220459 304.641357421875 C 30.5000057220459 303.2801513671875 31.02827644348145 301.9941711425781 31.98748588562012 301.020263671875 C 32.95293807983398 300.0399475097656 34.23382568359375 299.5000610351562 35.59420776367188 299.5000610351562 L 37.00780487060547 299.5000610351562 C 38.36818695068359 299.5000610351562 39.64908599853516 300.0399475097656 40.61453628540039 301.0202941894531 C 41.57374572753906 301.9941711425781 42.10201644897461 303.2801513671875 42.10201644897461 304.641357421875 C 42.10201644897461 305.1119384765625 41.71918487548828 305.4947509765625 41.24861526489258 305.4947509765625 Z' stroke='none'/%3E%3Cpath d='M 35.59420776367188 300.0000610351562 C 34.3688850402832 300.0000610351562 33.21449661254883 300.4869384765625 32.34371566772461 301.3711242675781 C 31.47720718383789 302.2508850097656 30.99999618530273 303.4122314453125 30.99999618530273 304.641357421875 C 30.99999618530273 304.8365478515625 31.15822601318359 304.9947509765625 31.35339736938477 304.9947509765625 L 41.24860382080078 304.9947509765625 C 41.44378662109375 304.9947509765625 41.60201644897461 304.8365478515625 41.60201644897461 304.641357421875 C 41.60201644897461 303.4122314453125 41.12479400634766 302.2508850097656 40.25828552246094 301.3711242675781 C 39.38751602172852 300.4869384765625 38.23313522338867 300.0000610351562 37.00780487060547 300.0000610351562 L 35.59420776367188 300.0000610351562 M 35.59420776367188 299.0000610351562 L 37.00780487060547 299.0000610351562 C 38.5031852722168 299.0000610351562 39.91059494018555 299.5929260253906 40.97077560424805 300.66943359375 C 42.02268600463867 301.7374267578125 42.60201644897461 303.1480407714844 42.60201644897461 304.641357421875 C 42.60201644897461 305.3876037597656 41.99487686157227 305.9947509765625 41.24860382080078 305.9947509765625 L 31.35339736938477 305.9947509765625 C 30.60712814331055 305.9947509765625 29.99999618530273 305.3876037597656 29.99999618530273 304.641357421875 C 29.99999618530273 303.1480407714844 30.57932662963867 301.7374267578125 31.63126754760742 300.6694030761719 C 32.6914176940918 299.5929260253906 34.09883499145508 299.0000610351562 35.59420776367188 299.0000610351562 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.user .tooltip{
    position: absolute;
    top: -40px;
    left: 3px;
    width: 170px;
    height: 40px;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='167' height='34.986' viewBox='0 0 167 34.986'%3E%3Cg id='패스_137' data-name='패스 137' transform='translate(1 1)' fill='%23148f77'%3E%3Cpath d='M -0.5 32.99325180053711 L -0.5 32 L -0.5 10 C -0.5 4.210270881652832 4.210270881652832 -0.5 10 -0.5 L 155 -0.5 C 160.7897338867188 -0.5 165.5 4.210270881652832 165.5 10 L 165.5 16 C 165.5 21.78973007202148 160.7897338867188 26.5 155 26.5 L 8.256379127502441 26.5 L 0.2978124916553497 32.40162658691406 L -0.5 32.99325180053711 Z' stroke='none'/%3E%3Cpath d='M 10 0 C 4.477157592773438 0 0 4.477151870727539 0 10 L 0 32 L 8.091217041015625 26 L 155 26 C 160.5228424072266 26 165 21.52284812927246 165 16 L 165 10 C 165 4.477151870727539 160.5228424072266 0 155 0 L 10 0 M 10 -1 L 155 -1 C 157.9382171630859 -1 160.7005462646484 0.144195556640625 162.7781677246094 2.221826553344727 C 164.8558044433594 4.299455642700195 166 7.061782836914062 166 10 L 166 16 C 166 18.93821716308594 164.8558044433594 21.70054244995117 162.7781677246094 23.77817344665527 C 160.7005462646484 25.85580444335938 157.9382171630859 27 155 27 L 8.421524047851562 27 L -1 33.98649978637695 L -1 10 C -1 7.061782836914062 0.144195556640625 4.299455642700195 2.221832275390625 2.221826553344727 C 4.299453735351562 0.144195556640625 7.061782836914062 -1 10 -1 Z' stroke='none' fill='%23f1c40f'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 11px 2px;
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 12px;
    line-height: 13px;
    color: #FFFFFF;
    text-align: center;
    display: none;
    z-index: 1;
}
.info_ment{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 500;
    font-size: 12px;
    line-height: 13px;
    color: #737A85;
    text-align: center;
    word-break: keep-all;
}
.info_ment.t_left{
    text-align: left;
}
.info_ment.t_right{
    text-align: right;
}
.info_ment.fs_11{
    font-size: 11px;
}
.btn_flex{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.btn_flex.end{
    justify-content: flex-end;
    gap: 10px;
}
.user_search_btn{
    background-color: #E8EDFF;
    color: #5E78D0;
}

/* 첫번째 그래프만 */
.grid_1fr2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    gap: 10px;
}
.flex_around{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    gap: 10px;
    align-items: flex-start;
}
/* 첫번째 그래프만 fin */


/* 그래프 */
.pie_bg{
    width: 106px;
    height: 106px;
    border-radius: 106px;
    background-color: #FFFFFF;
    padding: 3px;
    margin: auto;
}
.pie_chart{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    margin: auto;
}
.legend_follow{
    position: absolute;
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 14px;
    line-height: 16px;
    color: #737A85;
}

.donut_chart{
    display: block;
    position: relative;
    width: 100px;
    height: 100px;    
    border-radius: 100px;
    margin: auto;
}
.donut_chart .donut_center{
    position:absolute;
    width: 24px; 
    height: 24px;
    border : 3px solid #fff;
    background-color: #E9F1F7;
    border-radius: 25px;
    top: 38px;
    left: 38px;
}
.chart_name{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 12px;
    line-height: 13px;
    color: #737A85;
    margin: auto;
}
.chart_name.mb_15{
    margin-bottom: 15px;
}

/*************** 1000_environment_data ***************/
/* 사용자 검색 팝업 */
.hospital_list{
    width: 100%;
    height: 100%;
    box-sizing: border-box;    
}
.hospital_list li{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #737A85;
    border-bottom: 1px solid #DDDDDD;
    padding: 20px 0 20px 5px;
}
.in_map{
    position: absolute;
    top: 30px;
    right: 30px;
}


/*************** 2000_expression_data ***************/
.flex_btwn{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.tab_content{
    display: none;
}
.pop_content.block,
.tab_content.block{
    display: block;
}
/*************** 3000_lung_sound_data ***************/
.card_section{
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px 10px;
}
.user_card{
    width: 247px;
    height: 215px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    padding: 0 15px;
}
.user_card:hover{
    border-color: #5E78D0;
    background-color: #E9F1F7;
}
.user_card:hover hr{
    background-color: #5E78D0;
}
.user_card:hover .card_content hr{
    background-color: rgba(94, 120, 208, 0.2);
}
.card_head{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0 10px;
}
.user_card .card_head .name{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
}
.user_card .flex_btwn{
    padding: 12px 0;
}
.user_card .legend_sort,
.user_card .sort_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
}
.user_card .sort_data{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 14px;
    line-height: 16px;
    color: #111111;
}
.co_red .sort_title,
.co_red .sort_data{
    color: #CD6155;
}
.co_yellow .sort_title,
.co_yellow .sort_data{
    color: #F5B041;
}
.user_card hr{
    background-color: #CCCCCC;
}
.user_card .card_content hr{
    background-color: #EEEEEE;
}
.sub_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
}

/*************** 4000_record ***************/
.underline{
    text-decoration: underline;
    text-underline-position: under;
    cursor: pointer;
}
.pop_scroll{
    height: 100%;
    overflow: auto;
}
.survey_question{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
}
/*************** 6000_daily_map ***************/
.map_section{
    position: relative;
    width: 100%;
    height: 916px;
    box-sizing: border-box;
    overflow: hidden;
}
.map{
    position: relative;
}
.map #map-canvas{
    background-color: #fff; background-size: cover; background-position: 50% 50%; padding: 20px; height: 100%; overflow: hidden;
}
.map_legend{
    position: absolute;
    width: auto;
    height: 155px;
    display: block;
    background-color: #FFFFFF;
    top: 120px;
    left: 30px;
    padding: 15px;

}
.legend_title{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    padding-bottom: 10px;
}
.map_legend .legend_sort{
    padding-bottom: 5px;
}


.legend {
    text-align: center;
    margin-top: 10px;
}
.legend i{
    background-color: #eee;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-right: 4px;
    margin-left: 5px;
    vertical-align: middle;
}
.legend span{
    font-size: 12px;
    color:#737A85
}
.legend_machine .blue i{
    background-color: #4B5195;
}
.legend_machine .gray i{
    background-color: #bbb;
}
.legend_machine .black i{
    background-color: #666;
}

.legend_air .max i{
    background-color: rgba(55,70,88,1);
}
.legend_air .min i{
    background-color: rgba(55,70,88,.3);
}
.legend_air .average i{
    background-color: rgba(55,70,88,.7);
}

.legend_pm .pm25 i{
    background-color: #168BA0;
}
.legend_pm .pm10 i{
    background-color: #161BA0;
}
/*************** 8000_manage_user ***************/
.flex{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}
.gap_5{
    gap: 5px;
}
/* datepicker */
.ui-datepicker-prev::before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../img/arrow-left.png);
    background-repeat: no-repeat;
    background-position: 50%;
}
.ui-datepicker-next::before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../img/arrow-right.png);
    background-repeat: no-repeat;
    background-position: 50%;
}



.favorite_link{
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.favorite_link > div{
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    height: 180px;
    background-repeat: no-repeat;
    background-position: 93% 82%;
    background-size: 70px;
    cursor: pointer;
}
.favorite_link > div:hover{
    border-color: #4ec2c4;
}
.favorite_link > div.img_1{
    background-image: url(../img/img_1.png);
}
.favorite_link > div.img_2{
    background-image: url(../img/img_2.png);
}
.favorite_link > div.img_3{
    background-image: url(../img/img_3.png);
}
.favorite_link > div.img_4{
    background-image: url(../img/img_4.png);
}
.favorite_link > div.img_5{
    background-image: url(../img/img_5.png);
}
.favorite_link > div.img_6{
    background-image: url(../img/img_6.png);
}
.favorite_link > div.img_7{
    background-image: url(../img/img_7.png);
}
.favorite_link > div.img_8{
    background-image: url(../img/img_8.png);
}
.favorite_link > div:hover{
    background-size: 100px;
    background-position: 96% 87%;
}
.favorite_link > div:hover.img_1{
    background-image: url(../img/img_1.gif);
}
.favorite_link > div:hover.img_2{
    background-image: url(../img/img_2.gif);
}
.favorite_link > div:hover.img_3{
    background-image: url(../img/img_3.gif);
}
.favorite_link > div:hover.img_4{
    background-image: url(../img/img_4.gif);
}
.favorite_link > div:hover.img_5{
    background-image: url(../img/img_5.gif);
}
.favorite_link > div:hover.img_6{
    background-image: url(../img/img_6.gif);
}
.favorite_link > div:hover.img_7{
    background-image: url(../img/img_7.gif);
}
.favorite_link > div:hover.img_8{
    background-image: url(../img/img_8.gif);
}


.favorite_link h3{
    font-family: 'NEXON_Lv2_Gothic';
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 15px;
}
.favorite_link p{
    font-size: 14px;
    color:#aaa;
    line-height: 18px;
}

.weather_now{
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(10 , 1fr);
    gap: 10px;
}

.weather_now > div{
    padding: 13px;
    border: 1px solid #ddd;
    border-radius: 10px;
    height: 110px;;
    position: relative;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 90% 85%;
    overflow: hidden;
}
.weather_now.minute > div{
    height: 120px;
    background-position: 90% 67%;
}
.weather_now.minute > div p.date{
    background-color: #eee;
    margin-left: -20px;
    margin-right: -20px;
    font-size: 11px;
    text-align: center;
    font-weight: 400;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 3px 0;
}
.weather_now,.minute > div .wea_ft{
    bottom: 35px;
}
.weather_now > div h4{
    color:#333;
    font-weight: 900;
    font-size: 16px;
}
.weather_now > div h4 span{
    font-size: 10px;
    margin-left: 0px;
}
.weather_now > div p{
    font-size: 12px;
    font-weight: 700;
    color:#737A85;
    margin-top: 5px;
    font-weight: 900;
}
.weather_now > div.blue .wea_ft{
    color:#2980B9;
}
.weather_now > div.green .wea_ft{
    color:#16A085
}
.weather_now > div.yellow .wea_ft{
    color:#F1C40F
}
.weather_now > div.red .wea_ft{
    color:#D35400
}
.weather_now > div.gray .wea_ft{
    color:#aaa
}

.weather_now > div.blue{
    background-image: url(../img/emo_blue.png);
}
.weather_now > div.green{
    background-image: url(../img/emo_green.png);
}
.weather_now > div.yellow{
    background-image: url(../img/emo_yellow.png);
}
.weather_now > div.red{
    background-image: url(../img/emo_red.png);
}
.weather_now > div.temp{
    background-image: url(../img/ico_c.png);
    background-size: 12px;
}
.weather_now > div.humid{
    background-image: url(../img/ico_humidity.png);
    background-size: 20px;
}

.weather_now.average > div{
    height: 95px;
    padding: 15px;
    background-image: none;
}
.weather_now.average > div > p:first-child{
    margin-bottom: 5px;
}


/* 23.02.24 동근팀장님 추가 (이벤트 발생내역) */
.weather_event{
    grid-template-columns: repeat(6 , 1fr);
    width: 100%;
}
.weather_event > div p{
	font-size:12px
}
.weather_event > div h4{
	font-size:14px;
	margin-bottom:5px
}
.weather_now > div .wea_ft{
	font-size:16px}
/*.weather_event > div .wea_ft{
    color: #333!important;
}

.weather_event > div.yellow p{
    color:#F1C40F
}

.weather_event > div.red p{
    color:#D35400
}*/
.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display:none;
}

.wea_ft{
    position: absolute;
    bottom: 20px;   
    font-weight: 800;
    font-size: 12px;
}
.weather_menu{
    margin: 0;

    box-sizing: border-box;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(10 , 1fr);
    gap: 10px;

}
.weather_menu.nodata{
    width:calc(100% - 120px);
    float: left;
}
.weather_download{
	width:120px;
	float:left;
	text-align:right;
	vertical-align:top
}
.weather_menu > div{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.weather_menu.average{
    grid-template-columns: 200px 200px 200px;
}
.weather_menu > div.ac{
    border: 1px solid #737A85;
    background-color: #eee;
}
.weather_menu > div h4{
    color: #333;
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 5px;
}
.weather_menu > div h4 span{
    font-size: 10px;
    margin-left: 2px;
}
.weather_menu > div p{
    font-size: 12px;
    font-weight: 700;
    color: #737A85;
    margin-top: 5px;
    font-weight: 900;
}
.weather_menu > div.blue h4{
    color:#2980B9
}
.weather_menu > div.green h4{
    color:#16A085
}
.weather_menu > div.yellow h4{
    color:#F1C40F
}
.weather_menu > div.red h4{
    color:#D35400
}
.weather_menu > div.gray h4{
    color:#aaa
}





.weather_menu > div i{
    width: 7px;
    height: 7px;
    border-radius: 10px;
    display: block;
    position: absolute;
    background-color: #111;
    left:5px;
    top:5px
}
.weather_menu > div.blue i{
    background-color: #2980B9
}
.weather_menu > div.green i{
    background-color: #16A085
}
.weather_menu > div.yellow i{
    background-color: #F1C40F
}
.weather_menu > div.red i{
    background-color: #D35400
}
.weather_menu > div.gray i{
    background-color: #aaa
}
.weather_graph .sort > div{
    display: inline-block;
}
.weather_menu svg{
    position: absolute;
    bottom: -5px;
    left: calc(50% - 3.5px);
    fill: #737A85;
    display: none;
}
.weather_menu .ac svg{
    display: block;
}
.weather_menu.nodata p{
    margin-top: 0;
} 

.weather_menu.average > div.aver{
    background-color: #fff;
}
.weather_menu.average > div.max{
    background-color: #fff;
}
.weather_menu.average > div.min{
    background-color: #fff;
}

.weather_menu.average > div.aver h4{
    color:#000
}
.weather_menu.average > div.max h4{
    color:#000
}
.weather_menu.average > div.min h4{
    color:#000
}
.weather_menu.average > div.aver{
    border-color:#000
}
.weather_menu.average > div.max{
    border-color:#000
}
.weather_menu.average > div.min{
    border-color:#000
}

.weather_menu.average > div.aver i{
    background-color:rgba(55,70,88,.7)
}
.weather_menu.average > div.max i{
    background-color:rgba(55,70,88,1)
}
.weather_menu.average > div.min i{
    background-color:rgba(55,70,88,.3)
}



.map{
    width: 100%;
    height: 770px;
    background-color: #F5F5F5;
    /*background-image: url(../img/map_sample.jpg);*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-top: 60px;
}

.map > div.view{
    width: 1280px;
    margin:0 auto;
    height: 100%;
    position: relative;
}

.circle_graph{
    height: 450px;
    min-height: 450px;
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    gap: 10px;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
}
.circle_graph hr{
    margin: 15px 0 20px 0;
}
.machine_current{
    display: grid;
    grid-template-columns: repeat(10 , 1fr);
    gap: 5px;
    position: relative;
}
.machine_current span{
    text-align: center;
    cursor: pointer;
}
.machine_err_current{
    overflow-y: auto;
    height: 250px;
}
.machine_err_current > div{
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid #eee;
    padding: 10px;
    color:#737A85;

}
.machine_err_current > div *{
    color:#737A85
}
.machine_err_current > div i{
    width: 12px;
    height: 12px;
    border-radius: 10px;
    background-color: #BBBBBB;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.machine_err_current > div strong{
    float: right;
}

.machine_over{
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 3px solid #eee;
    
    color:#737A85;
    width: 250px;
    position: absolute;
    display: none;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.machine_over *{
    color:#737A85
}
.machine_over .da_name{
    font-weight: 900;
}
.machine_over i{
    width: 12px;
    height: 12px;
    border-radius: 10px;
    background-color: #666666;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.machine_over strong{
    float: right;
}
.machine_over > div{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
}
.machine_over svg{
    position: absolute;
    left: 12.5px;
    bottom: -7px;
}



.machine_sub_current {
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    gap: 20px;
}
.machine_sub_current > div{
    border: 1px solid #ddd;
    border-radius: 10px;
    min-height: 360px;
    background-color: rgba(243,244,250,.5);
}
.machine_graph{
    padding-top: 23px;
}
.machine{
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    gap: 20px;
}
.machine > div{
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    padding-bottom: 35px;
}
.machine > div:hover{
    border: 1px solid #737A85;
    background-color: rgba(1,1,1,.02);
    
}
.machine > div p{
    color:#737A85;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 15px;
}
.machine > div p:nth-child(3) {
    margin-top: 15px;
}
.machine > div p.event strong{
     float: left;
     font-size: 20px;
}
.machine > div p.time{
    font-size: 12px;
    background-color: #f6f6f6;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #ddd;
    text-align: center;
    line-height: 22px!important;
    margin-bottom: -15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 10px;
    position: absolute;
    bottom: 15px;
    width: 100%;
}
.machine > div strong{
    color:#333;
    font-size: 14px;
    font-weight: 900;
    line-height: 20px;
    margin-top: ;

}
.machine > div p strong {
    float: right;
}
.machine > div strong i.marker{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 17.039 22.718'%3E%3Cg id='Pin' transform='translate(-8)'%3E%3Cpath id='패스_281' data-name='패스 281' d='M16.519,0A8.531,8.531,0,0,0,8,8.519c0,6.116,7.937,13.776,8.274,14.1a.351.351,0,0,0,.49,0c.337-.323,8.274-7.983,8.274-14.1A8.531,8.531,0,0,0,16.519,0Zm0,12.424a3.9,3.9,0,1,1,3.9-3.9A3.9,3.9,0,0,1,16.519,12.424Z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,1);
}
.machine > div p strong.order{
    float: right;
    font-weight: 18px;
    color: rgb(75, 81, 149);;
}

.machine > div p i{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #ddd;
    border-radius: 5px;
    vertical-align: middle;
}
.machine > div p.blue i{
    background-color: #2980B9
}
.machine > div p.green i{
    background-color: #16A085
}
.machine > div p.yellow i{
    background-color: #F1C40F
}
.machine > div p.red i{
    background-color: #D35400
}
.machine > div hr{
    margin: 10px 0;
}

.machine > div p.blue strong{
    color: #2980B9
}
.machine > div p.green strong{
    color: #16A085
}
.machine > div p.yellow strong{
    color: #F1C40F
}
.machine > div p.red strong{
    color: #D35400
}


.machine > div .none{
    color:#737A85;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    padding: 10px 0;
    font-weight: 100;
}

.machine_x > div p{
    margin-bottom: 0;
}
.machine_x > div p strong{
    float:none;
}
.machine_map{
    background-image: url(../img/map_sample.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}
.machine_map span{
    position: absolute;
    cursor: pointer;
}



/***** board ****/
.board{
    border: 0;
    padding: 0;
    border-radius: 0;
}
.board table{
    width: 100%;
    border-top: 2px solid #111;
    border-radius: 0;
}
.board table th,
.board table td{
    border-bottom: 1px solid #ddd;
    padding: 7px 0;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    line-height: 28px;
}
.board table td a.icon{
    margin:0 2.5px;
}
.board table th{
    border-bottom: 1px solid #aaa;
}
.board table td a.btn{
    padding-top: 6px;
}
.board table td.date{
    font-size: 14px;
    color:#aaa
}
.board table td.title{
    cursor: pointer;
    font-weight: 700;
    text-align: left;
    padding-left:20px;
}
.board table.view td{
    text-align: left;
    line-height: 20px;
    padding: 20px 0;
}
.board table.view td.detail{
    text-align: left;
    line-height: 20px;
    padding: 40px 0;
}
.board table.view td.attachment{
    font-weight: 900;
}
.board table.view td.attachment a{
    margin-bottom: 5px;
    display: block;
}
.board table.view td.attachment img{
    margin-right: 3px;
}
.board table.view td.attachment a:last-child{
    margin-bottom: 0;
}
.board table.view th.date{
    font-size: 16px;
    font-weight: 500;
    color:#aaa;
    text-align: left!important;
    padding: 20px 0;
    line-height: 20px;
}
.board a.list{
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
}
.board.list table tr:nth-child(even) td{
    background-color: rgba(1,1,1,.03);
}
.board.list table tr:hover td{
    background-color: rgba(1,1,1,.03);
    background-color: #F3F4FA;
}

.line_graph{
    display: none;
}
.line_graph.ac{
    display: block;
    clear: both;
}

.table_graph{
    display: none;
}
.table_graph.ac{
    display: block;
}

table {
    margin-left: auto;
    margin-right: auto;
}

th {
    text-align: center;
}

/*221220 범례 물음표 추가*/
.legend_link{
    font-size: 12px;
    color:#999;
    font-weight: 900;
    border: 1px solid #999;
    border-radius: 20px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    margin-left: 5px;
}

.legend_div{
    position: absolute;
    width: 570px;
    background-color: #fff;
    z-index: 2;
    text-align: left;
    padding: 20px;
    border: 1px solid #ddd;
    left: calc(50% + 70px);

    display: none;
}
.legend_div p{
    font-size: 12px;
    font-weight: 900;;
    margin-bottom: 5px;
}
.legend_div a.close{
    float: right;
}


/* added 24.11.29 마커 css */
.pin-marker {
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
	cursor: pointer;
}

.pin-marker::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}

/* added 24.11.29. 지도 왼쪽 사이드 */

.map-widget-left-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border-radius: 15px;
}
.map-widget-left {
    width: 200px;
    background-color: #eee;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
  }
  .air-pollutant {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }
  .air-pollutant.active {
    background-color: #666;
    color: #fff;
  }


/* added 24.11.29. 지도 오른쪽 데이터 리스트 */

.map-widget-right-wrapper {
    z-index: 1;
    position: absolute;
    top: 140px;
    left: calc(60% + 180px);
    display: flex;
    align-items: flex-start;
}

.map-widget-right {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin-left: 15px;
}
.map-widget-right-container {
    background-color: #f8fdfb;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px;
}
.widget-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.widget-tab {
    flex: 1;
    text-align: center;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #eef2f1;
    color: #333;
    cursor: pointer;
}
.widget-tab.active {
    background-color: #d4e9e3;
    font-weight: bold;
}
.map-widget-data-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}
.map-widget-data-subtitle {
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
}
.map-widget-right-line {
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 15px;
}
.map-widget-data-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 14px;
}
.map-widget-data-row:last-child {
    margin-bottom: 0;
}
.map-widget-location {
    color: #555;
    width: 170px;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.map-widget-value {
    font-weight: bold;
}
.map-widget-value.blue { color: #1CA1F4; }
.map-widget-value.green { color: #15BF6A; }
.map-widget-value.yellow { color: #F1C40F; }
.map-widget-value.red { color: #D35400; }


/* added 24.12.02. 지도 측정망 선택 체크박스 그룹 */

/* 체크박스 그룹을 감싸는 wrapper */
.map-widget-chkbox-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 체크박스 그룹 */
  .map-widget-checkbox-group {
    display: flex;
    gap: 16px;
  }

  /* 개별 체크박스 스타일 */
  .map-widget-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 2px solid #9fc5f8;
    border-radius: 20px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
  }

  /* 체크박스 숨기기 */
  .map-widget-checkbox-wrapper input {
    display: none;
  }

  /* 라벨 텍스트 스타일 */
  .map-widget-checkbox-wrapper label {
    margin: 0;
    font-size: 16px;
    color: #333;
    cursor: pointer;
  }

  /* 체크박스 스팬 스타일 */
  .map-widget-checkbox-wrapper span {
    width: 16px;
    height: 16px;
    border: 2px solid #9fc5f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, border-color 0.3s;
  }

  /* 체크된 상태 스타일 */
  .map-widget-checkbox-wrapper input:checked + span {
    background-color: #9fc5f8;
    border-color: #9fc5f8;
  }

  .map-widget-checkbox-wrapper input:checked + span::before {
    content: "✔";
    color: #fff;
    font-size: 12px;
  }

  /* 호버 효과 */
  .map-widget-checkbox-wrapper:hover {
    border-color: #6a9bd8;
  }

  .map-widget-checkbox-wrapper:hover span {
    border-color: #6a9bd8;
  }


  #pm25-legend {
    position: absolute; /* 지도 위 고정 */
    bottom: 20px; /* 화면 하단에서 약간 위로 */
    left: calc(20%);
    background-color: rgba(255, 255, 255, 0.8); /* 반투명 배경 */
    color: #333; /* 글자 색상 */
    padding: 10px 15px; /* 여백 추가 */
    border-radius: 8px; /* 모서리 둥글게 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-size: 14px; /* 글자 크기 */
    font-family: Arial, sans-serif; /* 폰트 설정 */
    z-index: 1; /* 지도 요소보다 위로 배치 */
}