.wrap .banner{ background-image: linear-gradient(to bottom,#002eb2 0%, #12c2e9 100%); background-size: 100%; width: 100%; height: 650px; }
.screen{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; width: 100%; height: 100%; background: rgba(41, 79, 189, 0.5); z-index: 2; }
.wrap .banner-content{ position: relative; z-index: 5; width: 764px; height: 100%; margin: 0 auto; padding-top: 5%; overflow: hidden; }
.wrap .banner-content img{ display: block; width: 72%; float: left; margin-top: 300px; opacity: 0; transition: margin-top 0.5s ease-out, opacity 0.3s ease-out; }
.wrap .banner-content h2{ font-size: 48px; float: left; margin-top:450px; opacity: 0; transition: margin-top 0.8s ease-out, opacity 0.3s ease-out; }
.wrap .banner-content p{ text-indent: 30px; }

.wrap .wrap-about .title{ width: 1200px; margin: 50px auto 30px; color: #000; }
.wrap .wrap-about .title h3{ text-align: center; font-size: 30px; line-height: 2; }
.wrap .wrap-about .title p{ text-indent: 30px; font-size: 16px; }

.wrap-about .about-menu{ width: 100%; height: 60px; border-bottom: 2px solid #f4f4f4; }
.wrap-about .about-menu ul{ width: 1200px; margin: 0 auto; text-align: left; color: #000; }
.wrap-about .about-menu ul li{ display: inline-block; font-size: 18px; line-height: 60px; padding: 0 3%; position: relative; cursor: pointer; }
.wrap-about .about-menu ul li:after{ content: ""; width: 0%; transition: width 0.3s ease-out; }
.wrap-about .about-menu ul li.active:after{ content: ""; width: 100%; height: 2px; background: #0052d9; position: absolute; bottom: -2px; left: 0; }
.wrap-about .store-list{ color: #000; display: none; }
.wrap-about .store-list.active{ display: block;}

.wrap .part1{ color: #000; width: 1200px; margin: 60px auto 80px; }
.wrap .part1 .hp-video__item {padding: 20px; box-sizing: border-box; }
.wrap .part1 .hp-video__video {position: relative;margin-bottom: 26px;padding-top: 68.5%; }
.wrap .part1 .hp-video__video #automation-video,
.wrap .part1 .hp-video__video #robot-video,
.wrap .part1 .hp-video__video #unloading-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%; }
.wrap .part1 .video-js .vjs-big-play-button {left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); }
.wrap .part1 .main-video{ width: 1200px; margin: 0 auto; }
.wrap .part1 .main-video span{ display: block; text-align: center; font-size: 28px; color: #282828; }
.wrap .part1 .hp-video__item span{ display: block; text-align: center; font-size: 24px; color: #282828; }

.wrap .part1 p{ font-size: 16px; text-indent: 35px; }

.wrap .part2{ color: #000; }
.wrap .part2 .bg-gray{ background: #f8f8f8; }
.wrap .part2 .con{ width: 1200px; margin: 0 auto; overflow: hidden; padding: 50px 0px; }
.wrap .part2 .con .left{ width: 30%; float: left; margin-top: 30px; }
.wrap .part2 .con .left h4{ font-size: 30px; margin-bottom: 20px; }
.wrap .part2 .con .left p{ font-size: 16px; }
.wrap .part2 .con ul{ width: 70%; float: left; }
.wrap .part2 .con ul li{ display: inline-block; width: 19%; padding: 30px; box-sizing: border-box; border-radius: 5px; text-align: center; margin-bottom: 20px; }
.wrap .part2 .con ul li:hover{ background: #f1f1f1; }
.wrap .part2 .con ul li img{ border-radius: 5px; }
.wrap .part2 .con ul li p{ font-size: 16px; }

.wrap .part2 .con.retail ul li{ width: 33%; }
.wrap .part2 .con.brand ul li{ width: 33%; }
.wrap .part2 .con.clothes ul li{ width: auto; }
.wrap .part2 .con.beauty ul li{ width: auto; }
.wrap .part2 .con.food ul li{ width: auto; }

.wrap .part3{ width: 1200px; margin: 60px auto; color: #000; }
.wrap .part3 .con{ background: #f5f5f5; box-sizing: border-box; height: 65px; overflow: hidden; transition: height 0.3s ease-out; margin: 10px 0; }
.wrap .part3 .con .con-tit{ overflow: hidden; padding: 15px 30px 0; }
.wrap .part3 .con .con-tit span{ display: block; border-top: 10px solid #3f3f3f; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; float: right; margin-top: 15px; cursor: pointer; }
.wrap .part3 .con h4{ font-size: 24px; line-height: 1.5; position: relative; float: left; }
.wrap .part3 .con .con-txt{ padding: 20px 30px 30px; box-sizing: border-box; }
.wrap .part3 .con dl dt{ font-size: 24px; line-height: 1.5; }
.wrap .part3 .con dl dd{ font-size: 16px; line-height: 2; text-indent: 30px; position: relative; }
.wrap .part3 .con dl dd:before{ content: ""; display: block; width: 10px; height: 10px; background: #3f3f3f; border-radius: 50%; position: absolute; top: 12px; left: 8px; }

.wrap .part4{ width: 1200px; margin: 60px auto; }
.wrap .part4 .con{ background: url(../images/map_china.png) center no-repeat; height: 650px; position: relative; }
.wrap .part4 .con h5{ color: #000; text-align: center; }
.wrap .part4 .con .dress1{ position: absolute; top: 356px; right: 320px; width: 62px; height: 30px; }
.wrap .part4 .con .dress2{ position: absolute; top: 497px; right: 408px; width: 62px; height: 30px; }
.wrap .part4 .con .dress3{ position: absolute; top: 520px; right: 374px; width: 62px; height: 30px; }
.wrap .part4 .con .dress4{ position: absolute; top: 422px; right: 440px; width: 62px; height: 30px; }
.wrap .part4 .con .dress5{ position: absolute; top: 435px; right: 592px; width: 62px; height: 30px; }
.wrap .part4 .con span{ display: block; }
.wrap .part4 .con .dot{ width: 5px; height: 5px; background: #294fbd; border-radius: 50%; position: absolute; top: 15px; left: 15px; }
.wrap .part4 .con .round{ width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 12px #294fbd, 0 0 20px #294fbd inset; opacity: 0.12; border: 2px solid #294fbd; background: none; animation: wave 2s ease-out both; animation-iteration-count: infinite; position: absolute; top: 3px; left: 2px; }
.wrap .part4 .con p{ color: #000; position: absolute; top: 0; right: 0; }

.wrap .part4 .con .dress4 .dot, .wrap .part4 .con .dress5 .dot{ background: rgb(255, 94, 0); }
.wrap .part4 .con .dress4 .round, .wrap .part4 .con .dress5 .round{ box-shadow: 0 0 12px rgb(255, 94, 0), 0 0 20px rgb(255, 94, 0) inset; border: 2px solid rgb(255, 94, 0) }

.wrap .part4 .con .round.dot-12s{ animation-delay: 1.2s; }
.wrap .part4 .con .round.dot-16s{ animation-delay: 1.6s; }
.wrap .part4 .con .round.dot-2s{ animation-delay: 2s; }

@keyframes wave{
    0% {
        -webkit-transform:scale(0);
        -moz-transform:scale(0);
        -o-transform:scale(0);
        transform:scale(0);
        opacity: 1
    }
    100%{
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);
        opacity: 0
    }
}

@-moz-keyframes wave{
    0% {
        -webkit-transform:scale(0);
        -moz-transform:scale(0);
        -o-transform:scale(0);
        transform:scale(0);
        opacity: 1
    }
    100%{
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);
        opacity: 0
    }
}

@keyframes warn{0%{opacity:1}100%{opacity:0}}

.wrap .part4 .code{ width: 1000px; margin: 0 auto; text-align: center; color: #000; }
.wrap .part4 .code li{ display: inline-block; width: 49%;  }
.wrap .part4 .code li img{ width: 33%; border: 3px solid #c3c3c3; border-radius: 5px; }
.wrap .part4 .code li h4{ font-size: 24px; }
.wrap .part4 .code li h5{ font-size: 18px; line-height: 2; font-family: 'PingFang SC'; }

.wrap .part4 .con .position{ position: absolute; top: 30px; left: 0; width: 288px; border: 1px solid #90deff; padding: 10px; display: none; }
.wrap .part4 .con .position:before{ content: ' '; display: block; position: absolute; top: -19px; left: 10px; border-top: 10px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #90deff; }
.wrap .part4 .con .position:after{ content: ' '; display: block; position: absolute; top: -19px; left: 10px; border-top: 12px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; }