.bottomright{ float:right; width:420px; margin-top:10px; margin-bottom:20px;}
.bottomright a { padding-left: 8px; padding-right: 8px; }
.bottomright img { max-width: 100%; } 
.bottomright p { padding-left: 10px; color:#fff; font-size:20px; letter-spacing:2px; float:left; font-weight:bold;}
.bottomright ul{ float:left; width:auto;width:100%}
.bottomright ul li{ float:left; width:55px; height:55px; line-height:60px; background:#03325d; border-radius:8px; margin:10px 10px 0px 10px; position:relative; background-position:center; background-repeat:no-repeat; cursor: pointer}
.bottomright ul li:before{width:100%; height:100%; text-align:center; position:absolute;left:0px;top:0px; font-family:"iconfont"; color:#ffffff;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }
/*.bottomrightul li a{ width:100%; height:100%; display:block}*/
.bottomright ul li a{ width:100%; height:100%; display:block;position: relative;z-index: 12;}

.bottomright ul .r1:before{ content:"\e607"; font-size:28px}
.bottomright ul .r2:before{ content:"\e65a"; font-size:30px}
.bottomright ul .r3:before{ content:"\e600"; font-size:30px}
.bottomright ul .r4:before{ content:"\e6af"; font-size:30px}
.bottomright ul .r5:before{ content:"\e7f3"; font-size:28px}
.bottomright ul .r6:before{ content:"\e63e"; font-size:20px}
.bottomright ul .r7:before{ content:"\e602"; font-size:30px}
.bottomright ul .r8:before{ content:"\e7f4"; font-size:34px}
.bottomright ul .r9:before{ content:"\e7f5"; font-size:40px}
.bottomright ul .r10:before{ content:"\e605"; font-size:38px}



.bottomright .ul-drop{ width:120px; position:absolute;left:-30px;bottom:85px; z-index:23; opacity:0; visibility:hidden;transition:all 0.5s ease}
.bottomright .ul-drop:before{ width:0px; height:0px; content:"";border-left:8px transparent solid;border-right:8px transparent solid; border-top:8px #fff solid; position:absolute;left:50%;margin-left:-8px;bottom:-8px; z-index:12}
.bottomright .ul-drop img{ width:100%; height:120px; overflow:hidden}
.bottomright .active .ul-drop{opacity:1; visibility: visible; bottom:75px}
.bottomright .r1.active:before,.bottomright .r4.active:before,.bottomright .r5.active:before,.bottomright .r8.active:before,.bottomright .r9.active:before,.bottomright .r10.active:before,.bottomright .r11.active:before,.bottomright .r12.active:before,.bottomright .r14.active:before,.bottomright .r15.active:before,.bottomright .r16.active:before,.bottomright .r17.active:before,.bottomright .r18.active:before,.bottomright .r19.active:before,.bottomright .r20.active:before{ color:#fff;}
.bottomright .r1.active{ background:#3abc00}
.bottomright .r2.active{ background:#df1108}
.bottomright .r3.active{ background:#1b0b1b}
.bottomright .r4.active{ background:#df1108}
.bottomright .r5.active{ background:#f54600}
.bottomright .r6.active{ background:#ff6699}
.bottomright .r7.active{ background:#41a2f8}
.bottomright .r8.active{ background:#fabf00}
.bottomright .r9.active{ background:#df1108}
.bottomright .r10.active{ background:#3366cc}
.bottomright .r11.active{ background:#f54600 }
.bottomright .r12.active{ background:#e9490b }
.bottomright .r13.active{ background:#ce0000 url(../images/icon-2021-3-1.png) no-repeat center}
.bottomright .r14.active{ background:#df1108}
.bottomright .r15.active{ background:#3abc00}
.bottomright .r5.active span{ color:#fff}
.bottomright .r16.active{ background:#405a9b}
.bottomright .r17.active{ background:#41a2f8}
.bottomright .r18.active{ background:#ff0039}
.bottomright .r19.active{ background:#297cb8}
.bottomright .r20.active{ background:#c12d26 }

.bottomright .r2.active span{ color:#fff}