.listd1{
background-image:url(https://www.scy.com.tw/image/icon_down1.svg);
background-repeat:no-repeat;
background-position:calc(100% - 15px) 50%;
background-size:auto 0.6em;
}


@keyframes list2{
0%{
top:-10px;
-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;
}
}

.a11:hover .divlist2{

animation-name:list2;
animation-duration:0.3s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;

}

.divlist2{
position:absolute;
left:130px;
width:130px;
top:-2000px;

}
.a21{
display:block;
padding-left:20px;
width:calc(100% - 20px);
padding-top:8px;
padding-bottom:8px;
font-size:14.5px;
line-height:1em;
color:#222222;
text-align:left;
position:relative;
}
.divpadd2{
padding-top:8px;
padding-bottom:8px;
background-color:#FDF4DF;
box-shadow:6px 6px 6px #cccccc;
}



@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;
}
}

.a11{
display:block;
padding-left:30px;
width:calc(100% - 30px);
padding-top:8px;
padding-bottom:8px;
font-size:14px;
line-height:1em;
color:#222222;
letter-spacing:1.5px;
text-align:left;
font-size:14.5px;
position:relative;
}

.divpadd1{
background-image:url(https://www.scy.com.tw/image/back1.jpg);
}

.divpadd_list{
padding-top:8px;
padding-bottom:8px;
background-color:#FDF4DF;
box-shadow:6px 6px 6px #cccccc;
}

.a11:before{
content:"";
display:inline-block;
width:4px;
height:4px;
border-radius:50%;
border:0px solid #803805;
background-color:#803805;
position:absolute;
left:15px;
top:50%;
transform:translatey(-50%);
}

.a1:hover .divlist1{

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

}



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


}



.memyes{
display:none;
}

.memno{
display:none;
}

.pm1{
width:100%;
margin:auto;
font-size:14px;
color:#666666;
letter-spacing:0.5px;
}
.pm1 a{
color:#999999;
}
.pm1 span{
display:inline-block;
padding-left:6px;
padding-right:6px;
font-family:Noto Sans TC;font-weight:400;
}

.divlist_m1{
position:absolute;
right:40px;
top:10px;
transition:0.4s;
}
.divlist_m1-back{
position:absolute;
right:40px;
top:3px;
transition:0.4s;
}




.divspace{
height:140px;
}

.test1{
display:block;
margin:auto;
padding-top:100px;
}

.a1{
display:inline-block;
font-size:14.2px;
color:#222222;
letter-spacing:3px;
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
padding-right:30px;

position:relative;

font-size:14.5px;

}
.a1:before{
content:"";
display:inline-block;
width:5px;
height:5px;
border-radius:50%;
border:2px solid #cccccc;

position:absolute;
left:0px;
top:50%;
transform:translatey(-50%);
}

.logoimg{
height:140px;
transition:0.4s;
}
.logoimg-back{
height:110px;
transition:0.4s;
}
.table1{
display:table;
width:1200px;
margin:auto;



}
.tr1{
display:table-row;
}
.td1{
display:table-cell;
padding-left:50px;
width:134px;
vertical-align:middle;
}
.td2{
display:table-cell;
padding-right:20px;
vertical-align:middle;
text-align:right;
position:relative;
}

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


}


