@keyframes list1{
0%{
top:30px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100%{
top:0px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
.a1-back:hover .divlist1{

animation-name:list1;
animation-duration:0.4s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;

}

.a1:hover .divlist1{

animation-name:list1;
animation-duration:0.4s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;

}

.divlist1{
position:absolute;
left:50%;
transform:translatex(-50%);
top:-2000px;
width:130px;
padding-top:61px;

}
.a11{
display:block;
width:calc(100% - 0px);
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
font-size:15px;
color:white;
line-height:1em;
text-align:center;
border-bottom:1px solid rgba(255,255,255,0.3);
font-family: Microsoft JhengHei;
}
.divpadd_list1{
background-image:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
box-shadow:3px 3px 6px rgba(255,255,255,0.6);
}




.divspace{
height:45px;
display:none;
}

.divlogo_rec-back{
display:inline-flex;
position:relative;
left:0px;
top:0px;
width:60px;
transition:0.3s;
}

.divlogo-back{
display:flex;
position:absolute;
left:50%;
top:-40px;
transform:translatex(-50%);
width:60px;
height:60px;
background-color:#2F4656;
align-items:center;
justify-content:center;
transition:0.3s;
}
.logoimg-back{
width:40px;
transition:0.3s;
}

.divlogo_rec{
display:inline-flex;
position:relative;
left:0px;
top:0px;
width:140px;
transition:0.3s;

}

.divlogo{
display:flex;
position:absolute;
left:50%;
top:-40px;
transform:translatex(-50%);
width:110px;
height:110px;
background-color:#2F4656;
align-items:center;
justify-content:center;

}
.logoimg{
width:65px;
transition:0.3s;
}


.a1{
display:inline-block;
padding-top:20px;
padding-bottom:20px;
width:130px;
color:white;
font-family:Noto Sans TC;font-weight:100;
font-size:18px;
letter-spacing:1px;
transition:0.3s;
position:relative;
}

.a1-back{
display:inline-block;
padding-top:20px;
padding-bottom:20px;
width:130px;
color:#F1E4AC;
font-family:Noto Sans TC;font-weight:300;
font-size:16px;
letter-spacing:1px;
transition:0.3s;
position:relative;
}


.divlist{
width:100%;
background-color:rgba(0,0,0,0.2);
text-align:center;
box-shadow:0px 3px 3px rgba(255,255,255,0.3);
transition:0.3s;
}
.divlist-back{
width:100%;
background-color:#2F4656;
text-align:center;
transition:0.3s;

}

.divfix{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:21;
}







.divface{
text-align:center;
padding-top:0px;
padding-bottom:30px;
display:none;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;
}

.divface img{
height:50px;
padding-left:10px;
padding-right:10px;
}


.ab1{
display:block;
width:50%;
float:left;
padding-bottom:6px;
color:#cccccc;
font-size:15px;
}

.h3b1{
width:100%;
margin:auto;
font-size:18px;
color:white;
letter-spacing:1px;
letter-spacing:2px;
padding-bottom:20px;
font-family:Noto Sans TC;font-weight:100;
}

.pb1{
width:100%;
margin:0px;
color:#bbbbbb;
font-size:15px;
letter-spacing:0px;
padding-bottom:6px;
line-height:1.6em;
}

.pphone{
padding-left:25px;
width:calc(100% - 25px);
background-image:url(https://image.yida-design.com.tw/anho/icon_phone_white.svg);
background-repeat:no-repeat;
background-size:auto 1em;
background-position:0px 3px;
color:#cccccc;
font-size:15px;
margin:auto;
padding-bottom:6px;
}

.tableb1{
display:table;
width:1200px;
margin:auto;
}
.trb1{
display:table-row;
}
.tdb1{
display:table-cell;
vertical-align:top;
padding-left:20px;
width:210px;
padding-right:100px;
}
.tdb2{
display:table-cell;
vertical-align:top;
width:160px;
padding-right:100px;
}
.tdb3{
display:table-cell;
vertical-align:top;
width:260px;
}
.tdb4{
display:table-cell;
vertical-align:middle;
padding-right:20px;
text-align:right;
}


.divbase_rec{
width:100%;
padding-top:50px;
padding-bottom:50px;
background-color:#1D262D;
}


















.brcp1{
display:none;
}

.divcopy{
width:100%;
background-color:#293741;
}

.pcopy{
width:calc(1200px - 20px);
padding-left:20px;
margin:auto;
font-size:14px;
color:#cccccc;
padding-top:10px;
padding-bottom:10px;
}








.divword_root{
text-align:center;
position:relative;
top:-20px;
color:#333333;
margin-bottom:20px;
}
.divword_root span{
display:inline-block;
width:120px;
text-align:center;
font-size:20px;
color:#A78C32;
color:#7C6925;
font-family:Noto Sans TC;font-weight:400;
}










.h2root{
width:100%;
margin:auto;
font-size:24px;
color:#222222;
text-align:center;
margin-bottom:50px;
font-family:Noto Sans TC;font-weight:300;
}

.proot{
width:100%;
margin:auto;
font-size:21px;
color:#E1D29B;
text-align:center;
padding-bottom:10px;
color:#A78C32;
}

.divline_news{
display:block;
width:1px;
height:65px;
margin:auto;
background-color:#E1D29C;
background-color:#A78C32;
}

.divroot_rec1{
width:1200px;
margin:auto;
padding-bottom:0px;
}


.divroot_rec{
width:100%;
background-image:url(https://image.yida-design.com.tw/anho/back1.jpg?n1=1);
background-position:0px 0px;
background-repeat:no-repeat;
}































.tdm1{
width:50px;
cursor:pointer;
background-color:#527A96;
background-color:#476B83;

}

.tdm2{
text-align:center;
}

.tdm1 span{
display:block;
width:25px;
height:2px;
background-color:white;
margin:auto;
margin-top:5px;
margin-bottom:5px;
}

.logom1{
height:22px;
position:relative;
top:3px;
left:-20px;
}

.divfix_m1{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:21;
display:none;
background-color:#2F4656;
}
.tam1{
width:100%;
height:45px;
}








.listm1{
position:relative;
}
.listm1:after{
content:"+";
display:inline-block;
font-size:18px;
color:#222222;
position:absolute;
right:15px;
top:9px;
font-family:poppins;
}


.aclose{
display:block;
width:calc(100% - 40px);
padding-left:40px;
background-image:url(https://image.yida-design.com.tw/anho/icon_left_white.svg);
background-repeat:no-repeat;
background-position:10px 50%;
padding-top:15px;
padding-bottom:15px;
line-height:1em;
color:white;
font-family:poppins;
font-size:16px;
background-size:auto 1em;
background-color:#527A96;
margin-bottom:20px;
}

.divlist_m1 img{
height:22px;
padding-right:10px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;
}

.divlist_m1{
width:calc(100% - 30px);
padding-left:30px;
padding-top:20px;
}

.divm1{
background-color:#355062;
display:none;
}
.am11{
display:block;
width:calc(100% - 30px);
padding-left:30px;
font-size:16px;
color:white;
padding-top:10px;
padding-bottom:10px;
font-family: Microsoft JhengHei;
border-bottom:1px solid rgba(255,255,255,0.6);
}
.am1{
display:block;
width:calc(100% - 30px);
padding-left:30px;
font-size:17px;
color:#222222;
padding-top:10px;
padding-bottom:10px;
font-family:Noto Sans TC;font-weight:300;
position:relative;
}

.divback{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
background-color:rgba(255,255,255,0.4);
z-index:31;
display:none;
}

.divfix_m3-open{
position:fixed;
left:0px;
top:0px;
width:180px;
height:100vh;
background-color:white;
z-index:33;
transition:0.3s;
}
.divfix_m3-close{
position:fixed;
left:-190px;
top:0px;
width:180px;
height:100vh;
background-color:white;
z-index:33;
transition:0.3s;
}




.divfix_line{
position:fixed;
right:0px;
top:calc(50% + 12px);
padding:10px;
text-align:center;
z-index:21;
background-color:rgba(0,0,0,0.3);
transform:translatey(-50%);
}

.divfix_line a{
display:block;
width:100%;
}
.divfix_line img{
height:26px;
display:block;
margin:auto;
padding-top:6px;
padding-bottom:6px;
}









.divpanel{

min-height:300px;



}





.br1{

width:90%;

height:1px;

clear:both;

}



.div1200{

width:1200px;

margin:auto;

}







a{

text-decoration:none;

cursor:pointer;

}



body{

padding:0px;

margin:0px;

height:100vh;

scroll-behavior: smooth;

}





  /*





font:Noto+Sans+TC,400

font:Noto+Sans+TC,300

font: Noto Serif TC, serif,400

font:poppins

font:Open+Sans

font:lato

font:roboto



  font-family: Noto Sans TC, sans-serif;

    font-family: Noto Serif TC, serif;

    

    font-family:arial,tahoma,verdana;

    font-family:georgia;

    font-family:courier new;

*/

/*

top bottom left bottom

flipx flipy

zoom zoomleft zoomright zoomup zoomdown

bounce bounceleft bounceright bounceup bouncedown

rotate rotateleftup rotateleftdown rotaterightup rotaterightdown

speed tada shake band





*/



html{

line-height:1.5em;

padding:0px;

scroll-behavior: smooth;

margin:0px;

font-size:14px;

font-family: Microsoft JhengHei;

}



::selection {

background-color:#338FFF;

color:white;

}

::-moz-selection {

background-color:#338FFF;

color:white;

}







@keyframes kenburns {

    0% {

      opacity: 0;

    }

    5% {

      opacity: 1;

    }

    95% {

        transform: scale3d(1.5, 1.5, 1.5) ;

        animation-timing-function: ease-in;

        opacity: 1;

    }

    100% {

        transform: scale3d(2, 2, 2) ;

        opacity: 0;

    }

}





.text_overflow{

width:100px;

  overflow: hidden;

  text-overflow: ellipsis;

  

  display: -webkit-box;

   -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}



.text_overflow1{

 white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}











/*

top bottom left bottom

flipx flipy

zoom zoomleft zoomright zoomup zoomdown

bounce bounceleft bounceright bounceup bouncedown

rotate rotateleftup rotateleftdown rotaterightup rotaterightdown

speed tada shake band





*/



/* right */



.right {

  -webkit-animation-name: right;

  animation-name: right;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode:forwards;

  animation-fill-mode:forwards;

animation-play-state:paused;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  @-webkit-keyframes right {

  0% {

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  visibility: visible;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateX(0);

  transform: translateX(0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes right {

  0% {

  -webkit-transform: translateX(100%);

  transform: translateX(100%);

  visibility: visible;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateX(0);

  transform: translateX(0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

}



/* left */



.left {

  -webkit-animation-name: left;

  animation-name: left;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  animation-play-state:paused;

  }

  @-webkit-keyframes left {

  0% {

  -webkit-transform: translateX(-100%);

  transform: translateX(-100%);

  visibility: visible;

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateX(0);

  transform: translateX(0);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes left {

  0% {

  -webkit-transform: translateX(-100%);

  transform: translateX(-100%);

  visibility: visible;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateX(0);

  transform: translateX(0);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* bottom */

 

.bottom {

  -webkit-animation-name: bottom;

  animation-name: bottom;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

    animation-play-state:paused;

  }

  @-webkit-keyframes bottom {

  0% {

  -webkit-transform: translateY(-100%);

  transform: translateY(-100%);

  visibility: visible;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateY(0);

  transform: translateY(0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes bottom {

  0% {

  -webkit-transform: translateY(-100%);

  transform: translateY(-100%);

  visibility: visible;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateY(0);

  transform: translateY(0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* top */





 .top {

  -webkit-animation-name: top;

  animation-name: top;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  animation-play-state:paused;

  }

  @-webkit-keyframes top {

  0% {

  -webkit-transform: translateY(100%);

  transform: translateY(100%);

  visibility: visible;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateY(0);

  transform: translateY(0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes top {

  0% {

  -webkit-transform: translateY(100%);

  transform: translateY(100%);

  visibility: visible;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  100% {

  -webkit-transform: translateY(0);

  transform: translateY(0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* flipx */



.flipx {

  -webkit-backface-visibility: visible !important;

  backface-visibility: visible !important;

  -webkit-animation-name: flipx;

  animation-name: flipx;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:  forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes flipx {

  0% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  opacity: 0;

  }

  40% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  }

  60% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

  opacity: 1;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  80% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: perspective(400px);

  transform: perspective(400px);

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes flipx {

  0% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  opacity: 0;

  }

  40% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  }

  60% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  80% {

  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: perspective(400px);

  transform: perspective(400px);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 





/* flipy */



.flipy {

  -webkit-backface-visibility: visible !important;

  backface-visibility: visible !important;

  -webkit-animation-name: flipy;

  animation-name: flipy;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode:  forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes flipy {

  0% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

  transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  opacity: 0;

  }

  40% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  }

  60% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  80% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: perspective(400px);

  transform: perspective(400px);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes flipy {

  0% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

  transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  opacity: 0;

  }

  40% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

  transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  }

  60% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

  transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  80% {

  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: perspective(400px);

  transform: perspective(400px);

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 

  



/* zoom */



 .zoom {

  -webkit-animation-name: zoom;

  animation-name: zoom;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes zoom {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.3, .3, .3);

  transform: scale3d(.3, .3, .3);

  }

  50% {

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100%{

    opacity: 1;

  }

  }

  @keyframes zoom {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.3, .3, .3);

  transform: scale3d(.3, .3, .3);

  }

  50% {

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

    100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 

  

 

 

 /* zoomleft */

 

 .zoomleft {

  -webkit-animation-name: zoomleft;

  animation-name: zoomleft;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes zoomleft {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

  transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

  transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes zoomleft {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

  transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

  transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

    100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* zoomright */

 

 .zoomright {

  -webkit-animation-name: zoomright;

  animation-name: zoomright;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes zoomright {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

  transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

  transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes zoomright {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

  transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

  transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 

 

/* zoomup */

 

.zoomup {

  -webkit-animation-name: zoomup;

  animation-name: zoomup;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes zoomup {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

  transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

  transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes zoomup {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

  transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

  transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* zoomdown */



.zoomdown {

  -webkit-animation-name: zoomdown;

  animation-name: zoomdown;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes zoomdown {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes zoomdown {

  0% {

  opacity: 0;

  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);

  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

      100%{

    opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* bounce */



.bounce {

  -webkit-animation-name: bounce;

  animation-name: bounce;

  -webkit-animation-duration: .75s;

  animation-duration: .75s;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes bounce {

  0%, 20%, 40%, 60%, 80%, 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: scale3d(.3, .3, .3);

  transform: scale3d(.3, .3, .3);

  }

  20% {

  -webkit-transform: scale3d(1.1, 1.1, 1.1);

  transform: scale3d(1.1, 1.1, 1.1);

  }

  40% {

  -webkit-transform: scale3d(.9, .9, .9);

  transform: scale3d(.9, .9, .9);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(1.03, 1.03, 1.03);

  transform: scale3d(1.03, 1.03, 1.03);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  80% {

  -webkit-transform: scale3d(.97, .97, .97);

  transform: scale3d(.97, .97, .97);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  opacity: 1;

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes bounce {

  0%, 20%, 40%, 60%, 80%, 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: scale3d(.3, .3, .3);

  transform: scale3d(.3, .3, .3);

  }

  20% {

  -webkit-transform: scale3d(1.1, 1.1, 1.1);

  transform: scale3d(1.1, 1.1, 1.1);

  }

  40% {

  -webkit-transform: scale3d(.9, .9, .9);

  transform: scale3d(.9, .9, .9);

  }

  60% {

  opacity: 1;

  -webkit-transform: scale3d(1.03, 1.03, 1.03);

  transform: scale3d(1.03, 1.03, 1.03);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  80% {

  -webkit-transform: scale3d(.97, .97, .97);

  transform: scale3d(.97, .97, .97);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  opacity: 1;

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* bouncedown */



.bouncedown {

  -webkit-animation-name: bouncedown;

  animation-name: bouncedown;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode:forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes bouncedown {

  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, -3000px, 0);

  transform: translate3d(0, -3000px, 0);

  }

  

  60% {

  opacity: 1;

  -webkit-transform: translate3d(0, 25px, 0);

  transform: translate3d(0, 25px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  

  75% {

  -webkit-transform: translate3d(0, -10px, 0);

  transform: translate3d(0, -10px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  

  90% {

  -webkit-transform: translate3d(0, 5px, 0);

  transform: translate3d(0, 5px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  

  100% {

  -webkit-transform: none;

  transform: none;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  

  @keyframes bouncedown {

  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, -3000px, 0);

  transform: translate3d(0, -3000px, 0);

  }

  

  60% {

  opacity: 1;

  -webkit-transform: translate3d(0, 25px, 0);

  transform: translate3d(0, 25px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  

  75% {

  -webkit-transform: translate3d(0, -10px, 0);

  transform: translate3d(0, -10px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  

  90% {

  -webkit-transform: translate3d(0, 5px, 0);

  transform: translate3d(0, 5px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  

  100% {

  -webkit-transform: none;

  transform: none;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* bounceup */



.bounceup {

  -webkit-animation-name: bounceup;

  animation-name: bounceup;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:  forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes bounceup {

  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, 3000px, 0);

  transform: translate3d(0, 3000px, 0);

  }

  60% {

  opacity: 1;

  -webkit-transform: translate3d(0, -20px, 0);

  transform: translate3d(0, -20px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  75% {

  -webkit-transform: translate3d(0, 10px, 0);

  transform: translate3d(0, 10px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  90% {

  -webkit-transform: translate3d(0, -5px, 0);

  transform: translate3d(0, -5px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes bounceup {

  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, 3000px, 0);

  transform: translate3d(0, 3000px, 0);

  }

  60% {

  opacity: 1;

  -webkit-transform: translate3d(0, -20px, 0);

  transform: translate3d(0, -20px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  75% {

  -webkit-transform: translate3d(0, 10px, 0);

  transform: translate3d(0, 10px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  90% {

  -webkit-transform: translate3d(0, -5px, 0);

  transform: translate3d(0, -5px, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }



/* bounceleft */

  

 .bounceleft {

  -webkit-animation-name: bounceleft;

  animation-name: bounceleft;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes bounceleft {

  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(-3000px, 0, 0);

  transform: translate3d(-3000px, 0, 0);

  }

  60% {

  opacity: 1;

  -webkit-transform: translate3d(25px, 0, 0);

  transform: translate3d(25px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  75% {

  -webkit-transform: translate3d(-10px, 0, 0);

  transform: translate3d(-10px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  90% {

  -webkit-transform: translate3d(5px, 0, 0);

  transform: translate3d(5px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: none;

  transform: none;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes bounceleft {

  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(-3000px, 0, 0);

  transform: translate3d(-3000px, 0, 0);

  }

  60% {

  opacity: 1;

  -webkit-transform: translate3d(25px, 0, 0);

  transform: translate3d(25px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  75% {

  -webkit-transform: translate3d(-10px, 0, 0);

  transform: translate3d(-10px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  90% {

  -webkit-transform: translate3d(5px, 0, 0);

  transform: translate3d(5px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: none;

  transform: none;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 

 

 /* bounceright */

 

.bounceright {

  -webkit-animation-name: bounceright;

  animation-name: bounceright;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes bounceright {

  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(3000px, 0, 0);

  transform: translate3d(3000px, 0, 0);

  }

  60% {

  opacity: 1;

  -webkit-transform: translate3d(-25px, 0, 0);

  transform: translate3d(-25px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  75% {

  -webkit-transform: translate3d(10px, 0, 0);

  transform: translate3d(10px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  90% {

  -webkit-transform: translate3d(-5px, 0, 0);

  transform: translate3d(-5px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: none;

  transform: none;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes bounceright {

  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(3000px, 0, 0);

  transform: translate3d(3000px, 0, 0);

  }

  60% {

  opacity: 1;

  -webkit-transform: translate3d(-25px, 0, 0);

  transform: translate3d(-25px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  75% {

  -webkit-transform: translate3d(10px, 0, 0);

  transform: translate3d(10px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  90% {

  -webkit-transform: translate3d(-5px, 0, 0);

  transform: translate3d(-5px, 0, 0);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  100% {

  -webkit-transform: none;

  transform: none;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* rotate */



.rotate {

  -webkit-animation-name: rotate;

  animation-name: rotate;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:  forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes rotate {

  0% {

  -webkit-transform-origin: center;

  transform-origin: center;

  -webkit-transform: rotate3d(0, 0, 1, -200deg);

  transform: rotate3d(0, 0, 1, -200deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: center;

  transform-origin: center;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes rotate {

  0% {

  -webkit-transform-origin: center;

  transform-origin: center;

  -webkit-transform: rotate3d(0, 0, 1, -200deg);

  transform: rotate3d(0, 0, 1, -200deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: center;

  transform-origin: center;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* rotateleftup  */



.rotateleftup {

  -webkit-animation-name: rotateleftup;

  animation-name: rotateleftup;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode:forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes rotateleftup {

  0% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: rotate3d(0, 0, 1, 45deg);

  transform: rotate3d(0, 0, 1, 45deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes rotateleftup {

  0% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: rotate3d(0, 0, 1, 45deg);

  transform: rotate3d(0, 0, 1, 45deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 





/* rotateleftdown */

  

.rotateleftdown {

  -webkit-animation-name: rotateleftdown;

  animation-name: rotateleftdown;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes rotateleftdown {

  0% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: rotate3d(0, 0, 1, -45deg);

  transform: rotate3d(0, 0, 1, -45deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes rotateleftdown {

  0% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: rotate3d(0, 0, 1, -45deg);

  transform: rotate3d(0, 0, 1, -45deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: left bottom;

  transform-origin: left bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }



/* rotaterightup */



.rotaterightup {

  -webkit-animation-name: rotaterightup;

  animation-name: rotaterightup;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes rotaterightup {

  0% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: rotate3d(0, 0, 1, -90deg);

  transform: rotate3d(0, 0, 1, -90deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes rotaterightup {

  0% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: rotate3d(0, 0, 1, -90deg);

  transform: rotate3d(0, 0, 1, -90deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

}  



/* rotaterightdown */



 .rotaterightdown {

  -webkit-animation-name: rotaterightdown;

  animation-name: rotaterightdown;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  animation-play-state:paused;

  }

  @-webkit-keyframes rotaterightdown {

  0% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: rotate3d(0, 0, 1, 45deg);

  transform: rotate3d(0, 0, 1, 45deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes rotaterightdown {

  0% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: rotate3d(0, 0, 1, 45deg);

  transform: rotate3d(0, 0, 1, 45deg);

  opacity: 0;

  }

  100% {

  -webkit-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 

  

/* shake */



.band {

  -webkit-animation-name: band;

  animation-name: band;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes band {

  0% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  30% {

  -webkit-transform: scale3d(1.25, 0.75, 1);

  transform: scale3d(1.25, 0.75, 1);

  }

  40% {

  -webkit-transform: scale3d(0.75, 1.25, 1);

  transform: scale3d(0.75, 1.25, 1);

  }

  50% {

  -webkit-transform: scale3d(1.15, 0.85, 1);

  transform: scale3d(1.15, 0.85, 1);

  }

  65% {

  -webkit-transform: scale3d(.95, 1.05, 1);

  transform: scale3d(.95, 1.05, 1);

  }

  75% {

  -webkit-transform: scale3d(1.05, .95, 1);

  transform: scale3d(1.05, .95, 1);

  }

  100% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes band {

  0% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  30% {

  -webkit-transform: scale3d(1.25, 0.75, 1);

  transform: scale3d(1.25, 0.75, 1);

  }

  40% {

  -webkit-transform: scale3d(0.75, 1.25, 1);

  transform: scale3d(0.75, 1.25, 1);

  }

  50% {

  -webkit-transform: scale3d(1.15, 0.85, 1);

  transform: scale3d(1.15, 0.85, 1);

  }

  65% {

  -webkit-transform: scale3d(.95, 1.05, 1);

  transform: scale3d(.95, 1.05, 1);

  }

  75% {

  -webkit-transform: scale3d(1.05, .95, 1);

  transform: scale3d(1.05, .95, 1);

  }

  100% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 

  

/* shake */



.shake {

  -webkit-animation-name: shake;

  animation-name: shake;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes shake {

  0%{

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  0%, 100% {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  

  }

  10%, 30%, 50%, 70%, 90% {

  -webkit-transform: translate3d(-10px, 0, 0);

  transform: translate3d(-10px, 0, 0);

  }

  20%, 40%, 60%, 80% {

  -webkit-transform: translate3d(10px, 0, 0);

  transform: translate3d(10px, 0, 0);

  }

  100%{

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes shake {

  0%{

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  

  0%, 100% {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  }

  10%, 30%, 50%, 70%, 90% {

  -webkit-transform: translate3d(-10px, 0, 0);

  transform: translate3d(-10px, 0, 0);

  }

  20%, 40%, 60%, 80% {

  -webkit-transform: translate3d(10px, 0, 0);

  transform: translate3d(10px, 0, 0);

  }

  100%{

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }  



/* speed */



.speed {

  -webkit-animation-name: speed;

  animation-name: speed;

  -webkit-animation-timing-function: ease-out;

  animation-timing-function: ease-out;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes speed {

  0% {

  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);

  transform: translate3d(100%, 0, 0) skewX(-30deg);

  opacity: 0;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  60% {

  -webkit-transform: skewX(20deg);

  transform: skewX(20deg);

  opacity: 1;

  }

  80% {

  -webkit-transform: skewX(-5deg);

  transform: skewX(-5deg);

  opacity: 1;

  }

  100% {

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes speed {

  0% {

  -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);

  transform: translate3d(100%, 0, 0) skewX(-30deg);

  opacity: 0;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  60% {

  -webkit-transform: skewX(20deg);

  transform: skewX(20deg);

  opacity: 1;

  }

  80% {

  -webkit-transform: skewX(-5deg);

  transform: skewX(-5deg);

  opacity: 1;

  }

  100% {

  -webkit-transform: none;

  transform: none;

  opacity: 1;

    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



/* tada */

  

.tada {

  -webkit-animation-name: tada;

  animation-name: tada;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    animation-play-state:paused;

  }

  @-webkit-keyframes tada {

  0% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  10%, 20% {

  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  }

  30%, 50%, 70%, 90% {

  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  }

  40%, 60%, 80% {

  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  }

  100% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  }

  @keyframes tada {

  0% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  }

  10%, 20% {

  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  }

  30%, 50%, 70%, 90% {

  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  }

  40%, 60%, 80% {

  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  }

  100% {

  -webkit-transform: scale3d(1, 1, 1);

  transform: scale3d(1, 1, 1);

   -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;

  }

  } 



.pn1{
width:calc(100% - 40px);
margin:auto;
padding:20px;
font-size:16px;
color:#222222;

line-height:1.5em;
}

.pn1 span{
display:inline-block;
  display: -webkit-box;
   -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
    overflow: hidden;
  text-overflow: ellipsis;

}

.divnews:hover .divposimg_news{
transform:translatex(-50%) translatey(-50%) scale(1.3);
-webkit-filter:brightness(1.2);
transition:0.3s;
}

.divimg_news{
position:relative;
left:0px;
top:0px;
overflow:hidden;
}
.divimg_news img{
width:100%;
}
.divposimg_news{
position:absolute;
left:50%;
top:50%;
width:100%;
height:100%;
transition:0.3s;
transform:translatex(-50%) translatey(-50%) scale(1);
-webkit-filter:brightness(1);
background-image:url(https://image.yida-design.com.tw/anho/test1.jpg);
background-size:cover;
}

.divposimg_date span{
display:inline-block;
}

.divposimg_date{
position:absolute;
right:15px;
bottom:15px;
width:46px;
height:46px;
color:white;

display:inline-flex;
align-items:center;

justify-content:center;
border:1px solid white;
}
.spdate{
display:inline-block;
text-align:center;
font-family:poppins;
font-size:22px;
padding-top:10px;
line-height:1em;
}
.spmonth{
width:100%;
text-align:center;
font-size:15px;
margin-top:0px;
position:relative;
top:-6px;
line-height:1em;
letter-spacing:0px;
display:inline-block;
}

.divnews{
width:calc(33.3% - 60px);
margin-left:30px;
margin-right:30px;
float:left;
background-color:white;
box-shadow:0px 0px 6px #cccccc;
margin-bottom:50px;
left:3px;
}


























@media screen and (min-width:1px) and (max-width:1100px){



.divlogo_rec{
width:100px;
}
.divlogo{
width:100px;
height:100px;
}

.logoimg{
width:60px;
}
.a1{
font-size:17px;
}



}



@media screen and (min-width:1px) and (max-width:1000px){



.a1{
width:100px;
}
.a1-back{
width:100px;
}




}



@media screen and (min-width:1px) and (max-width:1230px){



.tableb1{
width:100%;
}



.div1200{

width:100%;

}



}



@media screen and (min-width:840px) and (max-width:1230px){



.tdb1{
padding-left:40px;
}
.tdb4{
padding-right:40px;
}



.pcopy{
width:calc(100% - 20px);
}



}



@media screen and (min-width:840px) and (max-width:1150px){



.tdb1{
padding-right:50px;
}
.tdb2{
padding-right:50px;
}




}



@media screen and (min-width:840px) and (max-width:1000px){



.tdb3{
width:auto;
}
.tdb4{
display:none;
}
.pb1{
width:260px;
}



}



@media screen and (min-width:1px) and (max-width:840px){



.tableb1{
display:block;
}
.trb1{
display:block;
}
.tdb1{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:20px;
}
.tdb2{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:20px;
}
.tdb3{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:20px;
}
.tdb4{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
text-align:center;
}

.ab1{
text-align:center;
}

.h3b1{
text-align:center;
}

.pb1{
text-align:center;
}

.divface{
display:block;
}




.pcopy{
width:calc(100% - 40px);
padding-right:20px;
text-align:center;
}



}



@media screen and (min-width:1px) and (max-width:460px){



.h3b1{
font-size:17px;
padding-bottom:20px;
}

.divbase_rec{
padding-top:30px;
padding-bottom:30px;
}

.logob1{
width:60px;
}



.brcp1{
display:inline;
}



.divword_root{

top:0px;
width:220px;
margin:auto;
margin-bottom:30px;
}

.divword_root span{
font-size:18px;
width:calc(50% - 14px);
font-family:Noto Sans TC;font-weight:400;
}

.divword_root code{
display:none;
}



.h2root{
font-size:20px;
margin-bottom:0px;
}


.proot{
font-size:18px;
}



.divline_news{
height:35px;

margin-bottom:4px;
}

.h2root{
margin-bottom:30px;
}



.divfix_m3-open{
width:140px;
}
.divfix_m3-close{
width:140px;
left:-150px;
}

.am1{
padding-top:8px;
padding-bottom:8px;
}
.am11{
padding-top:8px;
padding-bottom:8px;
}
.divlist_m1 img{
height:20px;
padding-right:6px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;
}



.pn1{
width:calc(100% - 30px);
font-size:15.5px;
padding:15px;
}



}



@media screen and (min-width:1px) and (max-width:380px){




.tdb3{
width:180px;
}



}



@media screen and (min-width:550px) and (max-width:790px){



.divword_root span{
width:100px;
}



}



@media screen and (min-width:460px) and (max-width:550px){



.divword_root span{
font-size:17px;
width:80px;
}




}



@media screen and (min-width:1100px) and (max-width:1230px){



.divroot_rec1{
width:calc(100% - 20px);
}



}



@media screen and (min-width:900px) and (max-width:1100px){




.divroot_rec1{
width:calc(100% - 20px);
}



.divroot_rec1{
width:calc(100% - 20px);
}



}



@media screen and (min-width:720px) and (max-width:900px){



.divroot_rec1{
width:660px;
}



.divnews{
width:calc(50% - 40px);
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
left:2px;
}





}



@media screen and (min-width:650px) and (max-width:720px){



.divroot_rec1{
width:calc(100% - 40px);
}



.divnews{
width:calc(50% - 40px);
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
left:2px;
}




}



@media screen and (min-width:600px) and (max-width:650px){



.divroot_rec1{
width:calc(100% - 30px);
}



.divnews{
width:calc(50% - 30px);
margin-left:15px;
margin-right:15px;
margin-bottom:30px;
left:2px;
}





}



@media screen and (min-width:460px) and (max-width:600px){



.divroot_rec1{
width:100%;
}



.divnews{
width:300px;
margin:auto;
margin-bottom:30px;
float:none;
left:1px;
}




}



@media screen and (min-width:360px) and (max-width:460px){



.divroot_rec1{
width:100%;
}



.divnews{
width:260px;
margin:auto;
margin-bottom:30px;
float:none;
left:1px;
}




}



@media screen and (min-width:1px) and (max-width:360px){



.divroot_rec1{
width:100%;
}



.divnews{
width:calc(100% - 60px);
margin:auto;
margin-bottom:30px;
float:none;
left:1px;
}





}



@media screen and (min-width:1px) and (max-width:790px){



.divfix{
display:none;
}

.divfix_m1{
display:block;
}

.divspace{
display:block;
height:44px;
}



.divfix_line{
top:auto;
bottom:0px;
padding:6px;
transform:translatey(0);
display:none;
}




}