/*-------------------------------------------------第1屏*/
.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 963rem;
    max-height: 1130rem;
    top: -92rem;
    overflow: hidden;
    text-align: center;
    background-image: url("../img/index/background.jpg");
    background-size: 100% 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.banner .slogan {
    position: relative;
    top: 50%;
/ / 父div居中显示，子div也需要相应负居中-50 % width: 100 %;
    height: 130rem;
    text-align: center;
}

.banner .slogan .slogan-title {
    position: relative;
    top: -50%;
    width: 100%;
    height: 60rem;
    line-height: 60rem;
    font-size: 46rem;
    color: #FFFFFF;
    letter-spacing: 13rem;
    text-align: center;
    text-shadow: 0 0 36rem rgba(11, 10, 19, .5);
    font-weight: 500;
}

.banner .slogan .slogan-subtitle {
    position: relative;
    top: -50%;
    width: 100%;
    height: 40rem;
    line-height: 40rem;
    margin-top: 30rem;
    font-size: 30rem;
    color: #FFFFFF;
    letter-spacing: 4rem;
    text-align: center;
    text-shadow: 0 0 36rem rgba(11, 10, 19, .5);
}

.index-about .banner .slogan .title-en {
    margin: 0 10rem
}

.banner .slogan .slogan-subtitle .topline {
    display: inline-block;
    width: 74rem;
    height: 1rem;
    background-color: #fff;
    margin-bottom: 6rem
}

/*-------------------------------------------------公司介绍*/
.introduce {
    position: relative;
    height: 500rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.introduce-top-title {
    font-size: 44rem;
    color: #333343;
    letter-spacing: 10rem;
    text-align: center;
    line-height: 52rem;
    padding-top: 30rem;
    visibility: hidden
}

.introduce .introduce-top-title::after {
    content: '';
    display: block;
    height: 2rem;
    width: 142rem;
    margin-left: 46%;
    margin-top: 60rem;
    background-color: #DA424B; /*下划线颜色*/
}

.introduce .introduce-title-info {
    margin-top: 78rem;
    font-size: 21rem;
    color: #333343;
    text-align: center;
    line-height: 59rem;
    letter-spacing: 5rem;
}

/*-------------------------------------------------公司愿景*/
.mission {
    height: 940rem;
    position: relative;
    /*opacity: .5;*/
}

.mission .mission-left {
    float: left;
    width: 52%;
    min-width: 600rem;
    height: 100%;
}

.mission .mission-left .list {
    position: relative;
    top: 78rem;
    height: 710rem;
    background-color: rebeccapurple;
}

.mission .mission-left .list .item {
    position: absolute;
    height: 710rem;
    width: 100%;
    color: #fff;
    font-size: 50rem;
    opacity: 0;
    -o-transition: all .8s;
    transition: all .8s;
    -webkit-transition: all .8s;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right
}

.mission .mission-left .list .item img {
    width: 100%;
    height: 100%
}

.mission .mission-left .list .mission-active {
    z-index: 20;
    opacity: 1
}

.mission .mission-left .mission-left-btn {
    top: 650rem;
    width: 138rem;
    height: 54rem;
    position: absolute;
    left: 120rem;
    z-index: 30
}

.mission .mission-left .mission-left-btn .go-pre-active {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwBAMAAACGd7VhAAAAElBMVEUAAADjVDPhWTXjVTPjVTTjVTmMExB8AAAABnRSTlMA5irVqwm50FDpAAAAXklEQVQoz+XTsQ3AIAxEUcQGp2QApEwQ70DP/tPQGB262wBcWs/dd9mmtiLzhSzq/zQhQAgBEpEsRJKIhIgkEQkRCdCVvONUIhu9uguF1+JFeXVeptfrhfsX+Kf4N00CayfZdLO5VAAAAABJRU5ErkJggg==) center no-repeat !important;
    background-size: 18rem !important
}

