| 1 |
- @charset "UTF-8";.code p,.company p,.pc p,.phone .top,.subscribe p{line-height:22px}body{font-size:14px}.header{box-shadow:0 1px 2px rgba(0,0,0,.1)}.wrap{width:1024px;margin:0 auto;text-align:center}h2{font-size:24px;color:#333;font-weight:500}.icon{display:inline-block}#intro{height:550px;margin-bottom:0}.sHeader{padding-top:250px;position:absolute;top:0;width:100%}.sHeader .icon{width:32px;height:31px;background:url(../images/solution1.png) 8px 0 no-repeat}.sHeader .icon2{background-position:-24px 0}.sHeader .icon3{background-position:-59px 0}.sHeader .icon4{background-position:-95px 0}.sHeader .icon5{background-position:-129px 0}.sHeader ul{margin:0 182px}.sHeader li{width:100px;margin:0 16px;animation:cloud 14s .1s infinite alternate cubic-bezier(.455,.03,.515,.955)}.sHeader li:nth-child(1){animation-duration:13s}.sHeader li:nth-child(2){animation-delay:.35s}.sHeader li:nth-child(3){animation-delay:.4s;animation-duration:16s}.sHeader li:nth-child(4){animation-delay:.25s;animation-duration:17s}.sHeader p{font-size:16px;color:#fff;padding-top:8px;padding-bottom:20px}.sHeader .top{position:relative;top:-80px;left:0;cursor:pointer}.animation{animation-name:tada;animation-duration:1s;animation-timing-function:linear;animation-play-state:running}.phone li:hover:after,.scene .bc:hover:after{content:' ';z-index:1;left:0;top:0;animation-name:ripple;animation-timing-function:ease;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal}@keyframes tada{10%,20%,40%,60%,80%{transform:rotate(-5deg)}30%,50%,70%,90%{transform:rotate(5deg)}100%{transform:rotate(0)}}.phone{margin-bottom:14px}.phone h2{margin-bottom:16px}.phone .top{color:#666}.phone .bottom{padding-top:26px;color:#333}.phone ul{margin:48px 208px}.phone li{width:100px;height:100px;margin:0 25px;border:1px solid #4cc1e9;border-radius:50px;transition:all .5s;position:relative}.phone li:hover{border-color:#fff}.phone li:hover:after{position:absolute;width:100px;height:100px;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3) inset;background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#9bcafa),color-stop(1,#4cc2e9));background:-moz-linear-gradient(top,#9bcafa 5%,#4cc2e9 100%);background:-webkit-linear-gradient(top,#9bcafa 5%,#4cc2e9 100%);background:-o-linear-gradient(top,#9bcafa 5%,#4cc2e9 100%);background:-ms-linear-gradient(top,#9bcafa 5%,#4cc2e9 100%);background:linear-gradient(to bottom,#9bcafa 5%,#4cc2e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9bcafa', endColorstr='#4cc2e9', GradientType=0);background-color:#9bcafa;animation-duration:1s}@keyframes ripple{0%{opacity:1;transform:scale(0)}100%{opacity:0;transform:scale(1)}}.phone .icon{width:53px;height:51px;margin-top:23px;background:url(../images/solution2.png) 3px 0 no-repeat}.phone .icon2{background-position:-52px 0}.phone .icon3{background-position:-107px 0}.phone .icon4{background-position:-162px 0}.pc{height:680px;background-color:#4cc1e9}.pc .wrap{height:100%;text-align:left;background:url(../images/pc.png) 404px 60px no-repeat}.pc h2{padding:246px 0 14px 122px;color:#fff}.pc p{width:188px;padding-left:122px;color:#fff;text-align:justify}.code{height:498px}.code .wrap{height:100%;text-align:left;background:url(../images/code.png) 620px 90px no-repeat}.code h2{padding:175px 0 14px 132px}.code p{width:385px;padding-left:132px;color:#666}.company{height:720px;background-color:#4cc1e9}.company .wrap{height:100%;background:url(../images/company.png) center 160px no-repeat}.company h2{color:#fff;padding-top:34px;padding-bottom:14px}.company p{color:#fff}.subscribe{height:688px}.subscribe .wrap{height:100%;background:url(../images/subscribe.png) 73px 220px no-repeat}.subscribe h2{padding-top:74px;padding-bottom:16px}.subscribe p{color:#666}.subscribe ul{margin:108px 100px;font-size:12px}.subscribe li{width:192px;margin:0 7px}.subscribe li p{line-height:20px}.subscribe .icon{width:66px;height:61px;background:url(../images/solution3.png) 3px 0 no-repeat}.subscribe .icon2{background-position:-65px 0}.subscribe .icon3{background-position:-134px 0}.subscribe .icon4{background-position:-202px 0}.subscribe h3{font-size:18px;font-weight:500;padding-top:10px;padding-bottom:8px}.scene{height:407px;background-color:#4cc1e9;color:#fff}.scene h2{color:#fff;padding-top:52px;padding-bottom:70px}.scene ul{margin:0 62px}.scene li{width:112px;margin:0 8px;position:relative}.scene .bc{width:112px;height:84px;border-radius:56px;margin-bottom:14px;padding-top:28px;transition:all 2s}.scene .bc:hover{background-color:#44add1}.scene .bc:hover:after{position:absolute;width:114px;height:114px;border-radius:50%;background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#59b5d4),color-stop(1,#44aed1));background:-moz-linear-gradient(top,#59b5d4 5%,#44aed1 100%);background:-webkit-linear-gradient(top,#59b5d4 5%,#44aed1 100%);background:-o-linear-gradient(top,#59b5d4 5%,#44aed1 100%);background:-ms-linear-gradient(top,#59b5d4 5%,#44aed1 100%);background:linear-gradient(to bottom,#59b5d4 5%,#44aed1 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#59b5d4', endColorstr='#44aed1', GradientType=0);background-color:#59b5d4;animation-duration:1.6s}.scene .icon{width:68px;height:52px;background:url(../images/solution4.png) 8px 0 no-repeat}.scene .icon2{background-position:-62px 0}.scene .icon3{background-position:-131px 0}.scene .icon4{background-position:-202px 0}.scene .icon5{background-position:-272px 0}.scene .icon6{background-position:-341px 0}.scene .icon7{background-position:-411px 0}
|
