.hides{ display:none;}
.hides1{ display:none;}

.tabs_btn{  top:0px; left:0; right:0; margin:auto; width:100%; text-align:center; padding-right:0px; font-size:0;}
.tabs_btn li:hover {  /* border-top:3px solid #ecac00; */ transition-duration:1s; -webkit-transition-duration:1s; }
.tabs_btn li { border-top:3px solid rgb(239,239,240); display:inline-block; vertical-align:top;position:relative;   font-size:16px; z-index:100; margin:0 6px; padding:10px 10px 10px  10px; width:200px; transition-duration:1s; -webkit-transition-duration:1s;
background: rgb(239,239,240); /* Old browsers */
background: -moz-linear-gradient(top, rgba(239,239,240,1) 0%, rgba(236,236,237,1) 47%, rgba(231,232,233,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(239,239,240,1) 0%,rgba(236,236,237,1) 47%,rgba(231,232,233,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(239,239,240,1) 0%,rgba(236,236,237,1) 47%,rgba(231,232,233,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efeff0', endColorstr='#e7e8e9',GradientType=0 ); /* IE6-9 */}
.tabs_btn li a{text-decoration:none; padding-right:0px; display:block; color:#202020; font-weight:bold; }
.tabs_btn li:first-child a{padding-left:0;}
.tabs_btn li:last-child a{padding-right:0;}

.tabs_btn li img{ display:inline-block; vertical-align:middle;}

.line{  position:absolute; top:50px; left:14%;  margin:auto; width:0; text-align:center; border-bottom:2px solid #fff; z-index:99}

.tabs_btn li:hover p { color:#31689b; }
.tabs_btn li p {
    display: inline-block;
    vertical-align: middle;
    margin: 9px 0 0 0;
    font-weight: bold;
    padding: 0;
    position: relative;
    top: -1px;
}
@keyframes line {
	
	0%{ width:0;}

	100%{ width:70%;}
	
	
	}
	
.line{animation-name: line; animation-duration: 0.4s; animation-delay:0.4s; animation-fill-mode: both; opacity: 1; z-index:99}	

.hover{ background:url(../images/hover.png) center 0 no-repeat; position:absolute; bottom:-15px; z-index:9999; width:90px; height:11px; left:0; right:0; margin:auto; display:none; display:none;} 
.tabs_btn li.active{ background:none; border-top:3px solid #ecac00;}
.btns {  margin-top: 25px;  position: absolute;   z-index: 99;   width: 100%;   top: 0;  text-align: center;}
.btns a{padding:0 5px; display:inline-block;}


.animation_box{ float:left; width:100%; overflow:hidden; position:relative;}
.slide1{ float:left; width:100%; /* height:430px; */ }
.slide1.animat4{/* background-color:#fff; *//*  margin:0 0 -6px 0; */}
.slide1 img.slideImg4{animation-name:fadeIn; animation-duration:0.4s; animation-delay:0.4s; animation-fill-mode:both; left:0; right:0; margin:0 auto;}
.banner_footer{ position:absolute; bottom:0; z-index:99; width:100%;}
.banner_footer img,.slide1 img{display:block;}
.banner_footer img {width:100%; display:block; height:25px;}
.tree{ position:absolute; left:3%; right:0; bottom:0; margin:auto; text-align:left; z-index:99;}
.tree1 { position:absolute; right:3%; bottom:0; margin:auto; text-align:left; z-index:99;}
.bench{ position:absolute;left:8%; bottom:10px; z-index:99;}
.lamp{ position:absolute;left:20%; bottom:-5px; z-index:999;}
.car1{ position:absolute;left:30%; bottom:-6px; z-index:999;}
.board{ position:absolute;left:55%; bottom:-4px; z-index:999;}
.car2{ position:absolute;left:70%; bottom:-6px; z-index:999;}
.umbrela{ position:absolute;right:0; bottom:40px; z-index:99;}
.building1 { position:absolute; left:0; bottom:0; margin:auto;  z-index:9; }
.building2 { position:absolute;  right:0; bottom:0; margin:auto; z-index:9; }
.building{ position:absolute; left:0; right:0; bottom:0; margin:auto; text-align:center; z-index:9; width:100%;}
.head{ position:absolute; left:0; right:0; top:30%; font-weight:bold; font-size:40px; color:#202020; margin:auto; text-align:center; z-index:99; }
.matter{position:absolute; left:0; right:0; top:42%; font-weight:bold; font-size:18px; color:#202020; margin:auto; text-align:center; z-index:99;   padding:0 0%; width:100%;}
.matter p { font-weight:bold; font-size:18px; line-height:26px;}
/* ------------------animation slide1 ------------------------- */

.tabs_btn li:nth-child(1){animation-name: fadeIn; animation-duration: 0.4s; animation-delay:0.4s; animation-fill-mode: both; opacity: 1;}
.tabs_btn li:nth-child(2){animation-name: fadeIn; animation-duration: 0.8s; animation-delay:0.8s; animation-fill-mode: both; opacity: 1;}
.tabs_btn li:nth-child(3){animation-name: fadeIn; animation-duration: 1s; animation-delay:1s; animation-fill-mode: both; opacity: 1;}
.tabs_btn li:nth-child(4){animation-name: fadeIn; animation-duration:1.4s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1;}
.tabs_btn li:nth-child(5){animation-name: fadeIn; animation-duration:1.8s; animation-delay:1.8s; animation-fill-mode: both; opacity: 1;}
.btns a:first-child{animation-name: fadeIn; animation-duration:1.4s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1;}
.btns a:last-child{animation-name: fadeIn; animation-duration:1.8s; animation-delay:1.8s; animation-fill-mode: both; opacity: 1;}
.head{animation-name: fadeIn; animation-duration: 1.8s; animation-delay:2s; animation-fill-mode: both; opacity: 1;}
.matter{animation-name: fadeIn; animation-duration: 2s; animation-delay:2.5s; animation-fill-mode: both; opacity: 1;}

.tree1 img{animation-name: tree; animation-duration:2s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:833px; height:0;}
.tree img{animation-name: tree; animation-duration:2s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:833px; height:0;}
.building1 img{animation-name: building; animation-duration: 2s; animation-delay:1s;  animation-fill-mode: both; opacity: 1; width:100%; height:100%;}
.building2 img{animation-name: building; animation-duration: 2s; animation-delay:1s;  animation-fill-mode: both; opacity: 1; width:100%; height:100%;}
.building img{animation-name: building; animation-duration: 2s; animation-delay:1s;  animation-fill-mode: both; opacity: 1; width:100%; height:100%;}

.car1{animation-name: care1; animation-duration:3s; animation-delay:2.5s; animation-fill-mode: both; opacity: 1; animation-timing-function: ease;}
.car2{animation-name: care2; animation-duration:3s; animation-delay:1s; animation-fill-mode: both; opacity: 1; animation-timing-function: ease;}

.umbrela{animation-name: umberala; animation-duration:1s; animation-delay:0.5s; animation-fill-mode: both; opacity: 1;}

.board img{animation-name: borad1; animation-duration: 2s; animation-delay:1s; animation-fill-mode: both; opacity: 1; width:64; height:0;}
.lamp img{animation-name: lamp1; animation-duration: 2s; animation-delay:1s; animation-fill-mode: both; opacity: 1; width:27; height:0;}
.bench img{animation-name: bench1; animation-duration: 2s; animation-delay:1s; animation-fill-mode: both; opacity: 1; width:122px; height:0;}


.tabs_btn li .icon1{ display: inline-block; background:url(../images/car.png) center center no-repeat; display:inline-block; vertical-align:middle; width:42px; height:42px; border-radius:50%;}
.tabs_btn li a:hover .icon1, .tabs_btn li.active .icon1{ display: inline-block; background:url(../images/car.png) center center no-repeat ; transition:all 0.4s;}
.tabs_btn li.active a{text-decoration:none; color:#31689b;}

.tabs_btn li .icon2{ display: inline-block; background:url(../images/two.png) center center no-repeat ; display:inline-block; vertical-align:middle; width:42px; height:42px; border-radius:50%;}
.tabs_btn li a:hover .icon2, .tabs_btn li.active .icon2 { display: inline-block; background:url(../images/two.png) center center no-repeat ; transition:all 0.4s;}

.tabs_btn li .icon3{ display: inline-block; background:url(../images/health.png) center center no-repeat ; display:inline-block; vertical-align:middle; width:42px; height:42px; border-radius:50%;}
.tabs_btn li a:hover .icon3, .tabs_btn li.active .icon3{ display: inline-block; background:url(../images/health.png) center center no-repeat ; transition:all 0.4s;}

.tabs_btn li .icon4{ display: inline-block; background:url(../images/others.png) center center no-repeat ; display:inline-block; vertical-align:middle; width:42px; height:42px; border-radius:50%;}
.tabs_btn li a:hover .icon4, .tabs_btn li.active .icon4{ display: inline-block; background:url(../images/others.png) center center no-repeat ; transition:all 0.4s;}

.tabs_btn li .icon5{ display: inline-block; background:url(../images/campaign.png) center center no-repeat ; display:inline-block; vertical-align:middle; width:42px; height:42px; border-radius:50%;}
.tabs_btn li a:hover .icon5, .tabs_btn li.active .icon5{ display: inline-block; background:url(../images/campaign.png) center center no-repeat; transition:all 0.4s;}

/* -------- css slide 2 --------------- */

.lamp3_slide2{position:absolute;left:55%; bottom:-5px; z-index:999;}

/* -------- css slide 3 --------------- */


.board_slide3 {bottom: 0;left: 0;position: absolute;z-index: 99;}
.hand_slide3{ position:absolute;left:8%; bottom:0; z-index:99;}
.becnh_slide3{ position:absolute;left:22%; bottom:0; z-index:99;}
.girl_slide3{ position:absolute;/* left:50%; */ bottom:-5px; z-index:999;}
.lamp_slide3{ position:absolute;left:65%; bottom:-7px; z-index:999;}
.family_slide{ position:absolute;right:8%; bottom:0px; z-index:99;}

.winter{position:absolute; left:0; right:0; top:27%; font-size:40px; color:#fff; margin:auto; text-align:center; z-index:99; }
.inurence{position:absolute; left:0; right:0; top:50%; font-size:18px; color:#fff; margin:auto; text-align:center; z-index:99;  }

/* ------------------ animation slide3 ------------------------- */


.board_slide3 img{animation-name: borad_slide3; animation-duration: 1.4s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:72px; height:97px;}
.hand_slide3 img{animation-name: hand_slide3; animation-duration: 1.6s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:42px; height:160px;}
.becnh_slide3 img{animation-name: bench_slide3; animation-duration: 1.8s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:181px; height:138px;}
#tab4 .becnh_slide3 img{animation-name: bench_slide5; animation-duration: 1.8s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:181px; height:138px;}
.girl_slide3 {animation-name: girl; animation-duration:2s; animation-delay:0.5s; animation-fill-mode: both; opacity: 1; }
#tab4 .girl_slide3 {animation-name: girl1; animation-duration:2s; animation-delay:0.5s; animation-fill-mode: both; opacity: 1; }

.lamp_slide3 img{animation-name: lamp_slide3; animation-duration: 2.4s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; width:34px; height:205px;}
.family_slide{animation-name: fadeInRight; animation-duration: 2.8s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1; }

.shipbx {bottom: -15px;left: 30%; position: absolute;z-index: 999;}
.shipbx img {animation-name: ship; animation-duration: 1.8s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1;}
.stairbx img {animation-name: stair; animation-duration: 1.8s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1;}
.ipcar img {animation-name: ipcar; animation-duration: 1.8s; animation-delay:1.4s; animation-fill-mode: both; opacity: 1;}
.stairbx { bottom: -7px; left: 17%;  position: absolute;z-index: 999;}
.ipcar {bottom: -7px;left: 60%;position: absolute;z-index: 999;}


.btns a { color:#d87821; box-shadow:0px 5px 4px #d0d3d6; font-size:20px; font-weight:bold;  padding:15px 10px; width:220px; text-decoration:none; margin:0 2px; border:1px solid #d87821; border-radius:5px;}

@keyframes ship {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:233px;}
 
   30%{ opacity:1; height:110px; width:233px;}
    50%{ opacity:1; height:110px; width:233px;}
	 70%{ opacity:1; height:122px; width:233px;}
	  
	  90%{ opacity:1; height:120px; width:233px;}
	 
      to { height:127px; width:233px;}
  }

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


 @keyframes girl1 {
 
   from {
    opacity: 0;
	left:0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
	left:0%;
    -webkit-transform: none;
    transform: none;
  }
}



@keyframes bench_slide5 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:80px; width:122px;}
 
   30%{ opacity:1; height:85px; width:122px;}
    50%{ opacity:1; height:80px; width:122px;}
	 70%{ opacity:1; height:87px; width:122px;}
	  
	  90%{ opacity:1; height:87px; width:122px;}
	 
      to { height:93px; width:122px;}
  }


@keyframes borad_slide3 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:72px;}
 
   30%{ opacity:1; height:105px; width:72px;}
    50%{ opacity:1; height:100px; width:72px;}
	 70%{ opacity:1; height:97px; width:72px;}
	  
	  90%{ opacity:1; height:100px; width:72px;}
	 
      to { height:97px; width:72px;}
  }


@keyframes hand_slide3 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:42px;}
 
   30%{ opacity:1; height:165px; width:42px;}
    50%{ opacity:1; height:160px; width:42px;}
	 70%{ opacity:1; height:162px; width:42px;}
	  
	  90%{ opacity:1; height:164px; width:42px;}
	 
      to { height:165px; width:42px;}
  }



@keyframes bench_slide3 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:181px;}
 
   30%{ opacity:1; height:145px; width:181px;}
    50%{ opacity:1; height:140px; width:181px;}
	 70%{ opacity:1; height:135px; width:181px;}
	  
	  90%{ opacity:1; height:137px; width:181px;}
	 
      to { height:138px; width:181px;}
  }

@keyframes lamp_slide3 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:34px;}
 
   30%{ opacity:1; height:215px; width:34px;}
    50%{ opacity:1; height:200px; width:34px;}
	 70%{ opacity:1; height:203px; width:34px;}
	  
	  90%{ opacity:1; height:204px; width:34px;}
	 
      to { height:205px; width:34px;}
  }



/* ------------------ annimation slide2 ------------------------- */

.lamp3_slide2 img{animation-name: lamp3_slide2; animation-duration: 2s; animation-delay:1s; animation-fill-mode: both; opacity: 1; width:47px; height:0;}




/*  ----------------- slide 4 ---------------------- */

.other_umbrella1 img { animation-name: other_umbrella; animation-duration:3s; animation-delay:1s; animation-fill-mode: both; opacity: 1;}
.other_umbrella1{    position: absolute;bottom: -6px; z-index: 999;  left: 30%;}

.winter{animation-name: fadeIn; animation-duration: 0.4s; animation-delay:0.5s; animation-fill-mode: both; opacity: 1;}
.inurence{animation-name: fadeIn; animation-duration: 1s; animation-delay:1s; animation-fill-mode: both; opacity: 1;}




@keyframes care1 {
 
   from {
    opacity: 0;
	left:0;
    -webkit-transform: translate3d(-70%, 10%, 0);
    transform: translate3d(-70%, 10%, 0);
  }

  to {
    opacity: 1;
	left:30%;
    -webkit-transform: none;
    transform: none;
  }
}
 
@keyframes care2 {
 
   from {
    opacity: 0;
	left:0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
	left:70%;
    -webkit-transform: none;
    transform: none;
  }
}
 
 
 
 @keyframes girl {
 
   from {
    opacity: 0;
	left:0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
	left:43%;
    -webkit-transform: none;
    transform: none;
  }
}
 
 


@keyframes tree {
  from, 30%, 50%, 70%, to {
   
    animation-timing-function: ease-in-out;
  }

  0%{ opacity:0; height:10px; width:833px;}
 
   30%{ opacity:1; height:160px; width:833px;}
    50%{ opacity:1; height:140px; width:833px;}
	 70%{ opacity:1; height:150px; width:833px;}
	  80%{ opacity:1; height:145px; width:833px;}
	 
      to { height:150px; width:833px;}
  }

@keyframes borad1 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:64px;}
 
   30%{ opacity:1; height:85px; width:64px;}
    50%{ opacity:1; height:72px; width:64px;}
	 70%{ opacity:1; height:77px; width:64px;}
	  
	  90%{ opacity:1; height:80px; width:64px;}
	 
      to { height:77px; width:64px;}
  }
  
  @keyframes bench1 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:122px;}
 
   30%{ opacity:1; height:90px; width:122px;}
    50%{ opacity:1; height:90px; width:122px;}
	 70%{ opacity:1; height:90px; width:122px;}
	  
	  90%{ opacity:1; height:92px; width:122px;}
	 
      to { height:93px; width:122px;}
  }
  
 

 @keyframes lamp1 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:27px;}
 
   30%{ opacity:1; height:175px; width:27px;}
    50%{ opacity:1; height:160px; width:27px;}
	 70%{ opacity:1; height:165px; width:27px;}
	  
	  90%{ opacity:1; height:170px; width:27px;}
	 
      to { height:167px; width:27px;}
  }
  
  
   @keyframes lamp3_slide2 {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; height:10px; width:47px;}
 
   30%{ opacity:1; height:110px; width:47px;}
    50%{ opacity:1; height:105px; width:47px;}
	 70%{ opacity:1; height:108px; width:47px;}
	  
	  90%{ opacity:1; height:109px; width:47px;}
	 
      to { height:110px; width:47px;}
  }



 @keyframes umberala {
  from, 30%, 50%, 70%, 80%, to {
   
    animation-timing-function: ease-in;
  }

  0%{ opacity:0; right:0;}
  30%{ opacity:1; right:30px;}

  

  to { right:0; }
  }


