@import url('18a253ff954541cebe28a396501c68bc.css');

li {
    -webkit-perspective:600px;
    perspective: 600px
}

.wrapper {
  position:absolute;
  top: 30%;
  left: 40%;
  width: 300px;
  height: 500px;
  perspective: 900px;
}

.container3 {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  transition: .5s all ease;
  transform: rotateX(60deg) scale(0.7);
  perspective: 900px;
  box-shadow: 0px 20px 50px #555;
  animation: entry 1s linear 1;
}

#c0 {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eba65b 30%, #d99267 100%);
  z-index: 300;
  box-shadow: 0px 20px 100px #555;
}

#c1 {
  background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%);
  box-shadow: 0px 20px 100px #555;
  left: 100%;
  z-index: 0;
}

#c2 {
  left: -100%;
  z-index: 0;
  background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%);
  box-shadow: 0px 20px 100px #555;
}

.container3:hover {
  cursor: pointer;
  transform: rotate(0deg) scale(1) translateY(10px);
  transition: .5s all ease;
  z-index: 400;
}

.image {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 45%;
  background: linear-gradient(to top, #eba65b 30%, #d99267 100%);
}

#i1 {
  background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%);
}

#i2 {
  background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%);
}



.sun {
  position: absolute;
  top: 50%;
  height: 50%;
  left: 0%;
  width: 100%;
}

.sun1 {
  width: 50px;
  height: 50px;
  box-shadow: 0px 0px 10px #fff;
}

.st4 {
  fill: #f8c56f;
  opacity: 1;
}

.st5,
.st7 {
  fill: #fff;
}

#sh2 {
  opacity: 0.5;
}

#sh3 {
  opacity: 0.3;
}

.st6 {
  fill: #59476f;
}

.st10 {
  fill: #c5a7e5;
  stroke: #222;
}

.st11 {
  stroke: #212121;
  opacity: 0.5;
}

#sh1 {
  fill: #f8c56f;
  opacity: 0.4;
}

.st0 {
  fill: #a25a62;
  stroke: none;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #a25a62;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #cd775c;
}

.st3 {
  fill: #fff;
  opacity: 0.3;
}

.story {
  position: absolute;
  top: 45%;
  left: 0%;
  height: 55%;
  width: 100%;
  background: linear-gradient(to bottom, #eba65b 0%, #d99267 40%);
  z-index: 30;
}

#s1 {
  background: linear-gradient(to top, #5b62a2 0%, #7b88d1 100%);
}

#s2 {
  background: linear-gradient(to top, #5b62a2 0%, #7b88d1 120%);
}

.info {
  position: absolute;
  top: 10%;
}

.info h3 {
  text-align: center;
  text-shadow: 0px 0px 10px #eee;
  color: #eee;
  letter-spacing: 2px;
}



.info p {
  font-size: 14px;
  color: #fff;
  padding: 20px 20px 20px 20px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 1px;
}

.page {
  position: absolute;
  top: 80%;
  width: 100%;
  left: 0%;
  height: 20%;
  z-index: 30;
}



@keyframes entry {
  0% {
    top: -20%;
    opacity: 0.1;
  }
  100% {
    top: 0%;
  }
}


@media screen and (max-width:991px){
  .wrapper,.about_info{   
      display: none;
} 
}


.ul_2{display: none;}
.ul_2{ width:100%; float:left; margin-top:10px;}
.ul_2 li{ width:50%; float:left; padding:0 15px; margin-top:30px;}
.newsbq .ul_2 li {width:100% !important; }
.ul_2 li .zbox{ width:100%; float:left; height:170px; float:left; background:#f7f7f8; padding-left:170px; position:relative;}
.ul_2 li .zbox .img{ width:170px; height:170px; position:absolute; left:0; top:0; overflow:hidden;}
.ul_2 li .zbox .img img{ width:100%; float:left;
     transition: all 1s linear;
  -moz-transition: all 1s linear;
 -webkit-transition: all 1s linear;
-o-transition: width all 1s linear;}
.ul_2 li .zbox .text{ width:100%; padding:16px 20px 0 20px; position:relative;}
.ul_2 li .zbox .text h4{ width:100%; float:left; display:block; width:100%; font-size:16px; color:#222; line-height:24px;}
.ul_2 li .zbox .text h4 a{ }


.ul_2 li .zbox .text span{color:#d22328}

.ul_2 li .zbox .text .p{ width:100%; float:left; margin-top:9px; font-size:14px; color:#666; line-height:24px; height:72px; overflow:hidden;
-webkit-transition: all 0.3s ease-out 0s; 
-moz-transition: all 0.3s ease-out 0s; 
-o-transition: all 0.3s ease-out 0s; 
transition: all 0.3s ease-out 0s;}
.ul_2 li .zbox .text .time{ width:100%; float:left; margin-top:14px; font-size:12px; color:#888; line-height:18px;
-webkit-transition: all 0.3s ease-out 0s; 
-moz-transition: all 0.3s ease-out 0s; 
-o-transition: all 0.3s ease-out 0s; 
transition: all 0.3s ease-out 0s;}
.ul_2 li .zbox .text .ico{ width:28px; height:28px; position:absolute; right:20px; top:130px; opacity:0;
-webkit-transition: all 0.3s ease-out 0s; 
-moz-transition: all 0.3s ease-out 0s; 
-o-transition: all 0.3s ease-out 0s; 
transition: all 0.3s ease-out 0s;}
.ul_2 li .zbox:hover{ background:#d32329;}
.ul_2 li .zbox:hover .text h4{ color:white;}
.ul_2 li .zbox:hover .text .p{ color:white; opacity:0.6;}
.ul_2 li .zbox:hover .text .time{ color:white; opacity:0.6;}
.ul_2 li .zbox:hover .text .ico{ opacity:1;}
.ul_2 li .zbox:hover .img img{transform: scale(1.09,1.09);
  -ms-transform: scale(1.09,1.09);  
-webkit-transform: scale(1.09,1.09);
   -o-transform: scale(1.09,1.09);  
   -moz-transform: scale(1.09,1.09);}

@media screen and (max-width:991px) {
  .ul_2{display: block;}
.ul_2 li{ width:100%; margin-top:15px;}

}
@media screen and (max-width:767px) {



.ul_2 li{ margin-top:10px;}
.ul_2 li .zbox{ height:120px; padding-left:120px;}
.ul_2 li .zbox .img{ width:120px; height:120px; vertical-align: middle;}
.ul_2 li .zbox .text{ padding:5px 6px 0 6px; }
.ul_2 li .zbox .text h4{ font-size:14px; line-height:20px;}
.ul_2 li .zbox .text .p{ margin-top:1px; font-size:12px; line-height:18px; height:90px;}
.ul_2 li .zbox .text .time{ margin-top:6px;}

}