@media only screen and (max-width: 768px){ .floatBox{ width:100%; } .floatLi2{ display:none; } } @media only screen and (min-width: 769px){ floatBox{ min-height:5px; width:100%; } } .floatMa{ background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022030512540902955/cms/image/db128249-92fb-463b-8d2a-57014e4b0109.png) no-repeat center 7px; } .floatEmail{ background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022030512540902955/cms/image/5c3e64b7-1339-4a2a-a61b-e986a9650765.png) no-repeat center 7px; } .floatWhatsapp{ background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022030512540902955/cms/image/75eb8df2-cfa4-4fe9-8970-907b2749987f.png) no-repeat center 7px; } .floatTel{ background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022030512540902955/cms/image/58576513-942e-4f63-be5f-3f1cf4f9e00c.png) no-repeat center 7px; } .floatTop{ background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022030512540902955/cms/image/d1fb9821-995e-4cb0-bd0c-efbf728f7296.png) no-repeat center 5px; } @media only screen and (min-width: 769px){ .floatBox { position: fixed; right: -10px; top: 30%; transform:translateY(-50%); z-index: 50; width: 70px; } .floatLi { position: relative; left:0; display: flex; width: auto; height: 57px; margin-bottom: 1px; line-height: 27px; background:#222;border-radius:5px 0px 0px 5px; text-align: center; overflow: hidden; transition: all 0.5s ease ; } .floatLi2 { position: relative; left:0; display: flex; width: auto; height: 57px; margin-bottom: 1px; line-height: 27px; background:#00abd4; border-radius:5px 0px 0px 5px; text-align: center; transition: all 0.5s ease ; } .floatLi3 { position: relative; left:0; display: flex; width: 300px; height: 57px; margin-bottom: 1px; line-height: 27px; background:#00abd4; border-radius:5px 0px 0px 5px; text-align: center; transition: all 0.5s ease ; } .floatLi4 { position: relative; left:0; display: flex; width: 300px; height: 57px; margin-bottom: 1px; line-height: 27px; text-align: center; overflow: hidden; transition: all 0.5s ease ; } .alink { display: inline-block; width: 60px; height: 100%; padding: 30px 0 0 0; color: #fff; font-size: 0.75rem; } .floatTel2 { display:none; z-index: 1; width: 184px; height: 57px; font: 18px/52px Arial; color: #fff; background: #00abd4; cursor: pointer; left:-200px; position:absolute; } .floatLi2:hover .floatTel2{ display:block; } .floatTel3 { display:block; z-index: 1; width: 200px; height: 57px; line-height:57px!important; font: 14px/27px Arial; color: #fff; background: #00abd4; cursor: pointer; text-align:left; } .floatTel3 a{ color:#fff!important;font-size:16px; } .floatLi:hover { left:-10px; } .floatLi2:hover { left:-10px; } .floatLi3:hover { left:-200px; } } @media only screen and (max-width: 768px){ .floatLiT { width: 33.3%; float: left; text-align: center; } .floatBox { position:fixed; bottom:0; left:0; z-index: 50; width: 100%; height: 57px; background: #00abd4; } .moli { position: relative; width: 33.3%; height: 57px; line-height: 27px; color: #fff; float: left; text-align: center; border-right: solid 1px #fff; } .moli a{ color: #fff!important; display:block; } .moli .alink { display: inline-block; color: #fff; font-size: 0.75rem; width: 100%; height: 33px; padding: 30px 0 0 0; color: #fff; } .moli1 { position: relative; width: 33.3%; height: 57px; line-height: 27px; color: #fff; float: left; text-align: center; border-right: solid 1px #fff; } .moli1 .alink { display: inline-block; color: #fff; font-size: 0.75rem; width: 77px; height: 27px; padding: 30px 0 0 0; color: #fff; } .alink { display: inline-block; color: #fff; font-size: 0.75rem; width: 77px; height: 27px; padding: 30px 0 0 0; color: #fff; line-height: 27px; } .floatTel2 { display:none; } }