.a1:hover .divlist1{
animation-name:list1;
animation-duration:0.4s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
}
@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;
}
}
.divlist1{
position:absolute;
left:0px;
top:-2000px;
padding-top:60px;
width:200px;
}
.divpadd_list1{
background-color:white;
box-shadow:0px 0px 6px #cccccc;
}
.a11{
display:block;
padding-top:12px;
padding-bottom:12px;
line-height:1em;
border-left:6px solid #0099CC;
border-bottom:1px solid #cccccc;
padding-left:20px;
width:calc(100% - 26px);
font-size:16px;
color:#333333;
text-align:left;
transition:0.3s;
}
.a11:hover{
color:orange;
padding-left:30px;
width:calc(100% - 36px);
transition:0.3s;
}
.spdata_mem{
display:inline-block;
font-size:14px;
color:white;
background-color:#20A29F;
line-height:1.2em;
padding-left:12px;
padding-right:12px;
padding-top:6px;
padding-bottom:6px;
position:absolute;
left:0px;
top:40px;
white-space:nowrap;
box-shadow:2px 2px 6px rgba(0,0,0,0.5);
border-radius:4px;
display:none;
}
.spword11{
display:inline-block;
position:absolute;
right:-140px;
top:50%;
line-height:1.4em;
font-size:13px;
color:#888886;
transform:translatey(-50%);
}
.divspace{
height:75px;
}
.logoimg{
height:70px;
transition:0.4s;
}
.logoimg-back{
height:60px;
transition:0.4s;
}
.aphone-back span{
display:inline-block;
position:relative;
top:-4px;
}
.aphone-back div{
display:inline-block;
position:relative;
top:4px;
}
.aphone-back{
display:flex;
width:75px;
height:65px;
background-color:#006F93;
align-items:center;
justify-content:center;
float:right;
color:white;
font-size:18px;
font-family:poppins;
transition:0.4s;
}
.aphone span{
display:inline-block;
position:relative;
top:-4px;
}
.aphone div{
display:inline-block;
position:relative;
top:4px;
}
.aphone{
display:flex;
width:75px;
height:75px;
color:white;
font-size:20px;
font-family:poppins;
background-color:#006F93;
align-items:center;
justify-content:center;
float:right;
transition:0.4s;
}
.aphone:nth-of-type(1) img{
width:22px;
}
.aphone:nth-of-type(2) img{
width:28px;
}
.aphone-back:nth-of-type(1) img{
width:22px;
}
.aphone-back:nth-of-type(2) img{
width:28px;
}
[data-list]:after{
content:">";
display:inline-block;
margin-left:10px;
transform:rotate(90deg);
font-size:14px;
color:#aaaaaa;
font-family:Nanum Gothic;font-weight:700;
}
.a1{
display:inline-block;
padding-left:15px;
padding-right:15px;
font-size:16px;
color:#333333;
padding-top:10px;
padding-bottom:10px;
position:relative;
}
.table1-back{
display:table;
height:60px;
width:100%;
transition:0.4s;
}
.table1{
display:table;
height:70px;
width:100%;
transition:0.4s;
}
.tr1{
display:table-row;
}
.td1{
display:table-cell;
vertical-align:middle;
width:160px;
padding-left:50px;
position:relative;
left:0px;
top:0px;
}
.td2{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.td3{
display:table-cell;
vertical-align:middle;
width:255px;
padding-left:50px;
text-align:right;
}
.divfix{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:11;
background-color:white;
box-shadow:0px 0px 6px #cccccc;
}
.divcrumb{
width:calc(1200px - 0px);
margin:auto;
font-size:14.5px;
color:#666666;
padding-top:10px;
font-family:poppins;
}
.divcrumb:before{
content:'';
display:inline-block;
width:16px;
height:16px;
background-image:url(https://image.yida-design.com.tw/yxs/icon_home.webp);
background-repeat:no-repeat;
background-size:contain;
position:relative;
top:2px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
margin-right:3px;
background-position:50% 50%;
}
.divcrumb a{
color:#888888;
}
.ptopb1 span{
display:inline-block;
padding-left:50px;
background-color:#f8f8fb;
position:relative;
top:10px;
}
.ptopb1{
width:100%;
margin:auto;
font-size:14px;
color:#666666;
border-bottom:1px solid #cccccc;
}
.divtopb1{
width:calc(1200px - 60px);
margin:auto;
text-align:right;
}
.atopb1{
display:inline-block;
font-size:20px;
font-family:poppins;
color:#333333;
}
.atopb1:before{
content:">";
display:inline-block;
font-size:30px;
color:#333333;
font-family:Nanum Gothic;
transform:rotate(-90deg);
margin-right:20px;
}
.afaceb1{
display:inline-block;
padding-left:50px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
background-color:#304674;
color:white;
font-size:16px;
line-height:1.2em;
background-image:url(https://image.yida-design.com.tw/yxs/icon_face_white.webp);
background-repeat:no-repeat;
background-size:auto 30px;
background-position:10px 50%;
text-align:left;
border-radius:6px;
margin-bottom:15px;
}
.ab1{
display:block;
width:50%;
float:left;
font-size:14.5px;
color:#666666;
padding-bottom:3px;
}
.pbdata span{
display:inline-block;
}
.pbdata{
padding-left:30px;
width:calc(100% - 30px);
margin:auto;
font-size:14.5px;
color:#555555;
line-height:1.2em;
position:relative;
padding-bottom:10px;
}
.pbdata:after{
content:"";
display:block;
width:16px;
height:16px;
background-repeat:no-repeat;
background-position:50% 50%;
position:absolute;
left:3px;
top:3px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;
}
[data-icon=fax]:after{
background-image:url(https://image.yida-design.com.tw/yxs/icon_fax.webp);
background-size:100% 100%;
}
[data-icon=phone]:after{
background-image:url(https://image.yida-design.com.tw/yxs/icon_phone.webp);
background-size:100% 100%;
}
[data-icon=map]:after{
background-image:url(https://image.yida-design.com.tw/yxs/icon_map.webp);
background-size:auto 110%;
}
[data-icon=email]:after{
background-image:url(https://image.yida-design.com.tw/yxs/icon_email.webp);
background-size:auto 110%;
}
[data-icon=line]:after{
background-image:url(https://image.yida-design.com.tw/yxs/icon_line.webp);
background-size:100% 100%;
}
.h3b1{
width:100%;
margin:auto;
font-size:18px;
color:#333333;
font-family:Noto Sans TC;font-weight:400;
padding-bottom:20px;
}
.tableb1{
display:table;
width:1200px;
margin:auto;
padding-bottom:30px;
}
.trb1{
display:table-row;
}
.tdb1{
display:table-cell;
padding-left:30px;
vertical-align:top;
width:227px;
padding-right:50px;
}
.tdb2{
display:table-cell;
vertical-align:top;
width:180px;
padding-right:50px;
}
.tdb3{
display:table-cell;
vertical-align:top;
width:180px;
}
.tdb4{
display:table-cell;
padding-right:30px;
vertical-align:top;
text-align:right;
}
.divbase_rec{
padding-top:60px;
padding-bottom:50px;
background-color:#f8f8fb;
box-shadow:0px 0px 6px #cccccc;
}
.spdata_mem1{
display:inline-block;
font-size:14px;
color:white;
background-color:#20A29F;
line-height:1.2em;
padding-left:12px;
padding-right:12px;
padding-top:6px;
padding-bottom:6px;
position:absolute;
right:0px;
top:50px;
white-space:nowrap;
box-shadow:2px 2px 6px rgba(0,0,0,0.5);
border-radius:4px;
display:none;
}
.cartimg1{
width:32px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9;
}
.divfix_m11{
position:fixed;
left:0px;
top:0px;
z-index:51;
background-color:#f8f8fb;
display:inline-block;
display:none;
}
.logom1{
height:40px;
position:relative;
top:2px;
}
.spnum_m1{
display:flex;
width:25px;
height:25px;
background-color:#C40000;
font-size:15px;
color:white;
font-family:poppins;
align-items:center;
justify-content:center;
position:absolute;
right:45px;
border-radius:50%;
transform:translatex(-50%);
top:15px;
}
.tdm1{
width:60px;
}
.tdm3{
width:60px;
position:relative;
left:0px;
top:0px;
cursor:pointer;
}
.tdm2{
text-align:center;
}
.tam1{
width:100%;
height:60px;
}
.divfix_m1{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:51;
background-color:white;
box-shadow:0px 0px 6px #cccccc;
display:none;
}
.divm1{
background-color:white;
display:none;
}
[data-listm1]:after{
content:">";
display:;inline-block;
width:16px;
height:16px;
position:absolute;
right:20px;
top:50%;
transform:rotate(90deg) translatey(-50%);
font-size:16px;
color:#999999;
font-family:Nanum Gothic;font-weight:700;
}
.am1{
display:block;
padding-left:20px;
width:calc(100% - 20px);
font-size:18px;
color:#222222;
padding-bottom:15px;
padding-top:15px;
border-bottom:1px solid #dddddd;
position:relative;
}
.am11{
display:block;
padding-left:55px;
width:calc(100% - 55px);
font-size:18px;
color:#222222;
padding-bottom:15px;
padding-top:15px;
border-bottom:1px solid #eeeeee;
position:relative;
}
.am11:before{
content:"";
display:inline-block;
width:20px;
height:4px;
background-color:#0199FF;
position:absolute;
left:25px;
top:50%;
transform:translatey(-50%);
}
.divfix_m3-open{
position:fixed;
left:0px;
top:60px;
width:200px;
height:calc(100vh - 60px);
background-color:#f8f8fb;
z-index:33;
padding-top:20px;
transition:0.4s;
overflow-y:auto;
}
.divfix_m3-close{
position:fixed;
left:-210px;
top:60px;
height:calc(100vh - 60px);
width:200px;
background-color:#f8f8fb;
z-index:33;
padding-top:20px;
transition:0.4s;
}
.divback{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
background-color:rgba(255,255,255,0.8);
z-index:31;
display:none;
}
@keyframes show1{
0%{
top:60px;
-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;
}
}
.show1{
animation-name:show1;
animation-duration:0.8s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
animation-play-state:paused;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
position:relative;
}
.divpage_rec a{
display:inline-flex;
width:45px;
height:45px;
align-items:center;
justify-content:center;
position:relative;
font-family:poppins;
margin-left:5px;
margin-right:5px;
box-shadow:0px 0px 6px #cccccc;
}
.page1{
color:#999999;
}
.page3{
color:#333333;
}
.divpage_rec img{
width:14px;
position:absolute;
left:50%;
top:50%;
display:inline-block;
transform:translatex(-50%) translatey(-50%);
}
.divpage_rec{
text-align:center;
padding-top:40px;
padding-bottom:60px;
}
.proot{
width:100%;
margin:auto;
font-size:36px;
color:#dddddd;
font-family:oswald;font-weight:400;
text-align:center;
padding-top:80px;
letter-spacing:2px;
padding-bottom:20px;
}
.h1root{
width:100%;
margin:auto;
text-align:center;
color:#333333;
padding-bottom:50px;
line-height:1.2em;
font-size:22px;
letter-spacing:1px;
font-family:Noto Sans TC;font-weight:300;
}
.divanimation{
display:none;
left:100px;
}
/*
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
text-zoomin
*/
/* right */
.animation-reset{
-webkit-animation-name: .animation-reset;
animation-name: .animation-reset;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframes animation-reset {
100% {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
}
@-webkit-keyframes animation-reset {
100% {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
}
.animation-reset1{
-webkit-animation-name: .animation1-reset;
animation-name: .animation1-reset;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframes animation1-reset {
100% {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
@-webkit-keyframes animation1-reset {
100% {
-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(50%);
transform: translateX(50%);
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;
}
}
.right {
-webkit-animation-name: right;
animation-name: right;
-webkit-animation-duration: 1.6s;
animation-duration: 1.6s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
animation-play-state:paused;
animation-delay:0.1s;
-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(50%);
transform: translateX(50%);
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(50%);
transform: translateX(50%);
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;
}
}
.right_text {
-webkit-animation-name: right_text;
animation-name: right_text;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
animation-play-state:paused;
animation-delay:0.1s;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
@-webkit-keyframes right_text {
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_text {
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: 1.6s;
animation-duration: 1.6s;
-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-delay:0.1s;
animation-play-state:paused;
}
@-webkit-keyframes left {
0% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
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(-50%);
transform: translateX(-50%);
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_text {
-webkit-animation-name: left_text;
animation-name: left_text;
-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-delay:0.1s;
animation-play-state:paused;
}
@-webkit-keyframes left_text {
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_text {
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: 1.6s;
animation-duration: 1.6s;
-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;
animation-delay:0.1s;
}
@-webkit-keyframes bottom {
0% {
-webkit-transform: translateY(-30%);
transform: translateY(-30%);
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(-30%);
transform: translateY(-30%);
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;
}
}
.bottom_text {
-webkit-animation-name: bottom_text;
animation-name: bottom_text;
-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;
animation-delay:0.1s;
}
@-webkit-keyframes bottom_text {
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: 1.6s;
animation-duration: 1.6s;
-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;
-webkit-transform: translateY(30%);
transform: translateY(30%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
animation-delay:0.1s;
animation-play-state:paused;
}
@-webkit-keyframes top {
0% {
-webkit-transform: translateY(30%);
transform: translateY(30%);
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(30%);
transform: translateY(30%);
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_text {
-webkit-animation-name: top_text;
animation-name: top_text;
-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-delay:0.1s;
animation-play-state:paused;
}
@-webkit-keyframes top_text {
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_text {
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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
}
}
/* kenburns */
.kenburns-back{
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-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 kenburns-back{
0% {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari and Chrome */
-o-transform: scale(1.2);
/* Opera */
-moz-transform: scale(1.2);
/* Firefox */
}
100% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
}
keyframes kenburns-back{
0% {
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
-webkit-transform: scale(1.2);
/* Safari and Chrome */
-o-transform: scale(1.2);
/* Opera */
-moz-transform: scale(1.2);
/* Firefox */
}
100% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
}
.kenburns{
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-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 kenburns{
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
100% {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari and Chrome */
-o-transform: scale(1.2);
/* Opera */
-moz-transform: scale(1.2);
/* Firefox */
}
}
keyframes kenburns{
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
-webkit-transform: scale(1.2);
/* Safari and Chrome */
-o-transform: scale(1.2);
/* Opera */
-moz-transform: scale(1.2);
/* Firefox */
}
}
/* 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;
animation-delay:0.1s;
}
@-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%{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, .1, 1);
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;
-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;
}
}
/* 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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
position;relative;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
animation-delay:0.1s;
}
@-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;
}
}
/* text-zoomin */
.text-zoomin {
-webkit-animation-name: text-zoomin;
animation-name: text-zoomin;
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-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;
animation-delay:0.1s;
}
@-webkit-@keyframes text-zoomin {
0% {
letter-spacing:1em;
transform:translateY(200px) scale(1.5);
filter:blur(12px);
opacity:0;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
letter-spacing:1em;
transform:translateY(0px) scale(1);
filter:blur(0);
opacity:1;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
@keyframes text-zoomin {
0% {
letter-spacing:1em;
letter-spacing:1em;
transform:translateY(200px) scale(1.5);
filter:blur(12px);
opacity:0;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
transform:translateY(0px) scale(1);
filter:blur(0);
opacity:1;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
.menu3{
position:relative;
width:60px;
height:36px;
margin-top:12px;
margin-bottom:12px;
}
.menu3 span{
height:2px;
background-color:#222222;
}
.menu1{
position:relative;
width:60px;
height:36px;
margin-top:12px;
margin-bottom:12px;
}
.menu1 span{
height:2px;
background-color:#222222;
}
.menu1 span:nth-of-type(1){
position:absolute;
width:50%;
left:25%;
top:calc(25% - 2px);
transition:0.3s;
}
.menu1 span:nth-of-type(2){
position:absolute;
width:50%;
left:25%;
top:calc(50% - 2px);
transition:0.3s;
}
.menu1 span:nth-of-type(3){
position:absolute;
width:50%;
left:25%;
top:calc(75% - 2px);
transition:0.3s;
}
.menu3 span:nth-of-type(1){
position:absolute;
width:50%;
height:2px;
left:25%;
transform:rotate(45deg);
top:50%;
transition:0.3s;
}
.menu3 span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
left:25%;
transform:rotate(45deg);
top:50%;
transition:0.3s;
}
.menu3 span:nth-of-type(3){
position:absolute;
width:50%;
height:2px;
left:25%;
transform:rotate(-45deg);
top:50%;
transition:0.3s;
}
.menu5-left{
position:relative;
width:70px;
height:70px;
border:1px solid #cccccc;
}
.menu5-left span{
height:2px;
background-color:#222222;
}
.menu5-left span:nth-of-type(1){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:25%;
transform-origin:left center;
transform:rotate(-45deg) translatey(-50%);
top:50%;
transition:0.3s;
}
.menu5-left span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:translatey(-50%);
top:50%;
transition:0.3s;
}
.menu5-left span:nth-of-type(3){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:25%;
transform-origin:left center;
transform:rotate(45deg) translatey(-50%);
top:50%;
transition:0.3s;
}
.menu5-right{
position:relative;
width:70px;
height:70px;
border:1px solid #cccccc;
}
.menu5-right span{
height:2px;
background-color:#222222;
}
.menu5-right span:nth-of-type(1){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:75%;
transform-origin:left center;
transform:rotate(-135deg) translatey(-50%);
top:calc(50% - 2px);
transition:0.3s;
}
.menu5-right span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:translatey(-50%);
top:50%;
transition:0.3s;
}
.menu5-right span:nth-of-type(3){
position:absolute;
width:35%;
height:2px;
background-color:#222222;
left:75%;
transform-origin:left center;
transform:rotate(135deg) translatey(-50%);
top:calc(50% - 2px);
transition:0.3s;
}
.divfix_line{
display:inline-block;
position:fixed;
right:0px;
bottom:20px;
z-index:21;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
transition:0.4s;
display:none;
}
.divfix_line-back{
display:inline-block;
position:fixed;
right:0px;
bottom:20px;
z-index:21;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
transition:0.4s;
display:none;
}
[data-icon=phone1] img{
width:45%;
}
[data-icon=phone1]{
background-color:#0099CC;
}
[data-icon=face1] img{
width:52%;
}
[data-icon=face1]{
background-color:#0066CC;
}
.aline{
display:flex;
width:40px;
height:40px;
align-items:center;
justify-content:center;
}
.divcart_num span{
display:flex;
width:30px;
height:30px;
background-color:#C40000;
font-size:21px;
color:white;
align-items:center;
justify-content:center;
position:absolute;
left:50%;
border-radius:50%;
transform:translatex(-50%);
top:-20px;
display:none;
}
.divcart_num img{
width:30px;
}
.divcart_num{
display:flex;
width:50px;
height:50px;
align-items:center;
justify-content:center;
background-color:rgba(0,0,0,0.8);
color:white;
font-size:22px;
font-family:poppins;
position:relative;
cursor:pointer;
}
.divfix_num{
position:fixed;
left:0px;
top:120px;
z-index:31;
display:inline-block;
}
.pempty{
width:100%;
margin:auto;
color:#cccccc;
font-size:15px;
text-align:center;
padding-top:20px;
}
.divcross{
text-align:right;
}
.divcross img{
height:20px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;
padding-bottom:6px;
}
.tdcart1 span{
display:inline-block;
width:100%;
font-family:poppins;
}
.tdcart1 code{
color:#29CFCB;
diisplay:inline;
}
.tdcart1{
color:white;
}
.acart{
display:block;
width:100%;
border-radius:4px;
background-color:#333333;
color:white;
line-height:1.2em;
padding-top:6px;
padding-bottom:6px;
font-size:14px;
text-align:center;
margin-bottom:2px;
margin-top:2px;
}
.tdcart2{
width:50px;
}
.tacart{
width:100%;
border-bottom:1px solid rgba(255,255,255,0.2);
}
.acheckout img{
height:1em;
display:inline-block;
margin-right:6px;
position:relative;
top:1px;
}
.acheckout-back img{
height:1em;
display:inline-block;
margin-right:6px;
position:relative;
top:1px;
}
.acheckout{
display:block;
line-height:1.2em;
padding-top:10px;
padding-bottom:10px;
text-align:center;
color:white;
font-size:15px;
background-color:#006F93;
margin-bottom:15px;
border-radius:4px;
transition:0.4s;
}
.acheckout-back{
display:block;
line-height:1.2em;
padding-top:10px;
padding-bottom:10px;
text-align:center;
color:#cccccc;
font-size:15px;
background-color:#333333;
margin-bottom:15px;
border-radius:4px;
transition:0.4s;
}
.divpadd_cart{
padding:20px;
}
.divfix_cart-open{
position:fixed;
left:0px;
top:0px;
width:320px;
height:100vh;
background-color:#222222;
overflow-y:auto;
transition:0.4s;
z-index:53;
box-shadow:0px 0px 6px rgba(0,0,0,0.6);
}
.divfix_cart-close{
position:fixed;
left:-330px;
top:0px;
width:320px;
height:100vh;
background-color:#222222;
overflow-y:auto;
transition:0.4s;
z-index:53;
box-shadow:0px 0px 6px rgba(0,0,0,0.6);
}
.divback_cart{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
display:none;
transition:0.4s;
background-color:rgba(0,0,0,0.4);
z-index:51;
}
.loadimg_log{
width:100px;
display:none;
}
.alog{
width:140px;
max-width:calc(100% - 20px);
display:block;
padding-right:20px;
text-align:right;
padding-top:10px;
padding-bottom:10px;
line-height:1.2em;
background-color:#006699;
color:white;
font-size:15px;
background-image:url(https://image.yida-design.com.tw/yxs/icon_left_white.webp);
background-repeat:no-repeat;
background-size:auto 0.6em;
background-position:15px 50%;
}
.tdlog1{
font-size:15px;
color:#222222;
width:60px;
}
.tdlog1 span{
color:red;
font-family:poppins;
position:relative;
top:3px;
left:3px;
}
.tdlog2 input[type=checkbox]{
width:20px;
height:20px;
position:relative;
top:3px;
border:1px solid #cccccc;
}
.tdlog2 input[type=text]{
width:100%;
height:26px;
border:1px solid #cccccc;
}
.tdlog2 input[type=password]{
width:100%;
height:26px;
border:1px solid #cccccc;
}
.talog{
width:100%;
padding-bottom:6px;
table-layout:fixed;
position:relative;
left:-10px;
}
.divpadd_log{
width:calc(100% - 100px);
margin:auto;
padding-bottom:30px;
}
.plog a{
color:teal;
}
.plog{
width:100%;
text-align:center;
font-size:15px;
line-height:1.6em;
}
.divtop_log{
width:100%;
height:40px;
background-image:linear-gradient(to bottom,white,#f8f8fb);
border-bottom:1px solid #cccccc;
position:relative;
}
.divtop_log img{
position:absolute;
right:20px;
top:50%;
transform:translatey(-50%);
width:15px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
}
.divfix_log{
position:fixed;
left:50%;
top:50%;
transform:translatex(-50%) translatey(-50%);
display:inline-block;
width:420px;
z-index:33;
max-width:calc(100% - 100px);
background-color:white;
display:none;
}
.divback_log{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
background-color:rgba(0,0,0,0.4);
z-index:31;
display:none;
}
[data-3d-rec]{
perspective:3000px;
transform-style: preserve-3d;
}
.divpanel{
min-height:calc(100vh - 200px);
overflow-x: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;
}
/*
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:Playfair+Display
font-family: Microsoft JhengHei;
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
*/
/*
cubic-bezier(.06,1.1,.58,1.17)
*/
html{
line-height:1.5em;
padding:0px;
scroll-behavior: smooth;
margin:0px;
font-size:15px;
-webkit-text-size-adjust: 100%;
font-family: Microsoft JhengHei;
}
::selection {
background-color:#338FFF;
color:white;
}
::-moz-selection {
background-color:#338FFF;
color:white;
}
.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;
}
.wordclip{
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/*可讀的白色文字*/
.text-shadow1{
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
/*深色和淺色陰影-浮雕*/
.text-shadow2{
text-shadow: text-shadow: -1px -1px white, 1px 1px #333;
}
/*深色和淺色陰影-凹陷*/
.text-shadow2{
text-shadow: 1px 1px white, -1px -1px #444;
}
/*
https://www.facebook.com/sharer/sharer.php?u=分享網址
https://twitter.com/intent/tweet?text=分享文章
https://www.linkedin.com/shareArticle?mini=true&url=分享網址&title=標題&summary=簡述&source=
https://pinterest.com/pin/create/button/?url=圖片網址&media=圖片來源往址&description=簡述
input[type=date]
input[type=time]
input[type=datetime-local]
input [type="range"] min="0" max="10" step="1" value=""
img{
width:100%;
height:100%;
object-fit: contain;
object-position:50% 50%;
}
*/
.price_food span{
font-size:20px;
}
.price_food{
width:100%;
font-size:28px;
color:#666666;
color:red;
font-family:poppins;font-weight:300;
margin:auto;
line-height:1.2em;
padding-bottom:0px;
}
[data-tag=cart1]{
background-color:#20A29F;
}
[data-tag=cart2]{
background-color:#006F93;
}
.acart11{
font-size:15px;
line-height:1.2em;
display:inline-block;
padding-left:20px;
padding-right:20px;
padding-top:12px;
padding-bottom:12px;
margin-bottom:6px;
color:white;
border-radius:4px;
}
.acart11 img{
height:1em;
position:relative;
margin-right:6px;
top:1px;
}
.tdnum2 input{
width:100%;
height:40px;
text-align:center;
font-size:22px;
font-family:poppins;
border:0px solid white;
outline:none;
color:#444444;
}
.tdnum1{
width:40px;
background-color:#f1f1f1;
color:#222222;
font-family:poppins;
font-size:22px;
text-align:center;
cursor:pointer;
}
.tanum{
width:140px;
height:40px;
margin-bottom:10px;
margin-top:10px;
}
.divtext1 p{
width:100%;
margin:auto;
font-size:15px;
color:#666666;
line-height:1.6em;
}
.divtext1 ul{
width:calc(100% - 20px);
margin:0px;
margin-left:-20px;
font-size:15px;
color:#666666;
line-height:1.6em;
}
.divtext p{
width:100%;
margin:auto;
font-size:15.5px;
color:#222222;
line-height:1.6em;
}
.divtext ul{
width:calc(100% - 20px);
margin:0px;
margin-left:-20px;
font-size:15.5px;
color:#222222;
line-height:1.6em;
}
.h1p1{
width:100%;
margin:auto;
font-size:28px;
color:#222222;
font-family:Noto Sans TC;font-weight:300;
line-height:1.2em;
padding-bottom:30px;
border-bottom:1px solid #cccccc;
position:relative;
margin-bottom:30px;
}
.h1p1:after{
content:'';
display:block;
width:60px;
height:5px;
background-color:#0099CC;
margin-top:20px;
position:absolute;
left:0px;
bottom:-3px;
}
.divimg_sub{
position:relative;
margin-right:2px;
margin-bottom:2px;
width:calc(20% - 2px);
float:left;
cursor:pointer;
}
.divimg_sub svg{
width:100%;
}
.divimg_sub img{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
background-size:cover;
background-position:50% 50%;
}
.divimg_root{
position:relative;
box-shadow:0px 0px 6px #cccccc;
background-color:#f8f8fb;
margin-bottom:10px;
display:none;
cursor:pointer;
}
.divimg_root svg{
width:100%;
}
.divimg_root img{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
object-fit:contain;
object-position:50% 50%;
background-size:contain;
background-repeat:no-repeat;
background-position:50% 50%;
}
.tablep1{
display:table;
width:100%;
margin-bottom:30px;
}
.trp1{
display:table-row;
}
.tdp1{
display:table-cell;
width:300px;
padding-right:30px;
vertical-align:top;
}
.tdp2{
display:table-cell;
vertical-align:top;
}
.pmore{
width:calc(100% - 10px);
padding-left:10px;
margin:auto;
line-height:1em;
padding-bottom:10px;
border-bottom:1px solid #cccccc;
margin-bottom:20px;
font-size:15px;
color:#333333;
font-family:Noto Sans TC;font-weight:400;
background-image:linear-gradient(to bottom,white,#f8f8fb);
}
.ap1{
display:block;
width:100%;
font-size:15px;
color:#666666;
padding-bottom:10px;
line-height:1.4em;
}
.divspace_p1{
height:20px;
}
.ptop1{
display:block;
width:100%;
padding-bottom:15px;
margin:auto;
font-size:17px;
color:#333333;
font-family:Noto Sans TC;font-weight:400;
}
.ptop{
display:block;
width:100%;
padding-bottom:10px;
margin:auto;
font-size:16px;
color:#222222;
font-family:Noto Sans TC;font-weight:400;
border-bottom:3px double #cccccc;
margin-bottom:20px;
}
.tablef1{
display:table;
width:1200px;
margin:auto;
padding-top:30px;
}
.trf1{
display:table-row;
}
.tdf1{
display:table-cell;
vertical-align:top;
padding-left:100px;
padding-right:30px;
width:180px;
}
.tdf2{
display:table-cell;
vertical-align:top;
padding-left:30px;
}
.divmenu{
display:inline-block;
padding:20px;
padding-bottom:15px;
border:1px solid #cccccc;
background-color:#f8f8fb;
}
.h2{
width:100%;
margin:auto;
line-height:1.2em !important;
font-size:14.5px !important;
color:#333333;
font-weight:bold !important;
padding-bottom:10px !important;
cursor:pointer;
}
.h3{
width:calc(100% - 25px) !important;
padding-left:25px !important;
margin:auto;
line-height:1.2em !important;
font-size:14.5px;
color:#333333 !important;
padding-bottom:10px !important;
position:relative;
cursor:pointer;
}
.h3:before{
content:'';
display:inline-block;
width:6px;
height:6px;
background-color:#666666;
border-radius:50%;
position:absolute;
left:10px;
top:6px;
}
.divmenu{
margin-bottom:0px;
}
.divover_ntext{
overflow-x:auto;
}
.divtext table{
max-width:100%;
background-color:#cccccc;
}
.divtext td{
padding:10px;
background-color:white;
}
.imgv1{
width:calc(50% - 12px);
margin-left:0px;
margin-right:10px;
padding-bottom:8px;
padding-top:0px;
}
.imgh1{
width:100%;
padding-top:0px;
padding-bottom:8px;
}
.divimg_video{
width:100%;
position:relative;
left:0px;
top:0px;
}
.divimg_video img{
width:100%;
}
.divimg_video svg{
width:100%;
}
.divposvideo{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.divposvideo iframe{
width:100%;
height:100%;
}
@media screen and (min-width:1px) and (max-width:1500px){
.spword11{
display:none;
}
}
@media screen and (min-width:1px) and (max-width:1200px){
.aphone span{
display:none;
}
.aphone-back span{
display:none;
}
.aphone div{
top:0px;;
}
.aphone-back div{
top:0px;
}
}
@media screen and (min-width:1050px) and (max-width:1200px){
.aphone{
width:75px !important;
}
.aphone-back{
width:75px !important;
}
.td3{
width:160px;
}
}
@media screen and (min-width:1050px) and (max-width:1150px){
.td1{
padding-left:20px;
}
.td3{
padding-left:20px;
}
.aphone{
width:65px;
}
.aphone-back{
width:65px;
}
}
@media screen and (min-width:1px) and (max-width:1050px){
.logoimg{
height:60px;
}
.table1{
height:70px;
}
.divspace{
height:70px;
}
.td1{
padding-left:10px;
width:137px;
}
.td3{
width:137px;
padding-left:10px;
}
.aphone{
width:65px !important;
height:70px;
}
.aphone-back{
width:65px !important;
height:70px;
}
.a1{
padding-left:10px;
padding-right:10px;
}
.tdb1{
padding-right:30px;
}
.tdb2{
padding-right:30px;
width:160px;
}
.tdb3{
width:160px;
}
}
@media screen and (min-width:1px) and (max-width:900px){
.td3{
display:none;
}
.td2{
padding-right:20px;
}
.divfix_line{
display:block;
}
.divfix_line-back{
display:block;
}
}
@media screen and (min-width:790px) and (max-width:1230px){
.divcrumb{
width:calc(100% - 60px);
}
}
@media screen and (min-width:1px) and (max-width:790px){
.divcrumb{
width:calc(100% - 40px);
}
.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;
}
.divtopb1{
text-align:center;
}
.ptopb1 span{
padding-right:20px;
padding-left:20px;
}
.divfix{
display:none;
}
.divfix_m1{
display:block;
}
.divfix_m11{
display:inline-block;
}
}
@media screen and (min-width:1px) and (max-width:1230px){
.tableb1{
width:100%;
}
.divtopb1{
width:calc(100% - 60px);
}
.div1200{
width:100%;
}
}
@media screen and (min-width:790px) and (max-width:900px){
.tdb3{
display:none;
}
.tdb2{
padding-right:0px;
}
}
@media screen and (min-width:1px) and (max-width:460px){
.h3b1{
font-size:16px;
padding-bottom:15px;
}
.divbase_rec{
padding-top:50px;
padding-bottom:30px;
}
.atopb1{
font-size:18px;
}
.atopb1:before{
position:relative;
top:3px;
font-size:26px;
}
.tam1{
height:45px;
}
.logom1{
height:35px;
}
.cartimg1{
width:28px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;
}
.divspace{
height:45px;
}
.spdata_mem1{
font-size:13px;
top:40px;
}
.spnum_m1{
display:flex;
width:25px;
height:25px;
background-color:#C40000;
font-size:15px;
color:white;
font-family:poppins;
align-items:center;
justify-content:center;
position:absolute;
right:30px;
border-radius:50%;
transform:translatex(-50%);
top:10px;
display:none;
}
.menu1{
position:relative;
width:45px;
height:29px;
margin-top:8px;
margin-bottom:8px;
}
.menu3{
position:relative;
width:45px;
height:29px;
margin-top:8px;
margin-bottom:8px;
}
.tdm1{
width:45px;
}
.tdm3{
width:45px;
}
.am1{
padding-left:20px;
width:calc(100% - 20px);
font-size:16px;
padding-top:10px;
padding-bottom:10px;
}
.am11{
padding-left:55px;
width:calc(100% - 55px);
font-size:16px;
padding-top:10px;
padding-bottom:10px;
}
.divfix_m3-open{
width:100%;
top:45px;
height:calc(100vh - 45px);
padding-top:10px;
}
.divfix_m3-close{
top:45px;
padding-top:10px;
width:100%;
height:calc(100vh - 45px);
left:calc(-100% - 10px);
}
[data-listm1]:after{
right:30px;
}
.divpage_rec a{
width:40px;
height:40px;
margin-left:2px;
margin-right:2px;
}
.h1root{
font-size:20px;
padding-bottom:30px;
}
.proot{
padding-top:40px;
font-size:28px;
padding-bottom:10px;
}
.divanimation{
left:0px;
}
.aline{
width:35px;
height:35px;
}
.divfix_cart-open{
width:100%;
}
.divfix_cart-close{
width:100%;
left:calc(-100% - 10px);
}
.plog{
font-size:14.5px;
}
.alog{
font-size:14.5px;
}
.divpadd_log{
width:calc(100% - 60px);
}
.tdlog1{
width:50px;
}
.acart11{
padding-left:12px;
padding-right:12px;
padding-top:10px;
padding-bottom:10px;
}
.h1p1{
font-size:24px;
padding-bottom:20px;
margin-bottom:20px;
}
.h1p1:after{
width:60px;
height:3px;
bottom:-2px;
}
.divmenu{
padding:15px;
padding-bottom:10px;
}
}
@media screen and (min-width:460px) and (max-width:790px){
.divspace{
height:60px;
}
.h1root{
font-size:21px;
padding-bottom:30px;
}
.proot{
padding-top:40px;
font-size:30px;
padding-bottom:10px;
}
}
@media screen and (min-width:1px) and (max-width:650px){
.divfix_num{
display:none;
}
.price_food{
text-align:center;
padding-bottom:10px;
}
.tablep1{
display:block;
}
.trp1{
display:block;
}
.tdp1{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:20px;
}
.tdp2{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
}
.h1p1{
text-align:center;
}
.h1p1:after{
left:50%;
transform:translatex(-50%);
}
.tdp2{
width:300px;
max-width:calc(100% - 40px);
}
.tablef1{
width:calc(100% - 60px);
}
.tdp1{
width:260px;
max-width:100%;
}
}
@media screen and (min-width:1px) and (max-width:421px){
.divfix_log{
width:calc(100% - 60px);
max-width:calc(100% - 60px);
}
}
@media screen and (min-width:1000px) and (max-width:1230px){
.tablef1{
width:100%;
}
}
@media screen and (min-width:1000px) and (max-width:1100px){
.tdp1{
width:260px;
}
}
@media screen and (min-width:1px) and (max-width:1000px){
.tablef1{
display:block;
}
.trf1{
display:block;
}
.tdf1{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
width:100%;
}
.tdf2{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:30px;
}
}
@media screen and (min-width:650px) and (max-width:1000px){
.tablef1{
width:calc(100% - 100px);
}
.tdp1{
width:260px;
}
}
@media screen and (min-width:650px) and (max-width:700px){
.tdp1{
width:48%;
}
}
