@charset "utf-8";

/* ========== banner ==========*/

.banner {
    position: relative;
    width: 100%;
    height: 580px;
    overflow: hidden;
}

.banner a {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    width: 1920px;
    height: 580px;
}

.banner a img {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 3s;
}

.banner a img:hover {
    transform: scale(1.1);
}


/* 四句*/

.mentality {
    width: 1380px;
    margin: 0 auto;
    text-align: center;
    margin-top: 68px;
}

.mentality span {
    display: block;
    font-size: 18px;
    color: #515151;
    margin-bottom: 28px;
}

.mentality span:last-of-type {
    margin-bottom: 0;
}


/* Ta, 是心理咨询师*/

.psychology {
    position: relative;
    width: 100%;
    height: 231px;
    overflow: hidden;
    margin-top: 52px;
}

.psychology-picture {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    width: 1920px;
    height: 100%;
    background: url(../img/counselor/psychology_tu.jpg) no-repeat;
}

.psychology>span {
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #b89b5e;
    font-weight: 700;
}


/* .psychology>span i {
    font-size: 48px;
} */

.psychology>i {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #b89b5e;
    width: 100%;
    text-align: center;
}


/* 名师推荐*/

.nominate {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.nominate-layer {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    width: 1920px;
    height: 600px;
    overflow: hidden;
}

.nominate-sw {
    transition: 0.6s linear;
}

.nominate-left {
    width: 1235px;
    /* width: 1070px; */
    height: 600px;
    transform: skewX( -14deg) translate(0px, 0px);
    position: absolute;
    left: -275px;
    top: 0px;
    box-sizing: border-box;
    border: 9px solid rgba(30, 30, 30, 1);
    overflow: hidden;
}

.nominate-left div:nth-child(1) {
    position: absolute;
    left: 260px;
    top: 0;
    background: url(../img/counselor/nominate_left.jpg) left no-repeat;
    width: 1920px;
    height: 100%;
    box-sizing: border-box;
    transform: skewX( 14deg) translate(0px, 0px);
}

.nominate-rigth {
    width: 1235px;
    /* width: 1070px; */
    height: 600px;
    transform: skewX( -14deg) translate(0px, 0px);
    position: absolute;
    right: -275px;
    top: 0px;
    box-sizing: border-box;
    border: 9px solid #b69d68;
    overflow: hidden;
}

.nominate-rigth div:nth-child(1) {
    position: absolute;
    right: 260px;
    top: 0;
    background: url(../img/counselor/nominate_right.jpg) right no-repeat;
    width: 1920px;
    height: 100%;
    box-sizing: border-box;
    transform: skewX( 14deg) translate(0px, 0px);
}

.nominate-left div i,
.nominate-rigth div i {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.6s linear;
    position: absolute;
    top: 0;
}

.nominate-left div i {
    left: 0;
}

.nominate-rigth div i {
    right: 0;
}

.nominate-left div i.hover {
    background: rgba(0, 0, 0, 0);
}

.nominate-rigth div i.hover {
    background: rgba(0, 0, 0, 0);
}

.nominate-left dl {
    position: absolute;
    z-index: 1;
    left: 71%;
    top: 50%;
    width: 295px;
    height: 70px;
    text-align: center;
    transform: skewX( 14deg) translate(-50%, -50%);
}

.nominate-rigth dl {
    position: absolute;
    z-index: 1;
    left: 38%;
    top: 50%;
    width: 295px;
    height: 70px;
    text-align: center;
    transform: skewX( 14deg) translate(-50%, -50%);
}

.nominate-left dl dt,
.nominate-rigth dl dt {
    position: relative;
    z-index: 1;
    background-image: linear-gradient(0deg, rgba(30, 30, 30, 1), rgba(65, 65, 65, 1));
    line-height: 70px;
    font-size: 24px;
    color: #fff;
    height: 70px;
}

.nominate-left dl dd,
.nominate-rigth dl dd {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    margin-top: 15px;
    margin-left: 15px;
    transform: translate(-50%, -50%);
    display: block;
    width: 295px;
    height: 70px;
    background: #b89b5e;
}


/* 从未见过你，但会更懂你*/

.advert {
    position: relative;
    width: 100%;
    height: 90px;
    overflow: hidden;
}

.advert-picture {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    width: 1920px;
    height: 100%;
    background: url(../img/seen_01.png) no-repeat;
}