@charset "UTF-8";
/*loading*/
.loading_wrap{width:100%;text-align:center; margin: auto;}
.loading {position:absolute;width:66px;height:66px;top:50%;left:50%; margin: -33px 0 0 -33px}
.dot div {position: absolute;left: 0;  right: 0;top: 0;bottom: 0;width: 10px;height: 10px;  margin: auto;border-radius: 10px;
background-color:#fc8c00;opacity: 0.2;animation: dot 1s linear infinite;}
.dot div:nth-child(1) {transform: rotate(0) translateX(25px);animation-delay: 0;}
.dot div:nth-child(2) {transform: rotate(45deg) translateX(25px);animation-delay: 0.1s;}
.dot div:nth-child(3) {transform: rotate(90deg) translateX(25px);animation-delay: 0.2s;}
.dot div:nth-child(4) {transform: rotate(135deg) translateX(25px);animation-delay: 0.3s;}
.dot div:nth-child(5) {transform: rotate(180deg) translateX(25px);animation-delay: 0.4s;}
.dot div:nth-child(6) {transform: rotate(225deg) translateX(25px);animation-delay: 0.5s;}
.dot div:nth-child(7) {transform: rotate(270deg) translateX(25px);animation-delay: 0.6s;}
.dot div:nth-child(8) {transform: rotate(315deg) translateX(25px);animation-delay: 0.7s;}

@keyframes dot {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.2;
    }
}
/*right_area */
.right_side{ position:fixed;bottom:285px;right:-10px; width:50px; height:auto;display: inline-block;z-index:999;}
.color_bar{ /* position: relative; */width:30px; height:100%; background-color: #fff;display: inline-block; border-radius: 5px;box-shadow: 0 0 3px 0 rgba(100,100,100,0.7); border:1px solid #000; left:40px; bottom:222px;}
.color_bar .tit{ width: 100%; height:5px;line-height:0px; text-align: center; font-size: 10px; letter-spacing: -1px;}
.color_bar .btn_next{width: 100%;height: 15px; line-height: 15px;background-color:#3c4a4e; color: #fff;text-align: center; display: inline-block;}
.color_bar .legend{ width: 100%; height:500px; border-radius: 0 0 5px 5px;  display: inline-block; margin-top:-2px; padding-top: 10px;}
.color_bar .legend span{ width: 100%; height:12.5%;display: inline-block; line-height: 1.5; text-align: center; vertical-align: middle; font-size:10px;
  color: #fff; text-shadow: 0 0 2px 0 #000; background-color:rgba(0,0,0,0.1)}

.legend03{width:100%;height:100%;display: inline-block; border-radius: 0 0 5px 5px;margin-bottom:-5px;}
.legend03 li {width:100%;height:12px;line-height:12px }
.legend03 li span{/* position: absolute; */width:100%;height:12px; text-align:center;/* font-size:xx-small; */display:inline-block;vertical-align:middle;color:#000 }
.legend03 li span.tcolor01{color:#666 }

.leaflet-bottom .leaflet-control {
	margin-bottom: 5px;
}