.delighter.splash {
    transition: all 2s ease-out;
}

.delighter.splash.ended {
    background: #fff;
}


/* 动画向右边走 */

.delighter.right {
    transform: translate(-100%);
    opacity: 0;
    transition: all .7s ease-out;
}

.delighter.right.started {
    transform: none;
    opacity: 1;
}


/* 动画向左边边走 */

.delighter.left {
    transform: translate(100%);
    opacity: 0;
    transition: all .7s ease-out;
}

.delighter.left.started {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(1) {
    transform: translatey(300%);
    opacity: 0;
    transition: all .85s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(1) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(2) {
    transform: translatey(500%);
    opacity: 0;
    transition: all 1s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(2) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(3) {
    transform: translatey(700%);
    opacity: 0;
    transition: all 2s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(3) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(4) {
    transform: translatey(800%);
    opacity: 0;
    transition: all 3s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(4) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(5) {
    transform: translatey(1000%);
    opacity: 0;
    transition: all 4s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(5) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(6) {
    transform: translatey(800%);
    opacity: 0;
    transition: all 5s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(6) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(7) {
    transform: translatey(800%);
    opacity: 0;
    transition: all 5s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(7) {
    transform: none;
    opacity: 1;
}

.delighter.bottom2 li a:nth-child(8) {
    transform: translatey(800%);
    opacity: 0;
    transition: all 6s ease-in-out;
}

.delighter.bottom2.started li a:nth-child(8) {
    transform: none;
    opacity: 1;
}


/* 向下走 */

.delighter.top {
    transform: translateY(-40%);
    opacity: 0;
    transition: all .7s ease-in-out;
}

.delighter.top.started {
    transform: none;
    opacity: 1;
}


/* 向上走 */

.delighter.bottom {
    transform: translateY(40%);
    opacity: 0;
    transition: all .7s ease-in-out;
}

.delighter.bottom.started {
    transform: none;
    opacity: 1;
}


/* 逐渐显示 */

.delighter.shown {
    opacity: 0;
    transition: all .7s ease-in-out;
}

.delighter.shown.started {
    opacity: 1;
}

.delighter.bottom3 li:nth-child(1) {
    transform: translatey(300%);
    opacity: 0;
    transition: all .85s ease-in-out;
}

.delighter.bottom3.started li:nth-child(1) {
    transform: none;
    opacity: 1;
}

.delighter.bottom3 li:nth-child(2) {
    transform: translatey(400%);
    opacity: 0;
    transition: all 0.85s ease-in-out;
}

.delighter.bottom3.started li:nth-child(2) {
    transform: none;
    opacity: 1;
}

.delighter.bottom3 li:nth-child(3) {
    transform: translatey(400%);
    opacity: 0;
    transition: all 0.95s ease-in-out;
}

.delighter.bottom3.started li:nth-child(3) {
    transform: none;
    opacity: 1;
}

.delighter.bottom3 li:nth-child(4) {
    transform: translatey(400%);
    opacity: 0;
    transition: all 0.95s ease-in-out;
}

.delighter.bottom3.started li:nth-child(4) {
    transform: none;
    opacity: 1;
}
.zongzhan {
    float: left;
    border-left: 1px solid #a3afcd;
    padding-left: 2rem;
    width: 10%;
}

    .zongzhan p {
        font-size: 1.2rem;
        color: #ffba1f;
        font-weight: 666;
        text-align: center;
    }

    .zongzhan span {
        font-size: 0.9rem;
        color: #333;
        text-align: center;
        display: block;
        margin-top: 0.5rem;
        background: #ffdf96;
        border-radius: 20px;
        width: 70%;
        line-height: 1.8rem;
        margin: 0.6rem auto 0 auto;
    }

#clist {
    width: auto;
    height: auto;
    overflow: auto;
}

.province dl {
    padding: 5px 20px;
    clear: both;
    zoom: 1;
    width: 100%
}

.province dt {
    font-size: 14px;
    padding-top: 7px;
    width: 50px;
    text-align: right;
    float: left;
    font-weight: bold;
    display: block;
    margin-bottom: 3px;
    margin-top: 3px;
}

.province dd {
    float: right;
    margin-bottom: 3px;
    padding-right: 20px;
    width: 840px;
    display: block;
    margin-top: 3px;
}

    .province dd a {
        white-space: nowrap;
        font-size: 14px;
        margin: 7px 11px 0 0;
        display: block;
        float: left
    }

.pinyin dl {
    padding: 5px 20px;
    clear: both;
    zoom: 1;
    margin: 0;
    width: 100%
}

.pinyin dt {
    font-size: 14px;
    padding-top: 7px;
    width: 4%;
    float: left;
    font-weight: bold;
    display: block;
    margin: 3px 0;
}

.pinyin dd {
    float: left;
    width: 94%;
    display: block;
    margin: 3px 0;
}

    .pinyin dd a {
        white-space: nowrap;
        font-size: 14px;
        margin: 7px 11px 0 0;
        display: block;
        float: left
    }

        .pinyin dd a:hover {
            color: #f1940f;
        }

#blist {
    font-size: 14px;
    padding-top: 5px
}

    #blist a {
        margin-right: 10px;
        text-decoration: underline;
        font-weight: bold
    }

.lines {
    display: block;
    clear: both;
    font-size: 0;
    height: 15px;
    margin-bottom: 10px;
    line-height: 0;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e1
}


#main {
    width: 100%;
    max-width: 1200px;
    margin: 1.4rem auto;
}

.crumb {
    background: #faebd7;
    height: 2rem;
    padding: 1%;
    width: 98%;
}

    .crumb p {
        color: #222;
        font-size: 1.1rem;
        line-height: 2rem;
    }

.renmen_city {
    margin-top: 2rem;
}

    .renmen_city .box {
        background: #f1f1f1;
        overflow: hidden;
        padding: 1%;
        width: 98%;
    }

    .renmen_city p {
        font-size: 1rem;
        color: #222;
        float: left;
        line-height: 2rem;
    }

    .renmen_city a {
        margin: 0 0.7%;
        float: left;
        font-size: 0.96rem;
        color: #555;
        line-height: 2rem;
    }

        .renmen_city a:hover {
            color: #f1940f;
        }

    .renmen_city img {
        margin-right: 1rem;
        float: left;
        margin-top: 0.2rem;
    }
@media screen and (max-width: 640px) {
    .zongzhan {
        margin-top: 0.5rem;
        width: 28%;
        padding-left: 0;
    }
}