#amr_banner{position: fixed; right: 257px; top: 50%; transform: translateY(-50%); z-index: 50;}
#amr_banner::before{content: ''; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: rgba(255,255,255,.4)}
#amr_banner li{margin-bottom: 42px;}
#amr_banner li:last-child{margin-bottom: 0;}
#amr_banner li a .cir{width: 7px; height: 7px; border-radius: 50%; position: relative; transition: .3s; background-color: #707590;}
#amr_banner li a .cir::before{content: ''; display: block; width: 21px; height: 21px; border-radius: 50%;  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: .3s; border: solid 1px #fff; opacity: 0;}

#amr_banner li .active .cir{background-color: #fff;}
#amr_banner li .active .cir::before{opacity: 1;}

#amr_banner.on::before{background-color: #b2bad0}
#amr_banner.on li a .cir{background-color: #b2bad0;}
#amr_banner.on li a .cir::before{border-color: #001b62;}

#amr_banner.on li .active .cir{background-color: #001b62;}
#amr_banner.on li .active .cir::before{}

@media screen and (max-width: 1900px) {
    #amr_banner{right: 100px;}
}
@media screen and (max-width: 1700px) {
    #amr_banner{right: 50px;}
}
@media screen and (max-width: 1500px) {
    #amr_banner{display: none;}
}