.mission .mission-left .mission-left-btn .go-pre {
    float: left;
    position: relative;
    width: 54rem;
    height: 54rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAwBAMAAACGd7VhAAAAFVBMVEUAAAD///////////////////////9Iz20EAAAAB3RSTlMA5ivVqwklfQmY9gAAAGBJREFUKM/l07ENwCAQA0DEBq9kAKRMEAo2oGf/aWiMjOwNwOXrvrPTllyS5KtyyP9ThERUIRFAJAuRAJEQkQCBII0E6UrecSqRi37dhZq3xRvlrfNmenu94b4CX4qvaQIPqyfhfalNfQAAAABJRU5ErkJggg==) center no-repeat;
    background-size: 18rem;
    cursor: pointer
}

.mission .mission-left .mission-left-btn .go-pre .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 50rem;
    height: 50rem;
    border: 2rem solid #fff;
    opacity: .3
}

.mission .mission-left .mission-left-btn .go-pre .line0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2rem;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out
}

.mission .mission-left .mission-left-btn .go-pre .move1 {
    width: 54rem
}

.mission .mission-left .mission-left-btn .go-pre .line1 {
    position: absolute;
    top: 2rem;
    right: 0;
    width: 2rem;
    height: 0;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out
}

.mission .mission-left .mission-left-btn .go-pre .move2 {
    height: 52rem
}

.mission .mission-left .mission-left-btn .go-pre .line2 {
    position: absolute;
    right: 2rem;
    bottom: 0;
    width: 0;
    height: 2rem;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out
}

.mission .mission-left .mission-left-btn .go-pre .move3 {
    width: 52rem
}

.mission .mission-left .mission-left-btn .go-pre .line3 {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 2rem;
    height: 0;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out
}

.mission .mission-left .mission-left-btn .go-pre .move4 {
    height: 50rem
}

.mission .mission-left .mission-left-btn .go-next {
    float: right;
    position: relative;
    width: 54rem;
    height: 54rem;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwBAMAAACLacUmAAAAFVBMVEUAAADkVzbkVDTkVTP/VTnmWTPjVDOSSLLFAAAABnRSTlMAL+y9CSiYbz80AAAAYklEQVQoz2MAA0YBBnQgpIguwqiWJICuKC1NEV1RWhpMGUIRXBlCEUwZQhFcGUIRmrIgIBdNmTOQh6aMxWwEK0MWwtQ4IhShJRPMxISZ5DATJmbyxUzkmFkBM8Pgz1aYmQ8ATrqJCfZ0cPgAAAAASUVORK5CYII=) center no-repeat;
    background-size: 18rem
}

.mission .mission-left .mission-left-btn .go-next .box2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50rem;
    height: 50rem;
    border: 2rem solid #fff;
    opacity: .3
}

.mission .mission-left .mission-left-btn .go-next .line02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2rem;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out
}

.mission .mission-left .mission-left-btn .go-next .move12 {
    width: 54rem
}

.mission .mission-left .mission-left-btn .go-next .line12 {
    position: absolute;
    top: 2rem;
    right: 0;
    width: 2rem;
    height: 0;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out
}

.mission .mission-left .mission-left-btn .go-next .move22 {
    height: 52rem
}

.mission .mission-left .mission-left-btn .go-next .line22 {
    position: absolute;
    right: 2rem;
    bottom: 0;
    width: 0;
    height: 2rem;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out
}

.mission .mission-left .mission-left-btn .go-next .move32 {
    width: 52rem
}

.mission .mission-left .mission-left-btn .go-next .line32 {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 2rem;
    height: 0;
    background-color: #DA424B; /*下划线颜色*/
    -webkit-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out
}

.mission .mission-left .mission-left-btn .go-next .move42 {
    height: 50rem
}

.mission .mission-right {
    position: absolute;
    right: 0;
    top: 168rem;
    height: 530rem;
    width: 52%;
    min-width: 680rem;
    background-color: #F4F2F3;
    z-index: 999;
}

.mission .mission-right .mission-right-box {
    float: left;
    margin-left: 160rem;
}

