#han_banner{position: fixed; right: 0; top: 0; width: 90px; height: 100vh; min-height: 800px; max-height: 1080px; z-index: 6; }
#han_banner.s1{background-color: rgba(255,255,255,.1)}
#han_banner ul{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#han_banner li{margin-bottom: 25px;}
#han_banner li:last-child{margin-bottom: 0;}
#han_banner li a{display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: solid 1px transparent; border-radius: 50%; transition: .3s;}

#han_banner li a .cir{width: 9px; height: 9px; border-radius: 50%; transition: .3s; background-color: #f9f9f9; opacity: .5;}
#han_banner li .active{border-color: #fff;}
#han_banner li .active .cir{opacity: 1;}

#han_banner.on li a .cir{background-color: #0074f7;}
#han_banner.on li .active {border-color: #0074f7}

.btn_wrap span{width: 24px; height: 12px; display: block; background: 50% / cover no-repeat; opacity: 35%; animation:scroll-ani 1.3s infinite; }
.btn_wrap span + span{margin-top: 3px;}
.btn_wrap > *{position: fixed; right: 0; bottom: 0; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; align-items: center; flex-direction:column;}
@keyframes scroll-ani {
	0% {opacity:0.35;}
	50% {opacity:0.65;}
	100% {opacity:1;}
}

#top_btn {background: rgba(255,255,255,0); z-index: 10; transition: .3s; pointer-events: none; opacity: 0; }
/* #top_btn span{background-image: url('../img/wh_arrow.png');  transform: rotate(180deg);} */
#top_btn span{background-image: url('../img/blue_arrow.png'); }

.scrolled #top_btn {opacity: 1; pointer-events: auto; }
#top_btn  span:nth-of-type(3){animation-delay: 0.1s;}
#top_btn  span:nth-of-type(2){animation-delay: 0.2s;}
#top_btn  span:nth-of-type(1){animation-delay: 0.3s;}
#han_banner.on #top_btn span{background-image: url('../img/blue_arrow.png'); transform: initial;}

.scroll_btn{transition: .3s; background-color: #00b4f7;}
.scrolled .scroll_btn{pointer-events: none; opacity: 0; }
.scroll_btn span{background-image: url('../img/wh_arrow.png')}
.scroll_btn span:nth-of-type(1){animation-delay: 0.1s;}
.scroll_btn span:nth-of-type(2){animation-delay: 0.2s;}
.scroll_btn span:nth-of-type(3){animation-delay: 0.3s;}


/* hidden-nav */
@media screen and (max-width: 1280px){
    #han_banner ul{display: none;}

}
@media screen and (max-width: 1024px) {
    #han_banner {width: 0; height: 0;}
    .btn_wrap > *{width: 60px; height: 60px;}
    .btn_wrap span{width: 18px; height: 9px;}
}