body {  font-family: "Roboto", sans-serif; font-size: 16px; text-align: justify;color: #000} /* Theo font cua trinh duyet (1em = 10px)*/
.c_in {  width: 1200px;  margin: 0px auto !important;}
.border {  border: 1px solid #3d4b4e;}
.clear {  clear: both;}
li{list-style: none;}

/* ------------header ----------------------*/
.header {  height: 80px;  background: #008964d1 !important;}
.top-menu {  padding: 10px 5px;  text-align: right;  margin-top: 88px;}
.logo{float: left;}
.Hright {  position: absolute;  right: 0;  display: -webkit-box;  top: 33px;}
.inline-block {  display: inline-block;}
.lang {  position: absolute;  right: 0;  top: 2px;}
.vn {  background: url("../images/vn.png") no-repeat;  padding: 2px 9px;}
.en {  background: url("../images/en.png") no-repeat;  padding: 7px 9px;  display: inline-block;}
.logo {  margin: 0;}
.logo img {  max-height: 75px;}
.swiper{height: 55svh !important} 
/*------Menu----------*/
.main-sys-menu .sf-menu li{background: #ffffff;font-weight: bold;}
.HBright {  background-size: 100%;  height: 49px;}
.HB-menu {  height: 50px;}
.Hmenu {  background: #461300;  height: 41px;  display: none;}
.main-menu {  position: absolute;}
.mainmenu li {  background: none;}
.mainmenu li a {  border: none;  color: #fff;  font: 1.3em/1.4em "Roboto", sans-serif;  height: 36px;  margin: 0 0 0 0;  text-transform: uppercase;}
.mainmenu li a:hover {  color: #fff;}
.mainmenu > li:hover,
.mainmenu > li.sfHover {  background: #521a07;}
.sf-menu,.sf-menu * {  padding: 8px 0px 0;}
.li-level-2 a{padding: 15px}
.li-level-2 a:hover{color: #09999a}
.mainmenu > li:first-child:hover,
.mainmenu > li:first-child.sfHover {  border-radius: 0px 0 0 0;}
.mainmenu > li:last-child:hover,.mainmenu > li:last-child.sfHover {  border-radius: 0 0px 0 0;}
.sf-arrows .sf-with-ul {  padding-right: 17px;border: 0}
.sf-menu a{border-left: 0; border-top:0;color: #0e0e0e; }
.sf-arrows .sf-with-ul:after {  top: 50%;  right: 0em;  margin-top: -3px;  height: 0;}
.sf-menu ul {  box-shadow: none;}
.sf-menu ul {  position: absolute;  display: none;  top: 36px;  left: 0;  z-index: 99;  line-height: 1px;}
.mainmenu {  display: none;}
.mainmenu li li a {  padding: 9px 10px;  height: 33px;}
.sf-menu li:hover,.sf-menu li.sfHover {  vertical-align: middle;}
.main-menu li li {  background: #943413;  min-width: 195px;}
.main-menu li li a {  border-bottom: 1px solid #d21c37;}
.main-menu ul {  margin: 0 2px;}
.mainmenu > li li a {  background: #943413;  min-width: 195px;}
.mainmenu > li li a:hover {  background: #521a07;}
.fixedMenu{ position: fixed; top: 0px; left: 0px; width: 100%; box-shadow: 0 0 2px #333;background: #fff; z-index: 9999999;}
.fixedMenu .search_form{ padding-top: 0px;}
.maps iframe{width: 100% !important;height: 200px !important}
/*------Menu----------*/
.jssort01{bottom: -110px !important}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  background-color: #000202d1;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 14px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {  transition: margin-left .5s;  padding: 16px;font-size: 14px}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.sidenav ul.inline li{display: inline;}
/*--Face--*/
[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}
[data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] {
    transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
}
[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 1s;
}
[data-aos^=fade][data-aos^=fade] {
    opacity: 0;
    transition-property: opacity,transform;
}
.pro_sys .sys-breadcrumbs{text-align: center;}
ul.sys-breadcrumbs li a::after{content: ''}
ul.sys-breadcrumbs li::after {margin:0 10px;    content: '|';vertical-align: 0;}
ul.sys-breadcrumbs li:last-child::after {content: ''}
ul.sys-breadcrumbs li a{text-transform: uppercase;font-weight: bold;}ul.sys-breadcrumbs li a:hover{color: #09999a;}
/*--------slide-------------------*/
.line-pro {background: #09999a;    padding: 10px;    margin: 10px 0;}
.line-pro a{color: #fff; text-transform: uppercase;}
.bgr_slide {
  background: #383333;
  overflow: hidden;
}
.slide {
  margin: 1px 0;
}
.image_slidehome {
  display: none !important;
}
.sl {
  /*overflow: hidden;*/
}
.slabel {
  border-radius: 10px 10px 10px 10px;
}
.nivoSlider {
  background: #fff url(../images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
  position: absolute;
  top: 0px;
  left: 0px;
}
#Slider {
  background: url(../images/loading.gif) no-repeat 50% 50%;
}

.theme-default .nivo-directionNav a {
  display: block;
  width: 43px;
  height: 100px;
  background: url(../images/arrow.png) no-repeat;
  text-indent: -9999px;
  border: 0;
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.theme-default:hover .nivo-directionNav a {
  opacity: 1;
}
.theme-default a.nivo-prevNav {
  left: -56px;
}
.theme-default a.nivo-nextNav {
  background-position: -44px 0;
  right: -52px;
}

/*--------Main----------*/
.banner_sys{height: 79px;    background: #fff;}
.text-box1{float: right;}
.support{  font-size: 14px !important; background: #09999a;  padding: 10px 0;    height: 57px;}
.Mcontent {
  background: #fff;
}
.Mproduct {
  width: 327px;
  height: 330px;
  margin: 5px 1px;
  display: inline-block;
  vertical-align: top;
}
.Mpro {
  width: 322px;
  height: 320px;
 
  cursor: pointer;
}
/*Slide*/
.slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 525px;
 
}

.slick-slide img {
  width: 100%;
  height: 525px;
 
  /*object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  */
}
/*
.slick-slide img:hover {
  filter: grayscale(0);
}
*/
.slick-dots li button:before{display: none}
.slick-prev, .slick-next {
  font-size: 20px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #333;
  border-radius: 50%;
  padding: 10px;display: none !important;
}
 .slick-dots li{margin: 37px 5px;background: #fff}
.slick-prev:hover, .slick-next:hover {
  background-color: #333;
  color: #fff;
}

.slick-dots {
  bottom: -30px;
}

.slick-dots li button {
  font-size: 18px;
  color: #333;
}

.slick-dots li.slick-active button {
  color: #000;
}

.slider-item {
   background-color: #fafafa;
   cursor: pointer; /* Membuat seluruh konten bisa diklik */
  transition: background-color 0.3s ease;
}

.slider-item:hover {
  background-color: #e8e8e8; /* Efek hover pada artikel */
}

.slider-item h2 {
  font-size: 22px;
  color: #333;
  margin-bottom: 6px;
  font-weight: bold;
  white-space: nowrap; /* Menghindari judul membungkus ke baris baru */
  overflow: hidden;
  text-overflow: ellipsis; /* Memotong teks yang panjang */
  max-width: 100%; /* Maksimal sesuai lebar kontainer */
  display: block;
}

.slider-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Membatasi teks hanya 3 baris */
  -webkit-box-orient: vertical;
  text-align: justify; /* Menambahkan rata kanan kiri */
}

.slider-item h2,
.slider-item p {
  word-wrap: break-word; /* Memastikan teks tidak melampaui lebar kontainer */
}

.slider-item a {
  text-decoration: none;
  color: inherit; /* Mengambil warna dari elemen induk */
}

.slider-item a:hover {
  text-decoration: underline;
}
/*End Slide*/
.item {  margin-bottom: 0px;  height: 450px;  background: #fff;}
.item img {  width: 100%;  height: 100%;object-fit:cover}
.item:hover {
  border: 1px solid #c5c5c5;
}
.right_pro_infomation {
  width: 540px;
}
.index-boxa {  margin-bottom: 20px;}
.index-news ul li:first-child{width: 58%; float: left;height: 500px}
.index-news ul li:first-child .list-item-i3{height: 400px; overflow: hidden;margin-bottom: 15px;}
.index-news ul li:first-child img{width: 800px}
.index-news ul li:first-child .item-name a{font-size: 20px}
.index-news ul li{float: right;width: 30%;margin-bottom: 20px;}
.index-news ul li .list-item-i3{float: left;margin-right: 15px}
.index-news ul li .news-info{color: #000}
.item h2 {
  font: 1.5em/1.2em "Roboto", sans-serif;
  text-transform: uppercase;
  padding: 6px;
}

/*Slide content*/
.contain {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}
 
/*End Slide content*/
.M-title {
  font: 1.8em/1.8em "Roboto", sans-serif;
  color: #3f3f3f;
  padding: 0 10px;
}
.M-title:hover {
  text-decoration: none;
}
.Mpro img {
  padding: 10px 0;
  width: 93%;
  height: 200px;
  border: 3px solid #5ea7f1;
  border-radius: 21px;
}
.Mpro img:hover {
  border: 3px solid #2d63a7;
}

.M-noidung {
  font: 1.2em/18px "Roboto", sans-serif;
  color: #888888;
  padding: 5px 6px;

  text-align: justify;
  max-height: 62px;
  overflow: hidden;
}
/*--------Site trong*/
.SliderIn {
  height: 369px;
}

.bgr_slideIN {
  background: #fdbe0f;
  height: 369px;
}
 
.Main-left {
  float: left;
  width: 228px;
}

.L-menu {
  background: #e2e2e2;
  margin: 0px 0 15px;
}
.L-title {
  background: #461300;
  height: 39px;
  font: 1.2em/1.4em "Roboto", sans-serif;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  text-transform: uppercase;
}
.M-name {
  font: 1.2em/3em "Roboto", sans-serif;
  color: #b0b0b0;
  padding: 0 10px;
}

.v-menu li {
  background: #e5e5e5;
  white-space: nowrap;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  display: list-item;
  text-align: left;
 border-bottom: 1px dotted #bfbfbf;
  position: relative;
 
}
.main-sys-menu{float: right;}
.v-menu a {
  display: block;
  text-decoration: none;
  font-size:16px;
  color: #515252;
  zoom: 1;
  padding-left: 20px;
    padding: 8px;font-weight: bold;
}
.v-menu ul {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  min-width: 12em;
  z-index: 9;
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}
/*-----Ho tro--------*/

.M-boxHotro {
  background: #189ddf;
}
.H-bgr {
  background: #fff;
  width: 228px;
  margin: 10px 0;
}
.H-content {
  padding: 10px;
}
.H-content p:hover {
  background: #eaeaea;
}

.H-lv2 {
  border-bottom: 1px dotted #c3c3c3;
  font: 1.3em/1.3em "Roboto", sans-serif;
  color: #000;
  padding: 8px 0;
}
.ym {
  font: 1.2em/3em "Roboto", sans-serif;
  color: #7f7f7f;
}
.ym::before {
  content: "";
  background: url("../images/ym.png") no-repeat;
  padding: 8px 13px;
}
.sk {
  font: 1.2em/3em "Roboto", sans-serif;
  color: #7f7f7f;
}
.sk::before {
  content: "";
  background: url("../images/sk.png") no-repeat;
  padding: 8px 13px;
}
.tel {
  font: 1.2em/3em "Roboto", sans-serif;
  color: #7f7f7f;
}
.tel::before {
  content: "";
  background: url("../images/tel.png") no-repeat;
  padding: 8px 13px;
}
.mail {
  font: 1.2em/3em "Roboto", sans-serif;
  color: #7f7f7f;
}
.mail::before {
  content: "";
  background: url("../images/mail.png") no-repeat;
  padding: 8px 13px;
}
/*----------Main Right-------------*/
.Main-right {
  float: right;
  margin: 10px 0;
  background: #fff;
  width: 80% !important;
}
.system_forms.s_text_content {    font: 1.2em / 1.5em "Roboto", sans-serif;}
.lienket {
  display: block;
}
.LK-title {
  font: 1.1em/3em "Roboto", sans-serif;
  color: #3c8ae1;
  padding: 0 10px;
}
.LK-box {
  border-bottom: 1px dotted #a4a4a4;
}
 
.right_pro_infomation {
  min-height: 250px;
}
.telephone strong{color: #fff !important;}
 
.product-sys-other {
  width: 25.1%;
  border: 1px solid #efefef;
  display: inline-block;
  vertical-align: top;
  margin: -1px;
}
.product-sys-other:hover {
  box-shadow: 0px 0px 5px 0px #9e9e9e;
}

.product-sys-other img {
  width: 100%;
  height: 200px;
}
.ND-title {  font: bold 14px/20px "Roboto", sans-serif;  color: #000;  padding: 0 10px;  max-height: 3em;     margin-top: 10px;}
.ND-tomtat {  font: 13px/18px "Roboto", sans-serif;  color: #000;  padding: 0 10px;  text-align: justify;  max-height: 54px; }
.Price {  display: -webkit-box;  padding: 0 10px;  min-height: 20px;  color: #09999a;  font-size: 15px;}
.price {  padding: 3px 0;color: #09999a}
.aprice {  display: inline-flex;}
.Nprice {  color: #858585;  padding: 0 2px;}
.Inprice {  font: 1.2em/2.5em "Roboto", sans-serif;  color: #ff0000;  padding: 0 2px;}
.Detail {  color: #fff;  background: #257ada; margin: -7px 10px;  padding: 3px 18px;  cursor: pointer;border-radius:10px }
.Detail a {  font: 1.0em/1.2em "Roboto", sans-serif;  color: #fff;}
.Detail:hover {  background: #0b315b;}
.estore{color: #157715}
.systemPaging .btnPaging {  background-color: #2b9b7d;}
.checkout-pad {font-size: 14px}
/*Mạng xĂ£ há»™i*/
.social-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 36px;
    margin-right: 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: .99;
    border-radius: 0;
}
   
.social-footer { padding-top: 5px;text-align: center;}
.social-button.youtube i {color: #000;}
.social-button:hover i {color: #09999a;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.social-button i {
    font-size: 23px;
    vertical-align: middle;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);color: #000;background: transparent
}
.fab {font-family: "Font Awesome 5 Brands";}
.fab, .far {font-weight: 400;}
.fa, .fab, .fad, .fal, .far, .fas {-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;}
.fa-facebook-f:before { content: "\f39e";}
.social-button.facebook:before { background-color: #3B5998;}
.social-button.twitter:before{background-color:#000}
.social-button.twitter i{color:#000}
.social-button.google:before{background-color:#000}
.social-button.google i{color:#000}
.social-button.youtube:before{background-color:#000}
 
.social-button:hover:before{top:-10%;left:-10%}
 
.social-button:focus{opacity:.85}
/*End Mạng xĂ£ há»™i*/
/*-Noi dung du an--*/
.owl-carousel{overflow: hidden;text-align: center;}
.sys_project_detail_name{color: #000}
.ext3 ul li{padding: 10px;    background: #fff;    margin-bottom: 20px;height: 450px;}
.ext3 ul li .imghoverext3{height: 380px}
.ext3 ul li .imghoverext3 img{height: 100%; width: 100%; object-fit:cover}
.ext3 .title123{background: #000;    color: #fff;    text-align: center;    padding: 10px;font-size: 20px; font-weight: bold;}
.titleext3{text-align: center;   font-size: 35px;font-weight: bold;color: #118264;}
/*Case1*/
.box-content-case1{width: 77%; float: right;}
.index-box-case1 .box-content-case1 .item{	display: inline-block;margin: 0 5px; padding-bottom: 20px;    width: 32.1%; height: 335px ;border-radius: 5px;}
.line-case1 .box-title a{    font-family: 'Muli', sans-serif;    color: #588917;  font-weight:bold   ;font-size: 22px;    display: block;    text-transform: uppercase; }
.line-case1 .box-title{width: 25%; float: left;height: 45px;text-align: left;}
.subbox ul li{  text-transform: uppercase;font-size: 14px;   padding: 5px 10px;    border-radius: 7px;float: left;}
.subbox ul li:hover{background: #09999a} .subbox ul li:hover a{color: #fff}
.item-box-case1 .box-content-case1 .item .img img{width: auto;height: 100%;width:100%; transition: filter .6s, opacity .6s, transform .6s, box-shadow .3s;object-fit:cover}
.item-box-case1 .box-content-case1 .item .img img:hover {transform: scale(1.1);}
.item-box-case1 .box-content-case1 .item .item-btn-group{background-color: green;	position: absolute;    top: 54px;    right: 0;}
.item-box-case1 .box-content-case1 .item .item-btn-group a{	color: #ffd200 ;font-size: 12px;}
.item-box-case1 .item .img{text-align: center;height: 275px; overflow: hidden;}
.item-box-case1 .item {overflow: hidden;}
.item-box-case1 .item .item-info .s1{ z-index: 1; }
.item-box-case1 .item .item-info {height: auto;text-align: center;}
.img-left{width: 350px; float: left;height: 675px; overflow: hidden;    border-radius: 10px;}
.img-left img{height: 685px;}
.boxcase{background-size: 50%;}
.infotext{font-size: 13px; text-align: justify;min-height: 415px;}
.boxcase2{height: 650px;}
.moreview{float: right;    background: #345804;    padding: 7px 35px;    font-size: 13px;       text-transform: uppercase;    border-radius: 10px;}
.moreview a{color: #fff; }
.moreview:hover{background: #90c14d}
.moreview:hover a{color:#ffaa3d}

/*Case2*/
.c2-sys{padding: 10px 0}
.box-content-case2{width: 100%;}
.index-box-case2 .box-content-case1 .item{	display: inline-block;margin: 0 5px; padding-bottom: 20px;    width: 32.1%; height: 335px ;border-radius: 5px;}
.line-case1 .box-title a{    font-family: 'Muli', sans-serif;    color: #588917;  font-weight:bold   ;font-size: 22px;    display: block;    text-transform: uppercase; }
.line-case1 .box-title{width: 25%; float: left;height: 45px;text-align: left;}
.subbox-c2{text-align: center;}
.subbox-c2 ul{    display: flex;    justify-content: center;    flex-flow: wrap;}
.subbox-c2 ul li{margin: 0 5px; padding: 5px 10px; border-radius:15px }
.subbox-c2 ul li:hover{background: #09999a} 
.subbox-c2 ul li:hover a{color: #fff}
.index-box-case2 .box-content-case2 .item .img img{width: auto;height: 100%;width:100%; transition: filter .6s, opacity .6s, transform .6s, box-shadow .3s;object-fit:cover}
.index-box-case2 .box-content-case2 .item .img img:hover {transform: scale(1.1);}
.index-box-case2 .box-content-case2 .item .item-btn-group{background-color: green;	position: absolute;    top: 54px;    right: 0;}
.index-box-case2 .box-content-case2 .item .item-btn-group a{	color: #ffd200 ;font-size: 12px;}
.index-box-case2 .item .img{text-align: center;height: 275px; overflow: hidden;}
.index-box-case2 .item {overflow: hidden;}
.index-box-case2 .item .item-info .s1{ z-index: 1; }
.index-box-case2 .item .item-info {height: auto;text-align: center;    margin-top: 15px;}
.img-left{width: 350px; float: left;height: 675px; overflow: hidden;    border-radius: 10px;}
.img-left img{height: 685px;}
.boxcase{background-size: 50%;}
.infotext{font-size: 13px; text-align: justify;min-height: 415px;}
.boxcase2{height: 650px;}
.moreview{float: right;    background: #345804;    padding: 7px 35px;    font-size: 13px;       text-transform: uppercase;    border-radius: 10px;}
.moreview a{color: #fff; }
.moreview:hover{background: #90c14d}
.moreview:hover a{color:#ffaa3d}
.item-price{color: #09999a}
.transition{-webkit-transition:0.3s ease-out;-moz-transition:0.3s ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out;}
 
.carousel-wrap {  margin: 20px auto;  width: 100%;  position: relative;}
.owl-next{position: absolute;    right: 0 !important;    top: 35%;z-index: 99}
.owl-prev{position: absolute; top: 35%;z-index: 99; left: 0 !important; }
.owl-carousel button.owl-dot{border: 1px solid #000 !important; padding: 5px 11px !important; margin: 8px 0}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel button.owl-dot:hover{background: #09999a; color: #fff}
.owl-carousel .owl-nav button.active, .owl-carousel .owl-nav button.active, .owl-carousel button.active{background: #09999a;color: #fff; font-weight: bold;}
/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100; 
  -webkit-backface-visibility: hidden; 
}

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}
/*  Numbers */
.owl-dots {
    counter-reset: dots;text-align: center;
}
.owl-dot:before {
    counter-increment:dots;
    content: counter(dots);
}
/*Case3*/
.box-content-case3{width: 100%;}
.index-box-case3 .box-content-case3 .item{	display: inline-block;margin: 0 5px; padding-bottom: 20px;    width: 24.1%; height: 400px ;border-radius: 5px;}
.line-case1 .box-title a{    font-family: 'Muli', sans-serif;    color: #588917;  font-weight:bold   ;font-size: 22px;    display: block;    text-transform: uppercase; }
.line-case1 .box-title{width: 25%; float: left;height: 45px;text-align: left;}
.index-box-case3 .box-content-case3 .item .img img{width: auto;height: 100%;width:100%; transition: filter .6s, opacity .6s, transform .6s, box-shadow .3s;object-fit:cover}
.index-box-case3 .box-content-case3 .item .img img:hover {transform: scale(1.1);}
.index-box-case3 .box-content-case3 .item .item-btn-group{background-color: green;	position: absolute;    top: 54px;    right: 0;}
.index-box-case3 .box-content-case3 .item .item-btn-group a{	color: #ffd200 ;font-size: 12px;}
.index-box-case3 .item .img{text-align: center;height: 275px; overflow: hidden;}
.index-box-case3 .item {overflow: hidden;}
.index-box-case3 .item .item-info .s1{ z-index: 1; }
.index-box-case3 .item .item-info {height: auto;text-align: center;    margin-top: 15px;}
.img-left{width: 350px; float: left;height: 675px; overflow: hidden;    border-radius: 10px;}
.img-left img{height: 685px;}
.boxcase{background-size: 50%;}
.infotext{font-size: 13px; text-align: justify;min-height: 415px;}
.boxcase2{height: 650px;}
.moreview{float: right;    background: #345804;    padding: 7px 35px;    font-size: 13px;       text-transform: uppercase;    border-radius: 10px;}
.moreview a{color: #fff; }
.moreview:hover{background: #90c14d}
.moreview:hover a{color:#ffaa3d}
.item-price{color: #09999a}
.transition{-webkit-transition:0.3s ease-out;-moz-transition:0.3s ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out;}
 
/*Case 4*/
.c4-sys ul{display: flex;justify-content: space-between;flex-flow: wrap;}
.c4-sys ul li{width: calc(32% - 0px) ;margin: 10px 0; height: 385px;border-radius: 10px;    background: #fff;    overflow: hidden;}
.c4-sys ul li .imgover-c4{width: 100%; height: 265px; overflow: hidden;}
.c4-sys ul li .imgover-c4 img{height: 100%; width: 100%; object-fit:cover}
.c4-sys ul li .c4-sys-name{font-size: 16px; font-weight: bold;}
.c4-sys ul li .c4-sysbox{margin: 20px 0; padding: 10px}
.c4-sys ul li .c4-sys-info{font-size: 14px}
.box-title {text-align: center; background: #09999a;padding: 5px 0; margin-bottom: 5px}
.box-title a{color: #fff; font-size: 25px;font-weight: bold;}
/*-QC--*/
.text-box1{color: #fff}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled{display: inline;text-align: center;}
.sys-lef{float: left;width: 25%;height: 525px;    background: #e5e5e5; }
.sys-lef .dm-menu{background: #09999a; padding: 10px 0; color: #fff; text-align: center;text-transform: uppercase;}
.sys-right{float: right;width: 75%}
.system-style.ul-detail .l-right .right-content .price {
  display: inline-block;
  padding: 0;
}
.add-cart-buttons{   height: 48px;    line-height: 48px;    text-align: center;    font-size: 18px;    font-weight: bold;margin-left: 20px;}
.cart-sys {  background: url(../images/cart.png) no-repeat 0 50%;    padding-left: 36px;    font-size: 14px;margin-top: 18px;padding: 10px 35px;}
.social-buttons{display: none}
/*Cart*/
.main_menu{float: left;}
.cart {    float: right;    background: url(../images/cart.png) no-repeat 0 50%;    padding-left: 36px;    font-size: 12px;margin-top: 18px;}
.cart .p1 {    color: #09999a;}
.center {    text-align: center;}
.cart p{color: #000;font-size: 15px}
/*Ebd*/
#main.cart {
  background: none;
  background: transparent;
  margin: 0;
  padding: 0;
}
.Main-right.fl100 {
  width: 100%;
}
.tab-content{font-family: "Roboto", sans-serif !important}
.tab-content img{height: auto !important; width: 70% !important;margin:  15px 0 }
.payment{font-size: 18px;    font-weight: bold;    color: red;   margin-bottom: 5px;}
.main-sys-menu .text-level-1{display: none;}
.banner-sys{margin: 5px auto}
.system-style.bottom_nav li a{font: bold 1.0em/2.0em "Roboto", sans-serif}
.system-style.bottom_nav li li a,
.system-style.bottom_nav li .mn-intext {  font: 1.0em/2.0em "Roboto", sans-serif;color: #e9e9e9;}
.system-style.bottom_nav li{border-right:none}
.ft_in_content_flcx{font-size: 13px; text-align: center;line-height: 18px}
.system-style.footer {  background-color: #09999a !important}
.system-style.addContact {  background: #058485;  border-top: none;margin:0;}
/*.product__cart{background: #c90000;    color: #fff;    width: 100px;    margin: 0 auto;    padding: 5px;    border-radius: 10px;margin-top: 15px}*/

@media screen and (max-width:1400px) {
	.index-box-case1 .box-content-case1 .item{width: 32.1%;}
}
@media screen and (max-width:1180px) {
	.index-box-case1 .box-content-case1 .item{width: 48%;}
	.box-content-case1 {   width: 71%;}
	.index-box-case1{overflow: hidden;}
}
@media screen and (max-width:970px) {
	.index-box-case1 .box-content-case1 .item{width: 48%;}
	.box-content-case1 {        width: 70%;    }
}

.search-form .input-text {
  width: 300px;
  height: 100%;
  border: none;
  border: 1px solid #d9d9d9;
  background: transparent;color: #fff;padding:7px;
}
.search-form .btn-submit-search {  background: #fff url(../images/btn_search.png) center center no-repeat;  width: 34px;  height: 34px;  cursor: pointer;  border: 1px solid #fff;}
.search-top form {
  display: block;
  position: relative;
  width: 333px;
}
.SearchR { float: left;}
.search-form {
  height: 35px;
  font-size: 12px;
  color: #000;
}
.Mmidle {
  display: -webkit-box;
  margin-bottom: 15px;
}
.Ma {
  width: 394px;
  border: 1px solid #e8e8e8;
  padding: 10px;
}
.Mb {
  width: 394px;
  border: 1px solid #e8e8e8;
  margin: 0 10px;
  padding: 10px;
}
.Mc {
  width: 394px;
  border: 1px solid #e8e8e8;
  padding: 10px;
}

.col-sm-6 {
  width: 30%;
  padding: 0 35px;
}
.col-sm-4 {
  width: 33.33333333%;
  text-align: center;
  margin: 10px 0;
  padding-top: 5px;
}
.item-imgbox img {
  width: 100%;
  height: 192px;
}
.col-sm-4:hover {
  background: #ededed;
}


.listSubMenu-case1 {
  text-align: center;
  clear: both;
  margin: 10px 0;
}
.listSubMenu-case1 li {  display: inline-block;  margin: 5px;}
.listSubMenu-case1 li a {  display: inline-block;  padding: 10px;  color: #444;  text-transform: uppercase;font-weight: bold;}
.listSubMenu-case1 li a:hover {  background-color: #b5b5b5;  color: #fff;  border-radius: 5px;}
.b-title-01 {  border-bottom: 1px solid;  margin: 10px 0;}
.b-title-01 a {  font: bold 1.6em/2.3em "Roboto", sans-serif;  color: #4a3b08;  text-transform: uppercase;  text-shadow: 1px 1px #fff;font-size: 40px;}
.b-title-01{text-align: center;}
.index-boxa .pro_sys_c1{display: flex;    flex-flow: row wrap;    justify-content: space-between;}
.index-boxa .pro_sys_c1 li{width:calc(23% - -18px);margin-bottom: 10px;}
.item-name {  font: bold 1.0em/1.5em "Roboto", sans-serif;  text-transform: uppercase; }
.list-item-i1 {
  overflow: hidden;
  height: 190px;
  width: 290px;
}
.list-item-i1 .item-name {
  position: absolute;
  top: 0;
  left: 0;
  height: 190px;
  padding-top: 80px;
  text-align: center;
  color: #444;
  width: 100%;
  opacity: 0;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.5);
}

.list-item-i2 {
  overflow: hidden;
  height: 290px;
  width: 290px;
  margin-bottom: 5px;
}
.list-item-i2 .item-name {
  position: absolute;
  top: 0;
  left: 0;
  height: 290px;
  padding: 230px 10px 0 10px;
  text-align: left;
  color: #444;
  width: 100%;
  opacity: 0;
  margin-top: 0;
  background: rgb(255 255 255 / 56%);
}
.list-item-i2 img {
  width: 290px;
  height: 290px;
}
 
.list-item-i3 .news-info {
  font-size: 13px;
  text-align: justify;
}

.system-style.s_list_news li {
  width: 32.33%;
  height: 370px;
}
.system-style.s_list_news li img {
  width: 370px;
  float: none;
  height: 200px;
  margin: 0;
}
.system-style.s_list_news li .nname {
  margin-top: 10px;
}
@media all and (max-width: 1024px) {
  c_in {
    width: 1024px;
    margin: 0px auto;
  }
  .right-sidebar {
    width: 779px;
    background: #fff;
  }
  .Main-right {
    width: 779px;
  }
  .right_pro_infomation {
    width: 370px;
  }
}

.nivo-directionNav {
  position: absolute;
  z-index: 888;
  top: 60%;
  left: 0;
  width: 100%;
}
.theme-default .nivo-directionNav a {
  opacity: 1;
}
.theme-default a.nivo-prevNav {
  left: 30px;
}
.theme-default a.nivo-nextNav {
  right: auto;
  left: 315px;
}

.theme-default .nivo-controlNav {
  position: absolute;
  top: 60%;
  padding-top: 43px;
  left: 74px;
  display: block;
  z-index: 888;
  width: 244px;
  text-align: center;
}
.theme-default .nivo-controlNav a {
  background: #fff;
  border-radius: 11px;
}
.theme-default .nivo-controlNav a.active {
  background: #777;
}

.sys_project_detail_tab .nav {
  display: none;
}

.listProducts_detail .product-sys {
  width: 238px;
}


#vnt-menu-fixed{
    position: fixed;
    bottom: 20%;
    right: 0px;
    z-index: 6;
}
#vnt-menu-fixed .contfii {
    display: block;
    transform: rotate(-90deg);
    margin-right: -160px;
    position: relative;
    left: -82px;
    top: -90px;
}
#vnt-menu-fixed .contfii a{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a7dc4;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    padding: 10px 20px;
}
#vnt-menu-fixed .contfii a:hover{
    background-color: #3399cc;
}
#vnt-menu-fixed>ul>li{
    position: relative;
    margin-bottom: 5px;
}
#vnt-menu-fixed>ul>li:last-child{
    border-bottom: none;
}
#vnt-menu-fixed>ul>li>span{
    position: absolute;
    top: 0;
    white-space: nowrap;
    color:#3399cc;
    font-size: 14px;
    line-height: 22px;
    right:50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
   /* background: #3399cc;*/
    overflow: hidden;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width: 0;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    opacity: 0;
    visibility: hidden;
}
#vnt-menu-fixed>ul>li>span>span{
    color:#fff;
}
#vnt-menu-fixed>ul>li:hover>span{
    width:auto;
    overflow: visible;
    opacity: 1;
    padding: 2px 30px 2px 15px;
    visibility: initial;
}

#vnt-menu-fixed>ul>li:hover>span:before{
    display: block;
}
#vnt-menu-fixed>ul>li>a{
    width: 45px;
    height: 45px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #0a7dc4;*/
    border-radius: 100%;
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 2;
}
#vnt-menu-fixed>ul>li.go_top>a{
    background-color: #3399cc;
}
#vnt-menu-fixed>ul>li>a>img{
    max-height: 30px;
    max-width: 30px;
    /* filter: invert(1); */
}
#vnt-menu-fixed>ul>li>a span{
    font-size: 25px;
    line-height: 38px;
    color: #3399cc;
    padding-top: 3px;
}
#vnt-menu-fixed a{
    color: #080808;
}
#vnt-menu-fixed>ul>li:hover>a{
 
}
/*===============*/
#vnt-menu-fixed ul li.cart>a{
    flex-direction: column;
    position: relative;
    padding-right: 5px;
    color: #fff;
}
#vnt-menu-fixed ul li.cart>a .sl{
    position: absolute;
    top: 10px;
    right: 6px;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 11px;
    text-align: center;
}
#vnt-menu-fixed>ul>li.cart>a>img{
    max-height: 20px;
    max-width: 20px;
}

.vnt-bg-over.active{
    opacity: 0.5;
    z-index: 5;
    pointer-events: auto;
}
/*===============*/

/*---- Phone----*/
.phonering-alo-phone.phonering-alo-static {
    opacity:.6
}

.phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {
    opacity:1
}

.phonering-alo-ph-circle {
    width:160px;
    height:160px;
    top:20px;
    left:20px;
    position:absolute;
    background-color:transparent;
    border-radius:100% !important;
    border:2px solid rgba(30,30,30,0.4);
    border:2px solid #bfebfc 9;
    opacity:.1;
    -webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
    -webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
    animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
    border-color:#75eb50 ;
    border-color:#baf5a7;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
    border-color:#00aff2 ;
    border-color:#bfebfc;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
    border-color:#ccc;
    opacity:.5
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
    border-color:#75eb50 ;
    opacity:.5
}

.phonering-alo-ph-circle-fill {
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    position:absolute;
    background-color: #000;
    border-radius:100% !important;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
    -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
    opacity:0!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
    background-color:#00aff2 9;
    opacity:.75!important
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    background-color:#baf5a7 9;
    opacity:.75!important
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
    background-color:#a6e3fa 9
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
    background-color:rgba(204,204,204,0.5);
    background-color:#ccc 9;
    opacity:.75!important
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    opacity:.75!important
}

.phonering-alo-ph-img-circle {
    width:60px;
    height:60px;
    top:70px;
    left:70px;
    position:absolute;
    background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;
    border-radius:100% !important;
    border:2px solid transparent;
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%
}

.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
    -webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
    animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
}

.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
    background-color:#00aff2
}

.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
    background-color:#75eb50;
    background-color:#75eb50 9
}

.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
    background-color:#00aff2;
    background-color:#00aff2 9
}

.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
    background-color:#ccc
}

.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
    background-color:#75eb50
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
        -webkit-opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        -webkit-opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        -webkit-opacity:.1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}

@keyframes fadeInRight {
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }

    100% {
        opacity:1;
        -webkit-transform:none;
        -ms-transform:none;
        transform:none
    }
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity:1
    }

    100% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity:1
    }

    100% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
}

@-webkit-keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
                transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.1
    }
}

@keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
                transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1
    }

    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.1
    }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg);
        opacity:.2
    }

    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
                transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2
    }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }
}

@keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                transform:rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                transform:rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }

    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
                transform:rotate(0) scale(1) skew(1deg)
    }
}
/*----End----*/