﻿.index_xfbox{position: fixed;top:180px;right: 0;z-index: 10000;}
.index_xfbox .index_xfbox1{ width: 70px;  }
.index_xfbox .index_xfbox1 li{ width: 70px; height: 50px;color: #fff; font-size: 14px;  display: block; padding: 10px 0; text-align: center ; position: relative; position:relative; cursor: pointer; margin: 0 0 5px 0;-moz-box-shadow:0 0 20px  rgb(0,0,0,0.2); -webkit-box-shadow:0 0 20px rgb(0,0,0,0.2); box-shadow:0 0 20px rgb(0,0,0,0.2);  display: block; border-radius: 5px;position: relative; background: #09baf8; } 
.index_xfbox .index_xfbox1 li:after {content: "";position: absolute;top: 0;right: 0;padding-right:0;width: 0%;height: 70px;box-sizing: initial;z-index: -1;transition: 0.3s;border-radius: 5px;z-index: 0} 
.index_xfbox .index_xfbox1 li:hover:after {width: 100%;background: #0068b7; color: #fff; }
.index_xfbox .index_xfbox1 li .title{ z-index:60000000; position: absolute;  padding: 2px 0 0 0; left: 0; width: 100%; }
.index_xfbox .index_xfbox1 .index_xfbox1-szw { padding: 0}
.index_xfbox .index_xfbox1 .index_xfbox1-szw .title{ top: 0;color: #fff} 
.index_xfbox .index_xfbox1 .index_xfbox1-szw .title span{  font-size: 12px }
.index_xfbox .index_xfbox1 .inco_indexwyw{  width: 30px; height: 30px; background: url(../images/topico4.png) no-repeat; background-size: 100%; display: block;margin: 0 auto; z-index: 10}
.index_xfbox .index_xfbox1 .inco_indexzsb{  width: 30px; height: 30px; background: url(../images/inco_indexzsb.png) no-repeat; background-size: 100%; display: block;margin: 0 auto; z-index: 10}
.index_xfbox .index_xfbox1 .inco_indexgzh{  width: 30px; height: 30px; background: url(../images/inco_indexgzh.png) no-repeat; background-size: 100%; display: block;margin: 0 auto; z-index: 10}
.index_xfbox .index_xfbox1 .inco_fhdb{  width: 30px; height: 30px; background: url(../images/fanhuidingbu.png) no-repeat; background-size: 100%; display: block;margin: 0 auto; z-index: 10}

.index_wykbox{ position:absolute; width: 480px;   background: #f5f9fd;  top: -70px;border-radius: 5px;padding:20px 20px  0  20px; clear: both;-moz-box-shadow:4px 0 6px  rgb(0,0,0,0.2); -webkit-box-shadow:4px 0 6px rgb(0,0,0,0.2); box-shadow:4px 0 6px rgb(0,0,0,0.2); left:50px;text-align:center;-webkit-transition:all 0.3s;-ms-transition:all 0.3s;-moz-transition:all 0.3s;background-color:#fff;opacity:0; z-index: -1}

.index_xfbox .index_xfbox1 li:hover .index_wykbox{  width: 480px;  display: block; background: #fff;  position: absolute; left: -490px; top: -70px; border-radius: 5px; padding:20px  20px  0  20px; clear: both;-moz-box-shadow:4px 0 6px  rgb(0,0,0,0.2); -webkit-box-shadow:4px 0 6px rgb(0,0,0,0.2); box-shadow:4px 0 6px rgb(0,0,0,0.2); 	-webkit-transition:all 0.3s;-ms-transition:all 0s;-moz-transition:all 0.3s; opacity: 1}

.index_xfbox .index_xfbox1 li .index_wykbox a{  width: 100px; height: 100px; display: block;text-align:center; color: #333; display: inline-block; margin:  0 0 30px 10px; font-size: 14px;color: #333;  font-weight: 300; float: left; padding: 10px 10px; border-radius: 5px;}

.index_xfbox .index_xfbox1 li .index_wykbox:after {content: "";border: 8px solid transparent;border-left-color: #f2f8fe;top:98px;right: -16px;position: absolute;width: 0;height: 0;}
.index_xfbox .index_xfbox1 li .index_wykbox a:hover img{transform: scale(1.05);transition: all 0.3s ease;  }
.index_xfbox .index_xfbox1 li .index_wykbox a img{ width: 50px; height: 50px; margin: 0 auto 10px auto; display: block}

.index_wyw3box{}
.index_wyw3box img{  width: 150px}
.index_xfbox  li:hover .index_wyw3box{ width: 160px !important; height: 160px !important;left: -180px !important; top: -70px  !important; padding: 5px !important;}
.index_xfbox  li:hover .index_wyw3box img{  width: 150px}