@keyframes building {
  from, 30%, 50%, 70%, to {
   
    animation-timing-function: ease-in-out;
  }

  0%{ opacity:0; height:10px; width:1280px;}
 
   30%{ opacity:1; height:200px; width:1280px;}
    50%{ opacity:1; height:180px; width:1280px;}
	 70%{ opacity:1; height:192px; width:1280px;}
	  80%{ opacity:1; height:190px; width:1280px;}
	 
      to { height:193px; width:1280px;}
}

@keyframes borad_lamp {
  from {
    opacity: 0;
  
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: borad_lamp;
  animation-name: borad_lamp;
}


@keyframes other_umbrella {
  from, 30%, 50%, 70%, to {
   
    animation-timing-function: ease-in-out;
  }

  0%{ opacity:0; height:10px; width:133px;}
 
   30%{ opacity:1; height:110px; width:133px;}
    50%{ opacity:1; height:110px; width:133px;}
	 70%{ opacity:1; height:120px; width:133px;}
	  80%{ opacity:1; height:120px; width:133px;}
	 
      to { height:121px; width:133px;}
}


@keyframes rubberBand11 {
  from {
  
    transform: scale3d(1, 1, 1) translateY(0px);
	 
	
  }

  30% {
  
    transform: scale3d(1, 1.25, 0) translateY(40px);
  }

  40% {

    transform: scale3d(1, 1.75, 0) translateY(100px);
  }

  50% {

    transform: scale3d(1, 2, 0) translateY(50px);
  }

  65% {

    transform: scale3d(1, 3, 0) translateY(10px);
  }

  75% {

    transform: scale3d(1, .95, 0);
  }

  to {

    transform: scale3d(1, 1, 1);
  }
}