@charset "utf-8";
/*
@author: he
@update: he (2024-04-26)
*/
body{font:12px/1.5 "\5FAE\8F6F\96C5\9ED1",arial,Helvetica,Tahoma,sans-serif; margin:0 auto; color:#333; min-width: 1200px;}
p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe{margin:0; padding:0;}
img{border:0 none;}
ul,li,ol{list-style-type:none;}
i,em,address, caption, cite, code, dfn, th, var {font-style: normal;font-weight: normal}
.msf{font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
a,a:hover{outline:none;}
.clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
.clearfix{*zoom:1;}
input,button,select,textarea{outline:none} textarea{resize:none}

/*框架*/
.layout{ clear:both;width:1200px;text-align:left;margin:0 auto;color:#333;}
.fl{ float:left;_display: inline}
.fr{ float:right;_display: inline}
.pr{ position:relative}
.abs{position:absolute;}
.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* 新增公用样式 */
.hide{display:none;}
.diiblock{display: inline-block; *zoom: 1; *display: inline;}
.textcon{text-align:center;}
.marcon{margin:0 auto;}
.wblod{font-weight: bold;}
.horizontalcolor{background: -moz-linear-gradient(to right, #11C3F9, #72C472); background: -ms-linear-gradient(to right, #11C3F9, #72C472); background: -webkit-linear-gradient(to right, #11C3F9, #72C472); background: linear-gradient(to right, #11C3F9, #72C472); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#11C3F9", endColorstr="#72C472", gradientType="1");}
.verticalcolor{background: -moz-linear-gradient(#11C3F9, #72C472); background: -ms-linear-gradient(#11C3F9, #72C472); background: -webkit-linear-gradient(#11C3F9, #72C472); background: linear-gradient(#11C3F9, #72C472); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#11C3F9", endColorstr="#72C472", gradientType="0");}
.margR0{margin-right: 0 !important;}
.bodyBg{ background: #f2f8fd;}
.ggTit{ height: 44px; text-align: center; margin-bottom: 40px;}
.ggTit .lcion,.ggTit .rcion{ display: inline-block; background:url(/images/zixun/project-aiban/tit_01.png) no-repeat left center;}
.ggTit .rcion{ background:url(/images/zixun/project-aiban/tit_02.png) no-repeat right center;}
.ggTit .ctxt{ margin: 0 40px; line-height: 44px; font-size: 36px; font-weight: 700; color: #333; font-style: oblique; background:url(/images/zixun/project-aiban/tit_03.png) no-repeat left bottom;}

/*页头大图*/
.headerBg{ background:url(/images/zixun/project-aiban/bg_01.jpg) no-repeat center top;}
.header{ position:relative; z-index: 1; height:380px;}
.header .logo{ display: block; position: absolute; top: 20px; left: 6px; width: 156px; height: 39px; background:url(/images/zixun/project-aiban/logo.png) no-repeat;}
.header .tTxt{ display: block; position: absolute; top: 70px; left: 170px; width: 464px; height: 52px; line-height: 52px; text-align: center; font-size: 26px; color: #fff; font-weight: 700;}
.header .tBxt{ display: block; position: absolute; top: 258px; left: 170px; width: 464px; height: 76px; line-height: 54px; text-align: center; font-size: 22px; color: #002392; font-weight: 700;  background:url(/images/zixun/project-aiban/bg_02.png) no-repeat;}
.header .ball{ position: absolute; z-index: 1;}
.header .ball.bg01{ top: 26px; right: 400px; width: 46px; height: 50px; background:url(/images/zixun/project-aiban/icon_13.png) no-repeat; -webkit-animation:floating 2s 0s infinite both; animation:floating 2s 0s infinite both;}
.header .ball.bg02{ top: 69px; right: 450px; width: 56px; height: 60px; background:url(/images/zixun/project-aiban/icon_19.png) no-repeat; -webkit-animation:floating 2s 1s infinite both; animation:floating 2s 1s infinite both;}
.header .ball.bg03{ top: 152px; right: 444px; width: 46px; height: 50px; background:url(/images/zixun/project-aiban/icon_14.png) no-repeat; -webkit-animation:floating 2s 0s infinite both; animation:floating 2s 0s infinite both;}
.header .ball.bg04{ top: 47px; right: 158px; width: 46px; height: 50px; background:url(/images/zixun/project-aiban/icon_15.png) no-repeat; -webkit-animation:floating 2s 1s infinite both; animation:floating 2s 1s infinite both;}
.header .ball.bg05{ top: 115px; right: 78px; width: 56px; height: 60px; background:url(/images/zixun/project-aiban/icon_16.png) no-repeat; -webkit-animation:floating 2s 0s infinite both; animation:floating 2s 0s infinite both;}
.header .ball.bg06{ top: 190px; right: 148px; width: 46px; height: 50px; background:url(/images/zixun/project-aiban/icon_17.png) no-repeat; -webkit-animation:floating 2s 1s infinite both; animation:floating 2s 1s infinite both;}

/*课程特色*/
.characteristic{ padding: 30px 0 50px;}
.characteristic .cenBox{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.characteristic .cenBox .list{ width: 285px; height: 130px; border-radius: 8px;}
.characteristic .cenBox .list-tit{ padding: 26px 0 0 26px; line-height: 40px; font-size: 20px;}
.characteristic .cenBox .list-tit b{ font-size: 36px; vertical-align: -3px;}
.characteristic .cenBox .list-tit b.f30{ font-size: 30px; vertical-align: 1px;}
.characteristic .cenBox .list-txt{ padding: 0 0 0 26px; line-height: 40px; font-size: 20px; color: #999;}
.characteristic .cenBox .list.bg01{ background:url(/images/zixun/project-aiban/icon_01.png) no-repeat 148px center #fff;}
.characteristic .cenBox .list.bg02{ background:url(/images/zixun/project-aiban/icon_02.png) no-repeat 148px center #fff;}
.characteristic .cenBox .list.bg03{ background:url(/images/zixun/project-aiban/icon_03.png) no-repeat 148px center #fff;}
.characteristic .cenBox .list.bg04{ background:url(/images/zixun/project-aiban/icon_04.png) no-repeat 148px center #fff;}

/*课程疑问*/
.doubt{ padding: 20px 0 50px;}
.doubt .cenBox{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.doubt .cenBox .list{ width: 384px; height: 198px; background:url(/images/zixun/project-aiban/bg_03.png) no-repeat;}
.doubt .cenBox .list-tit{ position: relative; z-index: 1; margin: 18px 0 14px; padding-left: 64px; height: 70px; line-height: 68px; font-size: 20px; font-weight: 700;}
.doubt .cenBox .list-tit b{ color: #5978ff;}
.doubt .cenBox .list-tit i{ display: block; position: absolute; left: 0; top: 0; width: 54px; height: 70px; text-align: center; line-height: 68px; font-size: 28px; color: #5978ff;}
.doubt .cenBox .list-txt{ padding: 0 0 0 30px; line-height: 34px; font-size: 18px; color: #666;}

/*课程顾虑*/
.concerns{ padding: 20px 0 50px;}
.concerns .ggTit{ margin-bottom: 20px;}
.concerns .cenBox{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.concerns .cenBox .list{ width: 285px; height: 284px;}
.concerns .cenBox .list-tit{ padding-top: 136px; height: 28px; line-height: 28px; font-size: 20px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 12px;}
.concerns .cenBox .list-txt{ line-height: 28px; font-size: 16px; color: #fff; margin: 0 20px;}
.concerns .cenBox .list.bg01{ background:url(/images/zixun/project-aiban/bg_08.png) no-repeat;}
.concerns .cenBox .list.bg02{ background:url(/images/zixun/project-aiban/bg_09.png) no-repeat;}
.concerns .cenBox .list.bg03{ background:url(/images/zixun/project-aiban/bg_10.png) no-repeat;}
.concerns .cenBox .list.bg04{ background:url(/images/zixun/project-aiban/bg_11.png) no-repeat;}

/*学习六招*/
.sixTipsBg{ background:url(/images/zixun/project-aiban/bg_04.jpg) no-repeat center top; background-size: 1920px 100%;}
.sixTips{ padding: 50px 0;}
.sixTips .ggTit .ctxt{ color: #fff;}
.sixTips .cenBox{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.sixTips .cenBox .list{ position: relative; z-index: 1; width: 580px; height: 510px; background:url(/images/zixun/project-aiban/bg_07.png) no-repeat; margin-bottom: 40px;}
.sixTips .cenBox .list-tit{ padding-left: 40px; height: 58px; margin-bottom: 30px;}
.sixTips .cenBox .list-tit .left{ float: left; font-size: 26px; font-weight: 700; color: #f36d00; line-height: 56px;}
.sixTips .cenBox .list-tit .left b{ font-size: 36px; font-style: oblique; vertical-align: -2px;}
.sixTips .cenBox .list-tit .right{ float: left; font-size: 26px; font-weight: 700; line-height: 58px; margin-left: 30px;}
.sixTips .cenBox .list-txt{ padding: 0 50px; line-height: 28px; font-size: 16px;}
.sixTips .cenBox .list-pic{ position: absolute; bottom: 20px; left: 50%; margin-left: -260px; width: 520px; height: 300px;}
.sixTips .botBox{ text-align: center; height: 62px; margin-bottom: 30px;}
.sixTips .botBox .btn01{ display: inline-block; width: 300px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; border: 1px solid #fff; border-radius: 31px; background: #8cfccf; background: linear-gradient(to right, #eeffe2, #2ef9be); margin: 0 10px;}
.sixTips .botBox .btn01:hover{ text-decoration: none; background: #29f9bc; background: linear-gradient(to right, #2ef9be, #eeffe2);}
.sixTips .botBox .btn02{ display: inline-block; width: 302px; height: 62px; line-height: 62px; text-align: center; font-size: 20px; color: #fff; font-weight: 700; border-radius: 31px; background: #fa491c; background: linear-gradient(to bottom, #fc691e, #f82219); margin: 0 10px;}
.sixTips .botBox .btn02:hover{ text-decoration: none; background: #f82319; background: linear-gradient(to bottom, #f82219, #fc691e);}
.sixTips .botBox .btn02.qhj{ display: none;}
.sixTips .botNotice{ padding: 28px 0 24px; border: 1px solid #464a8b; border-radius: 30px; background: #fff; background: linear-gradient(to right, rgba(225,243,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(238,248,255,1) 85%, rgba(242,251,255,1) 100%);}
.sixTips .botNotice .bnTit{ height: 34px; font-size: 26px; font-weight: 700; line-height: 34px; margin: 0 50px 18px; background:url(/images/zixun/project-aiban/tit_03.png) no-repeat left bottom; background-size: 100px 10px;}
.sixTips .botNotice .bnCon{ line-height: 38px; font-size: 18px; margin: 0 50px;}

/*加入我们*/
.joinBoxBg{ background:url(/images/zixun/project-aiban/bg_05.jpg) no-repeat center top; background-size: 1920px 100%;}
.joinBox{ height: 262px;}
.joinBox .bbox{ padding-top: 54px;}
.joinBox .bbox .ltxt{ width: 500px; padding-left: 80px; color: #fff;}
.joinBox .bbox .ltxt-tit{ height: 26px; margin-bottom: 26px;}
.joinBox .bbox .ltxt-cen{ line-height: 30px; font-size: 16px; margin-bottom: 14px;}
.joinBox .bbox .ltxt-cen b{ font-size: 22px;}
.joinBox .bbox .right{ padding: 0 50px 0 0;}
.joinBox .bbox .right .ewm{ width: 140px; margin-right: 30px;}
.joinBox .bbox .right .ewm-pic{ display: block; width: 140px; height: 140px; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.13); -moz-box-shadow:0 0 15px rgba(0,0,0,0.13); box-shadow:0 0 15px rgba(0,0,0,0.13);}
.joinBox .bbox .right .ewm-pic.weChatAppletSale01{ display: block; width: 120px; height: 120px; padding: 10px; background: #fff; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.13); -moz-box-shadow:0 0 15px rgba(0,0,0,0.13); box-shadow:0 0 15px rgba(0,0,0,0.13);}
.joinBox .bbox .right .ewm-txt{ line-height: 42px; text-align: center; font-size: 16px; color: #fff;}

/*底部浮动*/
.botFloat-wap{ width: 100%; height: 100px;}
.botFloat{ width:100%; height: 100px; position:fixed; left:0; bottom:0; background: url(/images/zixun/project-aiban/bg_06.jpg) no-repeat center top; z-index:90;}
.botFloat .fdIcon{ position: absolute; left: -5px; top: -15px; width: 185px; height: 115px; background: url(/images/zixun/project-aiban/icon_05.png) no-repeat;}
.botFloat .fdTxt{ line-height: 70px; font-size: 28px; font-weight: 700; color: #fff;}
.botFloat .fdLeft{ margin-left: 180px;}
.botFloat .fdLeft-price{ float: left; display: none; padding-top: 10px;}
.botFloat .fdLeft-price-xian{ line-height: 50px; font-size: 20px; color: #f11200;}
.botFloat .fdLeft-price-xian span{ font-size: 24px; vertical-align: -2px;}
.botFloat .fdLeft-price-xian b{ font-size: 36px;}
.botFloat .fdLeft-price-yuan{ line-height: 20px; font-size: 16px; color: #999; text-decoration: line-through;}
.botFloat .fdLeft-price-yuan b{ font-size: 20px;}
.botFloat .fdLeft-price02{ float: left; line-height: 100px; font-size: 26px; color: #f11200;}
.botFloat .fdLeft-price02 b{ font-size: 50px;}
.botFloat .tIcon{ float: left; display: none; padding: 0 10px; height: 32px; line-height: 32px; font-size: 16px; color: #966d00; background: #ffc154; border-radius: 16px; margin: 34px 0 0 20px;}
.botFloat .fdRight{ height: 60px; margin: 20px 0 0 0;}
.botFloat .fdRight .btn01{ position: relative; z-index: 1; float: left; display: block; width: 230px; height: 60px; line-height: 60px; text-align: center; font-size: 24px; color: #fff; margin-left: 20px; border-radius: 30px; background: #ff9f40; background: linear-gradient(to right, #ffba55, #ff862c);}
.botFloat .fdRight .btn01:hover{ text-decoration: none; background: #ff872f; background: linear-gradient(to right, #ff862c, #ffba55);}
.botFloat .fdRight .btn01.help{ display: none;}
.botFloat .fdRight .btn01.no{ background: #c2c2c2; color: #fff;}
.botFloat .fdRight .btn01.no:hover{ background: #c2c2c2;}
.botFloat .fdRight .btn01 .icon{ position: absolute; left: 50%; top: -40px; transform: translateX(-50%); display: none; padding: 0 10px; height: 30px; line-height: 30px; font-size: 14px; color: #fff; white-space: nowrap; border-radius: 15px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');background:rgba(0,0,0,0.6);}
.botFloat .fdRight .btn01 .icon:after{ content:" "; display:block; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; width: 9px; height: 7px; background: url(/images/zixun/project-aiban/icon_18.png) no-repeat;}
.botFloat .fdRight .btn02{ float: left; display: block; width: 230px; height: 60px; line-height: 60px; text-align: center; font-size: 24px; color: #fff; font-weight: 700; margin-left: 20px; border-radius: 30px; background: #f42d26; background: linear-gradient(to right, #ff4b3f, #e90f0d);}
.botFloat .fdRight .btn02:hover{ text-decoration: none; background: #e91411; background: linear-gradient(to right, #e90f0d, #ff4b3f);}

/* 右侧浮动 */
.rightFloat{ width:100px; position:fixed; right: 15px; top:50%; margin-top: -130px; z-index:90;}
.rightFloat .con{ width: 100px; padding-top: 12px; border-radius: 8px; background: #ffa041; background: linear-gradient(to right, #ffba55, #ff862c);}
.rightFloat .con-help{ display: block; width: 90px; height: 34px; padding-top: 42px; line-height: 34px; color: #fff; font-weight: 700; font-size: 16px; text-align: center; background:url(/images/zixun/project-aiban/icon_07.png) no-repeat top center; margin: 0 5px 5px;}
.rightFloat .con-help:hover{ text-decoration: none;}
.rightFloat .con-top{ padding: 0 10px; border-radius: 8px; margin: 0 5px; background: #fefdfb; background: linear-gradient(to bottom, #ffffff, #ebfaf6);}
.rightFloat .con-top li{ height: 40px; line-height: 40px; text-align: center; font-size: 16px; border-bottom: 1px solid #e3e3e3;}
.rightFloat .con-top li a:hover{ text-decoration: none; color: #f36d00;}
.rightFloat .con-top li:last-child{ border-bottom: 0;}
.rightFloat .con .gototop{ display: block; height: 40px; line-height: 40px; text-indent: 10px; font-size: 16px; color: #fff; font-weight: 700; text-align: center;}
.rightFloat .con .gototop i{ display: inline-block; width: 19px; height: 9px; background:url(/images/zixun/project-aiban/icon_09.png) no-repeat; margin-left: 4px; vertical-align: 1px;}
.rightFloat .con .gototop:hover{ text-decoration: none;}
.rightFloat .switch-icon{ position:absolute; left:-24px; top:50%; margin-top:-42px; display: block; width:24px; height:84px; border-radius: 4px 0 0 4px; cursor: pointer; background: linear-gradient(to right, #fee9c3, #f3d4a0);}
.rightFloat .switch-icon i{ position: absolute; left: 6px; top: 50%; margin-top: -15px; width: 15px; height: 29px; background:url(/images/zixun/project-aiban/icon_08.png) no-repeat;}
.rightFloat.rightFloat-switch .switch-icon i{ transform:rotateZ(180deg);}
.rightFloat .activity-fixBtn{ display:block; width: 112px; height: 90px; margin-left: -6px;}

.mask{ display: none; width: 100%; height: 100%; position:fixed; top:0; left:0; background:#000; z-index:99; filter:alpha(opacity=70);opacity:0.7;}

/*免费弹窗*/
.free-pop{ display:none; width:262px; height: 356px; position:fixed; top:50%; left:50%; margin:0 0 0 -131px; z-index:100;}
.free-pop .xx{ position: absolute; bottom: -48px; left: 50%; margin-left: -16px; display: block; width:32px; height:32px; background:url(/images/zixun/project-aiban/icon_10.png) no-repeat;}
.free-pop .titTwo{ padding: 110px 0 0; height: 73px; line-height: 30px; text-align: center; font-size: 18px; color: #562600;}
.free-pop .titTwo b{ font-size: 20px;}
.free-pop .titThr{ padding: 108px 0 0; height: 75px; line-height: 20px; text-align: center; font-size: 16px; color: #562600;}
.free-pop .titThr b{ font-size: 20px; line-height: 30px;}
.free-pop .cen{ width: 219px; height: 82px; margin: 0 0 5px 23px;}
.free-pop .cen-left{ float: left; width: 102px; padding-top: 10px;}
.free-pop .cen-left-top{ height: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #f11200;}
.free-pop .cen-left-top b{ font-size: 30px; vertical-align: -2px;}
.free-pop .cen-left-bot{ width: 70px; height: 22px; line-height: 22px; text-align: center; font-size: 14px; color: #966d00; background: #ffe9c1; border-radius: 11px; margin: 0 auto;}
.free-pop .cen-right01{ float: right; width: 116px; line-height: 54px; text-align: center; font-size: 20px; color: #966d00; padding-top: 15px;}
.free-pop .cen-right02{ float: right; width: 102px; padding-left: 14px; line-height: 22px; font-size: 14px; color: #966d00; padding-top: 20px;}
.free-pop .bot{ height: 28px; line-height: 28px; text-align: center; font-size: 12px;}
.free-pop .btn{ display: block; width: 182px; height: 42px; line-height: 42px; text-align: center; font-size: 18px; color: #fff; font-weight: 700; margin: 0 auto; border-radius: 21px; background:url(/images/zixun/project-aiban/icon_12.png) no-repeat; box-shadow:0 2px 18px rgba(242, 207, 107, 0.5);}
.free-pop .btn:hover{ text-decoration: none; box-shadow:0 2px 18px rgba(242, 207, 107, 1);}
.free-pop .btn.yes{ display: none;}
.free-pop.loginPop{ background:url(/images/zixun/project-aiban/bg_12.png) no-repeat;}
.free-pop.experiencePop{ background:url(/images/zixun/project-aiban/bg_12.png) no-repeat;}
.free-pop.couponPop{ background:url(/images/zixun/project-aiban/bg_13.png) no-repeat;}
.free-pop.couponPopTwo{ background:url(/images/zixun/project-aiban/bg_15.png) no-repeat; height: 424px;}
.free-pop.couponPopTwo .cen{ height: 74px;}
.free-pop.couponPopTwo .cen-left{ padding-top: 2px;}
.free-pop.couponPopTwo .cen-right02{ padding-top: 14px;}

/*已购课弹窗*/
.ready-pop{ display:none; width:296px; border-radius: 24px; background:url(/images/zixun/project-aiban/bg_16.png) no-repeat; background-size: 100% 100%; position:fixed; top:50%; left:50%; margin:0 0 0 -148px; z-index:100;}
.ready-pop .xx{ position: absolute; top: 10px; right: 10px; display: block; width:30px; height:30px; background:url(/images/zixun/project-aiban/icon_11.png) no-repeat center;}
.ready-pop .cTxt{ line-height: 36px; text-align: center; font-size: 20px; color: #562600; font-weight: 700; padding: 54px 0 20px;}
.ready-pop .btn{ display: block; width: 182px; height: 42px; line-height: 42px; text-align: center; font-size: 18px; color: #fff; font-weight: 700; margin: 0 auto 36px; border-radius: 21px; background:url(/images/zixun/project-aiban/icon_12.png) no-repeat; box-shadow:0 2px 18px rgba(242, 207, 107, 0.5);}
.ready-pop .btn:hover{ text-decoration: none; box-shadow:0 2px 18px rgba(242, 207, 107, 1);}

/*分享弹窗*/
.share-pop{ display:none; width:296px; height: 500px; background:url(/images/zixun/project-aiban/bg_14.png) no-repeat; position:fixed; top:50%; left:50%; margin:0 0 0 -148px; z-index:100;}
.share-pop .xx{ position: absolute; top: 90px; right: 10px; display: block; width:30px; height:30px; background:url(/images/zixun/project-aiban/icon_11.png) no-repeat center;}
.share-pop .top{ padding: 140px 0 4px; border-bottom: 1px solid #efdf90; line-height: 28px; margin: 0 20px 8px;}
.share-pop .top-tit{ font-size: 20px; color: #562600; font-weight: 700; text-align: center;}
.share-pop .top-tit b{ color: #fa362d;}
.share-pop .top-txt{ font-size: 14px; color: #562600; text-align: center;}
.share-pop .cTxt{ line-height: 22px; font-size: 12px; color: #562600; text-align: center; margin-bottom: 8px;}
.share-pop .cTxt em{ color: #999;}
.share-pop .cPic{ display: block; width: 100px; height: 100px; padding: 10px; background: #fff; border-radius: 6px; margin: 0 auto;}
.share-pop .cPic img{ width: 100px; height: 100px;}
.share-pop .bTxt{ line-height: 34px; font-size: 14px; color: #562600; font-weight: 700; text-align: center;}

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(20%);
    }
    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
    }
    50% {
        -webkit-transform: translateY(20%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}