.mission .mission-right .mission-right-box .mission-right-top {
    padding-top: 112rem;
    font-size: 44rem;
    color: #333343;
    letter-spacing: 10rem;
    line-height: 52rem;
    visibility: hidden;
}

.mission .mission-right .mission-right-box .mission-right-top::after {
    content: '';
    display: block;
    height: 2rem;
    width: 92rem;
    margin-left: 1%;
    margin-top: 26rem;
    background-color: #DA424B; /*下划线颜色*/
}

.mission .mission-right .mission-right-box .mission-right-bottom {
    margin-top: 50rem;
    font-size: 30rem;
    line-height: 38rem;
    text-align: center;
    color: #333343;
    letter-spacing: 5rem;
    visibility: hidden;
}

.mission .mission-right .mission-right-box .mission-right-experience {
    margin-top: 43rem;
    width: 236rem;
}

/*-------------------------------------------------公司价值*/
.values {
    position: relative;
    width: 100%;
    min-width: 1800rem;
    height: 1350rem;
    background-color: #F4F2F3;
    /*opacity: .5;*/
}

.values .values-auto {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
}

/*价值观左边部分*/
.values .values-left {
    position: relative;
    float: left;
    width: 39%;
    min-width: 740rem;
    height: 100%;
    overflow: hidden;
}

.values .values-left-title-box {
    position: relative;
    top: 6%;
    /*top: 75rem;*/
    left: 22%;
    /*left: 160rem;*/
}

.values .values-left-title {
    font-size: 44rem;
    color: #333343;
    letter-spacing: 10rem;
    line-height: 52rem;
}

.values .values-left-title::after {
    content: '';
    display: block;
    height: 2rem;
    width: 142rem;
    margin-left: 8rem;
    margin-top: 45rem;
    background-color: #DA424B; /*下划线颜色*/
}

.values-left-txt {
    position: relative;
    top: 11%;
    width: 100%;
    height: 57.5%;
    line-height: 353%;
    background-color: #DA424B; /*下划线颜色*/
    color: #ffffff;
    letter-spacing: 2rem;
}

.values .values-auto .values-left .values-left-txt .values-subtitle {
    width: 80%;
    float: right;
    height: 100%;
}

.values .values-auto .values-left .values-left-txt .values-subtitle .newline {
    position: relative;
    float: left;
    top: 9%;
    left: 1%;
    width: 0.4%;
    height: 78%;
    border-radius: 2rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAOYCAYAAAD/oyKcAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAAqADAAQAAAABAAADmAAAAADwOvG1AAAByklEQVRoBe2YgWrDMAxEl9H//+XOEvMLh5zEKVbnFQdahCNHl7uTXLo9y/VVrm/7KtfTAlvZZCXe2mzpUT6y3Z8TV9huQXcOuxYe5+1XHY9FnV5+EBe5u7Xo0fS2XrPh+bd+tmZUMlP06uYnBY969db8+Rw8SgIdJzNh7+7e+fw6Pzl44nv1+nk2PHRlPE93meown6C/1Ej5/pmAH58k9WfPFR58mDd/BE+On2fr94XH+658VR/qcBjJD092q7+73w9e0GC8C89Ff72dn+F40FSGFZPtSoLheIABsFt+vsDTsE3vecqTsR9QCcBMDrvIISBHduGonPP9Ag/VG0SlnO8LT1FfLKESDOcHs1HUSvxdv0+LB2AWTMDPwmM6GAtM7ONg6XVOlPJjuc6q0Os5efOHohYsPMZCr58tdya9xDYOjDMlQo3JluMGINmD9u8NzamMqX9iCcGzyZNjsrem4aDxwyLu/zs/+V5WwSol2oHqRMxseB8Z7WeDzkJVqv4NmtO1D+ZkSTyWBljnorzZ14/lJw7NDrSWY2Lx7dELMGcXPwnPeXzn8eA9igDAK9qInt9heg4N5KLXwmPpHcuKfBnl4MHYsenKrgecH1xMBcKTtAesAAAAASUVORK5CYII=) center;
    background-size: contain;
}

