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

.banner{width: 100%;height: 100vh;background: url(../images/sybanner1.jpg) no-repeat center;background-size: cover;position:relative;}
.banner img{width: 100%;height: 100%;}
.sybanner-p{width:100%;position:absolute;left:0;top:16%;text-align:center;}
.sybanner-p h2{font-size: 50px;font-family: 'OPPOSans-Ver2-Medium';color: #fff;letter-spacing: 10px;}
.sybanner-p p{font-size: 35px;color: #fff;letter-spacing: 2px;}

.in-zp ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.in-zp ul li {
    width: 47%;
    display: inline-block;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: opacity .8s linear, transform .8s cubic-bezier(.19,1,.22,1);    
    will-change: transform, opacity;    
    margin-bottom: 7%;
}
.in-zp ul li:nth-child(2n) {
    transform: translate3d(0, 22%, 0);
}

.in-zp ul li .in-zp-img {
    width: 100%;
    height: 38.49vw;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    z-index: 1;
}
.in-zp ul li .in-zp-img figure {
    height: 48.5vw;
    will-change: transform;
    background: #000;
    width: 110%;
    position: absolute;
    left: -4.8%;
    top: -17.8%;
}
.in-zp ul li:nth-child(1) .in-zp-img figure,.in-zp ul li:nth-child(2) .in-zp-img figure,
.in-zp ul li:nth-child(3) .in-zp-img figure{height: 110%;top: -4.8%;}
.in-zp ul li:nth-child(1) .in-zp-img figure img,.in-zp ul li:nth-child(2) .in-zp-img figure img{top: -3%;}
.in-zp ul li:nth-child(3) .in-zp-img figure img{top: -3%;}
.in-zp ul li:nth-child(4) .in-zp-img figure,.in-zp ul li:nth-child(5) .in-zp-img figure,
.in-zp ul li:nth-child(6) .in-zp-img figure{width:100%;left:0;}
.in-zp ul li:nth-child(4) .in-zp-img figure img{top: 0;}
.in-zp ul li:nth-child(6) .in-zp-img figure img{top: 0;}
.in-zp ul li figure img {
    opacity: 0.9;
    width: 100%;
    height: auto;
    position: absolute; 
    top: -8%;
    left: 0;  
    right: 0;    
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.19,1,.22,1);
    will-change: transform;
}
.in-zp ul li .in-zp-img:hover figure img {
    transform: translate3d(0, 0, 0) scale(1.05) !important;
    opacity: 1;
    will-change: transform, opacity;
}

.in-zp ul li .in-zp-img:hover figure img{transform: translate3d(0, 0, 0) scale(1.05) !important;opacity: 1;will-change: transform, opacity;}
.in-zp ul li .in-zp-text{}
.in-zp ul li .in-zp-text h2{font-size: 32px;font-family: 'OPPOSans-Ver2-Medium';margin: 40px 0 30px;color: #fff;}
.in-zp ul li .in-zp-text p{font-size: 20px;color: #9e9e9e;line-height: 30px;}
.sy-zp .in-btn a{background:#fff;color:#000;}
.sy-zp .in-btn a:hover{background:#f51fb6;color:#fff;}
.sy-zp .in-btn a:after{display:none;}

#demo{width: 100%;overflow: hidden;}
.in-zyyw{width: 100%;justify-content: space-between;margin:0 0 8vw;display: flex;}
.in-zyyw .in-zyyw-l{width: 62%;color: #fff;}
.in-zyyw .in-zyyw-l .in-zyyw-text{width: 100%;margin-bottom: 12vw;}
.in-zyyw .in-zyyw-l .in-zyyw-text:last-of-type{margin-bottom: 0;}
.in-zyyw-l h3{font-size: 2.5vw;margin: 0 0 4vw;}
.in-zyyw-l p{font-size: 1.3vw;color: #9e9e9e;line-height: 2.3vw;} 
.in-zyyw .in-zyyw-r{width: 21%;display: flex;justify-content: right;flex-wrap: wrap;align-items: baseline;}
.in-zyyw .in-zyyw-r .in-zyyw-img{position: relative;margin-bottom: 12vw;width: 100%;}
.in-zyyw-r img{width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.19,1,.22,1);
    will-change: transform;
}
.in-zyyw .in-zyyw-r .in-zyyw-img:last-of-type{margin-bottom: 0;}

.wap-zyyw-1{display:none;}

.fade-up .in-btn a{margin: 0 auto 0;}
/*#wap-zyyw{display: none;}*/
.wap-zyyw ul{width: 100%;}
.wap-zyyw ul li{display: flex;margin-bottom: 4vw;justify-content: space-between;}
.wap-zyyw ul .wap-zyyw-l{color: #fff;width: 62%;margin-bottom: 120px;}
.wap-zyyw ul .wap-zyyw-l h3{font-size: 48px;margin: 0 0 4vw;font-family: 'OPPOSans-Ver2-Medium';}
.wap-zyyw ul .wap-zyyw-l p{font-size: 24px;color: #9e9e9e;line-height: 40px;}
.wap-zyyw ul .wap-zyyw-r{width: 21%;text-align: center;display: flex;justify-content: center;align-items: center;position: relative;}
.wap-zyyw ul .wap-zyyw-r img{max-width: 100%;position: absolute;top: -30%;/*top: -22%;*/left: 0;
    transition: transform .8s cubic-bezier(.19,1,.22,1);
    will-change: transform;
}
.wap-zyyw .in-btn a{margin: 0vw auto 0;}

.in-case{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: baseline;}
.in-case li{border-radius: 10px;background: #141414;padding: 2vw;width:42.6%;margin-bottom: 33px;}
.in-case li .in-case-div{color: #fff;text-align: left;}
.in-case li .in-case-div p{font-size: 20px;margin-bottom: 50px;line-height:30px;}
.in-case li .in-case-div span{color: #878787;font-size: 16px;display: block;}
.in-case li:last-child{transform: translate3d(0, -25px, 0);}
.in-case-span{width:100%;text-align:center;}
.in-case-span span{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    overflow: hidden;
    line-height: 30px;
    margin: 0 3px;
}
.tilesGrid{height: 44.5vw;margin-top: 10.1vw;position: relative;overflow: hidden;transition: all 0.3s;}
.tilesGrid .tiles-wrap{height: var(--tileswrap-height);
    width: 180%;
    position: absolute;
    left: 58%;
    top: 45%;
    transform: translate3d(-50%, -50%, 0) rotate(-26deg);
}
.tilesGrid .horizontal{display: flex; will-change: transform;transition: transform 0.2s ease;}
.tilesGrid .horizontal-1,.tilesGrid .horizontal-2 {transition: transform 0.2s ease;}
.tilesGrid .horizontal-1{margin-left: -8%;}
.tilesGrid .tiles-line-img{position: relative;overflow: hidden;margin:1vw 1vw;width: 55vw; height: 13vw;}
.tilesGrid .tiles-line-img .img-container{height: 100%;width: 100%;overflow: hidden;}
.tilesGrid .tiles-line-img .img-container img{
    width: auto;
    height: 115%;
    position: absolute;
    top: -38%;
    left: -2.5%;
    right: 0;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.19,1,.22,1);
    will-change: transform;
}
#tilesGrid-wap{display: none;}
.tilesGrid .horizontal .horizontal-l{}
.tilesGrid .horizontal .horizontal-r{}
.multipleColumn {overflow: hidden; position: relative; width: 100%;}
.multipleColumn .bd {overflow: hidden;}
.multipleColumn .bd ul {overflow: hidden;width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.multipleColumn .bd ul li {width: 16%; margin:20px 0;text-align: center;}
.multipleColumn .bd ul li .pic {text-align: center;height: 33px;display: flex; justify-content: center;align-items: center;}
.multipleColumn .bd ul li .pic img {width: auto;height: 23px; display: block;margin: 0 auto;}
.multipleColumn .bd ul li .pic-bmw img,.multipleColumn .bd ul li .pic-dell img,
.multipleColumn .bd ul li .pic-air img{height:33px;}
.multipleColumn .bd ul li .pic-kuaishou img,.multipleColumn .bd ul li .pic-huawei img,
.multipleColumn .bd ul li .pic-kuaishou img,.multipleColumn .bd ul li .pic-weilai img{height:28px;}
.multipleColumn .bd ul li .pic-kuaishou img,.multipleColumn .bd ul li .pic-xiaomi img{height:33px;}
.multipleColumn .bd ul li .pic-tencent img,.multipleColumn .bd ul li .pic-alibaba_1 img{height:18px;}
.multipleColumn .hd{width: 100%;}
.multipleColumn .hd ul{display: flex;justify-content: center;margin-top:30px;}
.multipleColumn .hd ul li{width: 5px;height: 5px;border-radius: 50%;background: #fff;display:inline-block;overflow:hidden;line-height:30px;
    margin: 0 3px;}


@media (min-width: 1024px){
    
}

@media (min-width: 2300px){
}

@media (max-width: 1900px){
    .in-case li:last-child {transform: translate3d(0, -57px, 0);}
}

@media (max-width: 1800px){
}

@media (max-width: 1700px){
    .in-case li:last-child {transform: translate3d(0, -55px, 0);}
}

@media (max-width: 1600px){
}

@media (max-width: 1550px){
}

@media (max-width: 1520px){
    .in-kh{margin-top: -2.5vw;}
}

@media (max-width: 1500px){
    
}

@media (max-width: 1450px){
    .multipleColumn .bd ul li .pic-bmw img, .multipleColumn .bd ul li .pic-dell img, .multipleColumn .bd ul li .pic-air img{height:28px;}
    .multipleColumn .bd ul li .pic-tencent img, .multipleColumn .bd ul li .pic-alibaba_1 img{height:17px;}
}

@media (max-width: 1400px){
    .in-zp ul li:nth-child(4) .in-zp-img figure img{top: -6%;}
    .in-zp ul li:nth-child(6) .in-zp-img figure img{top: -6%;}
}

@media (max-width: 1360px){
    .zp-lb h2 {font-size: 45px;}
    .in-case li:last-child {transform: translate3d(0, -55px, 0);}
}

@media (max-width: 1230px){

}

@media (max-width: 1200px){
    
}

@media (max-width: 1024px){
    .sybanner-p h2{letter-spacing: 4px;font-size: 8vw;}
    .sybanner-p p{font-size: 5vw;}
    .multipleColumn .bd ul li {width: 33%;}
    .in-zp ul li {width: 100%;margin-bottom: 15%;}
    .in-zp ul li .in-zp-img {height: 102.93vw;}
    .in-zp ul li:nth-child(2n) {transform: translate3d(0, 0%, 0);}
    .in-zp ul li:last-child{margin-bottom:0px;}
    .in-zp ul li figure img{top: -6%;}
    .in-zp ul li .in-zp-text h2{font-size: 5.25vw;line-height: 6.4vw;margin: 25px 0;}
    .in-zp ul li .in-zp-text p{font-size: 4vw;line-height: 6vw;}
    #wap-zyyw{display: block;}
    .wap-zyyw{display: none;}
    .wap-zyyw-1{display: block;}
    .wap-zyyw-div{width: 100%;margin-bottom: 20vw;}
    .wap-zyyw-div h3 {font-size: 7vw;line-height:7.33vw;margin-bottom: 6vw;color: #fff;}
    .wap-zyyw-div p {font-size: 4.3vw;line-height: 7vw;color: #9e9e9e;}
    .wap-zyyw-img{width: 100%;position: relative;height:300px;}
    .wap-zyyw-img img{max-width: 70%;
        position: absolute;
        top: -134%;
        left: 36%;
        transition: transform .8s cubic-bezier(.19,1,.22,1);
        will-change: transform;
    }
    .wap-zyyw .in-btn a {margin: 0vw auto 10vw;}
    .in-case li{width: 100%;}
    .in-case li .in-case-div p {font-size: 4vw;line-height: 6.5vw;}
    .in-case li .in-case-div span{font-size: 14px;}
    .in-case li:last-child {transform: translate3d(0, 0, 0);}
    #demo{display: none;}
	.wap-zyyw ul li{display: block;margin-bottom: 15vw;}
	.wap-zyyw ul .wap-zyyw-l,.wap-zyyw ul .wap-zyyw-r{width: 100%;}
	.wap-zyyw ul .wap-zyyw-r {height: 320px;  display: block;position: relative;width: 100%;}
    #tilesGrid-pc{display: block;}
    #tilesGrid-wap{display: none;}
    /*.tilesGrid .horizontal-1{margin-left: -162%;}*/
    /*.tilesGrid .horizontal-2{}*/
    /*.tilesGrid .tiles-line-img{height:20vw;}*/
    /*.tilesGrid .tiles-line-img .img-container img { top: -270%;}*/
    /*.tilesGrid .tiles-wrap{left: 171%;top: -58%;}*/
    .tilesGrid {height: 80.5vw;}
    .tilesGrid .tiles-wrap{width:230%;}
    .tilesGrid .tiles-line-img {width: 80vw;height: 30vw;}
    .tilesGrid .tiles-line-img .img-container img{top: -59%;left: -38%;}
    .in-zp ul li .in-zp-img figure {left: -5%;top: -26%;}
    .multipleColumn .bd ul li .pic-zijie img,.multipleColumn .bd ul li .pic-baidu img,
    .multipleColumn .bd ul li .pic-air img,.multipleColumn .bd ul li .pic-huawei img,
    .multipleColumn .bd ul li .pic-kuaishou img{height: 26px;}
    .multipleColumn .bd ul li .pic-bmw img,.multipleColumn .bd ul li .pic-dell img{height: 33px;}
    .in-zp ul li:nth-child(1) .in-zp-img figure, .in-zp ul li:nth-child(2) .in-zp-img figure,
    .in-zp ul li:nth-child(3) .in-zp-img figure {height: 110%;top: -6.8%;}
    .in-zp ul li:nth-child(4) .in-zp-img figure img{top: 0;}
    .in-zp ul li:nth-child(6) .in-zp-img figure img{top: 0;}
    
}

@media (max-width: 760px){
    .wap-zyyw-img img {top: -115%;left: 28%;}
    .in-case li{padding: 4vw;}
    .multipleColumn .bd ul li .pic-bmw img, .multipleColumn .bd ul li .pic-dell img{height:30px;}
}

@media (max-width: 640px){
    .wap-zyyw-img img {top: -100%;left: 28%;}
}

@media (max-width: 600px){
    .wap-zyyw-img img {top: -85%;left: 31%;max-width: 40%;}
    
    .multipleColumn .bd ul li .pic-bmw img,.multipleColumn .bd ul li .pic-dell img {height: 25px;}
    
    .in-case li {padding: 5vw;margin-bottom: 5vw;}
    
    .multipleColumn .bd ul li .pic-zijie img,.multipleColumn .bd ul li .pic-baidu img,
    .multipleColumn .bd ul li .pic-mic img,.multipleColumn .bd ul li .pic-kuaishou img,
    .multipleColumn .bd ul li .pic-huawei img{height: 20px;}
    .multipleColumn .bd ul li .pic-air img{height: 25px;}
    
    .wap-zyyw-div {margin-bottom: 14vw;}
}

@media (max-width: 510px){
    .wap-zyyw-img{height: 240px;}
    .multipleColumn .bd ul li .pic img{height: 20px;}
    .multipleColumn .bd ul li .pic-tencent img, .multipleColumn .bd ul li .pic-alibaba_1 img {height: 15px;}
    .multipleColumn .bd ul li .pic-bmw img,.multipleColumn .bd ul li .pic-dell img,
    .multipleColumn .bd ul li .pic-xiaomi img,.multipleColumn .bd ul li .pic-weilai img{height: 25px;}
    .multipleColumn .bd ul li .pic-zijie img,.multipleColumn .bd ul li .pic-baidu img,
    .multipleColumn .bd ul li .pic-huawei img,.multipleColumn .bd ul li .pic-kuaishou img{height: 22px;}
    .multipleColumn .bd ul li .pic-tcl img,.multipleColumn .bd ul li .pic-jingdong img,.multipleColumn .bd ul li .pic-oppo img
    ,.multipleColumn .bd ul li .pic-vivo img,.multipleColumn .bd ul li .pic-meituan img,.multipleColumn .bd ul li .pic-ibm img,
    .multipleColumn .bd ul li .pic-alibaba img,.multipleColumn .bd ul li .pic-ccb img{height: 18px;}
    .multipleColumn .bd ul li .pic-air img{height: 23px;}
}

@media (max-width: 480px){
    .wap-zyyw ul .wap-zyyw-l h3{font-size: 3.8vw;}
    .wap-zyyw ul .wap-zyyw-l p{font-size: 3.5vw;line-height: 6vw;}
    .wap-zyyw ul .wap-zyyw-r img {max-width: 65%;}
    .wap-zyyw-img img {top: -76%;left: 30%;}
    .wap-zyyw-div {margin-bottom: 0vw;}
    .wap-zyyw-img{height: 270px;}
    .multipleColumn .bd ul li .pic-tcl img, .multipleColumn .bd ul li .pic-jingdong img, .multipleColumn .bd ul li .pic-oppo img,
    .multipleColumn .bd ul li .pic-vivo img, .multipleColumn .bd ul li .pic-meituan img, .multipleColumn .bd ul li .pic-ibm img,
    .multipleColumn .bd ul li .pic-alibaba img, .multipleColumn .bd ul li .pic-ccb img {height: 16px;}
}

@media (max-width: 420px){
}

@media (max-width: 400px){
   .tilesGrid .tiles-line-img .img-container img {top: -67%;}
   
}

@media (max-width: 370px){
    .wap-zyyw-img {height: 240px;}
   
    .wap-zyyw-img {height: 220px;}
    .multipleColumn .bd ul li .pic img {height: 11px;}
    .multipleColumn .bd ul li .pic-bmw img, .multipleColumn .bd ul li .pic-dell img, .multipleColumn .bd ul li .pic-xiaomi img, .multipleColumn .bd ul li .pic-weilai img{height: 17px;}
    .multipleColumn .bd ul li .pic-zijie img, .multipleColumn .bd ul li .pic-baidu img, .multipleColumn .bd ul li .pic-huawei img,
    .multipleColumn .bd ul li .pic-kuaishou img,.multipleColumn .bd ul li .pic-bmw img,.multipleColumn .bd ul li .pic-air img
    {height: 17px;}
    .multipleColumn .bd ul li .pic-tcl img, .multipleColumn .bd ul li .pic-jingdong img, .multipleColumn .bd ul li .pic-oppo img,
    .multipleColumn .bd ul li .pic-vivo img, .multipleColumn .bd ul li .pic-meituan img, .multipleColumn .bd ul li .pic-ibm img,
    .multipleColumn .bd ul li .pic-alibaba img, .multipleColumn .bd ul li .pic-ccb img {height: 14px;}
    .multipleColumn .bd ul li .pic-mic img{height:16px;}
}