@charset "utf-8";
/* Css Document */

/* 通用样式 */
.future-opening-animation-box,
.future-content-box{
    width: 100%;
    height: 100vh;
}
.future-opening-animation-box img,
.future-content-box img,
.future_video_fix_box img,
.future-sub-menu img{
    display: block;
    width: 100%;
    height: auto;
}

/* 开场动画 */
.future-opening-animation-box{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    animation: tier 0.01s linear 6s 1 normal forwards;
}
.future-opening-animation-box-inner{
    width: 100%;
    height: 100%;
    position: relative;
}
.future-opening-animation-move{
    float: right;
    width: 125%;
    height: 100%;
    background: url(../images/future-opening-animation-img1.png) no-repeat center center / 100% 100%;
    position: relative;
    animation: displacement 3s linear 3s 1 normal forwards;
}
.future-opening-animation-move-car{
    width: 34%;
    height: auto;
    position: absolute;
    top: 71%;
    left: 15.5%;
    transform: translateY(-50%);
    opacity: 0;
    animation: vanish .5s linear 2s 1 normal forwards;
}
.future-opening-animation-static-text{
    width: 18.38%;
    height: 231px;
    position: absolute;
    top: 20%;
    right: 22%;
    animation: displacement1 1.2s linear 4s 1 normal forwards;
}
.future-opening-animation-static-text-inner{
    width: 100%;
    height: 0%;
    overflow: hidden;
    animation: heightChange .3s ease-in-out 1s 1 normal forwards;
}
@keyframes displacement {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(24%);
    }
    50%{
        transform: translateX(50%);
    }
    75%{
        transform: translateX(75%);
    }
    100%{
        transform: translateX(100%);
    }
}
@keyframes displacement1 {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(140%);
    }
    100%{
        transform: translateX(280%);
    }
}
@keyframes tier {
    0%{
        z-index: 1;
    }
    100%{
        z-index: 0;
    }
}
@keyframes vanish {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes heightChange {
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}

.opening-animation-skip {
    width: 10%;
    padding: 5px 0;
    text-align: center;
    position: absolute;
    top: 10%;
    right: 3%;
    cursor: pointer;
}
.opening-animation-skip a,
.opening-animation-skip .jiantou {
    float: left;
}
.opening-animation-skip a {
    font-size: 16px;
    color: #000;
    margin-right: 2%;
}
.opening-animation-skip .jiantou {
    width: 68px;
    height: 14px;
    display: flex;
    align-items: center;
}
.opening-animation-skip .jiantou p {
    width: 14px;
    height: 14px;
    position: relative;
    top: 0;
    animation: jiantou 2s 0s infinite;
    -webkit-animation: jiantou 2s 0s infinite;
    transform: rotate(135deg);
}
.opening-animation-skip .jiantou .jiantou1 {
    border-top: 5px solid #eeeeee;
    border-left: 5px solid #eeeeee;
    animation-delay: 0s;
}
.opening-animation-skip .jiantou .jiantou2 {
    border-top: 5px solid #d2d2d2;
    border-left: 5px solid #d2d2d2;
    left: -5px;
    animation-delay: -.2s;
}
.opening-animation-skip .jiantou .jiantou3 {
    border-top: 5px solid #a0a0a0;
    border-left: 5px solid #a0a0a0;
    left: -8px;
    animation-delay: -.4s;
}
.opening-animation-skip .jiantou .jiantou4 {
    border-top: 5px solid #313131;
    border-left: 5px solid #313131;
    left: -13px;
    animation-delay: -.6s;
}
@keyframes jiantou {
    0% {
        opacity: 0;
        transform: rotate(135deg) translate(16px, 16px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(135deg) translate(-16px, -16px);
    }
}
@-webkit-keyframes jiantou {
    0% {
        opacity: 0;
        transform: rotate(135deg) translate(16px, 16px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(135deg) translate(-16px, -16px);
    }
}


/* 二级导航 */
.future-sub-menu{
    width: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1;
}
.future-sub-menu-inner{
    width: 96.875%;
    /* height: 100%; */
    margin: 0 auto;
    /* position: relative; */
}
.future-sub-menu-ul-box{
    width: 100%;
}
.future-sub-menu-ul{
    float: right;
    /* width: 40%; */
}
.future-sub-menu-li{
    float: left;
    padding: 10px;
}
.future-sub-menu-li a{
    display: block;
    padding: 0 20px;
    /* line-height: 2.44; */
    line-height: 40px;
    font-size: .083rem;
    color: #fff;
}
.future-sub-menu-li-img a{
    padding: 0;
}
.future-sub-menu-li.active,
.future-sub-menu-li:hover{
    background: rgba(230,10,29,1);
}
.future-sub-menu-li-img.active,
.future-sub-menu-li-img:hover{
    background: none;
}

/* 主要内容 */
.section-inner{
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

.section1{
    background: url(../images/bg-future-content-section1-img.jpg) no-repeat center bottom / 100% 100%;
}
.section2{
    background: url(../images/bg-future-content-section2-img.jpg) no-repeat center bottom / 100% 100%;
}

.section0 .section-inner{
    max-width: 100%;
}
/* 视频浮层 */
.future_video_fix_box{
    width: 14.58%;
    padding: 10px;
    background: rgba(0,0,0,.5);
    border-radius: 16px;
    position: absolute;
    top: 12%;
    right: 1.5%;
    cursor: pointer;
    /* z-index: 2; */
}
.future_video_fix_img{
    width: 100%;
    /* border: 2px solid #fff; */
    /* border-radius: 8px; */
    /* position: relative; */
    margin-bottom: 14px;
}
.future_video_fix_text{
    line-height: 1.9;
    font-size: .094rem;
    color: #fff;
    text-align: center;
}

.section0-bg{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.section0-gallery-top-explain{
    width: 95%;
    position: absolute;
    left: 5%;
    bottom: 10%;
}
.section0-gallery-top-explain-img,
.section0-gallery-top-explain-text{
    float: left;
}
.section0-gallery-top-explain-img{
    width: 70px;
    margin-right: 20px;
}
.section0-gallery-top-explain-text.baise span,
.section0-gallery-top-explain-text.baise p{
    color: #fff;
}
.section0-gallery-top-explain-text.heise span,
.section0-gallery-top-explain-text.heise p{
    color: #333;
}
.section0-gallery-top-explain-text span{
    display: block;
    font-size: 18px;
    margin-bottom: 15px;
}
.section0-gallery-top-explain-text p{
    font-size: 32px;
}


/* 聚合页 */
.section-cont{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.section-text0,
.section-text1{
    margin: 0 auto;
}
.section0 .section-cont{
    width: 51.77%;
}
.section0 .section-text0{
    width: 16.50%;
    margin-bottom: 1%;
}
.section0 .section-text1{
    width: 55.68%;
    margin-bottom: 6%;
}
.section-column-box{
    width: 100%;
}
.section-column-li{
    float: left;
}
.section0 .section-column-li{
    width: 29.37%;
    margin-right: 5.9%;
    background: rgba(255,255,255,.8);
    border-radius: 23px;
    padding: 5% 0;
    transition-duration: .6s;
    position: relative;
    cursor: pointer;
}
.section0 .section-column-li:after{
    content: "了解详情";
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f00;
    color: #fff;
    box-sizing: border-box;
    padding: 25px;
    font-size: 18px;
    letter-spacing: 2px;
    position: absolute;
    top: 1%;
    right: 1%;
    opacity: 0;
    transition-duration: .6s;
}
.section0 .section-column-li:last-child{
    margin: 0;
}
.section0 .section-column-li:hover{
    background: rgba(255,255,255,1);
    border-top-right-radius: 128px;
}
.section0 .section-column-li:hover:after{
    opacity: 1;
}
.section0 .section-column-li .section-column-li-img,
.section0 .section-column-li .section-column-li-text{
    margin: 0 auto;
}
.section0 .section-column-li .section-column-li-img{
    width: 32%;
    margin-bottom: 11%;
}
.section0 .section-column-li .section-column-li-text{
    width: 63%;
}


/* 向下滚动 */
.future-scrolldow{
    /* width: .885%; */
    width: .075rem;
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
}
.future-scrolldow-img{
    width: 100%;
    margin-bottom: 3px;
}
.future-scrolldow-down{
    width: 80%;
    height: 20px;
    margin: 0 auto 5px;
    border: 1px solid #999;
    border-radius: 5px;
    position: relative;
}
.future-scrolldow-down:before{
    content: "";
    display: block;
    width: 2px;
    height: 4px;
    background: #999;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,0);
    animation: throb .8s linear 4s infinite normal;
}
@keyframes throb{
    0%{
        transform: translate(-50%,0);
    }
    100%{
        transform: translate(-50%,2px);
    }
}
.section1 .future-scrolldow-down{
    border: 1px solid #daa502;
}
.section1 .future-scrolldow-down:before{
    background: #daa502;
}

/* 匠心独具 */
.same-section .section-cont{
    width: 63.54%;
}
.section1 .section-text0{
    width: 22.33%;
    margin-bottom: 10%;
}
.section1 .section-text1{
    width: 75.35%;
    margin-bottom: 10%;
}
.same-section .section-column-li{
    width: 25%;
    height: 339px;
    transition-duration: .6s;
}
.same-section .section-column-li:nth-child(2),
.same-section .section-column-li:last-child{
    transform: translateY(-20%);
}
.same-section .section-column-li-img,
.same-section .section-column-li-img a{
    width: 100%;
    height: 100%;
}
.same-section .section-column-li-img a{
    display: block;
}
.section1 .section-column-li:first-child .section-column-li-img{
    background: url(../images/icon-section1-img1.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:nth-child(2) .section-column-li-img{
    background: url(../images/icon-section1-img2.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:nth-child(3) .section-column-li-img{
    background: url(../images/icon-section1-img3.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:last-child .section-column-li-img{
    background: url(../images/icon-section1-img4.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:first-child:hover .section-column-li-img{
    background: url(../images/icon-section1-img1-active.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:nth-child(2):hover .section-column-li-img{
    background: url(../images/icon-section1-img2-active.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:nth-child(3):hover .section-column-li-img{
    background: url(../images/icon-section1-img3-active.png) no-repeat center center / 100% auto;
}
.section1 .section-column-li:last-child:hover .section-column-li-img{
    background: url(../images/icon-section1-img4-active.png) no-repeat center center / 100% auto;
}

.future-top-box{
    width: 6%;
    padding: 10px 20px 10px 0;
    text-align: center;
    font-size: 16px;
    border-radius: 20px;
    position: absolute;
    top: 15%;
    right: 5%;
}
.future-top-box a{
    color: #fff;
}
.future-top-box:after{
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: 50%;
    right: 15%;
    transform: rotateZ(45deg) translateY(-50%);
}
.future-back-sec1{
    background: #cb9f2a;
}
.future-back-sec2{
    background: #ff9f41;
}


/* 共筑美好 */
/* .section2 .section-cont{
    width: 52.76%;
} */
.section2 .section-text0{
    width: 26%;
    margin-bottom: 1%;
}
.section2 .section-text1{
    width: 66%;
    margin-bottom: 10%;
}
/* .section2 .section-column-li{
    width: 33.07%;
    height: 354px;
    margin-right: .395%;
}
.section2 .section-column-li:last-child{
    margin: 0;
}
.section2 .section-column-li:nth-child(2){
    transform: translateY(-20%);
}
.section2 .section-column-li-img,
.section2 .section-column-li-img a{
    width: 100%;
    height: 100%;
}
.section2 .section-column-li-img a{
    display: block;
} */
.section2 .section-column-li:first-child .section-column-li-img{
    background: url(../images/icon-section2-img1.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:nth-child(2) .section-column-li-img{
    background: url(../images/icon-section2-img2.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:nth-child(3) .section-column-li-img{
    background: url(../images/icon-section2-img3.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:last-child .section-column-li-img{
    background: url(../images/icon-section2-img4.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:first-child:hover .section-column-li-img{
    background: url(../images/icon-section2-img1-active.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:nth-child(2):hover .section-column-li-img{
    background: url(../images/icon-section2-img2-active.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:nth-child(3):hover .section-column-li-img{
    background: url(../images/icon-section2-img3-active.png) no-repeat center center / 100% auto;
}
.section2 .section-column-li:last-child:hover .section-column-li-img{
    background: url(../images/icon-section2-img4-active.png) no-repeat center center / 100% auto;
}

@media screen and (max-width:1680px){
    .opening-animation-skip{
        top: 15%;
    }

    .future-opening-animation-static-text{
        top: 15%;
    }

    .section0 .section-column-li:after{
        width: 65px;
        height: 65px;
        padding: 16px;
        font-size: 14px;
    }
    .section0 .section-column-li:hover{
        border-top-right-radius: 90px;
    }

    /* .section1 .section-cont, */
    .section2 .section-cont{
        top: 60%;
    }
    .section1 .section-text0{
        margin-bottom: 6%;
    }
    .section1 .section-text1{
        margin-bottom: 5%;
    }
    .section2 .section-text1{
        margin-bottom: 7%;
    }

    .future-top-box{
        width: 8%;
        padding: 8px 20px 8px 0;
        top: 15%;
    }
}




@media screen and (min-width: 2160px){
    .future_video_fix_box{
        right: -5.5%;
    }
}