@charset "utf-8";

/*pro */
.pro{width: 240px;background:#023793;transition: all .3s;}
.pro a{display: block;overflow: hidden;padding-left:10px;line-height: 46px;max-height: 46px;color: #ABB1B7;transition: all .3s;max-width:220px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:208px;}
.pro a span{margin-left:10px; font-size:12px;  }
.pro-item{position: relative;overflow: hidden;}
.pro-item.pro-show{border-bottom: none;}
.pro-item ul{display: none;background: rgba(0,0,0,.1);}
.pro-item.pro-show ul{display: block;}
.pro-item>a:before{content: "";position: absolute;left: 0px;width: 2px;height: 46px;background: #34A0CE;opacity:0;transition: all .3s;}
.pro .pro-icon{font-size: 20px;position: absolute;margin-left:-1px;}
.pro .pro-top{ border-bottom:1px solid #FFF; text-align:center; line-height:60px; font-size:24px; color:#FFF; margin-left:10px; width:220px;}
/* 此处修改导航图标 可自定义iconfont 替换*/
.icon_1::after{content: "\e62b";}
.icon_2::after{content: "\e669";}
.icon_3::after{content: "\e61d";}
/*---------------------*/
.pro-more{float:right;margin-right: 20px;font-size: 12px;transition: transform .3s;}
/* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/
.pro-more::after{content: "\e621";}
/*---------------------*/
.pro-show .pro-more{transform:rotate(90deg);}
.pro-show,.pro-item>a:hover{color: #FFF;background:rgba(0,0,0,.1);}
.pro-show>a:before,.pro-item>a:hover:before{opacity:1;}
.pro-item li:hover a{color: #FFF;background: rgba(0, 0, 0,.1);}

/*.pro-mini */
.pro-mini.pro{width: 60px;}
.pro-mini.pro .pro-icon{/* margin-left:-2px; */}
.pro-mini.pro .pro-item>a span{display: none;}
.pro-mini.pro .pro-more{margin-right: -20px;}
.pro-mini.pro .pro-item ul{position: absolute;top:0px;left:60px;width: 180px;z-index: 99;background:#3C474C;overflow: hidden;}
.pro-mini.pro .pro-item:hover{background:rgba(255,255,255,.1);}
.pro-mini.pro .pro-item:hover .pro-item a{color:#FFF;}
.pro-mini.pro .pro-item:hover a:before{opacity:1;}
.pro-mini.pro .pro-item:hover ul{display: block;}