.values .values-auto .values-left .values-left-txt .values-subtitle .active-line {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 8%;
    border-radius: 4rem;
    background-color: #fff;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
}

.values .values-auto .values-left .values-left-txt .values-subtitle ul, li {
    list-style: none;
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap {
    cursor: pointer;
    margin-top: 0;
    padding-left: 10.5%;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .default-title {
    cursor: pointer;
    /*visibility: hidden;*/
    visibility: visible !important;
    -webkit-animation: slideUpIn100 .6s linear;
    animation: slideUpIn100 .6s linear;
}

@keyframes slideUpIn100 {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: hidden;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        visibility: visible;
    }
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .values-detail {
    cursor: pointer;
    display: none;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .de-detail {
    cursor: pointer;
    animation: valuesDetail .6s linear;
    -webkit-animation: valuesDetail .6s linear
}

@keyframes valuesDetail {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes valuesDetail {
    from {
        opacity: 0;
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .default-title .default-left-title {
    opacity: .5;
    font-size: 24rem;
    letter-spacing: 4rem;
    color: #FFF;
    line-height: 38rem;
    /*margin-right: 16rem;*/
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .default-title .values-left-title-active {
    font-weight: 600;
    font-size: 36rem;
    color: #FFF;
    letter-spacing: 0rem;
    line-height: 38rem;
    /*margin-right: 16rem;*/
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .default-title .default-right-title {
    opacity: .5;
    font-size: 22rem;
    letter-spacing: 4rem;
    color: #FFF;
    line-height: 32rem;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .default-title .values-right-title-active {
    padding-left: 2%;
    opacity: .8;
    font-size: 23rem;
    color: #FFF;
    letter-spacing: 1rem;
    line-height: 32rem;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease
}

.values .values-auto .values-left .values-left-txt .values-subtitle .values-title-wrap .values-detail-active {
    cursor: pointer;
    margin-top: 4%;
    margin-bottom: 8%;
    padding-left: 0%;
    font-size: 22rem;
    color: #FFF;
    letter-spacing: 2rem;
    line-height: 180%;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

/*价值观右边部分*/
.values .values-right {
    position: relative;
    float: left;
    width: 54.5%;
    min-width: 1038rem;
    height: 100%;
    overflow: hidden;
}

.values .values-right .values-right-frame {
    position: absolute;
    top: 5%;
    width: 100%;
    height: 70.85%;
    overflow: hidden;
}

.values .values-right .values-right-frame img {
    width: 100%;
    height: 100%;
}

.values .values-right .values-right-imgs {
    position: absolute;
    top: 7%;
    left: 4%;
    width: 92%;
    height: 70%;
    overflow: hidden;
}

.values .values-right .values-right-imgs .img-active {
    opacity: 1 !important;
}

.values .values-right .values-right-imgs .item-img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition-duration: .6s;
    -o-transition-duration: .6s;
    transition-duration: .6s;
}

.values .values-right .values-icon1 {
    width: 32rem;
    height: 32rem;
    position: absolute;
    top: 30rem;
    left: 30rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEUAAADlVDPkVDPjVDNl1EGuAAAAA3RSTlMAmtdpb+E5AAAAIElEQVQ4y2P4jwZGBQa1wNNQGIAKXGCAgVGBUQG6CwAAcXyaZwENR8MAAAAASUVORK5CYII=) center no-repeat;
    background-size: contain
}

.values .values-right .values-icon2 {
    width: 60rem;
    height: 60rem;
    position: absolute;
    bottom: 30rem;
    right: 30rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4AQMAAAADqqSRAAAABlBMVEUAAADjVDNvxC5wAAAAAXRSTlMAQObYZgAAAB9JREFUOMtjgIP/YDDKH+WP8kf5dOP/h4FR/ih/5PEBJhh7vb5GdUsAAAAASUVORK5CYII=) center no-repeat;
    background-size: contain
}