/* Banner */
.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;outline:none;}
.banner_item .hooper-indicator {background:rgb(255 255 255 / 30%);}
.banner_item .hooper-indicator.is-active {background:rgb(66 133 244 / 85%);}
.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:8px;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%;}
}
@media screen and (max-width:1200px) { 
    .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) and (orientation :portrait) { 
    .banner_item {width:100px;right:-100px;} 
    .banner_item label span {font-size:0.9rem;padding-left:0.35rem;}         
    .banner_item .hooper-indicator {width:6px;}   
}