/* @charset "utf-8"; */
/*-防止各大cdn公共库加载地址失效问题，此地址我们会时时监控，及调整-www.jq22.com为您服务*/
/*当前为字节跳动cdn公共库提供font-awesome-4.6.0 Css样式文件*/
@import url("https://s1.pstatp.com/cdn/expire-1-M/font-awesome/4.6.0/css/font-awesome.min.css");
.banner-swiper .swiper-slide {
  overflow: hidden;
}
.banner-swiper .txt * {
  color: #fff;
  opacity: 0;
}
.banner-swiper h3 {
  font-family: "Gilroy-B";
  text-transform: uppercase;
  margin-bottom: 27px;
}
.banner-swiper p {
  width: 45.9%;
  line-height: 1.5;
}
.banner-swiper .more {
  margin-top: 87px;
  background: url(/images/more1-1.svg) no-repeat center;
  background-size: contain;
}
.banner-swiper .more::after {
  background-color: #fff;
}
.banner-swiper .more:hover {
  color: #004282;
  background: url(/images/more1-2.svg) no-repeat center;
  background-size: contain;
}
.banner-swiper .more:hover::after {
  background-color: #004282;
}
.banner-swiper .swiper-slide-active h3 {
  animation: inRight 1.5s ease forwards 0.2s;
}
.banner-swiper .swiper-slide-active p {
  animation: inRight 1.5s ease forwards 0.4s;
}
.banner-swiper .swiper-slide-active .more {
  animation: inRight 1.5s ease forwards 0.6s;
}
.banner-swiper .swiper-pagination {
  bottom: 10.5%;
  text-align: left;
}
.banner-swiper .swiper-pagination-bullet {
  margin-left: 0 !important;
  margin-right: 38px !important;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.banner-swiper .swiper-pagination-bullet-active {
  width: 30px;
  height: 4px;
  border-radius: 4px;
  opacity: 1;
}
.banner {
  position: relative;
}
.banner .scroll {
  position: absolute;
  right: 5.2%;
  bottom: 5.3%;
  z-index: 2;
}
.banner .scroll span {
  color: #fff;
}
.banner .scroll .lines {
  margin-top: 14px;
}
.banner .scroll .line {
  position: relative;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.banner .scroll .line::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  background-color: #fff;
}
.banner .scroll .line1 {
  height: 21px;
}
.banner .scroll .line1::before {
  height: 6px;
  animation: toBot1 2.5s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.banner .scroll .line2 {
  height: 38px;
}
.banner .scroll .line2::before {
  height: 10px;
  animation: toBot2 2.8s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.banner .scroll .line3 {
  height: 32px;
}
.banner .scroll .line3::before {
  height: 8px;
  animation: toBot3 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}
.inFirm-wrap .img {
  position: relative;
  width: 52.4%;
  cursor: pointer;
}
.inFirm-wrap .img:hover .play-btn .vi-btn {
  animation: zhuang 2s ease infinite;
}
.inFirm-wrap .play-btn .icon {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.inFirm-wrap .play-btn .icon img {
  height: 100%;
  object-fit: contain;
}
.inFirm-wrap .play-btn .icon i {
  font-size: 14px;
  color: #fff;
}
.inFirm-wrap .play-btn p {
  color: #fff;
  margin-top: 26px;
}
.inFirm-wrap .txt {
  width: 47.6%;
  padding-left: 4.2%;
  padding-top: 7.1vw;
}
.inFirm-wrap h3 {
  position: relative;
  color: #000000;
  font-family: "Gilroy-B";
  padding-bottom: 40px;
  border-bottom: 1px solid #e8e8e8;
}
.inFirm-wrap h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 60px;
  background-color: #0b0f14;
}
.inFirm-wrap .subTit {
  font-family: "Gilroy-M";
  line-height: 1.4;
  margin-top: 70px;
}
.inFirm-wrap .intro {
  margin-top: 21px;
  margin-bottom: 77px;
}
.inFirm-wrap .intro * {
  color: #666666;
}
.lz-wrap {
  position: relative;
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
}
.particle {
  width: 100%;
  height: 100%;
  z-index: 2;
}
.num-items {
  position: relative;
  z-index: 2;
}
.num-item * {
  color: #fff;
}
.inFi-bot .num-items {
  padding: 36px 0;
  margin-top: -80px;
}
.inFi-bot .num-item .num-t * {
  font-family: "Gilroy-M";
}
.mask-video {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: 0.35s;
}
.mask-video .mvbot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 800px;
  background-color: #000;
}
.mask-video .video-sp {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  transition: 0.35s;
}
.mask-video .closed {
  position: absolute;
  right: -10%;
  top: -10%;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #004282;
  cursor: pointer;
}
.mask-video .closed i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #fff;
}
.mask-video .closed:hover {
  transform: rotate(360deg);
  transition: 0.35s;
}
.mask-video.active {
  opacity: 1;
  visibility: visible;
}
.mask-video.active .video-sp {
  opacity: 1;
  visibility: visible;
}
body.hide {
  overflow: hidden;
}
.inProducts {
  position: relative;
  background: url(/img/in-proBg.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}
.inProducts::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #00172f;
  opacity: 0.4;
}
.inProducts .c1 {
  position: relative;
  z-index: 2;
}
.inProducts * {
  color: #fff;
}
.inPro-bot {
  position: relative;
}
.inPro-bot .swi-btn {
  top: 30%;
  margin-top: 0;
}
.inPro-bot .swi-prev {
  left: -74px;
}
.inPro-bot .swi-next {
  right: -74px;
}
.inPro-swiper {
  margin-top: 75px;
}
.inPro-swiper * {
  font-family: "Gilroy-M";
}
.inPro-swiper .img {
  position: relative;
  overflow: hidden;
}
.inPro-swiper .img img {
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.inPro-swiper .hover-items {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
  background: linear-gradient(135deg, #004282 0%, rgba(18, 98, 175, 0.9) 100%);
  padding: 0 22.9%;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.inPro-swiper .hover-items .item {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.inPro-swiper .hover-items .item:not(:first-of-type) {
  padding-top: 30px;
}
.inPro-swiper .oe {
  margin-top: 30px;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.inPro-swiper .swiper-slide:hover .img {
  background-color: #fff;
}
.inPro-swiper .swiper-slide:hover .img img {
  transform: scale(1.04);
}
.inPro-swiper .swiper-slide:hover .hover-items {
  top: 0;
  opacity: 1;
  visibility: visible;
}
.inPro-swiper .swiper-slide:hover .oe {
  opacity: 0;
  visibility: hidden;
}
.inCreden {
  background: url(/img/inHoner-bg.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}
.inCreden .com-tit .tit {
  position: relative;
  display: inline-block;
  padding-bottom: 22px;
  margin-bottom: 38px;
  border-bottom: 1px solid #e8e8e8;
}
.inCreden .com-tit .tit::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 2px;
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
}
.inCreden .com-tit .des {
  width: 44.1%;
  color: #666666;
}
.inCreden .c1 {
  position: relative;
  height: 715px;
}
.honor {
  bottom: 0;
  width: 100%;
}
.honor .swi-btn {
  position: relative;
  border-color: #cccccc;
}
.honor .swi-btn::after {
  color: #cccccc;
}
.honor .swi-btn:hover::after {
  color: #fff;
}
.honor .swi-pagi {
  margin: 0 27px;
}
.honor-swiper .swiper-wrapper {
  margin-left: 232px;
}
.honor-swiper .swiper-slide {
  width: 224px;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.honor-swiper .swiper-slide:not(:last-of-type) {
  margin-right: 42px;
}
.honor-swiper .img {
  position: relative;
  padding-bottom: 69.4%;
  background-color: #fff;
  box-shadow: 0px 10px 30px 1px rgba(222, 227, 231, 0.6);
  box-sizing: border-box;
}
.honor-swiper .img img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  object-fit: contain;
  max-width: 90%;
  max-height: 90%;
}
.honor-swiper .name {
  margin-top: 20px;
}
.honor-swiper .swiper-slide-active {
  width: 332px;
}
.honor-swiper .swiper-slide-active .img {
  padding-bottom: 0;
  border: 1px solid #004282;
}
.honor-swiper .swiper-slide-active .img img {
  position: relative;
  left: auto;
  top: auto;
  transform: translate(0, 0);
  padding: 12px 18px;
  margin: 0 auto;
}
.inNews-wrap {
  margin-top: 46px;
}
.news-swiper {
  width: 50%;
}
.news-swiper .swiper-slide {
  position: relative;
  display: block;
  overflow: hidden;
}
.news-swiper .swiper-slide:hover .img img {
  transform: scale(1.04);
}
.news-swiper .img {
  height: 100%;
}
.news-swiper .img img {
  height: 100%;
  object-fit: cover;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-swiper .txt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 28px 28.6% 28px 7.1%;
  z-index: 2;
}
.news-swiper .txt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
  opacity: 0.9;
  z-index: -1;
}
.news-swiper .date {
  color: rgba(255, 255, 255, 0.5);
}
.news-swiper .name {
  font-family: "Gilroy-M";
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news-swiper .swiper-pagination {
  left: auto;
  right: 7.4%;
  bottom: 49px;
  width: auto;
}
.news-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0 5px !important;
  opacity: 0.3;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-swiper .swiper-pagination-bullet-active {
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 1;
}
.inNews-items {
  width: 50%;
  padding: 16px 3.7%;
  background-color: #f5f6f8;
}
.inNews-item {
  position: relative;
  display: block;
  padding: 40px 40px 30px 0;
}
.inNews-item:not(:last-of-type) {
  border-bottom: 1px solid #e9eaec;
}
.inNews-item:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: linear-gradient(117deg, #004282 0%, #1262af 100%);
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.inNews-item .date {
  color: #ababab;
}
.inNews-item .name {
  font-family: "Gilroy-M";
  margin-top: 9px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.inNews-item .des {
  display: none;
  color: #666666;
  line-height: 1.7;
  margin-top: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inNews-item .more {
  position: absolute;
  top: 60%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #004282 0%, #1262af 100%);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.inNews-item .more i {
  font-size: 12px;
  color: #fff;
}
.inNews-item.active:not(:last-of-type)::after {
  width: 100%;
}
.inNews-item.active .name {
  color: #004282;
}
.inNews-item.active .des {
  display: -webkit-box;
}
.inNews-item.active .more {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
.global {
  position: relative;
  background: url(/img/global-bg.jpg) no-repeat center;
  background-size: cover;
  padding: 123px 2.3% 122px 0;
}
.global .map {
  position: relative;
  width: 67.5%;
  margin-left: auto;
}
.global .cir {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
}
.global .cir::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  animation: cir1 2s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 2s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  animation: cir2 2s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 2s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir-8 {
  width: 8px;
  height: 8px;
}
.global .cir2::before {
  animation: cir1 4s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 4s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir2::after {
  animation: cir2 4s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 4s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir3::before {
  animation: cir3 2.5s 0.5s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir3 2.5s 0.5s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir3::after {
  animation: cir4 2.5s 0.5s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir4 2.5s 0.5s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir4::before {
  animation: cir5 1.5s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir5 1.5s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir4::after {
  animation: cir6 1.5s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir6 1.5s 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir5::before {
  animation: cir1 3s 0.6s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 3s 0.6s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir5::after {
  animation: cir2 4s 0.6s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 4s 0.6s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir6::before {
  animation: cir1 1.8s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 1.8s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir6::after {
  animation: cir2 1.8s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 1.8s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir7::before {
  animation: cir5 2.8s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir5 2.8s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir7::after {
  animation: cir6 2.8s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir6 2.8s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir8::before {
  animation: cir1 2s 1.3s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 2s 1.3s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir8::after {
  animation: cir2 2s 1.3s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 2s 1.3s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir9::before {
  animation: cir1 3.5s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 3.5s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir9::after {
  animation: cir2 3.5s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 3.5s 0.8s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir10::before {
  animation: cir1 2s 0.15s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 2s 0.15s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir10::after {
  animation: cir2 2s 0.15s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 2s 0.15s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir11::before {
  animation: cir1 2.3s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 2.3s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir11::after {
  animation: cir2 2.3s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 2.3s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir12::before {
  animation: cir1 2.1s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir1 2.1s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global .cir12::after {
  animation: cir2 2.1s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  -webkit-animation: cir2 2.1s 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
}
.global-wrap {
  left: 13.55%;
  width: 25%;
}
.global-wrap * {
  color: #fff;
}
.global-wrap .com-tit {
  margin-bottom: 121px;
}
.global-wrap .com-tit .tit {
  margin-bottom: 46px;
}
.global-wrap .com-tit .des {
  line-height: 1.8;
}
.global-wrap .items {
  display: inline-block;
}
.global-wrap .item {
  position: relative;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.global-wrap .item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 204px;
  height: 1px;
  background-color: #fff;
}
.global-wrap .item span {
  color: rgba(255, 255, 255, 0.5);
}
.global-wrap .item .num-item {
  margin-left: 26px;
}
.global-wrap .item .num-item * {
  line-height: 1;
  font-family: "Gilroy-M";
}
.profile {
  margin-top: 104px;
}
.profile .c1 {
  position: relative;
}
.profile h3 {
  font-family: "Gilroy-B";
  color: #1a1a1a;
  text-transform: uppercase;
}
.firm1 {
  margin-bottom: 121px;
}
.firm {
  margin-top: 50px;
}
.firm .firm-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 51.4%;
  z-index: 2;
}
.firm .firm-wrap * {
  color: #fff;
}
.firm .firmR {
  padding: 45px 2.9% 39px 2.1%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
}
.firm .firm-t {
  position: relative;
  padding-bottom: 28px;
  margin-bottom: 39px;
  border-bottom: 1px solid rgba(232, 232, 232, 0.1);
}
.firm .firm-t::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 60px;
  background-color: #fff;
}
.firm .firm-t * {
  font-size: inherit;
  font-family: "Gilroy-M";
  line-height: 1.2;
}
.firm .intro {
  overflow-y: auto;
  max-height: 250px;
}
.firm .intro::-webkit-scrollbar {
  width: 3px;
}
.firm .intro * {
  line-height: 1.5;
  font-size: inherit;
}
.firm .intro em {
  font-style: italic;
}
.firm .intro em * {
  font-style: italic;
}
.firm .intro strong {
  font-weight: bold;
}
.firm .intro strong * {
  font-weight: bold;
}
.profile-swiper {
  position: relative;
  width: 60%;
  margin-left: 0;
}
.profile-swiper .swiper-pagination-bullet {
  background-color: #fff;
  margin: 0 5px !important;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.profile-swiper .swiper-pagination-bullet-active {
  background-color: #004282;
}
.firm2 .num-items {
  padding: 88px 0;
}
.firm2 .num-item {
  position: relative;
  padding-left: 20px;
}
.firm2 .num-item::before,
.firm2 .num-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  width: 2px;
}
.firm2 .num-item::before {
  height: 85%;
  background-color: rgba(255, 255, 255, 0.1);
}
.firm2 .num-item::after {
  height: 18px;
  background-color: #fff;
}
.firm2 .num-item p {
  color: rgba(255, 255, 255, 0.5);
}
.firm2 .num-item .num-t * {
  font-family: "Gilroy-B";
}
.firm3 {
  margin-top: 117px;
}
.firm3 * {
  font-family: "Gilroy-M";
}
.firm3 em {
  font-style: italic;
}
.firm3 em * {
  font-style: italic;
}
.firm3 strong {
  font-weight: bold;
}
.firm3 strong * {
  font-weight: bold;
}
.firm3 img {
  width: auto;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto;
}
.factory {
  margin-top: 20px;
}
.factory-item:not(:last-of-type) {
  border-bottom: 1px solid #e8e8e8;
}
.factory-item:nth-of-type(even) {
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.factory-item .txt {
  width: 38.6%;
}
.factory-item h3 {
  position: relative;
  color: #1a1a1a;
  padding-bottom: 30px;
}
.factory-item h3::before,
.factory-item h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
}
.factory-item h3::before {
  width: 182px;
  background-color: #e8e8e8;
}
.factory-item h3::after {
  width: 60px;
  background: linear-gradient(to right, #004282 0%, #1262af 100%);
}
.factory-item .des {
  color: #666666;
  margin-top: 47px;
}
.factory-item .img-wrap {
  position: relative;
  width: 49.9%;
}
.factory-item .img-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #004282;
  opacity: 0;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.factory-item .img {
  overflow: hidden;
}
.factory-item .img img {
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.factory-item:hover .img-wrap::before {
  left: -20px;
  top: -20px;
  opacity: 1;
}
.factory-item:hover .img img {
  transform: scale(1.04);
}
.factory-swiper {
  position: relative;
}
.factory-swiper::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-width: 40px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  z-index: 2;
}
.factory-swiper .swiper-pagination-bullet {
  background-color: #fff;
  margin: 0 5px !important;
  opacity: 1;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.factory-swiper .swiper-pagination-bullet-active {
  background-color: #004282;
}
.products {
  background-color: #f3f5f8;
}
.products .proL {
  width: 25%;
}
.products .proR {
  width: 74%;
}
.products .search {
  height: 78px;
  padding: 17px 6.5% 0;
  background: linear-gradient(133deg, #004282 0%, #1262af 100%);
}
.products .search .sea-wrap {
  position: relative;
  width: 100%;
  height: 39px;
}
.products .search i {
  position: absolute;
  left: 0;
  top: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.products .search input {
  width: 100%;
  height: 39px;
  padding: 0 25.4% 0 6%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.products .search input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.products .search input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.products .search input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.products .search input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.products .search .btn {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  width: 22.4%;
  height: 30px;
  line-height: 30px;
  color: #004282;
  background-color: #fff;
  border-radius: 15px;
  z-index: 2;
}
.sort-swiper {
  width: 100%;
  background-color: #fff;
}
.sort-swiper .swiper-wrapper {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.sort-swiper * {
  color: #000000;
}
.sort-swiper span {
  font-family: "Gilroy-M";
  font-size: 16px;
}
.sort-swiper i {
  position: absolute;
  right: 6.5%;
  top: 21px;
}
.sort-swiper .swiper-slide {
  position: relative;
  display: block;
  padding: 20px 6.5%;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.sort-swiper .swiper-slide:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 87%;
  height: 1px;
  background-color: #e8e8e8;
}
.sort-swiper .swiper-slide:hover {
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
}
.sort-swiper .swiper-slide:hover:not(:last-of-type)::after {
  height: 0;
}
.sort-swiper .swiper-slide:hover * {
  color: #fff;
}
.sort-swiper .swiper-slide.active {
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
}
.sort-swiper .swiper-slide.active:not(:last-of-type)::after {
  height: 0;
}
.sort-swiper .swiper-slide.active * {
  color: #fff;
}
.pro-items {
  margin-bottom: 40px;
}
.pro-item {
  display: block;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 40px;
}
.pro-item:nth-of-type(3n) {
  margin-right: 0;
}
.pro-item .img {
  overflow: hidden;
}
.pro-item .img img {
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.pro-item .txt {
  position: relative;
  height: 80px;
  border-bottom: 1px solid rgba(0, 66, 130, 0.1);
  padding: 0 7.1%;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.pro-item .txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(/images/lz.png) repeat center;
  background-size: contain;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.pro-item p {
  position: relative;
  width: calc(100% - 70px);
  font-family: "Gilroy-M";
  line-height: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 2;
}
.pro-item .more {
  right: 7.1%;
  color: #004282;
  z-index: 2;
}
.pro-item .more i {
  color: #004282;
  font-size: 12px;
  margin-left: 10px;
}
.pro-item:hover .img img {
  transform: scale(1.04);
}
.pro-item:hover .txt {
  background: linear-gradient(135deg, #004282 0%, #1262af 100%);
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.pro-item:hover .txt::before {
  opacity: 1;
  visibility: visible;
}
.pro-item:hover .txt * {
  color: #fff;
}
.pro-item:hover .particle {
  opacity: 1;
  visibility: visible;
}
.isLsit {
  padding-top: 101px;
}
.isLsit .head-pc {
  background-color: #fff;
  box-shadow: 0px 3px 20px 1px rgba(246, 247, 249, 0.3);
}
.isLsit .head-pc .logo1 {
  display: none;
}
.isLsit .head-pc .logo2 {
  display: block;
}
.isLsit .head-pc .nav a {
  color: #333;
}
.isLsit .head-pc .nav a:hover {
  color: #004282;
}
.isLsit .head-pc .nav a.active {
  color: #004282;
}
.cpxq .position {
  margin-top: 50px;
}
.proLsit {
  margin-bottom: 97px;
}
.proLsit .proL {
  width: 49.3%;
  background-color: #f6f7f9;
  padding: 40px 7.1%;
}
.proLsit .proL .proName {
  color: #004282;
  line-height: 1.2;
  font-family: "Gilroy-M";
}
.proLsit .proL .item {
  position: relative;
  padding: 30px 0 30px 20px;
  border-bottom: 1px dashed rgba(0, 66, 130, 0.2);
}
.proLsit .proL .item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px dashed #004282;
}
.proLsit .proL .item * {
  line-height: 1.1;
}
.proLsit .proL .item .name {
  width: 176px;
  color: rgba(0, 0, 0, 0.5);
}
.proLsit .proL .item .nameInfo {
  width: calc(100% - 176px);
  font-family: "Gilroy-M";
}
.proLsit .proL .item .nameInfo img {
  display: inline-block;
  width: auto;
}
.proLsit .proR {
  width: 49.3%;
  margin-left: 1.4%;
}
.news-wrap {
  margin-bottom: 26px;
}
.news-item {
  display: inline-block;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 73px;
}
.news-item:nth-of-type(3n) {
  margin-right: 0;
}
.news-item .img {
  overflow: hidden;
}
.news-item .img img {
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-item .txt {
  position: relative;
  padding: 22px 0;
  border-bottom: 1px solid #ebeced;
}
.news-item .txt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: #004282;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-item .date {
  color: #999999;
}
.news-item .name {
  font-family: "Gilroy-B";
  line-height: 1.4;
  color: #000000;
  margin-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-item .trade {
  color: #999999;
  margin-top: 60px;
}
.news-item .more {
  position: relative;
  font-family: "Gilroy-M";
  color: #666666;
  text-transform: capitalize;
  margin-top: 30px;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-item .more::after {
  content: "\e600";
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  color: #004282;
  font-size: 12px;
  font-family: "iconfont" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.news-item:hover .img img {
  transform: scale(1.04);
}
.news-item:hover .name {
  color: #004282;
}
.news-item:hover .more {
  color: #004282;
}
.news-item:hover .more::after {
  right: 0;
  opacity: 1;
  visibility: visible;
}
.news-item:hover .txt::after {
  width: 100%;
}
.news-fir .news-item {
  position: relative;
  width: 66%;
  margin-right: 2%;
}
.news-fir .news-item:nth-of-type(3n) {
  margin-right: 2%;
}
.news-fir .news-item:nth-of-type(2n) {
  width: 32%;
  margin-right: 0;
}
.news-fir .news-item:nth-of-type(2n) .txt {
  position: relative;
  left: auto;
  bottom: auto;
  padding: 22px 0;
  border-bottom: 1px solid #ebeced;
}
.news-fir .news-item:nth-of-type(2n) .txt::after {
  height: 1px;
}
.news-fir .news-item:nth-of-type(2n) .date,
.news-fir .news-item:nth-of-type(2n) .trade {
  color: #999999;
}
.news-fir .news-item:nth-of-type(2n) .name {
  color: #000000;
  margin-top: 20px;
}
.news-fir .news-item:nth-of-type(2n) .trade {
  margin-top: 60px;
}
.news-fir .news-item:nth-of-type(2n) .more {
  color: #666666;
}
.news-fir .news-item:nth-of-type(2n) .more::after {
  color: #004282;
}
.news-fir .news-item:nth-of-type(2n):hover .name {
  color: #004282;
}
.news-fir .news-item:nth-of-type(2n):hover .more {
  color: #004282;
}
.news-fir .news-item:nth-of-type(2n):hover .txt::after {
  width: 100%;
}
.news-fir .news-item .txt {
  position: absolute;
  left: 0;
  bottom: 46px;
  width: 100%;
  padding: 0 3.2%;
  border-bottom: none;
  z-index: 2;
}
.news-fir .news-item .txt * {
  color: #fff;
}
.news-fir .news-item .txt::after {
  width: 0;
  height: 0;
}
.news-fir .news-item .name {
  margin-top: 10px;
}
.news-fir .news-item .trade {
  margin-top: 10px;
}
.xwxq .position {
  margin-top: 45px;
}
.xwInner {
  margin-bottom: 93px;
}
.xwInner .date {
  position: relative;
  width: 180px;
  height: 164px;
  background-color: #004282;
}
.xwInner .date::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100%;
  height: 100%;
  background-color: #e6e6e6;
  z-index: -1;
}
.xwInner .date * {
  color: #fff;
  line-height: 1;
}
.xwInner .date .day {
  font-family: "Gilroy-B";
  margin-bottom: 15px;
}
.xwInfo {
  width: 64.3%;
}
.xwInfo .tit {
  color: #000000;
  font-family: "Gilroy-B";
  padding-bottom: 34px;
  margin-bottom: 44px;
  border-bottom: 1px solid #e6e6e6;
}
.xwInfo .info {
  padding-bottom: 93px;
  margin-bottom: 54px;
  border-bottom: 1px solid #ececec;
}
.xwInfo .info * {
  font-size: inherit;
}
.xwInfo .info em {
  font-style: italic;
}
.xwInfo .info em * {
  font-style: italic;
}
.xwInfo .info strong,
.xwInfo .info em {
  font-weight: bold;
}
.xwInfo .info strong *,
.xwInfo .info em * {
  font-weight: bold;
}
.xwInfo .info img {
  width: auto;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto;
}
.xwInfo .page {
  position: relative;
}
.xwInfo .page .chapter {
  display: block;
  width: 75%;
  font-family: "Gilroy-M";
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.xwInfo .page .chapter:hover {
  color: #004282;
}
.xwInfo .page .prev {
  margin-bottom: 23px;
}
.xwInfo .page .back {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 180px;
  background: url(/images/more2-2.svg) no-repeat center;
  background-size: contain;
  color: #fff;
}
.xwInfo .page .back::after {
  background-color: #fff;
}
.contact .lx-wrap {
  position: relative;
}
.contact .map {
  display: block;
}
.contact .map img {
  min-height: 450px;
  object-fit: cover;
}
.lxwm {
  left: 10vw;
  width: 38.9%;
  z-index: 2;
}
.lxwm h3 {
  font-family: "Gilroy-B";
  color: #000000;
  text-transform: uppercase;
}
.lxwm .items {
  margin-top: 70px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 5px;
}
.lx-item {
  padding-bottom: 30px;
  padding-top: 30px;
}
.lx-item:not(:last-of-type) {
  border-bottom: 1px dashed #e8e8e8;
}
.lx-item .icon {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid #dedfe1;
  box-sizing: border-box;
  margin-right: 3.4%;
  flex-shrink: 0;
}
.lx-item .icon i {
  background: linear-gradient(180deg, #004282 0%, #1262af 100%);
  -webkit-background-clip: text;
  color: transparent;
}
.lx-item .name {
  color: #999999;
  line-height: 1.1;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.lx-item .info {
  font-family: "Gilroy-M";
  color: #fff;
}
.lx-item .itemR {
  width: calc(96.6% - 50px);
}
.lx-item .itemR .item {
  width: 50%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .inPro-swiper .hover-items {
    background: rgba(18, 98, 175, 0.9);
  }
}

/* Material Floating Buttons */
/**
 * CONTENTS
 *
 * #Introduction........Naming conventions used throughout the code.
 *
 * #SETTINGS
 * Variables............Globally-available variables and config.
 *
 * #TOOLS
 * Mixins...............Useful mixins.
 *
 * #GENERIC
 * Demo styles..........Styles for demo only (consider removing these).
 *
 * #BASE
 * Raw styles...........The very basic component wrapper.
 * Modifiers............The basic styles dependant on component placement.
 * Debuggers............The basic styles dependant on component placement.
 *
 * #BUTTONS
 * Base..................Wrapping and constraining every button.
 * Modifiers.............Styles that depends on state and settings.
 * Animations............Main animations of the component.
 * Debuggers.............Styles for development.
 *
 * #LABELS
 * Base..................Wrapping and constraining every label.
 * Modifiers.............Styles that depends on state and settings.
 * Debuggers.............Styles for development.
 *
 * #DEVELOPMENT
 * In development........These styles are in development and not yet finalised
 * Debuggers.............Helper styles and flags for development.
 */
/*------------------------------------*\
    #Introduction
\*------------------------------------*/
/**
 * The code AND the comments use naming conventions to refer to each part of
 * the UI put in place by this component. If you see that somewhere they are
 * not followed please consider a Pull Request. The naming conventions are:
 *
 * "Component" : the widget itself as a whole. This is the last time it will be
 *               called anything different than "component". So, stay away from
 *               "widget", "button" or anything else when referring to the
 *               Component in general.
 *
 * "Main Button" : the button that is always in view. Hovering or clicking on it
 *                 will reveal the child buttons.
 *
 * "Child buttons" : if you've read the previous point you know what they are.
 *                   Did you read the previous point? :)
 *
 * "Label(s)" : the tooltip that fades in when hovering over a button.

/*------------------------------------*\
    #SETTINGS | Variables
\*------------------------------------*/
/**
 * These variables are the default styles that serve as fallback and can be
 * easily customised at compile time.
 * Consider overriding them in your own style sheets rather than editing them
 * here. Refer to the docs for more info.
 */
/* COLORS ----------------------------*/
/* EFFECTS ---------------------------*/
/* SPEEDS ----------------------------*/
/* SIZES -----------------------------*/
/* SPACING ---------------------------*/
/* OTHER VARIABLES -------------------*/
/*------------------------------------*\
    #BASE | Raw styles
\*------------------------------------*/
/**
 * The very core styling of the button.
 * These styles are shared by every instance of the button.
 * Styles placed here should NOT care about placement in the screen,
 * options chosen by the user or state of the button.
 */
.mfb-component--tl,
.mfb-component--tr,
.mfb-component--bl,
.mfb-component--br {
  box-sizing: border-box;
  margin: 25px;
  position: fixed;
  white-space: nowrap;
  z-index: 30;
  padding-left: 0;
  list-style: none;
}
.mfb-component--tl *,
.mfb-component--tr *,
.mfb-component--bl *,
.mfb-component--br *,
.mfb-component--tl *:before,
.mfb-component--tr *:before,
.mfb-component--bl *:before,
.mfb-component--br *:before,
.mfb-component--tl *:after,
.mfb-component--tr *:after,
.mfb-component--bl *:after,
.mfb-component--br *:after {
  box-sizing: inherit;
}

/*------------------------------------*\
    #BASE | Modifiers
\*------------------------------------*/
/**
 * These styles depends on the placement of the button.
 * Styles can be:
 * 1. Top-left:  modified by the " --tl " suffix.
 * 2. Top-right: modified by the " --tr " suffix.
 * 3. Bottom-left:  modified by the " --bl " suffix.
 * 4. Bottom-right: modified by the " --br " suffix.
 */
.mfb-component--tl {
  left: 0;
  top: 0;
}

.mfb-component--tr {
  right: 0;
  top: 0;
}

.mfb-component--bl {
  left: 0;
  bottom: 0;
}

.mfb-component--br {
  right: 0;
  bottom: 0;
}

/*------------------------------------*\
    #BUTTONS | Base
\*------------------------------------*/
.mfb-component__button--main,
.mfb-component__button--child {
  background-color: #e40a5d;
  display: inline-block;
  position: relative;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  -webkit-user-drag: none;
  color: #f1f1f1;
  text-align: center;
  line-height: 55px;
  font-size: 25px;
}

/**
 * This is the unordered list for the list items that contain
 * the child buttons.
 *
 */
.mfb-component__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mfb-component__list > li {
  display: block;
  position: absolute;
  top: 0;
  right: 1px;
  padding: 10px 0;
  margin: -10px 0;
}

/**
 * These are the basic styles for all the icons inside the main button
 */
.mfb-component__icon,
.mfb-component__main-icon--active,
.mfb-component__main-icon--resting,
.mfb-component__child-icon {
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px;
  width: 100%;
}

.mfb-component__wrap {
  padding: 25px;
  margin: -25px;
}

[data-mfb-toggle="hover"]:hover .mfb-component__icon,
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,
[data-mfb-toggle="hover"]:hover .mfb-component__child-icon,
[data-mfb-state="open"] .mfb-component__icon,
[data-mfb-state="open"] .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__child-icon {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}

/*------------------------------------*\
    #BUTTONS | Modifiers
\*------------------------------------*/
.mfb-component__button--main {
  height: 56px;
  width: 56px;
  z-index: 20;
  text-align: center;
  line-height: 55px;
  font-size: 25px;
}

.mfb-component__button--child {
  height: 56px;
  width: 56px;
}

.mfb-component__main-icon--active,
.mfb-component__main-icon--resting {
  -webkit-transform: scale(1) rotate(360deg);
  transform: scale(1) rotate(360deg);
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1);
}

.mfb-component__child-icon,
.mfb-component__child-icon {
  line-height: 56px;
  font-size: 18px;
}

.mfb-component__main-icon--active {
  opacity: 0;
}

[data-mfb-toggle="hover"]:hover .mfb-component__main-icon,
[data-mfb-state="open"] .mfb-component__main-icon {
  -webkit-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
}
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__main-icon--resting {
  opacity: 0;
  position: absolute !important;
}
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--active {
  opacity: 1;
}

/*------------------------------------*\
    #BUTTONS | Animations
\*------------------------------------*/
/**
 * SLIDE IN + FADE
 * When hovering the main button, the child buttons slide out from beneath
 * the main button while transitioning from transparent to opaque.
 *
 */
.mfb-component--tl.mfb-slidein .mfb-component__list li,
.mfb-component--tr.mfb-slidein .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
}
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1;
}
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  -webkit-transform: translateY(70px);
  transform: translateY(70px);
}
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  -webkit-transform: translateY(140px);
  transform: translateY(140px);
}
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  -webkit-transform: translateY(210px);
  transform: translateY(210px);
}
.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  -webkit-transform: translateY(280px);
  transform: translateY(280px);
}

.mfb-component--bl.mfb-slidein .mfb-component__list li,
.mfb-component--br.mfb-slidein .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
}
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
  opacity: 1;
}
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--bl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px);
}
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--bl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  -webkit-transform: translateY(-140px);
  transform: translateY(-140px);
}
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--bl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  -webkit-transform: translateY(-210px);
  transform: translateY(-210px);
}
.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--bl.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-slidein[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  -webkit-transform: translateY(-280px);
  transform: translateY(-280px);
}

/**
 * SLIDE IN SPRING
 * Same as slide-in but with a springy animation.
 *
 */
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1) {
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2) {
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3) {
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4) {
  transition-delay: 0.2s;
}
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li,
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li {
  opacity: 1;
}
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  transition-delay: 0.05s;
  -webkit-transform: translateY(70px);
  transform: translateY(70px);
}
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  transition-delay: 0.1s;
  -webkit-transform: translateY(140px);
  transform: translateY(140px);
}
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  transition-delay: 0.15s;
  -webkit-transform: translateY(210px);
  transform: translateY(210px);
}
.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  transition-delay: 0.2s;
  -webkit-transform: translateY(280px);
  transform: translateY(280px);
}

.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,
.mfb-component--br.mfb-slidein-spring .mfb-component__list li {
  opacity: 0;
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1) {
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2) {
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3) {
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4) {
  transition-delay: 0.2s;
}
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li,
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li,
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li {
  opacity: 1;
}
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  transition-delay: 0.05s;
  -webkit-transform: translateY(-70px);
  transform: translateY(-70px);
}
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  transition-delay: 0.1s;
  -webkit-transform: translateY(-140px);
  transform: translateY(-140px);
}
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  transition-delay: 0.15s;
  -webkit-transform: translateY(-210px);
  transform: translateY(-210px);
}
.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  transition-delay: 0.2s;
  -webkit-transform: translateY(-280px);
  transform: translateY(-280px);
}

/**
 * ZOOM-IN
 * When hovering the main button, the child buttons grow
 * from zero to normal size.
 *
 */
.mfb-component--tl.mfb-zoomin .mfb-component__list li,
.mfb-component--tr.mfb-zoomin .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(0);
  transform: translateY(70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(0);
  transform: translateY(140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(0);
  transform: translateY(210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(0);
  transform: translateY(280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(1);
  transform: translateY(70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(1);
  transform: translateY(140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(1);
  transform: translateY(210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(1);
  transform: translateY(280px) scale(1);
  transition-delay: 0.2s;
}

.mfb-component--bl.mfb-zoomin .mfb-component__list li,
.mfb-component--br.mfb-zoomin .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(0);
  transform: translateY(-70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(0);
  transform: translateY(-140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(0);
  transform: translateY(-210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(0);
  transform: translateY(-280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(1);
  transform: translateY(-70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(1);
  transform: translateY(-140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(1);
  transform: translateY(-210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(1);
  transform: translateY(-280px) scale(1);
  transition-delay: 0.2s;
}

/**
 * FOUNTAIN
 * When hovering the main button the child buttons
 * jump into view from outside the viewport
 */
.mfb-component--tl.mfb-fountain .mfb-component__list li,
.mfb-component--tr.mfb-fountain .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(0);
  transform: translateY(-70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(0);
  transform: translateY(-140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(0);
  transform: translateY(-210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(0);
  transform: translateY(-280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(1);
  transform: translateY(70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(1);
  transform: translateY(140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(1);
  transform: translateY(210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(1);
  transform: translateY(280px) scale(1);
  transition-delay: 0.2s;
}

.mfb-component--bl.mfb-fountain .mfb-component__list li,
.mfb-component--br.mfb-fountain .mfb-component__list li {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) {
  -webkit-transform: translateY(70px) scale(0);
  transform: translateY(70px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) {
  -webkit-transform: translateY(140px) scale(0);
  transform: translateY(140px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) {
  -webkit-transform: translateY(210px) scale(0);
  transform: translateY(210px) scale(0);
  transition: all 0.5s;
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) {
  -webkit-transform: translateY(280px) scale(0);
  transform: translateY(280px) scale(0);
  transition: all 0.5s;
  transition-delay: 0s;
}
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(1) {
  -webkit-transform: translateY(-70px) scale(1);
  transform: translateY(-70px) scale(1);
  transition-delay: 0.05s;
}
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(2) {
  -webkit-transform: translateY(-140px) scale(1);
  transform: translateY(-140px) scale(1);
  transition-delay: 0.1s;
}
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(3) {
  -webkit-transform: translateY(-210px) scale(1);
  transform: translateY(-210px) scale(1);
  transition-delay: 0.15s;
}
.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover
  .mfb-component__list
  li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-state="open"]
  .mfb-component__list
  li:nth-child(4) {
  -webkit-transform: translateY(-280px) scale(1);
  transform: translateY(-280px) scale(1);
  transition-delay: 0.2s;
}

/*------------------------------------*\
    #LABELS | base
\*------------------------------------*/
/**
 * These are the labels associated to each button,
 * exposed only when hovering the related button.
 * They are called labels but are in fact data-attributes of
 * each button (an anchor tag).
 */
[data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 0;
  transition: all 0.5s;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: normal;
  pointer-events: none;
  line-height: normal;
  position: absolute;
  top: 50%;
  margin-top: -11px;
  transition: all 0.5s;
}

[data-mfb-toggle="hover"] [data-mfb-label]:hover:after,
[data-mfb-state="open"] [data-mfb-label]:after {
  content: attr(data-mfb-label);
  opacity: 1;
  transition: all 0.3s;
}

/*------------------------------------*\
    #LABELS | Modifiers
\*------------------------------------*/
.mfb-component--br [data-mfb-label]:after,
.mfb-component--tr [data-mfb-label]:after {
  content: attr(data-mfb-label);
  right: 70px;
}

.mfb-component--br .mfb-component__list [data-mfb-label]:after,
.mfb-component--tr .mfb-component__list [data-mfb-label]:after {
  content: attr(data-mfb-label);
  right: 70px;
}

.mfb-component--tl [data-mfb-label]:after,
.mfb-component--bl [data-mfb-label]:after {
  content: attr(data-mfb-label);
  left: 70px;
}

.mfb-component--tl .mfb-component__list [data-mfb-label]:after,
.mfb-component--bl .mfb-component__list [data-mfb-label]:after {
  content: attr(data-mfb-label);
  left: 70px;
}

/*------------------------------------*\
    #DEVELOPMENT | In development
\*------------------------------------*/
/**
 * This part is where unfinished code should stay.
 * When a feature is ready(sh) move these styles to their proper place.
 */
/*------------------------------------*\
    #DEVELOPMENT | Debuggers
\*------------------------------------*/
/**
 * These are mainly helpers for development. They do not have to end up
 * in production but it's handy to keep them when developing.
 */
/**
 * Apply this class to the html tag when developing the slide-in button
 */

/*# sourceMappingURL=mfb.css.map */

aside {
  width: 55px;
  height: 325px;
  margin-top: -162px;
  position: fixed;
  top: 50%;
  right: 42px;
  z-index: 100;
}
aside ul li {
  width: 55px;
  height: 55px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

aside ul li i {
  display: block;
  background-position: center;
  width: 100%;
  height: 100%;
}
aside ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
aside ul li:nth-child(1) {
  background: #245aa7;
}
aside ul li:nth-child(2) {
  background: #27d367;
}
aside ul li:nth-child(3) {
  background: #fb9708;
}
aside ul li:nth-child(4) {
  background: #68bbb5;
}
aside ul li:nth-child(5) {
  background: #245aa7;
}
aside ul li:nth-child(1) i {
  width: 31px;
  height: 37px;
  background: url("/images/sidebar/email.png") no-repeat;
  background-size: 100%;
}
aside ul li:nth-child(2) i {
  width: 35px;
  height: 29px;
  background: url("/images/sidebar/wx.png") no-repeat;
}
aside ul li:nth-child(3) i {
  width: 33px;
  height: 33px;
  background: url("/images/sidebar/skype.png") no-repeat;
}
aside ul li:nth-child(4) i {
  width: 35px;
  height: 35px;
  background: url("/images/sidebar/phone.png") no-repeat;
}
aside ul li:nth-child(5) i {
  width: 34px;
  height: 36px;
  background: url("/images/sidebar/return.png") no-repeat;
}
aside ul li .asideHide {
  position: absolute;
  top: 0;
  right: 73px;
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
  min-width: 140px;
}
aside ul li .asideHide img {
  display: inline-block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 991px) {
  aside {
    right: 10px;
  }
}