.divspace{
height:45px;
display:none;
}
.logoimg{
position:absolute;
left:80px;
top:0px;
transition:0.4s;
height:119px;
z-index:11;
box-shadow:0px 0px 6px #333333;
}
.logoimg-back{
position:absolute;
left:80px;
top:0px;
transition:0.4s;
height:80px;
z-index:11;
box-shadow:0px 0px 6px #333333;
}
.a1{
display:inline-block;
font-sizre:16px;
color:white;
padding-top:10px;
line-height:1.1em;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;
font-family:Noto Sans TC;font-weight:400;
}
.a1 span{
display:inline-block;
width:100%;
text-align:center;
color:rgba(255,255,255,0.4);
font-size:12px;
font-family:poppins;
text-align:center;
}
.table1{
display:table;
width:100%;
height:100px;
margin:auto;
transition:0.4s;
}
.table1 .td1:before{
content:"";
display:inline-block;
width:40px;
height:32px;
background-image:url(https://image.yida-design.com.tw/positano/left1.webp);
background-size:100% 100%;
z-index:9;
position:absolute;
left:40px;
bottom:-15px;
transition:0.2s;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
.table1-back .td1:before{
content:"";
display:inline-block;
width:40px;
height:32px;
background-image:url(https://image.yida-design.com.tw/positano/left1.webp);
background-size:100% 100%;
z-index:9;
position:absolute;
left:40px;
bottom:-15px;
transition:0.2s;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
.table1 .td1:after{
content:"";
display:inline-block;
width:40px;
height:32px;
background-image:url(https://image.yida-design.com.tw/positano/left1.webp);
background-size:100% 100%;
z-index:9;
position:absolute;
left:205px;
bottom:-15px;
transform:scalex(-1);
transition:0.2s;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
.table1-back .td1:after{
content:"";
display:inline-block;
width:40px;
height:32px;
background-image:url(https://image.yida-design.com.tw/positano/left1.webp);
background-size:100% 100%;
z-index:9;
position:absolute;
left:155px;
bottom:-15px;
transform:scalex(-1);
transition:0.2s;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
.table1-back{
display:table;
width:100%;
height:80px;
margin:auto;
transition:0.4s;
}
.tr1{
display:table-row;
}
.td1{
display:table-cell;
width:128px;
position:relative;
left:0px;
top:0px;
vertical-align:top;
}
.td2{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.td3{
display:table-cell;
width:calc(128px + 80px);
}
.divfix{
position:fixed;
left:0px;
top:0px;
width:100%;
background-image:linear-gradient(to right,rgba(18, 74, 61,1),rgba(18, 74, 61,0.8),rgba(18, 74, 61,0.6),rgba(18, 74, 61,0.4));
background-size:100% 65px;
background-position:50% 50%;
background-repeat:repeat-x;
transition:0.4s;
z-index:15;
}
.divfix-back{
position:fixed;
left:0px;
top:0px;
width:100%;
background-image:linear-gradient(to right,rgba(18, 74, 61,1),rgba(18, 74, 61,0.8),rgba(18, 74, 61,0.6),rgba(18, 74, 61,0.4));
background-size:100% 80px;
background-position:50% 50%;
background-repeat:repeat-x;
transition:0.4s;
z-index:15;
}
.pdm1{
margin:0px;
font-size:19px;
color:#666666;
position:absolute;
left:calc(50% + 40px);
top:50%;
text-align:center;
width:10px;
display:none;
line-height:1.1em;
transform:translatex(-50%) translatey(-50%);
font-family:Noto Sans TC;font-weight:400;
}
.pdm{
margin:0px;
font-size:19px;
color:#666666;
position:absolute;
left:50%;
top:50%;
text-align:center;
width:10px;
line-height:1.1em;
display:none;
transform:translatex(-50%) translatey(-50%);
font-family:Noto Sans TC;font-weight:400;
}
@keyframes show1{
100%{
top:-100px;
}
}
.divdm_rec img{
position:absolute;
left:50%;
top:0px;
transform:translatex(-50%);
animation-name:show1;
animation-duration:5s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
}
.divdm_rec{
position:relative;
height:400px;
overflow:hidden;
}
.imgbase{
width:30px;
margin-right:6px;
}
.hideb1{
display:none;
}
.divpadd_base{
width:calc(1300px - 60px);
margin:auto;
}
.pcopy{
width:100%;
margin:auto;
font-size:14px;
color:white;
text-align:right;
padding-bottom:6px;
}
.divspace_b1{
height:50px;
}
.pbase span{
display:inline-block;
padding-right:6px;
}
.pbase{
width:100%;
margin:auto;
font-size:15px;
color:white;
padding-bottom:6px;
}
.pbase b{
font-weight:normal;
color:#D3E9EB;
}
.spb1{
display:inline-block;
font-size:15px;
color:white;
padding-right:20px;
}
.wordb1{
padding-bottom:20px;
max-width:100%;
}
.tableb1{
display:table;
width:100%;
margin:auto;
padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,0.6);
margin-bottom:20px;
}
.trb1{
display:table-row;
}
.tdb1{
display:table-cell;
padding-left:0px;
vertical-align:bottom;
}
.tdb2{
display:table-cell;
vertical-align:bottom;
padding-right:0px;
position:relative;
}
.divbase_rec{
padding-top:60px;
padding-bottom:60px;
background-image:linear-gradient(to right,#29676D,#3DA8B6);
}
.divbase_rec img{
cursor:pointer;
}
.divfix_m11{
position:fixed;
left:0px;
top:0px;
width:45px;
height:45px;
z-index:51;
display:none;
cursor:pointer;
}
.logom1{
height:60px;
position:absolute;
left:50%;
transform:translatex(-50%);
bottom:-15px;
z-index:13;
box-shadow:0px 0px 6px #333333;
}
.tdm1{
width:70px;
}
.tdm3{
width:70px;
}
.tdm2{
text-align:center;
position:relative;
}
.tdm2:before{
content:"";
display:inline-block;
width:60px;
height:15px;
background-image:url(https://image.yida-design.com.tw/positano/left1.png?n1);
background-size:100% 100%;
position:absolute;
left:calc(50% - 62px);
transform:translatex(-50%);
bottom:-15px;
z-index:11;
}
.tdm2:after{
content:"";
display:inline-block;
width:60px;
height:15px;
background-image:url(https://image.yida-design.com.tw/positano/left1.png?n1);
background-size:100% 100%;
position:absolute;
left:calc(50% + 62px);
transform:translatex(-50%) scalex(-1);
bottom:-15px;
z-index:11;
}
.tam1{
width:100%;
height:45px;
}
.divfix_m1{
position:fixed;
left:0px;
top:0px;
width:100%;
background-image:linear-gradient(to right,#124A3D,#1E7965);
box-shadow:0px 0px 6px #cccccc;
z-index:21;
display:none;
}
.divm1_rec{
position:relative;
padding-top:30px;
padding-bottom:30px;
}
.divm1_rec:before{
content:"";
display:inline-block;
width:180px;
height:38px;
background-image:url(https://image.yida-design.com.tw/positano/wordcap4.webp);
position:absolute;
left:50%;
top:0px;
transform:translatex(-50%);
}
.divm1_rec:after{
content:"";
display:inline-block;
width:180px;
height:38px;
background-image:url(https://image.yida-design.com.tw/positano/wordcap4.webp);
position:absolute;
left:50%;
bottom:0px;
transform:translatex(-50%) scaley(-1);
}
.am1{
display:block;
width:100%;
text-align:center;
font-size:16px;
color:#333333;
margin:auto;
padding-top:8px;
padding-bottom:8px;
font-family:Noto Sans TC;font-weight:400;
}
.divlogom1{
position:relative;
height:100px;
width:100%;
margin-bottom:60px;
}
.logom2{
position:absolute;
left:50%;
top:calc(50% + 30px);
height:100px;
transform:translatex(-50%) translatey(-50%);
}
.divback{
position:fixed;
left:0px;
display:none;
top:0px;
width:100%;
height:100vh;
background-color:rgba(0,0,0,0.6);
z-index:31;
transition:0.4s;
}
.divfix_m3-open{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
background-color:white;
z-index:33;
transition:0.4s;
background-image:url(https://image.yida-design.com.tw/positano/marble1.jpg);
background-size:cover;
}
.divfix_m3-close{
position:fixed;
left:calc(-100% - 10px);
top:0px;
width:100%;
height:100vh;
background-color:white;
z-index:33;
transition:0.4s;
background-image:url(https://image.yida-design.com.tw/positano/marble1.jpg);
background-size:cover;
}
.divanimation{
display:none;
left:30px;
}
.time1{
animation-delay:0.15s;
}
.time2{
animation-delay:0.3s;
}
.time3{
animation-delay:0.45s;
}
.time4{
animation-delay:0.6s;
}
.time5{
animation-delay:0.75s;
}
.time6{
animation-delay:0.9s;
}
.time7{
animation-delay:1.05s;
}
.time8{
animation-delay:1.2s;
}
.time9{
animation-delay:1.35s;
}
.time10{
animation-delay:1.5s;
}
.time11{
animation-delay:1.65s;
}
.time12{
animation-delay:1.8s;
}
.time13{
animation-delay:1.95s;
}
.time14{
animation-delay:2.1s;
}
.time15{
animation-delay:2.25s;
}
.time16{
animation-delay:2.4s;
}
.time17{
animation-delay:2.55s;
}
.time18{
animation-delay:2.7s;
}
.time19{
animation-delay:2.85s;
}
.time20{
animation-delay:3s;
}
.time21{
animation-delay:3.15s;
}
.time22{
animation-delay:3.3s;
}
.time23{
animation-delay:3.45s;
}
.time24{
animation-delay:3.6s;
}
.time25{
animation-delay:3.75s;
}
.time26{
animation-delay:3.9s;
}
.time27{
animation-delay:4.05s;
}
.time28{
animation-delay:4.2s;
}
.time29{
animation-delay:4.35s;
}
.time30{
animation-delay:4.5s;
}
/*
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 */
.right {
-webkit-animation-name: right;
animation-name: right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
animation-play-state:paused;
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(100%);
transform: translateX(100%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
@keyframes right {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
/* left */
.left {
-webkit-animation-name: left;
animation-name: left;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
animation-delay:0.1s;
animation-play-state:paused;
}
@-webkit-keyframes left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
@keyframes left {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
/* bottom */
.bottom {
-webkit-animation-name: bottom;
animation-name: bottom;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
animation-play-state:paused;
animation-delay:0.1s;
}
@-webkit-keyframes bottom {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
@keyframes bottom {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
}
}
/* top */
.top {
-webkit-animation-name: top;
animation-name: top;
-webkit-animation-duration: 1.6s;
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 {
0% {
-webkit-transform: translateY(60%);
transform: translateY(60%);
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(60%);
transform: translateY(60%);
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{
-webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
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);
/* IE 9 */
-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 */
-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 */
-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 */
-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:55px;
height:29px;
margin-top:8px;
margin-bottom:8px;
}
.menu3 span{
height:2px;
background-color:white;
}
.menu1{
position:relative;
width:55px;
height:29px;
margin-top:8px;
margin-bottom:8px;
}
.menu1 span{
height:2px;
background-color:#F6D670;
}
.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;
background-color:#222222;
left:25%;
transform:rotate(45deg);
top:50%;
transition:0.3s;
}
.menu3 span:nth-of-type(2){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
left:25%;
transform:rotate(45deg);
top:50%;
transition:0.3s;
}
.menu3 span:nth-of-type(3){
position:absolute;
width:50%;
height:2px;
background-color:#222222;
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;
}
@keyframes show_root{
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;
}
}
.show_root{
position:relative;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
animation-name:show_root;
animation-duration:0.8s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
animation-delay:0s;
animation-play-state:paused;
}
.divbottom_rec:after{
content:"";
display:inline-block;
width:60px;
height:62px;
background-image:url(https://image.yida-design.com.tw/positano/wordrec1.webp);
position:absolute;
right:-10px;
bottom:-10px;
z-index:3;
transform:scaley(-1) scalex(-1);
}
.divbottom_rec:before{
content:"";
display:inline-block;
width:60px;
height:62px;
background-image:url(https://image.yida-design.com.tw/positano/wordrec1.webp);
position:absolute;
left:-10px;
bottom:-10px;
z-index:3;
transform:scaley(-1);
}
.divtop_rec:after{
content:"";
display:inline-block;
width:60px;
height:62px;
background-image:url(https://image.yida-design.com.tw/positano/wordrec1.webp);
position:absolute;
right:-10px;
top:-10px;
z-index:3;
transform:scalex(-1);
}
.divtop_rec:before{
content:"";
display:inline-block;
width:60px;
height:62px;
background-image:url(https://image.yida-design.com.tw/positano/wordrec1.webp);
position:absolute;
left:-10px;
top:-10px;
z-index:3;
}
.h2root{
width:100%;
margin:auto;
text-align:center;
font-size:19px;
color:#333333;
padding-bottom:30px;
position:relative;
margin-bottom:30px;
font-family:Noto Sans TC;font-weight:400;
}
.h2root:after{
content:"";
width:213px;
height:13px;
background-image:url(https://image.yida-design.com.tw/positano/wordcap2.webp);
position:absolute;
left:50%;
bottom:0px;
transform:translatex(-50%);
}
.h1root:after{
content:"";
display:inline-block;
width:201px;
height:33px;
background-image:url(https://image.yida-design.com.tw/positano/wordcap1.webp);
position:absolute;
left:50%;
transform:translatex(-50%) scaley(-1);
bottom:0px;
background-size:100% 100%;
}
.h1root:before{
content:"";
display:inline-block;
width:201px;
height:33px;
background-image:url(https://image.yida-design.com.tw/positano/wordcap1.webp);
position:absolute;
left:50%;
transform:translatex(-50%);
top:0px;
}
.h1root{
width:100%;
margin:auto;
text-align:center;
font-size:20px;
line-height:1.2em;
color:#333333;
position:relative;
padding-top:40px;
padding-bottom:30px;
font-family:Noto Sans TC;font-weight:400;
margin-top:60px;
margin-bottom:50px;
}
.h1root span{
display:inline-block;
width:100%;
font-size:14px;
font-family:oswald;
letter-spacing:2px;
}
body{
background-image:url(https://image.yida-design.com.tw/positano/marble1.webp);
background-position:50% 50%;
}
.aline code{
display:none;
}
.aline i{
font-style:normal;
display:inline-block;
width:100%;
text-align:center;
color:white;
font-size:15px;
}
.divfix_line{
position:fixed;
right:10px;
top:50%;
transform:translatey(-50%);
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;
}
.divfix_line-back{
position:fixed;
right:10px;
top:50%;
transform:translatey(-50%);
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;
}
.aline{
display:inline-flex;
width:40px;
height:40px;
border-radius:50%;
align-items:center;
justify-content:center;
margin-bottom:3px;
-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.12);
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
}
[data-call=phone] img{
width:50%;
position:relative;
top:2px;
}
[data-call=line] img{
width:60%;
position:relative;
top:3px;
}
[data-call=face] img{
width:55%;
position:relative;
top:3px;
}
[data-call=face]{
background-color:#2F4779;
}
[data-call=phone]{
background-color:#006699;
}
[data-call=line]{
background-color:#339933;
}
.divfix_load{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100vh;
z-index:31;
background-color:rgba(255,255,255,1);
display:flex;
align-items:center;
justify-content:center;
}
.pload{
font-size:15px;
color:#111111;
width:10px;
text-align:center;
display:inline-block;
margin:0px;
position:absolute;
left:50%;
top:50%;
transform:translatex(-50%) translatey(-50%);
line-height:1.4em;
font-family:Noto Sans TC;font-weight:400;
}
[data-3d-rec]{
perspective:3000px;
transform-style: preserve-3d;
}
.divpanel{
min-height:300px;
overflow:hidden;
}
.br1{
width:90%;
height:1px;
clear:both;
}
.div1200{
width:1200px;
margin:auto;
}
a{
text-decoration:none;
cursor:pointer;
}
body{
padding:0px;
margin:0px;
height:100vh;
scroll-behavior: smooth;
}
/*
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:BIZ+UDGothic,400
font:Space+Grotesk,400
font:Passion+One,400
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;
}
/*
pointer-events
=>讓物件穿透過去
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%;
}
*/
.mobile{
display:none;
}
.divpage_show a{
display:inline-block;
width:18px;
height:18px;
margin-left:2px;
margin-right:2px;
border-radius:50%;
}
.page1{
background-color:#333333;
}
.page3{
background-color:teal;
}
.divpage_show{
display:inline-block;
position:absolute;
left:50%;
transform:translatex(-50%);
bottom:20px;
text-align:center;
}
.divshow_rec{
position:relative;
}
@keyframes show1{
100%{
top:-100px;
}
}
.pdm1 span{
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
}
.pdm1{
margin:0px;
width:10px;
font-size:30px;
text-align:center;
position:absolute;
left:50%;
top:50%;
line-height:1.2em;
transform:translatex(-50%) translatey(-50%);
color:white;
display:none;
}
.divdm_rec img{
position:absolute;
left:50%;
top:0px;
transform:translatex(-50%);
animation-name:show1;
animation-duration:5s;
animation-fill-mode:forwards;
animation-timing-function:ease-out;
}
.divdm_root{
box-shadow:0px 10px 10px #cccccc;
margin-bottom:30px;
}
.divdm_rec{
position:relative;
height:700px;
overflow:hidden;
}
.proot span{
display:inline-block;
}
.proot{
width:calc(100% - 100px);
margin:auto;
font-size:15px;
color:#333333;
line-height:2em;
text-align:center;
margin-bottom:120px;
font-family:Noto Sans TC;font-weight:400;
}
.divdm_all{
position:relative;
}
.divposdot{
display:inline-block;
position:absolute;
left:0px;
width:100%;
bottom:-30px;
}
.divposdot a{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
margin-right:5px;
margin-left:5px;
}
.adot1{
background-color:#666666;
}
.adot3{
background-color:#2C958A;
}
.divdm1{
position:relative;
aspect-ratio:1.8;
}
.divdm1 img{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
.divposword1_rec{
position:absolute;
left:-100px;
top:-80px;
width:calc(100% + 100px);
height:calc(100% + 152px);
pointer-events:none;
}
.divposword_rec{
position:absolute;
left:-100px;
top:-80px;
width:calc(100% + 100px);
height:calc(100% + 152px);
border:1px solid #333333;
pointer-events:none;
}
.diva1_rec{
display:inline-block;
position:relative;
padding:30px;
}
.pa1{
width:100%;
margin:auto;
line-height:1.8em;
color:#333333;
font-size:14.5px;
font-family:Noto Sans TC;font-weight:400;
}
.pcap{
width:100%;
margin:auto;
font-family:Marcellus;font-weight:400;
font-size:36px;
color:#152C50;
line-height:1.2em;
padding-bottom:30px;
position:relative;
margin-bottom:30px;
}
.pcap:after{
content:"";
display:inline-block;
width:80px;
position:absolute;
left:-30px;
bottom:0px;
border-bottom:1px solid #B4905F;
}
.divimg img{
width:100%;
}
.tablea1{
display:table;
width:1300px;
margin:auto;
padding-bottom:90px;
table-layout:fixed;
}
.tra1{
display:table-row;
}
.tda1{
display:table-cell;
vertical-align:middle;
width:740px;
padding-left:30px;
padding-right:30px;
}
.tda2{
display:table-cell;
vertical-align:middle;
padding-right:30px;
}
.divposword_room{
display:inline-block;
position:absolute;
left:50%;
top:50%;
transform:translatex(-50%) translatey(-50%);
}
.divimg_room:hover .pmore_room{
letter-spacing:0em;
transform:translateY(0px) scale(1);
filter:blur(0);
opacity:1;
letter-spacing:0px;
transition:0.6s;
}
.pmore_room{
margin:0px;
font-family:Marcellus;font-weight:400;
font-size:20px;
color:white;
display:block;
letter-spacing:1em;
transform:translateY(10px) scale(2);
filter:blur(6px);
opacity:0;
text-align:center;
letter-spacing:1px;
transition:0.6s;
}
.pmore_room:after{
content:"";
display:block;
width:20px;
height:10px;
background-image:url(https://image.yida-design.com.tw/positano/icon_right_white.webp);
background-size:100% 100%;
margin:auto;
}
.divimg_room:hover{
left:20px;
top:-20px;
z-index:12;
transition:0.6s;
}
.divposback_room{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(57, 57, 0,0);
transition:0.6s;
}
.divimg_room:hover .divposback_room{
background-color:rgba(57, 57, 0,0.6);
transition:0.6s;
}
.proom1 span{
display:inline-block;
font-size:37px;
color:#152C50;
padding-bottom:10px;
font-family:Marcellus;font-weight:400;
width:100%;
}
.proom1{
width:auto;
padding-left:50px;
display:inline-block;
margin:0px;
font-size:18px;
color:#333333;
line-height:1.2em;
font-family:Noto Sans TC;font-weight:400;
position:relative;
padding-bottom:25px;
}
.rleft2{
margin-left:160px;
}
.rleft1{
margin-left:60px;
}
.proom1:before{
content:"";
display:inline-block;
width:1px;
height:120px;
position:absolute;
left:0px;
top:0px;
border-left:1px solid #B4905F;
}
.divimg_room img{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
.divimg_room svg{
width:100%;
}
.divimg_room{
display:block;
position:relative;
width:100%;
aspect-ratio:1.5;
left:0px;
top:0px;
transition:0.6s;
z-index:3;
cursor:pointer;
}
.tableroom{
display:table;
width:1400px;
margin:auto;
table-layout:fixed;
padding-top:80px;
padding-bottom:180px;
position:relative;
left:30px;
}
.trroom{
display:table-row;
}
.tdroom1{
display:table-cell;
vertical-align:top;
position:relative;
width:50%;
padding-left:0px;
}
.tdroom2{
display:table-cell;
vertical-align:top;
position:relative;
padding-right:0px;
width:50%;
left:-100px;
top:100px;
}
.h2home span{
font-family:Marcellus;font-weight:400;
font-size:40px;
color:#152C50;
display:inline-block;
width:100%;
padding-bottom:40px;
position:relative;
}
.h2home{
width:calc(1300px - 60px);
margin:auto;
line-height:1.2em;
font-size:18px;
color:#333333;
text-align:left;
padding-bottom:50px;
font-family:Noto Sans TC;font-weight:400;
padding-bottom:40px;
position:relative;
}
.h2home span:after{
content:"";
display:inline-block;
width:80px;
position:absolute;
left:0px;
bottom:15px;
border-bottom:1px solid #B4905F;
}
.pnews{
width:100%;
margin:auto;
font-size:14.5px;
color:#666666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.anews{
display:block;
width:100%;
font-size:17px;
color:#333333;
font-family:Noto Sans TC;font-weight:400;
line-height:1.2em;
padding-top:0px;
padding-bottom:6px;
}
.tdnews1{
font-size:50px;
font-family:oswald;
width:50px;
text-align:center;
padding-right:15px;
line-height:0.5em;
vertical-align:top;
}
.tdnews1 span{
display:inline-block;
width:100%;
font-size:15px;
color:#999999;
}
.tdnews2{
vertical-align:top;
}
.tanews{
width:100%;
}
.divimg_news{
position:relative;
cursor:pointer;
width:100%;
aspect-ratio:1.2;
margin-bottom:20px;
backdrop-filter: blur(5px);
background-color: rgba(255,255,255, 0.075);
-webkit-box-shadow: 0px 0px 13px 1px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 0px 13px 1px rgba(0,0,0,0.12);
box-shadow: 0px 0px 13px 1px rgba(0,0,0,0.12);
}
.divimg_news svg{
width:100%;
}
.divimg_news img{
position:absolute;
left:50%;
top:50%;
width:100%;
height:100%;
transform:translatex(-50%) translatey(-50%);
object-fit:cover;
-webkit-filter:brightness(1);
object-position:50% 50%;
transition:0.4s;
background-size:cover;
background-position:50% 50%;
}
.divimg_news:hover img{
position:absolute;
left:50%;
top:50%;
width:100%;
height:100%;
transform:translatex(-50%) translatey(-50%);
object-fit:cover;
-webkit-filter:brightness(1.2);
object-position:50% 50%;
transition:0.4s;
background-size:cover;
background-position:50% 50%;
}
.divnews{
width:calc(33.3% - 60px);
padding-left:30px;
padding-right:30px;
float:left;
padding-bottom:50px;
left:3px;
}
.divnews_rec{
width:1300px;
margin:auto;
}
@media screen and (min-width:1px) and (max-width:1380px){
.td3{
display:none;
}
}
@media screen and (min-width:1px) and (max-width:1100px){
.logoimg{
left:20px;
height:90px;
}
.logoimg-back{
left:20px;
}
.table1 .td1:before{
display:none;
}
.table1 .td1:after{
display:none;
}
}
@media screen and (min-width:1px) and (max-width:900px){
.a1{
padding-left:12px;
padding-right:12px;
}
}
@media screen and (min-width:660px) and (max-width:790px){
.pdm1{
top:calc(50% - 20px);
font-size:18px;
}
.pdm{
top:calc(50% - 20px);
font-size:18px;
}
.divdm_rec{
height:300px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
}
@media screen and (min-width:550px) and (max-width:660px){
.pdm1{
top:calc(50% - 10px);
font-size:17px;
left:calc(50% + 30px);
}
.pdm{
top:calc(50% - 10px);
font-size:17px;
}
.divdm_rec{
height:250px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
}
@media screen and (min-width:460px) and (max-width:550px){
.pdm1{
top:calc(50% - 20px);
font-size:17px;
left:calc(50% + 30px);
}
.pdm{
top:calc(50% - 20px);
font-size:17px;
}
.divdm_rec{
height:220px;
}
.divdm_rec img{
height:calc(100% + 100px);
left:calc(50% + 40px);
}
.diva1_rec{
padding:30px;
}
}
@media screen and (min-width:1px) and (max-width:460px){
.pdm1{
top:calc(50% - 10px);
font-size:16px;
left:calc(50% + 30px);
}
.pdm{
top:calc(50% - 10px);
font-size:16px;
}
.divdm_rec{
height:200px;
}
.divdm_rec img{
height:calc(100% + 100px);
left:calc(50% + 40px);
}
.showb1{
display:none;
}
.pcopy{
text-align:left;
padding-top:20px;
}
.hideb1{
display:block;
}
.imgbase{
width:40px;
margin-right:6px;
}
.divanimation{
left:0px;
}
.h2root:after{
aspect-ratio:16.38;
background-size:100% 100%;
height:auto;
width:160px;
}
.h2root{
padding-bottom:20px;
font-size:17px;
}
.divbottom_rec:before{
aspect-ratio:0.96;
height:auto;
width:38px;
background-size:100% 100%;
left:-6px;
bottom:-6px;
}
.divbottom_rec:after{
aspect-ratio:0.96;
height:auto;
width:38px;
background-size:100% 100%;
right:-6px;
bottom:-6px;
}
.divtop_rec:before{
aspect-ratio:0.96;
height:auto;
width:38px;
background-size:100% 100%;
left:-6px;
top:-6px;
}
.divtop_rec:after{
aspect-ratio:0.96;
height:auto;
width:38px;
background-size:100% 100%;
right:-6px;
top:-6px;
}
.h1root{
padding-top:30px;
padding-bottom:20px;
font-size:17px;
margin-top:40px;
margin-bottom:40px;
}
.h1root span{
font-size:13px;
}
.h1root:before{
aspect-ratio:6.25;
height:auto;
background-size:100% 100%;
width:130px;
}
.h1root:after{
aspect-ratio:6.25;
height:auto;
background-size:100% 100%;
width:130px;
}
.aline{
display:flex;
width:33.2%;border-radius:0px;
height:46px;
float:left;
}
.divfix_line br{
display:none;
}
.divfix_line{
transform:translatey(0px);
top:auto;
left:0px;
width:100%;
bottom:0px;
box-shadow:0px -6px 6p rgba(0,0,0,0.6);
display:block;
}
[data-call=phone] img{
width:auto;height:15px;
top:2px;
}
[data-call=line] img{
width:auto;height:18px;
top:4px;
}
[data-call=face] img{
width:auto;height:16px;
top:2px;
}
.aline img{
position:relative;
padding-right:2px;
}
.aline code{
display:inline;
}
.pload{
font-family: Microsoft JhengHei;
}
.pdm1{
font-size:20px;
}
.divdm_rec img{
position:absolute;
left:calc(50% - 30px);
}
.divdm_rec{
height:460px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
.divdm1{
aspect-ratio:1.4;
}
.pcap{
font-size:24px;
padding-bottom:20px;
margin-bottom:20px;
}
.diva1_rec{
padding:30px;
}
.tablea1{
padding-bottom:60px;
}
.proom1 span{
font-size:26px;
}
.proom1{
padding-left:20px;
}
.rleft1{
margin-left:20px;
}
.rleft2{
margin-left:20px;
}
.h2home{
font-size:18px;
}
.h2home span{
font-size:24px;
padding-bottom:30px;
}
.h2home span:after{
bottom:15px;
}
.divnews_rec{
width:100%;
}
.divimg_news{
aspect-ratio:1.4;
}
.divnews{
width:280px;
margin:auto;
max-width:calc(100% - 100px);
float:none;
padding-left:0px;
padding-right:0px;
padding-bottom:40px;
left:1px;
}
.anews{
font-size:16px;
}
.pnews{
font-size:14px;
}
}
@media screen and (min-width:1px) and (max-width:1330px){
.divpadd_base{
width:calc(100% - 60px);
}
.tablea1{
width:100%;
}
.h2home{
width:calc(100% - 60px);
text-align:center;
}
.h2home span:after{
content:"";
display:inline-block;
width:80px;
position:absolute;
left:50%;
transform:translatex(-50%);
}
}
@media screen and (min-width:1px) and (max-width:950px){
.tableb1{
display:block;
}
.trb1{
display:block;
}
.tdb1{
display:block;
}
.tdb2{
display:block;
}
}
@media screen and (min-width:460px) and (max-width:950px){
.pcopy{
position:absolute;
top:30px;
}
}
@media screen and (min-width:1px) and (max-width:790px){
.divfix{
display:none;
}
.divfix-back{
display:none;
}
.divfix_m11{
display:inline-block;
}
.divfix_m1{
display:block;
}
.divspace{
display:block;
}
}
@media screen and (min-width:460px) and (max-width:790px){
.divfix_line{
transform:translatey(0px);
top:auto;
bottom:6px;
display:block;
}
.divfix_line-back{
transform:translatey(0px);
top:auto;
bottom:6px;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
display:block;
}
}
@media screen and (min-width:1px) and (max-width:1230px){
.div1200{
width:100%;
}
}
@media screen and (min-width:1px) and (max-width:660px){
.mobile{
display:block;
}
.divdm_root{
display:none;
}
.pdm1{
top:calc(50% - 20px);
}
.tda1{
width:calc(100% - 60px);
}
.tda2{
width:calc(100% - 80px);
}
.tdnews1{
font-size:40px;
width:40px;
}
.tdnews1 span{
font-size:14px;
}
}
@media screen and (min-width:950px) and (max-width:1250px){
.divdm_rec{
height:600px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
}
@media screen and (min-width:700px) and (max-width:950px){
.divdm_rec{
height:500px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
.pdm1{
font-size:25px;
}
}
@media screen and (min-width:600px) and (max-width:700px){
.pdm1{
font-size:20px;
}
.divdm_rec{
height:400px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
}
@media screen and (min-width:460px) and (max-width:600px){
.pdm1{
font-size:20px;
}
.divdm_rec{
height:460px;
}
.divdm_rec img{
height:calc(100% + 100px);
}
.divdm_rec img{
position:absolute;
left:calc(50% + 40px);
}
.divnews_rec{
width:100%;
}
.divimg_news{
aspect-ratio:1.4;
}
.divnews{
width:320px;
margin:auto;
max-width:calc(100% - 100px);
float:none;
padding-left:0px;
padding-right:0px;
padding-bottom:40px;
left:1px;
}
}
@media screen and (min-width:1000px) and (max-width:1330px){
.tda1{
width:60%;
}
.diva1_rec{
display:inline-block;
position:relative;
padding:20px;
}
}
@media screen and (min-width:1100px) and (max-width:1200px){
.divposword_rec{
position:absolute;
left:-100px;
top:-60px;
width:calc(100% + 100px);
height:calc(100% + 120px);
}
.divposword1_rec{
position:absolute;
left:-100px;
top:-60px;
width:calc(100% + 100px);
height:calc(100% + 120px);
}
}
@media screen and (min-width:1000px) and (max-width:1100px){
.divposword_rec{
position:absolute;
left:-100px;
top:-50px;
width:calc(100% + 100px);
height:calc(100% + 100px);
}
.divposword1_rec{
position:absolute;
left:-100px;
top:-50px;
width:calc(100% + 100px);
height:calc(100% + 100px);
}
.tda1{
width:60%;
}
.diva1_rec{
display:inline-block;
position:relative;
padding:20px;
}
}
@media screen and (min-width:1px) and (max-width:1000px){
.tablea1{
display:block;
}
.tra1{
display:block;
}
.tda1{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:50px;
}
.tda2{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
}
.divposword_rec{
left:0px;
top:0px;
width:100%;
height:100%;
positoin:relative;
}
.divposword1_rec{
left:0px;
top:0px;
width:100%;
height:100%;
positoin:relative;
}
.pcap:after{
left:0px;
}
.pcap{
padding-top:0px;
}
.proot{
margin-bottom:60px;
}
.divposdot{
text-align:center;
}
.tableroom{
display:block;
left:0px;
padding-top:0px;
padding-bottom:100px;
}
.trroom{
display:block;
}
.tdroom1{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
padding-bottom:60px;
}
.tdroom2{
display:block;
padding-left:0px;
padding-right:0px;
margin:auto;
left:0px;
top:0px;
}
.tdroom1{
width:660px;
max-width:calc(100% - 60px);
}
.tdroom2{
width:660px;
max-width:calc(100% - 60px);
}
}
@media screen and (min-width:460px) and (max-width:680px){
.divdm1{
aspect-ratio:1.6;
}
}
@media screen and (min-width:460px) and (max-width:1000px){
.pcap{
font-size:30px;
padding-bottom:20px;
margin-bottom:20px;
}
.proom1{
padding-left:30px;
}
.rleft1{
margin-left:30px;
}
.rleft2{
margin-left:30px;
}
}
@media screen and (min-width:550px) and (max-width:1000px){
.diva1_rec{
padding:40px;
}
}
@media screen and (min-width:660px) and (max-width:1000px){
.tda1{
width:660px;
}
.tda2{
width:660px;
}
}
@media screen and (min-width:1px) and (max-width:1430px){
.tableroom{
width:calc(100% - 0px);
}
}
@media screen and (min-width:1000px) and (max-width:1150px){
.proom1{
padding-left:30px;
}
.rleft1{
margin-left:30px;
}
.rleft2{
margin-left:90px;
}
.tdroom2{
left:-60px;
top:60px;
}
}
@media screen and (min-width:1100px) and (max-width:1330px){
.divnews_rec{
width:calc(100% - 60px);
}
}
@media screen and (min-width:950px) and (max-width:1100px){
.divnews_rec{
width:calc(100% - 40px);
}
.divnews{
width:calc(33.3% - 40px);
padding-left:20px;
padding-right:20px;
padding-bottom:40px;
}
}
@media screen and (min-width:730px) and (max-width:950px){
.divnews_rec{
width:700px;
max-width:calc(100% - 60px);
}
.divnews{
width:calc(50% - 60px);
left:2px;
}
}
@media screen and (min-width:600px) and (max-width:730px){
.divnews_rec{
width:calc(100% - 40px);
}
.divnews{
width:calc(50% - 40px);
padding-left:20px;
padding-right:20px;
padding-bottom:40px;
left:2px;
}
}
