.a1{ display:inline-block; font-size:14.5px; padding-top:10px; padding-bottom:10px; padding-left:25px; padding-right:25px; position:relative; letter-spacing:1px; position:relative; cursor:pointer; top:-5px; color:#111111; transition:0.4s; } .a1:before{ content:attr(data-word); display:inline-block; font-size:13px; font-family:oswald;font-weight:400; color:#444444; letter-spacing:3px; position:absolute; left:50%; bottom:-12px; transform:translatex(-50%); transition:0.4s; } .logoimg{ position:relative; top:3px; width:220px; transition:0.4s; } .logoimg-back{ position:relative; top:3px; width:180px; transition:0.4s; } .a1:hover{ top:20px; transition:0.4s; color:#0066CC; font-family:Noto Sans TC;font-weight:400; } .a1:hover:before{ bottom:35px; transition:0.4s; color:#0066CC; } .divspace{ height:100px; } .table1-back{ display:table; width:1300px; height:80px; margin:auto; transition:0.4s; } .table1{ display:table; width:1300px; height:100px; margin:auto; transition:0.4s; } .tr1{ display:table-row; } .td1{ display:table-cell; vertical-align:middle; padding-left:30px; width:239px; } .td2{ display:table-cell; vertical-align:middle; padding-right:30px; text-align:right; } .divfix{ position:fixed; left:0px; top:0px; width:100%; z-index:11; background-color:white; box-shadow:0px 0px 2px #cccccc; } .qrcode{ width:100px; } .ab1{ display:block; width:100%; color:#aaaaaa; font-size:15px; padding-bottom:10px; } .tabdata{ color:#aaaaaa; font-size:15px; } .tdbdata1{ width:80px; color:white; vertical-align:top; } .tdbdata2 span{ font-size:14px; display:inline-block; padding-left:12px; padding-right:12px; padding-top:8px; padding-bottom:8px; line-height:1.2em; background-color:#111111; color:#aaaaaa; margin-bottom:10px; border-radius:2px; } .tdbdata2{ vertical-align:top; } [data-tag=phone]:before{ content:""; display:inline-block; width:15px; height:15px; background-image:url(https://yida.yida-design.com.tw/icon_phone_white.webp); background-size:100% 100%; position:absolute; left:0px; top:2px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8; } [data-tag=line]:before{ content:""; display:inline-block; width:15px; height:15px; background-image:url(https://yida.yida-design.com.tw/icon_line_white.webp); background-size:100% auto; position:absolute; background-repeat:no-repeat; left:0px; top:2px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8; } [data-tag=map]:before{ content:""; display:inline-block; width:14px; height:18px; background-image:url(https://yida.yida-design.com.tw/icon_map_white.webp); background-size:100% 16px; position:absolute; background-position:50% 50%; background-repeat:no-repeat; left:0px; top:0px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8; } [data-tag=time]:before{ content:""; display:inline-block; width:15px; height:15px; background-image:url(https://yida.yida-design.com.tw/icon_time_white.webp); background-size:100% 100%; position:absolute; left:0px; top:0px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8; } .pbdata span{ display:inline-block; } .pbdata{ padding-left:25px; width:calc(100% - 25px); margin:auto; line-height:1.2em; position:relative; font-size:15px; color:#aaaaaa; padding-bottom:10px; font-family:poppins; } .h3b1{ width:100%; margin:auto; font-size:16px; color:white; font-family:Noto Sans TC;font-weight:300; line-height:1.2em; position:relative; padding-bottom:20px; letter-spacing:1px; margin-bottom:20px; } .h3b1:after{ content:""; display:inline-block; width:40px; height:3px; background-color:#990000; position:absolute; left:0px; bottom:0px; } .trb1{ display:table-row; } .tdb1{ display:table-cell; vertical-align:top; padding-left:30px; width:190px; padding-right:60px; } .tdb2{ display:table-cell; vertical-align:top; padding-right:60px; } .tdb3{ display:table-cell; vertical-align:top; width:140px; padding-right:20px; } .tdb4{ display:table-cell; vertical-align:top; padding-right:30px; padding-top:50px; } .tableb1{ width:1300px; margin:auto; display:table; } .divbase_rec{ background-color:#222222; background-image:url(https://yida.yida-design.com.tw/back1.webp); background-size:1920px auto; background-position:50% calc(50% - 100px); } .divpadd_base{ background-image:linear-gradient(to bottom,rgba(0,0,0,0.9),rgba(0,0,0,0.8),rgba(0,0,0,0.8)); padding-top:100px; padding-bottom:60px; } .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:70px; height:36px; margin-top:12px; margin-bottom:12px; } .menu3 span{ height:2px; background-color:#970000; } .menu1{ position:relative; width:70px; height:36px; margin-top:12px; margin-bottom:12px; } .menu1 span{ height:2px; background-color:#970000; } .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_m11{ display:inline-block; position:fixed; z-index:51; right:5px; top:0px; display:none; cursor:pointer; } .logom1{ height:35px; position:relative; top:2px; } .tam1{ width:100%; height:60px; } .tdm1{ padding-left:20px; width:60px; } .divfix_m1{ position:fixed; left:0px; top:0px; width:100%; background-color:white; box-shadow:0px 0px 6px #cccccc; z-index:33; display:none; box-shadow:0px 0px 10px #cccccc; } @keyframes showm1{ 0%{ top:-2000px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; } 1%{ 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; } } @keyframes hidem1{ 99%{ top:60px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; } 100%{ top:-2000px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; } } .am1{ display:block; font-size:16px; color:#222222; padding-bottom:20px; text-align:center; position:relative; letter-spacing:1px; margin-bottom:15px; cursor:pointer; } .am1:after{ content:attr(data-word); display:inline-block; position:absolute; left:50%; bottom:0px; transform:translatex(-50%); font-family:oswald; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity:0.3;opacity:0.3; letter-spacing:4px; font-size:13px; } .logom3{ height:40px; } .divfix_m3-open{ position:fixed; left:0px; top:0px; margin-top:45px; width:100%; height:100vh; background-color:white; z-index:31; padding-top:50px; transition:0.4s; animation:showm1 0.6s forwards ease paused; } .divfix_m3-close{ position:fixed; left:0px; top:0px; margin-top:45px; width:100%; height:100vh; background-color:white; z-index:31; padding-top:50px; transition:0.4s; animation:hidem1 0.6s forwards ease paused; } .divlogo{ width:100%; height:10px; padding-top:30px; padding-bottom:30px; text-align:center; } .page1{ background-image:linear-gradient(to bottom,white,#f8f8fb); color:#333333; } .page3{ background-color:#25263A; color:white; } .divpage_rec a{ display:inline-flex; width:50px; height:50px; align-items:center; justify-content:center; font-size:15px; font-family:poppins; margin-right:10px; margin-bottom:10px; box-shadow:0px 0px 3px #cccccc; position:relative; } .page1 img{ position:absolute; left:50%; top:50%; transform:translatex(-50%) translatey(-50%); width:12px; display:inline-block; } .divpage_rec{ text-align:left; padding-top:30px; } .h1root{ width:100%; margin:auto; font-size:24px; color:#22222; text-align:center; position:relative; margin-top:30px; padding-top:45px; padding-bottom:50px; letter-spacing:1px; font-family:Noto Sans TC;font-weight:300; } .h1root:before{ content:attr(data-cap); display:inline-block; font-size:36px; font-family:oswald;font-weight:600; color:#333333; color:#cccccc; position:absolute; left:50%; letter-spacing:4px; transform:translatex(-50%); top:0px; text-align:center; } .sptop{ transition:0.4s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; } .sptop-back{ transition:0.4s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; } .acall{ display:flex; width:35px; height:35px; align-items:center; justify-content:center; border-radius:50%; margin-bottom:3px; z-index:31; cursor:pointer; box-shadow:2px 2px 3px rgba(0,0,0,0.3); } [data-call=phone]{ background-color:#006699; } [data-call=line]{ background-color:#007526; } [data-call=top]{ background-color:rgba(0,0,0,0.6); } [data-call=phone] img{ width:48%; } [data-call=line] img{ width:58%; } [data-call=top] img{ width:42%; } .divfix_line{ position:fixed; top:50%; right:10px; transform:translatey(-50%); bottom:10px; z-index:31; display:none; } @keyframes logoshow{ 100%{ -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; transform:scale(1) translatey(0px); } } .divfix_logo img{ display:block; margin:auto; display:none; } .divfix_logo img:nth-child(1){ padding-bottom:20px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; transform:scale(1.8) translatey(10px); animation:logoshow 0.8s forwards ease; animation-delay:0.1s; } .divfix_logo img:nth-child(2){ padding-bottom:20px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; transform:scale(0.8); animation:logoshow 0.8s forwards ease; animation-delay:0.8s; } .divfix_logo{ position:fixed; left:0px; top:0px; width:100%; height:100vh; display:flex; align-items:center; z-index:53; justify-content:center; background-color:white; } [data-3d-rec]{ perspective:3000px; transform-style: preserve-3d; } .divpanel{ min-height:calc(100vh - 200px); 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:Marcellus,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 =>讓物件穿透過去 Chris standing up holding his daughter Elva 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%; } */ .brsp1{ display:none; } .spword{ display:inline-block; padding-top:10px; padding-bottom:10px; padding-left:15px; padding-right:15px; background-color:white; font-size:18px; font-family:Noto Sans TC;font-weight:400; border-radius:20px; border:1px solid #666666; position:relative; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; } .spword:nth-of-type(1){ animation:word1 1s forwards ease paused; animation-delay:0.5s; } .spword:nth-of-type(2){ animation:word1 1s forwards ease paused; animation-delay:0.7s; } .spword:nth-of-type(3){ animation:word1 1s forwards ease paused; animation-delay:0.9s; } .spword:nth-of-type(4){ animation:word1 1s forwards ease paused; animation-delay:1.1s; } @keyframes word1{ 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; } } @keyframes com1{ 0%{ left:60px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; -webkit-filter:brightness(0.8); } 100%{ left:0px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; -webkit-filter:brightness(1); } } .com1{ position:relative; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; animation:com1 0.6s forwards ease paused; animation-delay:0.8s; } .pdm span{ display:inline-block; } .pdm{ width:100%; margin:auto; font-size:24px; color:#111111; font-family:Noto Sans TC;font-weight:400; position:relative; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; margin-bottom:40px; animation:word1 1s forwards ease paused; animation-delay:0.6s; } .h1dm{ width:100%; margin:auto; font-size:65px; color:#111111; letter-spacing:1px; font-family:Noto Sans TC;font-weight:700; line-height:1em; padding-bottom:30px; position:relative; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; animation:word1 1s forwards ease paused; } .divposword{ position:absolute; left:calc(calc(100% - 1300px) / 2); top:50%; transform:translatey(-50%); display:inline-block; } .divposcom1{ position:absolute; right:calc(calc(100% - 1300px) / 2); top:50%; transform:translatey(-50%); display:inline-block; } .divdm_rec{ width:100%; height:750px; background-color:#f8f8fb; position:relative; margin-bottom:100px; } .pshort_serv{ width:100%; margin:auto; font-size:14.5px; color:#777777; line-height:1.4em; letetr-spacing:1px; } .pname_serv{ width:calc(100% - 60px); padding-left:60px; margin:auto; font-size:21px; color:#111111; font-family:Noto Sans TC;font-weight:400; position:relative; padding-bottom:20px; } .pname_serv:before{ content:""; display:inline-block; width:45px; height:60px; background-repeat:no-repeat; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9; background-position:0px 0px; position:absolute; left:0px; top:-10px; } [data-tag=rwd]:before{ background-image:url(https://yida.yida-design.com.tw/icon_com1.webp); } [data-tag=seo]:before{ background-image:url(https://yida.yida-design.com.tw/icon_seo1.webp); } [data-tag=back]:before{ background-image:url(https://yida.yida-design.com.tw/icon_back1.webp); } [data-tag=host]:before{ background-image:url(https://yida.yida-design.com.tw/icon_host1.webp); } [data-tag=market]:before{ background-image:url(https://yida.yida-design.com.tw/icon_market1.webp); } [data-tag=keyword]:before{ background-image:url(https://yida.yida-design.com.tw/icon_keyword1.webp); } .divserv{ margin-left:30px; margin-right:30px; width:calc(50% - 60px); float:left; margin-bottom:50px; } .divserv_rec{ width:calc(1200px - 60px); margin:auto; margin-top:20px; margin-bottom:50px; } .arank{ display:flex; width:100px; height:40px; align-items:center; justify-content:center; color:white; border-radius:4px; border:1px solid rgba(255,255,255,0.4); font-size:15px; position:absolute; left:50%; top:100px; transition:0.8s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; transition: all 500ms cubic-bezier(0.000, 1.325, 0.410, 1.195); /* custom */ transition-timing-function: cubic-bezier(0.000, 1.325, 0.410, 1.195); /* custom */ transform:translatex(-50%) translatey(-50%); } .divposrank{ position:absolute; left:0px; top:0px; width:100%; height:100%; backface-visibility:hidden; transition:0.4s; transform:rotatex(180deg); background-image:linear-gradient(to right bottom,#860209,#660066); oveflow:hidden; box-shadow:0px 0px 6px #666666; } .divgoogle1{ backface-visibility:hidden; transform:rotatex(180deg); transition:0.4s; transform:rotatex(0deg); } .divgoogle:hover .arank{ top:50%; transition:0.6s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; } .divgoogle:hover .divgoogle1{ transition:0.4s; transform:rotatex(180deg); } .divgoogle:hover .divposrank{ transition:0.4s; transform:rotatex(360deg); } .divgoogle_all{ perspective:1000; } .pname_google{ width:100%; margin:auto; font-size:16px;color:white; color:#222222; line-height:1.2em; padding-top:20px; padding-bottom:6px; font-family:Noto Sans TC;font-weight:400; } .pshort_google{ width:calc(100% - 10px); padding-right:10px; margin:auto; font-size:15px; line-height:1.2em; color:white; color:#666666; } .divgoogle1:before{ content:""; display:inline-block; width:30px; aspect-ratio:1; position:absolute; left:20px; top:50%; transform:translatey(-50%) scale(1); background-image:url(https://yida.yida-design.com.tw/icon_google.webp); background-repeat:no-repeat; background-size:80% auto; background-position:50% 50%; transition:0.4s; } .divgoogle1{ padding-left:70px; box-shadow:0px 0px 6px #666666; margin-bottom:30px; position:absolute; left:0px; top:0px; width:calc(100% - 70px); height:100%; background-color:white; background-image:linear-gradient(to right,#222222,#333333); background-image:linear-gradient(to right bottom,white,white,#f3f3f3); border-radius:2px 2px 2px 2px ; } .divgoogle{ width:calc(33.3% - 60px); margin-left:30px; margin-right:30px; float:left; min-height:80px; margin-bottom:30px; position:relative; background-color:white; border-radius:2px 2px 2px 2px ; position:relative; left:0px; top:0px; } .divgoogle_rec{ width:1300px; margin:auto; padding-bottom:80px; } .odoword{ display:inline-block; font-size:46px; color:#9B0000; font-family:poppins;font-weight:400; position:relative; top:0px; letter-spacing:0px; padding-right:20px; margin-right:6px; } .odoword:after{ content:"+"; display:inline-block; font-size:20px; color:#9B0000; position:absolute; right:0px; top:0px; } .pwork{ width:100%; margin:auto; font-size:26px; letter-spacing:1px; color:#111111; font-family:Noto Sans TC;font-weight:400; text-align:center; margin-bottom:50px; } .h2home{ width:100%; margin:auto; text-align:center; letter-spacing:1px; font-size:46px; color:#111111; font-family:Noto Sans TC;font-weight:600; padding-bottom:30px; } .phome{ width:calc(100% - 100px); margin:auto; font-size:18px; color:#222222; line-height:1.6em; text-align:center; letter-spacing:1px; padding-top:30px; padding-bottom:50px; } .divpage_rec{ text-align:center; padding-bottom:50px; } .pword{ width:100%; margin:auto; font-size:14px; color:white; text-align:center; padding-bottom:20px; } .divword{ display:inline-block; position:relative; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; transition:1.8s; transition-delay:0.8s; transition-timing-function: linear; top:30px; cursor:pointer; } .divimg_case:hover .divword{ top:0px; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=120);filter:alpha(opacity=120);-moz-opacity:1.2;-khtml-opacity:1.2;opacity:1.2; transition-delay: 0.1s; transition-timing-function: ease; transition-duration:1s; } .atext{ display:inline-block; color:white; font-size:16px; padding-left:16px; padding-right:16px; padding-top:10px; padding-bottom:10px; cursor:pointer; border:2px solid rgba(255,255,255,0.8); letter-spacing:1px; } .alink{ display:block; aspect-ratio:1; width:40px; margin:auto; background-image:url(https://yida.yida-design.com.tw/icon_link_white.webp); background-repeat:no-repeat; background-size:cover; transition:0.4s; cursor:pointer; transform:rotate(0deg); } .divposcase1{ display:inline-block; position:absolute; right:15px; bottom:-100px; transition:0.4s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; } .divimg_case:hover .divposcase1{ right:15px; bottom:10px; transition-delay:0.4s; transition:0.4s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; } .divimg_case svg{ width:100%; } .divimg_case:hover .alink{ transition:0.4s; transition-delay:0.8s; transform:rotate(360deg); } .divposcase{ position:absolute; left:-100px; bottom:-100px; width:calc(100% + 0px); height:calc(100% + 0px); background-color:rgba(0,0,0,0.8); transition:0.6s; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; display:flex; align-items:center; justify-content:center; transition-timing-function: linear; /* custom */ } .divimg_case:hover .divposcase{ -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; left:0px; bottom:0px; transition:0.4s; transition-timing-function: ease; /* custom */ } .acase{ display:block; width:100%; font-size:16px; color:#555555; font-family:Noto Sans TC;font-weight:400; } .divimg_case{ position:relative; aspect-ratio:1.33; margin-bottom:15px; overflow:hidden; box-shadow:0px 0px 6px rgba(0,0,0,0.6); } .divimg_case img{ position:absolute; left:0px; top:0px; width:100%; height:100%; object-fit:cover; object-position:50% 50%; -webkit-filter:brightness(1); transform:scale(1) rotate(0deg); transition:0.4s; background-size:cover; background-position:50% 50%; } .divimg_case:hover img{ -webkit-filter:brightness(1.1); transform:scale(1.2) rotate(0deg); transition:0.4s; } .divcase{ width:calc(25% - 20px); margin-left:10px; margin-right:10px; float:left; left:4px; padding-bottom:20px; } .divcase_rec{ width:1500px; margin:auto; } .amore_case:hover{ color:#BA2D70; background-color:white; border:2px solid #BA2D70; transition:0.2s; } .amore_case{ display:flex; width:220px; height:60px; margin:auto; margin-bottom:60px; margin-top:20px; align-items:center; justify-content:center; font-size:18px; color:white; border:2px solid #BA2D70; font-family:Noto Sans TC;font-weight:300; border-radius:40px; background-color:#BA2D70; transition:0.4s; position:relative; left:0px; top:0px; } .tdp2 img{ max-width:100%; } .tablep1{ display:table; width:900px; margin:auto; table-layout:fixed; } .trp1{ display:table-row; } .tdp1{ display:table-cell; vertical-align:middle; padding-left:30px; padding-right:70px; } .tdp2{ display:table-cell; vertical-align:middle; padding-right:30px; width:300px; } .divprice_rec{ padding-top:30px; padding-bottom:0px; background-color:#f8f8fb; } .divline_price{ width:100px; border-bottom:1px solid #333333; margin:0px; margin-bottom:30px; } .h2price{ width:100%; margin:auto; letter-spacing:1px; font-size:39px; color:#111111; font-family:Noto Sans TC;font-weight:600; padding-bottom:20px; } .pprice1{ width:100%; margin:0px; font-size:28px; color:#222222; line-height:1.6em; font-family:Noto Sans TC;font-weight:300; letter-spacing:1px; padding-bottom:20px; } .pprice2{ width:100%; margin:0px; font-size:15px; color:#222222; line-height:1.6em; letter-spacing:1px; } .spload{ display:none; } .asub_con img{ height:2.5em; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6; } .asub_con{ display:flex; margin:auto; border-radius:30px; width:200px; height:60px; align-items:center; justify-content:center; color:white; background-color:rgba(0,0,0,0.8); font-size:18px; letter-spacine:1px; font-family:Noto Sans TC;font-weight:300; } .div2{ width:calc(100% - 40px); padding-bottom:20px; float:left; padding-left:20px; padding-right:20px; } .div2 textarea{ height:90px; width:calc(100% - 20px); padding-left:20px; outline:none; padding-top:10px; color:#3E0300; font-size:16px; border-radius:20px; border:0px solid white; background-color:rgba(255,255,255,0.8); } .div2 textarea::placeholder{ color:#222222; font-size:16px; color:#3E0300; } .div1{ width:calc(50% - 40px); padding-bottom:20px; float:left; padding-left:20px; padding-right:20px; } .div1 input{ height:30px; width:calc(100% - 20px); padding-left:20px; padding-top:3px; outline:none; color:#3E0300; font-size:16px; border-radius:40px; border:0px solid white; background-color:rgba(255,255,255,0.8); } .div1 input::placeholder{ color:#222222; font-size:16px; color:#3E0300; } .pprice1 span{ display:inline-block; } .divbody_con{ width:660px; margin:auto; max-width:calc(100% - 60px); } .divcon_rec .h2price{ margin:auto !important; color:white !important; text-align:center; padding-bottom:30px; } .divcon_rec p{ margin:auto !important; color:white !important; text-align:center; line-height:1.4em; font-size:24px; padding-bottom:30px; } .divcon_rec p span{ font-size:30px; font-family:lato; } .divcon_rec{ width:100%; padding-top:100px; padding-bottom:80px; background: rgb(131,58,180); background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); } @media screen and (min-width:1px) and (max-width:1330px){ .table1{ width:100%; } .table1-back{ width:100%; } .tableb1{ width:100%; } } @media screen and (min-width:950px) and (max-width:1100px){ .a1{ padding-left:15px; padding-right:15px; } } @media screen and (min-width:1px) and (max-width:950px){ .table1-back{ display:block; height:160px; } .table1{ display:block; height:160px; } .tr1{ display:block; } .td1{ display:block; padding-left:0px; padding-right:0px; width:100%; text-align:center; padding-top:30px; padding-bottom:20px; } .td2{ display:block; padding-left:0px; padding-right:0px; width:100%; text-align:center; } .logoimg{ width:180px; } } @media screen and (min-width:790px) and (max-width:950px){ .divspace{ height:160px; } } @media screen and (min-width:900px) and (max-width:1600px){ .divbase_rec{ background-size:1600px auto; } } @media screen and (min-width:900px) and (max-width:1200px){ .tdb4{ display:none; } } @media screen and (min-width:900px) and (max-width:1100px){ .tdb1{ padding-right:30px; } .tdb2{ padding-right:30px; } } @media screen and (min-width:900px) and (max-width:960px){ .tdb3{ display:none; } } @media screen and (min-width:1px) and (max-width:900px){ .tableb1{ display:block; } .trb1{ display:block; } .tdb1{ display:block; padding-left:0px; padding-right:0px; width:100%; padding-bottom:20px; } .tdb2{ display:block; padding-left:0px; padding-right:0px; width:100%; } .ab1{ display:inline-block; width:auto; padding-right:20px; padding-bottom:6px; } .tdb3{ display:none; padding-left:0px; width:100%; padding-right:0px; } .h3b1:before{ content:""; display:inline-block; width:100%; border-bottom:1px solid rgba(255,255,255,0.2); position:absolute; left:0px; bottom:0px; } .tdb4{ display:block; padding-left:0px; padding-right:0px; width:100%; text-align:center; } .divpadd_base{ padding-top:60px; padding-bottom:30px; } } @media screen and (min-width:660px) and (max-width:900px){ .tableb1{ max-width:calc(100% - 100px); } .divbase_rec{ background-size:1200px auto; background-position:50% calc(50% - 100px); } .divposword{ left:50%; top:50px; width:100%; text-align:center; transform:translatex(-50%); } .divposcom1{ right:auto; left:calc(50% - 40px); top:auto; bottom:-60px; transform:translatex(-50%); } .h1dm{ font-size:56px; text-align:center; } .pdm{ font-size:20px; text-align:center; margin-bottom:15px; } .spword{ font-size:16px; } .com1{ width:750px; } .divdm_rec{ height:680px; } } @media screen and (min-width:460px) and (max-width:700px){ .divpadd_base{ background-image:linear-gradient(to bottom,rgba(0,0,0,0.9),rgba(0,0,0,0.8),rgba(0,0,0,1)); } .divprice_rec{ padding-top:90px; padding-bottom:0px; } .pprice2{ text-align:center; width:390px; margin:auto; max-width:calc(100% - 100px); } .tdp2{ width:260px; max-width:calc(100% - 60px); } } @media screen and (min-width:1px) and (max-width:660px){ .tableb1{ max-width:calc(100% - 60px); } .divbase_rec{ background-size:1000px auto; background-position:50% 0%; } } @media screen and (min-width:1px) and (max-width:460px){ .pbdata{ font-size:14.5px; } .tdbdata1{ width:70px; } .tabdata{ font-size:14.5px; } .tdbdata2 span{ font-size:14px; padding-left:10px; padding-right:10px; padding-top:6px; padding-bottom:6px; } .divpadd_base{ background-image:linear-gradient(to bottom,rgba(0,0,0,0.8),rgba(0,0,0,0.8),rgba(0,0,0,1),rgba(0,0,0,1)); } .divanimation{ left:0px; } .logom1{ height:30px; } .tam1{ height:45px; } .tdm1{ padding-left:20px; } .menu3{ width:50px; height:29px; margin-top:8px; margin-bottom:8px; } .menu1{ width:50px; height:29px; margin-top:8px; margin-bottom:8px; } .divspace{ height:45px; } .am1{ font-size:15px; padding-bottom:20px; } .divfix_m3{ top:45px; padding-top:50px; } .divpage_rec a{ margin-right:3px; margin-left:3px; width:40px; height:40px; margin-bottom:6px; } .h1root{ font-size:21px; margin-top:30px; padding-top:35px; padding-bottom:30px; } .h1root:before{ font-size:32px; } .divfix_line{ top:auto; transform:none; bottom:6px; } .pname_serv{ width:calc(100% - 40px); padding-left:40px; margin:auto; font-size:18px; color:#111111; font-family:Noto Sans TC;font-weight:400; position:relative; padding-bottom:15px; } .pname_serv:before{ content:""; display:inline-block; width:30px; height:60px; background-repeat:no-repeat; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9; background-position:0px 0px; position:absolute; background-size:25px auto; left:0px; top:-5px; } .divserv_rec{ width:calc(100% - 24px); margin-top:20px; margin-bottom:30px; } .divserv{ width:250px; margin:auto; float:none; max-width:calc(100% - 40px); margin-bottom:30px; } .divgoogle_rec{ padding-bottom:50px; } .phome{ font-size:16px; padding-top:10px; padding-bottom:20px; } .divdm_rec{ margin-bottom:60px; } .h2home{ font-size:26px; padding-bottom:20px; } .pwork{ font-size:20px; margin-bottom:30px; } .odoword{ display:inline-block; font-size:28px; } .divcase{ width:260px; margin:auto; float:none; left:1px; padding-bottom:20px; max-width:calc(100% - 60px); } .acase{ text-align:center; } .divcase_rec{ width:100%; } .atext{ color:white; font-size:15px; padding-left:12px; padding-right:12px; padding-top:8px; padding-bottom:8px; border:2px solid rgba(255,255,255,0.8); letter-spacing:1px; } .alink{ width:35px; } .amore_case{ width:160px; height:45px; font-size:16px; } .divprice_rec{ padding-top:60px; } .h2price{ font-size:30px; } .pprice1{ font-size:22px; } .pprice2{ width:calc(100% - 100px); margin:auto; text-align:center; } .divline_price{ width:60px; } .divcon_rec{ padding-top:50px; padding-bottom:40px; } .divcon_rec p{ font-size:20px; padding-bottom:30px; } .divcon_rec p span{ font-size:24px; font-family:lato; } .asub_con{ display:flex; margin:auto; border-radius:30px; width:160px; height:50px; align-items:center; justify-content:center; color:white; background-color:rgba(0,0,0,0.8); font-size:16px; letter-spacine:1px; font-family:Noto Sans TC;font-weight:300; } .div1{ padding-bottom:15px; } .div2{ padding-bottom:15px; } .div1 input{ height:28px; font-size:15px; } .div1 input::placeholder{ font-size:15px; } .div2 textarea{ font-size:15px; } .div2 textarea::placeholder{ font-size:15px; } } @media screen and (min-width:1px) and (max-width:790px){ .divfix{ display:none; } .divfix_m1{ display:block; } .divfix_m11{ display:block; } .divfix_line{ display:block; } } @media screen and (min-width:460px) and (max-width:790px){ .divspace{ height:60px; } } @media screen and (min-width:1px) and (max-width:1050px){ .divpage_rec{ text-align:center; } } @media screen and (min-width:460px) and (max-width:1050px){ .divpage_rec a{ margin-right:5px; margin-left:5px; margin-bottom:10px; } } @media screen and (min-width:11px) and (max-width:460px){ .divfix_logo img:nth-child(1){ width:60px; } } @media screen and (min-width:1px) and (max-width:1230px){ .div1200{ width:100%; } } @media screen and (min-width:1150px) and (max-width:1330px){ .divposword{ left:60px; top:calc(50% - 60px); } .divposcom1{ right:0px; top:calc(50% + 60px); } } @media screen and (min-width:1050px) and (max-width:1150px){ .divposword{ left:30px; top:calc(50% - 60px); } .divposcom1{ right:-60px; top:calc(50% + 60px); } } @media screen and (min-width:900px) and (max-width:1050px){ .divposword{ left:30px; top:calc(50% - 60px); } .divposcom1{ right:-60px; top:calc(50% + 60px); } .h1dm{ font-size:56px; } .pdm{ font-size:20px; } .spword{ font-size:16px; } .com1{ width:800px; } } @media screen and (min-width:550px) and (max-width:660px){ .divposword{ left:50%; top:50px; width:100%; text-align:center; transform:translatex(-50%); } .divposcom1{ right:auto; left:calc(50% - 40px); top:auto; bottom:-60px; transform:translatex(-50%); } .h1dm{ font-size:50px; text-align:center; } .pdm{ font-size:18px; text-align:center; margin-bottom:15px; } .spword{ font-size:16px; } .com1{ width:700px; } .divdm_rec{ height:640px; } } @media screen and (min-width:460px) and (max-width:550px){ .divposword{ left:50%; top:50px; width:100%; text-align:center; transform:translatex(-50%); } .divposcom1{ right:auto; left:calc(50% - 40px); top:auto; bottom:-60px; transform:translatex(-50%); } .h1dm{ font-size:46px; text-align:center; } .pdm{ font-size:18px; text-align:center; margin-bottom:15px; } .spword{ font-size:16px; padding-top:8px; padding-bottom:8px; padding-left:12px; padding-right:12px; } .com1{ width:620px; } .divdm_rec{ height:600px; } } @media screen and (min-width:400px) and (max-width:460px){ .divposword{ left:50%; top:50px; width:100%; text-align:center; transform:translatex(-50%); } .divposcom1{ right:auto; left:calc(50% - 40px); top:auto; bottom:-30px; transform:translatex(-50%); } .h1dm{ font-size:40px; text-align:center; } .pdm{ font-size:16px; text-align:center; margin-bottom:15px; } .spword{ font-size:15px; padding-top:6px; padding-bottom:6px; padding-left:10px; padding-right:10px; } .com1{ width:560px; } .divdm_rec{ height:560px; } } @media screen and (min-width:1px) and (max-width:400px){ .divposword{ left:50%; top:30px; width:100%; text-align:center; transform:translatex(-50%); } .divposcom1{ right:auto; left:calc(50% - 40px); top:auto; bottom:-30px; transform:translatex(-50%); } .h1dm{ font-size:32px; text-align:center; } .pdm{ font-size:16px; text-align:center; margin-bottom:15px; width:calc(100% - 60px); } .spword{ font-size:14px; padding-top:6px; padding-bottom:6px; padding-left:10px; padding-right:10px; display:none; } .com1{ width:490px; animation-delay:0.8s; } .divdm_rec{ height:460px; } } @media screen and (min-width:660px) and (max-width:1230px){ .divserv_rec{ width:calc(100% - 60px); } } @media screen and (min-width:530px) and (max-width:660px){ .divserv_rec{ width:calc(100% - 40px); } .divserv{ margin-left:15px; margin-right:15px; width:calc(50% - 30px); float:left; margin-bottom:30px; } .pname_serv{ width:calc(100% - 45px); padding-left:45px; margin:auto; font-size:19px; color:#111111; font-family:Noto Sans TC;font-weight:400; position:relative; padding-bottom:15px; } .pname_serv:before{ content:""; display:inline-block; width:30px; height:60px; background-repeat:no-repeat; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9; background-position:0px 0px; position:absolute; background-size:30px auto; left:0px; top:-10px; } } @media screen and (min-width:460px) and (max-width:530px){ .pname_serv{ width:calc(100% - 40px); padding-left:40px; margin:auto; font-size:18px; color:#111111; font-family:Noto Sans TC;font-weight:400; position:relative; padding-bottom:15px; } .pname_serv:before{ content:""; display:inline-block; width:30px; height:60px; background-repeat:no-repeat; -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;opacity:0.9; background-position:0px 0px; position:absolute; background-size:25px auto; left:0px; top:-5px; } .divserv_rec{ width:calc(100% - 24px); } .divserv{ margin-left:12px; margin-right:12px; width:calc(50% - 24px); float:left; margin-bottom:30px; } } @media screen and (min-width:1230px) and (max-width:1330px){ .divgoogle_rec{ width:calc(100% - 60px); } } @media screen and (min-width:1150px) and (max-width:1230px){ .divgoogle_rec{ width:calc(100% - 40px); } .divgoogle{ width:calc(33.3% - 40px); margin-left:20px; margin-right:20px; margin-bottom:30px; } } @media screen and (min-width:1000px) and (max-width:1150px){ .divgoogle_rec{ width:calc(100% - 20px); } .divgoogle{ width:calc(33.3% - 20px); margin-left:10px; margin-right:10px; margin-bottom:20px; } } @media screen and (min-width:1px) and (max-width:850px){ .pgoogle br{ display:none; } } @media screen and (min-width:790px) and (max-width:1000px){ .divgoogle_rec{ width:750px; max-width:calc(100% - 60px); } .divgoogle{ width:calc(50% - 60px); } } @media screen and (min-width:750px) and (max-width:790px){ .divgoogle_rec{ width:calc(100% - 60px); } .divgoogle{ width:calc(50% - 40px); margin-left:20px; margin-right:20px; margin-bottom:30px; } } @media screen and (min-width:1px) and (max-width:750px){ .arank{ display:flex; width:90px; height:35px; font-size:14px; } .divgoogle1{ min-height:70px; } .divgoogle{ min-height:70px; } .pname_google{ padding-top:15px; } } @media screen and (min-width:700px) and (max-width:750px){ .divgoogle_rec{ width:calc(100% - 40px); } .divgoogle1{ padding-left:50px; width:calc(100% - 50px); } .divgoogle{ width:calc(50% - 40px); margin-left:20px; margin-right:20px; margin-bottom:30px; } .divgoogle1:before{ width:25px; left:15px; } } @media screen and (min-width:630px) and (max-width:700px){ .divgoogle_rec{ width:calc(100% - 20px); } .divgoogle1{ padding-left:50px; width:calc(100% - 50px); } .divgoogle{ width:calc(50% - 20px); margin-left:10px; margin-right:10px; margin-bottom:20px; } .divgoogle1:before{ width:25px; left:15px; } } @media screen and (min-width:460px) and (max-width:660px){ .divgoogle_rec{ padding-bottom:60px; } .phome{ font-size:17px; padding-top:10px; padding-bottom:30px; } .h2home{ font-size:33px; } .pwork{ font-size:24px; } .odoword{ display:inline-block; font-size:32px; } } @media screen and (min-width:1px) and (max-width:700px){ .pshort_google{ font-size:15px; } .pname_google{ font-size:15px; } .phome br{ display:none; } .tablep1{ display:block; } .trp1{ display:block; } .tdp1{ display:block; padding-left:0px; padding-right:0px; margin:auto; padding-bottom:30px; } .tdp2{ display:block; padding-left:0px; padding-right:0px; margin:auto; } .h2price{ text-align:center; } .pprice1{ text-align:center; } .divline_price{ margin:auto; margin-bottom:30px; } } @media screen and (min-width:560px) and (max-width:630px){ .divgoogle_rec{ width:calc(100% - 10px); } .divgoogle1{ padding-left:50px; width:calc(100% - 50px); } .divgoogle{ width:calc(50% - 10px); margin-left:5px; margin-right:5px; margin-bottom:10px; } .divgoogle1:before{ width:25px; left:15px; } } @media screen and (min-width:1px) and (max-width:560px){ .divgoogle_rec{ width:100%; } .divgoogle1{ padding-left:50px; width:calc(100% - 50px); } .divgoogle{ width:260px; margin:auto; float:none; max-width:calc(100% - 60px); margin-bottom:10px; } .divgoogle1:before{ width:25px; left:15px; } } @media screen and (min-width:660px) and (max-width:950px){ .h2home{ font-size:39px; } } @media screen and (min-width:1200px) and (max-width:1530px){ .divcase_rec{ width:calc(100% - 20px); } } @media screen and (min-width:950px) and (max-width:1200px){ .divcase{ width:calc(33.3% - 30px); margin-left:15px; margin-right:15px; float:left; left:3px; padding-bottom:30px; } .divcase_rec{ width:calc(100% - 30px); } } @media screen and (min-width:820px) and (max-width:950px){ .divcase{ width:calc(33.3% - 20px); margin-left:10px; margin-right:10px; float:left; left:3px; padding-bottom:20px; } .divcase_rec{ width:calc(100% - 20px); } } @media screen and (min-width:720px) and (max-width:820px){ .divcase{ width:calc(50% - 40px); margin-left:20px; margin-right:20px; float:left; left:2px; padding-bottom:40px; } .divcase_rec{ width:750px; max-width:calc(100% - 40px); } } @media screen and (min-width:580px) and (max-width:720px){ .divcase{ width:calc(50% - 20px); margin-left:10px; margin-right:10px; float:left; left:2px; padding-bottom:20px; } .divcase_rec{ width:calc(100% - 20px); } } @media screen and (min-width:460px) and (max-width:580px){ .divcase{ width:300px; margin:auto; float:none; left:1px; padding-bottom:20px; max-width:calc(100% - 100px); } .acase{ text-align:center; } .divcase_rec{ width:100%; } } @media screen and (min-width:460px) and (max-width:540px){ .amore_case{ width:180px; height:50px; font-size:16px; } .h2price{ font-size:33px; } } @media screen and (min-width:1px) and (max-width:930px){ .tablep1{ width:100%; } } @media screen and (min-width:700px) and (max-width:820px){ .tdp1{ padding-right:30px; } .tdp2{ width:260px; } } @media screen and (min-width:420px) and (max-width:460px){ .tdp2{ width:260px; max-width:calc(100% - 60px); } } @media screen and (min-width:1px) and (max-width:420px){ .tdp2{ width:220px; max-width:calc(100% - 60px); } } @media screen and (min-width:1px) and (max-width:600px){ .div1{ width:calc(100% - 40px); } } @media screen and (min-width:1px) and (max-width:500px){ .divcon_rec p span{ width:100%; } }