/**!
 * 大连建设工程并联审批国家试点项目-办事指南
 * author: xiaolong
 * date: 20180906
 */

html,
body {
    height: 100%;
}


/* 顶部导航 */

.mypos {
    margin: 0 50px;
    padding: 13px 0;
    line-height: 24px;
    font-size: 14px;
    color: #333;
}

.mypos .icon-pos {
    display: inline-block;
    width: 15px;
    height: 14px;
    vertical-align: -2px;
    margin: 0 13px 0 17px;
    background: url("../images/guide/icon-home.png") no-repeat;
}

/* 左侧 */

.left-menu {
    position: absolute;
    top: 50px;
    left: 50px;
    bottom: 75px;
    width: 243px;
    background: url("../images/guide/left-bg.png") right bottom no-repeat #fff;
    box-shadow: 0px 0px 6px 0px rgba(31, 146, 247, 0.23);
}

.left-menu .title {
    padding: 3px 0 0 24px;
    line-height: 50px;
    font-size: 17px;
}

.left-list {
    position: absolute;
    top: 53px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: auto;
}

.left-list .item {
    margin-top: -1px;
}

.left-list .item .content {
    display: table-cell;
    width: 243px;
    height: 62px;
    box-sizing: border-box;
    padding-left: 42px;
    padding-right: 16px;
    border-left: 3px solid #fff;
    vertical-align: middle;
    border-top: 1px dashed #d5e7ff;
    border-bottom: 1px dashed #d5e7ff;
    cursor: pointer;
    font-size: 15px;
    line-height: 16px;
    color: #666;
    -webkit-transition: all .4s cubic-bezier(.175, .885, .32, 1);
    transition: all .4s cubic-bezier(.175, .885, .32, 1);
}

.left-list .item:first-child .content {
    border-top-style: solid;
}

.left-list .item>a {
    width: 243px;
    display: block;
}

.left-list .icon01 {
    background: url("../images/guide/icon-money.png") 13px center no-repeat;
}

.left-list .icon02 {
    background: url("../images/guide/icon-invest.png") 13px center no-repeat;
}

.left-list .icon03 {
    background: url("../images/guide/icon-mid.png") 13px center no-repeat;
}

.left-list .icon04 {
    background: url("../images/guide/icon-industry.png") 13px center no-repeat;
}

.left-list .icon05 {
    background: url("../images/guide/icon-user.png") 13px center no-repeat;
}

.left-list .icon06 {
    background: url("../images/guide/icon-building.png") 13px center no-repeat;
}

.left-list .content:hover,
.left-list .content.active {
    color: #006cff;
    font-weight: 600;
    border-left-color: #4987ef;
    background-color: #e8f4ff;
}

.left-list .icon01:hover,
.left-list .icon01.active {
    background-image: url("../images/guide/icon-money-act.png");
}

.left-list .icon02:hover,
.left-list .icon02.active {
    background-image: url("../images/guide/icon-invest-act.png");
}

.left-list .icon03:hover,
.left-list .icon03.active {
    background-image: url("../images/guide/icon-mid-act.png");
}

.left-list .icon04:hover,
.left-list .icon04.active {
    background-image: url("../images/guide/icon-industry-act.png");
}

.left-list .icon05:hover,
.left-list .icon05.active {
    background-image: url("../images/guide/icon-user-act.png");
}

.left-list .icon06:hover,
.left-list .icon06.active {
    background-image: url("../images/guide/icon-building-act.png");
}

/* 右侧列表 */

.right-content {
    position: absolute;
    left: 313px;
    right: 50px;
    top: 50px;
    bottom: 75px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(31, 146, 247, 0.23);
}

.right-content .title {
    height: 53px;
    border-bottom: 1px solid #aed6ff;
    line-height: 53px;
    font-size: 15px;
    font-weight: 600;
    color: #006cff;
    padding-left: 47px;
}

.right-content .icon01 {
    background: url("../images/guide/icon-money-act.png") 20px center no-repeat;
}

.right-content .icon02 {
    background: url("../images/guide/icon-invest-act.png") 20px center no-repeat;
}

.right-content .icon03 {
    background: url("../images/guide/icon-mid-act.png") 20px center no-repeat;
}

.right-content .icon04 {
    background: url("../images/guide/icon-industry-act.png") 20px center no-repeat;
}

.right-content .icon05 {
    background: url("../images/guide/icon-user-act.png") 20px center no-repeat;
}

.right-content .icon06 {
    background: url("../images/guide/icon-building-act.png") 20px center no-repeat;
}

.guide-list {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.guide-list>.item {
    margin: 0 30px;
    padding: 12px 0;
    line-height: 25px;
    border-bottom: 1px dashed #e4efff;
}

.guide-list>.item:last-child {
    padding-bottom: 0;
}

.guide-list>.item>.text {
    display: block;
    margin-right: 128px;
    padding-left: 16px;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.guide-list>.item .btn {
    float: right;
    width: 86px;
    height: 24px;
    margin-top: -25px;
    line-height: 22px;
    text-align: center;
    border: 1px solid #2d86ff;
    font-size: 14px;
    color: #2d86ff;
    border-radius: 12px;
    transition: all .4s cubic-bezier(.175, .885, .32, 1);
}

.guide-list>.item .btn:hover {
    background-color: #deeafe;
}

.matter-list {
    padding-top: 12px;
}

.matter-list .item {
    line-height: 25px;
    padding: 12px 0;
    border-top: 1px dashed #e4efff;
}

.matter-list .item>.content {
    position: relative;
    display: block;
    margin-right: 128px;
    padding-left: 34px;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
    cursor: pointer;
}

.matter-list .item>.content:before {
    position: absolute;
    content: "";
    left: 22px;
    top: 50%;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #bdbdbd;
}