/*******************************************************
    SP Banner Style
********************************************************/
.box-banner .spbanner{margin-bottom: 10px;}
.effect-1 a {
  display: block;
  position: relative;
  overflow: hidden; }
  .effect-1 a:before {
    background: transparent linear-gradient(to right, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.4) 100%) repeat scroll 0 0;
    content: "";
    display: block;
    height: 100%;
    left: -150%;
    position: absolute;
    top: 0;
    transform: skewX(-40deg);
    transition: all 1s ease 0s;
    width: 50%;
    z-index: 9; }
  .effect-1 a:hover:before {
    left: 150%; }
.effect-1 .img2 {
  margin-bottom: 30px; }

.effect-2 a {
  position: relative;
  display: block;
  overflow: hidden; }
  .effect-2 a:before, .effect-2 a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease; }
  .effect-2 a:before {
    top: -100%;
    left: -100%; }
  .effect-2 a:after {
    bottom: -100%;
    right: -100%; }
  .effect-2 a:hover:before {
    top: 0px;
    left: 0px; }
  .effect-2 a:hover:after {
    bottom: 0px;
    right: 0px; }

.effect-3 {
  position: relative;
  overflow: hidden; }
  .effect-3:before, .effect-3:after {
    content: "";
    position: absolute;
    display: block;
    z-index: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
  .effect-3:before {
    height: 1px;
    top: 10px;
    left: 50%;
    right: 50%;
    background-color: white; }
  .effect-3:after {
    width: 1px;
    left: 10px;
    top: 50%;
    bottom: 50%;
    background-color: white; }
  .effect-3 a {
    position: relative;
    display: block; }
    .effect-3 a:before, .effect-3 a:after {
      content: "";
      position: absolute;
      display: block;
      z-index: 1;
      -webkit-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out; }
    .effect-3 a:before {
      height: 1px;
      bottom: 10px;
      left: 50%;
      right: 50%;
      background-color: white; }
    .effect-3 a:after {
      width: 1px;
      right: 10px;
      top: 50%;
      bottom: 50%;
      background-color: white; }
  .effect-3:hover:before {
    left: 10px;
    right: 10px; }
  .effect-3:hover:after {
    top: 10px;
    bottom: 10px; }
  .effect-3:hover a:before {
    left: 10px;
    right: 10px; }
  .effect-3:hover a:after {
    top: 10px;
    bottom: 10px; }

.banner1 {
  overflow: hidden;
  margin-bottom: 14px; }
  .banner1 .banner-img1 {
    float: left;
    width: calc(50% - 7px); }
  .banner1 .banner-img2 {
    float: right;
    width: calc(50% - 7px); }

.banner2 {
  overflow: hidden;
  margin-bottom: 50px; }
  .banner2 .banner-img1 {
    float: left;
    margin: 0 14px 0 0; }
  .banner2 .banner-img2 {
    float: left;
    margin: 0 14px 0 0; }
  .banner2 .banner-img3 {
    float: left; }

.bannerHomeThree {
  position: relative;
  width: 100%;
  overflow: hidden; }
  .bannerHomeThree .bannerRow {
    margin-left: -4px;
    margin-right: -4px; }
    .bannerHomeThree .bannerRow:after {
      content: "";
      display: table;
      clear: both; }
    .bannerHomeThree .bannerRow > div {
      float: left;
      width: 50%;
      padding-left: 4px;
      padding-right: 4px; }
  .bannerHomeThree .bannerLeftBottom,
  .bannerHomeThree .bannerRightBottom {
    margin-top: 8px; }

.bannerHomeTwo {
  margin-top: 20px; }
  .bannerHomeTwo > .row {
    margin-left: -10px;
    margin-right: -10px; }
    .bannerHomeTwo > .row > div[class*='col-'] {
      padding-left: 10px;
      padding-right: 10px; }

.fourBannerHome .row {
  margin-left: -10px;
  margin-right: -10px; }
  .fourBannerHome .row > div[class*="col-"] {
    padding-left: 10px;
    padding-right: 10px; }
.fourBannerHome .bannerBox.one {
  margin-bottom: 20px; }

.fourBannerHome4 .rowTop {
  padding-right: 5px; }
  .fourBannerHome4 .rowTop > .row {
    margin-left: -10px;
    margin-right: -10px; }
    .fourBannerHome4 .rowTop > .row > div[class*='col-'] {
      padding-left: 10px;
      padding-right: 10px; }
.fourBannerHome4 .bannerBox.two, .fourBannerHome4 .bannerBox.three {
  margin-top: 20px; }

@media (max-width: 1199px) {
  .banner2 {
    margin-left: -7px;
    margin-right: -7px; }
    .banner2 > div {
      padding-left: 7px;
      padding-right: 7px; }
    .banner2 .banner-img1 {
      margin: 0px;
      width: 25.1%; }
    .banner2 .banner-img2 {
      margin: 0px;
      width: 49.8%; }
    .banner2 .banner-img3 {
      margin: 0px;
      width: 25.1%; } }

@media (min-width: 992px) and (max-width: 1199px) {
    .block.effect-1.spbanner{
        margin: 0px 0 24px 0;
    }
}
@media (max-width: 543px) {
  .banner1 {
    margin-bottom: 5px; }
    .banner1 .banner-img1 {
      margin-bottom: 5px;
      width: 100%; }
    .banner1 .banner-img2 {
      width: 100%; }

  .banner2 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-left: -3px;
    margin-right: -3px; }
    .banner2 > div {
      padding-left: 3px;
      padding-right: 3px; }
    .banner2 .banner-img1 {
      order: 2;
      width: 50%; }
    .banner2 .banner-img2 {
      order: 1;
      width: 100%;
      margin-bottom: 6px; }
    .banner2 .banner-img3 {
      order: 3;
      width: 50%; }

  .bannerHomeThree > .bannerRow > div {
    width: 100%; }
  .bannerHomeThree > .bannerRow .bannerLeft {
    margin-bottom: 10px; } }

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