.matchBox{position: relative; width: 668px;height: 208px;overflow: hidden; border: 1px solid #c1c5cf;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
.matchBox a:hover{text-decoration: none}
.matchUl li{cursor: pointer; position: relative; float: left;width: 166px;height: 208px;border-right: 1px solid #d6d8de;}
.matchUl li:hover,.roleBox li:hover{-webkit-box-shadow: inset 0 8px 10px #ebebeb,inset 5px 5px 60px 5px rgba(214,216,222,1);
-moz-box-shadow: inset 0 8px 10px #ebebeb,inset 5px 5px 60px 5px rgba(214,216,222,1);
box-shadow: inset 0 8px 10px #ebebeb,inset 5px 5px 60px 5px rgba(214,216,222,1);}
.matchUl a{position: relative; display: block;width: 166px;height: 208px; }
.matchUl a:hover{text-decoration: none}
.matchUl img{height: 84px;}
.matchUl li:hover .drArrow{background-position:-259px 10px;}
.matchBox li.matchLast{border-right: none}
.matchBox a{text-decoration: none; overflow: hidden;}
.matchImg{width:166px;height: 80px; padding-top:35px; text-align: center; display: inline-block}
.matchTxt{width: 166px; text-align: center;}
.matchTxt span{display: inline-block; min-width: 76px;max-width:102px;padding:0 7px;height: 28px;color: #fff;line-height: 28px;margin:10px 0; text-align: center; background: #eb3d44;-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
.matchDr{width: 166px; text-align: center; position: relative;}
.matchBox .drArrow{opacity: 0.4;filter:alpha(opacity=40); position: static;padding-bottom:10px;-webkit-transition: background 0.3s ease-in;
-moz-transition: background 0.3s ease-in;
-o-transition:background 0.3s ease-in;
transition: background 0.3s ease-in;}
.matchRole{position: absolute;top: 210px;left: -1px;z-index: 2; width: 668px;height: 208px;overflow: hidden;background: #fff; border: 1px solid #c1c5cf;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}
.matchBread{width: 100%;height: 35px;background:url(/images/breadbg.png) repeat-x;}
.matchBread span,.matchBread a{float: left; display: inline-block;padding:0 3px; color: #9da4af;font-size: 14px;line-height: 35px; text-decoration: none;}
.matchBread .active{color: #636973}
.matchBread a:hover{color: #eb3d44}
.breadRt{width: 11px;height: 34px; background: url(/images/breadrt.png) no-repeat;}
.breadRole{width: 30px;height: 34px;padding:0; background: url(/images/role.png) no-repeat; margin: 0 3px 0 8px;}
.roleBox{position: relative;height: 170px;}
.roleUl{display: none;padding-top:20px;;height: 153px;position: absolute;left:0px;top: 0}
.roleUl li{cursor:pointer; position: relative;float: left; width:184px; height: 106px;margin-left:20px;padding:25px 5px 0px; text-align: center; border: 1px solid #d9dbe0; }
.roleUl li a{display: block}
.roleUl li a:hover{text-decoration: none;}
.roleUl li span{display: block;margin-top:9px;font-size: 13px;line-height: 20px; position: relative; overflow: hidden;}
.roleFive li{width: 97px;}
.stepBox{position: absolute; z-index: 3;top:35px;left:670px;width:670px; overflow: hidden; background: #fff}
.stepUl{padding:36px 0 0 40px; display: inline-block;*+padding:36px 0 30px 40px; }
.stepUl li{float: left; width: 259px;height: 34px;margin:0 20px 15px 0; border: 1px solid #d9dbe0;position:relative; padding-left:23px; display: inline;}
.stepUl li a{display: block; color: #636973;line-height: 34px;font-size: 14px;}
.stepUl li:hover{-webkit-box-shadow: inset 0 8px 10px #ebebeb,inset 5px 5px 30px 5px rgba(214,216,222,1);
-moz-box-shadow: inset 0 8px 10px #ebebeb,inset 5px 5px 30px 5px rgba(214,216,222,1);
box-shadow: inset 0 8px 10px #ebebeb,inset 5px 5px 30px 5px rgba(214,216,222,1);}
.stepIco{width: 5px;height: 9px;display: inline-block;position: absolute;left: 13px;top: 13px; background-position: -536px 0}