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, 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, menu, nav, output, ruby, section, summary, time, mark, audio, video, input { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; } *:not(hr),select,input,textarea,button{ outline:none; border:none; background:none; } i,em{ font-style:normal; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } body { /* line-height: 1; */ } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } /* custom */ a { color: #999; text-decoration: none; -webkit-backface-visibility: hidden; } li { list-style: none; } /* ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:vertical { height: 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px; } ::-webkit-scrollbar-thumb:horizontal { width: 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px; } */ html, body { width: 100%; } body { -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @font-face { font-family: "iconfont"; /* Project id 2282348 */ src: url("../font/iconfont.woff2") format('woff2'), url("../font/iconfont.woff") format('woff'), url("../font/iconfont.ttf") format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-zhengcezhinanzhen:before { content: "\e675"; } .icon-guanbi1:before { content: "\e62e"; } .icon-31xiala:before { content: "\e603"; } .icon-guanbi:before { content: "\e638"; } .icon-biaozhunchanpin:before { content: "\e60f"; } .icon-qian:before { content: "\e601"; } .icon-peixunxuanchuan:before { content: "\e621"; } .icon-kinds:before { content: "\e60d"; } .icon-kechengbiao:before { content: "\e6bf"; } .icon-liwu:before { content: "\e674"; } .icon-jiangpaipaiming:before { content: "\e62d"; } .icon-jinshenglixiang:before { content: "\e60e"; } .icon-qiyegongchangjianzhu2:before { content: "\e803"; } .icon-qiyegongchangjianzhu:before { content: "\e802"; } .icon-fuwuerji:before { content: "\e626"; } .icon-Icon-zhuanjiatuanduiguanli:before { content: "\e616"; } .icon-jigou:before { content: "\e7a0"; } .icon-jiantou2:before { content: "\e658"; } .icon-zhuanyehuwai:before { content: "\e628"; } .icon-wendang:before { content: "\e64b"; } .icon-qiabao:before { content: "\e66a"; } .icon-wallet-success:before { content: "\e629"; } .icon-wendang1:before { content: "\e62c"; } .icon-xinjianpushu:before { content: "\e607"; } .icon-shoukuan:before { content: "\e605"; } .icon-bj-tjhz:before { content: "\e81d"; } .icon-renwu:before { content: "\e7b8"; } .icon-chenggong:before { content: "\e664"; } .icon-duihua:before { content: "\e637"; } .icon-zhongchengduhezuofang:before { content: "\e6b6"; } .icon-zhongzhi1:before { content: "\e6d7"; } .icon-hetong:before { content: "\e6be"; } .icon-rocket-full:before { content: "\e9d7"; } .icon-2-3-2shengjijilu:before { content: "\e630"; } .icon-xiangmuguanli:before { content: "\e617"; } .icon-yingyezhizhao:before { content: "\e6d8"; } .icon-yanzhengma1:before { content: "\e65a"; } .icon-shouji1:before { content: "\e620"; } .icon-jinbi:before { content: "\e60c"; } .icon-dizhitianchong-:before { content: "\e62a"; } .icon-zhengshu:before { content: "\e669"; } .icon-baojiadan:before { content: "\e695"; } .icon-zhengshu1:before { content: "\e6d3"; } .icon-07_tongjifenxi:before { content: "\e631"; } .icon-renzhengshu:before { content: "\e6a3"; } .icon-jiantoushang:before { content: "\e62b"; } .icon-zixun:before { content: "\e61d"; } .icon-yunongtongxingming:before { content: "\e632"; } .icon-shuji:before { content: "\e619"; } .icon-yanzhengma:before { content: "\e668"; } .icon-shouji:before { content: "\e615"; } .icon-qiye:before { content: "\e71c"; } .icon-renyuanguanli:before { content: "\e636"; } .icon-anquanpeixun:before { content: "\e608"; } .icon-shijian:before { content: "\e61a"; } .icon-shouye:before { content: "\e62f"; } .icon-sousuo1:before { content: "\e73d"; } .icon-remen:before { content: "\e8c9"; } .icon-dianhua1:before { content: "\e602"; } .icon-icon-:before { content: "\e6e5"; } .icon-edu-line:before { content: "\e63a"; } .icon-xitongsheji:before { content: "\e63e"; } .icon-renshu:before { content: "\e678"; } .icon-sousuo:before { content: "\e69e"; } @font-face {font-family: "iconfont_jiantou"; src: url("../font/iconfont1.eot"); /* IE9*/ src: url("../font/iconfont1.eot") format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAhIAAsAAAAADTwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7mHwY21hcAAAAYAAAAD1AAACrBfO1wZnbHlmAAACeAAAAz0AAATY7O/HY2hlYWQAAAW4AAAALwAAADYR0qoSaGhlYQAABegAAAAcAAAAJAfeA5VobXR4AAAGBAAAABQAAABQT+kAAGxvY2EAAAYYAAAAKgAAACoOwA1QbWF4cAAABkQAAAAfAAAAIAEjAF1uYW1lAAAGZAAAAUUAAAJtPlT+fXBvc3QAAAesAAAAmgAAAPbELNU4eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s84gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVPz/z9zwv4EhhrmBoQEozAiSAwA6gg2LeJzFkk1uQjEMhCfNg/LXpi0SQqzeAVhyA9ii9gZwjHcCJG7BGbrqUfjZJ7JgyYIdTGyEVMG6tfVFykSyI48B1AB4MiQF4H7gkOObqlPdo6V6gQXvPbxRqaOK83hKZTrISKaylJXszme+V3Gm+v6mr1W/D8daPfQ1B7fM+hM7NNDEB7rs3UYHL3hFYOd3PtcfVvuTcP/X+nd09Dxeb11SXeEX48zgHBHnRvY4ngzOFqk0OGWkvcF5Ix2MXFNGRvZfpgbdgCyN/AtZGXQIsjboFWRj0DXI1qB/kJ1BJ4MfK3nvgp8oeR+D/1TALQv+SwGeLxJhVHkAAAB4nH2UT2gcVRzH3/fNzr+XzW4yM7uTme3OZnfNTkp1IdvN7sFuUoMgSgMpHoqeVilYAnrxEA895FDBgIqn0EKFtZQWTy1tEQulSezNm1Jr6cWGFnoIPQek/up7O5s1UXAYmMf8Pr/P/H6/NzNMZ+zltnZHm2Aum2Yz7E22xBiMI6hkeBHluFnnR5Ar6znfy2hxNS6b1Upd68CvGF6+0WrWfMM0ssggwtFyoxXXeYzZ5hx/HY18EQgK4bvO1CFH+wZiIo4+p3f4JeRK1UPZudfo7Vfnvcaka62kHSdwnC8tQ9ctzlPZDD7287ZuC4Mu69kwd6d0mJeQDuLwxHujkwXngy+anxSnfBtYXYVbmMxcnR8Px+V5Nsy7TmCOjVoT4Wj1FQ8rT0cm3HSx9oTJA7LXGxq0k2yMMRs12YJ0qD7aaDX5n7RkeVkTPeqaWc/CdRPruKWW1KVTMmThtuXtefh24tFtmVurmNLjQ02EP6Iuev20JdPEdZlYxffoKTedMOXtt6yst1fPJo+0N9j4fo9vDEQ5WsGa7QWCTo9wPoKLIvBsrGFNhK4t72XH0nRaxocu7aehq9ZsNaTGzEthpdbEc6zRivBCGxeVS+aF/+va4o+1ecblnDjKuEsL2hwt0MK/Y/wPWsDdf2KM8S2+NZhvBvn98/2BNkXowMY0PRRuIHBc4GsctuEFNj2n7X53LVE46Jk6MN85KM9DTAsnFNKnJIFzCiW4qiH6XRQE/WzDDZI+pOcq32GmqieGb6KNz1A/RusAlo9hFfWOWtN6Z8i/2OPbMH3E/Bz90sFyn/kv//IFv8Z/TXgpr8LHh1gsJf4SPqKbkcpdjtiQf7TH+5idgcm/pVuSofXoAJ3Uco6fVawqXLI+vtqNaAc5ie6WkINcsWHd1wasKvqo9H66GymEdg7QCfs+jwfeeHam7ePH76KNDcldijawsc/5Gx4kXDuuzpg+zylgM8KFPj/kNMH/Yk5/z40i+h+VvOT7u07USdkGztB5w07hXhoX0NVS+qKl0zN6pluLekpDV0TDZ95PXPIvUhtsequDZixfA37fTlEnncY9aaTzOGPwKyqdeiIS1EusCBDo7G/idutbAAAAeJxjYGRgYABin/eVJvH8Nl8ZuFkYQOB65GZOBP1/EwsDcyCQy8HABBIFABdoCYQAeJxjYGRgYG7438AQw8IAAkCSkQEViAAARxoCfXicY2FgYGB+ycDAwkAdDABRZwE5AAAAAAB2AJoAvgDkAQoBGAEmAUoBbgGGAZ4BtgHMAeIB+AIMAiACRgJsAAB4nGNgZGBgEGEIZGBlAAEmIOYCQgaG/2A+AwASwgGBAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG2KSxKCMBBE0woBgoofPAYLjxQlBNTKWKmkQE+vGCw29mbe62m2YCGC/U+JBZaIEIMjQYoMAjlWWGODAlvssMcBJY4MQzF00ugn+evnOvLBX54m5400re8SrYyuPYl5KeZRrIxTllvlvDXRWV5uSUO2l7bmo1SUTVqRkNZSX91V4/KAttPtj8f6lAb2j/j7isaSsTdyBD/OAAA=') format('woff'), url("../font/iconfont1.ttf") format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url("../font/iconfont1.svg") format('svg'); /* iOS 4.1- */ } .iconfont_jiantou { font-family:"iconfont_jiantou" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .jiantou-xiangyoujiantou:before { content: "\e65f"; } .jiantou-xiangzuojiantou:before { content: "\e660"; } .jiantou-fanhui:before { content: "\f0343"; } .jiantou-gengduo:before { content: "\f0344"; } .jiantou-youjiantou:before { content: "\f034f"; } .jiantou-zuojiantou:before { content: "\f0350"; } .jiantou-enter:before { content: "\e6f8"; } .jiantou-return:before { content: "\e720"; } .jiantou-back:before { content: "\e934"; } .jiantou-forward:before { content: "\e94d"; } .jiantou-back-o:before { content: "\e989"; } .jiantou-forward-o:before { content: "\e9a0"; } .jiantou-arrow-left:before { content: "\e9d8"; } .jiantou-arrow-right:before { content: "\e9d9"; } .jiantou-arrow-left1:before { content: "\e9da"; } .jiantou-arrow-up:before { content: "\e9db"; } .jiantou-right:before { content: "\e7eb"; } .jiantou-left:before { content: "\e7ec"; } /** * Swiper 5.2.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 16, 2019 */ @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} @charset "utf-8"; /* CSS Document */ button,input,textarea,select{ outline:none; background:none; border:none; font-family:"微软雅黑"; font-family:Source Han Sans CN,'PingFang SC',"SOURCEHANSANSCN-REGULAR",'Microsoft Yahei','Source Han Sans',SimSun, 'Noto Sans CJK SC', 'Noto Sans CJK',source-han-sans-simplified-c, sans-serif; box-shadow:none; -webkit-appearance:none; border-radius:0; } a,*:before,*:after{ -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } /* *{ transition:all 0s \9 !important; } */ *,*:before,*:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } .iconfont:before{ -webkit-transition:all 0s; -moz-transition:all 0s; -o-transition:all 0s; transition:all 0s; } .center_box{ width:1200px; margin:0 auto; } .clearfix:after{ content:""; clear:both; height:0; font-size:0; display:block; visibility:hidden; *zoom:1; } .clear{ clear:both; } .fl{ float:left; } .fr{ float:right; } .pd_150{ padding:150px; } .pd_tb150{ padding:150px 0; } .pd_t150{ padding-top:150px; } .pd_b150{ padding-bottom:150px; } .pd_120{ padding:120px; } .pd_tb100{ padding:120px 0; } .pd_t120{ padding-top:120px; } .pd_b120{ padding-bottom:120px; } .pd_100{ padding:100px; } .pd_tb100{ padding:100px 0; } .pd_t100{ padding-top:100px; } .pd_b100{ padding-bottom:100px; } .pd_80{ padding:80px; } .pd_tb80{ padding:80px 0; } .pd_t80{ padding-top:80px; } .pd_b80{ padding-bottom:80px; } .pd_60{ padding:60px; } .pd_tb60{ padding:60px 0; } .pd_t60{ padding-top:60px; } .pd_b60{ padding-bottom:60px; } .pd_50{ padding:50px; } .pd_tb50{ padding:50px 0; } .pd_t50{ padding-top:50px; } .pd_b50{ padding-bottom:50px; } .pd_40{ padding:40px; } .pd_tb40{ padding:40px 0; } .pd_t40{ padding-top:40px; } .pd_b40{ padding-bottom:40px; } .pd_30{ padding:30px; } .pd_tb30{ padding:30px 0; } .pd_t30{ padding-top:30px; } .pd_b30{ padding-bottom:30px; } .pd_20{ padding:20px; } .pd_tb20{ padding:20px 0; } .pd_t20{ padding-top:20px; } .pd_b20{ padding-bottom:20px; } .pd_15{ padding:15px; } .pd_tb15{ padding:15px 0; } .pd_t15{ padding-top:15px; } .pd_b15{ padding-bottom:15px; } .pd_10{ padding:10px; } .pd_tb10{ padding:10px 0; } .pd_t10{ padding-top:10px; } .pd_b10{ padding-bottom:10px; } .pd_tb100{ padding:100px 0; } .mg_t150{ margin-top:150px; } .mg_b150{ margin-bottom:150px; } .mg_t100{ margin-top:100px; } .mg_b100{ margin-bottom:100px; } .mg_tb80{ margin:80px 0; } .mg_t80{ margin-top:80px; } .mg_b80{ margin-bottom:80px; } .mg_tb70{ margin:70px 0; } .mg_t70{ margin-top:70px; } .mg_b70{ margin-bottom:70px; } .mg_tb60{ margin:60px 0; } .mg_t60{ margin-top:60px; } .mg_b60{ margin-bottom:60px; } .mg_tb50{ margin:50px 0; } .mg_t50{ margin-top:50px; } .mg_b50{ margin-bottom:50px; } .mg_tb40{ margin:40px 0; } .mg_t40{ margin-top:40px; } .mg_b40{ margin-bottom:40px; } .mg_tb30{ margin:30px 0; } .mg_t30{ margin-top:30px; } .mg_b30{ margin-bottom:30px; } .mg_tb20{ margin:20px 0; } .mg_t20{ margin-top:20px; } .mg_b20{ margin-bottom:20px; } .mg_tb15{ margin:15px 0; } .mg_t15{ margin-top:15px; } .mg_b15{ margin-bottom:15px; } .mg_tb10{ margin:10px 0; } .mg_t10{ margin-top:10px; } .mg_b10{ margin-bottom:10px; } /* *{ font-family:"微软雅黑"; } */ body{ font-size:medium !important; font-family:"微软雅黑"; /* font-family:'PingFang SC','Microsoft Yahei','Source Han Sans',SimSun, 'Noto Sans CJK SC', 'Noto Sans CJK',source-han-sans-simplified-c, sans-serif; */ /* font-family:'SiYuan-ExtraLig1fd3bbf467523d' !important; */ font-family:Source Han Sans CN,'PingFang SC',"SOURCEHANSANSCN-REGULAR",'Microsoft Yahei','Source Han Sans',SimSun, 'Noto Sans CJK SC', 'Noto Sans CJK',source-han-sans-simplified-c, sans-serif; -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color:transparent; overflow-x:hidden; } .flex_box{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; } .inflex_box{ display:-webkit-inline-box; display:-webkit-inline-flex; display:-ms-inline-flexbox; display:inline-flex; } @font-face { font-family:gunplay; src:url("../font/Gunplay.ttf"); } @font-face { font-family:menk; src: url("../font/MGQ8101.ttf"); } @font-face { font-family:twcen; src:url("../font/TwCenMT.ttf"); } @font-face { font-family:geo; src: url("../font/tt0663m.ttf"); } @font-face{ font-family:frank; src:url("../font/FRADMCN.TTF") } @font-face { font-family:geno; src:url("../font/Genome-Thin.otf"); } @font-face { font-family:swis; src:url("../font/tt0173m.ttf"); } @font-face{ font-family:impact; src:url("../font/impact.ttf"); } @font-face{ font-family:nexa; src:url("../font/NexaBold.otf"); } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~首页~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* header */ header{ position:fixed; top:0; left:0; width:100%; z-index:980; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.1); transition:all .5s; } header.header_box2{ top:0; } header.scr{ top:0; } .header_height{ height:170px; } .header_top{ background:#3e3e3e; height:30px; line-height:30px; font-size:12px; color:#fff; } .header_top .center_box{ overflow:hidden; } .header_top .header_tr ul{ overflow:hidden; margin-right:-8px; } .header_top .header_tr ul li{ float:left; padding:0 8px; position:relative; } .header_top .header_tr ul li:after{ content:""; position:absolute; right:0; width:1px; height:12px; background:#aaa; top:50%; margin-top:-6px; } .header_top .header_tr ul li a{ color:#fff; } .header_mid .center_box{ height:100px; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; overflow:hidden; } .header_mid .logo{ display:block; } .header_mid .logo img{ display:block; max-height:50px; } .search_box input{ display:block; width:460px; height:40px; font-size:14px; color:#333; border:solid 1px #f2f2f2; padding:0 14px; } .search_box button{ -webkit-align-items:center; align-items:center; font-size:16px; color:#fff; padding:0 10px; background:#999; cursor:pointer; } .search_box button span{ padding-left:6px; padding-bottom:2px; } .header_tel{ -webkit-align-items:center; align-items:center; } .header_tel .iconfont{ font-size:44px; color:#cb0101; } .header_tel .header_t{ padding-left:10px; } .header_tel span{ display:block; font-size:14px; color:#333; } .header_tel p{ font-size:24px; font-weight:bold; color:#cb0101; font-family:arial; } .header_bot .center_box{ height:40px; } .header_bot .header_side_nav{ position:relative; width:220px; } .header_bot .header_side_nav #header_sn_oc{ display:none; } .header_bot .header_side_nav .header_sn_tit label{ display:block; height:40px; line-height:40px; width:100%; background:#cb0101; text-align:center; color:#fff; border-radius:5px 5px 0 0; } .header_bot .header_side_nav .header_sn_tit label h2{ font-weight:bold; font-size:16px; } .header_bot .header_side_nav .header_sn_list{ position:absolute; top:100%; width:100%; left:0; height:418px; display:none; } .home_header .header_sn_list{ display:none; } .inner_header .header_sn_list{ display:none; } .header_bot .header_side_nav .header_sn_list ul>li+li{ margin-top:2px; } .header_bot .header_side_nav .header_sn_list ul>li>a{ height:58px; background:rgba(0,0,0,.5); padding:0 30px; position:relative; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; color:#fff; position:relative; } .header_bot .header_side_nav .header_sn_list ul>li>a:after{ content:""; position:absolute; width:3px; top:10px; bottom:10px; border-radius:10px; left:0; opacity:0; background:#cb0101; } .header_bot .header_side_nav .header_sn_list ul>li>a span{ font-size:16px; } .header_bot .header_side_nav .header_sn_list .header_sn_tid{ position:absolute; width:540px; height:100%; background:#fff; top:0; left:100%; padding:30px; box-shadow:0 5px 10px rgba(0,0,0,.1); } .header_bot .header_side_nav .header_sn_list .header_sn_tid ol{ overflow:hidden; margin-right:-50px; margin-bottom:-20px; } .header_bot .header_side_nav .header_sn_list .header_sn_tid ol li{ float:left; margin-right:50px; margin-bottom:20px; } .header_bot .header_side_nav .header_sn_list .header_sn_tid ol li a{ font-size:14px; color:#666; } nav{ margin-left:90px; } nav ul{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; float:left; margin-right:-40px; } nav ul>li{ position:relative; float:left; margin-right:40px; } nav ul>li>a{ font-size:16px; color:#333; line-height:40px; display:block; position:relative; overflow:hidden; } nav ul>li>a:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#CB0101; transform:translateY(5px); } nav ul>li.active>a{ color:#CB0101; } nav ul>li.active>a:after{ transform:translateY(0px); } /* 二级导航 */ nav ul>li .subnav li a{ display:block; padding:10px 0; text-align:center; font-size:14px; color:#fff; } nav ul>li .subnav{ padding-top:15px; position:absolute; width:200%; left:-50%; top:100%; -webkit-transform: perspective(300px) scaleY(0) translateZ(30px); transform: perspective(300px) scaleY(0) translateZ(30px); visibility: hidden; opacity: 0; box-shadow: 2px 2px 5px 1px rgba(0,0,0,.05); -webkit-transform-origin: top; transform-origin: top; visibility:hidden; -webkit-transition: opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease; transition:opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease; -webkit-transition: opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease; transition:opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease; transition:transform 500ms ease,opacity 500ms ease,visibility 500ms ease; transition:transform 500ms ease,opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease; transition:transform 500ms ease,opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease; } nav ul>li .subnav:before{ content:""; position:absolute; top:10px; left:50%; margin-left:-8px; border-left:solid 8px transparent; border-right:solid 8px transparent; border-bottom:solid 5px rgba(203,1,1,.7); } nav ul>li .subnav ol{ background:rgba(203,1,1,.7); } /* banner */ .m_banner{ height:0; overflow:hidden; } .banner_box{ position:relative; } .banner_box .swiper-slide a{ display:block; position:relative; height:418px; overflow:hidden; overflow:hidden; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:center; align-items:center; } .banner_box .swiper-slide a>img{ display:block; width:auto; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); } .banner_box .swiper-container-horizontal>.swiper-pagination-bullets{ bottom:20px; } .banner_box .swiper-pagination-bullet{ width:15px; height:15px; background:none; border:solid 2px #fff; border-radius:50%; opacity:1; } .banner_box .swiper-pagination-bullet-active{ background:#fff; } .swiper-xn .iconfont{ color:#fff; display:inline-block; font-size:3vw; } .swiper-xn.swiper-button-next .iconfont{ transform:rotate(-90deg); } .swiper-xn.swiper-button-prev .iconfont{ transform:rotate(90deg); } .swiper-xn.swiper-button-next{ right:5%; } .swiper-xn.swiper-button-prev{ left:5%; } .swiper-xn.swiper-xn:after{ display:none; } .banner_box .banner_mouse{ position:absolute; color:#fff; bottom:8vh; left:50%; margin-left:-25px; z-index:85; display:block; width:50px; text-align:center; cursor:pointer; display:none; } .banner_box .banner_mouse img{ display:inline-block; width:46px; -webkit-animation: start 2s infinite ease-in-out; -moz-animation: start 2s infinite ease-in-out; -o-animation: start 2s infinite ease-in-out; animation: start 2s infinite ease-in-out; } @-webkit-keyframes start { 0%,30% {opacity: 0;-webkit-transform: translate(0,-20px);} 60% {opacity: 1;-webkit-transform: translate(0,0);} 100% {opacity: 0;-webkit-transform: translate(0,20px);} } @-moz-keyframes start { 0%,30% {opacity: 0;-moz-transform: translate(0,-20px);} 60% {opacity: 1;-moz-transform: translate(0,0);} 100% {opacity: 0;-moz-transform: translate(0,20px);} } @-o-keyframes start{ 0%,30%{opacity:0;-o-transform:translate(0,-20px);} 60%{opacity:1;-o-transform:translate(0,0);} 100%{opacity:0;-o-transform:translate(0,20px);} } @keyframes start { 0%,30% {opacity: 0;transform: translate(0,-20px);} 60% {opacity: 1;transform: translate(0,0);} 100% {opacity: 0;transform: translate(0,20px);} } .swiper-mpg{ display:none; } .swiper_pn .swiper-button-prev, .swiper_pn .swiper-button-next{ position:static; margin-top:0; opacity:1; width:40px; height:40px; border:solid 2px #D1BA71; border-radius:50%; color:#D1BA71; } .swiper_pn .swiper-button-prev:after, .swiper_pn .swiper-button-next:after{ font-size:20px; color:inherit; } .swiper_pn .swiper-button-prev{ margin-right:10px; } .swiper_pn .swiper-button-prev:not(.swiper-button-disabled):hover, .swiper_pn .swiper-button-next:not(.swiper-button-disabled):hover{ background:#D1BA71; color:#fff; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~内页~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .article_w{ font-size:14px; color:#333; line-height:1.75; } .article_w img{ max-width:100% !important; height:auto !important; } .article_w strong{ font-weight:bold; } .article_w *:not(strong){ font-weight:inherit; } .article_w table{ border-collapse: collapse; border:solid 1px #aaa; width:100%; } .article_w table td{ border:solid 1px #aaa; padding:10px; } .busi_sys ul{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; } .busi_sys ul li{ width:150px; } .busi_sys ul li a{ display:block; text-align:center; font-size:0; color:#333; } .busi_sys ul li a span{ width:150px; height:150px; background:#f2f2f2; border-radius:50%; display:inline-block; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .busi_sys ul li a span img{ display:inline-block; max-width:100px; max-height:75px; transition:all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } @keyframes iconSkew{ from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } .busi_sys ul li a p{ font-size:20px; font-weight:bold; } .grey_bg{ background:#f7f7f7; } .white_bg{ background:#fff; } /* 标题 */ .zx_tit{ text-align:center; color:#333; font-size:0; } .zx_tit h2{ font-size:28px; font-weight:bold; } .zx_tit i{ display:inline-block; width:100px; height:1px; background:#cb0101; position:relative; } .zx_tit i:before{ content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#cb0101; left:50%; top:0; margin-left:-4px; margin-top:-3px; } .zx_tit > span{ display:block; font-size:16px; } /* 更多 */ .zx_more{ text-align:center; } .zx_more a{ display:inline-block; font-size:16px; color:#cb0101; padding:8px 30px; border-radius:200px; border:solid 1px #cb0101; } .zx_more.zx_more_border a{ color:#cb0101; } .zx_more.zx_more_bg a{ background:#cb0101; color:#fff; } /* 背景更换板块 */ .change_bg{ background-repeat:no-repeat; background-position:center center; background-size:cover; } /* 热门课程 */ .hot_course .hc_list ul{ -webkit-flex-wrap:wrap; flex:wrap; margin-left:-30px; margin-bottom:-30px; } .flex_box.clearfix:after{ display:none; display:block\9; display:block\9\0; } .hot_course .hc_list ul li{ width:33.33333%; float:left; margin-bottom:30px; } .hot_course .hc_list ul li a{ display:block; margin-left:30px; background:#fff; overflow:hidden; height:344px; } .hot_course .hc_list ul li a .hc_img{ display:block; height:250px; overflow:hidden; } .hot_course .hc_list ul li a .hc_img img{ display:block; width:100%; height:100%; } .hot_course .hc_list ul li a .hc_wrap{ position:relative; z-index:3; text-align:center; font-size:0; background:#fff; } .hot_course .hc_list ul li a .hc_wrap h3{ font-size:18px; color:#333; line-height:1.5; text-align:left; overflow:hidden; height:54px; -webkit-line-clamp:2; -moz-line-clamp:2; -o-line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; -moz-box-orient:vertical; -o-box-orient:vertical; -webkit-box-orient:vertical; display:-webkit-box; display:-moz-box; display:-o-box; display:-webkit-box; } .hot_course .hc_list ul li a .hc_wrap .hc_line{ display:inline-block; width:25%; height:2px; background:#cb0101; } .hot_course .hc_list ul li a .hc_wrap .hc_more{ font-size:16px; display:block; color:#cb0101; } /* 行业资讯 */ .news_box .news_con{ -webkit-justify-content:space-between; justify-content:space-between; } .news_box .news_pics{ width:560px; } .news_box .news_pics a{ display:block; position:relative; } .news_box .news_pics a .news_img{ display:block; height:418px; } .news_box .news_pics a .news_img img{ display:block; width:100%; height:100%; } .news_box .news_pics a .news_wrap{ position:absolute; bottom:0; left:0; width:100%; z-index:3; height:40px; line-height:40px; padding:0 20px; color:#fff; background:rgba(0,0,0,.3); transition:all .35s; } .news_box .news_pics a .news_wrap h3{ font-size:18px; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .news_box .news_pics a .news_wrap span{ font-family:arial; font-size:16px; } .news_box .news_pics .swiper-button-white{ width:34px; height:64px; background:#00000050; background:rgba(0,0,0,.5); margin-top:-52px; transition:background-color .35s; } .news_box .news_pics .swiper-button-prev{ left:0; border-radius:0 5px 5px 0; } .news_box .news_pics .swiper-button-next{ right:0; border-radius:5px 0 0 5px; } .news_box .news_pics .swiper-button-white:after{ font-size:20px; } .news_box .news_list{ width:600px; } .news_box .news_list ul li+li{ margin-top:15px; } .news_box .news_list ul li a{ color:#333; display:block\9; display:block\9\0; } .news_box .news_list ul li a .news_date{ width:130px; height:130px; background:#c5c5c5; color:#fff; font-family:arial; text-align:center; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; transition:all .35s; } .news_box .news_list ul li a .news_date p{ font-size:30px; } .news_box .news_list ul li a .news_date span{ font-size:18px; display:block; padding-top:7px; margin-top:7px; border-top:solid 1px #fff; letter-spacing:.2em; text-indent:.2em; } .news_box .news_list ul li a .news_wrap{ width:470px; width:calc(100% - 130px); padding:20px 30px; background:#fafafa; height:130px\9; height:130px\9\0; } .news_box .news_list ul li a .news_wrap h3, .news_box .news_list ul li a .news_wrap p{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .news_box .news_list ul li a .news_wrap h3{ font-size:18px; font-weight:bold; } .news_box .news_list ul li a .news_wrap p{ font-size:14px; color:#666; margin-top:8px; } .news_box .news_list ul li a .news_wrap span{ display:block; font-size:16px; color:#999; margin-top:8px; } /* 资质服务 */ .qual_service .qs_list ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-left:-20px; margin-bottom:-20px; } .qual_service .qs_list ul li{ width:25%; margin-bottom:20px; } .qual_service .qs_list ul li a{ display:block; background:#ff8201; position:relative; margin-left:20px; overflow:hidden; padding:25px; border-radius:3px; color:#fff; } .qual_service .qs_list ul li:nth-of-type(1) a{ background:#69d87a; } .qual_service .qs_list ul li:nth-of-type(2) a{ background:#ff8201; } .qual_service .qs_list ul li:nth-of-type(3) a{ background:#31ddd7; } .qual_service .qs_list ul li:nth-of-type(4) a{ background:#fb7855; } .qual_service .qs_list ul li:nth-of-type(5) a{ background:#f6c812; } .qual_service .qs_list ul li:nth-of-type(6) a{ background:#528cea; } .qual_service .qs_list ul li:nth-of-type(7) a{ background:#f84241; } .qual_service .qs_list ul li:nth-of-type(8) a{ background:#48c1ec; } .qual_service .qs_list ul li a .qs_icon{ float:left; width:84px; height:75px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .qual_service .qs_list ul li a .qs_icon img{ display:block; max-width:100%; max-height:100%; } .qual_service .qs_list ul li a .qs_w{ float:right; line-height:84px; font-size:20px; font-weight:bold; min-width:120px; } .qual_service .qs_list ul li a .qs_dot, .qual_service .qs_list ul li a .qs_dot:before, .qual_service .qs_list ul li a .qs_dot:after{ position:absolute; border-radius:50%; background:rgba(255,255,255,.2); } .qual_service .qs_list ul li a .qs_dot{ top:2px; right:85px; width:20px; height:20px; } .qual_service .qs_list ul li a .qs_dot:before, .qual_service .qs_list ul li a .qs_dot:after{ content:""; } .qual_service .qs_list ul li a .qs_dot:before{ width:12px; height:12px; right:-16px; bottom:-15px; } .qual_service .qs_list ul li a .qs_dot:after{ width:10px; height:10px; right:-48px; bottom:-7px; } .qual_service .qs_list ul li a .qs_bg span{ position:absolute; bottom:0; right:0; } .qual_service .qs_list ul li a .qs_bg .qs_wave1{ bottom:-46px; } .qual_service .qs_list ul li a .qs_bg .qs_wave2{ bottom:-94px; } .qual_service .qs_list ul li a .qs_bg span img{ display:block; max-width:100%; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(0) translateZ(0) scaleY(0.5) } 100% { transform: translateX(0) translateZ(0) scaleY(1) } } @keyframes dot_wave { 0% { transform:scale(1) translateY(0); opacity:1; } 100% { transform:scale(1.5) translateY(-60px); opacity:0; } } /* 转让求购 */ .trpu_box .trpu_list ul li .tp_ss{ overflow:hidden; padding:0 20px; border-bottom:solid 1px #e5e5e5; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; transition:all .35s; } .trpu_box .trpu_list ul li .tp_ss .tp_info{ float:left; width:1020px; color:#333; font-size:16px; line-height:28px; padding:20px 0; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_tag{ float:left; width:8%; line-height:normal; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_tag i{ font-size:12px; display:inline-block; padding:6px 13px; border-radius:200px; } .trpu_box .trpu_list ul li.tp_qg .tp_ss .tp_info .tp_tag i{ color:#cb0101; background:#f7d9d9; } .trpu_box .trpu_list ul li.tp_zr .tp_ss .tp_info .tp_tag i{ color:#0882ff; background:#daecff; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_tit{ float:left; font-weight:bold; width:36%; margin-left:4%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_place{ float:left; width:10%; margin-left:5%; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_price{ float:left; color:#cb0101; font-weight:bold; width:10%; margin-left:5%; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_date{ float:left; font-size:14px; width:15%; margin-left:5%; } .trpu_box .trpu_list ul li .tp_ss .tp_btn{ float:right; font-size:14px; padding:6px 20px; border-radius:5px; border-width:1px; border-style:solid; } .trpu_box .trpu_list ul li.tp_qg .tp_ss .tp_btn{ color:#cb0101; border-color:#cb0101; } .trpu_box .trpu_list ul li.tp_zr .tp_ss .tp_btn{ color:#0882ff; border-color:#0882ff; } /* 人才服务 */ .talent_service .ts_list ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-left:-20px; margin-bottom:-20px; } .talent_service .ts_list ul>li{ float:left; width:50%; position:relative; margin-bottom:20px; } .talent_service .ts_list ul>li .ts_info{ display:block; margin-left:20px; font-size:16px; color:#333; background:#fff; } .talent_service .ts_list ul>li .ts_info h3{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:bold; max-width:70%; } .talent_service .ts_list ul>li .ts_ops{ margin-top:15px; } .talent_service .ts_list ul>li .ts_ops ol{ overflow:hidden; } .talent_service .ts_list ul>li .ts_ops ol li{ float:left; line-height:30px; color:#666; } .talent_service .ts_list ul>li .ts_ops ol li>*{ float:left; } .talent_service .ts_list ul>li .ts_ops ol li+li{ margin-left:50px; } .talent_service .ts_list ul>li .ts_ops ol li .iconfont{ font-size:20px; float:left; } .talent_service .ts_list ul>li .ts_ops ol li .iconfont.icon-edu-line{ font-size:30px; } .talent_service .ts_list ul>li .ts_ops ol li span{ float:left; margin-left:5px; } .talent_service .ts_list ul>li .ts_btn{ position:absolute; top:20px; right:20px; font-size:16px; color:#333; } /* 合作伙伴 */ .partner_box .par_con{ padding:50px 30px; box-shadow:0 0 20px rgba(0,0,0,.1); background:#fff; } .partner_box .par_con ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-left:-30px; margin-bottom:-30px; } .partner_box .par_con ul li{ width:25%; margin-bottom:30px; } .partner_box .par_con ul li .par_ss{ display:block; margin-left:30px; border:solid 1px #e5e5e5; overflow:hidden; transition:border-color .35s .2s; position:relative; } .partner_box .par_con ul li .par_ss .par_img{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; height:80px; } .partner_box .par_con ul li .par_img img{ display:block; max-width:96%; max-height:90%; } .partner_box .par_con ul li .par_wrap{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:center; align-items:center; position:absolute; top:100%; left:0; width:100%; height:100%; background:#cb0101; color:#fff; padding:0 10px; transition:all .35s; } .partner_box .par_con ul li .par_wrap h4{ color:#fff; font-size:20px; font-weight:bold; text-align:center; width:100%; } .partner_box .par_con ul li .par_ss:active{ border-color:#cb0101; } .partner_box .par_con ul li .par_ss:active .par_wrap{ top:0; } /* 页脚 */ footer{ background:#3e3e3e; } .footer_top .footer_tabs{ border-bottom:solid 1px #9f9f9f; } .footer_top .footer_tabs ul li{ float:left; cursor:pointer; color:#fafafa; font-size:14px; padding-bottom:15px; position:relative; } .footer_top .footer_tabs ul li+li{ margin-left:45px; } .footer_top .footer_tabs ul li:after{ content:""; position:absolute; width:100%; height:3px; background:#fff; bottom:-2px; left:0; opacity:0; } .footer_top .footer_tabs ul li.active:after{ opacity:1; } .footer_top .footer_tcon{ padding-top:25px; } .footer_top .footer_tcon .footer_titem{ display:none; } .footer_top .footer_tcon .footer_titem:nth-of-type(1){ display:block; } .footer_top .footer_tcon .footer_titem ul{ overflow:hidden; } .footer_top .footer_tcon .footer_titem ul li{ float:left; margin:0 20px 10px 0; } .footer_top .footer_tcon .footer_titem ul li a{ display:block; font-size:14px; color:#fafafa; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .footer_bot .center_box{ -webkit-justify-content:space-between; justify-content:space-between; } .footer_bot .footer_cpr{ width:730px; font-size:14px; color:#fafafa; line-height:1.8; } .footer_bot .footer_cpr>*{ display:inline-block; padding-right:10px; } .footer_bot .footer_cpr a{ color:inherit; } .footer_bot .footer_tel{ -webkit-align-items:center; align-items:center; color:#fafafa; } .footer_bot .footer_tel .iconfont{ font-size:44px; } .footer_bot .footer_tel .footer_t{ padding-left:10px; } .footer_bot .footer_tel span{ display:block; font-size:14px; } .footer_bot .footer_tel p{ font-size:24px; font-weight:bold; font-family:arial; } /* 侧边栏 */ .side_bar{ position:fixed; top:22%; right:0; width:250px; z-index:990; transition:all .35s; transform:translateX(101%); } .side_bar.side_bar_show{ transform:translateX(0); } .side_bar.side_bar_tm{ transform:translateX(101%); } .side_bar.side_bar_btm{ transform:translateX(0); } .side_bar .side_close{ position:absolute; color:#aaa; top:-25px; right:0; cursor:pointer; } .side_bar .side_close .iconfont{ font-size:20px; } .side_bar .side_top{ padding:20px 10px; background:#f51e0a; border-radius:10px; } .side_bar .side_top .side_tcon{ padding:20px 10px; background:#fff; border-radius:5px; } .side_bar .side_top .header_tel .iconfont{ font-size:26px; } .side_bar .side_top .header_tel span{ font-size:12px; } .side_bar .side_top .header_tel p{ font-size:15px; } .side_bar .side_top .side_nav ul li+li{ margin-top:10px; } .side_bar .side_top .side_nav ul li a{ display:block; font-size:13px; color:#fff; text-align:center; background:#F51E0A; border-radius:200px; padding:6px 0; } .side_bar .side_top .side_btn a{ -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; color:#F51E0A; background:#ffd52d; padding:8px 0; border-radius:200px; } .side_bar .side_top .side_btn a span{ font-size:13px; padding-left:6px; } .side_bar .side_bot{ margin-top:8px; height:40px; background:#F51E0A; border-radius:10px; color:#fff; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; position:relative; cursor:pointer; transition:all .35s; } .side_bar .side_bot:before{ content:""; position:absolute; width:100%; height:26px; top:-17px; left:0; background:url("../images/side_img.png") no-repeat center center; } .side_bar .side_bot .iconfont{ margin-top:3px; } .side_bar .side_bot span{ margin-left:5px; } .side_turn_btn{ position:fixed; right:0; top:50%; margin-top:-18px; z-index:991; width:36px; height:50px; background:rgba(0,0,0,.5); border-radius:5px 0 0 5px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; color:#fff; cursor:pointer; transform:translateX(100%); transition:all .35s; } .side_turn_btn.side_turn_btn_show{ transform:translateX(0); display:flex !important; } .side_turn_btn .iconfont_jiantou{ font-size:26px; } .side2_container{ background:url("../images/side2_bg.jpg") no-repeat center center; background-size:cover; padding:25px 10px 50px; color:#fff; } .side2_container .side2_tx{ text-align:center; color:currentColor; } .side2_container .side2_tx .side2_img{ display:block; font-size:60px; width:1em; height:1em; margin-left:auto; margin-right:auto; border-radius:50%; overflow:hidden; } .side2_container .side2_tx .side2_img img{ display:block; width:100%; height:100%; } .side2_container .side2_tx .side2_sw{ font-size:16px; margin-top:6px; } .side2_container .side2_qr{ -webkit-justify-content:center; justify-content:center; } .side2_container .side2_qr .side2_img{ display:block; font-size:140px; width:1em; height:1em; padding:5px; border:solid 2px rgba(255,255,255,.2); } .side2_container .side2_qr .side2_img img{ display:block; width:100%; height:100%; } .side2_container .side2_bot{ text-align:center; } .side2_container .side2_bot .side2_txt{ font-size:13px; } .side2_container .side2_bot .side2_txt em{ display:inline-block; transform:scale(.5); } .side2_container .side2_bot .side2_btn{ display:block; background:#fff; color:#cb0101; border-radius:200px; font-size:12px; font-weight:bold; padding:5px 0; } /* 内页-课程培训 */ .inner_header ~ #scrolly_box{ background:#f7f7f7; } .course_list_banner{ position:relative; } .course_list_banner>.center_box{ position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; z-index:5; overflow:hidden; pointer-events:none; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:flex-end; justify-content:flex-end; -webkit-align-items:center; align:center; } .course_list_banner .cl_con{ float:right; background:rgba(0,0,0,.5); border-radius:10px; max-width:300px; } .course_list_banner .cl_con ul{ text-align:center; color:#fff; } .course_list_banner .cl_con ul li .cl_icon{ display:inline-block; width:60px; height:60px; line-height:56px; text-align:center; border-radius:50%; border:solid 2px #fff; } .course_list_banner .cl_con ul li .cl_icon .iconfont{ font-size:30px; } .course_list_banner .cl_con ul li .cl_icon .iconfont.icon-renyuanguanli{ font-size:34px; } .course_list_banner .cl_con ul li .cl_w{ font-size:22px; font-weight:bold; margin-top:10px; } .course_list_banner .cl_con ul li+li{ margin-top:20px; } .zx_lr>.center_box{ -webkit-justify-content:space-between; justify-content:space-between; } .zx_lr.zx_lbr .zx_left{ width:880px; } .zx_lr.zx_lbr .zx_right{ width:300px; } .zx_lr.zx_lrb .zx_left{ width:800px; } .zx_lr.zx_lrb .zx_right{ width:380px; } .inner_course .inner_cl_tit{ -webkit-align-items:center; align-items:center; border-bottom:solid 2px #cb0101; } .inner_course .inner_cl_tit .iconfont{ font-size:32px; color:#cb0101; } .inner_course .inner_cl_tit h2{ font-size:24px; color:#333; font-weight:bold; margin-left:10px; } .course_list ul>li+li{ margin-top:10px; } .course_list ul>li a{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; background:#fff; color:#333; } .course_list ul>li a .cl_img{ display:block; width:300px; height:200px; overflow:hidden; } .course_list ul>li a .cl_img img{ display:block; width:100%; height:100%; transition:all 2s; } .course_list ul>li a .cl_wrap{ width:520px; width:calc(100% - 320px); } .course_list ul>li a .cl_wrap .cl_tit{ font-size:18px; font-weight:bold; line-height:1.5; max-height:54px; overflow:hidden; -webkit-line-clamp:2; -moz-line-clamp:2; -o-line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; -moz-box-orient:vertical; -o-box-orient:vertical; -webkit-box-orient:vertical; display:-webkit-box; display:-moz-box; display:-o-box; display:-webkit-box; } .course_list ul>li a .cl_wrap .cl_info{ background:#f5f5f5; } .course_list ul>li a .cl_wrap .cl_info ol{ overflow:hidden; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-bottom:-5px; } .course_list ul>li a .cl_wrap .cl_info li{ width:48%; float:left; font-size:14px; color:#666; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .course_list ul>li a .cl_wrap .cl_info li:nth-of-type(odd){ width:54%; } .course_list ul>li a .cl_wrap .cl_info li:nth-of-type(even){ width:40%; } .course_list ul>li a .cl_wrap .cl_bot{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } .course_list ul>li a .cl_wrap .cl_bot .cl_price{ font-size:18px; font-weight:bold; color:#cb0101; } .course_list ul>li a .cl_wrap .cl_bot .cl_price em{ font-size:30px; font-weight:bold; font-family:arial; } .course_list ul>li a .cl_wrap .cl_bot>i{ font-size:16px; color:#999; } /* 推荐标题 */ .recommend_tit{ -webkit-align-items:flex-end; align-items:flex-end; } .recommend_tit h3{ font-size:24px; color:#333; font-weight:bold; } .recommend_tit span{ font-size:14px; color:#666; padding-left:5px; } /* 资讯推荐 */ .news_rec .nr_con ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-bottom:-20px; margin-left:-20px; } .news_rec .nr_con ul li{ float:left; width:33.33333%; margin-bottom:20px; } .news_rec .nr_con ul li a{ display:block; position:relative; margin-left:20px; } .news_rec .nr_con ul li a .nr_img{ display:block; overflow:hidden; } .zx_lbr .news_rec .nr_con ul li a .nr_img{ height:185px; } .zx_lrb .news_rec .nr_con ul li a .nr_img{ height:165px; } .news_rec .nr_con ul li a .nr_img img{ display:block; width:100%; height:100%; transition:all 2s; } .news_rec .nr_con ul li a .nr_wrap{ position:absolute; bottom:0; left:0; width:100%; padding:10px 15px; background:rgba(0,0,0,.6); overflow:hidden; } .news_rec .nr_con ul li a .nr_wrap h5{ float:left; font-size:16px; color:#fff; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 推荐课程 */ .cour_rec .cr_con ul{ margin-bottom:-20px; } .cour_rec .cr_con ul li{ margin-bottom:20px; } .cour_rec .cr_con ul li a{ display:block; color:#333; } .cour_rec .cr_con ul li a .cr_img{ display:block; overflow:hidden; } .zx_lbr .cour_rec .cr_con ul li a .cr_img{ height:200px; } .zx_lrb .cour_rec .cr_con ul li a .cr_img{ height:250px; } .cour_rec .cr_con ul li a .cr_img img{ display:block; width:100%; height:100%; transition:all 2s; } .cour_rec .cr_con ul li a .cr_wrap{ background:#fff; } .cour_rec .cr_con ul li a .cr_wrap .cr_tit{ font-size:16px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cour_rec .cr_con ul li a .cr_wrap .cr_info{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-end; align-items:flex-end; font-size:14px; color:#666; } .cour_rec .cr_con ul li a .cr_wrap .cr_info>*{ max-width:49%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cour_rec .cr_con ul li a .cr_wrap .cr_info .cr_price{ color:#cb0101; } .cour_rec .cr_con ul li a .cr_wrap .cr_info .cr_price em{ font-size:18px; font-family:arial; } /* 资质服务右侧 */ .qual_rec.cour_rec .cr_con ul li a .cr_wrap .cr_tit{ text-align:center; } /* 课程培训详情 */ .course_show .cs_top{ -webkit-justify-content:space-between; justify-content:space-between; } .course_show .cs_top .cs_img{ display:block; width:380px; } .course_show .cs_top .cs_img img{ display:block; width:100%; } .course_show .cs_top .cs_wrap{ width:440px; width:calc(100% - 400px); color:#333; } .course_show .cs_top .cs_wrap .cs_tit{ font-size:18px; font-weight:bold; line-height:1.5; } .course_show .cs_top .cs_wrap .cs_info{ font-size:14px; color:#666; } .course_show .cs_top .cs_wrap .cs_info li{ margin-top:6px; } .course_show .cs_top .cs_wrap .cs_bot{ -webkit-justify-content:space-between; justify-content:space-between; } .course_show .cs_top .cs_wrap .cs_bot .cs_price{ font-size:18px; color:#cb0101; font-weight:bold; } .course_show .cs_top .cs_wrap .cs_bot .cs_price em{ font-size:30px; font-weight:bold; font-family:arial; } .course_show .cs_top .cs_wrap .cs_bot .cs_btn{ padding:10px 45px; color:#cb0101; border:solid 1px #cb0101; border-radius:5px; } /* 详情标题 */ .dart_tit{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; padding-right:20px; } .dart_tit h3{ font-size:18px; color:#cb0101; font-weight:bold; padding-left:20px; position:relative; } .dart_tit h3:before{ content:""; position:absolute; width:5px; height:18px; background:#cb0101; top:50%; margin-top:-9px; left:0; } .dart_tit>i{ -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; margin-left:10px; height:1px; background:#cb0101; } /* 详情页 */ .detail_article .detail_w{ padding:30px 20px 40px; } /* 报名表单 */ .fix_entry{ position:fixed; bottom:0; width:100%; z-index:991; background:#cb0101; color:#fff; background:rgba(203,1,1,.9); transition:all .8s; } .fix_entry.fix_en_hide{ left:-100%; } .fix_entry.fix_en_show{ left:0; } .fix_entry .center_box{ width:910px; position:relative; } .fix_entry .en_close{ position:absolute; top:10px; right:0; cursor:pointer; } .fix_entry .en_close .iconfont{ font-size:28px; } .fix_entry .entry_box .en_tit{ font-size:20px; font-weight:bold; text-align:center; } .fix_entry .entry_box .en_form ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; justify-content:space-between; } .fix_entry .entry_box .en_form ul li{ width:48%; margin-top:20px; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } .fix_entry .entry_box .en_form ul li .en_name, .fix_entry .entry_box .en_form ul li .en_con input, .fix_entry .entry_box .en_form ul li.en_vfy .en_send{ font-size:14px; } .fix_entry .entry_box .en_form ul li .en_name{ line-height:36px\9; line-height:36px\9\0; } .fix_entry .entry_box .en_form ul li .en_con{ width:356px; width:calc(100% - 80px); -webkit-justify-content:space-between; justify-content:space-between; } .fix_entry .entry_box .en_form ul li .en_con input{ display:block; width:100%; height:36px; background:#fff; border-radius:5px; padding:0 10px; color:#333; } .fix_entry .entry_box .en_form ul li.en_vfy .en_con input{ width:67%; } .fix_entry .entry_box .en_form ul li.en_vfy .en_send{ line-height:36px; text-align:center; border-radius:5px; background:#fff; color:#cb0101; cursor:pointer; width:30%; transition:all .35s; } .fix_entry .entry_box .en_form ul li.en_tel .header_tel{ padding-left:7%; } .fix_entry .entry_box .en_form ul li.en_tel .header_tel .iconfont, .fix_entry .entry_box .en_form ul li.en_tel .header_tel span, .fix_entry .entry_box .en_form ul li.en_tel .header_tel p{ color:#fff; } .fix_entry .entry_box .en_form ul li.en_submit .en_con input{ font-size:17px; color:#fff; background:#ffae00; cursor:pointer; transition:all .35s; } .entry_turn_btn{ -webkit-align-items:center; align-items:center; background:rgba(203,1,1,.8); border-radius:0 200px 200px 0; padding:12px 20px 12px 20px; color:#fff; left:-200px; position:fixed; font-size:15px; bottom:10%; z-index:9; cursor:pointer; transition:all .5s; } .entry_turn_btn span{ margin-right:5px; } .entry_turn_btn.entry_turn_btn_show{ left:0; } /* 资质服务 */ .qual_service .qs_s1 .qs_top ul{ margin-left:-20px; margin-bottom:-20px; } .qual_service .qs_s1 .qs_top ul li{ width:25%; margin-bottom:20px; } .qual_service .qs_s1 .qs_top ul li a{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; margin-left:20px; padding:30px 25px; color:#fff; border-radius:5px; background:#fc9f4e; background:-webkit-linear-gradient(bottom,#fc9f4e,#fec492); background:-moz-linear-gradient(bottom,#fc9f4e,#fec492); background:-o-linear-gradient(bottom,#fc9f4e,#fec492); background:linear-gradient(to top,#fc9f4e,#fec492); } .qual_service .qs_s1 .qs_top ul li:nth-of-type(4n-3) a{ background:#39c682; background:-webkit-linear-gradient(bottom,#39c682,#70d6a5); background:-moz-linear-gradient(bottom,#39c682,#70d6a5); background:-o-linear-gradient(bottom,#39c682,#70d6a5); background:linear-gradient(to top,#39c682,#70d6a5); } .qual_service .qs_s1 .qs_top ul li:nth-of-type(4n-3) a .qs_icon{ background:#35bf7c; } .qual_service .qs_s1 .qs_top ul li:nth-of-type(4n-2) a{ background:#fa7776; background:-webkit-linear-gradient(bottom,#fa7776,#faabaa); background:-moz-linear-gradient(bottom,#fa7776,#faabaa); background:-o-linear-gradient(bottom,#fa7776,#faabaa); background:linear-gradient(to top,#fa7776,#faabaa); } .qual_service .qs_s1 .qs_top ul li:nth-of-type(4n-2) a .qs_icon{ background:#fe7372; } .qual_service .qs_s1 .qs_top ul li:nth-of-type(4n-1) a{ background:#3fa9fd; background:-webkit-linear-gradient(bottom,#3fa9fd,#84c8fe); background:-moz-linear-gradient(bottom,#3fa9fd,#84c8fe); background:-o-linear-gradient(bottom,#3fa9fd,#84c8fe); background:linear-gradient(to top,#3fa9fd,#84c8fe); } .qual_service .qs_s1 .qs_top ul li:nth-of-type(4n-1) a .qs_icon{ background:#3fa5f4; } .qual_service .qs_s1 .qs_top ul li a .qs_icon{ width:100px; height:100px; line-height:100px; text-align:center; border-radius:50%; background:#f79845; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont{ font-size:56px; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont.icon-biaozhunchanpin{ font-size:50px; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap{ width:100px; text-align:center; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap h4{ font-size:20px; font-weight:bold; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap i{ display:block; text-align:center; line-height:30px; border-radius:200px; background:rgba(255,255,255,.3); transition:all .35s; } .qual_service .qs_s1 .qs_bot .qs_tit{ text-align:center; } .qual_service .qs_s1 .qs_bot .qs_tit span, .qual_service .qs_s1 .qs_bot .qs_tit h3{ position:relative; } .qual_service .qs_s1 .qs_bot .qs_tit span{ display:inline-block; padding:0 100px; } .qual_service .qs_s1 .qs_bot .qs_tit h3{ padding:0 25px; font-size:24px; font-weight:bold; color:#333; } .qual_service .qs_s1 .qs_bot .qs_tit span:before, .qual_service .qs_s1 .qs_bot .qs_tit span:after, .qual_service .qs_s1 .qs_bot .qs_tit h3:before, .qual_service .qs_s1 .qs_bot .qs_tit h3:after{ content:""; position:absolute; top:50%; } .qual_service .qs_s1 .qs_bot .qs_tit span:before, .qual_service .qs_s1 .qs_bot .qs_tit span:after{ width:100px; height:1px; background:#cb0101; } .qual_service .qs_s1 .qs_bot .qs_tit h3:before, .qual_service .qs_s1 .qs_bot .qs_tit h3:after{ width:5px; height:5px; border-radius:50%; background:#cb0101; margin-top:-2px; } .qual_service .qs_s1 .qs_bot .qs_tit span:before, .qual_service .qs_s1 .qs_bot .qs_tit h3:before{ left:0; } .qual_service .qs_s1 .qs_bot .qs_tit span:after, .qual_service .qs_s1 .qs_bot .qs_tit h3:after{ right:0; } .qual_service .qs_s1 .qs_bot .qs_con{ width:750px; margin:0 auto; } .qual_service .qs_s1 .qs_bot .qs_sel{ background:#fff; overflow:hidden; border-radius:10px; -webkit-justify-content:space-between; justify-content:space-between; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label1{ width:29%; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label2{ width:49%; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label2:before{ content:""; position:absolute; top:10px; bottom:10px; width:1px; background:#666; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label{ position:relative; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label .iconfont{ position:absolute; color:#666; right:20px; top:50%; transform:translateY(-50%); pointer-events:none; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label select{ display:block; width:100%; padding:15px 25px; font-size:16px; color:#333; } .qual_service .qs_s1 .qs_bot .qs_sel button{ width:22%; background:#999; color:#fff; cursor:pointer; transition:all .35s; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .qual_service .qs_s1 .qs_bot .qs_sel button .iconfont{ font-size:26px; margin-right:10px; } .qual_service .qs_s1 .qs_bot .qs_sel button span{ font-size:16px; font-weight:bold; } .qual_service .qs_s1 .qs_bot .qs_hot{ -webkit-justify-content:space-between; justify-content:space-between; font-size:14px; } .qual_service .qs_s1 .qs_bot .qs_hot span, .qual_service .qs_s1 .qs_bot .qs_hot a{ color:#666; line-height:2; } .qual_service .qs_s1 .qs_bot .qs_hot .qs_a{ width:700px; width:calc(100% - 50px); } .qual_service .qs_s1 .qs_bot .qs_hot .qs_a a{ margin-right:10px; } .qual_service .qs_s2{ background:#fff; } .qual_service .qs_s2 .center_box{ -webkit-justify-content:space-between; justify-content:space-between; } .qual_service .qs_s2 .qs_left{ width:710px; } .qual_service .qs_s2 .qs_left .qs_tit{ font-size:24px; color:#cb0101; font-weight:bold; text-align:center; } .qual_service .qs_s2 .qs_left .qs_con ul{ -webkit-justify-content:space-between; justify-content:space-between; } .qual_service .qs_s2 .qs_left .qs_con ul li{ width:210px; border-radius:5px; padding:25px 10px; box-shadow:0 0 10px rgba(0,0,0,.1); text-align:center; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon{ display:inline-block; width:110px; height:110px; line-height:110px; text-align:center; color:#fff; border-radius:50%; background:#cb0101; background:-webkit-linear-gradient(bottom,#cb0101,#fb5e5e); background:-moz-linear-gradient(bottom,#cb0101,#fb5e5e); background:-o-linear-gradient(bottom,#cb0101,#fb5e5e); background:linear-gradient(to top,#cb0101,#fb5e5e); } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon .iconfont{ font-size:70px; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon .iconfont.icon-rocket-full{ font-size:60px; } .qual_service .qs_s2 .qs_left .qs_con ul li h4{ font-size:24px; color:#cb0101; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_w{ font-size:18px; color:#333; } .qual_service .qs_s2 .qs_right{ background:#cb0101; width:380px; color:#fff; border-radius:10px; } .qual_service .qs_s2 .qs_right .qs_tit{ font-size:18px; text-align:center; } .qual_service .qs_s2 .qs_right .qs_form ul li input{ display:block; width:100%; background:#fff; height:40px; border-radius:200px; font-size:14px; color:#333; padding:0 20px; } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_vfy{ -webkit-justify-content:space-between; justify-content:space-between; } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_vfy input{ width:60%; } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_vfy .qs_send{ font-size:14px; height:40px; line-height:40px; background:#fff; border-radius:200px; text-align:center; color:#cb0101; width:37%; cursor:pointer; transition:all .35s; } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_submit input{ cursor:pointer; background:#FFAE00; color:#fff; font-size:18px; transition:all .35s; font-weight:bold; } .qual_service .qs_s3 .qs_tit{ text-align:center; line-height:1.5; } .qual_service .qs_s3 .qs_tit span, .qual_service .qs_s3 .qs_tit h3{ font-size:24px; font-weight:bold; } .qual_service .qs_s3 .qs_tit span{ color:#cb0101; } .qual_service .qs_s3 .qs_tit h3{ coloe:#333; } .qual_service .qs_s3 .qs_ctit{ position:relative; width:83%; margin:0 auto; transform:translateY(50%); } .qual_service .qs_s3 .qs_ctit .qs_vs{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin:-50px 0 0 -50px; } .qual_service .qs_s3 .qs_ctit .qs_vs img{ display:block; width:100%; height:100%; } .qual_service .qs_s3 .qs_ctit h4{ width:50%; font-size:24px; padding:12px 115px; color:#fff; } .qual_service .qs_s3 .qs_red{ text-align:right; } .qual_service .qs_s3 .qs_ctit .qs_red{ background:#cb0101; border-radius:200px 0 0 200px; } .qual_service .qs_s3 .qs_ctit .qs_grey{ background:#666; border-radius:0 200px 200px 0; } .qual_service .qs_s3 .qs_ccon{ background:url("../images/qs_vs_bg.png") repeat-y center center; padding:70px 60px 40px; } .qual_service .qs_s3 .qs_ccon li{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; margin-top:14px; } .qual_service .qs_s3 .qs_ccon li .qs_red, .qual_service .qs_s3 .qs_ccon li .qs_grey{ width:39%; font-size:18px; } .qual_service .qs_s3 .qs_ccon li .qs_red{ color:#cb0101; } .qual_service .qs_s3 .qs_ccon li .qs_grey{ color:#333; } .qual_service .qs_s3 .qs_ccon li .qs_tag{ padding:6px 20px; font-size:18px; color:#fff; border-radius:200px; background:#cb0101; } .qual_service .qs_stit{ text-align:center; font-size:0; } .qual_service .qs_stit h3{ font-size:24px; font-weight:bold; } .qual_service .qs_stit i{ display:inline-block; width:40px; height:1px; background:#cb0101; } .qual_service .qs_s4 .qs_con .qs_img{ display:inline-block; max-width:100%; } .qual_service .qs_s4 .qs_con .qs_img_m{ display:none; } .qual_service .qs_s4 .qs_con .qs_img img{ display:block; max-width:100%; } .qual_service .qs_s5{ background:#fff; } .qual_service .qs_s5 .center_box{ width:1220px; } .qual_service .qs_s5 .qs_con{ position:relative; } .qual_service .qs_s5 .swiper-pagination{ position:static; width:100%; text-align:center; } .qual_service .qs_s5 .swiper-pagination-bullet{ width:15px; height:15px; border-radius:50%; background:none; border:solid 2px #cb0101; opacity:1; margin:0 5px; } .qual_service .qs_s5 .swiper-pagination-bullet-active{ background:#cb0101; } .qual_service .qs_s5 .qs_slist ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-bottom:-30px; margin-left:-30px; } .qual_service .qs_s5 .qs_slist ul>li{ width:50%; margin-bottom:30px; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss{ margin-left:30px; -webkit-justify-content:space-between; justify-content:space-between; color:#333; transition:all .35s; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_img{ display:block; width:285px; height:190px; overflow:hidden; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_img img{ display:block; width:100%; height:100%; transition:all 2s; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_wrap{ padding:20px 20px 0; width:300px; width:calc(100% - 285px); border:solid 1px #e5e5e5; border-left:none; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_tit{ font-size:16px; font-weight:bold; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_tit, .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_type, .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_date, .qual_service .qs_s5 .qs_slist ul>li .qs_ss ol li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_type, .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_date{ display:block; font-size:14px; color:#666; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_date{ color:#cb0101; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss ol{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss ol li{ width:49%; font-size:12px; color:#666; margin-top:6px; } .qs_adv ul{ -webkit-justify-content:space-between; justify-content:space-between; } .qs_adv ul li{ width:23%; padding:30px 15px; background:rgba(203,1,1,.8); color:#fff; border-radius:10px; text-align:center; transition:all .35s; } .qs_adv ul li .qs_icon{ display:inline-block; width:100px; height:100px; line-height:96px; text-align:center; border:solid 2px #fff; border-radius:50%; transition:border-color .35s; } .qs_adv ul li .qs_icon .iconfont{ font-size:52px; } .qs_adv ul li h4{ font-size:30px; } .qs_adv ul li .qs_w{ font-size:16px; line-height:1.6; } /* 内页-banner */ .inner_banner{ overflow:hidden; position:relative; height:418px; } .inner_banner>img{ position:absolute; height:100%; top:0; left:50%; margin-left:-960px; } .inner_banner .ser_swrap{ position:absolute; z-index:3; top:0; left:50%; margin-left:-600px; height:100%; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit span:before, .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit span:after, .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit h3:before, .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit h3:after{ display:none; } .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit h3{ color:#fff; font-size:30px; } .qual_service.ser_swrap .qs_s1 .qs_bot .qs_hot span, .qual_service.ser_swrap .qs_s1 .qs_bot .qs_hot a{ color:#fff; } /* 资质详情 */ .service_show>.center_box{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; } .service_show .ser_left{ width:220px; /*position:-webkit-sticky; position:sticky; top:160px; left:0;*/ } .service_show .ser_left .ser_nav{ background:#fff; } .service_show .ser_left .ser_nav .ser_ntit{ position:relative; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; border-bottom:solid 1px #f7f7f7; font-size:16px; cursor:pointer; } .service_show .ser_left .ser_nav li.active .ser_ntit{ color:#cb0101; } .service_show .ser_left .ser_nav li.active .ser_ntit h3{ font-weight:bold; } .service_show .ser_left .ser_nav .ser_ntit .iconfont{ transition:transform .35s; } .service_show .ser_left .ser_nav li.active .ser_ntit .iconfont{ transform:rotate(180deg); } .service_show .ser_left .ser_nav .ser_ntit:before{ content:""; position:absolute; top:12px; bottom:12px; width:3px; background:#cb0101; left:0; } .service_show .ser_left .ser_nav .ser_ntit, .service_show .ser_left .ser_nav .ser_ncon li a{ padding:0 20px 0 30px; height:40px; line-height:40px; } .service_show .ser_left .ser_nav .ser_ncon{ transition:all .35s; max-height:0px; overflow:hidden; } .service_show .ser_left .ser_nav li.active .ser_ncon{ max-height:2000px; } .service_show .ser_left .ser_nav .ser_ncon li+li{ border-top:solid 1px #f7f7f7; } .service_show .ser_left .ser_nav .ser_ncon li a{ display:block; font-size:14px; color:#333; } .service_show .ser_right{ width:960px; } .detail_article .dart_mtit{ text-align:center; border-bottom:dashed 1px #ccc; } .detail_article .dart_mtit h3{ font-weight:bold; font-size:20px; color:#333; } .detail_article .dart_mtit span{ display:inline-block; font-size:12px; color:#999; padding:0 20px; } .dart_btn{ text-align:center; } .dart_btn a{ display:inline-block; border-radius:200px; font-size:18px; color:#fff; background:#cb0101; padding:10px 30px; } .detail_article .dart_btn a{ background:#999; } /* 热门资讯 */ .hot_news .hot_ntit{ padding-left:20px; position:relative; font-size:16px; font-weight:bold; color:#cb0101; } .hot_news .hot_ntit:before{ content:""; position:absolute; width:3px; height:16px; background:#cb0101; left:0; top:50%; margin-top:-8px; } .hot_news .hot_ncon{ padding-top:0; } .hot_news .hot_ncon ul li+li{ margin-top:10px; } .hot_news .hot_ncon ul li a{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; color:#333; } .hot_news .hot_ncon ul li p{ font-size:14px; position:relative; padding-left:10px; max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hot_news .hot_ncon ul li p:before{ content:""; position:absolute; width:4px; height:4px; background:#cb0101; left:0; top:50%; margin-top:-2px; } .hot_news .hot_ncon ul li span{ font-size:12px; color:#666; } /* 筛选 */ .zx_filter .zx_fcon{ padding:0 20px; font-size:14px; color:#333; } .zx_filter .zx_fcon ul>li+li{ border-top:dashed 1px #adadad; } .zx_filter .zx_fcon .zx_name{ width:80px; } .zx_filter .zx_fcon .zx_list{ width:1080px; width:calc(100% - 80px); } .zx_filter .zx_fcon .zx_list ol{ overflow:hidden; margin-bottom:-5px; margin-right:-25px; } .zx_filter .zx_fcon .zx_list ol li{ float:left; margin-right:25px; margin-bottom:5px; } .zx_filter .zx_fcon .zx_list ol li a{ color:#333; } .zx_filter .zx_fcon .zx_list ol li.active a{ color:#cb0101; } /* 转让求购 */ .filter_bar{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; border-bottom:solid 2px #cb0101; } .filter_bar .filter_con ul li{ cursor:pointer; } .filter_bar .filter_con ul li a, .filter_bar .filter_con ul li .filter_ss{ -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; padding:0 25px; height:38px; color:#333; border-radius:10px 10px 0 0; transition:color .35s; } .filter_bar .filter_con ul li.active a, .filter_bar .filter_con ul li.active .filter_ss{ background:#cb0101; color:#fff; } .filter_bar .filter_con ul li span{ font-size:16px; } .filter_bar .filter_con ul li i{ width:8px; height:3px; position:relative; margin-left:4px; } .filter_bar .filter_con ul li i .filter_before, .filter_bar .filter_con ul li i .filter_after{ left:0; content:""; position:absolute; border-left:solid 4px transparent; border-right:solid 4px transparent; transition:all .35s; } .filter_bar .filter_con ul li i .filter_before{ border-bottom:solid 4px #999; bottom:100%; } .filter_bar .filter_con ul li i .filter_after{ border-top:solid 4px #999; top:100%; } .filter_bar .filter_sear{ border:solid 1px #ddd; border-radius:3px; } .filter_bar .filter_sear input, .filter_bar .filter_sear button{ height:28px; } .filter_bar .filter_sear input{ width:160px; padding:0 10px; color:#333; font-size:12px; } .filter_bar .filter_sear button{ width:40px; cursor:pointer; transition:all .35s; } .filter_bar .filter_con ul li.filter_up, .filter_bar .filter_con ul li.filter_up .filter_ss, .filter_bar .filter_con ul li.filter_down, .filter_bar .filter_con ul li.filter_down .filter_ss{ color:#cb0101; } .filter_bar .filter_con ul li.filter_up i .filter_before{ border-bottom-color:#cb0101; } .filter_bar .filter_con ul li.filter_down i .filter_after{ border-top-color:#cb0101; } .filter_bar .filter_sear button .iconfont{ font-size:20px; } .inner_trpu_list{ padding:0 20px; } .inner_trpu_list ul>li{ position:relative; border-bottom:dashed 1px #ccc; } .inner_trpu_list ul>li .tp_a{ display:block; color:#333; } .inner_trpu_list ul>li .tp_a .tp_top, .inner_trpu_list ul>li .tp_a .tp_top .tp_tit{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } .inner_trpu_list ul>li .tp_a .tp_top .tp_tit h4{ font-weight:bold; width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_trpu_list ul>li .tp_a .tp_top .tp_tag{ font-size:12px; padding:6px 13px; border-radius:200px; margin-right:10px; } .inner_trpu_list ul>li.tp_qg .tp_a .tp_top .tp_tag{ color:#cb0101; background:#f7d9d9; } .inner_trpu_list ul>li.tp_zr .tp_a .tp_top .tp_tag{ color:#0882ff; background:#daecff; } .inner_trpu_list ul>li .tp_a .tp_top .tp_date{ font-size:14px; color:#666; } .inner_trpu_list ul>li .tp_a .tp_top .tp_price{ font-weight:bold; color:#cb0101; font-size:14px; width:100px; text-align:center; } .inner_trpu_list ul>li .tp_a .tp_top .tp_price em{ font-size:24px; font-weight:bold; } .inner_trpu_list ul>li .tp_a .tp_bot li{ font-size:14px; color:#333; line-height:30px; } .inner_trpu_list ul>li .tp_a .tp_bot li+li{ margin-left:50px; } .inner_trpu_list ul>li .tp_btn{ position:absolute; width:100px; height:30px; line-height:28px; border-radius:5px; font-size:14px; text-align:center; right:0; bottom:20px; } .inner_trpu_list ul>li.tp_qg .tp_btn{ color:#cb0101; border:solid 1px #cb0101; } .inner_trpu_list ul>li.tp_zr .tp_btn{ color:#0882ff; border:solid 1px #0882ff; } .tp_pgs{ padding:0 20px; -webkit-justify-content:space-between; justify-content:space-between; } .tp_pgs .tp_total{ font-size:14px; color:#333; } .tp_pgs .list_pages{ max-width:80%; } .zx_rele_box{ -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .zx_rele_box .zx_rele_icon img{ display:block; max-width:160px; } .zx_rele_box .zx_rele_wrap{ margin-left:30px; max-width:360px; } .zx_rele_box .zx_rele_wrap>h5{ font-size:16px; color:#333; } .zx_rele_box .zx_rele_wrap>span{ display:block; font-size:12px; color:#666; } .zx_rele_box .zx_rele_wrap .zx_rele_a{ display:inline-block; padding:10px 30px; border-radius:200px; background:#cb0101; font-size:16px; color:#fff; } /* 求购转让表单 */ .qgzr_form{ padding-top:10px; } .qgzr_form .qgzr_tabs{ -webkit-align-items:flex-end; align-items:flex-end; } .qgzr_form .qgzr_tabs li{ width:50%; font-size:18px; font-weight:bold; cursor:pointer; background:#fff; border-radius:10px 10px 0 0; height:50px; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; transition:all .35s; } .qgzr_form .qgzr_tabs li.active{ height:60px; color:#fff; margin-top:-10px; } .qgzr_form .qgzr_tabs li.qgzr_qg.active{ background:#f34848; } .qgzr_form .qgzr_tabs li.qgzr_zr.active{ background:#47a2ff; } .qgzr_form .qgzr_con{ overflow:hidden; border-radius:0 0 10px 10px; position:relative; } .qgzr_form .qgzr_con .qgzr_item{ display:none; } .qgzr_form .qgzr_con .qgzr_item:nth-of-type(1){ display:block; } .qgzr_form .qgzr_con .qgzr_item.qgzr_qg{ background:#f34848; background:-webkit-linear-gradient(bottom,#cb0101,#f34848); background:-moz-linear-gradient(bottom,#cb0101,#f34848); background:-o-linear-gradient(bottom,#cb0101,#f34848); background:linear-gradient(to top,#cb0101,#f34848); } .qgzr_form .qgzr_con .qgzr_item.qgzr_zr{ background:#47a2ff; background:-webkit-linear-gradient(bottom,#0882ff,#47a2ff); background:-moz-linear-gradient(bottom,#0882ff,#47a2ff); background:-o-linear-gradient(bottom,#0882ff,#47a2ff); background:linear-gradient(to top,#0882ff,#47a2ff); } .qgzr_form .qgzr_con .qgzr_item .qgzr_tit{ font-size:16px; text-align:center; color:#fff; } .qgzr_form .qgzr_con .qgzr_fcon{ border-radius:10px; } .qgzr_form .qgzr_con .qgzr_wrap{ padding-bottom:130px; background:url("../images/qgzr_bg.png") no-repeat center bottom; background-size:100%; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_w{ position:relative; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_w input, .qgzr_form .qgzr_con .qgzr_wrap .qgzr_city select, .qgzr_form .qgzr_con .qgzr_wrap .qgzr_vfy .qgzr_send{ display:block; width:100%; font-size:14px; color:#333; height:40px; padding:0 20px; border:solid 1px #e5e5e5; border-radius:200px; transition:all .35s; } .qgzr_form .qgzr_con .qgzr_wrap ul li+li{ margin-top:10px; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_w .qgzr_name{ color:#cb0101; position:absolute; left:10px; font-size:14px; top:13px; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_city{ -webkit-justify-content:space-between; justify-content:space-between; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_city label{ position:relative; width:49%; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_city label .iconfont{ position:absolute; right:15px; top:0; line-height:40px; color:#999; pointer-events:none; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_vfy{ -webkit-justify-content:space-between; justify-content:space-between; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_vfy .qgzr_w{ width:56%; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_vfy .qgzr_send{ width:42%; text-align:center; line-height:38px; cursor:pointer; transition:all .35s; } .qgzr_form .qgzr_con .qgzr_qg .qgzr_wrap .qgzr_vfy .qgzr_send{ color:#cb0101; } .qgzr_form .qgzr_con .qgzr_zr .qgzr_wrap .qgzr_vfy .qgzr_send{ color:#0882ff; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_tip{ font-size:14px; color:#666; padding-left:10px; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_submit input{ display:block; width:100%; font-size:18px; height:40px; border-radius:200px; color:#fff; background:#FFAE00; cursor:pointer; transition:all .35s; } .qgzr_form .qgzr_con .qgzr_swiper{ position:absolute; bottom:20px; left:0; width:100%; padding:0 20px; color:#fff; } .qgzr_form .qgzr_con .qgzr_swiper .qgzr_stit{ font-size:14px; padding:0 100px; position:relative; text-align:center; } .qgzr_form .qgzr_con .qgzr_swiper .qgzr_stit:before, .qgzr_form .qgzr_con .qgzr_swiper .qgzr_stit:after{ content:""; position:absolute; width:100px; height:1px; border-top:dashed 1px #fff; top:50%; } .qgzr_form .qgzr_con .qgzr_swiper .qgzr_stit:before{ left:0; } .qgzr_form .qgzr_con .qgzr_swiper .qgzr_stit:after{ right:0; } .qgzr_form .qgzr_con .qgzr_swiper .swiper-wrapper{ height:54px !important; } .qgzr_form .qgzr_con .qgzr_swiper .swiper-slide{ overflow:hidden; height:27px !important; line-height:27px; font-size:14px; } .qgzr_form .qgzr_con .qgzr_swiper .swiper-slide p{ float:left; width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qgzr_form .qgzr_con .qgzr_swiper .swiper-slide span{ float:right; } .qgzr_form .qgzr_con .qgzr_swiper.job_swiper .swiper-slide span{ float:left; } .qgzr_form .qgzr_con .qgzr_swiper.job_swiper .swiper-slide p{ float:right; } /* 弹出发布表单 */ .rele_pop_mask{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:992; display:none; } .rele_pop_box{ background:#e43636; background:-webkit-linear-gradient(top,#cb0101,#f15252,#cb0101); background:-moz-linear-gradient(top,#cb0101,#f15252,#cb0101); background:-o-linear-gradient(top,#cb0101,#f15252,#cb0101); background:linear-gradient(to top,#cb0101,#f15252,#cb0101); position:fixed; top:50%; left:50%; margin-left:-360px; margin-top:-250px; z-index:993; overflow:hidden; border-radius:10px; display:none; } .rele_pop_box.rele_pop_job{ background:#1f8eff; background:-webkit-linear-gradient(top,#0882ff,#47a2ff,#0882ff); background:-moz-linear-gradient(top,#0882ff,#47a2ff,#0882ff); background:-o-linear-gradient(top,#0882ff,#47a2ff,#0882ff); background:linear-gradient(to top,#0882ff,#47a2ff,#0882ff); } .rele_pop_box .rele_pop_wrap{ width:720px; height:500px; padding-bottom:70px; background:url("../images/rele_pop_bg.png") no-repeat center center; background-size:100% 100%; } .rele_pop_box .rele_close{ position:absolute; color:#fff; right:15px; top:15px; transition:color .35s; cursor:pointer; } .rele_pop_box .rele_close .iconfont{ font-size:26px; } .rele_pop_box .rele_pop_tit{ text-align:center; color:#fff; } .rele_pop_box .rele_pop_tit h4{ font-size:24px; font-weight:bold; } .rele_pop_box .rele_pop_tit .rele_pop_exp{ display:block; font-size:14px; } .rele_pop_box .rele_pop_con{ border-radius:10px; } .rele_pop_box .rele_pop_con ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .rele_pop_box .rele_pop_con ul li{ width:300px; } .rele_pop_box .rele_pop_con ul li.rp_full{ width:100%; } .rele_pop_box .rele_pop_con ul li .rp_w{ position:relative; } .rele_pop_box .rele_pop_con ul li .rp_w input, .rele_pop_box .rele_pop_con ul li.rp_city select, .rele_pop_box .rele_pop_con ul li.rp_vfy .rp_send{ display:block; padding:0 10px 0 60px; border:solid 1px #e5e5e5; font-size:14px; color:#333; height:40px; width:100%; border-radius:200px; transition:all .35s; } .rele_pop_box .rele_pop_con ul li .rp_w .tubiao{ position:absolute; left:15px; font-size:22px; color:#cb0101; top:0; line-height:40px; } .rele_pop_box.rele_pop_job .rele_pop_con ul li .rp_w .tubiao{ color:#0882ff; } .rele_pop_box .rele_pop_con ul li .rp_w .rp_im{ position:absolute; color:#cb0101; font-size:14px; top:13px; left:50px; } .rele_pop_box .rele_pop_con ul li.rp_city, .rele_pop_box .rele_pop_con ul li.rp_vfy{ -webkit-justify-content:space-between; justify-content:space-between; } .rele_pop_box .rele_pop_con ul li.rp_city label{ width:49%; position:relative; } .rele_pop_box .rele_pop_con ul li.rp_city .iconfont{ position:absolute; line-height:40px; right:15px; color:#999; top:0; pointer-events:none; } .rele_pop_box .rele_pop_con ul li.rp_city select{ padding:0 20px; } .rele_pop_box .rele_pop_con ul li.rp_vfy .rp_w{ width:56%; } .rele_pop_box .rele_pop_con ul li.rp_vfy .rp_send{ padding:0; text-align:center; cursor:pointer; width:42%; line-height:38px; color:#cb0101; } .rele_pop_box.rele_pop_job .rele_pop_con ul li.rp_vfy .rp_send{ color:#0882ff; } .rele_pop_box .rele_pop_con ul li.rp_tip{ font-size:14px; color:#666; width:100%; } .rele_pop_box .rele_pop_con ul li.rp_submit{ width:100%; -webkit-justify-content:center; justify-content:center; text-align:center; } .rele_pop_box .rele_pop_con ul li.rp_submit input{ display:inline-block; width:300px; height:40px; background:#cb0101; color:#fff; font-size:18px; border-radius:200px; cursor:pointer; transition:all .35s; } .rele_pop_job .rele_pop_con ul li.rp_submit input{ background:#0882ff; } /* 转让求购详情页 */ .qgzr_show .qgzr_top .qgzr_tit{ border-bottom:dashed 1px #ccc; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-start; align-items:flex-start; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit .tp_tag{ font-size:12px; padding:6px 13px; border-radius:200px; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit h4{ line-height:26px; width:700px; width:calc(100% - 60px); font-size:18px; font-weight:bold; color:#333; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit .tp_tag_qg{ color:#cb0101; background:#f7d9d9; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit .tp_tag_zr{ color:#0882ff; background:#daecff; } .qgzr_show .qgzr_top .qgzr_tit .qgzr_info span{ font-size:14px; color:#666; display:inline-block; margin-right:100px; } .qgzr_show .qgzr_bot{ padding:0 20px; } .qgzr_show .qgzr_bot ol{ overflow:hidden; } .qgzr_show .qgzr_bot ol li{ float:left; width:33.33333%; font-size:14px; color:#333; } .qgzr_show .qgzr_bot ol li>p{ display:inline-block; } .qgzr_show .dart_btn{ text-align:left; padding-left:20px; padding-right:20px; } .qgzr_show .zx_rele_box{ border-top:dashed 1px #ccc; margin:0 20px; } .qgzr_qs .qs_item{ background:#f7f7f7; border-radius:5px; padding:20px 20px 20px 60px; } .qgzr_qs .qs_item .qs_tit{ position:relative; } .qgzr_qs .qs_item .qs_tit h4{ font-size:16px; font-weight:bold; line-height:1.6; color:#cb0101; } .qgzr_qs .qs_item .qs_tit .qs_num{ position:absolute; left:-45px; width:32px; height:26px; border-radius:3px 3px 3px 0; background:#cb0101; color:#fff; line-height:26px; text-align:center; } .qgzr_qs .qs_item .qs_tit .qs_num:before{ content:""; position:absolute; left:0; bottom:-6px; border-top:solid 6px transparent; border-bottom:solid 6px transparent; border-left:solid 6px #CB0101; } .qgzr_qs .qs_item .qs_tit .qs_num em{ position:relative; z-index:3; font-size:18px; font-family:twcen; text-transform:uppercase; } .qgzr_qs .qs_item .qs_con{ border-top:dashed 1px #cb0101; } .qgzr_qs .qs_item.qs_row4 ol li{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } .qgzr_qs .qs_item.qs_row4 ol li+li{ margin-top:20px; } .qgzr_qs .qs_item.qs_row4 ol li .qs_name{ width:85px; height:32px; line-height:32px; text-align:center; background:#cb0101; border-radius:5px; color:#fff; font-size:14px; position:relative; } .qgzr_qs .qs_item.qs_row4 ol li .qs_name:before{ content:""; position:absolute; border-top:solid 6px transparent; border-bottom:solid 6px transparent; border-left:solid 5px #cb0101; left:100%; top:50%; margin-top:-6px; } .qgzr_qs .qs_item.qs_row4 ol li .qs_w{ width:576px; } .qgzr_qs .qs_item.qs_col4 ol{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qgzr_qs .qs_item.qs_col4 ol li{ width:20%; text-align:center; } .qgzr_qs .qs_item.qs_col4 ol li .qs_name{ display:inline-block; width:70px; height:70px; border-radius:50%; border:solid 1px #cb0101; line-height:70px; text-align:center; color:#cb0101; } .qgzr_qs .qs_item.qs_col4 ol li .qs_name .iconfont{ font-size:40px; } .qgzr_qs .qs_item.qs_col4 ol li .qs_name .iconfont.icon-yingyezhizhao{ font-weight:600; opacity:.8; } .qgzr_qs .qs_item.qs_col4 ol li .qs_w{ line-height:1.5; } /* 人才服务 */ .inner_job{ padding:0 20px; } .inner_job .inner_job_tit ul, .inner_job .inner_job_list ol{ overflow:hidden; } .inner_job .inner_job_tit ul{ padding:15px 0; } .inner_job .inner_job_list a{ display:block; font-size:14px; color:#333; padding:15px 0; } .inner_job .inner_job_tit ul, .inner_job .inner_job_list a{ border-bottom:dashed 1px #ccc; } .inner_job .job_c{ float:left; width:10%; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_job .inner_job_tit .job_c{ font-size:16px; color:#666; } .inner_job .job_c.job_c1{ width:8%; } .inner_job .job_c.job_c2{ width:15%; } .inner_job .job_c.job_c5{ width:37%; } .inner_job .job_c.job_c6{ width:9%; } .inner_job .job_c.job_c7{ width:11%; } .inner_job .inner_job_list .job_c.job_c7{ font-family:arial; } /* 人才服务详情页 */ .job_show.qgzr_show .qgzr_top .qgzr_tit .tp_tit h4{ width:100%; } .zx_inblock{ display:inline-block; } /* 二级导航 */ .inner_subnav ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .inner_subnav ul li{ padding-bottom:6px; margin-right:20px; margin-bottom:5px; } .inner_subnav ul li a{ display:block; padding:8px 20px; color:#333; font-size:16px; border-radius:3px; position:relative; } .inner_subnav ul li a:before{ content:""; position:absolute; border-left:solid 10px transparent; border-right:solid 10px transparent; border-top:solid 6px #cb0101; top:100%; left:50%; margin-left:-10px; transform:translateY(-20px); opacity:0; } .inner_subnav ul li.active a{ background:#cb0101; color:#fff; } .inner_subnav ul li.active a:before{ transform:translateY(0px); opacity:1; } /* 资讯首页 */ .inner_news1 .news_s1 .news_pics{ width:500px; height:330px; overflow:hidden; } .inner_news1 .news_s1 .news_pics li{ display:none; } .inner_news1 .news_s1 .news_pics li:nth-of-type(1){ display:block; } .inner_news1 .news_s1 .news_pics li a{ display:block; height:330px; } .inner_news1 .news_s1 .news_pics li a img{ display:block; width:100%; height:100%; } .inner_news1 .news_s1 .news_wrap{ width:380px; background:#fff; } .inner_news1 .news_s1 .news_wrap .news_img{ display:none; } .inner_news1 .news_s1 .news_wrap ul li{ padding:0 15px; position:relative; } .inner_news1 .news_s1 .news_wrap ul li:before{ content:""; position:absolute; right:100%; z-index:3; top:50%; margin-top:-25px; border-top:solid 25px transparent; border-bottom:solid 25px transparent; border-right:solid 20px #fff; opacity:0; transform:translateX(50px); } .inner_news1 .news_s1 .news_wrap ul li.active{ z-index:2; box-shadow:0 0 10px rgba(0,0,0,.1); } .inner_news1 .news_s1 .news_wrap ul li.active:before{ opacity:1; transform:translateX(0); } .inner_news1 .news_s1 .news_wrap ul li.active+li a{ border-top-color:#fff; } .inner_news1 .news_s1 .news_wrap ul li a{ display:block; height:110px; padding:20px 0; color:#333; } .inner_news1 .news_s1 .news_wrap ul li+li a{ border-top:dashed 1px #ccc; } .inner_news1 .news_s1 .news_wrap .news_txt .news_tit{ font-size:16px; line-height:1.5; overflow:hidden; -webkit-line-clamp:2; -moz-line-clamp:2; -o-line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; -moz-box-orient:vertical; -o-box-orient:vertical; -webkit-box-orient:vertical; display:-webkit-box; display:-moz-box; display:-o-box; display:-webkit-box; } .inner_news1 .news_s1 .news_wrap .news_txt .news_date{ font-size:14px; color:#666; display:block; margin-top:10px; } .inner_news1 .news_s1 .news_wrap li.active .news_txt .news_tit{ font-weight:bold; } .inner_news1 .news_s2{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } .inner_news1 .news_s2 .news_name{ width:80px; height:80px; background:#cb0101; color:#fff; border-radius:3px; position:relative; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .inner_news1 .news_s2 .news_name:before{ content:""; position:absolute; left:100%; top:50%; margin-top:-10px; border-top:solid 10px transparent; border-bottom:solid 10px transparent; border-left:solid 8px #cb0101; } .inner_news1 .news_s2 .news_name span{ font-size:24px; line-height:1.2; letter-spacing:.1em; } .inner_news1 .news_s2 .news_wrap{ width:760px; } .inner_news1 .news_s2 .news_wrap li{ overflow:hidden; } .inner_news1 .news_s2 .news_wrap li a{ float:left; display:block; font-size:24px; font-weight:bold; color:#333; line-height:1.8; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_news1 .news_s3 .news_top{ border-bottom:dashed 1px #ccc; } .inner_news1 .news_s3 .news_top ul{ overflow:hidden; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .inner_news1 .news_s3 .news_top ul li{ float:left; width:48%; } .inner_news1 .news_s3 .news_top ul li:nth-of-type(even){ float:right; } .inner_news1 .news_s3 .news_top ul li a{ float:left; font-size:14px; color:#333; padding-left:12px; overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; position:relative; padding-top:5px; padding-bottom:5px; } .inner_news1 .news_s3 .news_top ul li a:before{ content:""; position:absolute; width:4px; height:4px; background:#cb0101; left:0; top:50%; margin-top:-2px; } .inner_news1 .news_s3 .news_bot .news_pics{ width:240px; } .inner_news1 .news_bot{ -webkit-justify-content:space-between; justify-content:space-between; } .inner_news1 .news_bot .news_pics ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-bottom:-10px; } .inner_news1 .news_bot .news_pics li{ width:49%; width:calc(50% - 5px); margin-bottom:10px; } .inner_news1 .news_bot .news_pics li:nth-of-type(1){ width:100%; } .inner_news1 .news_bot .news_pics li a{ display:block; position:relative; color:#fff; } .inner_news1 .news_bot .news_pics li a .news_img{ display:block; overflow:hidden; } .inner_news1 .news_s3 .news_bot .news_pics li a .news_img{ height:160px; } .inner_news1 .news_bot .news_pics li a .news_img img{ display:block; width:100%; height:100%; transition:all 2s; } .inner_news1 .news_bot .news_pics li a .news_w{ position:absolute; width:100%; left:0; bottom:0; background:rgba(0,0,0,.6); padding:10px; } .inner_news1 .news_bot .news_pics li a .news_w p{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_news1 .news_s3 .news_bot .news_txt{ width:580px; } .inner_news1 .news_bot .news_txt .news_first{ overflow:hidden; } .inner_news1 .news_bot .news_txt .news_first a{ float:left; font-size:24px; color:#333; font-weight:bold; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_news1 .news_bot .news_txt .news_con ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; position:relative; } .inner_news1 .news_bot .news_txt .news_con ul:before{ content:""; position:absolute; width:1px; top:10px; bottom:5px; background:#e5e5e5; left:50%; } .inner_news1 .news_bot .news_txt .news_con ul li{ width:46%; overflow:hidden; padding:6px 0; } .inner_news1 .news_bot .news_txt .news_con ul li a{ font-size:14px; color:#333; float:left; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_news1 .news_wtit{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } .inner_news1 .news_wtit h2{ font-size:18px; color:#333; padding-left:15px; position:relative; } .inner_news1 .news_wtit h2:before{ content:""; position:absolute; width:3px; background:#cb0101; height:18px; left:0; top:50%; margin-top:-9px; } .inner_news1 .news_wtit .news_line{ margin:0 15px; height:1px; background:#e5e5e5; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; } .inner_news1 .news_wtit .news_more{ font-size:16px; color:#999; } .inner_news1 .news_s4 .news_bot .news_pics{ width:380px; } .inner_news1 .news_s4 .news_bot .news_txt{ width:430px; } .inner_news1 .news_s4 .news_bot .news_txt .news_first a{ font-size:20px; } .inner_news1 .news_s4 .news_bot .news_pics li a .news_img{ height:120px; } .inner_news1 .news_s4 .news_bot .news_pics li:nth-of-type(1) a .news_img{ height:250px; } /* 资讯新闻 */ .inner_news2_list ul{ margin-bottom:-20px; } .inner_news2_list ul li a{ -webkit-justify-content:space-between; justify-content:space-between; color:#333; } .inner_news2_list ul li a .news_img{ width:270px; height:180px; overflow:hidden; } .inner_news2_list ul li a .news_img img{ display:block; width:100%; height:100%; transition:all .35s; } .inner_news2_list ul li a .news_txt{ width:610px; } .inner_news2_list ul li a .news_txt h3{ font-size:20px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .inner_news2_list ul li a .news_txt span{ display:block; font-size:14px; color:#999; font-family:arial; } .inner_news2_list ul li a .news_txt p{ font-size:14px; color:#666; line-height:1.7; max-height:69px; overflow:hidden; -webkit-line-clamp:3; -moz-line-clamp:3; -o-line-clamp:3; -webkit-line-clamp:3; -webkit-box-orient:vertical; -moz-box-orient:vertical; -o-box-orient:vertical; -webkit-box-orient:vertical; display:-webkit-box; display:-moz-box; display:-o-box; display:-webkit-box; } .inner_news2_list~.tp_pgs{ padding:40px 0 0 0; } .detail_article .dart_mtit ~ .detail_w{ padding-left:0; padding-right:0; } .detail_article .dart_mtit ~ .inner_pnpage, .detail_article .news_mtit ~ .inner_pnpage{ margin:0; } .detail_article .news_mtit ~ .detail_w{ padding-left:0; padding-right:0; } .news_mtit h3{ font-size:20px; color:#333; font-weight:bold; line-height:1.6; } .news_mtit .news_minfo{ overflow:hidden; margin-right:-80px; } .news_mtit .news_minfo span{ font-size:12px; color:#999; float:left; margin-right:80px; } /* 关于我们 */ .abo_tit{ text-align:center; font-size:0; } .abo_tit h2{ font-size:24px; color:#333; font-weight:bold; } .abo_tit i{ display:inline-block; width:30px; height:2px; background:#cb0101; } .abo_tit span{ display:block; font-size:18px; color:#cb0101; text-transform:uppercase; opacity:.2; } .abo_box .abo_con{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; } .abo_box .abo_con .abo_pics{ width:510px; height:320px; padding-right:60px; padding-bottom:20px; position:relative; } .abo_box .abo_con .abo_pics:before{ content:""; position:absolute; top:20px; right:0; bottom:0; left:60px; border:solid 1px #cb0101; } .abo_box .abo_con .abo_pics .swiper-container{ width:100%; height:100%; } .abo_box .abo_con .abo_pics .swiper-slide img{ display:block; width:100%; height:300px; } .abo_pics .swiper-pagination{ top:20px; bottom:0; right:0; left:450px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .abo_pics .swiper-pagination-bullet, .abo_s3 .swiper-pagination-bullet{ width:12px; height:12px; background:none; opacity:1; border:solid 1px #cb0101; border-radius:50%; transition:all .35s; } .abo_pics .swiper-pagination-bullet+.swiper-pagination-bullet{ margin-top:10px; } .abo_pics .swiper-pagination-bullet-active, .abo_s3 .swiper-pagination-bullet-active{ background:#cb0101; } .abo_box .abo_con .abo_wrap{ width:640px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:flex-end; align-items:flex-end; } .abo_box .abo_con .abo_wrap .abo_txt{ width:100%; } .abo_box .abo_con .abo_wrap .abo_w{ font-size:14px; color:#666; line-height:1.8; max-height:280px; overflow:hidden; } .abo_box .abo_con .abo_wrap .abo_sub_tit{ position:relative; } .abo_box .abo_con .abo_wrap .abo_sub_tit:before{ content:""; position:absolute; width:100px; height:1px; background:#cb0101; left:0; bottom:0; } .abo_box .abo_con .abo_wrap .abo_sub_tit h3{ font-size:18px; font-weight:bold; color:#333; } .about_box .abo_s2_tit{ text-align:center; } .about_box .abo_s2_tit span{ display:inline-block; padding:0 100px; position:relative; } .about_box .abo_s2_tit span h2{ padding:0 25px; position:relative; font-size:22px; color:#cb0101; } .about_box .abo_s2_tit span:before, .about_box .abo_s2_tit span:after, .about_box .abo_s2_tit span h2:before, .about_box .abo_s2_tit span h2:after{ content:""; position:absolute; top:50%; } .about_box .abo_s2_tit span:before, .about_box .abo_s2_tit span:after{ width:100px; height:1px; background:#cb0101; } .about_box .abo_s2_tit span h2:before, .about_box .abo_s2_tit span h2:after{ width:5px; height:5px; border:solid 1px #cb0101; border-radius:50%; margin-top:-2px; } .about_box .abo_s2_tit span:before, .about_box .abo_s2_tit span h2:before{ left:0; } .about_box .abo_s2_tit span:after, .about_box .abo_s2_tit span h2:after{ right:0; } .about_box .abo_s2 .abo_txt{ text-align:center; } .about_box .abo_s2 .abo_txt .abo_item{ display:inline-block; overflow:hidden; line-height:40px; } .about_box .abo_s2 .abo_txt .abo_item+.abo_item{ margin-left:50px; } .about_box .abo_s2 .abo_txt .abo_item>i{ float:left; width:40px; height:40px; line-height:38px; text-align:center; border:solid 1px #cb0101; border-radius:50%; font-size:18px; font-weight:bold; text-align:center; color:#cb0101; } .about_box .abo_s2 .abo_txt .abo_item>.abo_w{ float:left; margin-left:10px; font-size:16px; color:#333; } .about_box .abo_s2 .abo_exp{ text-align:center; text-align-last:center; font-size:16px; position:relative; } .about_box .abo_s2 .abo_exp:before{ content:""; position:absolute; top:0; left:37.5%; width:25%; border-top:dashed 1px #cb0101; } .about_box .abo_s3 .center_box{ box-shadow:0 0 20px rgba(0,0,0,.1); } .about_box .abo_s3 .abo_img{ width:500px; } .about_box .abo_s3 .abo_simg{ display:block; } .about_box .abo_s3 .abo_img img{ display:block; width:100%; } .about_box .abo_s3 .abo_wrap{ width:700px; position:relative; } .about_box .abo_s3 .abo_wrap .abo_s3_tit{ padding:8px 35px; color:#fff; font-size:22px; background:#cb0101; position:absolute; left:-25px; top:50px; } .about_box .abo_s3 .abo_txt{ font-size:16px; } .about_box .abo_s4 .qs_adv ul li, .qs_s6 .qs_adv ul li{ background:#fff; color:#cb0101; } .about_box .abo_s4 .qs_adv ul li .qs_icon, .qs_s6 .qs_adv ul li .qs_icon{ border-color:#cb0101; } .about_box .abo_s4 .qs_adv ul li .qs_w, .qs_s6 .qs_adv ul li .qs_w{ color:#333; } .abo_s6_list ul{ overflow:hidden; margin-left:-20px; margin-bottom:-20px; } .abo_s6_list ul li{ float:left; width:25%; margin-bottom:20px; } .abo_s6_list ul li .abo_ss{ display:block; margin-left:20px; height:190px; overflow:hidden; } .abo_s6_list ul li .abo_ss img{ display:block; width:100%; height:100%; transition:all 2s; } .abo_s6 .swiper-pagination{ position:static; width:100%; } .abo_s6 .swiper-pagination-bullet{ width:15px; height:15px; border:solid 2px #cb0101; background:none; opacity:1; margin:0 5px; } .abo_s6 .swiper-pagination-bullet-active{ background:#cb0101; } /* 加入我们 */ .join_box .join_s1 .join_list ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .join_box .join_s1 .join_list ul li{ width:590px; margin-bottom:20px; position:relative; } .join_box .join_s1 .join_list ul li .join_tit{ font-size:20px; font-weight:bold; color:#cb0101; } .join_box .join_s1 .join_list ul li .join_con{ line-height:1.6; } .join_box .join_s1 .join_list ul li .join_num{ position:absolute; right:10px; top:0; font-size:100px; font-family:twcen; opacity:.3; color:#cb0101; } .join_box .join_s1 .join_list ul li br{ line-height:1; height:10px !important; } .join_box .join_s1 .join_exp{ font-size:16px; font-weight:bold; position:relative; } .join_box .join_s1 .join_exp:before{ content:""; position:absolute; width:5px; top:25px; left:0; bottom:25px; background:#cb0101; } .join_box .join_mtit{ text-align:center; -webkit-justify-content:center; justify-content:center; -webkit-align-items:flex-end; align-items:flex-end; } .join_box .join_mtit h2{ display:inline-block; padding-left:25px; position:relative; font-size:16px; font-weight:bold; } .join_box .join_mtit h2:before{ content:""; position:absolute; width:15px; height:5px; background:#cb0101; left:0; top:50%; margin-top:-2px; } .join_box .join_mtit span{ font-size:14px; color:#666; padding-left:5px; } .join_box .join_s2 .join_con ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-bottom:-20px; } .join_box .join_s2 .join_con ul li{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; border:dashed 1px #cb0101; border-radius:10px; width:590px; margin-bottom:20px; } .join_box .join_s2 .join_con ul li .join_num{ width:60px; height:60px; background:#cb0101; border-radius:50%; color:#fff; font-size:30px; font-family:twcen; line-height:60px; text-align:center; } .join_box .join_s2 .join_con ul li .join_txt{ width:450px; } .join_box .join_s3 .join_con ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .join_box .join_s3 .join_con ul li{ width:50%; } .join_box .join_s3 .join_con ul li:nth-of-type(4n-3), .join_box .join_s3 .join_con ul li:nth-of-type(4n-2){ -webkit-flex-direction:row-reverse; flex-direction:row-reverse; } .join_box .join_s3 .join_con ul li .join_img{ width:340px; height:260px; overflow:hidden; } .join_box .join_s3 .join_con ul li .join_img img{ display:block; width:100%; height:100%; transition:all 2s; } .join_box .join_s3 .join_con ul li .join_txt{ width:260px; padding:35px 25px; text-align:center; } .join_box .join_s3 .join_con ul li .join_icon{ display:inline-block; width:90px; height:90px; border-radius:50%; line-height:88px; text-align:center; border:solid 1px #cb0101; color:#cb0101; transition:background-color .35s,color .35s; } .join_box .join_s3 .join_con ul li .join_icon .iconfont{ font-size:50px; } /* 联系我们 */ #dituContent{ width:100%; height:380px; height:100vh; } .cta_box .cta_s1 .cta_item{ height:0; overflow:hidden; } .cta_box .cta_s1 .cta_item.active{ height:auto; } .cta_box .cta_s1 .cta_item .cta_ifr{ opacity:0; height:0; overflow:hidden; transition:opacity .35s; } .cta_box .cta_s1 .cta_item.active .cta_ifr{ opacity:1; height:380px; } .cta_box .cta_s1 .cta_tabs ul{ overflow:hidden; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin:0 -10px -10px; } .cta_box .cta_s1 .cta_tabs ul li{ float:left; text-align:center; height:40px; line-height:40px; padding:0 40px; border-radius:200px; margin:0 10px 10px; font-size:14px; color:#fff; background:#c5c5c5; cursor:pointer; transition:all .35s; } .cta_box .cta_s1 .cta_tabs ul li.active{ background:#cb0101; color:#fff; } .cta_box .cta_s1 .cta_info{ background:#fff; } .cta_box .cta_s1 .cta_info ol li{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; line-height:21px; } .cta_box .cta_s1 .cta_info ol li + li{ margin-top:15px; } .cta_box .cta_s1 .cta_info ol li .cta_icon{ width:14px; margin-right:10px; -webkit-box-flex:0 0 auto; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; } .cta_box .cta_s1 .cta_info ol li .cta_icon img{ display:block; width:100%; } .cta_box .cta_s1 .cta_info ol li .cta_w{ font-size:14px; color:#333; } .cta_box .cta_s2 .cta_con ul{ -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; marin-bottom:-15px; } .cta_box .cta_s2 .cta_con ul li{ position:relative; background:#f7f7f7; width:390px; margin-bottom:15px; } .cta_box .cta_s2 .cta_con ul li .iconfont{ font-size:80px; color:#ffdfdf; position:absolute; right:0; bottom:0; } .cta_box .cta_s2 .cta_con ul li .cta_tit, .cta_box .cta_s2 .cta_con ul li .cta_txt{ position:relative; z-index:3; } .cta_box .cta_s2 .cta_con ul li .cta_tit{ font-size:18px; color:#cb0101; } .m_show{ display:none; } /* 结果搜索页 */ .result_box .res_list ul li a{ -webkit-justify-content:space-between; justify-content:space-between; color:#333; } .result_box .res_list ul li a p{ font-size:18px; font-weight:bold; max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .result_box .res_list ul li a p font{ font-weight:inherit; color:#cb0101 !important; } .result_box .res_list ul li a span{ font-size:14px; color:#666; } /* 当前位置 */ .inner_loc{ position:relative; z-index:10; } .inner_loc, .inner_loc a{ color:#666; font-size:12px; } .inner_loc a, .inner_loc span{ padding:0 3px; } .inner_loc .iconfont{ font-size:14px; padding-right:4px; color:#a9a9a9; } .inner_loc a:hover{ color:#cb0101; } .inner_locnav>.center_box{ -webkit-justify-content:space-between; justify-content:space-between; overflow:hidden; } .inner_locnav .inner_sloc{ -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; } .inner_locnav .inner_snav{ margin-left:40px; } .inner_locnav .inner_snav ul{ overflow:hidden; margin-right:-20px; } .inner_locnav .inner_snav ul li{ float:left; padding:0 20px; position:relative; } .inner_locnav .inner_snav ul li:after{ content:""; position:absolute; width:1px; height:14px; background:#999; right:0; top:50%; margin-top:-7px; } .inner_locnav .inner_snav ul li a{ display:block; font-size:14px; color:#333; } .inner_locnav .inner_snav ul li.active a{ font-weight:bold; color:#cb0101; } /* 列表翻页 */ .list_pages .pagination{ font-size:0; overflow:hidden; position:relative; text-align:center; } .list_pages .pagination li{ display:inline-block; *display:inline; *zoom:1; margin:0 6px 10px; } .list_pages .pagination li a{ display:block; font-size:16px; color:#999; width:36px; height:36px; text-align:center; line-height:34px; overflow:hidden; border:solid 1px #e5e5e5; } .list_pages .pagination li.pg_prev a, .list_pages .pagination li.pg_next a{ background:none !important; color:#999; width:auto; padding:0 25px; } .list_pages .pagination li.active a{ background:#cb0101; border-color:#cb0101; color:#fff; } .list_pages .pagination li.active a:hover{ color:#fff !important; } .list_pages .pagination li:not(.disabled) a:hover{ color:#cb0101; border-color:#cb0101; } .list_pages .pagination li.pg_prev:not(.disabled) a:hover, .list_pages .pagination li.pg_next:not(.disabled) a:hover{ color:#cb0101; } /* 内页-当前位置 */ .inner_locnav .center_box{ position:relative; } .inner_locnav .inner_loc, .inner_locnav .inner_loc a{ color:#999; } .inner_locnav .inner_loc a, .inner_locnav .inner_loc span{ padding:0 3px; font-size:14px; } .inner_locnav .inner_loc .iconfont{ font-size:20px; vertical-align:-3px; font-weight:bold; padding-right:4px; } .inner_locnav .inner_loc a:hover{ color:#c19b76; } /* 内容翻页 */ .inner_pnpage{ overflow:hidden; border-top:dashed 1px #ccc; padding-top:20px; margin:0 20px; } .inner_pnpage>a{ overflow:hidden; } .inner_pnpage>a span, .inner_pnpage>a p{ float:left; font-size:14px; color:#666; } .inner_pnpage>a p{ color:#888; max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .35s; } .inner_pnpage>a:hover p{ color:#cb0101; } .inner_pnpage .inner_pnpage_prev{ float:left; width:100%; } .inner_pnpage .inner_pnpage_next{ float:right; width:100%; margin-top:15px; } /* 地图 */ .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word} .inner_cta #dituContent *{ -webkit-box-sizing:content-box; -moz-box-sizing:content-box; -o-box-sizing:content-box; box-sizing:content-box; } /* 新-弹出窗 */ .pop2_mask{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); z-index:2147483648; } .pop2_container{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2147483650; width:980px; transition:transform .5s,left .5s; } .pop2_bg{ background-repeat:no-repeat; background-position:center center; background-size:cover; } .pop2_container .pop2_wrapper{ background:#fff; overflow:hidden; -webkit-align-items:center; align-items:center; } .pop2_container .pop2_wrapper .pop2_l{ font-size:600px; width:1em; height:1em; } .pop2_container .pop2_wrapper .pop2_l img{ display:block; width:100%; height:100%; } .pop2_container .pop2_wrapper .pop2_r{ width:calc(100% - 600px); text-align:center; } .pop2_container .pop2_wrapper .pop2_r_tx{ -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } .pop2_container .pop2_wrapper .pop2_r_tx .pop2_tx{ font-size:60px; width:1em; height:1em; margin-right:8px; border-radius:50%; overflow:hidden; } .pop2_container .pop2_wrapper .pop2_r_tx .pop2_tx img{ display:block; width:100%; height:100%; } .pop2_container .pop2_wrapper .pop2_r_tx .pop2_sw{ max-width:calc(100% - 50px); font-size:18px; color:#333; text-align:left; } .pop2_container .pop2_wrapper .pop2_r_qr{ margin-top:60px; -webkit-justify-content:center; justify-content:center; } .pop2_container .pop2_wrapper .pop2_r_qr .pop2_img{ font-size:190px; width:1em; height:1em; padding:5px; border:solid 2px #ededed; } .pop2_container .pop2_wrapper .pop2_r_qr .pop2_img img{ display:block; width:100%; height:100%; } .pop2_container .pop2_wrapper .pop2_r_bot{ margin-top:55px; -webkit-flex-direction:column; flex-direction:column; -webkit-align-items:center; align-items:center; } .pop2_container .pop2_wrapper .pop2_r_bot .pop2_btn{ font-size:24px; font-weight:bold; color:#fff; background:#cb0101; border-radius:200px; padding:6px 18px; } .pop2_container .pop2_wrapper .pop2_r_bot .pop2_sw{ font-size:16px; color:#aaa; } .pop2_container .pop2_wrapper .pop2_r_bot .pop2_sw em{ display:inline-block; color:#cb0101; transform:scale(.6); } .pop2_container .pop2_wrapper .pop2_tit{ color:#fff; text-align:center; position:relative; } .pop2_container .pop2_wrapper .pop2_tit .pop2_h{ font-size:24px; font-weight:bold; padding:20px 15px; pointer-events:none; transition:all .5s; } .pop2_container .pop2_close1{ color:#fff; position:absolute; top:calc(100% + 30px); left:50%; transform:translateX(-50%); cursor:pointer; transition:all .5s; } .pop2_container .pop2_close1 .iconfont{ font-size:40px; } .pop2_container .pop2_close2{ position:absolute; right:10px; top:4px; cursor:pointer; opacity:0; pointer-events:none; transition:all .35s; } .pop2_container .pop2_close2 .iconfont{ font-size:12px; } .pop2_container .pop2_form{ padding:25px 30px; } .pop2_container .pop2_form ul li + li{ margin-top:15px; } .pop2_container .pop2_form .pop2_inp input, .pop2_container .pop2_form .pop2_ver .pop2_send, .pop2_container .pop2_form .pop2_submit input{ height:40px; border-radius:12px; font-size:14px; display:block; transition:all .35s; } .pop2_container .pop2_form .pop2_ver .pop2_send, .pop2_container .pop2_form .pop2_submit input{ background:#fc463c; color:#fff; cursor:pointer; } .pop2_container .pop2_form .pop2_inp input{ border:solid 1px #ccc; color:#333; width:100%; padding:0 10px; } .pop2_container .pop2_form .pop2_ver .pop2_info{ -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; } .pop2_container .pop2_form .pop2_ver .pop2_send{ line-height:40px; padding:0 10px; margin-left:10px; } .pop2_container .pop2_form .pop2_submit{ text-align:center; } .pop2_container .pop2_form .pop2_submit input{ display:inline-block; padding:0 10px; min-width:50%; } .pop2_container.is-side{ width:70px; left:0; transform:translate(0,-50%); transition:all 0s; } .pop2_container.is-side .pop2_wrapper{ border-top-left-radius:5px; border-bottom-left-radius:5px; background:url("../images/pop2_left_bar_bg.png") no-repeat center center; } .pop2_container.is-side .pop2_wrapper > *{ opacity:0; } .pop2_container.is-side .pop2_form, .pop2_container.is-hide .pop2_form{ display:none; } .pop2_container.is-side .pop2_close1, .pop2_container.is-hide .pop2_close1{ display:none; } .pop2_container.is-side .pop2_close2, .pop2_container.is-hide .pop2_close2{ opacity:1; pointer-events:auto; } .pop2_container.is-side .pop2_wrapper .pop2_tit .pop2_h, .pop2_container.is-hide .pop2_wrapper .pop2_tit .pop2_h{ background-image:none !important; font-weight:normal; } .pop2_container.is-side .pop2_wrapper .pop2_tit .pop2_h{ pointer-events:auto; cursor:pointer; } .pop2_container.is-hide{ width:70px; left:-100px; transform:translate(0,-50%); } .pop2_container.before_hide{ opacity:0; pointer-events:none; } .pop2_mask.before_hide{ opacity:0; pointer-events:none; } .pop2_container.is-hide.before_hide, .pop2_container.is-side.before_hide{ opacity:1; pointer-events:auto; } .pop2_container .pop2_form .pop2_ver .pop2_send:hover, .pop2_container .pop2_form .pop2_submit input:hover{ background:#f51e0a; } .pop2_container .pop2_close1:hover{ color:#f51e0a; } .pop2_container .pop2_close2:hover{ transform:rotate(90deg); } .pop2_container .pop2_form .pop2_inp input:focus{ border-color:#bbb; } @media screen and (min-width:1201px){ /* header */ .header_bot .header_side_nav .header_sn_list ul>li>a{ transition:color .35s; } .header_bot .header_side_nav .header_sn_list ul>li>a .iconfont_jiantou:before{ transition:all 0s; } .header_bot .header_side_nav .header_sn_list ul>li>a:hover{ background:#fff !important; color:#cb0101; } .header_bot .header_side_nav .header_sn_list ul>li>a:after{ top:50%; bottom:50%; } .header_bot .header_side_nav .header_sn_list ul>li>a:hover:after{ opacity:1; top:10px; bottom:10px; } .header_bot .header_side_nav .header_sn_list .header_sn_tid ol li a:hover{ color:#cb0101; } .header_bot .header_side_nav .header_sn_list ul>li>a{ z-index:5; } .header_bot .header_side_nav .header_sn_list .header_sn_tid{ pointer-events:none; /* transform:translateX(-100px); */ opacity:0; border-top:solid 1px #efefef; transition:all .15s; } .header_bot .header_side_nav .header_sn_list ul>li:hover .header_sn_tid{ pointer-events:auto; /* transform:translateX(0); */ opacity:1; } .header_bot .header_side_nav:hover .header_sn_list{ display:block !important; } .header_bot .header_side_nav:hover .header_sn_list ul>li>a{ background:rgba(0,0,0,.8); } .search_box button{ transition:background-color .35s,color .35s; height:40px; } .search_box button:hover{ background:#f51e0a; } nav ul>li>a:hover{ color:#CB0101; } nav ul>li>a:hover:after{ transform:translateY(0px); } nav ul>li:hover .subnav{ -webkit-transform: perspective(300px) scaleY(1) translateZ(0); transform: perspective(300px) scaleY(1) translateZ(0); visibility: visible; opacity: 1; } nav ul>li .subnav li a:hover{ background:#cb0101; } /* 业务体系 */ .busi_sys ul li a:hover{ color:#cb0101; } .busi_sys ul li a:hover span img{ -webkit-animation: iconSkew 1s; -moz-animation: iconSkew 1s; animation: iconSkew 1s; } /* 热门课程 */ .hot_course .hc_list ul li a:hover{ box-shadow:0 0 10px rgba(0,0,0,.05); } .hot_course .hc_list ul li a .hc_wrap{ transition:all .35s; } .hot_course .hc_list ul li a:hover .hc_wrap{ transform:translateY(-63px); } /* 更多 */ .zx_more.zx_more_border a:hover{ background:#cb0101; color:#fff; } .zx_more.zx_more_bg a:hover{ background:none; color:#cb0101; } /* 行业资讯 */ .news_box .news_list ul li a:hover{ box-shadow:0 0 10px rgba(0,0,0,.1); } .news_box .news_list ul li a:hover .news_date{ background:#cb0101; } .news_box .news_list ul li a:hover .news_wrap h3, .news_box .news_list ul li a:hover .news_wrap span{ color:#cb0101; } .news_box .news_pics .swiper-button-white:hover{ background:#cb0101; } .news_box .news_pics a:hover .news_wrap{ background:#cb0101; } /* 资质服务 */ .qual_service .qs_list ul li a:hover{ filter:saturate(120%); } .qual_service .qs_list ul li a:hover .qs_dot{ animation:dot_wave 4s linear infinite; } .qual_service .qs_list ul li a:hover .qs_dot:before{ animation:dot_wave 5.5s .2s linear infinite; } .qual_service .qs_list ul li a:hover .qs_dot:after{ animation:dot_wave 6s .5s linear infinite; } .qual_service .qs_list ul li a:hover .qs_bg .qs_wave1{ animation: move_wave 6s linear infinite; } .qual_service .qs_list ul li a:hover .qs_bg .qs_wave2{ animation: move_wave 10s linear infinite; } /* 转让求购 */ .trpu_box .trpu_list ul li .tp_ss:hover{ box-shadow:0 0 10px rgba(0,0,0,.1); border-color:transparent; position:relative; z-index:3; } .trpu_box .trpu_list ul li.tp_qg .tp_ss .tp_info:hover .tp_tit{ color:#cb0101; } .trpu_box .trpu_list ul li.tp_zr .tp_ss .tp_info:hover .tp_tit{ color:#0882ff; } .trpu_box .trpu_list ul li.tp_qg .tp_ss .tp_btn:hover{ background:#cb0101; color:#fff; } .trpu_box .trpu_list ul li.tp_zr .tp_ss .tp_btn:hover{ background:#0882ff; color:#fff; } .filter_bar .filter_con ul li .filter_ss:hover{ color:#cb0101; } .filter_bar .filter_con ul li .filter_ss:hover i .filter_before:hover{ border-bottom-color:#cb0101; } .filter_bar .filter_con ul li .filter_ss:hover i .filter_after:hover{ border-top-color:#cb0101; } /* 人才服务 */ .talent_service .ts_list ul>li .ts_btn:hover{ color:#cb0101; } .talent_service .ts_list ul>li .ts_info:hover{ box-shadow:0 0 10px rgba(0,0,0,.1); color:#cb0101; } /* 合作机构 */ .partner_box .par_con ul li .par_ss:hover{ border-color:#cb0101; } .partner_box .par_con ul li .par_ss:hover .par_wrap{ top:0; } /* 页脚 */ footer a:hover{ text-decoration:underline; } /* 侧边栏 */ .side_bar .side_top .side_nav ul li a:hover{ background:#ffd52d; color:#F51E0A; } .side_bar .side_top .side_btn a:hover{ background:#F2F220; } .side_bar .side_close:hover{ color:#F51E0A; } .side_turn_btn:hover{ background:#F51E0A; } .side_bar .side_bot:hover{ color:#FFD52D; } /* 内页-课程培训 */ .course_list ul>li a:hover{ color:#cb0101; box-shadow:0 0 15px rgba(0,0,0,.1); } .course_list ul>li a:hover .cl_img img{ transform:scale(1.06); } .course_list ul>li a .cl_wrap .cl_bot>i{ transition:all .35s; } .course_list ul>li a:hover .cl_wrap .cl_bot>i{ color:#cb0101; } /* 资讯推荐 */ .news_rec .nr_con ul li a:hover{ box-shadow:0 0 15px rgba(0,0,0,.1); } .news_rec .nr_con ul li a:hover .nr_img img{ transform:scale(1.06); } .news_rec .nr_con ul li a:hover .nr_wrap{ background:rgba(203,1,1,.8); } /* 课程推荐 */ .cour_rec .cr_con ul li a:hover{ color:#cb0101; box-shadow:0 0 15px rgba(0,0,0,.1); } .cour_rec .cr_con ul li a:hover .cr_img img{ transform:scale(1.06); } /* 课程培训详情页 */ .course_show .cs_top .cs_wrap .cs_bot .cs_btn:hover{ background:#cb0101; color:#fff; } /* 报名表单 */ .fix_entry .en_close{ transition:all .35s; } .fix_entry .en_close:hover{ color:#ffd52d; } .fix_entry .entry_box .en_form ul li.en_vfy .en_send:hover, .qual_service .qs_s2 .qs_right .qs_form ul li.qs_vfy .qs_send:hover{ background:#ffae00; } .fix_entry .entry_box .en_form ul li.en_submit .en_con input:hover, .qual_service .qs_s2 .qs_right .qs_form ul li.qs_submit input:hover{ background:#ffd52d; color:#cb0101; font-weight:bold; } /* 资质服务 */ .qual_service .qs_s1 .qs_top ul li a .qs_wrap i{ transition:all .35s; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap i:hover{ background:rgba(255,255,255,.5); } .qual_service .qs_s1 .qs_bot .qs_sel button{ height:56px; } .qual_service .qs_s1 .qs_bot .qs_sel button:hover{ background:#f51e0a; } .qual_service .qs_s1 .qs_bot .qs_hot .qs_a a:hover{ color:#cb0101; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss:hover{ color:#cb0101; box-shadow:0 0 10px rgba(0,0,0,.1); } .qual_service .qs_s5 .qs_slist ul>li .qs_ss:hover .qs_img img{ transform:scale(1.06); } .qs_adv ul li:hover{ background:rgba(255,255,255,.8); color:#cb0101; } .qs_adv ul li:hover .qs_icon{ border-color:#cb0101; } /* 资质详情 */ .service_show .ser_left .ser_nav .ser_ntit:hover{ color:#cb0101; } .service_show .ser_left .ser_nav .ser_ncon li a:hover{ color:#cb0101; } .dart_btn a:hover{ background:#f51e0a !important; } /* 热门资讯 */ .hot_news .hot_ncon ul li a:hover{ color:#cb0101; } /* 筛选 */ .zx_filter .zx_fcon .zx_list ol li a:hover{ color:#cb0101; } /* 转让求购 */ .filter_bar .filter_sear button:hover{ color:#cb0101; } .inner_trpu_list ul>li.tp_qg .tp_a:hover{ color:#cb0101; } .inner_trpu_list ul>li.tp_zr .tp_a:hover{ color:#0882ff; } .inner_trpu_list ul>li.tp_qg .tp_btn:hover{ background:#cb0101; color:#fff; } .inner_trpu_list ul>li.tp_zr .tp_btn:hover{ background:#0882ff; color:#fff; } .zx_rele_box .zx_rele_wrap .zx_rele_a:hover{ background:#f51e0a; } /* 求购转让表单 */ .qgzr_form .qgzr_con .qgzr_wrap .qgzr_w input:focus, .rele_pop_box .rele_pop_con ul li .rp_w input:focus{ border-color:#aaa; } .qgzr_form .qgzr_con .qgzr_wrap .qgzr_submit input:hover{ background:#ffd52d; color:#cb0101; font-weight:bold; } .qgzr_form .qgzr_con .qgzr_qg .qgzr_wrap .qgzr_vfy .qgzr_send:hover, .rele_pop_box .rele_pop_con ul li.rp_vfy .rp_send:hover{ border-color:#cb0101; } .rele_pop_box.rele_pop_job .rele_pop_con ul li.rp_vfy .rp_send:hover{ border-color:#0882ff; } .qgzr_form .qgzr_con .qgzr_zr .qgzr_wrap .qgzr_vfy .qgzr_send:hover{ border-color:#0882ff; } .rele_pop_box .rele_pop_con ul li.rp_submit input:hover{ background:#f51e0a; } .rele_pop_box.rele_pop_job .rele_pop_con ul li.rp_submit input:hover{ background:#2e97f9; } .rele_pop_box .rele_close:hover{ color:#f2f220; } /* 人才服务 */ .inner_job .inner_job_list a:hover{ color:#cb0101; } /* 二级导航 */ .inner_subnav ul li:not(.active) a:hover{ background:#cb0101; color:#fff; } .inner_subnav ul li:not(.active) a:hover:before{ transform:translateY(0px); opacity:1; } /* 资讯首页 */ .inner_news1 .news_s2 .news_wrap li a:hover, .inner_news1 .news_s3 .news_top ul li a:hover, .inner_news1 .news_bot .news_txt .news_first a:hover, .inner_news1 .news_bot .news_txt .news_con li a:hover{ color:#cb0101; } .inner_news1 .news_bot .news_pics li a .news_w{ transition:all .35s; } .inner_news1 .news_bot .news_pics li a:hover .news_w{ background:rgba(203,1,1,.8); } .inner_news1 .news_wtit .news_more:hover{ color:#cb0101; } .inner_news1 .news_bot .news_pics li a:hover .news_img img{ transform:scale(1.06); } .inner_news1 .news_m{ display:none; } /* 资讯新闻 */ .inner_news2_list ul li a:hover{ color:#cb0101; box-shadow:0 0 10px rgba(0,0,0,.1); } .inner_news2_list ul li a:hover .news_img img{ transform:scale(1.06); } /* 当前位置 */ .inner_locnav .inner_snav ul li a:hover{ color:#cb0101; } /* 关于我们 */ .about_box .abo_s4 .qs_adv ul li:hover, .qs_s6 .qs_adv ul li:hover{ background:#cb0101; color:#fff; } .about_box .abo_s4 .qs_adv ul li:hover .qs_icon, .qs_s6 .qs_adv ul li:hover .qs_icon{ border-color:#fff; } .about_box .abo_s4 .qs_adv ul li:hover .qs_w, .qs_s6 .qs_adv ul li:hover .qs_w{ color:inherit; } .abo_s6_list ul li .abo_ss:hover img{ transform:scale(1.06); } /* 加入我们 */ .join_box .join_s3 .join_con ul li:hover .join_img img{ transform:scale(1.06); } .join_box .join_s3 .join_con ul li:hover .join_icon{ background:#cb0101; color:#fff; } /* 联系我们 */ .cta_box .cta_s1 .cta_tabs ul li:hover{ background:#cb0101; } } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~手机版~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (min-width: 320px) and (max-width:359px){html{font-size:32px !important;} } @media (min-width: 360px) and (max-width:374px){html{font-size:36px !important;} } @media (min-width: 375px) and (max-width:383px){html{font-size:37.5px !important;} } @media (min-width: 384px) and (max-width:413px){html{font-size:38.4px !important;} } @media (min-width: 414px) and (max-width:447px){html{font-size:41.4px !important;} } @media (min-width: 448px) and (max-width:479px){html{font-size:44.8px !important;} } @media (min-width: 480px) and (max-width:511px){html{font-size:48px !important;} } @media (min-width: 512px) and (max-width:543px){html{font-size:51.2px !important;} } @media (min-width: 544px) and (max-width:575px){html{font-size:54.4px !important;} } @media (min-width: 576px) and (max-width:607px){html{font-size:57.6px !important;} } @media (min-width: 608px) and (max-width:639px){html{font-size:60.8px !important;} } @media (min-width: 640px) and (max-width:1200px){html{font-size:60.8px !important;} } input.hamburger{ display:none; } nav>ul>li>a .iconfont_jiantou{ display:none; } .qual_service .qs_s4 .qs_con .qs_img.m_show{ display:none; } @media screen and (max-width:1200px){ .center_box{ width:92%; } .pd_150{ padding:1.7rem; } .pd_tb150{ padding:1.7rem 0; } .pd_t150{ padding-top:1.7rem; } .pd_b150{ padding-bottom:1.7rem; } .pd_120{ padding:1.4rem; } .pd_tb120{ padding:1.4rem 0; } .pd_t120{ padding-top:1.4rem; } .pd_b120{ padding-bottom:1.4rem; } .pd_100{ padding:1.2rem; } .pd_tb100{ padding:1.2rem 0; } .pd_t100{ padding-top:1.2rem; } .pd_b100{ padding-bottom:1.2rem; } .pd_80{ padding:1rem; } .pd_tb80{ padding:1rem 0; } .pd_t80{ padding-top:1rem; } .pd_b80{ padding-bottom:1rem; } .pd_70{ padding:.9rem; } .pd_tb70{ padding:.9rem 0; } .pd_t70{ padding-top:.9rem; } .pd_b70{ padding-bottom:.9rem; } .pd_60{ padding:.8rem; } .pd_tb60{ padding:.8rem 0; } .pd_t60{ padding-top:.8rem; } .pd_b60{ padding-bottom:.8rem; } .pd_50{ padding:.7rem; } .pd_tb50{ padding:.7rem 0; } .pd_t50{ padding-top:.7rem; } .pd_b50{ padding-bottom:.7rem; } .pd_40{ padding:.6rem; } .pd_tb40{ padding:.6rem 0; } .pd_t40{ padding-top:.6rem; } .pd_b40{ padding-bottom:.6rem; } .pd_30{ padding:.5rem; } .pd_tb30{ padding:.5rem 0; } .pd_t30{ padding-top:.5rem; } .pd_b30{ padding-bottom:.5rem; } .pd_20{ padding:.4rem; } .pd_tb20{ padding:.4rem 0; } .pd_t20{ padding-top:.4rem; } .pd_b20{ padding-bottom:.4rem; } .pd_15{ padding:.35rem; } .pd_tb15{ padding:.35rem 0; } .pd_t15{ padding-top:.35rem; } .pd_b15{ padding-bottom:.35rem; } .mg_t150{ margin-top:1.7rem; } .mg_b150{ margin-bottom:1.7rem; } .mg_t100{ margin-top:1.2rem; } .mg_b100{ margin-bottom:1.2rem; } .mg_tb80{ margin:1rem 0; } .mg_t80{ margin-top:1rem; } .mg_b80{ margin-bottom:1rem; } .mg_tb60{ margin:.8rem 0; } .mg_t60{ margin-top:.8rem; } .mg_b60{ margin-bottom:.8rem; } .mg_tb50{ margin:.7rem 0; } .mg_t50{ margin-top:.7rem; } .mg_b50{ margin-bottom:.7rem; } .mg_tb40{ margin:.6rem 0; } .mg_t40{ margin-top:.6rem; } .mg_b40{ margin-bottom:.6rem; } .mg_tb30{ margin:.5rem 0; } .mg_t30{ margin-top:.5rem; } .mg_b30{ margin-bottom:.5rem; } .mg_tb20{ margin:.4rem 0; } .mg_t20{ margin-top:.4rem; } .mg_b20{ margin-bottom:.4rem; } .mg_tb15{ margin:.3rem 0; } .mg_t15{ margin-top:.3rem; } .mg_b15{ margin-bottom:.3rem; } .mg_tb10{ margin:.2rem 0; } .mg_t10{ margin-top:.2rem; } .mg_b10{ margin-bottom:.2rem; } .menu{ position:fixed; top:0; right:1%; width:44px; height:60px; z-index:994; } .menu:hover { cursor: pointer; } .menu > i { position: absolute; width: 24px; height: 2px; top: 50%; left:10px; background-color:#cb0101; pointer-events:auto; transition-duration: .35s; transition-delay: .35s; } .menu > i:before, .menu > i:after { position: absolute; display: block; width: 100%; height: 2px; top:0; left: 50%; background-color:#cb0101; content: ""; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .menu > i:before { -webkit-transform: translate(-50%, -7px); transform: translate(-50%, -7px); } .menu > i:after { -webkit-transform: translate(-50%, 7px); transform: translate(-50%, 7px); } .menu_bg{ position:fixed; width:100vw; height:0; top:0; left:0; z-index:999; background:#fff; -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); } input.hamburger:checked ~ .menu_bg{ height:100vh; } input.hamburger{ height:0; display:none; } input.hamburger:checked ~ label.menu > i { background-color: transparent; -webkit-transform: rotate(90deg); transform: rotate(90deg); } input.hamburger:checked ~ label.menu > i:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } input.hamburger:checked ~ label.menu > i:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } input.hamburger:checked ~ .menu{ z-index:99999; } input.hamburger:checked ~ .header_bot nav{ top:0; opacity:1; } /* ~~~~~~~~~~~~~~~~~~ */ header,body,html{ width:100vw !important; } /* header */ header{ padding:0 !important; } header.header_box2, header.scr{ top:0; } header .search_box{ display:none; } .header_bot .header_side_nav{ display:none; } .header_mid .center_box, .header_height{ height:60px; } .header_mid .center_box{ position:relative; } .header_bot .center_box{ height:0px; } .header_mid .logo img{ max-height:30px; } .header_tel .iconfont{ font-size:24px; } .search_icon.m_show{ display:block; color:#cb0101; width:40px; height:40px; line-height:40px; text-align:center; position:absolute; right:75px; top:50%; margin-top:-20px; } .search_icon.m_show .iconfont{ font-size:22px; } .header_tel .header_t{ display:none; } header .header_tel{ width:40px; height:40px; margin-right:30px; -webkit-justify-content:center; justify-content:center; } .search_container{ position:fixed; left:0; top:0; z-index:995; width:100%; height:60px; transform:translateX(102%); transition:all .5s; } .search_container.isOpen{ transform:translateX(0); } .search_mask.m_show{ display:block; position:absolute; left:0; top:0; z-index:995; background:#fff; width:100%; height:60px; } .search_close.m_show{ display:block; position:absolute; top:0; z-index:997; width:40px; height:60px; line-height:60px; text-align:right; right:4%; } .search_close .iconfont{ color:#cb0101; font-size:20px; } .search_close .iconfont:before { content: "\e62e"; } header .search_box{ display:block; position:absolute; z-index:996; top:10px; left:4%; width:calc(92% - 40px); } header .search_box input{ width:calc(100% - 80px); background:#f2f2f2; border:none; } header .search_box button{ height:40px; font-size:14px; width:80px; -webkit-justify-content:center; justify-content:center; } header nav{ width:92%; height:100%; position:fixed; top:-100%; left:4%; margin-left:0; z-index:9999; transition:all .35s; opacity:0; color:#333; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; } header .logo img{ max-height:34px; } nav>ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-right:0; } nav>ul>li{ width:100%; margin:0; border-bottom:solid 1px #dfdfdf; padding:2vh 2vw; } nav>ul>li>a{ color:#333; font-size:16px; display:block; padding:0 !important; height:auto !important; line-height:3 !important; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; } nav>ul>li>a:before{ display:block; content:""; position:absolute; width:10px; height:10px; border-top:solid 2px #ddd; border-right:solid 2px #ddd; right:5px; transform:rotate(45deg); top:50%; margin-top:-5px; } nav>ul>li.active>a:before{ border-color:#cb0101; } nav>ul>li>a .iconfont_jiantou{ display:block; fonts-size:16px; color:#999; } nav>ul>li.active>a .iconfont_jiantou{ color:inherit; } nav>ul>li>a:after{ display:none; } nav>ul>li>a:hover,nav>ul>li.active>a{ color:#cb0101; font-weight:bold; } nav>ul>li.has_subnav>a{ position:relative; padding-right:30px; } /* nav>ul>li.has_subnav>a:before{ content:""; position:absolute; border-left:solid 6px transparent; border-right:solid 6px transparent; border-top:solid 6px #ccc; top:50%; margin-top:-3px; right:0; } */ nav>ul>li.has_subnav.current>a:before{ border-top-color:#c19b76; } .subnav ol li a{ text-align:left; } nav ul>li .subnav{ position:static; width:100%; border-top:none; box-shadow:none; -webkit-transform: perspective(300px) scaleY(0) translateZ(30px); transform: perspective(300px) scaleY(0) translateZ(30px); visibility: hidden; opacity: 0; -webkit-transform-origin: top; transform-origin: top; -webkit-transition: opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease,height 500ms ease,max-height 500ms ease; transition:opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease,height 500ms ease,max-height 500ms ease; -webkit-transition: opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease,height 500ms ease,max-height 500ms ease; transition:opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease,height 500ms ease,max-height 500ms ease; transition:transform 500ms ease,opacity 500ms ease,visibility 500ms ease,height 500ms ease,max-height 500ms ease; transition:transform 500ms ease,opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease,height 500ms ease,max-height 500ms ease; transition:transform 500ms ease,opacity 500ms ease,visibility 500ms ease,-webkit-transform 500ms ease,height 500ms ease,max-height 500ms ease; max-height:0; padding:0 8vw; display:none !important; } nav ul>li.current .subnav{ -webkit-transform: perspective(300px) scaleY(1) translateZ(0); transform: perspective(300px) scaleY(1) translateZ(0); visibility: visible; opacity: 1; max-height:312px; } nav ul>li .subnav li a{ text-align:left; } header .header_slogan{ padding:0; line-height:60px; } .header_top{ display:none; } /* banner */ .banner_box .swiper-slide a{ height:25vh; position:relative; } .inner_banner{ height:25vh; } .inner_banner>img, .banner_box .swiper-slide a>img{ height:100%; width:auto; min-width:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); } .inner_banner>img{ margin-left:0; } .banner_box .swiper-slide a .banner_txt{ width:92%; left:4%; margin-left:0; } .banner_box .swiper-slide a .banner_txt img{ max-width:70%; margin-bottom:20vw; } .banner_box .swiper-pagination{ display:block; } .swiper-pgxn{ display:block; width:100%; } .banner_box .swiper-pagination-bullet{ width:12px; height:12px; } .banner_box .swiper-container-horizontal>.swiper-pagination-bullets{ bottom:10px; } /* 热门课程 */ .hot_course .hc_list ul{ margin-left:-.3rem; margin-bottom:-.3rem; } .hot_course .hc_list ul li{ margin-bottom:.3rem; } .hot_course .hc_list ul li a{ margin-left:.3rem; height:auto; } .hot_course .hc_list ul li a .hc_wrap .hc_line, .hot_course .hc_list ul li a .hc_wrap .hc_more{ display:none; } .hot_course .hc_list ul li a .hc_wrap{ padding:.3rem; } .hot_course .hc_list ul li a .hc_wrap h3{ font-size:14px; height:auto; } /* 资质服务 */ .qual_service .qs_list ul li a .qs_bg .qs_wave1, .qual_service .qs_list ul li a .qs_bg .qs_wave2{ bottom:0; transform:translateY(50%); } /* 页脚 */ footer .footer_top{ display:none; } .footer_bot .footer_tel{ display:none; } .footer_bot .footer_cpr>*{ padding-right:0; display:block; } .footer_bot .footer_cpr{ width:100%; } /* 课程培训 */ .zx_lr>.center_box{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .zx_lr.zx_lbr .zx_left{ width:100%; } .inner_course .inner_cl_tit .iconfont{ font-size:.6rem; } .inner_course .inner_cl_tit h2{ font-size:.42rem; margin-left:.1rem; } .course_list ul>li a{ padding:.2rem; } .course_list ul>li a .cl_img{ width:30%; height:calc((92vw - .7rem) * .3 * 2 / 3); } .course_list ul>li a .cl_wrap{ width:66%; } .course_list ul>li a .cl_wrap .cl_tit{ font-size:15px; -webkit-line-clamp:1; -moz-line-clamp:1; -o-line-clamp:1; -webkit-line-clamp:1; } .course_list ul>li a .cl_wrap .cl_bot .cl_price{ font-size:12px; } .course_list ul>li a .cl_wrap .cl_bot .cl_price em{ font-size:.44rem; } .course_list ul>li a .cl_wrap .cl_bot>i{ font-size:13px; } /* 列表翻页 */ .list_pages .pagination li{ display:none; } .list_pages .pagination li.pg_prev, .list_pages .pagination li.pg_next{ display:inline-block; } .list_pages .pagination li.pg_prev a, .list_pages .pagination li.pg_next a{ padding:0 20px; } .list_pages .pagination li a{ font-size:14px; } /* 资讯推荐 */ .recommend_tit h3{ font-size:.42rem; } .recommend_tit span{ font-size:.34rem; } /* 当前位置 */ .inner_loc{ line-height:1.5; } /* 资质服务 */ .qual_service .qs_s5 .center_box{ width:92%; } .inner_news1 .news_pc{ display:none; } .inner_news1 .news_m .swiper-slide a{ display:block; color:#333; } .inner_news1 .news_m .swiper-slide a .news_img{ display:block; height:calc(92vw * 2 / 3); } .inner_news1 .news_m .swiper-slide a .news_img img{ display:block; width:100%; } .inner_news1 .news_m .swiper-slide a .news_txt{ margin-top:12px; } .inner_news1 .news_m .swiper-slide a .news_txt h3{ font-size:15px; line-height:1.5; overflow:hidden; -webkit-line-clamp:2; -moz-line-clamp:2; -o-line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; -moz-box-orient:vertical; -o-box-orient:vertical; -webkit-box-orient:vertical; display:-webkit-box; display:-moz-box; display:-o-box; display:-webkit-box; } .inner_news1 .news_m .swiper-slide a .news_txt span{ display:block; font-size:13px; color:#999; margin-top:5px; } .inner_news1 .news_m .swiper-container-horizontal>.swiper-pagination-bullets{ top:calc(92vw * 2 / 3 - 30px); bottom:auto; } .inner_news1 .news_m .swiper-pagination-bullet{ width:12px; height:12px; border-radius:50%; background:none; border:solid 2px #cb0101; opacity:1; } .inner_news1 .news_m .swiper-pagination-bullet-active{ background:#cb0101; } .inner_news1 .news_s2 .news_name{ width:60px; height:60px; } .inner_news1 .news_s2 .news_wrap{ width:calc(100% - 75px); } .inner_news1 .news_s2 .news_name span{ font-size:16px; } .inner_news1 .news_s2 .news_wrap li a{ font-size:15px; } .inner_news1 .news_s3 .news_bot .news_txt{ width:100%; } .inner_news1 .news_bot{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } /* 加入我们 */ .join_box .join_s2 .join_con ul li .join_txt{ width:calc(100% - 75px); } /* 推荐课程 */ .zx_lr.zx_lrb .zx_right, .zx_lr.zx_lbr .zx_right{ width:100%; } .cour_rec .cr_con ul{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-left:-.3rem; margin-bottom:-.3rem; } .cour_rec .cr_con ul li{ margin-bottom:.3rem; width:50%; } .cour_rec .cr_con ul li a{ margin-left:.3rem; } .zx_lrb .cour_rec .cr_con ul li a .cr_img, .zx_lbr .cour_rec .cr_con ul li a .cr_img{ height:calc((92vw - .3rem) * .5 * 2 / 3); } .cour_rec .cr_con ul li a .cr_wrap .cr_info>*{ max-width:none; } .qual_rec.cour_rec .cr_con ul li a .cr_wrap .cr_tit{ font-size:15px; } .result_box .res_list ul li a{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .result_box .res_list ul li a p{ width:100%; max-width:none; font-size:15px; text-overflow:clip; white-space:pre-wrap; line-height:1.5; margin-bottom:10px; } .side_bar.side_bar_show{ display:none !important; } } @media screen and (max-width:895px){ /* 行业资讯 */ .news_box .news_con{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .news_box .news_pics{ width:100%; } .news_box .news_pics a .news_img{ height:calc(92vw * 2 / 3); } .news_box .news_list ul li a .news_date{ height:auto; } .news_box .news_list{ width:100%; margin-top:.5rem; } /* 资质服务 */ .qual_service .qs_list ul{ margin-left:-.3rem; margin-bottom:-.3rem; } .qual_service .qs_list ul li{ margin-bottom:.3rem; } .qual_service .qs_list ul li a{ margin-left:.3rem; padding:.4rem; } .qual_service .qs_list ul li a .qs_icon{ width:100%; height:1rem; } .qual_service .qs_list ul li a .qs_w{ min-width:auto; width:100%; text-align:center; line-height:normal; font-size:.36rem; margin-top:.2rem; } /* 转让求购 */ .trpu_box .trpu_list ul{ margin-top:-.4rem; } .trpu_box .trpu_list ul li .tp_ss{ padding:0; -webkit-flex-wrap:wrap; flex-wrap:wrap; position:relative; } .trpu_box .trpu_list ul li .tp_ss .tp_info{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:center; align-items:center; -webkit-flex-wrap:wrap; flex-wrap:wrap; font-size:14px; padding:.4rem 0; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_tag{ width:60px; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_tit{ margin-left:0; width:calc(100% - 60px); font-size:15px; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_price, .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_place, .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_date{ width:auto; line-height:30px; margin-top:.2rem; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_place{ margin-left:0; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_date{ font-size:inherit; } .trpu_box .trpu_list ul li .tp_ss .tp_btn{ position:absolute; bottom:.4rem; right:0; padding:0 3vw; height:30px; line-height:28px; } .trpu_box .trpu_list ul li .tp_ss .tp_info .tp_tag i{ padding-top:5px; padding-bottom:5px; } /* 人才服务 */ .talent_service .ts_list ul{ margin-left:-.3rem; margin-bottom:-.3rem; } .talent_service .ts_list ul>li{ margin-bottom:.3rem; } .talent_service .ts_list ul>li .ts_info{ margin-left:.3rem; padding-bottom:.9rem; font-size:13px; } .talent_service .ts_list ul>li .ts_info h3{ max-width:100%; font-size:15px; } .talent_service .ts_list ul>li .ts_ops{ margin-top:.15rem; } .talent_service .ts_list ul>li .ts_ops ol li .iconfont{ font-size:16px; } .talent_service .ts_list ul>li .ts_ops ol li .iconfont.icon-edu-line{ font-size:24px; } .talent_service .ts_list ul>li .ts_ops ol li+li{ margin-left:5%; } .talent_service .ts_list ul>li .ts_btn{ font-size:13px; } .talent_service .ts_list ul>li .ts_btn:active{ color:#cb0101; } /* 合作机构 */ .partner_box .par_con{ padding:.4rem; } .partner_box .par_con ul{ margin-left:-.3rem; margin-bottom:-.3rem; } .partner_box .par_con ul li{ margin-bottom:.3rem; } .partner_box .par_con ul li .par_ss{ margin-left:.3rem; } /* 资讯推荐 */ .news_rec .nr_con ul{ margin-left:-.3rem; margin-bottom:-.3rem; } .news_rec .nr_con ul li{ margin-bottom:.3rem; } .news_rec .nr_con ul li a{ margin-left:.3rem; } /* 资质服务 */ .qual_service .qs_s1{ padding-top:0; } .qual_service .qs_s1 .qs_top ul{ margin-left:-.3rem; margin-bottom:-.3rem; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qual_service .qs_s1 .qs_top ul li{ margin-bottom:.3rem; width:50%; } .qual_service .qs_s1 .qs_top ul li a{ margin-left:.3rem; padding:.4rem; -webkit-justify-content:space-between; justify-content:space-between; } .qual_service .qs_s1 .qs_top ul li a .qs_icon{ width:12vw; height:12vw; line-height:12vw; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont{ font-size:8vw; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont.icon-2-3-2shengjijilu{ font-size:7vw; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont.icon-biaozhunchanpin{ font-size:6vw; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap{ width:calc(100% - 13vw); } .qual_service .qs_s1 .qs_top ul li a .qs_wrap h4{ font-size:.42rem; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap i{ display:inline-block; font-size:13px; padding:.2rem 3vw; line-height:1; margin-top:.2rem; } .qual_service .qs_s1 .qs_bot .qs_tit h3{ font-size:.44rem; } .qual_service .qs_s1 .qs_bot .qs_tit span{ padding:0 8vw; } .qual_service .qs_s1 .qs_bot .qs_tit span:before, .qual_service .qs_s1 .qs_bot .qs_tit span:after{ width:8vw; } .qual_service .qs_s4 .qs_con .qs_img.m_show{ display:block; } .qual_service .qs_s4 .qs_con .qs_img.pc_show{ display:none; } .qual_service .qs_s5 .qs_slist ul{ margin-left:-.3rem; margin-bottom:-.3rem; } .qual_service .qs_s5 .qs_slist ul li{ margin-bottom:.3rem; width:100%; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss{ margin-left:.3rem; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_img{ width:35%; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_wrap{ width:65%; padding:.3rem .3rem 0; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_img{ height:calc(92vw * .35 * 2 / 3); } .qual_service .qs_s5 .qs_slist ul>li .qs_info{ display:none; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_tit{ font-size:15px; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_type, .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_date{ font-size:13px; margin-top:.1rem; } .qual_service .qs_s5 .qs_con .swiper-container{ padding:0 1px; } .qual_service .qs_s5 .swiper-pagination-bullet{ width:12px; height:12px; } .qs_adv ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qs_adv ul li{ width:48.5%; padding:.4rem; margin-bottom:calc(92vw * .03); } .qs_adv ul li .qs_icon{ width:16vw; height:16vw; line-height:calc(16vw - 4px); } .qs_adv ul li .qs_icon .iconfont{ font-size:8vw; } .qs_adv ul li h4{ font-size:.42rem; } .qs_adv ul li .qs_w{ font-size:.36rem; } /* 资质详情 */ .hot_news{ display:none; } /* 筛选 */ .zx_filter .zx_fcon{ padding:0 .4rem; } .zx_filter .zx_fcon ul>li{ -webkit-flex-wrap:wrap; flex-wrap:wrap; padding:.2rem 0; } .zx_filter .zx_fcon .zx_name{ font-weight:bold; padding-bottom:.2rem; } .zx_filter .zx_fcon .zx_list{ width:100%; /* max-height:43px; overflow-x:hidden; overflow-y:auto; */ } .zx_filter .zx_fcon .zx_list ol{ margin:0 -25px -5px 0; overflow:hidden; } .zx_filter .zx_fcon .zx_list ol{ margin-right:-.3rem; } .zx_filter .zx_fcon .zx_list ol li{ margin-right:.3rem; } .zx_lr.zx_lrb .zx_left{ width:100%; } /* 当前位置 */ .inner_locnav .center_box{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .inner_locnav .inner_snav{ width:100%; margin-left:0; margin-top:.4rem; } .inner_locnav .inner_snav ul li:after{ display:none; } .inner_locnav .inner_snav ul{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-right:0; margin-left:-.3rem; margin-bottom:-.3rem; } .inner_locnav .inner_snav ul li{ padding:0; width:33.33333%; margin-bottom:.3rem; -webkit-flex-grow:1; -ms-flex-grow:1; flex-grow:1; } .inner_locnav .inner_snav ul li a{ display:block; padding:.2rem 0; border:solid 1px #dfdfdf; text-align:center; border-radius:5px; margin-left:.3rem; } .inner_locnav .inner_snav ul li.active a{ border-color:#cb0101; } /* 联系我们 */ .cta_box .cta_s1 .cta_tabs ul li{ width:100%; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cta_box .cta_s1 .cta_item.active .cta_ifr, .cta_box .cta_s1 .cta_item iframe{ height:300px; } .cta_box .cta_s2 .cta_con ul li .iconfont{ font-size:1.2rem; } /* 加入我们 */ .join_box .join_s3 .join_con ul li{ -webkit-flex-direction:row !important; flex-direction:row !important; -webkit-align-items:center; align-items:center; } .join_box .join_s3 .join_con ul li:nth-child(even){ -webkit-flex-direction:row-reverse !important; flex-direction:row-reverse !important; } .join_box .join_s3 .join_con ul li{ width:100%; } .join_box .join_s3 .join_con ul li .join_icon{ width:12vw; height:12vw; line-height:12vw; } .join_box .join_s3 .join_con ul li .join_icon .iconfont{ font-size:6vw; } .join_box .join_s3 .join_con ul li .join_txt{ padding:.4rem; width:50%; } .join_box .join_s3 .join_con ul li .join_img{ width:50%; height:calc(92vw * .5 * 26 / 34); } .join_box .join_s3 .join_con ul li .join_txt .join_w{ font-size:13px; margin-top:.2rem; } } @media screen and (max-width:767px){ .busi_sys ul{ -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start; margin-bottom:-.4rem; } .busi_sys ul li{ width:33.33333%; margin-bottom:.4rem; } .busi_sys ul li a span{ width:20vw; height:20vw; margin:0 auto; } .busi_sys ul li a span img{ max-width:60%; max-height:60%; } .busi_sys ul li a p{ font-size:.36rem; margin-top:.2rem; } /* 标题 */ .zx_tit h2{ font-size:.46rem; } .zx_tit > span{ font-size:.34rem; } /* 热门课程 */ .hot_course .hc_list ul li{ width:50%; } .hot_course .hc_list ul li a .hc_img{ height:calc((92vw - .3rem) * .5 * 2 / 3); } /* 更多 */ .zx_more a{ font-size:14px; padding:8px .6rem; } /* 行业资讯 */ .news_box .news_pics a .news_wrap h3, .news_box .news_pics a .news_wrap span{ font-size:14px; } .news_box .news_pics a .news_wrap h3{ max-width:calc(100% - 90px); } .news_box .news_list ul li a .news_date{ height:auto; width:90px; } .news_box .news_list ul li a .news_date p{ font-size:22px; } .news_box .news_list ul li a .news_date span{ font-size:16px; } .news_box .news_list ul li a .news_wrap{ padding:.4rem; width:calc(100% - 90px); } .news_box .news_list ul li a .news_wrap h3{ font-size:15px; } .news_box .news_list ul li a .news_wrap p, .news_box .news_list ul li a .news_wrap span{ font-size:13px; } .news_box .news_list ul li+li{ margin-top:.3rem; } /* 资质服务 */ .qual_service .qs_list ul li{ width:50%; } /* 人才服务 */ .talent_service .ts_list ul>li{ width:100%; } .talent_service .ts_list ul>li .ts_btn{ top:auto; bottom:.4rem; right:.4rem; } /* 合作机构 */ .partner_box .par_con ul li{ width:50%; } .partner_box .par_con ul li .par_ss .par_img{ height:60px; } .partner_box .par_con ul li .par_wrap h4{ font-size:.36rem; } /* 页脚 */ .footer_bot .footer_cpr{ font-size:13px; } .course_list_banner .cl_con ul{ padding:.2rem; } .course_list_banner .cl_con ul li .cl_icon{ width:8vw; height:8vw; line-height:8vw; display:none; } .course_list_banner .cl_con ul li .cl_icon .iconfont{ font-size:4vw; } .course_list_banner .cl_con ul li .cl_w{ font-size:.36rem; margin-top:.1rem; } .course_list_banner .cl_con ul li+li{ margin-top:.3rem; } .course_list ul>li a .cl_wrap .cl_info{ display:none; } /* 资讯推荐 */ .news_rec .nr_con ul li{ width:50%; } .zx_lbr .news_rec .nr_con ul li a .nr_img, .zx_lrb .news_rec .nr_con ul li a .nr_img{ height:calc((92vw - .3rem) * .5 * 2 / 3); } .news_rec .nr_con ul li a .nr_wrap{ padding:.2rem; } .news_rec .nr_con ul li a .nr_wrap h5{ font-size:14px; } /* 推荐课程 */ .zx_right{ margin-top:.6rem; } .cour_rec .cr_con ul li a .cr_wrap .cr_tit{ font-size:15px; } .qual_rec.cour_rec .cr_con ul li a .cr_wrap .cr_info{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qual_rec.cour_rec .cr_con ul li a .cr_wrap .cr_info>*{ width:100%; line-height:1.6; } .cour_rec .cr_con ul li a .cr_wrap .cr_info{ font-size:12px; } /* 课程详情页 */ .course_show .cs_top{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .course_show .cs_top .cs_img, .course_show .cs_top .cs_wrap{ width:100%; } .course_show .cs_top .cs_wrap{ margin-top:.4rem; } .course_show .cs_top .cs_wrap .cs_tit{ font-size:15px; } .course_show .cs_top .cs_wrap .cs_info{ font-size:13px; } .course_show .cs_top .cs_wrap .cs_bot{ -webkit-align-items:center; align-items:center; } .course_show .cs_top .cs_wrap .cs_bot .cs_price{ font-size:12px; } .course_show .cs_top .cs_wrap .cs_bot .cs_price em{ font-size:.44rem; } .course_show .cs_top .cs_wrap .cs_bot .cs_btn{ font-size:14px; padding:6px 5vw; } .dart_tit h3{ font-size:17px; } .dart_tit h3:before{ height:16px; margin-top:-8px; } /* 报名表单 */ .fix_entry .center_box{ width:92%; padding-top:40px; } .fix_entry .entry_box .en_form ul li.en_tel{ display:none; } .fix_entry .entry_box .en_form ul li{ width:100%; } .fix_entry .entry_box .en_tit{ font-size:.42rem; } .fix_entry .entry_box .en_form ul li.en_vfy .en_con input{ width:55%; width:calc(97% - 126px); } .fix_entry .entry_box .en_form ul li.en_vfy .en_send{ width:42%; width:126px; } .fix_entry .entry_box .en_form ul li.en_submit .en_name{ display:none; } .fix_entry .entry_box .en_form ul li.en_submit .en_con{ width:100%; } .fix_entry .entry_box .en_form ul li.en_submit .en_con input{ font-size:16px; } /* 资质服务 */ .qual_service .qs_s1 .qs_bot .qs_sel{ background:none; -webkit-flex-wrap:wrap; flex-wrap:wrap; border-radius:0; } .qual_service .qs_s1 .qs_bot .qs_con{ width:100%; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label2:before{ display:none; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label{ background:rgba(255,255,255,.9); width:100%; border-radius:5px; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label2{ margin:.3rem 0; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label select{ padding:.2rem .4rem; font-size:.36rem; } .qual_service .qs_s1 .qs_bot .qs_sel button{ width:100%; padding:.2rem 0; border-radius:5px; } .qual_service .qs_s2 .center_box{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qual_service .qs_s2 .qs_left{ width:100%; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon{ width:16vw; height:16vw; line-height:16vw; } .qual_service .qs_s2 .qs_left .qs_con ul li{ width:31%; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon .iconfont{ font-size:8vw; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon .iconfont.icon-rocket-full{ font-size:7vw; } .qual_service .qs_s2 .qs_left .qs_con ul li h4{ font-size:.42rem; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_w{ font-size:.36rem; } .qual_service .qs_s2 .qs_right{ width:100%; margin-top:.3rem; } .qual_service .qs_s3 .qs_tit span, .qual_service .qs_s3 .qs_tit h3{ font-size:.44rem; } .qual_service .qs_s3 .qs_ctit{ width:100%; } .qual_service .qs_s3 .qs_ctit .qs_grey, .qual_service .qs_s3 .qs_ctit .qs_red{ padding:.2rem; font-size:.38rem; } .qual_service .qs_s3 .qs_ctit .qs_grey{ padding-left:.8rem; } .qual_service .qs_s3 .qs_ctit .qs_red{ padding-right:.8rem; } .qual_service .qs_s3 .qs_ctit .qs_vs{ width:1.2rem; height:1.2rem; margin:-.6rem 0 0 -.6rem; } .qual_service .qs_s3 .qs_ccon{ padding:.8rem .4rem .4rem; } .qual_service .qs_s3 .qs_ccon li .qs_tag{ padding:0; height:30px; line-height:30px; font-size:13px; width:60px; text-align:center; } .qual_service .qs_s3 .qs_ccon li .qs_red, .qual_service .qs_s3 .qs_ccon li .qs_grey{ font-size:13px; } .qual_service .qs_s2 .qs_left .qs_tit, .qual_service .qs_stit h3{ font-size:.44rem; } .qual_service .qs_s2 .qs_left .qs_tit{ margin-bottom:.5rem; } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_vfy input{ width:calc(97% - 126px); } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_vfy .qs_send{ width:126px; } .qual_service .qs_s2 .qs_right .qs_form ul li.qs_submit input{ font-size:16px; } .inner_banner{ height:25vh; } .inner_banner.inner_ser_banner{ height:50vh; } .inner_banner .ser_swrap{ left:4%; margin-left:0; } .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit h3{ font-size:.4rem; } /* 资质详情 */ .service_show>.center_box{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .service_show .ser_left{ width:100%; position:static; } .service_show .ser_right{ width:100%; margin-top:.5rem; } .detail_article .dart_mtit h3{ font-size:.44rem; } .detail_article .dart_mtit span{ padding:0 .2rem; } .service_show .ser_left .ser_nav .ser_ntit:before{ display:none; } .dart_btn a{ font-size:.36rem; padding:.2rem 5vw; } /* 转让求购 */ .filter_bar{ -webkit-flex-direction:column-reverse; flex-direction:column-reverse; } .filter_bar .filter_sear{ width:100%; margin-bottom:.4rem; } .filter_bar .filter_sear input, .filter_bar .filter_sear button{ height:40px; } .filter_bar .filter_sear input{ width:calc(100% - 40px); } .filter_bar .filter_con{ width:100%; } .filter_bar .filter_con ul li{ width:25%; } .filter_bar .filter_con ul li .filter_ss{ padding:0; } .filter_bar .filter_con ul li span{ font-size:.36rem; } .inner_trpu_list{ padding:0 .4rem; } .inner_trpu_list ul>li .tp_a .tp_top{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .inner_trpu_list ul>li .tp_a .tp_top .tp_tag{ padding:4px 0; width:50px; text-align:center; } .inner_trpu_list ul>li .tp_a .tp_top .tp_tit{ width:100%; margin-bottom:.2rem; } .inner_trpu_list ul>li .tp_a .tp_top .tp_tit h4{ font-size:15px; width:calc(100% - 60px); } .inner_trpu_list ul>li .tp_a .tp_top .tp_price em{ font-size:18px; } .inner_trpu_list ul>li .tp_a .tp_top .tp_price{ font-size:13px; } .inner_trpu_list ul>li .tp_a .tp_bot{ margin-top:.15rem; } .inner_trpu_list ul>li .tp_a .tp_bot ol{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .inner_trpu_list ul>li .tp_a .tp_bot li{ width:50%; line-height:1.8; } .inner_trpu_list ul>li .tp_a .tp_bot li+li{ margin-left:0%; } .inner_trpu_list ul>li .tp_a{ padding-bottom:60px; } .inner_trpu_list ul>li .tp_a .tp_bot li, .inner_trpu_list ul>li .tp_a .tp_top .tp_date{ font-size:12px; } .tp_pgs{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .tp_pgs .tp_total{ width:100%; text-align:center; margin-bottom:.3rem; } .tp_pgs .list_pages{ max-width:none; width:100%; } .zx_rele_box{ -webkit-flex-wrap:wrap; flex-wrap:wrap; padding:.4rem; } .zx_rele_box .zx_rele_wrap>h5{ font-size:15px; } .zx_rele_box .zx_rele_wrap .zx_rele_a{ font-size:14px; padding:.24rem 8vw; } .zx_rele_box .zx_rele_icon{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; width:100%; margin-bottom:.4rem; } .zx_rele_box .zx_rele_icon img{ max-width:20vw; height:auto; } .zx_rele_box .zx_rele_wrap{ margin-left:0; width:100%; text-align:center; } .zx_rele_box .zx_rele_wrap>span{ margin-top:.1rem; } .zx_rele_box .zx_rele_wrap .zx_rele_a{ margin-top:.4rem; } .rele_pop_box{ margin-left:0; margin-top:0; top:0; left:0; width:100%; height:100%; border-radius:0; } .rele_pop_box .rele_pop_wrap{ width:100%; height:100%; padding-top:.8rem; } .rele_pop_box .rele_pop_tit h4{ font-size:20px; } .rele_pop_box .rele_pop_tit .rele_pop_exp{ margin-top:.2rem; } .rele_pop_box .rele_pop_con{ margin-top:.6rem; } .rele_pop_box .rele_pop_con ul li{ width:100%; } .rele_pop_box .rele_pop_con ul li.rp_submit input{ font-size:16px; } .qgzr_form .qgzr_tabs li, .qgzr_form .qgzr_con .qgzr_wrap .qgzr_submit input{ font-size:16px; } .qgzr_form .qgzr_tabs li{ height:40px; } .qgzr_form .qgzr_tabs li.active{ height:50px; } .qgzr_form .qgzr_con .qgzr_item .qgzr_tit{ font-size:14px; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit h4{ font-size:15px; line-height:1.5; padding-top:2px; } .qgzr_show .qgzr_top .qgzr_tit .qgzr_info{ margin-right:-5%; } .qgzr_show .qgzr_top .qgzr_tit .qgzr_info span{ font-size:12px; margin-right:5%; } .qgzr_show .qgzr_bot ol li{ font-size:13px; width:50%; } .qgzr_qs .qs_item .qs_tit h4{ font-size:15px; } .qgzr_qs .qs_item.qs_row4 ol li{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qgzr_qs .qs_item.qs_row4 ol li .qs_name{ margin-bottom:10px; } .qgzr_qs .qs_item.qs_row4 ol li .qs_name:before{ border:none; border-left:solid 6px transparent; border-right:solid 6px transparent; border-top:solid 5px #cb0101; left:50%; margin:0 0 0 -6px; top:100%; } .qgzr_qs .qs_item.qs_col4 ol{ margin-bottom:-.4rem; } .qgzr_qs .qs_item.qs_col4 ol li{ width:48%; margin-bottom:.4rem; } .qgzr_qs .qs_item.qs_col4 ol li .qs_name{ width:50px; height:50px; line-height:50px; } .qgzr_qs .qs_item.qs_col4 ol li .qs_name .iconfont{ font-size:26px; } .inner_job .inner_job_tit .job_c{ display:none; } .inner_job .inner_job_list ol{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .inner_job .job_c{ text-align:left; } .inner_job .job_c.job_c1, .inner_job .job_c.job_c2, .inner_job .job_c.job_c3, .inner_job .job_c.job_c4{ width:25%; text-align:left; margin-bottom:.2rem; } .inner_job .job_c.job_c5{ width:100%; margin-bottom:.2rem; } .inner_job .job_c.job_c6{ width:25%; } .inner_job .job_c.job_c7{ width:50%; } .inner_job .inner_job_list .job_c.job_c7{ font-family:"微软雅黑"; } .inner_trpu_list ul>li .tp_a .tp_top .tp_price{ position:absolute; left:0; bottom:22px; text-align:left; } .inner_trpu_list .inner_job_tit, .inner_job .inner_job_tit ul{ display:none; } .inner_subnav ul li{ margin-right:0; width:25%; text-align:center; } .inner_subnav ul li a{ padding:.2rem 0; font-size:.36rem; } .inner_news1 .news_s1 .news_wrap .news_txt .news_tit{ font-size:15px; -webkit-line-clamp:1; -moz-line-clamp:1; -o-line-clamp:1; -webkit-line-clamp:1; } .inner_news1 .news_s1 .news_pics{ width:60%; } .inner_news1 .news_s1 .news_wrap{ width:40%; } .inner_news1 .news_s3 .news_bot .news_pics{ width:100%; } .inner_news1 .news_s3 .news_bot .news_pics li:nth-of-type(1) a .news_img{ height:calc((92vw - .8rem) * 2 / 3); } .inner_news1 .news_bot .news_txt .news_first a{ font-size:15px; } .inner_news1 .news_s3 .news_bot .news_txt{ margin-top:.4rem; } .inner_news1 .news_wtit .news_more{ font-size:14px; } .inner_news1 .news_s4 .news_bot .news_pics li:nth-of-type(1) a .news_img{ height:calc((92vw - .8rem) * 2 / 3); } .inner_news1 .news_s4 .news_bot .news_pics li a .news_img{ height:calc((92vw - 10px) / 2 * 2 / 3); } .inner_news1 .news_s4 .news_bot .news_txt{ width:100%; margin-top:.5rem; } .inner_news1 .news_s4 .news_bot .news_txt .news_first a{ font-size:15px; } .news_first.mg_t60{ margin-top:.4rem; } .inner_news2_list ul li{ margin-bottom:.3rem; } .inner_news2_list ul li a .news_txt{ width:60%; padding:.25rem .3rem; } .inner_news2_list ul li a .news_txt h3{ font-size:15px; } .inner_news2_list ul li a .news_txt span{ font-size:12px; margin:.1rem 0; } .inner_news2_list ul li a .news_txt p{ -webkit-line-clamp:2; -moz-line-clamp:2; -o-line-clamp:2; -webkit-line-clamp:2; line-height:1.5; font-size:13px; } .inner_news2_list ul li a .news_img{ width:40%; height:calc(92vw * .4 * 2 / 3); } /* 关于我们 */ body .abo_tit{ margin-bottom:.4rem; } .abo_tit h2{ font-size:.44rem; } .abo_tit span{ font-size:.36rem; } .abo_box .abo_con{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .abo_box .abo_con .abo_pics{ padding-right:1rem; padding-bottom:.4rem; width:100%; } .abo_box .abo_con .abo_pics:before{ top:.4rem; } .abo_pics .swiper-pagination{ width:15px; top:0; left:auto; right:calc((1rem - 15px) / 2); } .abo_box .abo_con .abo_pics{ height:calc((92vw - 1rem) * 30 / 45 + .4rem); } .abo_box .abo_con .abo_pics .swiper-slide{ } .abo_box .abo_con .abo_pics .swiper-slide img{ height:calc((92vw - 1rem) * 30 / 45); } .abo_box .abo_con .abo_wrap{ width:100%; margin-top:.6rem; } .abo_box .abo_con .abo_wrap .abo_sub_tit h3{ font-size:16px; } .about_box .abo_s2 .abo_txt .abo_item+.abo_item{ margin-left:0; margin-top:.2rem; } .about_box .abo_s2 .abo_txt .abo_item>.abo_w, .about_box .abo_s2 .abo_exp{ font-size:.36rem; } .about_box .abo_s3 .center_box{ -webkit-flex-wrap:wrap; flex-wrap:wrap; } .about_box .abo_s3 .abo_img{ width:100%; } .about_box .abo_s3 .abo_wrap{ width:100%; padding:.6rem; } .about_box .abo_s3 .abo_wrap .abo_s3_tit{ position:static; display:inline-block; font-size:.42rem; padding:.2rem .6rem; } .about_box .abo_s3 .abo_txt{ padding-top:.4rem; font-size:14px; } .abo_s6_list ul{ margin-left:-.3rem; margin-right:-.3rem; } .abo_s6_list ul li{ margin-bottom:.3rem; width:50%; /* display:none; */ } .abo_s6_list ul li:nth-of-type(1), .abo_s6_list ul li:nth-of-type(2), .abo_s6_list ul li:nth-of-type(3), .abo_s6_list ul li:nth-of-type(4){ display:block; } .abo_s6_list ul li .abo_ss{ margin-left:.3rem; height:calc((92vw - .3rem) / 2 * 2 / 3); } .abo_s6 .swiper-pagination-bullet{ width:12px; height:12px; } .about_box .abo_s2_tit span h2, .join_box .join_s1 .join_list ul li .join_tit{ font-size:.42rem; } .join_box .join_s1 .join_list ul li .join_num{ font-size:1.2rem; } .join_box .join_s1 .join_exp{ font-size:.36rem; } .join_box .join_s2 .join_con ul li{ width:100%; } /* 联系我们 */ .cta_box .cta_s2 .cta_con ul li{ wdith:80%; } .service_show .ser_left .ser_nav{ background:none; } .service_show .ser_left .ser_nav ul{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .service_show .ser_left .ser_nav ul>li{ width:48.5%; margin-bottom:calc(92vw * .03); position:relative; } .service_show .ser_left .ser_nav .ser_ntit, .service_show .ser_left .ser_nav .ser_ncon li a{ padding:0 .2rem; } .service_show .ser_left .ser_nav .ser_ncon{ background:#fff; position:absolute; top:100%; left:0; width:100%; z-index:4; } .service_show .ser_left .ser_nav .ser_ntit{ font-size:.36rem; background:#fff; } .service_show .ser_left .ser_nav li.active .ser_ntit{ color:inherit; } .service_show .ser_left .ser_nav li.active .ser_ntit .iconfont{ transform:rotate(0deg); } .service_show .ser_left .ser_nav li.active .ser_ncon{ max-height:0px; } .service_show .ser_left .ser_nav li.active .ser_ntit h3{ font-weight:normal; } .service_show .ser_left .ser_nav li.m_active .ser_ntit{ color:#cb0101; } .service_show .ser_left .ser_nav li.m_active .ser_ntit .iconfont{ transform:rotate(180deg); } .service_show .ser_left .ser_nav li.m_active .ser_ncon{ max-height:1200px; box-shadow:0 10px 10px rgba(0,0,0,.1); } .service_show .ser_left .ser_nav li.m_active .ser_ntit h3{ font-weight:bold; } .news_mtit h3{ font-size:16px; } .news_mtit .news_minfo{ margin-right:-5vw; } .news_mtit .news_minfo span{ margin-right:5vw; } .entry_turn_btn{ padding-right:15px; padding-left:15px; } .article_w table td{ padding:2px; } /* 新弹出 */ .pop2_container{ width:270px; } .pop2_container .pop2_wrapper .pop2_l{ display:none; } .pop2_container .pop2_wrapper .pop2_r{ width:270px; padding:10vw 0; } .pop2_container .pop2_wrapper .pop2_r_qr{ margin-top:8vw; } .pop2_container .pop2_wrapper .pop2_r_bot{ margin-top:6vw; } } @media screen and (min-width:768px) and (max-width:1200px){ .pd_150{ padding:1.5rem; } .pd_tb150{ padding:1.5rem 0; } .pd_t150{ padding-top:1.5rem; } .pd_b150{ padding-bottom:1.5rem; } .pd_120{ padding:1.2rem; } .pd_tb120{ padding:1.2rem 0; } .pd_t120{ padding-top:1.2rem; } .pd_b120{ padding-bottom:1.4rem; } .pd_100{ padding:1rem; } .pd_tb100{ padding:1rem 0; } .pd_t100{ padding-top:1rem; } .pd_b100{ padding-bottom:1rem; } .pd_80{ padding:.8rem; } .pd_tb80{ padding:.8rem 0; } .pd_t80{ padding-top:.8rem; } .pd_b80{ padding-bottom:.8rem; } .pd_70{ padding:.7rem; } .pd_tb70{ padding:.7rem 0; } .pd_t70{ padding-top:.7rem; } .pd_b70{ padding-bottom:.7rem; } .pd_60{ padding:.6rem; } .pd_tb60{ padding:.6rem 0; } .pd_t60{ padding-top:.6rem; } .pd_b60{ padding-bottom:.6rem; } .pd_50{ padding:.5rem; } .pd_tb50{ padding:.5rem 0; } .pd_t50{ padding-top:.5rem; } .pd_b50{ padding-bottom:.5rem; } .pd_40{ padding:.4rem; } .pd_tb40{ padding:.4rem 0; } .pd_t40{ padding-top:.4rem; } .pd_b40{ padding-bottom:.4rem; } .pd_30{ padding:.3rem; } .pd_tb30{ padding:.3rem 0; } .pd_t30{ padding-top:.3rem; } .pd_b30{ padding-bottom:.3rem; } .pd_20{ padding:.2rem; } .pd_tb20{ padding:.2rem 0; } .pd_t20{ padding-top:.2rem; } .pd_b20{ padding-bottom:.2rem; } .pd_15{ padding:.15rem; } .pd_tb15{ padding:.15rem 0; } .pd_t15{ padding-top:.15rem; } .pd_b15{ padding-bottom:.15rem; } .mg_t150{ margin-top:1.5rem; } .mg_b150{ margin-bottom:1.5rem; } .mg_t100{ margin-top:1rem; } .mg_b100{ margin-bottom:1rem; } .mg_tb80{ margin:.8rem 0; } .mg_t80{ margin-top:.8rem; } .mg_b80{ margin-bottom:.8rem; } .mg_tb60{ margin:.6rem 0; } .mg_t60{ margin-top:.6rem; } .mg_b60{ margin-bottom:.6rem; } .mg_tb50{ margin:.5rem 0; } .mg_t50{ margin-top:.5rem; } .mg_b50{ margin-bottom:.5rem; } .mg_tb40{ margin:.4rem 0; } .mg_t40{ margin-top:.4rem; } .mg_b40{ margin-bottom:.4rem; } .mg_tb30{ margin:.3rem 0; } .mg_t30{ margin-top:.3rem; } .mg_b30{ margin-bottom:.3rem; } .mg_tb20{ margin:.2rem 0; } .mg_t20{ margin-top:.2rem; } .mg_b20{ margin-bottom:.2rem; } .mg_tb15{ margin:.15rem 0; } .mg_t15{ margin-top:.15rem; } .mg_b15{ margin-bottom:.15rem; } .mg_tb10{ margin:.1rem 0; } .mg_t10{ margin-top:.1rem; } .mg_b10{ margin-bottom:.1rem; } .header_mid .center_box, .header_height, .menu{ height:70px; } .header_mid .logo img{ max-height:40px; } .busi_sys ul li a span{ width:12vw; height:12vw; margin:0 auto; } .busi_sys ul li a span img{ max-width:50%; max-height:50%; } .busi_sys ul li a p{ font-size:.26rem; } .hot_course .hc_list ul li a .hc_img{ height:calc((92vw - .6rem) / 3 * 25 / 38); } .zx_tit h2{ font-size:.34rem; } .zx_tit > span{ font-size:.26rem; } .hot_course .hc_list ul li a .hc_wrap h3{ font-size:15px; } .news_box .news_list ul li a .news_date p{ font-size:26px; } .news_box .news_list ul li a .news_date{ width:110px; } .news_box .news_list ul li a .news_wrap h3{ font-size:17px; } .news_box .news_list ul li a .news_wrap{ width:calc(100% - 110px); } .qual_service .qs_list ul li a .qs_w{ font-size:.26rem; } .inner_course .inner_cl_tit .iconfont{ font-size:.5rem; } .inner_course .inner_cl_tit h2, .recommend_tit h3{ font-size:.34rem; } .course_list ul>li a .cl_wrap .cl_bot .cl_price em{ font-size:.34rem; } .course_list ul>li a .cl_wrap .cl_tit{ font-size:16px; } .recommend_tit span{ font-size:.26rem; } .zx_lbr .news_rec .nr_con ul li a .nr_img, .zx_lrb .news_rec .nr_con ul li a .nr_img{ height:calc((92vw - .6rem) / 3 * 2 / 3); } .cour_rec .cr_con ul li{ width:33.33333%; } .zx_lr.zx_lrb .zx_right, .zx_lr.zx_lbr .zx_right{ margin-top:.4rem; } .zx_lrb .cour_rec .cr_con ul li a .cr_img, .zx_lbr .cour_rec .cr_con ul li a .cr_img{ height:calc((92vw - .6rem) / 3 * 2 / 3); } .course_show .cs_top .cs_wrap .cs_tit{ font-size:16px; } .course_show .cs_top .cs_wrap .cs_bot .cs_price em{ font-size:22px; } .course_show .cs_top .cs_wrap .cs_bot .cs_btn{ padding-bottom:8px; padding-bottom:8px; } .fix_entry .center_box{ width:92%; max-width:910px; } .fix_entry .header_tel .header_t{ display:block; } .fix_entry .header_tel .iconfont{ font-size:40px; } .fix_entry .entry_box .en_form ul li.en_vfy .en_send{ width:126px; } .fix_entry .entry_box .en_form ul li.en_vfy .en_con input{ width:calc(97% - 126px); } .qual_service .qs_s1 .qs_top ul li a .qs_wrap h4{ font-size:.3rem; } .qual_service .qs_s1 .qs_top ul li a .qs_wrap{ max-width:120px; } .qual_service .qs_s1 .qs_top ul li a{ -webkit-justify-content:center; justify-content:center; } .qual_service .qs_s1 .qs_bot .qs_tit h3{ font-size:.34rem; } .qual_service .qs_s1 .qs_bot .qs_con{ width:100%; } .qual_service .qs_s1 .qs_bot .qs_sel .qs_label select{ font-size:15px; } .qual_service .qs_s2 .qs_left{ width:calc(100% - 320px); } .qual_service .qs_s2 .qs_right{ width:300px; } .qual_service .qs_s2 .qs_left .qs_con ul li{ width:31%; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon{ width:60px; height:60px; line-height:60px; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon .iconfont{ font-size:40px; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_icon .iconfont.icon-rocket-full{ font-size:30px; } .qual_service .qs_s2 .qs_left .qs_tit{ font-size:20px; } .qual_service .qs_s2 .qs_left .qs_con ul li h4{ font-size:18px; } .qual_service .qs_s2 .qs_left .qs_con ul li .qs_w{ font-size:14px; } .qual_service .qs_s3 .qs_tit span, .qual_service .qs_s3 .qs_tit h3{ font-size:.34rem; } .qual_service .qs_s3 .qs_ctit h4{ padding:.2rem; font-size:17px; } .qual_service .qs_s3 .qs_ctit .qs_red{ padding-right:70px; } .qual_service .qs_s3 .qs_ctit .qs_grey{ padding-left:70px; } .qual_service .qs_s3 .qs_ctit .qs_vs{ width:80px; height:80px; margin:-40px 0 0 -40px; } .qual_service .qs_s3 .qs_ccon li .qs_tag, .qual_service .qs_s3 .qs_ccon li .qs_red, .qual_service .qs_s3 .qs_ccon li .qs_grey{ font-size:15px; } .qual_service .qs_s3 .qs_ccon{ padding:50px 20px 20px; } .qual_service.ser_swrap .qs_s1 .qs_bot .qs_tit h3{ font-size:.34rem; } .service_show .ser_right{ width:calc(100% - 230px); } .service_show .ser_left{ top:90px; } .dart_btn a{ font-size:16px; } .inner_trpu_list ul>li .tp_a .tp_bot li+li{ margin-left:5%; } .inner_trpu_list ul>li .tp_btn{ bottom:.2rem; } .inner_trpu_list ul>li .tp_a .tp_top .tp_price em{ font-size:20px; } .qgzr_show .qgzr_top .qgzr_tit .tp_tit h4{ font-size:16px; line-height:1.5; padding-top:2px; } .qgzr_qs .qs_item.qs_row4 ol li .qs_w{ width:calc(100% - 110px); } .rele_pop_box .rele_pop_con{ padding:20px; } .rele_pop_box .rele_pop_wrap{ padding-top:30px; padding-right:30px; padding-left:30px; } .inner_news1 .news_s4 .news_bot .news_txt .news_first a, .inner_news1 .news_bot .news_txt .news_first a{ font-size:16px; } .inner_news1 .news_s3 .news_bot .news_txt{ width:calc(100% - 260px); } .inner_news1 .news_s4 .news_bot .news_pics{ width:320px; } .inner_news1 .news_s4 .news_bot .news_txt{ width:calc(100% - 340px); } .inner_news1 .news_s4 .news_bot .news_pics li a .news_img{ height:100px; } .inner_news1 .news_s4 .news_bot .news_pics li:nth-of-type(1) a .news_img{ height:210px; } .news_first.mg_t60{ margin-top:.3rem; } .inner_news2_list ul li a .news_img{ width:240px; height:160px; } .inner_news2_list ul li a .news_txt{ width:calc(100% - 250px); padding-top:.3rem; } .inner_news2_list ul li a .news_txt h3{ font-size:16px; } .result_box .res_list ul li a p{ font-size:16px; } .news_mtit h3{ font-size:18px; } } @media screen and (min-width:768px) and (max-width:895px){ /* banner */ .banner_box .swiper-xn{ display:none; } .banner_box .swiper-slide a{ height:30vh; position:relative; } .inner_banner{ height:30vh; } .talent_service .ts_list ul>li .ts_btn{ top:auto; right:.3rem; bottom:.3rem; } .talent_service .ts_list ul>li .ts_info{ padding-bottom:.7rem; } .course_list_banner .cl_con ul li .cl_icon{ width:50px; height:50px; line-height:46px; } .course_list_banner .cl_con ul li .cl_icon .iconfont{ font-size:24px; } .course_list_banner .cl_con ul li .cl_w{ font-size:.26rem; margin-top:5px; } .course_list_banner .cl_con ul li+li{ margin-top:10px; } .course_show .cs_top .cs_img{ width:40%; } .course_show .cs_top .cs_wrap{ width:57%; } .qual_service .qs_s4 .qs_con .qs_img{ text-align:center; } .qual_service .qs_s4 .qs_con .qs_img img{ display:inline-block; } .qual_service .qs_s5 .qs_slist ul li{ width:50%; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_wrap{ width:60%; padding-top:.2rem; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_img{ height:calc((92vw - .3rem) / 2 * .4 * 2 / 3); width:40%; } .qs_adv ul li .qs_icon{ width:12vw; height:12vw; line-height:calc(12vw - 4px); } .qs_adv ul li .qs_icon .iconfont{ font-size:6vw; } .qs_adv ul li .qs_w{ font-size:.26rem; } .inner_banner.inner_ser_banner{ height:30vh; } .inner_banner .ser_swrap{ margin-left:0; left:4%; } .inner_banner .qs_s1{ width:100%; } .service_show .ser_left .ser_nav ul>li{ width:100%; } .qgzr_form .qgzr_con .qgzr_wrap{ padding-left:20px; padding-top:20px; padding-right:20px; } .qgzr_form .qgzr_con .qgzr_fcon{ padding:20px; } .abo_box .abo_con .abo_pics{ display:none; } .abo_tit h2{ font-size:.34rem; } .abo_tit span{ font-size:16px; } .about_box .abo_s3 .abo_txt{ font-size:14px; padding-top:.35rem; } .about_box .abo_s3 .abo_img{ display:none; } .about_box .abo_s3 .abo_wrap .abo_s3_tit{ position:static; display:inline-block; font-size:18px; } .qs_adv ul li h4{ font-size:.36rem; } .abo_s6_list ul li .abo_ss{ height:calc((92vw - 60px) / 4 * 2 / 3); } .join_box .join_s1 .join_list ul li{ width:calc(50% - 5px); } .join_box .join_s1 .join_list ul li .join_num{ font-size:80px; } .join_box .join_s2 .join_con ul li{ width:calc(50% - 5px); } .cta_box .cta_s2 .cta_con ul li{ width:32%; } .partner_box .par_con ul li .par_wrap h4{ font-size:15px; } } @media screen and (min-width:896px) and (max-width:1200px){ /* banner */ .banner_box .swiper-slide a{ height:50vh; } .banner_box .swiper-xn{ display:none; } .banner_box .swiper-slide a .banner_txt img{ margin-bottom:100px; } .busi_sys ul li a span{ width:11vw; height:11vw; line-height:11vw; } .news_box .news_pics{ width:48%; } .news_box .news_list{ width:50%; } .news_box .news_pics a .news_img{ height:calc(92vw * .48 * 2 / 3); } .news_box .news_list ul li a .news_date{ width:100px; height:104px; } .news_box .news_list ul li a .news_wrap{ width:calc(100% - 100px); padding:.2rem; } .news_box .news_list ul li a .news_date p{ font-size:22px; } .qual_service .qs_list ul li a .qs_icon{ width:30%; } .qual_service .qs_list ul li a .qs_w{ min-width:auto; } .trpu_box .trpu_list ul li .tp_ss .tp_info{ width:calc(100% - 120px); } .talent_service .ts_list ul>li .ts_info h3{ max-width:100%; } .talent_service .ts_list ul>li .ts_info{ padding-bottom:.8rem; } .talent_service .ts_list ul>li .ts_btn{ top:auto; right:.2rem; bottom:.25rem; } nav>ul{ width:100%; } .course_list_banner .cl_con ul li .cl_w{ font-size:16px; } .course_list ul>li a .cl_wrap{ width:68%; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_img{ width:40%; height:calc((92vw - 30px) / 2 * .4 * 2 / 3); } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_wrap{ width:60%; } .qual_service .qs_s5 .qs_slist ul>li .qs_ss .qs_info{ display:none; } .qs_adv ul li .qs_icon{ width:80px; height:80px; line-height:80px; } .qs_adv ul li .qs_icon .iconfont{ font-size:40px; } .qs_adv ul li h4{ font-size:22px; } .footer_bot .footer_tel{ display:flex; } .footer_bot .footer_cpr{ width:calc(100% - 240px); } .qual_service .qs_s1 .qs_top ul li a{ padding:20px; } .qual_service .qs_s1 .qs_top ul li a .qs_icon{ width:70px; height:70px; line-height:70px; margin-right:10px; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont{ font-size:40px; } .qual_service .qs_s1 .qs_top ul li a .qs_icon .iconfont.icon-biaozhunchanpin{ font-size:34px; } .zx_lr.zx_lrb .zx_left{ width:100%; } .qgzr_form .qgzr_con .qgzr_fcon ul{ display:flex; -webkit-justify-content:space-between; justify-content:space-between; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .qgzr_form .qgzr_con .qgzr_wrap ul li+li{ margin-top:0; } .qgzr_form .qgzr_con .qgzr_wrap ul li{ margin-bottom:10px !important; width:49%; } .rele_pop_box .rele_pop_tit h4{ font-size:20px; } .inner_news1 .news_m .swiper-slide a{ display:flex; justify-content:space-between; align-items:center; } .inner_news1 .news_m .swiper-slide a .news_img{ width:25%; height:calc(92vw * .25 * 2 / 3); } .inner_news1 .news_m .swiper-slide a .news_txt{ width:73%; } .inner_news1 .news_m .swiper-slide a .news_txt h3{ font-size:18px; font-weight:bold; } .inner_news1 .news_s2 .news_wrap li a{ font-size:18px; } .inner_news1 .news_s2 .news_name span{ font-size:20px; } .inner_news1 .news_s2 .news_name{ width:80px; height:80px; } .inner_news1 .news_s2 .news_wrap{ width:calc(100% - 110px); } .inner_news1 .news_s4 .news_bot .news_txt .news_first a, .inner_news1 .news_bot .news_txt .news_first a{ font-size:18px; } .abo_box .abo_con .abo_wrap{ width:calc(100% - 550px); } .about_box .abo_s3 .abo_wrap .abo_s3_tit{ font-size:18px; top:.3rem; } .about_box .abo_s3 .abo_img img{ height:100%; } .abo_s6_list ul li .abo_ss{ height:calc((92vw - 60px) / 4 * 2 / 3); } .abo_tit h2{ font-size:20px; } .abo_tit span{ font-size:16px; } .join_box .join_s1 .join_list ul li{ width:calc(50% - 10px); padding:20px; } .join_box .join_s1 .join_exp{ padding:20px; } .join_box .join_s1 .join_list ul li .join_tit, .course_show .cs_top .cs_wrap .cs_tit{ font-size:18px; } .join_box .join_s2 .join_con ul li{ width:calc(50% - 10px); } .join_box .join_s3 .join_con ul li .join_icon{ width:60px; height:60px; line-height:60px; } .join_box .join_s3 .join_con ul li .join_icon .iconfont{ font-size:30px; } .join_box .join_s3 .join_con ul li .join_img{ width:56%; height:calc(92vw * .5 * .56 * 26 / 34); } .join_box .join_s3 .join_con ul li .join_txt{ width:44%; padding:.3rem; } .cta_box .cta_s2 .cta_con ul li{ width:32%; } .inner_banner.inner_ser_banner{ height:50vh; } .inner_banner .ser_swrap{ margin-left:0; left:10%; width:80%; } .inner_banner .qs_s1{ width:100%; } .course_show .cs_top .cs_img{ width:35%; } .course_show .cs_top .cs_wrap{ width:62%; } .partner_box .par_con ul li .par_wrap h4{ font-size:17px; } } /*! * Hover.css (http://ianlunn.github.io/Hover/) * Version: 2.0.0 * Author: Ian Lunn @IanLunn * Author URL: http://ianlunn.co.uk/ * Github: https://github.com/IanLunn/Hover * Made available under a MIT License: * http://www.opensource.org/licenses/mit-license.php * Hover.css Copyright Ian Lunn 2014. Generated with SASS. */ /* 2D TRANSITIONS */ /* Grow */ .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.1); transform: scale(1.1); } /* Shrink */ .hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.9); transform: scale(0.9); } /* Pulse */ @-webkit-keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse { 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active { -webkit-animation-name: hvr-pulse; animation-name: hvr-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Pulse Grow */ @-webkit-keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes hvr-pulse-grow { to { -webkit-transform: scale(1.1); transform: scale(1.1); } } .hvr-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active { -webkit-animation-name: hvr-pulse-grow; animation-name: hvr-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Pulse Shrink */ @-webkit-keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active { -webkit-animation-name: hvr-pulse-shrink; animation-name: hvr-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Push */ @-webkit-keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hvr-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .hvr-push { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-push:hover, .hvr-push:focus, .hvr-push:active { -webkit-animation-name: hvr-push; animation-name: hvr-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Pop */ @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .hvr-pop { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Bounce In */ .hvr-bounce-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Bounce Out */ .hvr-bounce-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active { -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Rotate */ .hvr-rotate { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active { -webkit-transform: rotate(4deg); transform: rotate(4deg); } /* Grow Rotate */ .hvr-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active { -webkit-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } /* Float */ .hvr-float { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-float:hover, .hvr-float:focus, .hvr-float:active { -webkit-transform: translateY(-8px); transform: translateY(-8px); } /* Sink */ .hvr-sink { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active { -webkit-transform: translateY(8px); transform: translateY(8px); } /* Bob */ @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .hvr-bob { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { -webkit-animation-name: hvr-bob-float, hvr-bob; animation-name: hvr-bob-float, hvr-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Hang */ @-webkit-keyframes hvr-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes hvr-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @-webkit-keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes hvr-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } .hvr-hang { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active { -webkit-animation-name: hvr-hang-sink, hvr-hang; animation-name: hvr-hang-sink, hvr-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Skew */ .hvr-skew { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); } /* Skew Forward */ .hvr-skew-forward { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active { -webkit-transform: skew(-10deg); transform: skew(-10deg); } /* Skew Backward */ .hvr-skew-backward { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active { -webkit-transform: skew(10deg); transform: skew(10deg); } /* Wobble Vertical */ @-webkit-keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active { -webkit-animation-name: hvr-wobble-vertical; animation-name: hvr-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Horizontal */ @-webkit-keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active { -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble To Bottom Right */ @-webkit-keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active { -webkit-animation-name: hvr-wobble-to-bottom-right; animation-name: hvr-wobble-to-bottom-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble To Top Right */ @-webkit-keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes hvr-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .hvr-wobble-to-top-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active { -webkit-animation-name: hvr-wobble-to-top-right; animation-name: hvr-wobble-to-top-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Top */ @-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Bottom */ @-webkit-keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active { -webkit-animation-name: hvr-wobble-bottom; animation-name: hvr-wobble-bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Wobble Skew */ @-webkit-keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .hvr-wobble-skew { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-wobble-skew:hover, .hvr-wobble-skew:focus, .hvr-wobble-skew:active { -webkit-animation-name: hvr-wobble-skew; animation-name: hvr-wobble-skew; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Buzz */ @-webkit-keyframes hvr-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .hvr-buzz { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active { -webkit-animation-name: hvr-buzz; animation-name: hvr-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Buzz Out */ @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active { -webkit-animation-name: hvr-buzz-out; animation-name: hvr-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* BACKGROUND TRANSITIONS */ /* Fade */ .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: #2098d1; color: white; } /* Sweep To Right */ .hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: white; } .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Left */ .hvr-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { color: white; } .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Sweep To Bottom */ .hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { color: white; } .hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Sweep To Top */ .hvr-sweep-to-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { color: white; } .hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* Bounce To Right */ .hvr-bounce-to-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active { color: white; } .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Left */ .hvr-bounce-to-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active { color: white; } .hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Bottom */ .hvr-bounce-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active { color: white; } .hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Top */ .hvr-bounce-to-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .hvr-bounce-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active { color: white; } .hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Radial Out */ .hvr-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active { color: white; } .hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before { -webkit-transform: scale(2); transform: scale(2); } /* Radial In */ .hvr-radial-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-radial-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; border-radius: 100%; -webkit-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-radial-in:hover, .hvr-radial-in:focus, .hvr-radial-in:active { color: white; } .hvr-radial-in:hover:before, .hvr-radial-in:focus:before, .hvr-radial-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle In */ .hvr-rectangle-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-rectangle-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active { color: white; } .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before { -webkit-transform: scale(0); transform: scale(0); } /* Rectangle Out */ .hvr-rectangle-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-rectangle-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-rectangle-out:hover, .hvr-rectangle-out:focus, .hvr-rectangle-out:active { color: white; } .hvr-rectangle-out:hover:before, .hvr-rectangle-out:focus:before, .hvr-rectangle-out:active:before { -webkit-transform: scale(1); transform: scale(1); } /* Shutter In Horizontal */ .hvr-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { color: white; } .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { -webkit-transform: scaleX(0); transform: scaleX(0); } /* Shutter Out Horizontal */ .hvr-shutter-out-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-out-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active { color: white; } .hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Shutter In Vertical */ .hvr-shutter-in-vertical { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #2098d1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-in-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active { color: white; } .hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); } /* Shutter Out Vertical */ .hvr-shutter-out-vertical { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #e1e1e1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-shutter-out-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098d1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active { color: white; } .hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); } /* BORDER TRANSITIONS */ /* Border Fade */ .hvr-border-fade { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active { box-shadow: inset 0 0 0 4px #2098d1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Hollow */ .hvr-hollow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: background; transition-property: background; box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-hollow:hover, .hvr-hollow:focus, .hvr-hollow:active { background: none; } /* Trim */ .hvr-trim { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before { opacity: 1; } /* Ripple Out */ @-webkit-keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes hvr-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } .hvr-ripple-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-ripple-out:before { content: ''; position: absolute; border: #e1e1e1 solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before { -webkit-animation-name: hvr-ripple-out; animation-name: hvr-ripple-out; } /* Ripple In */ @-webkit-keyframes hvr-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } @keyframes hvr-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } .hvr-ripple-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-ripple-in:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .hvr-ripple-in:hover:before, .hvr-ripple-in:focus:before, .hvr-ripple-in:active:before { -webkit-animation-name: hvr-ripple-in; animation-name: hvr-ripple-in; } /* Outline Out */ .hvr-outline-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-outline-out:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } .hvr-outline-out:hover:before, .hvr-outline-out:focus:before, .hvr-outline-out:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; } /* Outline In */ .hvr-outline-in { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-outline-in:before { pointer-events: none; content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } .hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* Round Corners */ .hvr-round-corners { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: border-radius; transition-property: border-radius; } .hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active { border-radius: 1em; } /* Underline From Left */ .hvr-underline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098d1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { right: 0; } /* Underline From Center */ .hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #2098d1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before { left: 0; right: 0; } /* Underline From Right */ .hvr-underline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; bottom: 0; background: #2098d1; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before { left: 0; } /* Overline From Left */ .hvr-overline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-overline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; top: 0; background: #2098d1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before { right: 0; } /* Overline From Center */ .hvr-overline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-overline-from-center:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; top: 0; background: #2098d1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before { left: 0; right: 0; } /* Overline From Right */ .hvr-overline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-overline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; top: 0; background: #2098d1; height: 4px; -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before { left: 0; } /* Reveal */ .hvr-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-color: #2098d1; border-style: solid; border-width: 0; -webkit-transition-property: border-width; transition-property: border-width; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); border-width: 4px; } /* Underline Reveal */ .hvr-underline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background: #2098d1; height: 4px; -webkit-transform: translateY(4px); transform: translateY(4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* Overline Reveal */ .hvr-overline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-overline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; background: #2098d1; height: 4px; -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0); } /* SHADOW/GLOW TRANSITIONS */ /* Glow */ .hvr-glow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } /* Shadow */ .hvr-shadow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); } /* Grow Shadow */ .hvr-grow-shadow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow, transform; transition-property: box-shadow, transform; } .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); transform: scale(1.1); } /* -webkit-Box Shadow Outset */ .hvr-box-shadow-outset { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; } .hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } /* -webkit-Box Shadow Inset */ .hvr-box-shadow-inset { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /* Float Shadow */ .hvr-float-shadow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ } /* Shadow Radial */ .hvr-shadow-radial { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-shadow-radial:before, .hvr-shadow-radial:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; transition-property: opacity; } .hvr-shadow-radial:before { bottom: 100%; background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .hvr-shadow-radial:after { top: 100%; background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); } .hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after { opacity: 1; } /* SPEECH BUBBLES */ /* Bubble Top */ .hvr-bubble-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); top: 0; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; } .hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* Bubble Right */ .hvr-bubble-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; } .hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } /* Bubble Bottom */ .hvr-bubble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; } .hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } /* Bubble Left */ .hvr-bubble-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-bubble-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; } .hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } /* Bubble Float Top */ .hvr-bubble-float-top { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); top: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active { -webkit-transform: translateY(10px); transform: translateY(10px); } .hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* Bubble Float Right */ .hvr-bubble-float-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:before { position: absolute; z-index: -1; top: calc(50% - 10px); right: 0; content: ''; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active { -webkit-transform: translateX(-10px); transform: translateX(-10px); } .hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } /* Bubble Float Bottom */ .hvr-bubble-float-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); bottom: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } /* Bubble Float Left */ .hvr-bubble-float-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:before { position: absolute; z-index: -1; content: ''; top: calc(50% - 10px); left: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active { -webkit-transform: translateX(10px); transform: translateX(10px); } .hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } /* ICONS */ /* Icon Back */ .hvr-icon-back { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-left: 2.2em; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-icon-back:before { content: "\f137"; position: absolute; left: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-back:hover:before, .hvr-icon-back:focus:before, .hvr-icon-back:active:before { -webkit-transform: translateX(-4px); transform: translateX(-4px); } /* Icon Forward */ .hvr-icon-forward { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .hvr-icon-forward:before { content: "\f138"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before { -webkit-transform: translateX(4px); transform: translateX(4px); } /* Icon Down */ @-webkit-keyframes hvr-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } /* Icon Down */ .hvr-icon-down { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-down:before { content: "\f01a"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-down:hover:before, .hvr-icon-down:focus:before, .hvr-icon-down:active:before { -webkit-animation-name: hvr-icon-down; animation-name: hvr-icon-down; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Up */ @-webkit-keyframes hvr-icon-up { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-up { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } /* Icon Up */ .hvr-icon-up { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-up:before { content: "\f01b"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-up:hover:before, .hvr-icon-up:focus:before, .hvr-icon-up:active:before { -webkit-animation-name: hvr-icon-up; animation-name: hvr-icon-up; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Spin */ .hvr-icon-spin { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-spin:before { content: "\f021"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before { -webkit-transform: rotate(360deg); transform: rotate(360deg); } /* Icon Drop */ @-webkit-keyframes hvr-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } @keyframes hvr-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } /* Icon Drop */ .hvr-icon-drop { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-drop:before { content: "\f041"; position: absolute; right: 1em; opacity: 1; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-drop:hover:before, .hvr-icon-drop:focus:before, .hvr-icon-drop:active:before { opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-animation-name: hvr-icon-drop; animation-name: hvr-icon-drop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Icon Fade */ .hvr-icon-fade { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-fade:before { content: "\f00c"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color; transition-property: color; } .hvr-icon-fade:hover:before, .hvr-icon-fade:focus:before, .hvr-icon-fade:active:before { color: #0F9E5E; } /* Icon Float Away */ @-webkit-keyframes hvr-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } @keyframes hvr-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } /* Icon Float Away */ .hvr-icon-float-away { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-float-away:before, .hvr-icon-float-away:after { content: "\f055"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; } .hvr-icon-float-away:after { opacity: 0; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hvr-icon-float-away:hover:after, .hvr-icon-float-away:focus:after, .hvr-icon-float-away:active:after { -webkit-animation-name: hvr-icon-float-away; animation-name: hvr-icon-float-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Sink Away */ @-webkit-keyframes hvr-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } @keyframes hvr-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } /* Icon Sink Away */ .hvr-icon-sink-away { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-sink-away:before, .hvr-icon-sink-away:after { content: "\f056"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-sink-away:after { opacity: 0; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hvr-icon-sink-away:hover:after, .hvr-icon-sink-away:focus:after, .hvr-icon-sink-away:active:after { -webkit-animation-name: hvr-icon-sink-away; animation-name: hvr-icon-sink-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* Icon Grow */ .hvr-icon-grow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-grow:before { content: "\f118"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-grow:hover:before, .hvr-icon-grow:focus:before, .hvr-icon-grow:active:before { -webkit-transform: scale(1.3) translateZ(0); transform: scale(1.3) translateZ(0); } /* Icon Shrink */ .hvr-icon-shrink { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-shrink:before { content: "\f119"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-shrink:hover:before, .hvr-icon-shrink:focus:before, .hvr-icon-shrink:active:before { -webkit-transform: scale(0.8); transform: scale(0.8); } /* Icon Pulse */ @-webkit-keyframes hvr-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes hvr-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } .hvr-icon-pulse { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-pulse:before { content: "\f015"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse:hover:before, .hvr-icon-pulse:focus:before, .hvr-icon-pulse:active:before { -webkit-animation-name: hvr-icon-pulse; animation-name: hvr-icon-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icon Pulse Grow */ @-webkit-keyframes hvr-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes hvr-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } .hvr-icon-pulse-grow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-pulse-grow:before { content: "\f015"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse-grow:hover:before, .hvr-icon-pulse-grow:focus:before, .hvr-icon-pulse-grow:active:before { -webkit-animation-name: hvr-icon-pulse-grow; animation-name: hvr-icon-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Icon Pulse Shrink */ @-webkit-keyframes hvr-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes hvr-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } .hvr-icon-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; } .hvr-icon-pulse-shrink:before { content: "\f015"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pulse-shrink:hover:before, .hvr-icon-pulse-shrink:focus:before, .hvr-icon-pulse-shrink:active:before { -webkit-animation-name: hvr-icon-pulse-shrink; animation-name: hvr-icon-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* Icon Push */ @-webkit-keyframes hvr-icon-push { 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes hvr-icon-push { 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } .hvr-icon-push { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-push:before { content: "\f006"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-push:hover:before, .hvr-icon-push:focus:before, .hvr-icon-push:active:before { -webkit-animation-name: hvr-icon-push; animation-name: hvr-icon-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Pop */ @-webkit-keyframes hvr-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes hvr-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } .hvr-icon-pop { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-pop:before { content: "\f005"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-pop:hover:before, .hvr-icon-pop:focus:before, .hvr-icon-pop:active:before { -webkit-animation-name: hvr-icon-pop; animation-name: hvr-icon-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Bounce */ .hvr-icon-bounce { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-bounce:before { content: "\f087"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-bounce:hover:before, .hvr-icon-bounce:focus:before, .hvr-icon-bounce:active:before { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* Icon Rotate */ .hvr-icon-rotate { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-rotate:before { content: "\f0c6"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-rotate:hover:before, .hvr-icon-rotate:focus:before, .hvr-icon-rotate:active:before { -webkit-transform: rotate(20deg); transform: rotate(20deg); } /* Icon Grow Rotate */ .hvr-icon-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-grow-rotate:before { content: "\f095"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-grow-rotate:hover:before, .hvr-icon-grow-rotate:focus:before, .hvr-icon-grow-rotate:active:before { -webkit-transform: scale(1.5) rotate(12deg); transform: scale(1.5) rotate(12deg); } /* Icon Float */ .hvr-icon-float { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-float:before { content: "\f01b"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-float:hover:before, .hvr-icon-float:focus:before, .hvr-icon-float:active:before { -webkit-transform: translateY(-4px); transform: translateY(-4px); } /* Icon Sink */ .hvr-icon-sink { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-sink:before { content: "\f01a"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-icon-sink:hover:before, .hvr-icon-sink:focus:before, .hvr-icon-sink:active:before { -webkit-transform: translateY(4px); transform: translateY(4px); } /* Icon Bob */ @-webkit-keyframes hvr-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @-webkit-keyframes hvr-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes hvr-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } .hvr-icon-bob { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-bob:before { content: "\f077"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-bob:hover:before, .hvr-icon-bob:focus:before, .hvr-icon-bob:active:before { -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Icon Hang */ @-webkit-keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @-webkit-keyframes hvr-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes hvr-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } .hvr-icon-hang { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-hang:before { content: "\f078"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before { -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang; animation-name: hvr-icon-hang-sink, hvr-icon-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* Icon Wobble Horizontal */ @-webkit-keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes hvr-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hvr-icon-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-wobble-horizontal:before { content: "\f061"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-wobble-horizontal:hover:before, .hvr-icon-wobble-horizontal:focus:before, .hvr-icon-wobble-horizontal:active:before { -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Wobble Vertical */ @-webkit-keyframes hvr-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes hvr-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .hvr-icon-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-wobble-vertical:before { content: "\f062"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-wobble-vertical:hover:before, .hvr-icon-wobble-vertical:focus:before, .hvr-icon-wobble-vertical:active:before { -webkit-animation-name: hvr-icon-wobble-vertical; animation-name: hvr-icon-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* Icon Buzz */ @-webkit-keyframes hvr-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes hvr-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .hvr-icon-buzz { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-buzz:before { content: "\f017"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-buzz:hover:before, .hvr-icon-buzz:focus:before, .hvr-icon-buzz:active:before { -webkit-animation-name: hvr-icon-buzz; animation-name: hvr-icon-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Icon Buzz Out */ @-webkit-keyframes hvr-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .hvr-icon-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-icon-buzz-out:before { content: "\f023"; position: absolute; right: 1em; padding: 0 1px; font-family: FontAwesome; -webkit-transform: translateZ(0); transform: translateZ(0); } .hvr-icon-buzz-out:hover:before, .hvr-icon-buzz-out:focus:before, .hvr-icon-buzz-out:active:before { -webkit-animation-name: hvr-icon-buzz-out; animation-name: hvr-icon-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* CURLS */ /* Curl Top Left */ .hvr-curl-top-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before { width: 25px; height: 25px; } /* Curl Top Right */ .hvr-curl-top-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before { width: 25px; height: 25px; } /* Curl Bottom Right */ .hvr-curl-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before { width: 25px; height: 25px; } /* Curl Bottom Left */ .hvr-curl-bottom-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before { width: 25px; height: 25px; } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-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); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-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); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-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); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; }