#banner_item {transition: .5s;position: fixed;right: -202px;transform: translateX(-100%);width:202px;z-index: 8;-webkit-filter: drop-shadow(0px 0px 7px #00000033);filter: drop-shadow(0px 0px 7px #00000033);}
#banner_item .hooper {height: auto !important;outline: none;}
#banner_item .hooper-indicator {background: rgb(255 255 255 / 30%);}
#banner_item .hooper-indicator.is-active {background: #4285f4;}
#banner_item td {padding: 0;}
#banner_item label {background: #4c4c4c;position: absolute;color: #ffffff;left: -2.125rem;width: 2.25rem;text-align: center;height: 100%;border-radius: 1rem 0 0 1rem;writing-mode:vertical-lr;}
#banner_item label i {cursor: pointer;position: absolute;bottom: 3px;left: 3px;writing-mode: horizontal-tb;
width: 100%;}
#banner_item label span {position: relative;height: 100%;display: block;padding-left: 0.25rem;}
#switch {display: none;}
#switch:checked+#banner_item {transform: translateX(0);}
#switch:checked+#banner_item i {transform: scaleX(-1);} 
@media screen and (min-width: 1201px) {   
    #banner_item {bottom: 12%;}
    .advertise {bottom: calc(15% + 200px);top: auto;}
}
@media screen and (max-width: 1200px) {   
    .advertise {bottom: calc(18% + 200px);top: auto;}
    #banner_item {bottom: 15%;}
    #banner_item label {border-radius:.5rem 0 0 .5rem;}
    #banner_item label i{font-size: .5rem;}
}
@media screen and (max-width: 767px) {      
    .advertise {bottom: calc(18% + 100px);top: auto;}
    #banner_item {width:100px;right: -100px;}      
    #banner_item .hooper-indicator {width: 6px;}
}