html,body{height: 100%;overflow: visible;}
.rel{position:relative}
.l{float:left}
.r{float:right}
.tac{text-align:center}
.fsi{font-style:italic}
.brc{border-radius:100%}
.aw,.ico{background-repeat:no-repeat;background-position:center top}

.back-top { display:none;}
.itop2 .back-top,.itop3 .back-top,.itop4 .back-top { display:block;}


@media screen and (min-width:1025px){
.scapic:hover img{-moz-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transform:scale(1.1)}
.transY{-webkit-transform:translateY(60px);-moz-transform:translateY(60px);-ms-transform:translateY(60px);transform:translateY(60px);opacity:0;visibility:hidden}
.transYF{-webkit-transform:translateY(-60px);-moz-transform:translateY(-60px);-ms-transform:translateY(-60px);transform:translateY(-60px);opacity:0;visibility:hidden}
.transX{-webkit-transform:translateX(60px);-moz-transform:translateX(60px);-ms-transform:translateX(60px);transform:translateX(60px);opacity:0;visibility:hidden}
.transXF{-webkit-transform:translateX(-60px);-moz-transform:translateX(-60px);-ms-transform:translateX(-60px);transform:translateX(-60px);opacity:0;visibility:hidden}
.active .transX,.active .transXF,.active .transY,.active .transYF{-webkit-transform:translate(0);-moz-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1;visibility:visible}
.trans{-webkit-transition:.7s ease-out;-moz-transition:.7s ease-out;transition:.7s ease-out}
.dly-1{-webkit-transition-delay:.1s;-moz-transition-delay:.1s;transition-delay:.1s}
.dly-2{-webkit-transition-delay:.2s;-moz-transition-delay:.2s;transition-delay:.2s}
.dly-3{-webkit-transition-delay:.3s;-moz-transition-delay:.3s;transition-delay:.3s}
.dly-4{-webkit-transition-delay:.4s;-moz-transition-delay:.4s;transition-delay:.4s}
.dly-5{-webkit-transition-delay:.5s;-moz-transition-delay:.5s;transition-delay:.5s}
.dly-6{-webkit-transition-delay:.6s;-moz-transition-delay:.6s;transition-delay:.6s}
.dly-7{-webkit-transition-delay:.7s;-moz-transition-delay:.7s;transition-delay:.7s}
.dly-8{-webkit-transition-delay:.8s;-moz-transition-delay:.8s;transition-delay:.8s}
.dly-9{-webkit-transition-delay:.9s;-moz-transition-delay:.9s;transition-delay:.9s}
.dly-10{-webkit-transition-delay:1s;-moz-transition-delay:1s;transition-delay:1s}
.dly-11{-webkit-transition-delay:1.1s;-moz-transition-delay:1.1s;transition-delay:1.1s}
.dly-12{-webkit-transition-delay:1.2s;-moz-transition-delay:1.2s;transition-delay:1.2s}
.active .am-lsi{-webkit-animation:lightSpeedIn .8s both;-moz-animation:lightSpeedIn .8s both;animation:lightSpeedIn .8s both}
.active .am-fiu{-webkit-animation:fadeInUp .8s both;-moz-animation:fadeInUp .8s both;animation:fadeInUp .8s both}
.active .am-fid{-webkit-animation:fadeInDown .8s both;-moz-animation:fadeInDown .8s both;animation:fadeInDown .8s both}
.active .am-fir{-webkit-animation:fadeInRight .8s both;-moz-animation:fadeInRight .8s both;animation:fadeInRight .8s both}
.active .am-fil{-webkit-animation:fadeInLeft .8s both;-moz-animation:fadeInLeft .8s both;animation:fadeInLeft .8s both}
.active .am-rvv{position:relative}
.active .am-rvv:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background:#000;-webkit-transform:scaleY(0);-moz-transform:scaleY(0);-ms-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:0 0 0;-moz-transform-origin:0 0 0;-ms-transform-origin:0 0 0;transform-origin:0 0 0;-webkit-animation:reveal-v 2s .2s cubic-bezier(0,0,.2,1) both;-moz-animation:reveal-v 2s .2s cubic-bezier(0,0,.2,1) both;animation:reveal-v 2s .2s cubic-bezier(0,0,.2,1) both}
.active .am-rvl{position:relative}
.active .am-rvl:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background:#000;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0 0;-moz-transform-origin:0 0 0;-ms-transform-origin:0 0 0;transform-origin:0 0 0;-webkit-animation:reveal-l 2s .2s cubic-bezier(0,0,.2,1) both;-moz-animation:reveal-l 2s .2s cubic-bezier(0,0,.2,1) both;animation:reveal-l 2s .2s cubic-bezier(0,0,.2,1) both}
.active .am-delay-1{-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s}

.active .am-delay-2{-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s}
.active .am-delay-3{-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}
.active .am-delay-4{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;animation-delay:.4s}
.active .am-delay-5{-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}
.active .am-delay-6{-webkit-animation-delay:.6s;-moz-animation-delay:.6s;animation-delay:.6s}
.active .am-delay-7{-webkit-animation-delay:.7s;-moz-animation-delay:.7s;animation-delay:.7s}
.active .am-delay-8{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;animation-delay:.8s}
.active .am-delay-9{-webkit-animation-delay:.9s;-moz-animation-delay:.9s;animation-delay:.9s}
.active .am-delay-10{-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s}
.active .am-delay-11{-webkit-animation-delay:1.1s;-moz-animation-delay:1.1s;animation-delay:1.1s}
.active .am-delay-12{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}
}
.bubbly-button:after,.bubbly-button:before{position:absolute;content:"";display:block;width:140%;height:100%;left:-20%;-webkit-transition:all ease-in-out .5s;-moz-transition:all ease-in-out .5s;transition:all ease-in-out .5s;background-repeat:no-repeat}
.bubbly-button:before{display:none;top:-75%;background-image:-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,transparent 20%,#0079c3 20%,transparent 30%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,transparent 10%,#0079c3 15%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%);background-image:-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,transparent 20%,#0079c3 20%,transparent 30%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,transparent 10%,#0079c3 15%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%);background-image:radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,transparent 20%,#0079c3 20%,transparent 30%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,transparent 10%,#0079c3 15%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%);background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%}
.bubbly-button:after{display:none;bottom:-75%;background-image:-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,transparent 10%,#0079c3 15%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%),-webkit-radial-gradient(circle,#0079c3 20%,transparent 20%);background-image:-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,transparent 10%,#0079c3 15%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%),-moz-radial-gradient(circle,#0079c3 20%,transparent 20%);background-image:radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,transparent 10%,#0079c3 15%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%),radial-gradient(circle,#0079c3 20%,transparent 20%);background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%}
@-webkit-keyframes topBubbles{
0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}
50%{background-position:0 80%,0 20%,10% 40%,20% 0,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}
100%{background-position:0 70%,0 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
@-moz-keyframes topBubbles{
0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}
50%{background-position:0 80%,0 20%,10% 40%,20% 0,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}
100%{background-position:0 70%,0 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
@keyframes topBubbles{
0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}
50%{background-position:0 80%,0 20%,10% 40%,20% 0,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}
100%{background-position:0 70%,0 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
@-webkit-keyframes bottomBubbles{
0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0}
50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0}
100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
@-moz-keyframes bottomBubbles{
0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0}
50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0}
100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
@keyframes bottomBubbles{
0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0}
50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0}
100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0 0,0 0,0 0,0 0,0 0,0 0}
}
@media screen and (min-width:1025px){
.bubbly-button:hover:before{display:block;-webkit-animation:topBubbles ease-in-out .75s forwards;-moz-animation:topBubbles ease-in-out .75s forwards;animation:topBubbles ease-in-out .75s forwards}
.bubbly-button:hover:after{display:block;-webkit-animation:bottomBubbles ease-in-out .75s forwards;-moz-animation:bottomBubbles ease-in-out .75s forwards;animation:bottomBubbles ease-in-out .75s forwards}
}
.dl{display:block;z-index:9;position:absolute;background:#fff;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.dl-b,.dl-t{width:0;height:1px}
.dl-l,.dl-r{height:0;width:1px}
.dl-l,.dl-t{left:0;top:0}
.dl-b,.dl-r{right:0;bottom:0}
@media screen and (min-width:1025px){
.dl-h:hover .dl-b,.dl-h:hover .dl-t{width:100%}
.dl-h:hover .dl-l,.dl-h:hover .dl-r{height:100%}
}
a{color:#666}
.scroll-down{cursor:pointer;border-radius:100%;width:48px;height:48px;border:1px solid #fff;overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;transition:.3s}
.scroll-down .aico{background-position:0 -56px;height:100%;-webkit-animation:scrollDown 2s infinite;-moz-animation:scrollDown 2s infinite;animation:scrollDown 2s infinite}
@-webkit-keyframes scrollDown{
0%{-webkit-transform:translateY(-10%);transform:translateY(-10%);opacity:1}
100%{-webkit-transform:translateY(40%);transform:translateY(40%);opacity:0}
}
@-moz-keyframes scrollDown{
0%{-moz-transform:translateY(-10%);transform:translateY(-10%);opacity:1}
100%{-moz-transform:translateY(40%);transform:translateY(40%);opacity:0}
}
@keyframes scrollDown{
0%{-webkit-transform:translateY(-10%);-moz-transform:translateY(-10%);transform:translateY(-10%);opacity:1}
100%{-webkit-transform:translateY(40%);-moz-transform:translateY(40%);transform:translateY(40%);opacity:0}
}


.content{height:100%;overflow:hidden}
.rowbg{position:relative;height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;opacity:.7;-webkit-transform:scale(.9);-moz-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9);-webkit-transition:.8s cubic-bezier(.445,.145,.355,1);-moz-transition:.8s cubic-bezier(.445,.145,.355,1);transition:.8s cubic-bezier(.445,.145,.355,1)}
.active .rowbg{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none}
.row-controls{position:fixed;left:0;top:50%;transform: translateY(-50%);z-index:10;width:46px;border-top:1px solid #fff;border-color:rgba(255,255,255,.5);-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.row-controls li{cursor:pointer;border-bottom:1px solid #fff;border-color:rgba(255,255,255,.8);position:relative;padding:12px 0 12px 16px;text-transform:capitalize;font-size:15px;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:rgba(255,255,255,.8);-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.row-controls li:before{content:"";position:absolute;left:0;top:50%;border-top:1px solid #fff;border-color:rgba(255,255,255,.8);width:6px;height:0;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.row-controls li.act{color:#cd050f;}
.row-controls li.act:before{left:0;width:12px;border-color:#cd050f;}
@media screen and (min-width:1025px){
.row-controls li:hover:before{border-color:#fff}
.row-controls li:hover{color:#fff}

}

@media all and (max-width:1024px) {
.row-controls { display:none;}
.rowbg { opacity:1;transform:none;}
}

.smouse { font-size:18px; color:#fff; line-height:31px;}
.smouse i{width:28px;height:31px; display:block; float:left; position:relative; background: url(../images/ling.png) no-repeat;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s; margin-right:6px;}
.smouse i:after{content:"";position:absolute;top:5px;left:50%;margin-left:-1px;width:2px;height:10px;background:#fff;-webkit-animation:mouse 1.6s infinite;-moz-animation:mouse 1.6s infinite;animation:mouse 1.6s infinite}


@-webkit-keyframes mouse{
0%{-webkit-transform:none;transform:none;opacity:1}
100%{-webkit-transform:translateY(15px);transform:translateY(15px);opacity:0}
}
@-moz-keyframes mouse{
0%{-moz-transform:none;transform:none;opacity:1}
100%{-moz-transform:translateY(15px);transform:translateY(15px);opacity:0}
}
@keyframes mouse{
0%{-webkit-transform:none;-moz-transform:none;transform:none;opacity:1}
100%{-webkit-transform:translateY(15px);-moz-transform:translateY(15px);transform:translateY(15px);opacity:0}
}



@keyframes banl{0%{transform: translateX(-200px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}}
@keyframes banr{0%{transform: translateX(200px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}}
@keyframes bant{0%{transform: translateY(-150px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}}
@keyframes banb{0%{transform: translateY(150px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}}
@keyframes banp{0%{transform: scale(.4);opacity: 0;}100%{transform: scale(1);opacity: 1;}}

.menu{position:fixed;left:0;top:50%;transform: translateY(-50%);z-index:10;width:46px;border-top:1px solid #fff;border-color:rgba(255,255,255,.5);-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.menu li{cursor:pointer;border-bottom:1px solid #fff;border-color:rgba(255,255,255,.8);position:relative;padding:12px 0 12px 16px;text-transform:capitalize;font-size:15px;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:rgba(255,255,255,.8);-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.menu li:before{content:"";position:absolute;left:0;top:50%;border-top:1px solid #fff;border-color:rgba(255,255,255,.8);width:6px;height:0;-webkit-transition:.4s;-moz-transition:.4s;transition:.4s}
.menu li a {color:#fff;}
.menu li a::before{left:0;width:12px;border-color:#fff;}

.menu .active a {color: #cd050f;}
.menu .active::before {border-color: #cd050f;}

@media all and (max-width:1024px) {.menu { display:none;}}

/*industry*/
.industry-retail{background-image: url("../../UploadFiles/bj/cybj1.jpg"); background-position: 50% 50%;}
.industry-supermarket{background-image: url("../../UploadFiles/bj/cybj2.jpg"); background-position: 50% 50%;}
.industry-store{background-image: url("../../UploadFiles/bj/cybj3.jpg"); background-position: 50% 50%;}
.industry-baking{background-image: url("../../UploadFiles/bj/cybj2.jpg"); background-position: 50% 50%;}
.industry-retail::before,.industry-supermarket::before,.industry-store::before,.industry-baking::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3);}
.rowbg::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);}
.industry {position: absolute; top: calc(55% - 60px); left: 50%; width: 80%; transform: translate(-50% , -50%);}
.industry p:nth-child(1) {font-size: 24px; line-height: 24px; color: #fff; text-align: left; font-weight: bold; letter-spacing: 10px;}
.industry p:nth-child(2) {width: 60%; margin: 20px 0; font-size: 18px; line-height: 32px; color: #fff; text-align: left; letter-spacing: 1px;}
.industry a:nth-child(3) {position: relative; display: block; width: 160px; padding: 0 20px; border: 2px solid #fff; font-size: 18px; line-height: 42px; color: #fff; text-align: left; box-sizing: border-box; transition: all 0.3s;}
.industry a:nth-child(3)::before {content: "+"; position: absolute; top: 50%; right: 20px; font-size: 18px; color: #fff; transform: translateY(-50%);}
.industry a:nth-child(3):hover {padding: 0 30px; border: 2px solid #cd050f; color: #fff; background-color:  #cd050f;}
.industry a:nth-child(3):hover::before {color: #fff;}
.industry-right p:nth-child(1),.industry-right p:nth-child(2) {text-align: right!important;}
.industry-right p:nth-child(2) {margin: 20px 0 20px auto;}
.industry-right a {margin: 0 0 0 auto;}
.mySwiper3 .swiper-pagination3 {bottom: 90px; width: 100%; height: 90px;}
.mySwiper3 .swiper-pagination3 span {width: 160px; height: 90px; margin: 0 10px!important; border-radius: 0; opacity: 0.6;} 
.mySwiper3 .swiper-pagination3 span img {width: 100%; height: 100%;}
.swiper-pagination-bullet-active {opacity: 1!important;}

.active .industry p:nth-child(1) {animation: bant 1s ease 0.2s both;}
.active .industry p:nth-child(2) {animation: banl 1s ease 0.2s both;}
.active .industry-right p:nth-child(2) {animation: banr 1s ease 0.2s both!important;}
.active .industry a:nth-child(3) {animation: banb 1s ease 0.2s both;}

.fp-watermark {display: none;}

@media(max-width:1660px){.industry p:nth-child(2) {width: 80%;}}
@media(max-width:1200px){.industry p:nth-child(1),.industry p:nth-child(2) {text-align: center!important;} .industry p:nth-child(2) {margin: 20px auto!important;} .industry a {margin: 0 auto!important;}}
@media(max-width:960px){.industry p:nth-child(2) {width: 100%;}}
@media(max-width:860px){.industry {width: 96%;} .mySwiper3 .swiper-pagination3 {bottom: 110px;}}
@media(max-width:740px){.industry {top: 50%;} .mySwiper3 .swiper-pagination3 {left: calc(50% - 160px); width: 340px; height: 200px;} .mySwiper3 .swiper-pagination3 span {margin: 5px!important;} .industry p:nth-child(1) {font-size: 20px; line-height: 20px;} .industry p:nth-child(2) {font-size: 16px; line-height: 30px;}}
@media(max-width:480px){.mySwiper3 .swiper-pagination3 {bottom: 120px;}}