.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; } .divcrumb{ width:calc(1300px - 60px); margin:auto; color:#666666; font-size:14.5px; padding-top:10px; } .divcrumb a{ color:#888888; display:inline-block; position:relative; padding-right:10px; margin-right:10px; } .divcrumb a:before{ content:""; display:inline-block; height:16px; width:1px; border-right:1px solid #cccccc; position:absolute; right:0px; top:50%; transform:translatey(-50%); } .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; } [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%; } */ .divtext h3{ padding-left:35px; width:calc(100% - 35px); margin:auto; font-size:21px; line-height:1.4em; color:#222222; font-family:Noto Sans TC;font-weight:300; position:relative; margin-bottom:20px; } .divtext h3:before{ content:''; display:inline-block; width:26px; height:4px; background-color:#C24823; position:absolute; left:0px; top:15px; } .divtext h2{ width:100%; display:inline; line-height:1.6em; font-family:Noto Sans TC;font-weight:400; font-size:28px; color:#222222; margin-bottom:0px; padding-bottom:0px; background-image:url(https://yida.yida-design.com.tw/color1.webp); background-size:100% 10px; background-repeat:repeat-x; background-position:0px 100%; } .divtext h2:after{ content:''; display:block; height:30px; } .divtext img{ max-width:100%; } .divtext p{ width:100%; margin:auto; font-size:16px; color:#222222; line-height:1.8em; } .divtext ul{ width:calc(100% - 20px); margin:0px; margin-left:-20px; font-size:16px; color:#222222; line-height:1.8em; } .divtext ol{ width:calc(100% - 20px); margin:0px; margin-left:-20px; font-size:16px; color:#222222; line-height:1.8em; } .divlist_img{ margin-bottom:30px; } .purl{ width:100%; margin:auto; font-size:15px; color:#555555; font-family:poppins; position:relative; margin-bottom:20px; } .purl a{ display:inline-block; padding-left:30px; padding-right:30px; padding-top:12px; padding-bottom:12px; color:white; letter-spacing:1px; font-size:15px; background-color:#0099CC; position:absolute; right:0px; top:10px; transform:translatey(-50%); } .h1case{ width:100%; margin:auto; font-size:30px; color:#464646; letter-spacing:1px; margin-bottom:20px; line-height:1.3em; margin-top:40px; font-family:Noto Sans TC;font-weight:400; } .divimg_rec{ aspect-ratio:2; width:100%; margin-bottom:20px; box-shadow:0px 0px 6px #66666; border:1px solid #cccccc; } .divimg_rec1{ width:calc(100% + 4px); } .divimg_sub svg{ width:100%; } .divimg_sub{ aspect-ratio:2; position:relative; width:calc(14.2% - 4px); float:left; cursor:pointer; margin-right:4px; } .divimg_sub img{ position:absolute; left:0px; top:0px; width:100%; height:100%; object-fit:cover; object-position:50% 50%; background-size:cover; background-position:50% 50%; } .divimg_root svg{ width:100%; } .divimg_root{ aspect-ratio:2; position:relative; width:100%; display:none; } .divimg_root img{ position:absolute; left:0px; top:0px; width:100%; height:100%; object-fit:cover; object-position:50% 0%; background-size:cover; background-position:50% 50%; } .divcase_rec{ width:1000px; margin:auto; padding-bottom:60px; max-width:calc(100% - 100px); } .divmenu{ display:inline-block; padding:20px; padding-bottom:15px; border:1px solid #cccccc; background-color:#f8f8fb; } .h2{ width:100%; margin:auto; line-height:1.2em !important; font-size:14.5px !important; color:#333333; font-weight:bold !important; padding-bottom:10px !important; cursor:pointer; } .h3{ width:calc(100% - 25px) !important; padding-left:25px !important; margin:auto; line-height:1.2em !important; font-size:14.5px; color:#333333 !important; padding-bottom:10px !important; position:relative; cursor:pointer; } .h3:before{ content:''; display:inline-block; width:6px; height:6px; background-color:#666666; border-radius:50%; position:absolute; left:10px; top:6px; } .divmenu{ margin-bottom:0px; } .divover_ntext{ overflow-x:auto; } .divtext table{ max-width:100%; background-color:#cccccc; } .divtext td{ padding:10px; background-color:white; } .imgv1{ width:calc(50% - 12px); margin-left:0px; margin-right:10px; padding-bottom:8px; padding-top:0px; } .imgh1{ width:100%; padding-top:0px; padding-bottom:8px; } .divimg_video{ width:100%; position:relative; left:0px; top:0px; } .divimg_video img{ width:100%; } .divimg_video svg{ width:100%; } .divposvideo{ position:absolute; left:0px; top:0px; width:100%; height:100%; } .divposvideo iframe{ width:100%; height:100%; } @media screen and (min-width:1px) and (max-width: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:790px) and (max-width:1330px){ .divcrumb{ width:calc(100% - 60px); } } @media screen and (min-width:1px) and (max-width:790px){ .divcrumb{ width:calc(100% - 40px); } .divfix{ display:none; } .divfix_m1{ display:block; } .divfix_m11{ display:block; } .divfix_line{ display:block; } } @media screen and (min-width:1px) and (max-width:460px){ .divcrumb{ font-size:14px; } .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; } .divtext h2{ font-size:22px; background-size:100% 8px; } .divtext h2:after{ height:20px; } .divtext h3{ font-size:19px; width:calc(100% - 30px); padding-left:30px; margin-bottom:15px; } .divtext h3:before{ content:''; display:inline-block; width:22px; height:4px; background-color:#C24823; position:absolute; left:0px; top:12px; } .h1case{ font-size:24px; } .divimg_sub{ width:calc(20% - 4px); } .divmenu{ padding:15px; padding-bottom:10px; } } @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); } } @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)); } } @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: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:1px) and (max-width:1230px){ .div1200{ width:100%; } } @media screen and (min-width:600px) and (max-width:750px){ .divimg_rec{ aspect-ratio:1.6; } .divimg_root{ aspect-ratio:1.6; } .divimg_sub{ aspect-ratio:1.6; } } @media screen and (min-width:1px) and (max-width:600px){ .divimg_root{ aspect-ratio:1.4; } .divimg_sub{ aspect-ratio:1.4; } .divimg_rec{ aspect-ratio:1.4; } .divcase_rec{ width:calc(100% - 60px); margin:auto; max-width:calc(100% - 60px); } } @media screen and (min-width:460px) and (max-width:660px){ .divimg_sub{ width:calc(16.6% - 4px); } } @media screen and (min-width:550px) and (max-width:600px){ .purl a{ padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; } } @media screen and (min-width:1px) and (max-width:550px){ .purl a{ position:relative; right:auto; display:block; top:auto; width:80px; text-align:center; transform:none; margin-top:10px; } .purl a{ padding-left:15px; padding-right:15px; padding-top:8px; padding-bottom:8px; } }