/* 縮小失敗。正在傳回未縮小的內容。 (56,10): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,173): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,216): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,548): run-time error CSS1039: Token not allowed after unary operator: '-animate-repeat' (56,596): run-time error CSS1039: Token not allowed after unary operator: '-animate-repeat' (56,758): run-time error CSS1039: Token not allowed after unary operator: '-animate-repeat' (56,814): run-time error CSS1039: Token not allowed after unary operator: '-animate-repeat' (56,979): run-time error CSS1039: Token not allowed after unary operator: '-animate-repeat' (56,1035): run-time error CSS1039: Token not allowed after unary operator: '-animate-repeat' (56,1167): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1204): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1337): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1382): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1518): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1563): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1699): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1744): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1880): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,1925): run-time error CSS1039: Token not allowed after unary operator: '-animate-delay' (56,2070): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2121): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2267): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2320): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2466): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2517): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2663): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,2714): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,14975): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,15028): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,21568): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,21622): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,27845): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,27899): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,47653): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,47707): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,48614): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,48668): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,57077): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (56,57128): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration' (1662,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1663,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1664,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1665,37): run-time error CSS1039: Token not allowed after unary operator: '-R' (1665,58): run-time error CSS1039: Token not allowed after unary operator: '-position' (1665,83): run-time error CSS1039: Token not allowed after unary operator: '-size' (1665,100): run-time error CSS1038: Expected hex color, found '#0000' (1665,135): run-time error CSS1039: Token not allowed after unary operator: '-size' (1665,148): run-time error CSS1039: Token not allowed after unary operator: '-position' (1665,173): run-time error CSS1039: Token not allowed after unary operator: '-size' (1665,208): run-time error CSS1039: Token not allowed after unary operator: '-R' (1665,229): run-time error CSS1039: Token not allowed after unary operator: '-position' (1665,254): run-time error CSS1039: Token not allowed after unary operator: '-size' (1665,262): run-time error CSS1038: Expected hex color, found '#0000' (1665,297): run-time error CSS1039: Token not allowed after unary operator: '-position' (1665,313): run-time error CSS1039: Token not allowed after unary operator: '-size' (1665,332): run-time error CSS1039: Token not allowed after unary operator: '-size' (2223,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (2292,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (3255,41): run-time error CSS1030: Expected identifier, found ' ' (3255,41): run-time error CSS1031: Expected selector, found ' ' (3255,41): run-time error CSS1025: Expected comma or open brace, found ' ' */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, /*p,*/ blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, /*em,*/ img, ins, kbd, q, s, samp, small, strike, /*strong,*/ /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*table, caption, tbody, tfoot, thead, tr, th, td,*/ article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @charset "UTF-8";/*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.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)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.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)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(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)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(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)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}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)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}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)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}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(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{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(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} /*! Pushy - v1.1.0 - 2017-1-30 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ /* Menu Appearance */ .pushy { position: fixed; width: 260px; height: 100%; top: 0; z-index: 9999; background: #000; overflow: auto; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } .pushy a { display: block; color: #fff; /*padding: 15px 30px;*/ text-decoration: none; } .pushy a:hover { color: #FFF; } .pushy ul:first-child { margin-top: 10px; } .pushy.pushy-left { left: 0; } .pushy.pushy-right { right: 0; } /*ginny*/ .pushy-content { visibility: hidden; color:#fff; letter-spacing:2px; font-weight:bolder; font-size:0.95em; } .pushy-content img{width:auto;} .pushy-content ul{ padding-left:0; list-style-type:none; } .pushy-content ul li{ } .pushy-content .p-bottom{ border-bottom:1px #999 solid; } /* Menu Movement */ .pushy-left { -webkit-transform: translate3d(-260px, 0, 0); -ms-transform: translate3d(-260px, 0, 0); transform: translate3d(-260px, 0, 0); } .pushy-open-left #container, .pushy-open-left .push { -webkit-transform: translate3d(130px, 0, 0); -ms-transform: translate3d(130px, 0, 0); transform: translate3d(130px, 0, 0); } .pushy-right { -webkit-transform: translate3d(260px, 0, 0); -ms-transform: translate3d(260px, 0, 0); transform: translate3d(260px, 0, 0); } .pushy-open-right #container, .pushy-open-right .push { -webkit-transform: translate3d(-130px, 0, 0); -ms-transform: translate3d(-130px, 0, 0); transform: translate3d(-130px, 0, 0); } .pushy-open-left .pushy, .pushy-open-right .pushy { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .pushy-open-left .pushy-content, .pushy-open-right .pushy-content { visibility: visible; } /* Menu Transitions */ #container, .pushy, .push { transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); } .pushy-content { transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); } /* Site Overlay */ .site-overlay { display: none; } .pushy-open-left .site-overlay, .pushy-open-right .site-overlay { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; background-color: rgba(0, 0, 0, 0.5); -webkit-animation: fade 500ms; animation: fade 500ms; } /*@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }*/ /* Submenu Appearance */ .pushy-submenu { /* Submenu Buttons */ /* Submenu Icon */ } .pushy-submenu ul { padding:10px; padding-left: 0px; transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out; } .pushy-submenu ul .pushy-link { transition: opacity 0.2s ease-in-out; } .pushy-submenu button { width: 100%; color: #fff; padding: 15px 0px; text-align: left; background: transparent; border: 0; font-size:1em; font-weight:bolder; background-color:#333; padding-left:20px; letter-spacing:2px; font-family: "微軟正黑體", "Microsoft JhengHei", "PMingLiU", "新細明體", "MingLiU", "標楷體", "DFKai-sb", Arial, Helvetica, FreeSans, sans-serif; } .pushy-submenu button:hover { color: #FFF; } .pushy-submenu > a, .pushy-submenu > button { position: relative; } /*.pushy-submenu > a::after, .pushy-submenu > button::after { content: ''; display: block; height: 11px; width: 8px; position: absolute; top: 50%; right: 15px; background: url("../img/arrow.svg") no-repeat; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: transform 0.2s; }*/ /* Submenu Movement */ .pushy-submenu-closed ul { /* max-height: 0;*/ overflow:hidden; /*visibility: hidden;*/ } .pushy-submenu-closed .pushy-link { /*opacity: 0;*/ } .pushy-submenu-open { /* Submenu Icon */ } .pushy-submenu-open ul { max-height: 1000px; overflow:hidden; } .pushy-submenu-open .pushy-link { opacity: 1; } .pushy-submenu-open a::after, .pushy-submenu-open button::after { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .pushy-link { /*width: 100%;*/ color: #fff; padding: 15px 0px; text-align: left; border: 0; font-size:1em; font-weight:bolder; background-color:#333; padding-left:20px; border-bottom:1px #999 solid; } .pushy-submenu .pushy-link{ display:inline-block; width:30%; float:left; background: transparent; border-bottom:0; padding:3px 0 2px 20px; } /*# sourceMappingURL=pushy.css.map */ #menu-footer{ padding:20px; font-weight:lighter; } #menu-footer a{ display:inline-block; } @charset "utf-8"; /* 修正粗體 */ @font-face { font-family: "微軟正黑體修正"; unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */ font-style: normal; font-weight: bolder; src: local("Yu Gothic"), local("MS Gothic"); } /* 一般粗細的時候改回微軟正黑 */ @font-face { font-family: "微軟正黑體修正"; unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */ font-style: normal; font-weight: normal; src: local("Microsoft JhengHei"); } /*If you want to prevent scrolling of your site when Pushy is open just add overflow-x: hidden and height: 100% to both the html & body tags.*/ html, body{ overflow-x: hidden; /*height: 100%;*/ -webkit-overflow-scrolling: touch; } /* outline-off */ a { cursor:pointer; color:#000;} a:link {text-decoration: none; } a:visited {text-decoration: none; } a:hover {text-decoration: none; } a:active {text-decoration: none; } .left {float:left;} .right {float:right;} .yellow-text{color:#f5d83c;} .red-text{color:#e62117;} .clear { display:block; clear:both; height:0;} #arrow-left-w{ position:absolute; top:13%; z-index:3; left:0; cursor:pointer; } #arrow-right-w{ position:absolute; top:13%; z-index:3; right:0; cursor:pointer; } .arrow-left-y{ position:absolute; top:40%; z-index:3; left:0; cursor:pointer; } .arrow-right-y{ position:absolute; top:40%; z-index:3; right:0; cursor:pointer; } .onair, .read{ position:absolute; top:0; z-index:3; right:0; } .onair img, .read img { width: auto;} .hhmmss{ position:absolute; bottom:0; z-index:3; right:0; color:#FFF; background-color:rgba(0,0,0, 0.8); font-size:0.8em; padding:0 5px; } .play-icon { position: absolute; top: 32%; left: 38%; z-index:3; } .play-icon img { width: 70%; opacity: 0.7; filter: alpha(opacity=70); } .small-gray-text{ color:#666; font-size:0.75em; letter-spacing:0; margin-left:5px; margin-right:5px; } .white-box{background-color:#FFF;} .gray-box{background-color:#f6f6f6;} .yellow-box{background-color:#f5d83c;} /*这行代码对于大多数嵌入网页的图片+视频有效，所以可以写成*/ img, object { max-width: 100%; border:0;} /*老版本的IE不支持max-width，所以只好写成*/ img { width: 100%; border:0;} img { -ms-interpolation-mode: bicubic; border:0;} body { font-family: "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", "PMingLiU", "新細明體", "MingLiU", "標楷體", "DFKai-sb", Arial, Helvetica, FreeSans, sans-serif; margin: 0 auto; font-size: 1em; overflow-x: hidden; line-height: 1.8em; background-color: #fff; color: #333; } body img{border:0px;} #wrap { width: 100%; margin: 0 auto; display:block; position:relative; text-align:justify; word-wrap: break-word; word-break: break-all; } /*header*/ #pc-header-inner { margin: 0 auto; height: 61px; padding: 10px 3% 15px 3%; letter-spacing: 2px; display: none; z-index: 5; width: 94%; background-color: #FFF; position: relative; -webkit-box-shadow: 0 4px 7px rgba(0,0,0,0.1); -moz-box-shadow: 0 4px 7px rgba(0,0,0,0.1); box-shadow: 0 4px 7px rgba(0,0,0,0.1); background: #fdf8db; /* Old browsers */ background: -moz-linear-gradient(top, #fdf8db 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #fdf8db 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #fdf8db 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf8db', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #pc-header-inner-g { margin: 0 auto; background-color: #fcdb59; color: #000; height: 40px; letter-spacing: 2px; display: none; padding: 15px 3% 5px 3%; letter-spacing: 2px; width: 94%; } #pc-header-inner a, #pc-header-inner-g a {color:#19191a;} #pc-header-inner img{ width:auto;} #pc-header-inner-g img{ width:auto; margin:0 5px;} #pc-header ul{ padding:0; position:relative; margin-top:10px; } #pc-header ul li{ float:left; list-style:none; padding:10px 20px 20px 0; } #pc-header ul li a { color: #222; } #pc-header ul li a:hover { /*font-weight:lighter;*/ padding-bottom:5px; /*border-bottom:4px solid #fedfcf;*/ } #pc-header ul li a:hover .note{ animation: bounce 0.25s alternate infinite; position:relative; } /*設定動畫內的時間軸囉 記得keyframes這邊要打s*/ @keyframes bounce { 0% { top: 0em; } 100% { top: -0.2em; } } .note{ font-size: 0.8em; font-weight: bold; } .main-menu { cursor: pointer; display: inline-block; } /* 主選單的樣式 */ .sub-menu { color: #222; background-color: #f6f6f6; top: 50px; padding: 10px 10px; position: absolute; width: 195px; height: auto; z-index: 99; border-radius: 10px; border: 4px solid #fbf1be; } /* 下拉清單的樣式 */ .sub-menu a { padding: 3px 3px 6px 3px; margin: 0px 5px; text-align: center; display: block; float: left; width: 50px; font-size: 1em; color: #545454; } /* 下拉清單每一列的樣式 */ #pc-header ul li .sub-menu a:hover {color:#f28f00; border:0px;} .top-search{ height: 26px; padding: 1px 5px; color: #ccc; background-color: #fff; background-image: none; border: 1px solid #ccc; font-size:0.9em; border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right:0; vertical-align: middle; } .top-search-button{ height: 30px; width:30px; border: 1px solid #ccc; border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left:-7px; background-image: url("../images/search.png"); background-repeat:no-repeat; background-position:center; vertical-align: middle; cursor:pointer; margin-right:10px; background-color:#CCC; } /*mobile-LOGO*/ #mobile-logo-inner{ margin: 0 auto; background: #fff; text-align:center; padding:5px 0; position:fixed; top:0; z-index:5; width:100%; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.16); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.16); box-shadow: 0 0 7px rgba(0,0,0,0.16); } #mobile-logo-inner-margin{height:70px;} #mobile-logo-inner img { width:auto;} .logo-ss{ display:inline-block; width:65%; margin: 0 auto; padding: 0; padding-top:5px; } /*BANNER SLIDER*/ #banner-sliderarea{ margin: 0 auto; border-radius: 30px; border: 10px solid white; box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.1); } .btn-green{ font-family:Arial; border-radius: 4px; border:1px solid #8dc63f; margin:10px 5px; color:#8dc63f; font-weight:bold; text-align:center; font-size:0.9em; padding:3px; display:block; } a:hover .btn-green { color:#fff; background-color:#8dc63f; } .btn-green-mirror{ font-family:Arial; border-radius: 4px; border:1px solid #8dc63f; margin:10px 5px; color:#fff; background-color:#8dc63f; text-align:center; font-size:0.9em; padding:3px; display:block; } a:hover .btn-green-mirror { color:#8dc63f; background-color:#f7f7f7; } /*首頁BANNER*/ #indexnews-inner{ margin: 0 auto; width:100%; position:relative; background-color:#f7f7f7; } .m100{margin-top:15px; display:none;} .areatitle{ text-align:left; font-size:1.6em; color:#545454; letter-spacing:3px; padding:25px 0; padding-left:5px; } /*紅色我要捐款*/ #red-donation { position: fixed; z-index: 6; background-color: #e83229; right: 5px; top: 5px; line-height: 1.3em; font-weight: bold; width: 65px; height: 65px; border-radius: 2em; /*border-top-right-radius: 0;*/ text-align: center; -webkit-animation-name: donationhere; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 3s; } @keyframes donationhere { 45% {transform: scale(1);} 50% {transform: scale(1.1);} 55% {transform: scale(1);} 60% {transform: scale(1.1);} 65% {transform: scale(1);} } #red-donation a{ display:block; color:#fff; margin-top: 13px;} .pcreddonation { -webkit-animation-name: donationhere; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 3s; } /*我要捐款偏鄉-學校指定捐款*/ #donation-title{ background-color: #fcdb59; position: relative; text-align: center; padding: 10px; margin-bottom: 50px; } #donation-title-w { border: 1px solid white; } #donation-title-w h2{ font-size: 1.5em; font-weight: bolder; padding: 10px; color: #535252; } #donation-title-w h2::before { position: absolute; content: ""; margin-left: -28px; width: 26px; height: 26px; background: url(../images/heart.png)no-repeat; } .donation-box { text-align: left; letter-spacing: 1px; color: #333; text-align: justify; text-justify: distribute; padding-bottom: 30px; border-bottom: 1px solid #ddd; margin-bottom: 30px; } .donation-box .pic { margin-bottom: 20px; position: relative; } .donation-box .pic img { width: auto; border-radius: 20px; overflow: hidden; transition: transform 0.5s; } .donation-box .pic img{width:auto;border-radius: 20px; transition: transform 0.5s; } .donation-box:hover .pic img { transform: scale(1.1); } .donation-box .text .news_title { color: #e78800; font-size: 1.3em; margin-bottom: 10px; } .donation-box .text .news_summary { color: #7a6a55; } .target-box { background-color: #fef5e7; position: relative; padding: 10px } .flex {display: flex;} .justify-between {justify-content: space-between;} .items-end {align-items: flex-end;} .border-4 {border-width: 4px;} .absolute {position: absolute;} .rounded {border-radius: 0.25rem;} .m-crowdfunding-status__bar { background: #e5e5e6; border-radius: 14px; height: 24px; margin: 10px 0 10px; overflow: hidden; position: relative; width: 100%; } .m-crowdfunding-status__bar-inner { background: #f47402; border-radius: 14px; height: 100%; left: 0; position: absolute; top: 0; width: 0; } .text-xsl {font-weight: bolder;} .text-xsr {font-weight: bolder;} .text-zec-orange { color: #f47402; font-weight:bolder; text-align: right; } .donation-buttom a{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */ background: #f6f8f9; /* Old browsers */ background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */ border: 1px solid #f47402; border-radius:5px; text-align: center; font-size: 2em; font-weight: bolder; border-radius: 20px; cursor: pointer; -webkit-filter: drop-shadow(0.5px 1px 2px rgba(0, 0, 0, 0.7)); filter: drop-shadow(0.5px 1px 1.5px rgba(0, 0, 0, 0.7)); padding: 30px 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .donation-buttom a:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b8e1fc+0,a9d2f3+10,90bae4+25,90bcea+37,90bff0+50,6ba8e5+51,a2daf5+83,bdf3fd+100;Blue+Gloss+%231 */ background: #b8e1fc; /* Old browsers */ background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */ } /*大影片*/ #video-big{ margin: 0 auto;margin-bottom:20px; position:relative; } /* Flexible iFrame */ .Flexible-container { position: relative; padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0;left: 0; width: 100%;height: 100%; } /*董事會名單*/ .directors{text-align:left; font-size:1.125em; margin-bottom:40px;} .directors img{width:auto;} .directors_name{ margin-left:2%;} .directors_name span{display:block; float:left; width:100px; margin:10px auto; text-align:center; } /*基金會宗旨*/ picture img{width:auto;} .text_paragraph{text-align:left; font-size:1.125em; line-height:2em;letter-spacing:2px; margin-bottom:60px;} .text_paragraph img{width:auto;} .subtitle{color:#e78800; font-weight:bold; font-size:1.2em; margin:20px auto;} /*董事長的話*/ #president_photo img{width:auto;} #president_text{text-align:justify; word-wrap: break-word; word-break: break-all;} /*最新活動優惠*/ .news-inner{ margin: 0 auto; width:100%; position:relative; } .news{ margin: 0 auto; text-align:center; width:96%; position:relative; } .news .title{ font-size:1.6em; background:url(../images/bg-grayline.png) center repeat-x; padding:15px 0; text-align:left; margin-bottom:30px; } .news .title img{width:auto;} .news .title .text{ background-color:#FFF; padding-left:5px; padding-right:5px; color:#545454; letter-spacing:3px; } .news .fncnews-content .raw-style h2 { font-size: 1.2em; padding: 0 20px; background-color: #fcdb59; } .btn-gray{ font-family:Arial; border-radius: 4px; border:1px solid #555; margin:20px 0; color:#555; text-align:center; font-size:0.9em; padding:5px; display:block; } .btn-gray:hover{ border:1px solid #7a6a55; background-color:#7a6a55; color:#fff; } .news-box{ text-align:left; letter-spacing:1px; color:#333; text-align:justify; /*讓文字齊行*/ text-justify:distribute; /*讓文字左右齊行*/ padding-bottom:30px; margin-bottom:30px; } .news_h { margin-top: 50px; position:relative; } .news-box2{ text-align:left; letter-spacing:1px; color:#333; text-align:justify; /*讓文字齊行*/ text-justify:distribute; /*讓文字左右齊行*/ padding-bottom:30px; margin-bottom:30px; margin: 10px; } .news-inner-index .news-box {border-bottom:0; } .news-box .pic,.news-box2 .pic{ margin-bottom:20px; position:relative; } .news-box .pic img,.news-box2 .pic img{ width: auto; border-radius: 20px; overflow: hidden; transition: transform 0.5s; } .news-box:hover .pic img, .news-box2:hover .pic img { transform: scale(1.1); } /* Style the tab */ .tab { overflow: hidden; margin-top: 40px; margin-bottom: 80px; } .l_button,.r_button{ position: relative; } .l_button{ content: ''; position: absolute; display: inline-block; background-image: url("../images/cd-icon-arrow-2.svg"); background-repeat: no-repeat; background-position: center center; border: 1px solid #e6e6e6; border-radius: 0.25em; left: 0%; background-color: whitesmoke; padding: .8em .8em; font-size: 1.6rem; cursor: pointer; } .r_button { content: ''; position: absolute; display: inline-block; background-image: url("../images/cd-icon-arrow-2.svg"); background-repeat: no-repeat; background-position: center center; border: 1px solid #e6e6e6; border-radius: 0.25em; right: 0%; background-color: whitesmoke; padding: .8em .8em; font-size: 1.6rem; cursor: pointer; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .l_button:hover,.r_button:hover { background-color: #ababab; } .l_button:active,.r_button:active { background-color: #ababab; } /* Style the buttons inside the tab */ .tab button { /*background-color: inherit;*/ border: none; outline: none; cursor: pointer; padding: 8px 6px; transition: 0.3s; border-radius: 15px; width: 60%; border: 3px solid #e9b542; color: #FF5722; background: linear-gradient(to bottom, #f7fbfc 0%, #dcdddf 40%, #fcfdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ font-weight: bold; font-size: 1.2em; margin: 0 auto; } /* Change background color of buttons on hover */ .tab button:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #fda237 0%,#e58108 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; } /* Create an active/current tablink class */ .tab button.active { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #fda237 0%,#e58108 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; } /**ALL**/ .button0 { /*background-color: inherit;*/ border: none; outline: none; cursor: pointer; padding: 8px 6px; transition: 0.3s; border-radius: 15px; width: 60%; border: 3px solid #e9b542; color: #FF5722; background: linear-gradient(to bottom, #f7fbfc 0%, #dcdddf 40%, #fcfdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ font-weight: bold; font-size: 1.2em; margin: 0 auto; } .button0:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #f2825b 0%,#e55b2b 50%,#f07146 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border:3px solid #f2825b!important; color:white; font-weight: bold; } .button0.active { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #f2825b 0%,#e55b2b 50%,#f07146 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #f2825b!important; } /**公告**/ #button1 { /*background-color: inherit;*/ border: none; outline: none; cursor: pointer; padding: 8px 6px; transition: 0.3s; border-radius: 15px; width: 60%; border: 3px solid #e9b542; color: #FF5722; background: linear-gradient(to bottom, #f7fbfc 0%, #dcdddf 40%, #fcfdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ font-weight: bold; font-size: 1.2em; margin: 0 auto; } #button1:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #ff1a00 0%, #cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #ff1a00; } #button1.active { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #ff1a00 0%, #cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #ff1a00; } /**捐助新聞個案**/ #button2 { /*background-color: inherit;*/ border: none; outline: none; cursor: pointer; padding: 8px 6px; transition: 0.3s; border-radius: 15px; width: 60%; border: 3px solid #e9b542; color: #FF5722; background: linear-gradient(to bottom, #f7fbfc 0%, #dcdddf 40%, #fcfdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ font-weight: bold; font-size: 1.2em; margin: 0 auto; } #button2:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #7ec4d8 0%, #48a5bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #7ec4d8; } #button2.active { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #7ec4d8 0%, #48a5bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #7ec4d8; } /**專案個案**/ #button3 { /*background-color: inherit;*/ border: none; outline: none; cursor: pointer; padding: 8px 6px; transition: 0.3s; border-radius: 15px; width: 60%; border: 3px solid #e9b542; color: #FF5722; background: linear-gradient(to bottom, #f7fbfc 0%, #dcdddf 40%, #fcfdff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ font-weight: bold; font-size: 1.2em; margin: 0 auto; } #button3:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #a5b458 0%, #73880a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #a5b458; } #button3.active { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7fbfc+0,add9e4+100 */ background: linear-gradient(to bottom, #a5b458 0%, #73880a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:white; font-weight: bold; border:3px solid #a5b458; } /* Style the tab content */ .tabcontent { /* display: none;*/ padding: 6px 5px; border-top: none; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; } /* Fade in tabs */ @-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} } #newsc_boxbg {position: relative;} #newsc_box{position: relative;padding-bottom: 20px;} .red_announcement { padding: 2px 13px; font-size: 1.1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cc0000+0,cc0000+100;Red+Flat */ background: linear-gradient(to bottom, #ff1a00 0%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 10px; color: white; width: 60px; text-align: center; margin-bottom: 10px; } .orange_report { padding: 2px 13px; font-size: 1.1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cc0000+0,cc0000+100;Red+Flat */ background: linear-gradient(to bottom, #f4a52f 0%,#f77915 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 10px; color: white; width: 80px; text-align: center; margin-bottom: 10px; } .blue_donate { padding: 2px 13px; font-size: 1.1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cc0000+0,cc0000+100;Red+Flat */ background: linear-gradient(to bottom, #7ec4d8 0%,#48a5bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 10px; color: white; width: 115px; text-align: center; margin-bottom: 10px; } .green_activity { padding: 2px 13px; font-size: 1.1em; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cc0000+0,cc0000+100;Red+Flat */ background: linear-gradient(to bottom, #a5b458 0%,#73880a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 10px; color: white; width: 80px; text-align: center; margin-bottom: 10px; } .pin_to_top { position: absolute; width: 123px; z-index: 1; right:0px; overflow: hidden; height: 91px; /*border-top: 91px solid #f5b317; border-left:123px solid transparent; border-radius: 0 20px 0 10px;*/ } .news-box .pic .pin_to_top img {border-radius: 0 20px 0 20px!important;} /*YOYO服務欄位圖片縮放*/ .article-little-box .pic{ overflow: hidden; } .article-little-box .pic img{ transition: transform 0.5s; } .article-little-box:hover .pic img { transform: scale(1.1); } /*YOYO服務欄位圖片縮放 END*/ .news-box .text .news_title{ color:#1764d7; font-size:1.2em; margin-bottom:10px; font-weight: bold; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .news-box .text .news_summary{ color: #3b3b3b; font-size: 1.1em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; font-weight: bold; } .news-box2 .text .news_title{ color:#1764d7; font-size:1.3em; margin-bottom:10px; font-weight: bold; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .news-box .text .news_hint,.news-box2 .text .news_hint{ color:#eb372a; font-size:0.9em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .news-box2 .text .news_summary{ color:#3b3b3b; font-size:1.1em; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; font-weight: bold; } .video_play { position: absolute; z-index: 999; top: 37%; left: 44%; } /*聯絡YOYO*/ .contactimg img{ width:auto;border-radius: 20px;} /*FOOTER*/ #footer-inner{ width: 100%; margin: 0 auto; display:block; position:relative; background-color:#fdfae5; letter-spacing:0px; padding:15px 10px 15px 10px; color:#000; } #footer-inner a {color:#000;} #footer-inner img { width:auto;} #footer{ margin: 0 auto; } #footer p{ margin: 0 auto; } .footer-abc-margin{ /*margin-bottom: 30px;*/ margin-left:10px; margin-right:20px; box-sizing: border-box; } .footer-b div{width:50%;float: left;} .footer-c .copyright{ font-size:0.75em; line-height:1.5em; text-align:left; color:#7a6a55; } .footer-c img{margin-right:10px;} .footer-line{display:none;} /*.footer-0{ font-size:0.75em; text-align:center; line-height:1.5em; } .footer-2{display:block; font-size:0.875em;} */ /*我要捐款*/ .news .article-little-box .donation_title { background: none; } .article-little-box .donation_title { letter-spacing: 0; font-size: 1.25em; font-weight: bold; line-height: 1.3em; box-sizing: border-box; } .news .donation_title { font-size: 1.6em; padding: 15px 0; text-align: left; /*margin-bottom: 30px;*/ height: 100px } .boxstyle { margin-bottom: 30px !important; } .preface { width: auto; border-radius: 4px; margin: 20px 0; padding: 5px 20px; position: relative; text-align: justify; word-wrap: break-word; word-break: break-all; background: url(../images/preface-img.png) right bottom no-repeat,url(../images/preface-img2.png) bottom no-repeat,linear-gradient(135deg, #ffb7c5 0%,#fee4e7 100%); } /* Style inputs, select elements and textareas */ input[type=text], input[type=number], input[type=tel], input[type=email], input[type=password], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; margin: 0 5px; } /* Style the label to display next to the inputs */ label { padding: 12px 12px 12px 0; display: inline-block; } /* Style the submit button */ input[type=button] { padding: 12px 20px; cursor: pointer; background-color: transparent; } input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; } .btn-yellow{ font-family:Arial; border-radius: 4px; border:1px solid #f5d83c; color:#000; text-align:center; font-size:0.9em; display:block; } .btn-yellow:hover{ border:1px solid #f5d83c; background-color: #f5d83c; } /* Style the container */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25, .col-75, input[type=button] { width: 100%; margin-top: 0; } .rradio input[type="radio"] { display: none; } .rradio input[type="radio"]:checked+label { background-color: #f5d83c; } .rradio input[type="radio"]+label { display: inline-block; background-color: #ddd; cursor: pointer; padding: 5px 10px; margin: 5px 5px 5px 0; } .amountradio input[type="radio"] { display: none; } .amountradio input[type="radio"]:checked + label { background-color: #f5d83c; } .amountradio input[type="radio"] + label { display: inline-block; background-color: white; border: 2px solid #f5d83c; cursor: pointer; padding: 5px 10px; margin: 5px 5px 5px 0; width: 85px; text-align: center; letter-spacing: 1px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .atm-info{ border-radius: 4px; border:1px solid #fcd742; margin-bottom: 20px; } .atm-title{ background-color: #fcd742; font-weight: bolder; padding: 0 15px; font-size:1.1em; } .atm-p{ margin: 5px 0; } /*芳名錄*/ .break-table, .break-table thead, .break-table tbody, .break-table th, .break-table td, .break-table tr { display: block; } .break-table{width: 100%;} .break-table thead{display: none;} .break-table tr { display: block; border: #fcd742 1px solid; margin-bottom: 10px; background: #ffffff; } .break-table td { border: none !important; border-bottom: 1px solid #eee !important; position: relative; /* padding-left: 35% !important;*/ white-space: normal; text-align: left; /* width: 65%; */ display: flex; align-content: center; flex-wrap: nowrap; align-items: baseline; flex-direction: column; } .break-table td:before { content: attr(data-title); } .break-table td:before { /*position: absolute;*/ top: 2px; left: 6px; width: 100%; /* padding-right: 10px; */ white-space: nowrap; text-align: left; font-weight: bold; color: #1a1a1a; font-size: 0.9em; background-color: #fcd742; } /*頁數*/ .page-area{ padding:20px 10px; margin:0 auto; text-align:center; margin-bottom:20px; } .page-area a{ display:inline-block; margin:0 5px; padding:0 10px; text-align:center; border: 1px #f5d83c solid; /*border-radius: 20px;*/ background-color: white; } .page-area .now{ background-color:#f5d83c; color:#000; } /*控制圖片顯示比例16:9*/ .target-img { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; /*margin-bottom:5px;*/ position: relative; } .target2-img { position: relative; margin: 35px; } .target-img img { width: 100%; } /*Smooth Page Scroll to Top */ .scrollup { width: 40px; height: 50px; text-indent: -9999px; opacity: 0.85; position: fixed; bottom: 0px; right: 5%; /*display: none;*/ background: url(../images/icon_top.png) no-repeat center top #000; z-index:50; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } /*FOOTER STICKER BOTOOM*/ /*#container {min-height: calc(100vh - 70px);} #footer-inner {height: 40px;}*/ /*波浪*/ .curved { --size: 12px; --R: calc(var(--size)*1.28); --position: top; -webkit-mask: radial-gradient(var(--R) at left 50% var(--position) calc(1.8*var(--size)),#000 99%,#0000 101%) left calc(50% - 2*var(--size)) var(--position) 0/calc(4*var(--size)) 100%, radial-gradient(var(--R) at left 50% var(--position) calc(-.8*var(--size)),#0000 99%,#000 101%) left 50% var(--position) var(--size)/calc(4*var(--size)) 100% repeat-x; background: #f9f7eb; } /*首頁影片區*/ #video-big_boxbg {position: relative;} #video-big_box{position: relative;padding-bottom: 20px;} /*about*/ #video-big_about{position: relative;} #video-big_about h2{ font-size: 1.2em; padding: 10px; background-color: white; border-radius: 15px; font-weight: bold; text-align: center; } #video-big_about p{ font-size: 1.1em; padding: 10px; } /*五大服務主軸*/ #serve_boxbg { position: relative; background-color: #fbf5cb; } #serve_box{position: relative;padding-bottom: 20px;} .tltle {position: relative; width: auto;} #serve { padding: 50px 10px 0px 10px; display: grid; grid-template-columns: 1fr 1fr; } #serve_box #serve a { transition: transform 0.4s; } #serve_box #serve a:hover{ transform: scale(1.1); } .title, .title1-2 { position: relative; width: auto; } #serve span { /*padding: 16px 24px;*/ margin: 0 auto; padding: 5px; display: block; } .serve_title { color: #e70d7c; font-weight: bold; font-size: 1.3em; text-align: center; padding: 10px; margin-top: 10px; } #serve a span p { font-size: 0.87em; color: #3055b1; text-align: center; padding-bottom: 30px; margin: 0; } /*首頁最新消息*/ #inews_boxbg { position: relative; background-color: #fbf5cb; } #inews_box{position: relative;padding-bottom: 20px;} .tltle,.title2 {position: relative; width: auto;} #inews { padding: 50px 0px 0px 0px; display: grid; /*grid-template-columns: 1fr 1fr 1fr;*/ } .inews_title { color:#1764d7; font-weight: bold; font-size: 1.3em; text-align: left; padding: 0 10px; margin-top: 10px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; margin-bottom: 10px; } #inews span p { font-size: 1.1em; color: black; text-align: left; padding-bottom: 30px; padding: 0 10px; margin: 0; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; margin-bottom: 10px; } #inews span { /*padding: 16px 24px;*/ margin: 0 10px; } #inews span img{ /*padding: 16px 24px;*/ border-radius: 20px; } #inews span img{ /*padding: 16px 24px;*/ border-radius: 20px; overflow: hidden; transition: transform 0.5s; width: auto; } #inews span img:hover{ transform: scale(1.1); } .more {position: relative; width: 93px; float: right;right: 10px;margin-top: 10px;} #pc-header-inner-g #pc-header-g a img { overflow: hidden; transition: transform 0.4s; } #pc-header-inner-g #pc-header-g a img:hover{ transform: scale(1.3); } /*合作夥伴*/ #partnerc_boxbg {position: relative;} #partner,#pw_partner{position: relative;padding-bottom: 20px;} #partner-box { padding: 50px 0px 0px 0px; display: grid; /* grid-template-columns: 1fr 1fr 1fr;*/ } #partner-box span { position: relative; background:url(../images/partner_bg.jpg) ; border-radius: 20px; margin: 10px 10px 40px 10px; webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); } #partner-box span .pic{ position: relative; border: 2px dashed #a39f9f; margin: 10px; border-radius: 20px; display:flex; align-items:center; justify-content:center; height: 138px; } .target2-img{ position:relative; margin: 30px; } .target2-img img { width: auto; overflow: hidden; transition: transform 0.5s; } .target2-img img:hover { transform: scale(1.1); } .target3-img{ position:relative; margin: 30px 30px 0 30px; } .target3-img img { width: 100%; border-radius: 20px; overflow: hidden; transition: transform 0.5s; } .target3-img img:hover { transform: scale(1.1); } .partner_rightimg { position: absolute; width: 61px; right: 0; z-index: 1; top: -25px; } /*公益夥伴*/ #pw_partnerc_boxbg {position: relative;} #pw_partner-box { padding: 50px 0px 0px 0px; display: grid; position: relative; } #pw_partner-box .pwpartner { position: relative; background:#fbeece url(../images/p_bg.png)no-repeat ; border-radius: 20px; /*margin: 10px 10px 40px 10px;*/ webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); padding: 2px; } #pw_partner-box .pwpartner .pic{ position: relative; border: 2px dashed #a39f9f; margin: 10px; border-radius: 20px; } .title3 { position: relative; width: auto; } .pic_text{ font-size: 1.6em; text-align: center; color: #df721b; padding: 10px 20px 30px 20px; font-weight: bold; } .pw_partner_text { font-size: 1.1em; text-align: justify; word-wrap: break-word; word-break: break-all; margin: 20px 15px 15px 15px; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pw_box {position: relative;margin: 10px;} #pw_partner-box div.pw_b a,.pw_b a{ text-align: center; color: white; border-radius:15px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fceabb+0,ffa029+50,fcb736+51,fbdf93+100 */ background: linear-gradient(to bottom, #e9c973 0%,#ffa029 50%,#fcb736 51%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ padding: 15px 40px; margin: 0 auto; font-size: 1.5em; font-weight: bold; webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; } #pw_partner-box div.pw_b,.pw_b a { text-align: center; margin-bottom: 20px; } #pw_partner-box div.pw_b a:hover,.pw_b a:hover { color: black; box-shadow: 0px 2px 10px 5px #9E9E9E; } /*.pw_b a{ color: white; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .pw_b a:hover { color: black; }*/ /*個人申請*/ #applyc_boxbg {position: relative;} #apply { position: relative; padding-bottom: 20px; } #apply-box-illustrate,#apply-box-illustrate2 { padding: 50px 0px 0px 0px; display: grid; position: relative; } #apply-box-illustrate span,#apply-box-illustrate2 span { position: relative; border-radius: 25px; margin: 10px 10px 40px 10px; webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); background-color: #ec803e; } .illustrate2 { background-color: #fbeece!important; } .illustrate3 { color: #df721b!important; border: 1.5px dashed black!important; } #apply-box-illustrate span .pic,#apply-box-illustrate2 span .pic{ position: relative; border: 1.5px dashed white; margin: 5px; border-radius: 20px; display:flex; align-items:center; justify-content:center; height: 68px; text-align: center; color: white; font-weight: bold; font-size: 1.4em; } #apply-box,#apply-box2 { padding: 50px 0px 0px 0px; display: grid; position: relative; } #apply-box .apply,#apply-box2 .apply { position: relative; background:#fbeece url(../images/apply_b1.jpg)repeat ; border-radius: 20px; /*margin: 10px 10px 40px 10px;*/ webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); padding: 2px; } #apply-box .apply2 { position: relative; background:#fbeece url(../images/apply_b2.jpg)repeat ; border-radius: 20px; /*margin: 10px 10px 40px 10px;*/ webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); padding: 2px; } #apply-box .apply3 { position: relative; background:#fbeece url(../images/apply_b3.jpg)repeat ; border-radius: 20px; /*margin: 10px 10px 40px 10px;*/ webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); padding: 2px; } #apply-box .apply .pic, #apply-box .apply2 .pic, #apply-box .apply3 .pic{ position: relative; /*border: 2px dashed #a39f9f;*/ margin: 10px; border-radius: 20px; } .applyc_title2 { font-size: 1.1em; padding: 10px 10px 0 10px; margin-top: 20px; text-align: left; text-align: justify; word-wrap: break-word; word-break: break-all; } .pic_text{ font-size: 1.5em; text-align: center; color: #df721b; padding: 10px 10px 30px 10px; font-weight: bold; } .apply_text { font-size: 1.2em; margin: 20px; text-align: center; padding: 0.1em 1em; border: transparent; box-shadow: 2px 2px 4px rgba(0,0,0,0.4); background: dodgerblue; color: white; border-radius: 4px; } .apply_text:hover { background: rgb(2,0,36); background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%); } .apply_text:active { transform: translate(0em, 0.2em); } .apply-box {position: relative;margin: 10px;} .apply_box {position: relative; width: 241px; margin: 0 auto;margin-bottom: 20px;} .target4-img{ position:relative; /*margin: 30px 30px 0 30px;*/ width: 110px; margin: 0 auto; } .target4-img img { width: 100%; border-radius: 20px; overflow: hidden; transition: transform 0.5s; } .target4-img img:hover { transform: scale(1.1); } /*活動花絮*/ #activity_photos_boxbg {position: relative;} #activity_photos { position: relative; padding-bottom: 20px; } #activity_photos-box { padding: 50px 0px; /*display: grid; position: relative;*/ } #activity_photos-box h1 { color: #f12fbd; font-weight: bold; font-size: 1.5em; text-align: center; margin: 20px; } .activity_photo_h1 { margin-top: 100px; } #owl-demo .item, #owl-demo2 .item { margin: 3px; width: 100%; /* height: 0; padding-bottom: 56.25%;*/ overflow: hidden; border-radius: 20px; webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.26); box-shadow: 0 2px 10px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.26); background-color: #9E9E9E; } #owl-demo .item img, #owl-demo2 .item img { display: block; max-width: 100%; height: 100%; object-fit: contain; } /*檢舉信箱*/ #report_boxbg {position: relative;} #report { position: relative; padding-bottom: 20px; } #report-box { padding: 50px 0px 0px 0px; position: relative; } #report-box div.reportbg { position: relative; border-radius: 20px; /*margin: 10px 10px 40px 10px;*/ webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); background-color: #fbeece; } #report-box span .form{ position: relative; border: 1.5px dashed black; margin: 10px; border-radius: 15px; text-align: left; } #report-box span .form p { /*text-align: justify; word-wrap: break-word; word-break: break-all; padding: 20px;*/ font-size: 1.2em; } .form_p { text-align: justify; word-wrap: break-word; word-break: break-all; padding: 20px; font-size: 1.2em; } .form_btitle { background-color: #df721b; padding: 10px 20px; font-weight: bold; font-size: 1.3em; margin: 20px; color: white; } .form_tit { font-size: 1.2em; padding: 10px 20px; } .form_box,.form_box2 {padding: 0 20px 20px 20px;} .form_box input,.form_box textarea { /*width: 100%;*/ color: var(--black); font-size: 1.2em; font-weight: 400; height: 2.875rem; border-radius: 15px; background-color: #faf7f4; outline: none; transition: border-color 0.16s, background-color 0.16s; /*padding: 0 20px;*/ margin: 0; letter-spacing: 0.1em; } .form_box textarea {height:180px;padding: 10px 20px;} #report-box .report { position: relative; background:#fbeece url(../images/apply_b1.jpg)repeat ; border-radius: 20px; /*margin: 10px 10px 40px 10px;*/ webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); padding: 2px; } /*.form_box input{display: block;}*/ .date {position: relative; width: 24px;height:25px;margin: 15px 20px;} /* input[type="file"] { position: fixed; right: 100%; bottom: 100%; display: none; }*/ .custom-file-upload { } .form_box .radio label { display: inline-block; cursor: pointer; width: 99.5%; height: 2.875rem; border-radius: 15px; background-color: #faf7f4; outline: none; transition: border-color 0.16s, background-color 0.16s; padding: 0; border: 1px solid #ccc; } /*.form_box label { display: inline-block; cursor: pointer; width: 99.5%; height: 2.875rem; border-radius: 15px; background-color: #faf7f4; outline: none; transition: border-color 0.16s, background-color 0.16s; padding: 0; border: 1px solid #ccc; } .form_box label img { width: 24px; height: 26px; margin: 10px 20px; }*/ .form_box2 input { width: 100%; color: var(--black); font-size: 1.2em; font-weight: 400; height: 2.875rem; border-radius: 15px; background-color: #faf7f4; outline: none; transition: border-color 0.16s, background-color 0.16s; padding: 0 20px; margin: 0; } .form_box2 img { margin-top: 10px; float: left; } .form_box2 .change { margin-top: 10px; font-size: 1.2em; vertical-align: middle; margin-left: 15px; float: left; cursor: pointer; text-decoration: underline; } /*傳愛足跡*/ #trace_boxbg { position: relative; background-color: #b0e6e4; } #trace_box{position: relative;padding-bottom: 20px;} #trace {position: relative;} .results { font-size: 18px; border-radius: 5px; background-color: #ff9800; border: 2px solid #f57c00; color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); transition: 0.3s; cursor: pointer; text-align: center; width: 150px; margin: 0 auto; margin-bottom: 5px; margin-top: 20px; } .results:hover { background-color: #f57c00; } .results:active { transform: translateY(2px); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); } .dropbtn11 { display: inline-block; color: #FF5722; text-align: center; text-decoration: none; transition: 0.3s; } .dropbtn11_2 { display: inline-block; color: white; text-align: center; text-decoration: none; transition: 0.3s; } .tab li.dropdown11 a { text-align: center; text-decoration: none; transition: 0.3s; } .tab li .dropdown11-content a:hover,.tab li .dropdown22-content a:hover{ background-color: #e9b542; color: white; } .tab li .dropdown22-content a.active { background-color: #e9b542; color: white; } .dropbtn11,.dropbtn11_2 { padding: 0 20px; } .dropdown11:hover .dropbtn11 { color: white; } .tab li.dropdown11,.tab li.dropdown22 { display: inline-block; } .dropdown11-content { display: none; position: absolute; z-index: 1; } .dropdown22-content { /*display: none;*/ position: absolute; z-index: 1; } .dropdown11-content a,.dropdown22-content a { padding: 5px 10px; text-decoration: none; text-align: left; margin: 20px 0px; /*border: 1px #9E9E9E solid; background-color: #f9f9f9; box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.2);*/ color:#696666; } .dropdown11-content a:hover,.dropdown22-content a:hover {background-color: #e9b542;color: white;} .dropdown11:hover .dropdown11-content,.dropdown22:hover .dropdown22-content { display: block; } /*感謝的話*/ #theme_img { position: relative; } #text_line { position: relative; padding: 5px 40px; background-color: #e4d2c6; border-radius: 20px; width: 150px; margin: 0 auto; margin-bottom: 30px; margin-top: 30px; } #theme_hr { width: 95%; margin: 0 auto; position: relative; top: -50px; z-index: -1; height: 2px; background-color: #ddd; } #company { display: grid; } #company-more { display: none; } .panel-open { text-align: center; max-width: 100px; margin-left: auto; margin-right: auto; padding: 5px 35px; border-radius: 20px; cursor: pointer; margin-bottom: 40px; } .panel-close { text-align: center; max-width: 100px; margin-left: auto; margin-right: auto; padding: 0 30px 10px 30px; border-radius: 20px; cursor: pointer; } .panel-open { background-color: #e4d2c6; } .panel-open:hover { background-color: #ffe96a; } .panel-close img { width: 30px; height: 30px; animation: move 2s ease-in-out; animation-iteration-count: infinite; } #contnet_ct, #contnet2_ct { margin-top: 50px; } #contnet3_ct { margin-top: 80px; } #contnet4_ct { padding-top: 0px; } @media screen and (max-width:740px) { #company, #company-more { padding-left: 0px; } } @media screen and (max-width:540px) { #company, #company-more { } } @keyframes move { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } } #thankyou_imgtext { position: relative; } #thankyou_box { position: relative; } #thankyou_box img { position: relative; } .thankyou_text { position: relative; left: 0; text-align: left; text-align: justify; word-wrap: break-word; word-break: break-all; } .thankyou_text h1 { font-size: 1.3em; font-weight: bold; } .thankyou_p { text-indent: 40px; line-height: 1.8em; } /*句式只在viewport 寬度不小於320px才生效*/ @media screen and (min-width: 320px) { .donation_title { width: 95%; margin: 0 auto; padding-top: 30px; position: relative; } #owl-demo .item, #owl-demo2 .item { height: 179px; } .title1-2 { width: 310px; margin: 0 auto; padding-top: 30px; } /*感謝的話*/ .thankyou_text { font-size: 1.1em; margin-top: -230px; padding: 0 10px; } .donation2-box .text { /* float: left;*/ text-align: left; background-color: #e4d2c6; border-radius: 20px; padding: 40px 20px; line-height: 2em; margin: 20px 0; word-wrap: break-word; word-break: normal; text-align: justify; text-justify: inter-ideograph; font-size: 1.1em; } .donation22-box .text { float: left; text-align: left; background-color: white; border: 2px solid #e4d2c6; border-radius: 20px; padding: 40px 20px; line-height: 2em; margin: 20px 0; word-wrap: break-word; word-break: normal; text-align: justify; text-justify: inter-ideograph; font-size: 1.1em; } .name { text-align: right; } /*我要捐款偏鄉-學校指定捐款*/ .text-xsl { font-size: 0.9em; letter-spacing: -0.5px; } .text-xsr { font-size: 0.9em; letter-spacing: -0.5px; } .donation-buttom a{padding: 15px 20px; display: block;} /*BANNER SLIDER*/ #banner-sliderarea{ width:90%; margin-top: 20px; } /*波浪*/ .curved { margin-top: 30px; } .fundraising_title { padding-top: 50px; } /*大影片*/ #video-big{ padding: 10px; } /*about*/ #video-big_boxbg { background-position: 20% 55%; } #video-big_about{margin: 20px;} /*五大主軸*/ #apply_title { font-size: 1.5em; color: #F75501; padding: 20px; text-align: center; font-weight: bold; } #apply-box-illustrate::after{ content:"申請流程-個人"; position: absolute; font-size: 2em; left: 22%; top: 3%; } #apply-box-illustrate2::after{ content:"申請流程-組織"; position: absolute; font-size: 2em; left: 22%; top: 3%; } #serve_boxbg {background-position: 50% 50%;} /*#apply-box-illustrate span {margin-top: 50px;}*/ .title { width: 220px; margin: 0 auto; padding-top: 30px; } .apple_bg { background-color:#faebd7a8; margin: 0 auto; border: 1px dashed black; border-radius: 50px; margin-top: 50px; width:95%; } /*#serve span { width: 306px;}*/ .news-box .text .news_title,.news-box2 .text .news_title{ height:57px; } /*右邊捐款、求助*/ #right_donate {display:none;} #right_help { width: 45px; /*text-indent: -9999px;*/ position: fixed; bottom: 150px; right: 98px; cursor: pointer; z-index: 12; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; display:flex; align-items:center; justify-content:center; overflow: hidden; transition: transform 0.4s; border-radius: 15px; box-shadow: inset 0px 0px 0px 0px #ABABAB, 5px 5px 14px 1px #242424; -webkit-box-shadow: inset 0px 0px 0px 0px #ABABAB, 1px 1px 6px 0px #242424; -moz-box-shadow: inset 0px 0px 0px 0px #ABABAB, 5px 5px 14px 1px #242424; -o-box-shadow: inset 0px 0px 0px 0px #ABABAB, 5px 5px 14px 1px #242424; border: 1.5px solid white; } #right_help { right: 28px; } #right_donate:hover ,#right_help:hover{ transform: scale(1.15);} /*公益夥伴*/ .title2 { width: 220px; margin: 0 auto; padding-top: 30px; } .title3 { width: 295px; margin: 0 auto; padding-top: 30px; } .title3 img {margin: 0 auto;} #pw_partner-box div.pw_b { margin-top: 30px; } /*檢舉信箱*/ .form_box .labeltext {font-size: 1.2em;} .join_in { padding: 20px; background-color: #f9f7eb; border-radius: 20px; width: 240px; margin: 0 auto; } /*個人申請*/ #apply-box-illustrate span,#apply-box-illustrate2 span { /*width: 256px; margin: 0 auto;*/ margin-bottom: 50px; } #apply-box-illustrate span::after,#apply-box-illustrate2 span::after{ content:"⬇"; position: absolute; font-size: 3.5em; left: 45%; bottom: -50%; } #apply-box-illustrate #ss::after,#apply-box-illustrate2 #ss::after{ content:none; } #apply-box-illustrate #sss,#apply-box-illustrate2 #sss{ margin-top:50px; } /*最新消息*/ .tab li.dropdown11 a { /* display: block;*/ } .dropdown11-content,.dropdown22-content { left: 70px; } .dropdown11-content a,.dropdown11-content a { margin: 3px 0px; padding: 5px 10px; } .tab li.dropdown11 { padding: 0 14%; } #contactUs #countrySelection ul li,#contactUs2 #countrySelection2 ul li { margin: 12px 5px; } #contactUs #countrySelection #countrySelection-wrapper,#contactUs2 #countrySelection2 #countrySelection2-wrapper { padding: 0 10px; } #contactUs,#contactUs2{width: 60%;left: -220px;margin-top: 55px;} } /*句式只在viewport 寬度不小於360px才生效*/ @media screen and (min-width: 360px) { #owl-demo .item, #owl-demo2 .item { height: 210px; } /*about*/ #video-big_about h2{ width: 85%; margin: 0 auto; } /*最新消息*/ .tab li.dropdown11 { /*padding: 0 19%;*/ } .dropdown11-content,.dropdown22-content { /*left: 65px;*/ } #contactUs,#contactUs2{left: -195px;} /*公益夥伴*/ #report-box { display: grid; } } @media screen and (min-width: 375px) { #serve a span p { font-size: 1.04em; } } /*句式只在viewport 寬度不小於400px才生效*/ @media screen and (min-width: 400px) { #serve a span p { font-size: 1.1em; } #owl-demo .item, #owl-demo2 .item { height: 225px; } .logo-ss{padding:7px 0;} #mobile-logo-inner{width:96%;padding:5px 2%;} .amountradio{width:375px;} /*BANNER SLIDER*/ #banner-sliderarea{ width:85.6%; margin-top: 20px; } /*about*/ #video-big_about h2{ width: 75%; } /*最新消息*/ .dropdown11-content,.dropdown22-content { left: 85px; } } /*句式只在viewport 寬度不小於425px才生效*/ @media screen and (min-width: 425px) { #owl-demo .item, #owl-demo2 .item { height: 239px; } /*最新消息*/ .dropdown11-content,.dropdown22-content { /*left: 75px;*/ /**/} .dropdown11-content a,.dropdown22-content a { padding: 5px 20px; } .thankyou_text { margin-top: -290px; } #contactUs,#contactUs2{left: -235px;} } /*句式只在viewport 寬度不小於500px才生效*/ @media screen and (min-width: 500px) { #owl-demo .item, #owl-demo2 .item { height: 140px; } /*BANNER SLIDER*/ #banner-sliderarea{ width:87.5%; } /*最新消息*/ #contactUs,#contactUs2{width: 77%;} /*about*/ #video-big_about h2{width: 65%;} /*個人申請*/ #apply-box-illustrate::after,#apply-box-illustrate2::after{ left: 26%; } /*最新消息*/ .tab li.dropdown11 { padding: 0 26%; } .dropdown11-content,.dropdown22-content { left: 120px; } } /*句式只在viewport 寬度不小於600px才生效*/ @media screen and (min-width: 600px) { #owl-demo .item, #owl-demo2 .item { height: 168px; } /*BANNER SLIDER*/ #banner-sliderarea{ width:90%; } /*最新消息*/ .tab li.dropdown11 { padding: 0 30%; } .dropdown11-content,.dropdown22-content { left: 120px; } #contactUs,#contactUs2{/*width: 47%;*/left: -191px;} /*about*/ #video-big_about h2{width: 55%;} } /*句式只在viewport 寬度不小於700px才生效*/ @media screen and (min-width: 700px) { /*董事會名單*/ .directors{ width:600px; margin:0 auto; margin-bottom:100px;} .directors_title{float:left; width:175px;} .directors_name{ margin-left:20px;float:left; width:405px;} .directors_name span{display:block; float:left; width:100px; margin:10px auto; text-align:center; } /*BANNER SLIDER*/ #banner-sliderarea{ width:92%; } /*頁數*/ .page-area a{margin:0 10px;} /*FOOTER*/ .footer-b div{width:40%;} } /*句式只在viewport 寬度不大於767px才生效*/ @media screen and (max-width: 767px) { .newscopyright{display: none;} .buttonclose{display: none;} } /*句式只在viewport 寬度不小於768px才生效*/ @media screen and (min-width: 768px) { .applyc_title2 { padding: 20px 20px 0 20px; } #owl-demo .item, #owl-demo2 .item { height: 216px; } .newscopyright2{display: none;} .title1-2 { width: 500px; } /*BANNER SLIDER*/ #banner-sliderarea{ margin-top: 40px; } /*我要捐款偏鄉-學校指定捐款*/ .tb {width: 60%;float: left;} .text-xsl { font-size: 1em; letter-spacing: -0.2px; } .text-xsr { font-size: 1em; letter-spacing: -0.2px; } .donation-buttom a{padding: 30px 20px;} .donation-buttom a{ float: right; width: 30%; } /*about*/ #video-big_about h2{width: 45%; font-size: 1.3em;} /*五大主軸*/ .title { width: 320px;} #serve { padding: 50px 0px 0px 0px; grid-template-columns: 1fr 1fr; } #serve a span { width: 266px;padding: 0;} #apply-box-illustrate::after,#apply-box-illustrate2::after { left: 36%; } #apply-box-illustrate2 span::after{ left: 47%; } /*首頁最新消息*/ #inews {grid-template-columns: 1fr 1fr;} #inews_box { width: 98%; margin: 0 auto; } #newsc_boxbg {padding-bottom: 50px;} .news-box, .news-box2 { float: left; margin: 1.5%; width: 47%; height: 470px; /*padding-bottom: 10px;*/ } .more {bottom: -360px;} .news-box .text .news_summary,.news-box2 .text .news_summary{height:87px;} /* Style the buttons inside the tab */ .tab button,#button0,#button1,#button2,#button3 { width:18.5%; float:left; margin: 0 5px; } /*合作夥伴*/ #partner-box { grid-template-columns: 1fr 1fr; } /*公益合作夥伴*/ #pw_partner-box { grid-template-columns: 1fr 1fr; padding: 50px 0px 60px 0px; } .title2 { width: 320px; } .title3 { width: 680px; } .pw_box { width: 345px; margin: 0 auto; } /*最新消息*/ .tab li.dropdown11 a { /*display: inline-block;*/ } .dropdown11,.dropdown22{ padding: 0 18px; } .dropdown22{ padding: 0 19px; } .tab { display:flex; align-items:center; justify-content:center; } .l_button,.r_button {display: none;} .buttonclose{display: block;} .dropdown11-content,.dropdown22-content {left: 40px;/*top: 95px;*/} .dropdown11-content,.dropdown22-content { /*position: absolute; min-width: 640px; left: -50px;*/ } .tab li.dropdown11 { padding: 0; } .dropdown11-content a,.dropdown22-content a { margin: 30px 0px; padding: 5px 10px; } #contactUs #countrySelection ul li,#contactUs2 #countrySelection2 ul li { margin: 16px 10px; } #contactUs,#contactUs2 { width: auto; left: 0; margin-top: 60px; } /*個人申請*/ #apply-box-illustrate span,#apply-box-illustrate2 span { width: 460px; margin: 0 auto; margin-bottom: 60px; /*margin-top: 50px;*/ } #apply-box { grid-template-columns: 1fr 1fr; } #apply-box2 { grid-template-columns: 1fr; } .apply_box { /*width: 345px; margin: 0 auto;*/ } /*活動花絮*/ #activity_photos-box { /*grid-template-columns: 1fr 1fr;*/ } /*感謝的話*/ .thankyou_text { padding: 0 20px; margin-top: -230px; } /*檢舉信箱*/ .form_box2 input { width: 150px; float: left; } .form_box2 img { float: left; margin-left: 20px; } .form_box2 .change { margin-left: 15px; float: left; margin-top: 5px; } } /*句式只在viewport 寬度不小於800px才生效*/ @media screen and (min-width: 800px) { #owl-demo .item, #owl-demo2 .item { height: 150px; } #mobile-logo-inner-margin{display:none;} #mobile-logo-inner{position:relative;} /*董事長的話*/ #president_photo{float:left;width:40%;} /*#president_text{float:right;margin-left:3%;width:57%;}*/ /*聯絡YOYO*/ .contactimg{ float:left; width:390px;} .contacttext{float:left; margin-left:10px;} .contacttext p{line-height:30px;} .contacttext .subtitle{margin:0px auto;} /*FOOTER*/ .footer-b div{width:35%;} } /*句式只在viewport 寬度不小於900px才生效*/ @media screen and (min-width: 900px) { #owl-demo .item, #owl-demo2 .item { height: 168px; } /*聯絡YOYO*/ .contactimg{ width:450px;} .contacttext{margin-left:20px;} .contacttext p{line-height:36px;} /*芳名錄*/ .break-table { display: block; width: 99.9%; background-color: #ffffff; border-collapse: collapse; margin-bottom: 20px; } .break-table thead { display: table-header-group; vertical-align: middle; border-color: inherit; } .break-table tr { border: 1px solid #ccc; margin-bottom: 10px; background-color: #ffffff; display: table-row; vertical-align: inherit; } .break-table th { display: table-cell; vertical-align: inherit; font-weight: bold; background-color: #fcd742; color: #000; border: #fcd742 1px solid; text-align: center; width:inherit; } .break-table tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } .break-table td { color: #666666; border: #ddd 1px solid; text-align: center; font-size:0.9em; position: relative; white-space: normal; display: table-cell; padding-left: 0% !important; width:inherit; } .break-table td:before { display: none; } .break-table td:before { top: 0; left: 0; width: 0%; padding-right: 0; display: none; } #pw_partner-box div.pw_b { margin-top: 40px; } /*FOOTER*/ .footer-a, .footer-b, .footer-c{ /*float:left;*/ line-height:1.9em; } /*.footer-a{width: 33%;}*/ .footer-b{width: 30%;padding-top: 25px;} /*.footer-c{width: 23%;padding-top: 5px;margin-left:2%;}*/ .footer-b div{width:40%; margin-left:5%;margin-right:5%;} .footer-line{ display: block; float:left; border-left: #b0b0b0 1px solid; height: 350px; } } /*句式只在viewport 寬度不小於1002px才生效*/ @media screen and (min-width: 1002px) { .applyc_title2 { font-size: 1.2em; } .subclassify-area .article-little-box . donation_title { height: 60px; font-size: 1em; line-height: 1.2em; font-weight: 500; } .donation_title { padding-top: 40px; } .fundraising_title { padding-top: 60px; } #owl-demo .item, #owl-demo2 .item { height: 141px; } /*感謝的話*/ .thankyou_text { padding: 0 40px; font-size: 1.2em; margin-top: -250px; } .donation2-box, .donation22-box { display: grid; } .donation2-box .text, .donation22-box .text { padding: 40px 60px; font-size: 1.25em; } #pc-header-inner, #pc-header-inner-g{display:block; } #mobile-logo-inner{display:none;} .m100{display:block;} /*BANNER SLIDER*/ #banner-sliderarea{margin: 0 auto;/*margin-top:-15px;*/width:95%; margin-top: 30px;} /*紅色我要捐款*/ #red-donation{ display: none; } /*我要捐款偏鄉-學校指定捐款*/ .donation-box .pic { width: 49%; float: left; } .donation-box .text { width: 49%; float: right; } .target-box { padding: 20px; } .text-xsl,.text-xsr,.text-zec-orange { font-size: 1.2em; } /*首頁影片區*/ #video-big_boxbg { background-position: 70% 35%; padding-top: 50px; } #video-big_about { margin: 10px 20px; float: left; width: 452px; } #video-big_about h2 { width: 300px; font-size: 1.3em; margin: unset; } #video-big_about p { font-size: 1.2em; } /*大影片*/ #video-big { width: 490px; float: left; } /*最新活動 / 優惠*/ .news-box .pic{/*width:49%;float:left;*/} .news-box .text{/*width:49%;float:right;*/} .news-box2 .pic{/*width:49%;float:left;*/} .news-box2 .text{/*float:right;*/} .news-inner-index{width:50%;float:left;} .news-inner-index .news-box .pic{width:100%;float:none;} .news-inner-index .news-box .text{width:100%;float:none;} /*FOOTER*/ /*.footer-line{height: 280px;}*/ .footer-c .copyright{text-align:right;margin-top: -20px;} /*FOOTER STICKER BOTOOM*/ #container {min-height: calc(100vh - 310px);} /*#footer-inner {height: 280px;}*/ /* Floating column for labels: 25% width */ .col-25 { float: left; width: 25%; margin-top: 6px; text-align: right; } /* Floating column for inputs: 75% width */ .col-75 { float: left; width: 75%; margin-top: 18px; } /*五大主軸*/ .title, .title1-2 { padding-top: 40px; } #serve { grid-template-columns: 1fr 1fr 1fr 1fr; } #serve a span { width: 206px; } #serve a span p {font-size: 1.2em;} .serve_title {font-size: 1.4em;} .apple_bg { width:auto;} #apply-box-illustrate::after,#apply-box-illustrate2::after{ font-size: 2.5em; left: 36%; top: 5%; } /*首頁最新消息*/ #inews {grid-template-columns: 1fr 1fr 1fr;} #inews span p {font-size: 1.2em;} .inews_title {font-size: 1.4em;} .news-box, .news-box2 { width: 30.33%; padding-bottom: 0; height: 480px; } .news-box2 .text .news_title{ font-size:1.4em; } .news-box2 .text .news_summary{ font-size:1.2em;} .more {bottom: 0;} /*最新消息*/ .news-box .text .news_title{ font-size:1.3em; } .dropdown11-content,.dropdown22-content { /*min-width: 840px; left: -140px;*/ left:52px; /*top: 98px;*/ } #contactUs #countrySelection ul li,#contactUs2 #countrySelection2 ul li { margin: 16px 24px; } .dropdown11-content a,.dropdown22-content a { padding: 5px 16px; } /*合作夥伴*/ #partner-box { grid-template-columns: 1fr 1fr 1fr; } /*公益合作夥伴*/ .title2 { width: 360px; padding-top: 60px; } .title3 { width: 730px; padding-top: 60px; } #pw_partner-box span{ width: 439px; margin: 0 auto; } .pw_box { width: 445px; } .pw_partner_text { font-size: 1.2em; } #pw_partner-box div.pw_b a,.pw_b a{ /*font-size: 1.8em;*/ } /*個人申請*/ #apply-box { grid-template-columns: 1fr 1fr 1fr 1fr; /*padding: 50px 60px;*/ } #apply-box-illustrate { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; padding: 50px 10px 0 10px; } #apply-box-illustrate2 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /*padding: 50px 10px 0 10px;*/ } #apply-box-illustrate span {width: 55px; height:470px;margin-top: 50px;} #apply-box-illustrate2 span {width: 55px; height:470px;margin-top: 50px;} #apply-box-illustrate span::after{ content:"⮕"; position: absolute; font-size: 3.5em; left: 110%; top: 45%; } #apply-box-illustrate2 span::after{ content:"⮕"; position: absolute; font-size: 3.5em; left: 95%; top: 45%; } #apply-box-illustrate span .pic {padding: 10px; height: 438px;} #apply-box-illustrate2 span .pic {padding: 10px; height: 438px;} .apply_box { /*width: 445px;*/ } .apply_text { font-size: 1.2em; } .dropbtn11 { padding: 0 40px; } /*活動花絮*/ #activity_photos-box h1 { font-size: 1.6em; } /*檢舉信箱*/ #report-box span .form p { font-size: 1.4em; } .form_box .textlabel {font-size: 1.4em;} .form_btitle { font-size: 1.4em; width: 90px; text-align: center; } .form_tit,.form_box input,.form_box2 input,.form_box textarea { font-size: 1.4em;} .form_p {font-size: 1.4em;} #right_donate { width: 45px; /*text-indent: -9999px;*/ position: fixed; bottom: 150px; right: 98px; cursor: pointer; z-index: 12; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; display:flex; align-items:center; justify-content:center; overflow: hidden; transition: transform 0.4s; border-radius: 15px; box-shadow: inset 0px 0px 0px 0px #ABABAB, 5px 5px 14px 1px #242424; -webkit-box-shadow: inset 0px 0px 0px 0px #ABABAB, 1px 1px 6px 0px #242424; -moz-box-shadow: inset 0px 0px 0px 0px #ABABAB, 5px 5px 14px 1px #242424; -o-box-shadow: inset 0px 0px 0px 0px #ABABAB, 5px 5px 14px 1px #242424; border: 1.5px solid white; } } /*句式只在viewport 寬度不小於1024px才生效*/ @media screen and (min-width: 1024px) { #owl-demo .item, #owl-demo2 .item { height: 144px; } /*BANNER SLIDER*/ /*#banner-sliderarea{ width:89%; }*/ /*首頁影片區*/ #video-big { width: 47.8%; } #video-big_about { margin: 10px 10px; width: 48.2%; } .dropdown11-content { /*min-width: 940px; left: -190px;*/ /*top: 95px;*/ left: 65px; } /*最新消息*/ .dropbtn11 { padding: 0 43px; } } /*句式只在viewport 寬度不小於1200px才生效*/ @media screen and (min-width: 1200px) { .applyc_title2 { margin: 0 auto; width: 1024px; margin-top: 40px; font-size: 1.3em; } #owl-demo .item, #owl-demo2 .item { height: 168px; } #pc-header,#pc-header-g, #pc-logo, #pc-nav, #main, #footer, #indexnews, #about, #faq, #video-big_box,#serve,#inews,#inews_box,#inews_box,#partner,#pw_partner,#apply,#activity_photos,#report,#trace_box,.news{ margin: 0 auto; width:1024px; } .news-inner-index{margin: 0 auto; width:1024px; float: none;} .news-inner-index .news{ width: 480px;float:left; margin: auto 15px;} .areatitle{padding-left:25px;} /*BANNER SLIDER*/ /*#banner-sliderarea{ width:81%; }*/ .dropbtn11 { padding: 0 46px; } .dropdown11-content,.dropdown22-content {left: 80px;} /*最新活動 / 優惠*/ .news-box .text .news_summary { /*min-height: 178px;*/ } /*董事會名單*/ .directors{ padding-right:100px;} /*聯絡YOYO*/ .contactimg{ width:480px;} .contacttext{margin-left:40px;} .contacttext .subtitle{margin:10px auto;} /*我要捐款偏鄉-學校指定捐款*/ .donation-box .text .news_summary { min-height: 178px; } .tb { width: 63%; } /*首頁最新消息*/ .more {right: 0px;} #serve a span { width: 226px; } } /*句式只在viewport 寬度不小於1400px才生效*/ @media screen and (min-width: 1400px) { .applyc_title2 { font-size: 1.4em; width: 1380px; } .donation_title { padding-top: 50px; } .fundraising_title { padding-top: 70px; } #owl-demo .item, #owl-demo2 .item { height: 196px; } #pc-header,#pc-header-g, #pc-logo, #pc-nav, #marquee-box, #main, #footer, #index3product, #indexnews, #about, #faq, #video-big_box,#inews,#inews_box,#partner,#pw_partner,#apply,#activity_photos,#report,#trace_box,.news, .news-inner-index{ width:1380px; } .news-inner-index .news{ width: 660px;} #pc-header{font-size:1.25em;} #pc-header ul li a{padding:20px 6px 20px 6px;} #pc-header ul li .sub-menu a{padding:3px 3px 6px 3px; margin:0px 5px; text-align:center; font-size:0.8em; } /* 下拉清單每一列的樣式 */ #pc-header ul li .sub-menu a:hover {padding:3px 3px 6px 3px; margin:0px 5px; text-align:center; font-size:0.8em; border-bottom:0px ;} /* 下拉清單每一列的樣式 */ /*首頁影片區*/ #video-big_boxbg { background-position: 50% 55%; } #video-big_about { width: 49.3%; } #video-big_about h2 { width: 340px; font-size: 1.5em; } #video-big_about p { font-size: 1.3em; } /*五大主軸*/ .title, .title1-2 { padding-top: 50px; } #serve { width: 1380px; } #serve a span { width: 296px; } #serve a span p {font-size: 1.3em;} .serve_title {font-size: 1.5em;} #apply-box-illustrate span::after{left: 120%;} #apply-box-illustrate2 span::after{left:110%;} /*首頁最新消息*/ #inews span p {font-size: 1.3em;} .inews_title {font-size: 1.5em;height: 58px;} #inews_box{/*width: 58%;*/} .news-box2 .text .news_title{ font-size:1.5em; } .news-box2 .text .news_summary{ font-size:1.3em;} /*董事長的話*/ #president_photo{float:left;width:30%; margin-left: 5%;} /*最新消息*/ .news-box .text .news_title{ font-size:1.4em; } .dropbtn11 { padding: 0 79px; } .dropdown11-content,.dropdown22-content { /*min-width: 1640px; left: -530px;*/ left: 267px; } .dropdown11-content a,.dropdown22-content a {margin: 30px 0;padding: 10px 13px;} /*合作夥伴*/ #partner-box span {margin: 15px;} /*公益合作夥伴*/ #pw_partner-box span {} .title2 { /*width: 360px;*/ padding-top: 80px; } .title3 { padding-top: 80px; } .pic_text {font-size: 1.53em;} .pw_partner_text {font-size: 1.3em;} #pw_partner-box div.pw_b a,.pw_b a{ /*font-size: 2em;*/ } /*個人申請*/ .apply_text {font-size: 1.4em;} #apply-box { padding: 50px 150px; } #apply-box-illustrate { padding: 50px 160px 0 160px; } #apply-box-illustrate2 { padding: 50px 100px 0 100px; } #apply-box-illustrate::after{left: 40%;} #apply-box-illustrate2::after{left: 40%;} /*感謝的話*/ #thankyou_box { height: 680px; } .thankyou_text { bottom: 100px; top: auto; font-size: 1.3em; padding: 0 60px; } .thankyou_p { line-height: 2em; } /*活動花絮*/ #activity_photos-box h1 { margin-right: 900px; font-size: 1.7em; } /*檢舉信箱*/ #report-box {width: 1200px; margin: 0 auto;} #report-box span .form p { font-size: 1.5em; } .form_btitle { font-size: 1.5em; width: 100px; } /*我要捐款偏鄉-學校指定捐款*/ .donation-box .pic { width: 34%; float: left; } .donation-buttom a{ width: 20%; } .donation-box .text { width: 64%; float: right; } .donation-box .text .news_summary { min-height: 160px; } .text-xsl,.text-xsr,.text-zec-orange { font-size: 1.4em; } .tb { width: 75%; } .target-box { padding: 30px; } /*最新活動 / 優惠*/ .news-box .pic{ /*width:34%; float:left;*/ } .news-box .text{ /*width:64%; float:right;*/ } .news-box2 .pic{ /*width:34%; float:left;*/ } .news-box2 .text{ /*width:64%; float:right;*/ } .news-box2 .text .news_summary { min-height: 86px; } .news-box .text .news_summary { /*min-height: 160px;*/ } .btn-gray{width:50%;} .btn-green-mirror{ width:35%; margin-left:32%; margin-right:32%; } /* Floating column for labels: 25% width */ .col-25 { float: left; width: 18%; } /* Floating column for inputs: 75% width */ .col-75 { float: left; width: 81%; } .search-div .row{ float: left; width: 45%; padding-left:2%; } .search-div .row .col-25 { width: 35%;} .search-div .row .col-75 { width: 65%;} .search-div .row2 { width: 60%; padding-left: 16%; } /*FOOTER*/ /*.footer-a{width: 390px;} .footer-b{width: 480px;} .footer-c{width: 345px;margin-left:45px;} */ .footer-b div{width:30%; margin-left:10%;margin-right:10%;} } @media screen and (min-width: 1920px) { #owl-demo .item, #owl-demo2 .item { height: 267px; } } /*句式只在viewport 寬度不小於2560px才生效*/ @media screen and (min-width: 2560px) { #owl-demo .item, #owl-demo2 .item { height: 360px; } .partners{padding-bottom: 356px!important;} .more {right: 585px;} }