.indextitle span{margin:50px auto; line-height: 70px; border-bottom: 2px solid #1e489c; 
  display: inline-block; text-align: center; font-size: 20px; color: #1e489c}
.indextitle { text-align: center; }


.arrow{ background: #018e88; width:80%; padding-left: 10%; overflow: hidden; margin-top:-5px; float: left;  color: #fff }
.arrow em{ background: #ffd615; padding: 30px;  float: right;  height: 100%; display: block; 
  overflow: hidden; height:30px }
.arrow dl{ float: left; margin: 20px 0; }
.arrow dl dt{ line-height: 47px }
.arrow dl dt i{ font-size: 20px }
.arrow dl dd{color: #0f9579;}
.arrow span{ float: left; margin-left: 100px; font-size: 18px; margin-top:26px; line-height:45px }

.arrow span img{ float: left; margin-right: 10px; vertical-align: 10px }



.indextit {     padding: 20px 0;
    overflow: hidden;
    display: block;  text-align: center;}
.indextit p{border-bottom: 3px solid #018e88;; padding: 20px 0; display: inline-block; font-size: 30px }
.indextit strong{ font-size: 30px; line-height: 50px; display: block;  margin-top:30px;  }
.indextit em{  width: 50px; height:2px; display: inline-block; background: #018e88; }
.indextit span{ padding: block; color: #999; display: block; line-height:18px; font-size: 16px; margin-top: 10px;  }
.indexcon{ background: url(../images/bodybg_04.jpg) no-repeat center top; width: 100%; overflow: hidden; }
.aboutindex { overflow: hidden; display: block;  background:url(../images/aboutbg.jpg) no-repeat  center top; background-size: 100% auto;
  padding-bottom: 20px; margin: 60px auto 0!important; }
.aboutindex strong,.aboutindex span{ color: #fff }
.aboutindex em{ background: #fff }


.productbox{ background: #f8f8f8 ; padding-bottom: 50px}

/*关于我们*/
.why{min-height: 550px;position: relative;}
.why .whybg{background: #018e88;width:35%;min-height: 500px;}
.why .whyinner{position: absolute;top: 0px;left: 50%;margin-left: -600px;width: 1200px;overflow: hidden;}
.why .whyinner div{}
.why .whyinner div strong{margin-top: 70px;float: left;width: 670px}
.why .whyinner div strong img{ width: 100% }
.why .whyinner div p{width: 500px;float:right;color: #000;font-size: 14px;line-height: 30px;max-height: 420px;overflow: hidden;}
.why .whyinner div p img{display: block;margin-bottom: 20px}








/*优势*/
#particles-js, #parallax, .layer, .some-space, .some-more-space {
  font-family: "Lato";
  background:#018e88; 
  background-size: 100% 100%;
  width: 100%;
  overflow: hidden;
  height:1000px;
  display: block;


}


.goodblock{ position:absolute; width: 1200px; left: 50%; margin-left: -600px; margin-top:100px; z-index: 100;  display: block;  color: #fff}
.goodtit  {   text-align: center   }
.goodtit em  { font-size:40px; font-weight: bold;    }
.goodtit i  { font-size:14px;  color: #aad4f4; display: block;   }

.goodcon{ position: relative;  height: 836px}
.goodconleft{float:left;  position: absolute; width: 400px; left: 0; border:4px solid #cae9f9;  top: 50px;  height:540px; padding: 30px; background: url(../images/1.jpg);  }
.goodconright{float:right;  position: absolute; width: 760px; right: 0; background: #fff; padding:30px; height: 460px; top: 100px; background: url(../images/goodbg.jpg) no-repeat; }
.goodconleft .gctit{ font-size: 90px; line-height: 100px; margin-top: 50px; font-weight: bold;width: 342px }
.goodconleft .gctit em{display: block; font-size: 25px; font-weight: normal; }

.goodconleft .gctext{ border: 1px  solid #cae9f9; display: inline-block; padding: 10px 20px; margin: 30px 0; overflow: hidden; font-size: 18px }
.goodconleft ul { display: block; width: 100%; overflow: hidden; }
.goodconleft ul li{ float: left;  text-align:center; margin-right:20px; }
.goodconleft ul li img{ padding: 20px; height: 50px;  width: 50px; border: 1px solid #cae9f9  }
.gccontact em{ font-size:16px; }

.gccontact { margin-top:50px; }
.gccontact img { vertical-align: -6px; margin-right: 10px }
.gccontact i{ font-size: 20px; color: #ff0 }

.goodconright ul li{ float: left; width: 320px; color: #000; overflow: hidden; margin-right: 30px; margin-bottom: 30px;  }
.goodconright ul li em{ display: block; font-size:50px;  color: #018e88; line-height: 60px}
.goodconright ul li i{ display: block; width: 50px; height: 2px; background: #018e88; overflow: hidden; margin:10px 0 ; }
.goodconright ul li span{ font-size:25px }
.goodtext{ height: 50px; overflow:hidden; height:95px;  color: #666 }
 




/*分类*/
.block1{margin: 100px auto; }
.c-preview {
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #018e88 50%, #018e88 75%, #f6ff00 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #018e88 50%, #018e88 75%, #f6ff00 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%, #000000 25%, #018e88 50%, #018e88 75%, #f6ff00 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 400% 400%;
  background-repeat: no-repeat;
  display: flex;
  width: 550px;
  height: 300px;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  cursor: pointer;
  transition: .5s all;
  font-size: 30px;
  overflow: hidden;
  float: left;
  margin-right: 100px;

}
.c-preview:nth-child(2n){ margin-right: 0 }


.c-preview__img {
    margin-right:50px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  mix-blend-mode: screen;
  overflow: hidden;
}
.c-preview__img img{  
  width: 100%;
  height: 100%;}

.c-preview__title {
  position: relative;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.c-preview:hover {
  background-position: 100% 100%;
    color: #ffd615;
}
.c-preview:hover__title {
  text-shadow: 0 0 20px black;
}



.prolist{width: 200px; float: left}
.mainmenu{margin: 0 auto; font-size: 16px; position:relative; padding:0;}
.mainmenu > li{background-color: #018e88; border-top: 1px solid #fff; height: 48px; color: #f7f1e3; box-sizing: border-box;}
.mainmenu > li:first-child{border-radius: 7px 7px 0 0; border-top: 0;}
.mainmenu > li:last-child{border-radius: 0 0 7px 7px;}
.mainmenu > li span{display:block; line-height: 48px; padding-left: 10px;}
.mainmenu > li .icon{padding: 14px 20px 0 20px; float: left; width: 20px; height: 20px; display:block;}
.mainmenu > li .messages{padding: 0; margin-top: -33px; margin-right: 19px; float: right; display: block; width: 34px; height: 18px; text-align: center; font-size: 11px; line-height: 19px;}
/*------------ Sub Menu ------------*/
.submenu{box-sizing: border-box; color: #ae9f9f; font-size: 13px; content: " "; /*opacity: 0.5;*/}
.submenu li{line-height: 20px; height: 35px; padding-top: 11px; background-color: #fff; border-bottom: 1px solid #eee; transition: border-left 220ms ease-in;}
.submenu .chosen,
.submenu .chosen:hover{border-left: solid 6px #96d145;}
.submenu li:hover{border-left: solid 6px #d05942;}
.submenu li a{margin-left:30px; display: block;}
.animate{animation: flip 2000ms ease-in-out alternate;}
@keyframes flip{to{transform: rotateY(360deg);}}







/**产品分类**/
.proconlist{ float: left; width: 970px; margin-left: 30px  }
.proconlist li{ float: left; margin-right: 24px; width: 305px; 
 margin-bottom:15px;  transition: 0.8s; border:1px solid #ccc; position: relative;   background: #018e88;
  text-align: center; overflow:hidden; }
.proconlist li:nth-child(3n){ margin-right: 0 }
.proconlist li img{ height:200px; overflow: hidden; width: 100% }
.proconlist li p{ height:50px; line-height:50px; transition: 0.8s; font-size: 16px; text-align: left; padding-left: 20px; color: #fff }
.proconlist li:hover{ box-shadow: 5px 5px 5px #ccc; background: #ffd701}
.proconlist li:hover p{ color: #000}



.block3{}
.leftimg{ float: left; width: 500px }
.leftimg img{ height: 400px; width: 100% }
.rightcon{ float: left; width: 600px;height: 352px; background: #fff; margin-top: -50px; padding: 50px; line-height: 30px }
.rightcon strong{ font-size: 20px; height: 30px; overflow: hidden; }
.rightcon p{ margin-bottom:30px; height: 120px; overflow: hidden; }





.casecon{margin-bottom:30px; overflow: hidden;}
.casecon li{ float:left; width: 386px; margin-right: 10px; }
.casecon li img{ width: 100%; height: 320px }
.casecon li p{ height: 50px; line-height: 50px;  text-align: center; background: #eaeaea; transition: 0.5s; }
.casecon li:hover p{background: #018e88; color: #fff}





.longimg{ text-align: center; position: relative;  }
.longimg strong{ position: absolute; top:50px; color: #fff; left:50%; margin-left: -600px   }
.longimg strong span{ display: block; font-size: 30px;  }
.longimg strong em{ font-size: 18px; line-height: 30px; }








/* Common style */
.grid figure {
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  margin: -0.135em;
  width: 300px;
  height: 200px;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
  float: left;
  margin-bottom: 30px;
}

.grid figure img{ height: 100%; width: 100%;  }

.grid figure figcaption {
  padding: 1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.grid figure figcaption,
.grid figure a {
  position: absolute;
  top: 0;
  left: 0;
}


.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
  background: #42b078;
}

figure:nth-child(1){ height: 658px; width:870px; margin-right: 30px }

figure.effect-sarah img {
  width: -webkit-calc(100% + 20px);
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.effect-sarah:hover img {
  opacity: 0.4;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
  text-align: left;
  padding-bottom: 30px;
  overflow: hidden;
}

figure.effect-sarah h2 {
  position: relative;
  overflow: hidden;
  padding: 0.5em 0;
  font-size: 18px;
  display: block;

}

figure.effect-sarah h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

figure.effect-sarah p {
  padding: 10px 0;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  font-size: 14px;
  height: 94px;
  overflow: hidden;
}


figure.effect-sarah:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}






/**
*新闻中心
**/
.leftnew{ float: left; width: 500px; height:377px; overflow: hidden; } 
.newscon a{ display: block; }
.newscon a span{ font-size: 18px; line-height: 40px  }
.newscon a p{ font-size: 14px; color: #999 }
.rightnew{ float: right; width: 650px } 
.newscon a:hover span{ color: #018e88 }
.leftnew img{ width: 500px; height: 338px }
.rightnew dl{ clear: both; display: block; margin-bottom: 20px; height: 106px; overflow: hidden; overflow: hidden; }
.rightnew dl dt{ float: left; width: 88px; height: 87px; text-align: center; color: #fff; background: #018e88; transition: 0.5s }
.rightnew dl:hover dt{ background: #ffd615 }
.rightnew dl dt strong,.rightnew dl dt em{ color: #fff; }
.rightnew dl dt strong{ display: block; font-size:25px;height:50px; line-height:50px }
.rightnew dl dt em{ font-size: 14px; line-height: 18px }
.rightnew dl dd{ float: right; width: 537px }
.rightnew dl dt img{ width: 150px; height: 100px; overflow: hidden; }






/**
*更多
**/
.more {
  display: flex;
  justify-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:50px auto;
}
.cta {
    display: flex;
    padding: 10px 45px 5px 45px ;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: white;
    background: #018e88;;
    transition: 1s;
    box-shadow: 6px 6px 0 black;
    -webkit-transform: skewX(-15deg);
            transform: skewX(-15deg);
}
.cta:focus {
   outline: none; 
}
.cta:hover {
    transition: 0.5s;
    box-shadow: 10px 10px 0 #ffd615;
}
.cta span:nth-child(2) {
    transition: 0.5s;
    margin-right: 0px;
    margin-top: -5px;
}
.cta:hover  span:nth-child(2) {
    transition: 0.5s;
    margin-right: 45px;
}
.more span {
    -webkit-transform: skewX(15deg);
            transform: skewX(15deg) 
}
.more:hover span{ color: #ffd615 }
.more span:nth-child(2) {
    width: 20px;
    margin-left: 30px;
    position: relative;
    top: 12%;
}
  
/**************SVG****************/

path.one {
    transition: 0.4s;
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%);
}

path.two {
    transition: 0.5s;
    -webkit-transform: translateX(-30%);
            transform: translateX(-30%);
}

.cta:hover path.three {
    -webkit-animation: color_anim 1s infinite 0.2s;
            animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-animation: color_anim 1s infinite 0.6s;
            animation: color_anim 1s infinite 0.6s;
}

.cta:hover path.two {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-animation: color_anim 1s infinite 0.4s;
            animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */

@-webkit-keyframes color_anim {
    0% {
        fill: white;
    }
    50% {
        fill: #ffd615;
    }
    100% {
        fill: white;
    }
}

@keyframes color_anim {
    0% {
        fill: white;
    }
    50% {
        fill: #ffd615;
    }
    100% {
        fill: white;
    }
}






/*动画*/
    
.animated {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

@keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

.bounceInUp {
  -webkit-animation-name: bounceInUp;
          animation-name: bounceInUp;
}











/** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE*/
  .owl-carousel,.owl-carousel .owl-item {
  -webkit-tap-highlight-color:transparent;
  position:relative
}
.owl-carousel {
  width:100%;
  z-index:1
}
.owl-carousel .owl-stage {
  position:relative;
  -ms-touch-action:pan-Y;
  touch-action:manipulation;
  -moz-backface-visibility:hidden
}
.owl-carousel .owl-stage:after {
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0
}
.owl-carousel .owl-stage-outer {
  position:relative;
  overflow:hidden;
  -webkit-transform:translate3d(0,0,0)
}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper {
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -ms-transform:translate3d(0,0,0)
}
.owl-carousel .owl-item {
  min-height:1px;
  float:left;
  -webkit-backface-visibility:hidden;
  -webkit-touch-callout:none
}
.owl-carousel .owl-item img {
  display:block;
  width:100%
}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled {
  display:none
}
.no-js .owl-carousel,.owl-carousel.owl-loaded {
  display:block
}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev {
  cursor:pointer;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot {
  background:0 0;
  color:inherit;
  border:none;
  padding:0!important;
  font:inherit
}
.owl-carousel.owl-loading {
  opacity:0;
  display:block
}
.owl-carousel.owl-hidden {
  opacity:0
}
.owl-carousel.owl-refresh .owl-item {
  visibility:hidden
}
.owl-carousel.owl-drag .owl-item {
  -ms-touch-action:pan-y;
  touch-action:pan-y;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.owl-carousel.owl-grab {
  cursor:move;
  cursor:grab
}
.owl-carousel.owl-rtl {
  direction:rtl
}
.owl-carousel.owl-rtl .owl-item {
  float:right
}
.owl-carousel .animated {
  animation-duration:1s;
  animation-fill-mode:both
}
.owl-carousel .owl-animated-in {
  z-index:0
}
.owl-carousel .owl-animated-out {
  z-index:1
}
.owl-carousel .fadeOut {
  animation-name:fadeOut
}
@keyframes fadeOut {
  0% {
  opacity:1
}
100% {
  opacity:0
}
}.owl-height {
  transition:height .5s ease-in-out
}
.owl-carousel .owl-item .owl-lazy {
  opacity:0;
  transition:opacity .4s ease
}
.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""] {
  max-height:0
}
.owl-carousel .owl-item img.owl-lazy {
  transform-style:preserve-3d
}
.owl-carousel .owl-video-wrapper {
  position:relative;
  height:100%;
  background:#000
}
.owl-carousel .owl-video-play-icon {
  position:absolute;
  height:80px;
  width:80px;
  left:50%;
  top:50%;
  margin-left:-40px;
  margin-top:-40px;
  background:url(owl.video.play.png) no-repeat;
  cursor:pointer;
  z-index:1;
  -webkit-backface-visibility:hidden;
  transition:transform .1s ease
}
.owl-carousel .owl-video-play-icon:hover {
  -ms-transform:scale(1.3,1.3);
  transform:scale(1.3,1.3)
}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn {
  display:none
}
.owl-carousel .owl-video-tn {
  opacity:0;
  height:100%;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  transition:opacity .4s ease
}
.owl-carousel .owl-video-frame {
  position:relative;
  z-index:1;
  height:100%;
  width:100%
}

.course-one {
  padding-top: 120px;
  padding-bottom: 120px;
  counter-reset: courseNumber;
}

.course-one__single {
  position: relative;
  margin-bottom: 30px;
  z-index: 10;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  counter-increment: courseNumber;
}


.course-one__single:hover {
  -webkit-transform: translateY(-76px);
  transform: translateY(-76px);
}

.course-one__single:hover .hvr-sweep-to-bottom::before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1)
}


.course-one__cat {
  background-color: var(--thm-primary);
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 26.5px;
  padding-right: 26.5px;
  text-align: center;
  position: absolute;
  top: 10px;
  left: -10px;
  z-index: 11;
  text-transform: uppercase;
  color: var(--thm-black);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__cat:hover {
  background-color: var(--thm-base);
  color: #fff;
}

.course-one__cat:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0px;
  width: 10px;
  height: 10px;
  background-color: var(--thm-primary);
  -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__cat:hover:before {
  background-color: var(--thm-base);
}

.course-one__image {
  position: relative;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.course-one__single:hover .course-one__image {
  -webkit-transform: translateY(76px);
  transform: translateY(76px);
}

.course-one__image-inner {
  position: relative;
  overflow: hidden;
  background-color: var(--thm-black);
  z-index: 10;
}

.course-one__image-inner>img {
  width: 100%;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  opacity: 1;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__single:hover .course-one__image-inner>img {
  opacity: 0.2;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.course-one__image-inner>a {
  width: 65px;
  height: 65px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  color: var(--thm-black);
  background-color: var(--thm-primary);
  position: absolute;
  top: calc(50% - 70.5px);
  left: calc(50% - 32.5px);
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(500px) rotate(45deg);
  transform: perspective(500px) rotate(45deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: opacity 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
  transition: opacity 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
  transition: transform 500ms ease 0ms, opacity 500ms ease 0ms;
  transition: transform 500ms ease 0ms, opacity 500ms ease 0ms, -webkit-transform 500ms ease 0ms;
}

.course-one__single:hover .course-one__image-inner>a {
  opacity: 1;
  -webkit-transform: perspective(500px) rotate(0deg);
  transform: perspective(500px) rotate(0deg);
  -webkit-transition: opacity 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  transition: opacity 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
  transition: transform 500ms ease 500ms, opacity 500ms ease 500ms;
  transition: transform 500ms ease 500ms, opacity 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
}

.course-one__image-inner>a::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: -10px;
  top: -10px;
  background-color: #fff;
  opacity: 0.1;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__image-inner>a:hover::after {
  left: 0;
  top: 0;
}

.course-one__content {
  text-align: center;
  background-color: #edf2f5;
  padding-top: 53px;
  padding-bottom: 55px;
}

.course-one__content::after {
  font-family: var(--thm-font);
  font-size: 200px;
  line-height: 1em;
  color: #051b35;
  opacity: 0.06;
  content: counters(courseNumber, ".", decimal-leading-zero);
  position: absolute;
  bottom: -20px;
  left: -10px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__single:hover .course-one__content::after {
  color: #fff;
  opacity: 0.06;
}

.course-one__content h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
  color: #063a7a;
  font-family: var(--thm-font);
  margin-bottom: 24px;
}

.course-one__content h3 a {

  color: #018e88;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__content h3 a:hover {
  color: #fff;
}

.course-one__content p {
  margin: 0;
  width: 67%;
  color: #838a93;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}


.course-one__single:hover .course-one__content h3 a,
.course-one__single:hover .course-one__content p {
  color: #fff
}

.course-one__single .course-one__content:before {
  background-color: #018e88;
}

.course-one__book-link {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
  width: 100%;
  background-color: #ffd701;
  color: var(--thm-black);
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(400px) rotateX(-90deg);
  transform: perspective(400px) rotateX(-90deg);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

.course-one__single:hover .course-one__book-link {
  -webkit-transform: perspective(400px) rotateX(0);
  transform: perspective(400px) rotateX(0);
}

.course-one__book-link:hover {
  background-color: #00973f;
  color: #fff;
}

.course-one .post-pagination {
  margin-top: 30px;
}



.course-one__title {
  background-color: #edf2f5;
  position: relative;
  padding-top: 260px;
  padding-bottom: 375px;
}

.course-one__title__home-two {
  padding-top: 120px;
}

.course-one__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.4;
}

.course-one__title .container {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}

.course-one__title .block-title {
  margin-bottom: 0;
}

.course-one__carousel-wrapper {
  padding-top: 0;
  padding-bottom: 120px;
  position: relative;
  z-index: 10;
}

.course-one__carousel-wrapper .container {
  position: relative;
}

.course-one__carousel .owl-stage-outer {
  left: -10px;
}

.course-one__carousel .owl-stage {
  left: 10px;
}

[class*=course-one__carousel-btn-] {
  width: 79px;
  height: 79px;
  background-color: #fff;
  font-size: 24px;
  color: var(--thm-black);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  position: absolute;
  top: 40.5%;
  z-index: 11;
}

[class*=course-one__carousel-btn-]:hover {
  background-color: var(--thm-primary);
  color: var(--thm-black);
}

.course-one__carousel-btn-left {
  right: calc(100% - 15px);
}

.course-one__carousel-btn-right {
  left: calc(100% - 25px);
}

.course-brand__wrapper {
  position: relative;
}

.course-brand__wrapper .site-footer__fish-1 {
  bottom: 25%;
  left: 3%;
}

.course-brand__wrapper .site-footer__tree-1 {
  left: 2%;
}


.item{ width: 29%; float: left;  padding:0 2%;  }




.hvr-sweep-to-bottom {
  display:inline-block;
  vertical-align:middle;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  box-shadow:0 0 1px rgba(0,0,0,0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  -webkit-transition-property:color;
  transition-property:color;
  -webkit-transition-duration:.3s;
  transition-duration:.3s;
  width: 100%;
}
.hvr-sweep-to-bottom:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#2098d1;
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  -webkit-transform-origin:50% 0;
  transform-origin:50% 0;
  -webkit-transition-property:transform;
  transition-property:transform;
  -webkit-transition-duration:.3s;
  transition-duration:.3s;
  -webkit-transition-timing-function:ease-out;
  transition-timing-function:ease-out
}
.hvr-sweep-to-bottom:active,.hvr-sweep-to-bottom:focus,.hvr-sweep-to-bottom:hover {
  color:#fff
}
.hvr-sweep-to-bottom:active:before,.hvr-sweep-to-bottom:focus:before,.hvr-sweep-to-bottom:hover:before {
  -webkit-transform:scaleY(1);
  transform:scaleY(1)
}