.m-roles{width:1200px;margin:0 auto;position:relative}
.m-roles h3{background:url(../images/icon_role.png) no-repeat;height:38px;padding-left:62px;line-height:38px;position:absolute;color:#000;font-size:24px;top:21px;left:7px}
.m-roles .more{display:block;height:23px;width:23px;background:url(../images/more.png) no-repeat;width:100px;padding-left:30px;line-height:23px;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;color:#333;position:absolute;top:20px;right:280px;z-index:9}
.m-roles .more:hover{background:url(../images/more_hover.png) no-repeat}
.m-roles #roleCarousel{height:700px;width:1040px;position:relative;margin:0 auto;z-index:100}
.m-roles #roleCarousel img{border:0}
.m-roles #roleCarousel .role{position:absolute;top:880px;cursor:pointer;-webkit-transition:opacity .1s;-moz-transition:opacity .1s;-ms-transition:opacity .1s;-o-transition:opacity .1s;transition:opacity .1s}
.m-roles #roleCarousel .role a{display:block}
.m-roles #roleCarousel .role a .name{width:40px;margin-top:30px;text-align:center;height:146px;line-height:146px;position:absolute;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;background:url(../images/role_name.png) no-repeat;left:50px;-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}
.m-roles #roleCarousel .role a .name .icon{display:block;margin:0 auto;margin-top:10px}
.m-roles #roleCarousel .role a .name .icon.icon-1{width:16px;height:19px;background:url(../images/1_a2a1dab.png) no-repeat}
.m-roles #roleCarousel .role a .name .icon.icon-2{width:18px;height:19px;background:url(../images/2_2af7edc.png) no-repeat}
.m-roles #roleCarousel .role a .name .icon.icon-3{width:19px;height:15px;background:url(../images/3_5f35086.png) no-repeat}
.m-roles #roleCarousel .role a .name .txt{width:20px;text-align:center;display:inline-block;margin:0 auto;font-size:16px;color:#000;line-height:17px;vertical-align:middle;padding-bottom:68px}
.m-roles #roleCarousel .role a .name .arraw{display:block;width:30px;height:28px;background:url(../images/role_arrow.png) no-repeat;position:absolute;margin-left:-15px;left:50%;bottom:5px}
.m-roles #roleCarousel .role a:hover .arraw{animation:arrow .8s ease-in-out}
.m-roles #roleCarousel .role.active a .name{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}

.m-roles #roleCarousel .blipsContainer{position:absolute;width:1200px;height:40px;color:#fff;top:780px;left:50%;margin-left:-500px}
.m-roles #roleCarousel .blipsContainer .blip{height:38px;width:205px;border:2px solid #0a456b;line-height:34px;text-align:center;color:#0a456b;margin-left:-2px;box-sizing:border-box;position:relative;transition:background .4s}
.m-roles #roleCarousel .blipsContainer .blip:hover{background-color:#0a456b;color:#e1c68b}
.m-roles #roleCarousel .blipsContainer .blip .border{width:205px;height:38px;position:absolute;top:-2px;left:-2px;display:none;box-sizing:border-box;z-index:1}
.m-roles #roleCarousel .blipsContainer .blipSelected{background-color:#0a456b;line-height:30px;color:#fff}
.m-roles #roleCarousel .blipsContainer .blipSelected .border{display:block;top:-4px;left:-4px}
.m-shuiche{width:469px;height:207px;background:url(../images/shuiche.png) no-repeat;position:absolute;top:490px;left:50%;margin-left:230px}
.m-feature{width:1200px;margin:0 auto;position:relative}
.m-feature h3{background:url(../images/icon_feature.png) no-repeat;height:38px;padding-left:62px;line-height:38px;position:absolute;color:#000;font-size:24px;top:20px;left:7px}
.m-feature #featureCarousel{height:770px;position:relative}
.m-feature #featureCarousel img{border:0}
.m-feature #featureCarousel .feature{position:absolute;top:-1000px;cursor:pointer;-webkit-transition:opacity .1s;-moz-transition:opacity .1s;-ms-transition:opacity .1s;-o-transition:opacity .1s;transition:opacity .1s}
.m-feature #featureCarousel .feature a{display:block}
.m-feature #featureCarousel .feature a .name{width:40px;height:146px;position:absolute;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;background:url(../images/role_name.png) no-repeat;left:50px;-webkit-opacity:0;-moz-opacity:0;opacity:0;filter:alpha(opacity=0)}
.m-feature #featureCarousel .feature.active a .name{-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100)}
.m-feature #featureCarousel .feature .border{position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px solid #fff}