@charset "utf-8";

.symbol_content {position:absolute; top:20px; left:40px; width:200px; text-align: center; background-color: #eee; padding:0.4em; display:none; z-index:1;border-radius: 5px; }
.symbol_div ul li { position:relative; }
@media only screen and (min-width: 1021px) {
    .symbol_div { width:960px; margin:0 auto 0; position: relative; left: -115px;}
    .symbol_div ul { display:inline-block; width:100%; margin:0; padding:0;}
    .symbol_div ul li { float:left; margin: 0.2rem;  }
    .symbol_div ul li .symcheck { margin: 0.1rem;}

    .symbol_div ul li:nth-child(1) label { background-color: #fce250; margin-left: 0.2rem; padding: 4px 10px; font-size: 14px;border-radius: 10px;box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);}
    .symbol_div ul li:nth-child(2) label { background-color: #def1d3; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(3) label { background-color: #acc9e9; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(4) label { background-color: #d1edf9; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(5) label { background-color: #ffffa4; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(6) label { background-color: #ecd0ec; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(7) label { background-color: #f7e4d8; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(8) label { background-color: #F7CECD; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
}
@media only screen and (max-width: 767px) {
    .symbol_div { width:100%; height:25%; margin:8px 0 0 0; padding:0.5rem 0 0.5rem 0; background-color: #fff;}
    .symbol_div ul { width:100%; display:flex; flex-direction: row; justify-content:flex-start; flex-wrap: wrap; }
    .symbol_div ul li { float:left; margin: 0.2rem; padding-bottom: 0.1rem;}
    .symbol_div ul li .symcheck { margin: 0.1rem;}


    .symbol_div ul li:nth-child(1) label { background-color: #fce250; margin-left: 0.2rem; padding: 4px 10px; font-size: 14px;border-radius: 10px;box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);height:25px;width:max-content;text-align:center;  }
    .symbol_div ul li:nth-child(2) label { background-color: #def1d3; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(3) label { background-color: #acc9e9; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(4) label { background-color: #d1edf9; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(5) label { background-color: #ffffa4; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(6) label { background-color: #ecd0ec; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(7) label { background-color: #f7e4d8; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
    .symbol_div ul li:nth-child(8) label { background-color: #F7CECD; margin-left: 0.2rem; padding: 0.25em; font-size: 14px;}
}