@charset "utf-8"; /* 官网首页轮播图样式 */ .ty{width:1200px;margin:0 auto;height:434px;display:block;overflow:hidden;position:relative;} .ty img{display:block;position:absolute;} .banner-btn{display:block;width:1200px;margin:0 auto;position:relative;top:38%;} .banner-btn a{display:block;width:60px;height:130px;overflow:hidden;cursor:pointer; position:absolute;-webkit-transition: 0.8s;transition: 0.8s;-moz-transition: 0.8s;-ms-transition: 0.8s;-o-transition: 0.8s;z-index:9} .banner-btn a.prevBtn{left:0px;background:url(../../resource/images/common/banner_left.png) center center no-repeat;} .banner-btn a.prevBtn:hover{background-image:url(../../resource/images/common/banner_lefth.png);} .banner-btn a.nextBtn{right:0px;background:url(../../resource/images/common/banner_right.png) center center no-repeat;} .banner-btn a.nextBtn:hover{background-image:url(../../resource/images/common/banner_righth.png)} .banner-circle{display:block;background:#f8f8f8;width:100%;height:40px;position:relative;} .banner-circle li{position:absolute;left:50%;margin-left:-88px;} .banner-circle li a{display:block;width:10px;height:10px;float:left;margin-top:12px;cursor:pointer; border:solid 1px #00a8ee;border-radius:50%;margin-right:10px;} .banner-circle li .noli{display:block;background:#00a8ee;width:10px;height:10px;} .bannerbox{display:block;overflow:hidden;} .banner{display:block;overflow:hidden;height:434px;margin-top:126px;} .banner ul li{display:block;overflow:hidden;width:100%;height:434px;} .banner ul li.li01{background:#302b6f;} .banner ul li.li01 a{background:url(../../resource/images/single/Micro/weishi/Micro_bj.png) no-repeat;width:1920px;position:absolute;left:50%;margin-left:-960px;z-index:1;overflow:hidden;} .banner ul li.li02{background:url(../../resource/images/single/border/c_banner.png);} .banner ul li.li03 a{background:url(../../resource/images/single/KTV/ktv_bg.png) no-repeat;width:1920px;height:434px;position:absolute;left:50%;margin-left:-960px;z-index:1;overflow:hidden;} .banner ul li.li04{background:#ffc400;} .banner ul li.li04 a{background:url(../../resource/images/single/grogshop/hote_bj.png) no-repeat;width:1920px;position:absolute;left:50%;margin-left:-960px;z-index:1;overflow:hidden;} .banner ul li.li05{background:#45aeff;} .banner ul li.li06{background:#fddf50 url(../../resource/images/single/cashier/syo2o_bj.png);} .banner ul li.li07{background:#fddf50 url(../../resource/images/single/81/ban/img_bg.png);} /*8.1*/ .banner_81v dl{float:left;margin-top:80px;width:40%;margin-left:70px;} .banner_81v dl dd{display:block;} .banner_81v dl .dd01{display:block;} .banner_81v dl .dd01 img{display:block;-webkit-animation: b2 1s 1s ease both;-moz-animation: b2 1s 1s ease both;animation: b2 1s 1s ease both;} .banner_81v dl .dd02{display:block;font-size:24px;color:#fff;line-height:38px;margin-top:60px;-webkit-animation: b2 1s 1.2s ease both;-moz-animation: b2 1s 1.2s ease both;animation: b2 1s 1.2s ease both;} .banner_81v dl .dd03{display:block;font-size:24px;color:#fff;line-height:60px;margin-top:30px;width:220px;height:60px;border:1px solid #fff;border-radius:4px;text-align:center;-webkit-animation: b2 1s 1.4s ease both;-moz-animation: b2 1s 1.4s ease both;animation: b2 1s 1.4s ease both;} .banner_81v .right81{float:right;width:50%;position:relative;-webkit-animation: a8 1.4s 1.2s ease both;-moz-animation: a8 1.4s 1.2s ease both;animation: a8 1.4s 1.2s ease both;} .banner_81v .right81 span{position:absolute;} .banner_81v .right81 .span1{left:208px;top:50px;z-index:10;} .banner_81v .right81 .span2{top:0px;} /*微视系统*/ .banner_micro dd{display:block;position:absolute;} .banner_micro .dd01{left:265px;top:36px;-webkit-animation:flipinX 1s 0.1s ease both; animation:flipinX 1s 0.1s ease both;} .banner_micro .dd02{left:235px;top:173px;z-index:10;-webkit-animation:flipinX 1s 1s ease both; animation:flipinX 1s 1s ease both;} .banner_micro .dd04{left:158px;top:62px;-webkit-animation:flipinX 1s 0.3s ease both; animation:flipinX 1s 0.3s ease both;} .banner_micro .dd05{left:195px;top:150px;-webkit-animation:flipinX 1s 0.5s ease both; animation:flipinX 1s 0.5s ease both;} .banner_micro .dd06{left:115px;top:228px;-webkit-animation:flipinX 1s 0.7s ease both; animation:flipinX 1s 0.7s ease both;} .banner_micro .dd03{left:370px;bottom:80px;-webkit-animation:flipinX 1s 2s ease both; animation:flipinX 1s 2s ease both;} .banner_micro .dd07{right:450px;top:98px;z-index:9;-webkit-animation: b2 1s 1.1s ease both;-moz-animation: b2 1s 1.1s ease both;animation: b2 1s 1.1s ease both;} .banner_micro .dd08{right:300px;top:78px;z-index:10;-webkit-animation:flipinX 1s 1.8s ease both; animation:flipinX 1s 1.8s ease both;} .banner_micro .dd09{right:535px;top:289px;-webkit-animation: b2 1s 1.3s ease both;-moz-animation: b2 1s 1.3s ease both;animation: b2 1s 1.3s ease both;} .banner_micro .dd10{right:250px;top:205px;-webkit-animation: b2 1s 1.5s ease both;-moz-animation: b2 1s 1.5s ease both;animation: b2 1s 1.5s ease both;} /*跨境电商*/ .banner_border dl{display:block;float:left;} .banner_border dl dd{display:block;position:absolute;} .banner_border dl dd.dd1{left:298px;top:155px;z-index:2; -webkit-animation:ban3 1.5s 2s ease both;-moz-animation:ban3 1.5s 2s ease both;animation:ban3 1.5s 2s ease both;} .banner_border dl dd.dd2{left:40px;top:60px;z-index:1; -webkit-animation: ban2 2s 0s linear normal both ;-moz-animation: ban2 2s 0s linear normal both ;animation: ban2 2s 0s linear normal both ;} .banner_border dl dd.dd3{left:95px;bottom:70px;z-index:2; -webkit-animation: ban1 3s 0.5s ease both;-moz-animation: ban1 3s 0.5s ease both;animation: ban1 3s 0.5s ease both;} .banner_border dl dd.dd4{left:0px;top:20px; -webkit-animation:a2 1.5s 1s ease both;-moz-animation:a2 1.5s 1s ease both;animation:a2 1.5s 1s ease both;} .bor_div{display:block;float:right;margin-right:85px;margin-top:85px;} .bor_div h1{display:block;font-size:45px;font-weight:bold;color:#fffd68; -webkit-animation:a8 1.5s 2.1s ease both;-moz-animation:a8 1.5s 2.1s ease both;animation:a8 1.5s 2.1s ease both;} .bor_div p{display:block;font-size:22px;line-height:45px;color:#fff;margin-top:15px; -webkit-animation:b2 1.5s 2.3s ease both;-moz-animation:b2 1.5s 2.3s ease both;animation:b2 1.5s 2.3s ease both;} .bor_div p b{font-size:28px;color:#fffd68;padding:0 6px;} .bor_div span{display:block;width:150px;height:42px;line-height:42px;text-align:center;font-size:20px;color:#0071bd;background:#fffd68;border-radius:3px;margin-top:10px; -webkit-animation:b2 1.5s 2.5s ease both;-moz-animation:b2 1.5s 2.5s ease both;animation:b2 1.5s 2.5s ease both;} @-webkit-keyframes ban1{0%{left:1200px;} 100%{left:95px;}} @-moz-keyframes ban1{0%{left:1200px;} 100%{left:95px;}} @keyframes ban1{0%{left:1200px;} 100%{left:95px;}} @-webkit-keyframes ban2{0%{opacity: 0;-webkit-transform: translateY(-2000px);} 60%{opacity: 1;-webkit-transform: translateY(30px);} 80%{-webkit-transform: translateY(-10px);} 100%{-webkit-transform: translateY(0);}} @-moz-keyframes ban2{0%{opacity: 0;-moz-transform: translateY(-2000px);} 60%{opacity: 1;-moz-transform: translateY(30px);} 80%{-moz-transform: translateY(-10px);} 100%{-moz-transform: translateY(0);}} @-o-keyframes ban2{0%{opacity: 0;-o-transform: translateY(-2000px);} 60%{opacity: 1;-o-transform: translateY(30px);} 80%{-o-transform: translateY(-10px);} 100%{-o-transform: translateY(0);}} @keyframes ban2{0%{opacity: 0;transform: translateY(-2000px);} 60%{opacity: 1;transform: translateY(30px);} 80%{transform: translateY(-10px);} 100%{transform: translateY(0);}} @-webkit-keyframes ban3{ from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} from{opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0);} 60%{opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0);} 75%{-webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);} 90%{-webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);} to{-webkit-transform: none; transform: none;} } @keyframes ban3{ from, 60%, 75%, 90%, to{-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} from{opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0);} 60%{opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0);} 75%{-webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);} 90%{-webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);} to{-webkit-transform: none; transform: none;} } /*O2OKTV*/ .banner_KTV dl{display:block;} .banner_KTV dl dd{display:block;position:absolute;} .banner_KTV dl dd.dd_1{left:494px;top:0;z-index:11;-webkit-animation: b2 1s 0.5s ease both;-moz-animation: b2 1s 0.5s ease both;animation: b2 1s 0.5s ease both;} .banner_KTV dl dd.dd_2{left:206px;top:0;z-index:11;-webkit-animation: b2 1s 0.5s ease both;-moz-animation: b2 1s 0.5s ease both;animation: b2 1s 0.5s ease both;} .banner_KTV dl dd.dd_3{left:404px;bottom:130px;z-index:14;font-size:44px;color:#fff;font-weight:bold;-webkit-animation:flipinX 2s 1s ease both; animation:flipinX 2s 1s ease both;} .banner_KTV dl dd.dd_3 b{font-size:44px;color:#f51717;font-weight:bold;} .banner_KTV dl dd.dd_4{left:402px;bottom:94px;z-index:14;font-size:22px;color:#fff;-webkit-animation:flipinX 2s 1.5s ease both; animation:flipinX 2s 1.5s ease both;} .banner_KTV em{display:block;width:166px;height:36px;background:#fff;border-radius:2px;color:#555;font-size:20px;text-align:center;line-height:36px;position:absolute; left:518px;bottom:26px;z-index:12;-webkit-animation:flipinX 2s 2s ease both; animation:flipinX 2s 2s ease both;} .span_hote{display:block;position:absolute;left:0px;bottom:-4px;z-index:11; -webkit-animation: b2 1s 0.1s ease both;-moz-animation: b2 1s 0.1s ease both;animation: b2 1s 0.1s ease both;} /*O2O酒店*/ .banner_grogshop dl{display:block;} .banner_grogshop dl dd{display:block;position:absolute;} .banner_grogshop dl dd.dd_1{left:288px;top:26px;z-index:11; -webkit-animation: b2 1s 0.7s ease both;-moz-animation: b2 1s 0.7s ease both;animation: b2 1s 0.7s ease both;} .banner_grogshop dl dd.dd_2{left:625px;top:16px; -webkit-animation: b2 1s 0.9s ease both;-moz-animation: b2 1s 0.9s ease both;animation: b2 1s 0.9s ease both;} .banner_grogshop dl dd.dd_3{left:832px;top:110px;z-index:10; -webkit-animation: b2 1.5s 1.5s ease both;-moz-animation: b2 1.5s 1.5s ease both;animation: b2 1.5s 1.5s ease both;} .banner_grogshop dl dd.dd_4{left:420px;top:34px;z-index:10; -webkit-animation: t2 1.5s 0.9s ease both;-moz-animation: t2 1.5s 0.9s ease both;animation: t2 1.5s 0.9s ease both;} .banner_grogshop dl dd.dd_5{left:180px;top:77px;z-index:10; -webkit-animation: t2 2s 1.1s ease both;-moz-animation: t2 2s 1.1s ease both;animation: t2 2s 1.1s ease both;} .banner_grogshop dl dd.dd_6{left:180px;top:34px;z-index:9; -webkit-animation:flipinX 2s 2.5s ease both; animation:flipinX 2s 2.5s ease both;} .banner_grogshop dl dd.dd_7{left:50px;top:120px;z-index:11; -webkit-animation: b2 1s 0.5s ease both;-moz-animation: b2 1s 0.5s ease both;animation: b2 1s 0.5s ease both;} .banner_grogshop dl dd.dd_8{left:403px;bottom:155px;z-index:13;-webkit-animation:flipinX 2s 1s ease both; animation:flipinX 2s 1s ease both;} .banner_grogshop dl dd.dd_9{left:394px;bottom:120px;z-index:12;-webkit-animation:flipinX 2s 1.1s ease both; animation:flipinX 2s 1.1s ease both;} .banner_grogshop dl dd.dd_10{font-size:24px;color:#fff;left:360px;bottom:64px;z-index:12; -webkit-animation:flipinX 2s 1.5s ease both; animation:flipinX 2s 1.5s ease both;} .banner_grogshop em{display:block;width:166px;height:36px;background:#fff;border-radius:2px;color:#555;font-size:20px;text-align:center;line-height:36px;position:absolute; left:518px;bottom:14px;z-index:12;-webkit-animation:flipinX 2s 2s ease both; animation:flipinX 2s 2s ease both;} .span_hote{display:block;position:absolute;left:0px;bottom:-4px;z-index:11; -webkit-animation: b2 1s 0.1s ease both;-moz-animation: b2 1s 0.1s ease both;animation: b2 1s 0.1s ease both;} /*线下多门店商城*/ .banner_offline span{display:block;width:550px;height:auto;float:right;margin-top:56px;} .banner_offline span .img1{display:block;float:right;width:490px;height:auto;margin-left:40px; -webkit-animation: b2 1s 1s ease both;-moz-animation: b2 1s 1s ease both;animation: b2 1s 1s ease both;} .banner_offline dl{display:block;float:left;width:460px;margin-top:114px;margin-left:60px;} .banner_offline dl dt{display:block;font-size:48px;color:#fff;font-weight:bold; -webkit-animation: a8 1s 0.2s ease both;-moz-animation: a8 1s 0.2s ease both;animation: a8 1s 0.2s ease both;} .banner_offline dl .sy_dd{display:block;font-size:25px;color:#fff;margin:16px 0px; -webkit-animation: a8 1s 0.3s ease both;-moz-animation: a8 1s 0.3s ease both;animation: a8 1s 0.3s ease both;} .banner_offline dl .sy_text{display:black;overflow:hidden;} .banner_offline dl .sy_text em{display:block;float:left;margin-right:20px;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:18px;border-radius:5px;background:#4754ff;} .banner_offline dl .sy_text #em1{-webkit-animation: b2 1s 0.4s ease both;-moz-animation: b2 1s 0.4s ease both;animation: b2 1s 0.4s ease both;} .banner_offline dl .sy_text #em2{-webkit-animation: b2 1s 0.5s ease both;-moz-animation: b2 1s 0.5s ease both;animation: b2 1s 0.5s ease both;} .banner_offline dl .sy_text #em3{-webkit-animation: b2 1s 0.6s ease both;-moz-animation: b2 1s 0.6s ease both;animation: b2 1s 0.6s ease both;} .banner_offline dl .bnt{display:block;width:150px;height:42px;background:#fff;line-height:42px;font-size:20px;text-align:center;border-radius:5px;color:#4754ff;margin-top:20px; -webkit-animation: b2 1s 0.7s ease both;-moz-animation: b2 1s 0.7s ease both;animation: b2 1s 0.7s ease both;} /*收银O2O*/ .banner_syo2o .img1{display:block;float:left;width:490px;height:auto;margin-top:25px;margin-left:40px; -webkit-animation: b2 1s 1s ease both;-moz-animation: b2 1s 1s ease both;animation: b2 1s 1s ease both;} .banner_syo2o dl{display:block;float:right;width:600px;margin-top:80px;} .banner_syo2o dl dt{display:block;font-size:48px;color:#e89115;font-weight:bold; -webkit-animation: a8 1s 0.2s ease both;-moz-animation: a8 1s 0.2s ease both;animation: a8 1s 0.2s ease both;} .banner_syo2o dl .sy_dd{display:block;font-size:25px;color:#e89115;margin:10px 0px; -webkit-animation: a8 1s 0.3s ease both;-moz-animation: a8 1s 0.3s ease both;animation: a8 1s 0.3s ease both;} .banner_syo2o dl .sy_text{display:black;overflow:hidden;} .banner_syo2o dl .sy_text em{display:block;float:left;margin-right:20px;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:18px;border-radius:5px;background:#e89115;} .banner_syo2o dl .sy_text #em1{-webkit-animation: b2 1s 0.4s ease both;-moz-animation: b2 1s 0.4s ease both;animation: b2 1s 0.4s ease both;} .banner_syo2o dl .sy_text #em2{-webkit-animation: b2 1s 0.5s ease both;-moz-animation: b2 1s 0.5s ease both;animation: b2 1s 0.5s ease both;} .banner_syo2o dl .sy_text #em3{-webkit-animation: b2 1s 0.6s ease both;-moz-animation: b2 1s 0.6s ease both;animation: b2 1s 0.6s ease both;} .banner_syo2o dl .bnt{display:block;width:150px;height:42px;background:#fff;line-height:42px;font-size:20px;text-align:center;border-radius:5px;color:#e89115;margin-top:20px; -webkit-animation: b2 1s 0.7s ease both;-moz-animation: b2 1s 0.7s ease both;animation: b2 1s 0.7s ease both;} @-webkit-keyframes flipinX{ 0%{-webkit-transform:rotateX(90deg);opacity:0;} 40%{-webkit-transform:rotateX(-10deg);} 70%{-webkit-transform:rotateX(10deg);} 100%{-webkit-transform:rotateX(0);opacity:1;} } @-moz-keyframes flipinX{ 0%{-moz-transform:rotateX(90deg);opacity:0;} 40%{-moz-transform:rotateX(-10deg);} 70%{-moz-transform:rotateX(10deg);} 100%{-moz-transform:rotateX(0);opacity:1;} } @-ms-keyframes flipinX{ 0%{-ms-transform:rotateX(90deg);opacity:0;} 40%{-ms-transform:rotateX(-10deg);} 70%{-ms-transform:rotateX(10deg);} 100%{-ms-transform:rotateX(0);opacity:1;} } @keyframes flipinX{ 0%{transform:rotateX(90deg);opacity:0;} 40%{transform:rotateX(-10deg);} 70%{transform:rotateX(10deg);} 100%{transform:rotateX(0);opacity:1;} } @-webkit-keyframes b13{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-moz-keyframes b13{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-o-keyframes b13{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @keyframes b13{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-webkit-keyframes t1{ 0%{opacity: 0;transform:translateX(1000px)} 100%{opacity: 1;transform:translateX(0)} } @-moz-keyframes t1{ 0%{opacity: 0;transform:translateX(1000px)} 100%{opacity: 1;transform:translateX(0)} } @-o-keyframes t1{ 0%{opacity: 0;transform:translateX(1000px)} 100%{opacity: 1;transform:translateX(0)} } @keyframes t1{ 0%{opacity: 0;transform:translateX(1000px)} 100%{opacity: 1;transform:translateX(0)} } @-webkit-keyframes t2{ 0%{opacity: 0;transform:translateX(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-moz-keyframes t2{ 0%{opacity: 0;transform:translateX(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-o-keyframes t2{ 0%{opacity: 0;transform:translateX(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @keyframes t2{ 0%{opacity: 0;transform:translateX(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-webkit-keyframes b1{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateY(0)} } @-moz-keyframes b1{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateY(0)} } @-o-keyframes b1{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateY(0)} } @keyframes b1{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateY(0)} } @-webkit-keyframes b3{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-moz-keyframes b3{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-o-keyframes b3{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @keyframes b3{ 0%{opacity: 0;transform:translateY(-1000px)} 100%{opacity: 1;transform:translateX(0)} } @-webkit-keyframes b4{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateX(0)} } @-moz-keyframes b4{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateX(0)} } @-o-keyframes b4{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateX(0)} } @keyframes b4{ 0%{opacity: 0;transform:translateY(1000px)} 100%{opacity: 1;transform:translateX(0)} } @-webkit-keyframes a1{ 0%{opacity: 0;-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);} } @-moz-keyframes a1{ 0%{opacity: 0;-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);} } @keyframes a1{ 0%{opacity: 0;-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);} } @-webkit-keyframes a2{ 0%{opacity: 0;} 60%{opacity: 1;} } @-moz-keyframes a2{ 0%{opacity: 0;} 60%{opacity: 1;} } @keyframes a2{ 0%{opacity: 0;} 60%{opacity: 1;} } @-webkit-keyframes a6{ 0%{opacity: 0;transform:translate(-50px,50px)} 60%{opacity: 1;transform:translate(0,0)} } @-moz-keyframes a6{ 0%{opacity: 0;transform:translate(-50px,50px)} 60%{opacity: 1;transform:translate(0,0)} } @keyframes a6{ 0%{opacity: 0;transform:translate(-50px,50px)} 60%{opacity: 1;transform:translate(0,0)} } @-webkit-keyframes a7{ 0%{opacity: 0;transform:translate(1000px,0px)} 60%{opacity: 1;transform:translate(0,0)} } @-moz-keyframes a7{ 0%{opacity: 0;transform:translate(1000px,0px)} 60%{opacity: 1;transform:translate(0,0)} } @keyframes a7{ 0%{opacity: 0;transform:translate(1000px,0px)} 60%{opacity: 1;transform:translate(0,0)} } @-webkit-keyframes a8{ 0%{opacity: 0;transform:translate(0px,-1000px)} 60%{opacity: 1;transform:translate(0,0)} } @-moz-keyframes a8{ 0%{opacity: 0;transform:translate(0px,-1000px)} 60%{opacity: 1;transform:translate(0,0)} } @keyframes a8{ 0%{opacity: 0;transform:translate(0px,-1000px)} 60%{opacity: 1;transform:translate(0,0)} } @-webkit-keyframes a9{ 0%{opacity: 0;transform:translate(0px,-1000px)} 60%{opacity: 1;transform:translate(0,0)} } @-moz-keyframes a9{ 0%{opacity: 0;transform:translate(0px,-1000px)} 60%{opacity: 1;transform:translate(0,0)} } @keyframes a9{ 0%{opacity: 0;transform:translate(0px,-1000px)} 60%{opacity: 1;transform:translate(0,0)} } @-webkit-keyframes a10{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @-moz-keyframes a10{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @-ms-keyframes a10{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @keyframes a10{ from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @-webkit-keyframes a11{ 0%{-webkit-transform:scale(1);} 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);} 100%{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes a11{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);} } @-ms-keyframes a11{ 0%{-ms-transform:scale(1);} 10%,20%{-ms-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);} 100%{-ms-transform:scale(1) rotate(0);} } @keyframes a11{ 0%{transform:scale(1);} 10%,20%{transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);} 40%,60%,80%{transform:scale(1.1) rotate(-3deg);} 100%{transform:scale(1) rotate(0);} } @-webkit-keyframes b1{ 0%{ -webkit-transform:translate(0px,-1000px); transform:translate(0px,-1000px)} 20%{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px)} 40%{ -webkit-transform:translate(0px,-30px);transform:translate(0px,-30px)} 60%{ -webkit-transform:translate(0px,0px);transform:translate(0px,0px)} 100%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)} } @keyframes b1{ 0%{ transform:translate(0px,-1000px)} 20%{ transform:translate(0px,0px)} 40%{ transform:translate(0px,-30px)} 60%{ transform:translate(0px,0px)} 100%{ transform:translate(0px,0px)} } @-webkit-keyframes b2{ 0%{opacity: 0;transform:translate(0px,1000px)} 60%{opacity: 1;transform:translate(0px,0px)} } @-moz-keyframes b2{ 0%{opacity: 0;transform:translate(0px,1000px)} 60%{opacity: 1;transform:translate(0px,0px)} } @keyframes b2{ 0%{opacity: 0;transform:translate(0px,1000px)} 60%{opacity: 1;transform:translate(0px,0px)} } @-webkit-keyframes c4{ 0%{-webkit-transform: perspective(400px) rotateY(90deg);opacity: 0;} 40%{-webkit-transform: perspective(400px) rotateY(-10deg);} 70%{-webkit-transform: perspective(400px) rotateY(10deg);} 100%{-webkit-transform: perspective(400px) rotateY(0deg);opacity: 1;}} @-moz-keyframes c4{ 0%{-moz-transform: perspective(400px) rotateY(90deg);opacity: 0;} 40%{-moz-transform: perspective(400px) rotateY(-10deg);} 70%{-moz-transform: perspective(400px) rotateY(10deg);} 100%{-moz-transform: perspective(400px) rotateY(0deg);opacity: 1;}} @-o-keyframes c4{ 0%{-o-transform: perspective(400px) rotateY(90deg);opacity: 0;} 40%{-o-transform: perspective(400px) rotateY(-10deg);} 70%{-o-transform: perspective(400px) rotateY(10deg);} 100%{-o-transform: perspective(400px) rotateY(0deg);opacity: 1;}} @keyframes c4{ 0%{transform: perspective(400px) rotateY(90deg);opacity: 0;} 40%{transform: perspective(400px) rotateY(-10deg);} 70%{transform: perspective(400px) rotateY(10deg);} 100%{transform: perspective(400px) rotateY(0deg);opacity: 1;}} @-webkit-keyframes c9{ 0%{-webkit-transform:scale(1);} 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);} 100%{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes c9{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);} } @-ms-keyframes c9{ 0%{-ms-transform:scale(1);} 10%,20%{-ms-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);} 100%{-ms-transform:scale(1) rotate(0);} } @keyframes c9{ 0%{transform:scale(1);} 10%,20%{transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);} 40%,60%,80%{transform:scale(1.1) rotate(-3deg);} 100%{transform:scale(1) rotate(0);} } @-webkit-keyframes d3{ 0%{opacity: 0;-webkit-transform: translateX(-2000px);} 60%{opacity: 1;-webkit-transform: translateX(200px);} 80%{-webkit-transform: translateX(-10px);} 100%{-webkit-transform: translateX(0);}} @-moz-keyframes d3{ 0%{opacity: 0;-moz-transform: translateX(-2000px);} 60%{opacity: 1;-moz-transform: translateX(200px);} 80%{-moz-transform: translateX(-10px);} 100%{-moz-transform: translateX(0);}} @-o-keyframes d3{ 0%{opacity: 0;-o-transform: translateX(-2000px);} 60%{opacity: 1;-o-transform: translateX(200px);} 80%{-o-transform: translateX(-10px);} 100%{-o-transform: translateX(0);}} @keyframes d3{ 0%{opacity: 0;transform: translateX(-2000px);} 60%{opacity: 1;transform: translateX(200px);} 80%{transform: translateX(-10px);} 100%{transform: translateX(0);}} /*自适应*/ @media screen and (max-width:1366px){ .banner-btn{width:960px;} .ty{width:960px;} .banner_KTV dl dd.dd_1{top:86px;left:396px;} .banner_KTV dl dd.dd_2{top:104px;left:133px;} .banner_KTV dl dd.dd_4{font-size:16px;left:360px;bottom:70px;} .banner_KTV em{width:130px;left:444px;bottom:18px;} .banner_KTV dl dd.dd_3,.banner_KTV dl dd.dd_3 b{font-size:26px;} .banner_KTV dl dd.dd_3{left:392px;bottom:96px;} .banner_offline dl dt{font-size:28px;} .banner_offline dl .sy_dd{font-size:16px;} .banner_offline dl .bnt{width:130px;height:36px;} .banner_offline span{width:440px;} .banner_offline span .img1{width:400px;} /*收银O2O*/ .banner_syo2o .img1{width:420px;margin-top:70px;} .banner_syo2o dl{width:470px;margin-top:100px;} .banner_syo2o dl dt{font-size:30px;} .banner_syo2o dl .sy_dd{font-size:20px;line-height:26px;} .banner_syo2o dl .sy_text em{font-size:15px;height:34px;line-height:34px;padding:0 15px;} .banner_syo2o dl .bnt{font-size:16px;height:36px;line-height:36px;} /*O2O酒店*/ .span_hote{left:328px;} .span_hote img{width:80%;} .banner_grogshop em{width:100px;height:24px;line-height:24px;font-size:12px;left:434px;bottom:8px;} .banner_grogshop dl dd.dd_10{font-size:15px;left:330px;bottom:40px;} .banner_grogshop dl dd.dd_8{width:330px;height:auto;left:350px;bottom:103px;} .banner_grogshop dl dd.dd_8 img{width:80%;} .banner_grogshop dl dd.dd_9{width:344px;height:auto;left:343px;bottom:79px;} .banner_grogshop dl dd.dd_9 img{width:80%;} .banner_grogshop dl dd.dd_7{width:900px;height:auto;left:132px;top:229px;} .banner_grogshop dl dd.dd_7 img{width:80%;} .banner_grogshop dl dd.dd_1{left:270px;top:83px;} .banner_grogshop dl dd.dd_2{left:490px;top:85px;} .banner_grogshop dl dd.dd_5{left:125px;top:78px;} .banner_grogshop dl dd.dd_6{left:125px;top:35px;} .banner_grogshop dl dd.dd_4{left:363px;top:35px;} .banner_grogshop dl dd.dd_3{left:777px;top:114px;} /*微视系统*/ .banner_micro img{height:auto;} .banner_micro .m1{left:145px;top:60px;width:305px;} .banner_micro .m2{left:118px;top:186px;z-index:10;width:350px;} .banner_micro .m4{left:82px;top:115px;width:420px;} .banner_micro .m5{left:128px;top:185px;width:330px;} .banner_micro .m6{left:60px;top:245px;width:480px;} .banner_micro .m3{left:244px;bottom:80px;width:115px;} .banner_micro .m7{right:160px;top:130px;z-index:9;width:230px;} .banner_micro .m8{right:153px;top:117px;z-index:10;width:88px;} .banner_micro .m9{right:345px;top:308px;width:125px;} .banner_micro .m10{right:65px;top:235px;width:125px;} /*跨境电商*/ .banner_border dl dd img{display:block;height:auto;} .banner_border dl dd.dd1 img{width:250px;} .banner_border dl dd.dd2 img{width:380px;} .banner_border dl dd.dd3 img{width:330px;} .banner_border dl dd.dd4 img{width:450px;} .banner_border dl dd.dd1{left:280px;top:210px;} .banner_border dl dd.dd2{left:70px;top:134px;} .banner_border dl dd.dd3{bottom:55px;} .banner_border dl dd.dd4{left:55px;top:78px;} .bor_div{margin-top:130px;} .bor_div h1{font-size:28px;} .bor_div p{font-size:16px;line-height:28px;} .bor_div p b{font-size:22px;} .bor_div span{font-size:16px;width:120px;height:36px;line-height:36px;} .banner_81v dl .dd02{font-size:20px;line-height:28px;} .banner_81v dl .dd03{width:180px;height:40px;line-height:40px;font-size:20px;} .banner_81v dl .dd01 img{width:65%;} .banner_81v .right81 img{width:80%;right:0;top:60px;} }