#main_location {position: fixed; top: 50%; right: 36px; transform: translateY(-50%); z-index: 9;}
#main_location ul {position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;}
#main_location li {margin-bottom: 36px;}
#main_location li a {display: flex; align-items: center;}
#main_location li a .rec {display: block; width: 7px; height: 7px; background-color: rgba(255,255,255,.5); transition: background-color .3s ease; border-radius: 50%;}
#main_location li a.active .rec {width: 15px; height: 15px; background: #fff;}
/* color */
 #main_location.color li a .rec {background-color:rgba(0,0,0,.5); }
 #main_location.color li a.active .rec{background-color: #002d8f;}

/* scroll_down */
@media screen and (max-width:1800px) {
    #main_location {position: absolute;;}
}

@media screen and (max-width:1024px) {
    #main_location{display: none;}
}