indexPC.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152
  1. body,html{
  2. width: 100%;
  3. height: 100%;
  4. margin:0 auto;
  5. font-family:PingFangSC-Regular,sans-serif;
  6. }
  7. body{
  8. font-size: 16px;
  9. }
  10. a{
  11. color: #fff;
  12. }
  13. .container{
  14. width: 100%;
  15. background-color: #000;
  16. overflow: hidden;
  17. }
  18. @media screen and (min-width:1025px){
  19. .main{
  20. width: 62.5%;
  21. margin: 0 auto;
  22. }
  23. .wenan::before{
  24. width: 25%;
  25. top: 15px;
  26. left: 6%;
  27. }
  28. .wenan::after{
  29. width: 25%;
  30. top:15px;
  31. right: 6%;
  32. }
  33. .footer{
  34. padding: 20px 20% ;
  35. /* padding: 20px 384px\9; */
  36. }
  37. .footer .infobox{
  38. float: left;
  39. }
  40. .chuli{
  41. position: relative;
  42. top: 0;
  43. left:12px;
  44. }
  45. .team .iconbox p{
  46. font-size: 18px;
  47. }
  48. .team .iconbox{
  49. width: 20%;
  50. float: left;
  51. overflow: hidden;
  52. text-align: center;
  53. color: #b6885d;
  54. font-size: 18px;
  55. }
  56. .team .iconbox img{
  57. width: 70%;
  58. }
  59. .team-bottm .KStip{
  60. right: 6%;
  61. top: 35%;
  62. }
  63. .team-bottm .DYtip{
  64. left: 10%;
  65. bottom: 20%;
  66. }
  67. }
  68. @media screen and (min-width:768px) and (max-width:1024px){
  69. .main{
  70. width: 96%;
  71. margin: 0 auto;
  72. }
  73. .wenan::before{
  74. width: 25%;
  75. top: 15px;
  76. left: 60px;
  77. }
  78. .wenan::after{
  79. width: 25%;
  80. top: 15px;
  81. left: 60px;
  82. }
  83. .footer{
  84. padding: 20px 18%;
  85. }
  86. .footer .infobox{
  87. float: none;
  88. }
  89. .team .iconbox p{
  90. font-size: 12px;
  91. }
  92. .team .iconbox{
  93. width: 20%;
  94. float: left;
  95. overflow: hidden;
  96. text-align: center;
  97. color: #b6885d;
  98. font-size: 18px;
  99. }
  100. .team .iconbox img{
  101. width: 70%;
  102. }
  103. .team-bottm .KStip{
  104. right: 6%;
  105. top: 40%;
  106. }
  107. .team-bottm .DYtip{
  108. left: 10%;
  109. bottom: 15%;
  110. }
  111. }
  112. @media screen and (max-width:767px){
  113. .main{
  114. width: 99%;
  115. margin: 0 auto;
  116. }
  117. .wenan::before{
  118. width: 180px;
  119. top: 15px;
  120. left: 30px;
  121. }
  122. .wenan::after{
  123. width: 180px;
  124. top: 15px;
  125. left: 30px;
  126. }
  127. footer{
  128. padding: 20px 10%;
  129. }
  130. footer .infobox{
  131. float: none;
  132. }
  133. .team .iconbox p{
  134. font-size: 12px;
  135. /* white-space:nowrap */
  136. }
  137. .team .iconbox{
  138. width: 33.3%;
  139. float: left;
  140. overflow: hidden;
  141. text-align: center;
  142. color: #b6885d;
  143. font-size: 18px;
  144. margin-bottom: 30px;
  145. }
  146. .team .iconbox img{
  147. width: 70%;
  148. }
  149. .team .iconbox:last-child,.team .iconbox.four{
  150. width: 50%;
  151. float: left;
  152. overflow: hidden;
  153. text-align: center;
  154. color: #b6885d;
  155. font-size: 18px;
  156. margin-bottom: 0;
  157. }
  158. .team .iconbox.four img{
  159. width: 48%;
  160. margin-left: 30%;
  161. }
  162. .team .iconbox.four p{
  163. margin-left: 30%;
  164. }
  165. .team .iconbox.last img{
  166. width: 48.1%;
  167. margin-right: 20%;
  168. /* margin-bottom: 1.5px; */
  169. }
  170. .team .iconbox.last p{
  171. margin-right: 10%;
  172. }
  173. .team-bottm .KStip{
  174. right: 7%;
  175. top: 40%;
  176. }
  177. .team-bottm .DYtip{
  178. left: 11%;
  179. bottom: 15%;
  180. }
  181. }
  182. .header{
  183. width: 100%;
  184. height: 100px;
  185. overflow: hidden;
  186. }
  187. .header .icon{
  188. width: 70px;
  189. height: 100px;
  190. float: left;
  191. }
  192. .icon img{
  193. display: block;
  194. width: 100%;
  195. margin-top: 5px;
  196. }
  197. .nav{
  198. height: 100%;
  199. float: right;
  200. }
  201. .nav ul{
  202. margin: 0;
  203. padding: 0;
  204. height: 100%;
  205. overflow: hidden;
  206. line-height: 100px;
  207. }
  208. .nav ul li{
  209. float: left;
  210. height: 100%;
  211. line-height: 100px;
  212. font-size: 36px;
  213. color: #FFF;
  214. }
  215. .nav a{
  216. display: inline-block;
  217. width: 108px;
  218. height: 98px;
  219. line-height: 98px;
  220. font-size: 18px;
  221. font-family:PingFangSC-Regular,sans-serif;
  222. }
  223. .nav ul li.active{
  224. background-color: #b6885d;
  225. }
  226. /* bannner样式 */
  227. .banner{
  228. width: 100%;
  229. /* height: 6.64rem; */
  230. }
  231. #myvideo{
  232. width: 100%;
  233. height: 100%;
  234. }
  235. /* 作品展示 */
  236. .section{
  237. margin-top: 60px;
  238. }
  239. .showWork{
  240. position: relative;
  241. }
  242. .showWork .title{
  243. font-size: 36px;
  244. color: #b6885d;
  245. margin-bottom: 22px;
  246. }
  247. .showWork .title .yuandian{
  248. font-size: 40px;
  249. }
  250. .showWork .desc{
  251. font-size: 24px;
  252. color: #b6885d;
  253. margin-bottom: 55px;
  254. position: relative;
  255. }
  256. .wenan::before{
  257. content:"";
  258. display:inline-block;
  259. height: 3px;
  260. background-image: url(../images/line.png);
  261. background-size: contain;
  262. position: absolute;
  263. }
  264. .wenan::after{
  265. content:"";
  266. display:inline-block;
  267. height: 3px;
  268. background-image: url(../images/line.png);
  269. background-size: contain;
  270. position: absolute;
  271. }
  272. .videoshow{
  273. overflow: hidden;
  274. width: 78%;
  275. /* height: 4.3px; */
  276. margin: 0 auto ;
  277. }
  278. .videoshow .leftArrow{
  279. width:31px;
  280. height:64.8px;
  281. position: absolute;
  282. left: 0;
  283. top: 50%;
  284. cursor: pointer;
  285. }
  286. .videoshow .leftArrow img{
  287. position:absolute;
  288. top: 0;
  289. right: 0;
  290. }
  291. .videoshow .rightArrow{
  292. width:31px;
  293. height:64.8px;
  294. position: absolute;
  295. right: 0;
  296. top: 50%;
  297. cursor: pointer;
  298. }
  299. .videoshow .rightArrow img{
  300. position:absolute;
  301. top: 0;
  302. left: 0;
  303. }
  304. .videoshow .video{
  305. width: 100%;
  306. }
  307. .videoshow .video-item .video-title{
  308. margin-top: 14px;
  309. font-size:24px;
  310. color: #fff;
  311. text-align: center;
  312. margin: 0;
  313. padding: 0;
  314. white-space:nowrap
  315. }
  316. /* .videoshow::before{
  317. content:"";
  318. display:inline-block;
  319. width: 10%;
  320. background-image: url(../images/rightArrow.png);
  321. background-size: contain;
  322. position: absolute;
  323. } */
  324. .videoshow .video-item{
  325. float: left;
  326. width: 30%;
  327. margin-right: 3%;
  328. font-size:24px ;
  329. position: relative;
  330. }
  331. .box{
  332. font-size:24px ;
  333. }
  334. .videoshow .video-item:nth-child(4){
  335. margin-right: 0
  336. }
  337. .videoshow .video-item:hover{
  338. transform: translateY(-10px);
  339. }
  340. .hide{
  341. display: none;
  342. }
  343. .videoshow .video-item .play{
  344. width: 30%;
  345. position: absolute;
  346. top: 50%;
  347. margin-top: -15%;
  348. left: 50%;
  349. margin-left: -15%;
  350. cursor: pointer;
  351. opacity:1;
  352. z-index:3
  353. }
  354. .showWork .gomore{
  355. display: block;
  356. width: 142px;
  357. height: 46px;
  358. margin: 0 auto;
  359. font-size: 24px;
  360. margin-top: 40px;
  361. color: #b6885d;
  362. border: 1px solid #b6885d;
  363. border-radius: 10px;;
  364. line-height: 46px;
  365. }
  366. .company{
  367. margin-top: 60px;
  368. }
  369. .companyImg{
  370. width: 100%;
  371. margin-top: 38px;
  372. margin-bottom: 82px;
  373. }
  374. .companyImg img{
  375. width: 100%;
  376. margin-top: 40px;;
  377. }
  378. .team{
  379. overflow: hidden;
  380. }
  381. .showicon{
  382. display: flex;
  383. justify-content: space-around;
  384. flex-wrap:wrap
  385. }
  386. .team .iconbox p{
  387. margin-top: 10px;
  388. /* white-space:nowrap */
  389. }
  390. .teamImg{
  391. width: 100%;
  392. }
  393. .teamImg img{
  394. width: 100%;
  395. margin-top: 38px;;
  396. }
  397. .team-bottm{
  398. text-align: center;
  399. position: relative;
  400. /* overflow: hidden; */
  401. }
  402. .team-bottm .yrzh1{
  403. width: 25%;
  404. position: relative;
  405. top: 60px;
  406. left: 0%;
  407. margin-left:-5% ;
  408. }
  409. .team-bottm .kuaishou{
  410. width: 15%;
  411. position: absolute;
  412. top: 100px;
  413. right: 22%;
  414. display: none;
  415. }
  416. .kuaishou.show{
  417. display: inline-block;
  418. animation: bounceInRight 1.5s linear;
  419. -ms-animation: bounceInRight 1.5s linear;
  420. }
  421. .team-bottm .douyin{
  422. width: 17%;
  423. position: absolute;
  424. top: 60px;
  425. left: 23.5%;
  426. display: none;
  427. }
  428. .douyin.show{
  429. display: inline-block;
  430. animation: bounceInLeft 1.5s linear;
  431. -ms-animation: bounceInLeft 1.5s linear;
  432. }
  433. .team-bottm .KStip{
  434. width: 20%;
  435. position: absolute;
  436. display: inline-block;
  437. display: none;
  438. }
  439. .KStip.show{
  440. display: inline-block;
  441. animation: bounceInDown 1s linear;
  442. -ms-animation: bounceInDown 1s linear;
  443. }
  444. .team-bottm .DYtip{
  445. width: 20%;
  446. position: absolute;
  447. display: inline-block;
  448. display: none;
  449. }
  450. .DYtip.show{
  451. display: inline-block;
  452. animation: bounceInUp 1s linear;
  453. -ms-animation: bounceInUp 1s linear;
  454. }
  455. /* hezuokehu */
  456. .customers{
  457. margin-bottom: 42px;
  458. }
  459. .show-customers{
  460. display: flex;
  461. justify-content: space-around;
  462. overflow: hidden\0;
  463. }
  464. .show-customers .itembox{
  465. width: 11%;
  466. float: left\0;
  467. margin-right: 3%\0;
  468. }
  469. .itembox img{
  470. width: 100%;
  471. }
  472. /* 页脚 */
  473. .footer{
  474. box-sizing: border-box;
  475. width: 100%;
  476. background: #b6885d;
  477. }
  478. .footer .title{
  479. font-size: 20px;
  480. margin-bottom: 20px;
  481. width: 100%;
  482. }
  483. .footer ul{
  484. display: flex;
  485. justify-content: space-between;
  486. width: 100%;
  487. overflow: hidden;
  488. }
  489. .footer ul li{
  490. float: left;
  491. color: #fff;
  492. width: 16.6%\0;
  493. text-align: left\0;
  494. }
  495. .footer ul li span {
  496. font-size: 20px;
  497. }
  498. .footer .info{
  499. font-size: 16px;
  500. color: #fff;
  501. /* margin-top: 20px\0; */
  502. }
  503. .footer .infobox{
  504. text-align: left;
  505. margin-right: 30px;
  506. font-size: 16px;
  507. margin-bottom: 10px;
  508. }
  509. .footer .box{
  510. font-size: 18px;
  511. margin-right: 11px;
  512. }
  513. .footer .infobox img{
  514. width: 20px;
  515. }
  516. .clearfix::after{
  517. content: '';
  518. display: block;
  519. height: 0;
  520. clear: both;
  521. }
  522. .beian{
  523. text-align: left;
  524. }
  525. .beianinfo{
  526. display: inline-block;
  527. margin-left: 45px;
  528. }
  529. .footer .clear-right{
  530. margin-right: 0;
  531. }
  532. /* 返回顶部按钮 */
  533. .aside{
  534. display: block;
  535. width: 40px;
  536. height: 40px;
  537. position: fixed;
  538. bottom: 120px;
  539. right: 120px;
  540. cursor: pointer;
  541. display: none;
  542. }
  543. .aside img{
  544. width: 100%;
  545. position: absolute;
  546. top: 0;
  547. left: 0;
  548. }
  549. .aside.show{
  550. display: block;
  551. }
  552. .email{
  553. margin-left: 40px;
  554. }
  555. @-webkit-keyframes bounceInDown {
  556. 0%, 60%, 75%, 90%, 100% {
  557. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  558. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  559. }
  560. 0% {
  561. opacity: 0;
  562. -webkit-transform: translate3d(0, -3000px, 0);
  563. transform: translate3d(0, -3000px, 0);
  564. }
  565. 60% {
  566. opacity: 1;
  567. -webkit-transform: translate3d(0, 25px, 0);
  568. transform: translate3d(0, 25px, 0);
  569. }
  570. 75% {
  571. -webkit-transform: translate3d(0, -10px, 0);
  572. transform: translate3d(0, -10px, 0);
  573. }
  574. 90% {
  575. -webkit-transform: translate3d(0, 5px, 0);
  576. transform: translate3d(0, 5px, 0);
  577. }
  578. 100% {
  579. -webkit-transform: none;
  580. transform: none;
  581. }
  582. }
  583. @keyframes bounceInDown {
  584. 0%, 60%, 75%, 90%, 100% {
  585. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  586. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  587. }
  588. 0% {
  589. opacity: 0;
  590. -webkit-transform: translate3d(0, -3000px, 0);
  591. transform: translate3d(0, -3000px, 0);
  592. }
  593. 60% {
  594. opacity: 1;
  595. -webkit-transform: translate3d(0, 25px, 0);
  596. transform: translate3d(0, 25px, 0);
  597. }
  598. 75% {
  599. -webkit-transform: translate3d(0, -10px, 0);
  600. transform: translate3d(0, -10px, 0);
  601. }
  602. 90% {
  603. -webkit-transform: translate3d(0, 5px, 0);
  604. transform: translate3d(0, 5px, 0);
  605. }
  606. 100% {
  607. -webkit-transform: none;
  608. transform: none;
  609. }
  610. }
  611. @-webkit-keyframes bounceInDown {
  612. 0%, 60%, 75%, 90%, 100% {
  613. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  614. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  615. }
  616. 0% {
  617. opacity: 0;
  618. -webkit-transform: translate3d(0, -3000px, 0);
  619. transform: translate3d(0, -3000px, 0);
  620. }
  621. 60% {
  622. opacity: 1;
  623. -webkit-transform: translate3d(0, 25px, 0);
  624. transform: translate3d(0, 25px, 0);
  625. }
  626. 75% {
  627. -webkit-transform: translate3d(0, -10px, 0);
  628. transform: translate3d(0, -10px, 0);
  629. }
  630. 90% {
  631. -webkit-transform: translate3d(0, 5px, 0);
  632. transform: translate3d(0, 5px, 0);
  633. }
  634. 100% {
  635. -webkit-transform: none;
  636. transform: none;
  637. }
  638. }
  639. @-ms-keyframes bounceInDown {
  640. 0%, 60%, 75%, 90%, 100% {
  641. -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  642. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  643. }
  644. 0% {
  645. opacity: 0;
  646. -ms-transform: translate3d(0, -3000px, 0);
  647. transform: translate3d(0, -3000px, 0);
  648. }
  649. 60% {
  650. opacity: 1;
  651. -ms-transform: translate3d(0, 25px, 0);
  652. transform: translate3d(0, 25px, 0);
  653. }
  654. 75% {
  655. -ms-transform: translate3d(0, -10px, 0);
  656. transform: translate3d(0, -10px, 0);
  657. }
  658. 90% {
  659. -ms-transform: translate3d(0, 5px, 0);
  660. transform: translate3d(0, 5px, 0);
  661. }
  662. 100% {
  663. -ms-transform: none;
  664. transform: none;
  665. }
  666. }
  667. .bounceInDown {
  668. -webkit-animation-name: bounceInDown;
  669. animation-name: bounceInDown ;
  670. }
  671. @-webkit-keyframes bounceInLeft {
  672. 0%, 60%, 75%, 90%, 100% {
  673. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  674. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  675. }
  676. 0% {
  677. opacity: 0;
  678. -webkit-transform: translate3d(-3000px, 0, 0);
  679. transform: translate3d(-3000px, 0, 0);
  680. }
  681. 60% {
  682. opacity: 1;
  683. -webkit-transform: translate3d(25px, 0, 0);
  684. transform: translate3d(25px, 0, 0);
  685. }
  686. 75% {
  687. -webkit-transform: translate3d(-10px, 0, 0);
  688. transform: translate3d(-10px, 0, 0);
  689. }
  690. 90% {
  691. -webkit-transform: translate3d(5px, 0, 0);
  692. transform: translate3d(5px, 0, 0);
  693. }
  694. 100% {
  695. -webkit-transform: none;
  696. transform: none;
  697. }
  698. }
  699. @-webkit-keyframes bounceInLeft {
  700. 0%, 60%, 75%, 90%, 100% {
  701. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  702. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  703. }
  704. 0% {
  705. opacity: 0;
  706. -webkit-transform: translate3d(-3000px, 0, 0);
  707. transform: translate3d(-3000px, 0, 0);
  708. }
  709. 60% {
  710. opacity: 1;
  711. -webkit-transform: translate3d(25px, 0, 0);
  712. transform: translate3d(25px, 0, 0);
  713. }
  714. 75% {
  715. -webkit-transform: translate3d(-10px, 0, 0);
  716. transform: translate3d(-10px, 0, 0);
  717. }
  718. 90% {
  719. -webkit-transform: translate3d(5px, 0, 0);
  720. transform: translate3d(5px, 0, 0);
  721. }
  722. 100% {
  723. -webkit-transform: none;
  724. transform: none;
  725. }
  726. }
  727. @keyframes bounceInLeft {
  728. 0%, 60%, 75%, 90%, 100% {
  729. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  730. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  731. }
  732. 0% {
  733. opacity: 0;
  734. -webkit-transform: translate3d(-3000px, 0, 0);
  735. transform: translate3d(-3000px, 0, 0);
  736. }
  737. 60% {
  738. opacity: 1;
  739. -webkit-transform: translate3d(25px, 0, 0);
  740. transform: translate3d(25px, 0, 0);
  741. }
  742. 75% {
  743. -webkit-transform: translate3d(-10px, 0, 0);
  744. transform: translate3d(-10px, 0, 0);
  745. }
  746. 90% {
  747. -webkit-transform: translate3d(5px, 0, 0);
  748. transform: translate3d(5px, 0, 0);
  749. }
  750. 100% {
  751. -webkit-transform: none;
  752. transform: none;
  753. }
  754. }
  755. @-ms-keyframes bounceInLeft {
  756. 0%, 60%, 75%, 90%, 100% {
  757. -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  758. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  759. }
  760. 0% {
  761. opacity: 0;
  762. -ms-transform: translate3d(-3000px, 0, 0);
  763. transform: translate3d(-3000px, 0, 0);
  764. }
  765. 60% {
  766. opacity: 1;
  767. -ms-transform: translate3d(25px, 0, 0);
  768. transform: translate3d(25px, 0, 0);
  769. }
  770. 75% {
  771. -ms-transform: translate3d(-10px, 0, 0);
  772. transform: translate3d(-10px, 0, 0);
  773. }
  774. 90% {
  775. -ms-transform: translate3d(5px, 0, 0);
  776. transform: translate3d(5px, 0, 0);
  777. }
  778. 100% {
  779. -ms-transform: none;
  780. transform: none;
  781. }
  782. }
  783. .bounceInLeft {
  784. -webkit-animation-name: bounceInLeft;
  785. animation-name: bounceInLeft ;
  786. }
  787. @-webkit-keyframes bounceInRight {
  788. 0%, 60%, 75%, 90%, 100% {
  789. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  790. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  791. }
  792. 0% {
  793. opacity: 0;
  794. -webkit-transform: translate3d(3000px, 0, 0);
  795. transform: translate3d(3000px, 0, 0);
  796. }
  797. 60% {
  798. opacity: 1;
  799. -webkit-transform: translate3d(-25px, 0, 0);
  800. transform: translate3d(-25px, 0, 0);
  801. }
  802. 75% {
  803. -webkit-transform: translate3d(10px, 0, 0);
  804. transform: translate3d(10px, 0, 0);
  805. }
  806. 90% {
  807. -webkit-transform: translate3d(-5px, 0, 0);
  808. transform: translate3d(-5px, 0, 0);
  809. }
  810. 100% {
  811. -webkit-transform: none;
  812. transform: none;
  813. }
  814. }
  815. @keyframes bounceInRight {
  816. 0%, 60%, 75%, 90%, 100% {
  817. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  818. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  819. }
  820. 0% {
  821. opacity: 0;
  822. -webkit-transform: translate3d(3000px, 0, 0);
  823. transform: translate3d(3000px, 0, 0);
  824. }
  825. 60% {
  826. opacity: 1;
  827. -webkit-transform: translate3d(-25px, 0, 0);
  828. transform: translate3d(-25px, 0, 0);
  829. }
  830. 75% {
  831. -webkit-transform: translate3d(10px, 0, 0);
  832. transform: translate3d(10px, 0, 0);
  833. }
  834. 90% {
  835. -webkit-transform: translate3d(-5px, 0, 0);
  836. transform: translate3d(-5px, 0, 0);
  837. }
  838. 100% {
  839. -webkit-transform: none;
  840. transform: none;
  841. }
  842. }
  843. @-ms-keyframes bounceInRight {
  844. 0%, 60%, 75%, 90%, 100% {
  845. -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  846. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  847. }
  848. 0% {
  849. opacity: 0;
  850. -ms-transform: translate3d(3000px, 0, 0);
  851. transform: translate3d(3000px, 0, 0);
  852. }
  853. 60% {
  854. opacity: 1;
  855. -ms-transform: translate3d(-25px, 0, 0);
  856. transform: translate3d(-25px, 0, 0);
  857. }
  858. 75% {
  859. -ms-transform: translate3d(10px, 0, 0);
  860. transform: translate3d(10px, 0, 0);
  861. }
  862. 90% {
  863. -ms-transform: translate3d(-5px, 0, 0);
  864. transform: translate3d(-5px, 0, 0);
  865. }
  866. 100% {
  867. -ms-transform: none;
  868. transform: none;
  869. }
  870. }
  871. .bounceInRight {
  872. -webkit-animation-name: bounceInRight;
  873. animation-name: bounceInRight;
  874. }
  875. @-webkit-keyframes bounceInUp {
  876. 0%, 60%, 75%, 90%, 100% {
  877. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  878. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  879. }
  880. 0% {
  881. opacity: 0;
  882. -webkit-transform: translate3d(0, 3000px, 0);
  883. transform: translate3d(0, 3000px, 0);
  884. }
  885. 60% {
  886. opacity: 1;
  887. -webkit-transform: translate3d(0, -20px, 0);
  888. transform: translate3d(0, -20px, 0);
  889. }
  890. 75% {
  891. -webkit-transform: translate3d(0, 10px, 0);
  892. transform: translate3d(0, 10px, 0);
  893. }
  894. 90% {
  895. -webkit-transform: translate3d(0, -5px, 0);
  896. transform: translate3d(0, -5px, 0);
  897. }
  898. 100% {
  899. -webkit-transform: translate3d(0, 0, 0);
  900. transform: translate3d(0, 0, 0);
  901. }
  902. }
  903. @keyframes bounceInUp {
  904. 0%, 60%, 75%, 90%, 100% {
  905. -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  906. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  907. }
  908. 0% {
  909. opacity: 0;
  910. -webkit-transform: translate3d(0, 3000px, 0);
  911. transform: translate3d(0, 3000px, 0);
  912. }
  913. 60% {
  914. opacity: 1;
  915. -webkit-transform: translate3d(0, -20px, 0);
  916. transform: translate3d(0, -20px, 0);
  917. }
  918. 75% {
  919. -webkit-transform: translate3d(0, 10px, 0);
  920. transform: translate3d(0, 10px, 0);
  921. }
  922. 90% {
  923. -webkit-transform: translate3d(0, -5px, 0);
  924. transform: translate3d(0, -5px, 0);
  925. }
  926. 100% {
  927. -webkit-transform: translate3d(0, 0, 0);
  928. transform: translate3d(0, 0, 0);
  929. }
  930. }
  931. @-ms-keyframes bounceInUp {
  932. 0%, 60%, 75%, 90%, 100% {
  933. -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  934. transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  935. }
  936. 0% {
  937. opacity: 0;
  938. -ms-transform: translate3d(0, 3000px, 0);
  939. transform: translate3d(0, 3000px, 0);
  940. }
  941. 60% {
  942. opacity: 1;
  943. -ms-transform: translate3d(0, -20px, 0);
  944. transform: translate3d(0, -20px, 0);
  945. }
  946. 75% {
  947. -ms-transform: translate3d(0, 10px, 0);
  948. transform: translate3d(0, 10px, 0);
  949. }
  950. 90% {
  951. -ms-transform: translate3d(0, -5px, 0);
  952. transform: translate3d(0, -5px, 0);
  953. }
  954. 100% {
  955. -ms-transform: translate3d(0, 0, 0);
  956. transform: translate3d(0, 0, 0);
  957. }
  958. }
  959. .bounceInUp {
  960. -webkit-animation-name: bounceInUp;
  961. animation-name: bounceInUp;
  962. }