.divcenter{
background-image:url(https://www.scy.com.tw/image/back_white.png?n1);
background-size:100% 60px;
background-repeat:no-repeat;
background-position:50% calc(50% - 3px);

transition:0.4s;
}

.divcenter-back{
background-image:url(https://www.scy.com.tw/image/back_white.png?n1);
background-size:100% 50px;
background-repeat:no-repeat;
background-position:50% calc(50% - 3px);

transition:0.4s;
}



















.pcopy{

width:calc(1200px - 50px);

margin:auto;

padding-left:50px;

font-size:14px;

color:white;

line-height:1.4em;

padding-top:10px;

padding-bottom:10px;

}



.pcopy span{

display:inline-block;

}





.divcopy{

background-color:#732E2E;

}















.brb1{

display:none;

}





.ab1{

display:block;

width:50%;

float:left;

font-size:14.5px;

color:#111111;

padding-bottom:6px;



}



.pphone{

width:calc(100% - 25px);

margin:auto;

font-size:14.5px;

color:#000000;

padding-left:25px;

position:relative;

padding-bottom:0px;



background-image:url(https://www.scy.com.tw/image/icon_phone.svg);

background-size:auto 0.9em;

background-position:0px 5px;

background-repeat:no-repeat;

margin-bottom:8px;



}



.pphone span{

display:inline-block;

}



.h3base{

width:100%;

margin:auto;

font-size:19px;

color:#732E2E;

letter-spacing:3px;

font-family:Noto Sans TC;font-weight:400;

margin-bottom:20px;

}



.tablebase{

display:table;

width:1200px;

margin:auto;

table-layout:fixed;

}

.trbase{

display:table-row;

}

.tdbase1{

display:table-cell;

vertical-align:top;

width:300px;

padding-left:50px;

padding-right:100px;

}

.tdbase2{

display:table-cell;

vertical-align:top;

width:180px;

}

.tdbase3{

display:table-cell;

vertical-align:top;

text-align:right;

padding-right:20px;

}

.divbase_rec{

background-color:rgba(255,255,255,0.6);

background-size:cover;

background-position:50% 50%;

padding-top:50px;

padding-bottom:40px;

}





























.logom1{
position:relative;
top:0px;
position:absolute;
left:50%;
height:50px;
transform:translatex(-50%);
}

.spcart_num1{
display:inline-flex;
width:20px;
height:20px;
align-items:center;
justify-content:center;
font-size:13px;
color:white;
background-color:red;
border-radius:50%;
position:absolute;
right:40px;
top:7px;
display:none;
}

.homeimg_m1{
height:20px;
position:relative;
top:1px;
}
.cartimg_m1{
height:23px;
padding-top:6px;
padding-bottom:6px;
}

.tdm2{
text-align:center;
position:relative;
}
.tdm1{
width:50px;
cursor:pointer;
position:relative;
background-color:#A54A46;
}

.tdm1 span{
display:block;
width:25px;
height:2px;
background-color:white;
background-color:#FFE495;
background-color:#8B2323;
background-color:white;
margin:auto;
margin-top:4px;
margin-bottom:4px;
}
.tdm3{
width:30px;
text-align:right;
padding-right:20px;
position:relative;
cursor:pointer;
}

.divfix_m1{
position:fixed;
left:0px;
top:0px;
z-index:21;
width:100%;
display:none;
/*
background-image:linear-gradient(to right,#B96D31,#CEA764);
background-color:#803805;
*/
background-color:#FEF5DC;
}
.tam1{
width:100%;
height:50px;

}





.divm2{
display:none;
background-color:#703330;
max-height:calc(100vh - 400px);
overflow-y:auto;
background-color:#4B221F;
}

.divm1{
background-color:white;
display:none;
background-color:#FAF3F3;
background-color:#71342F;
}

.listm1{
background-image:url(https://www.scy.com.tw/image/icon_down.svg?n1);
background-repeat:no-repeat;
background-size:auto 0.7em;
background-position:calc(100% - 15px) calc(50% + 1px);
}

.am12{
display:block;
padding-left:30px;
width:calc(100% - 30px);
font-size:15.5px;
color:white;
line-height:1em;
padding-top:8px;
padding-bottom:8px;
}

.am12:before{
content:"";
display:inline-block;
width:4px;
height:4px;
position:relative;
top:-3px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
background-color:#834E21;
border-radius:50%;
margin-right:10px;
}


.am11{
display:block;
padding-left:30px;
width:calc(100% - 30px);
font-size:15.5px;
color:#000000;
line-height:1em;
padding-top:8px;
padding-bottom:8px;
color:white;
}
.am11:before{
content:"";
display:inline-block;
width:4px;
height:4px;
position:relative;
top:-3px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
background-color:#834E21;
border-radius:50%;
margin-right:10px;
}


.divpadd_m1{
    /*
background-image:linear-gradient(to bottom,rgba(255,255,255,0.6),rgba(255,255,255,0.3));
*/
background-color:#FEF5DC;
height:100vh;
}

.am1:before{
content:"";
display:inline-block;
width:4px;
height:4px;
position:relative;
top:-3px;
background-color:#834E21;
border-radius:50%;
margin-right:10px;
}

.am1{
display:block;
padding-left:30px;
width:calc(100% - 30px);
font-size:16px;
color:#000000;
line-height:1em;
padding-top:8px;
padding-bottom:8px;

}

.aclosem1{
display:block;
width:calc(100% - 20px);
padding-top:10px;
padding-bottom:10px;
font-family:poppins;

font-size:15px;
padding-right:20px;
text-align:right;
color:white;
background-image:url(https://www.scy.com.tw/image/icon_left_white1.svg);
background-color:#A54A46;
background-repeat:no-repeat;
background-size:auto 1em;
background-position:30px 50%;
margin-bottom:20px;

}

.divfix_m3-open{
position:fixed;
left:0px;
top:0px;
width:160px;
height:100vh;
z-index:33;
background-image:url(https://www.scy.com.tw/image/backm1.jpg?n1=1);
background-size:cover;
transition:0.4s;
}
.divfix_m3-close{
position:fixed;
left:-170px;
top:0px;
width:160px;
height:100vh;
z-index:33;
background-image:url(https://www.scy.com.tw/image/backm1.jpg?n1=1);
background-size:cover;
transition:0.4s;
}
.divback{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
z-index:31;
display:none;
background-color:rgba(0,0,0,0.4);
}







.h2root{
width:30px;
margin:auto;
text-align:center;
color:#803805;
font-size:30px;
line-height:1.1em;
font-family:Noto Serif TC;font-weight:400;
padding-top:50px;
padding-bottom:50px;
position:relative;


}

.h2root:before{
content:'';
display:inline-block;
width:1px;
position:absolute;
left:-20px;
top:55px;
height:calc(100% - 100px);
border-left:1px solid #803805;
}
.h2root:after{
content:'';
display:inline-block;
width:1px;
position:absolute;
right:-20px;
top:55px;
height:calc(100% - 100px);
border-right:1px solid #803805;
}







.proot{
padding-top:30px;
width:300px;
margin:auto;
font-size:14.5px;
color:#000000;

letter-spacing:2px;
line-height:1.6em;
text-align:center;


background-image:url(https://www.scy.com.tw/image/icon_dot1.png);
background-repeat:no-repeat;
background-position:50% 0px;
margin-top:-20px;
margin-bottom:30px;
}





.divrecart{
text-align:right;
padding-bottom:10px;
}
.divrecart img{
width:20px;
}

.adel{
display:block;
width:100%;
padding-top:4px;
padding-bottom:4px;
text-align:center;
border-radius:2px;
color:white;
font-size:15px;
margin-bottom:3px;
margin-bottom:3px;
background-color:#494949;
}

.tdcart3{
width:50px;
}

.tacart{
width:100%;
border-bottom:1px solid #666666;
}
.tdcart1{
width:70px;
padding-right:10px;
}
.tdcart1 img{
width:100%;
}

.tdcart2{
font-size:15px;
color:white;
line-height:1.4em;
}
.tdcart2 span{
display:inline-block;
width:100%;
color:#999999;
font-family:poppins;
}

.acart_root{
display:block;
width:100%;
border-radius:4px;
background-color:#AD3425;
color:white;
padding-top:10px;
padding-bottom:10px;
text-align:center;
font-size:15px;
margin-bottom:20px;
}

.divpadd_cart{
padding:20px;
}

.divfix_cart-open{
position:fixed;
left:0px;
top:0px;
width:360px;
height:100vh;
z-index:33;
transition:0.4s;
background-color:#222222;
}

.divfix_cart-close{
position:fixed;
left:-370px;
top:0px;
width:360px;
height:100vh;
z-index:33;
transition:0.4s;
background-color:#222222;
}

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






.spcart_num{
display:inline-flex;
width:26px;
height:26px;
background-color:red;
color:white;
font-size:15px;
border-radius:50%;
align-items:center;
justify-content:center;
font-family:roboto;
position:relative;
top:-10px;
margin-right:-10px;
}

.acart{
display:inline-flex;
width:40px;
height:40px;
align-items:center;
border-radius:4px;
justify-content:center;
background-color:rgba(0,0,0,0.8)
}
.acart img{
width:25px;
position:relative;
left:-2px;
}

.divfix_cart1{
position:fixed;
right:30px;
top:50px;
z-index:21;
display:inline-block;
}
.divfix_cart2{
position:fixed;
right:30px;
top:95px;
z-index:21;
display:inline-block;
}







.lot1{
display:block;
margin:auto;
width:220px;
}

.plogin a{
color:teal;
}

.plogin{
width:100%;
margin:auto;
font-size:13.5px;
color:#222222;
text-align:center;
padding-top:10px;
padding-bottom:20px;
}

.alogin1 span{
display:none;
}


.alogin1{
display:inline-block;
padding-left:40px;
width:calc(50% - 42px);
background-color:#006699;
color:white;
font-size:15px;
padding-top:8px;
padding-bottom:8px;

background-image:url(https://www.scy.com.tw/image/icon_login_white.svg);
background-repeat:no-repeat;
background-position:15px 50%;
background-size:auto 0.8em;
}

.talogin{
width:calc(100% - 40px);
margin:auto;
font-size:15px;
color:#111111;
margin-bottom:6px;
}
.tdlogin1{
width:50px;
}
.talogin input[type=text]{
width:100%;
height:25px;

border:1px solid white;
background-color:#F1DED1;
}
.talogin input[type=password]{
width:100%;
height:25px;

border:1px solid white;
background-color:#F1DED1;
}
.talogin input[type=checkbox]{
width:15px;
height:15px;
position:relative;
top:2px;
border:1px solid #cccccc;
background-color:#F1DED1;
}


.divtop_login{
width:100%;
height:35px;
border-radius:4px;
position:relative;
background-image:linear-gradient(to bottom,white,#f6f6f6);
}
.divtop_login img{
position:absolute;
right:12px;
top:12px;
width:12px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;
}

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

.divfix_login{
position:fixed;
left:50%;
top:calc(50% - 30px);
z-index:33;
width:360px;
display:none;
border-radius:4px;
background-color:white;
transform:translatex(-50%) translatey(-50%);

background-image:url(https://www.scy.com.tw/image/back1.jpg);

}

.divpadd_login{
padding:20px;
border-radius:4px;
background-color:rgba(255,255,255,0.9);
}









.plog:before{
content:'';
display:inline-block;
width:6px;
height:6px;
margin-right:10px;
background-color:#CEA963;
position:relative;
top:-2px;
}

.plog a{
border:1px solid #dddddd;
border-radius:4px;
color:#333333;
font-size:13.5px;
display:inline-block;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
margin-right:3px;
background-image:linear-gradient(to bottom,white,#f1f1f1);

}

.plog{
width:calc(100% - 30px);
margin:auto;
padding:10px;
padding-left:20px;
font-size:13.5px;
color:#555555;

}

.divfix_log-open{
position:fixed;
bottom:0px;
right:0px;
display:inline-block;
z-index:21;
width:100%;
display:none;
box-shadow:6px 0px 6px #cccccc;
background-color:rgba(250, 250, 250,1);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
transition:0.4s;
}
.divfix_log-close{
position:fixed;
bottom:0px;
right:0px;
display:inline-block;
z-index:21;
width:100%;
display:none;
box-shadow:6px 0px 6px #cccccc;
background-color:rgba(250, 250, 250,1);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
transition:0.4s;
}








.divpanel{
min-height:360px;
overflow:hidden;
}


.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;

background-image:url(https://www.scy.com.tw/image/back3.jpg?n1);
background-size:cover;
background-attachment:fixed;

}


  /*


font:Noto+Sans+TC,400

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=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

    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=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;

  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;

  }

  } 



.divpro_rec2{
padding:10px;
background-color:rgba(255,255,255,0.8);
}

.pprice{

font-size:14.5px;
color:#666666;
letter-spacing:1px;
text-align:center;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;
letter-spacing:1px;
background-color:rgba(0,0,0,0.8);

background-color:rgba(88, 39, 3,0.85);

color:white;
margin:0px;
position:absolute;
right:0px;
bottom:0px;
}


.apro{
display:block;
width:100%;
font-size:18px;
text-align:center;
line-height:1.2em;
padding-top:6px;
color:#222222;
padding-bottom:6px;
font-family:Noto Sans TC;font-weight:300;
}

.divposimg_pro{
position:absolute;
left:50%;
top:50%;
transform:translatex(-50%) translatey(-50%) scale(1);
width:100%;
height:100%;
background-image:url(https://www.scy.com.tw/image/test2.jpg);
background-size:cover;
transition:0.4s;
-webkit-filter:brightness(1);
}

.divpro:hover .hover1{
transform:translatex(-50%) translatey(-50%) scale(1.2);
transition:0.4s;
-webkit-filter:brightness(1.2);
}


.divimg_pro{
position:relative;
overflow:hidden;
}
.divimg_pro img{
width:100%;
}

.divpro{
margin-left:30px;
margin-right:30px;
width:calc(33.3% - 60px);
position:relative;
float:left;
margin-bottom:50px;
left:3px;
box-shadow:6px 6px 6px #cccccc;
}


.divpro_rec1{
width:1200px;
margin:auto;
}




















.divtype{
text-align:center;
padding-bottom:50px;
}
.divtype a{
display:inline-block;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
line-height:1em;
padding-right:15px;
background-color:white;
font-size:16px;
margin-left:3px;
margin-right:3px;
border-radius:6px;
}
.atype3{
box-shadow:3px 3px 6px #803805;
color:#803805;
}
.atype1{
box-shadow:3px 3px 6px #666666;
color:#666666;
}






.divpage{
text-align:center;
padding-top:50px;
padding-bottom:100px;
}

.divpage img{
height:0.8em;
}

.page1{
color:#cccccc;
}

.page3{
color:#111111;
}

.divpage a{
display:inline-flex;
width:40px;
height:40px;
font-size:15px;
align-items:center;
margin-left:3px;
margin-right:3px;
justify-content:center;
background-color:white;
font-family:poppins;
}






.divposimg_close{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.6);
}
.pclose{
display:inline-block;
padding:15px;
line-height:1em;
padding-left:20px;
padding-right:20px;
background-color:white;
font-size:14.5px;
color:#222222;
text-align:center;

position:absolute;
left:50%;
top:50%;
transform:translatex(-50%) translatey(-50%);
font-family:Noto Sans TC;font-weight:400;
}





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


.divlist_m1{
top:3px;
right:10px;
}
.divlist_m1-back{
top:3px;
right:10px;
}



.a1{
letter-spacing:1px;
}

.logoimg{
height:110px;
}
.td1{
width:105px;
}

.td2{
padding-right:0px;
}

.divcenter{
background-size:100% 50px;
}



.divfix_cart1{
top:90px;
right:15px;

}

.divfix_cart2{
top:135px;
right:15px;

}


}

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


.table1{
width:100%;
}





.tablebase{

width:100%;

}




.div1200{
width:100%;
}


}

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


.a1{
padding-right:20px;
}



}

@media screen and (min-width:880px) and (max-width:950px){


.a1:before{
display:none;
}
.a1{
padding-right:15px;
padding-left:15px;
}


}

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


.a1:before{
display:none;
}
.a1{
padding-right:10px;
padding-left:10px;
}


}

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




.pcopy{

width:calc(100% - 50px);

}





}

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




.pcopy{

text-align:center;

width:calc(100% - 60px);

padding-left:30px;

padding-right:30px;

}







.tablebase{

display:block;

}

.trbase{

display:block;

}

.tdbase1{

display:block;

padding-left:0px;

padding-right:0px;

margin:auto;

padding-bottom:20px;

}

.tdbase2{

display:block;

padding-left:0px;

padding-right:0px;

margin:auto;

padding-bottom:20px;

}

.tdbase3{

display:block;

padding-left:0px;

padding-right:0px;

margin:auto;

text-align:center;

}



.h3base{

text-align:center;

}



.ab1{

text-align:center;

}







}

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




.tdbase1{

padding-right:50px;

}





}

@media screen and (min-width:830px) and (max-width:1050px){




.tdbase2{

display:none;

}

.tdbase1{

padding-right:0px;

}





}

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




.baseimg{

width:300px;

}





}

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








.tdbase1{

width:170px;

}

.brb1{

display:inline;

}



.h3base{

font-size:18px;

margin-bottom:20px;

}









.am1{
width:calc(100% - 20px);
padding-left:20px;
font-size:16px;
font-family:Noto Sans TC;font-weight:300;
}

.am11{
width:calc(100% - 20px);
padding-left:20px;
font-size:15.5px;
font-family:Noto Sans TC;font-weight:300;
}

.am12{
width:calc(100% - 20px);
padding-left:20px;
font-size:15.5px;
font-family:Noto Sans TC;font-weight:300;
}

.aclosem1{
background-position:20px 50%;
}

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



.h2root{
font-size:20px;
width:22px;
padding-top:30px;
padding-bottom:30px;
}

.h2root:before{
top:35px;
height:calc(100% - 60px);
}
.h2root::after{
top:35px;
height:calc(100% - 60px);
}




.proot{
margin-top:-10px;
margin-bottom:30px;
padding-top:20px;
font-family:Noto Sans TC;font-weight:300;
}



.divfix_cart-open{
width:100%;
}
.divfix_cart-close{
width:100%;
left:calc(-100% - 30px);
}

.acart_root{
padding-top:8px;
padding-bottom:8px;
}




.divfix_login{
width:calc(100% - 80px);
}

.plogin{
padding-top:0px;
padding-bottom:10px;
}

.divpadd_login{
padding:10px;
padding-bottom:15px;
}

.alogin1{
font-size:14px;
}
.talogin{
font-size:14px;
}

.alogin1{
padding-top:6px;
padding-bottom:6px;
}



.plog{
font-family:Noto Sans TC;font-weight:300;
}



.apro{
font-size:16px;
}




.divtype a{
font-size:15.5px;
}

.divtype{
padding-bottom:30px;
}




.divpage a{
width:35px;
height:35px;
}



}

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


.divfix{
display:none;
}

.divspace{
height:50px;
}

.divfix_m1{
display:block;
}

.test1{
width:100%;    
}



.divfix_cart1{
display:none;
}
.divfix_cart2{
display:none;
}



.divfix_log-open{
display:block;
}

.divfix_log-close{
display:block;
}



}

@media screen and (min-width:1050px) and (max-width:1350px){


.divfix_cart1{
top:110px;
right:15px;

}


.divfix_cart2{
top:155px;
right:15px;

}



}

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


.talogin{
width:calc(100% - 20px);
}
.tdlogin1{
width:40px;
}



}

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


.alogin1{
width:calc(100% - 40px);
}
.alogin1:nth-child(2){
display:none;
}

.alogin1 span{
display:inline;
}



}

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


.divpro_rec1{
width:calc(100% - 60px);
}



}

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


.divpro{
margin-left:20px;
margin-right:20px;
width:calc(33.3% - 40px);
margin-bottom:40px;
left:3px;
}

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



}

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


.divpro{
margin-left:15px;
margin-right:15px;
width:calc(33.3% - 30px);
margin-bottom:30px;
left:3px;
}

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



}

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


.divpro{
width:calc(50% - 60px);
left:2px;
}

.divpro_rec1{
width:700px;
}



}

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


.divpro{
width:calc(50% - 60px);
left:2px;
}

.divpro_rec1{
width:calc(100% - 60px);
}



}

@media screen and (min-width:680px) and (max-width:750px){


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

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



}

@media screen and (min-width:630px) and (max-width:680px){


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

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



}

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


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

.divpro_rec1{
width:100%;
}



}

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


.divpro{
width:280px;
margin:auto;
float:none;
margin-bottom:40px;
left:1px;
}

.divpro_rec1{
width:100%;
}



}

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


.divpro{
width:calc(100% - 70px);
margin:auto;
float:none;
margin-bottom:40px;
}

.divpro_rec1{
width:100%;
}



}