@-ms-viewport { width:device-width } *,:after,:before { -webkit-box-sizing: border-box; box-sizing: border-box } * { margin: 0; padding: 0 } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 10px } body { font-family: Microsoft YaHei,PingFang SC,Arial,San Francisco,Hiragino Sans GB,Helvetica Neue,Helvetica,sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.3; color: #111; background-color: #fff } article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section { display: block } address { font-style: normal; line-height: inherit } b,strong { font-weight: bolder } small { font-size: 80% } sub,sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } code,kbd,pre,samp { font-family: monospace; font-size: 1em } summary { display: list-item } fieldset { min-width: 0; border: 0 } legend { display: block; width: 100%; max-width: 100%; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal } progress { vertical-align: baseline } table { border-collapse: collapse } caption { padding-top: .75rem; padding-bottom: .75rem; color: #868e96; text-align: left; caption-side: bottom } dl,ol,ul { list-style: none } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible } a { color: #111; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects } a:not([href]):not([tabindex]):focus { outline: 0 } img { vertical-align: middle; border-style: none; max-width: 100% } svg:not(:root) { overflow: hidden }[role=button],a,area,button,input,label,select,summary,textarea { -ms-touch-action: manipulation; touch-action: manipulation } button,input,optgroup,select,textarea { font-family: inherit; font-size: inherit; line-height: inherit; outline: 0 } button,input { overflow: hidden; border: 1px solid #dcdcdc; background: none } button,select { text-transform: none }[type=reset],[type=submit],button,html [type=button] { -webkit-appearance: button; cursor: pointer }[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner { padding: 0; border-style: none } input[type=checkbox],input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 } input[type=date],input[type=datetime-local],input[type=month],input[type=time] { -webkit-appearance: listbox } textarea { overflow: auto; resize: vertical }[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { height: auto }[type=search] { outline-offset: -2px; -webkit-appearance: none }[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button } output { display: inline-block }[hidden],template { display: none!important } hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee } h1,h2,h3,h4,h5,h6 { font-family: inherit; font-weight: 700; line-height: 1.1; color: inherit } .h1,h1 { font-size: 2.8rem } .h2,h2 { font-size: 2.6rem } .h3,h3 { font-size: 2.4rem } .h4,h4 { font-size: 2.2rem } .h5,h5 { font-size: 2rem } .h6,h6 { font-size: 1.8rem } .h6-plus { font-size: 3rem } .h5-plus { font-size: 3.2rem } .h4-plus { font-size: 3.4rem } .h3-plus { font-size: 3.6rem } .h2-plus { font-size: 3.8rem } .h1-plus { font-size: 4rem } .lh-content { line-height: 1.5 } .center-block { display: block; margin-left: auto; margin-right: auto } .pull-right { float: right!important } .pull-left { float: left!important } .hide { display: none!important } .show { display: block!important } .invisible { visibility: hidden } .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0 } .hidden { display: none!important } .affix { position: fixed } .clearfix:after,.clearfix:before { content: " "; display: table } .clear,.clearfix:after { clear: both } .o-hidden { overflow: hidden } .text-center { text-align: center } .text-right { text-align: right } .text-left { text-align: left } .to-lowercase { text-transform: lowercase } .to-uppercase { text-transform: uppercase } .to-capitalize { text-transform: capitalize } .white-space { white-space: nowrap } .keep-all { word-break: keep-all } .break-all { word-break: break-all } .break-word { word-wrap: break-word } ::selection { background: #73a3d4; color: #fff } ::-moz-selection { background: #73a3d4; color: #fff } ::-webkit-selection { background: #73a3d4; color: #fff } .container { max-width: 1160px } .w-840 { max-width: 840px } .w-900 { max-width: 900px } .w-1000 { max-width: 1000px } .w-1040 { max-width: 1040px } .w-1100 { max-width: 1100px } .w-1140 { max-width: 1140px } .w-1170 { max-width: 1170px } .w-1200 { max-width: 1200px } .w-1240 { max-width: 1240px } .w-1440 { max-width: 1440px } .w-1600 { max-width: 1600px } .p-lr-50 { padding-left: 50px; padding-right: 50px } .p-lr-60 { padding-left: 60px; padding-right: 60px } .p-lr-75 { padding-left: 75px; padding-right: 75px } .p-tb-20 { padding-top: 20px; padding-bottom: 20px } .p-tb-30 { padding-top: 30px; padding-bottom: 30px } .p-tb-40 { padding-top: 40px; padding-bottom: 40px } .p-tb-50 { padding-top: 50px; padding-bottom: 50px } .p-tb-60,.p-tb-70 { padding-top: 70px; padding-bottom: 70px } .p-tb-80,.p-tb-90 { padding-top: 85px; padding-bottom: 85px } .p-tb-100 { padding-top: 100px; padding-bottom: 100px } .p-t-0 { padding-top: 0 } .p-b-0 { padding-bottom: 0 } .m-b-30 { margin-bottom: 30px } .m-b-40 { margin-bottom: 40px } .m-b-50 { margin-bottom: 50px } .m-b-60 { margin-bottom: 60px } .m-b-70 { margin-bottom: 70px } .m-b-80 { margin-bottom: 80px } .m-b-90 { margin-bottom: 90px } .m-b-100 { margin-bottom: 100px } .m-b-110 { margin-bottom: 110px } .m-b-120,.m-b-200 { margin-bottom: 120px } .m-lr-auto { margin-left: auto; margin-right: auto } .bg-center { background: 50% no-repeat; background-size: cover; -webkit-background-size: cover } .img-auto { max-width: auto } .is-table { display: table; height: 100%; width: 100% } .is-table .table-cell { display: table-cell; vertical-align: middle } .flex-center { display: -webkit-box; display: flex; display: -ms-flexbox; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -ms-flex-pack: center } .err-input { color: red!important } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out } .edit-container { line-height: 30px } .edit-container ul { list-style: disc } .edit-container ol { list-style: decimal } .edit-container * { max-width: 100%!important; white-space: normal!important } .hamburger { display: inline-block; cursor: pointer; transition-property: opacity,-webkit-filter; -webkit-transition-property: opacity,-webkit-filter; transition-property: opacity,filter; transition-property: opacity,filter,-webkit-filter; -webkit-transition-duration: .15s; transition-duration: .15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; display: none; float: right; line-height: 0; position: absolute; z-index: 10; top: 50%; right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .hamburger-box { width: 22px; height: 12px; display: inline-block; position: relative } .hamburger-inner { display: block; top: 50%; margin-top: -2px } .hamburger-inner,.hamburger-inner:after,.hamburger-inner:before { width: 22px; height: 2px; background-color: #111; border-radius: 4px; position: absolute; transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; transition-property: transform,-webkit-transform; -webkit-transition-duration: .15s; transition-duration: .15s; -webkit-transition-timing-function: ease; transition-timing-function: ease } .hamburger-inner:after,.hamburger-inner:before { content: ""; display: block } .hamburger-inner:before { top: -10px } .hamburger-inner:after { bottom: -10px } .hamburger--elastic .hamburger-inner { top: 0; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: cubic-bezier(.68,-.55,.265,1.55); transition-timing-function: cubic-bezier(.68,-.55,.265,1.55) } .hamburger--elastic .hamburger-inner:before { top: 6px; -webkit-transition: opacity .15s ease .4s; transition: opacity .15s ease .4s } .hamburger--elastic .hamburger-inner:after { top: 12px; transition: -webkit-transform .4s cubic-bezier(.68,-.55,.265,1.55); -webkit-transition: -webkit-transform .4s cubic-bezier(.68,-.55,.265,1.55); transition: transform .4s cubic-bezier(.68,-.55,.265,1.55); transition: transform .4s cubic-bezier(.68,-.55,.265,1.55),-webkit-transform .4s cubic-bezier(.68,-.55,.265,1.55) } .hamburger--elastic.is-active .hamburger-inner { -webkit-transform: translate3d(0,10px,0) rotate(135deg); transform: translate3d(0,10px,0) rotate(135deg); -webkit-transition-delay: .1s; transition-delay: .1s; top: -3px } .hamburger--elastic.is-active .hamburger-inner:before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0 } .hamburger--elastic.is-active .hamburger-inner:after { -webkit-transform: translate3d(0,-19px,0) rotate(-268deg); transform: translate3d(0,-19px,0) rotate(-268deg); -webkit-transition-delay: .1s; transition-delay: .1s; top: 19px } @media screen and (max-width:991px) { .hamburger { display: block } } .container { width: 100%; max-width: 1240px } .container,.container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .row { margin-left: -15px; margin-right: -15px } .container-fluid:after,.container-fluid:before,.container:after,.container:before,.row:after,.row:before { content: " "; display: table } .clearfix:after,.container-fluid:after,.container:after,.row:after { clear: both } .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px } .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 { float: left } .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } .col-xs-pull-12 { right: 100% } .col-xs-pull-11 { right: 91.66666667% } .col-xs-pull-10 { right: 83.33333333% } .col-xs-pull-9 { right: 75% } .col-xs-pull-8 { right: 66.66666667% } .col-xs-pull-7 { right: 58.33333333% } .col-xs-pull-6 { right: 50% } .col-xs-pull-5 { right: 41.66666667% } .col-xs-pull-4 { right: 33.33333333% } .col-xs-pull-3 { right: 25% } .col-xs-pull-2 { right: 16.66666667% } .col-xs-pull-1 { right: 8.33333333% } .col-xs-pull-0 { right: auto } .col-xs-push-12 { left: 100% } .col-xs-push-11 { left: 91.66666667% } .col-xs-push-10 { left: 83.33333333% } .col-xs-push-9 { left: 75% } .col-xs-push-8 { left: 66.66666667% } .col-xs-push-7 { left: 58.33333333% } .col-xs-push-6 { left: 50% } .col-xs-push-5 { left: 41.66666667% } .col-xs-push-4 { left: 33.33333333% } .col-xs-push-3 { left: 25% } .col-xs-push-2 { left: 16.66666667% } .col-xs-push-1 { left: 8.33333333% } .col-xs-push-0 { left: auto } .col-xs-offset-12 { margin-left: 100% } .col-xs-offset-11 { margin-left: 91.66666667% } .col-xs-offset-10 { margin-left: 83.33333333% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-8 { margin-left: 66.66666667% } .col-xs-offset-7 { margin-left: 58.33333333% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-5 { margin-left: 41.66666667% } .col-xs-offset-4 { margin-left: 33.33333333% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-2 { margin-left: 16.66666667% } .col-xs-offset-1 { margin-left: 8.33333333% } .col-xs-offset-0 { margin-left: 0 } @media (min-width:768px) { .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 { float: left } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .col-sm-pull-12 { right: 100% } .col-sm-pull-11 { right: 91.66666667% } .col-sm-pull-10 { right: 83.33333333% } .col-sm-pull-9 { right: 75% } .col-sm-pull-8 { right: 66.66666667% } .col-sm-pull-7 { right: 58.33333333% } .col-sm-pull-6 { right: 50% } .col-sm-pull-5 { right: 41.66666667% } .col-sm-pull-4 { right: 33.33333333% } .col-sm-pull-3 { right: 25% } .col-sm-pull-2 { right: 16.66666667% } .col-sm-pull-1 { right: 8.33333333% } .col-sm-pull-0 { right: auto } .col-sm-push-12 { left: 100% } .col-sm-push-11 { left: 91.66666667% } .col-sm-push-10 { left: 83.33333333% } .col-sm-push-9 { left: 75% } .col-sm-push-8 { left: 66.66666667% } .col-sm-push-7 { left: 58.33333333% } .col-sm-push-6 { left: 50% } .col-sm-push-5 { left: 41.66666667% } .col-sm-push-4 { left: 33.33333333% } .col-sm-push-3 { left: 25% } .col-sm-push-2 { left: 16.66666667% } .col-sm-push-1 { left: 8.33333333% } .col-sm-push-0 { left: auto } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666667% } .col-sm-offset-10 { margin-left: 83.33333333% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666667% } .col-sm-offset-7 { margin-left: 58.33333333% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666667% } .col-sm-offset-4 { margin-left: 33.33333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.66666667% } .col-sm-offset-1 { margin-left: 8.33333333% } .col-sm-offset-0 { margin-left: 0 } } @media (min-width:992px) { .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: left } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666667% } .col-md-10 { width: 83.33333333% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666667% } .col-md-7 { width: 58.33333333% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666667% } .col-md-4 { width: 33.33333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.66666667% } .col-md-1 { width: 8.33333333% } .col-md-pull-12 { right: 100% } .col-md-pull-11 { right: 91.66666667% } .col-md-pull-10 { right: 83.33333333% } .col-md-pull-9 { right: 75% } .col-md-pull-8 { right: 66.66666667% } .col-md-pull-7 { right: 58.33333333% } .col-md-pull-6 { right: 50% } .col-md-pull-5 { right: 41.66666667% } .col-md-pull-4 { right: 33.33333333% } .col-md-pull-3 { right: 25% } .col-md-pull-2 { right: 16.66666667% } .col-md-pull-1 { right: 8.33333333% } .col-md-pull-0 { right: auto } .col-md-push-12 { left: 100% } .col-md-push-11 { left: 91.66666667% } .col-md-push-10 { left: 83.33333333% } .col-md-push-9 { left: 75% } .col-md-push-8 { left: 66.66666667% } .col-md-push-7 { left: 58.33333333% } .col-md-push-6 { left: 50% } .col-md-push-5 { left: 41.66666667% } .col-md-push-4 { left: 33.33333333% } .col-md-push-3 { left: 25% } .col-md-push-2 { left: 16.66666667% } .col-md-push-1 { left: 8.33333333% } .col-md-push-0 { left: auto } .col-md-offset-12 { margin-left: 100% } .col-md-offset-11 { margin-left: 91.66666667% } .col-md-offset-10 { margin-left: 83.33333333% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-8 { margin-left: 66.66666667% } .col-md-offset-7 { margin-left: 58.33333333% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-5 { margin-left: 41.66666667% } .col-md-offset-4 { margin-left: 33.33333333% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-2 { margin-left: 16.66666667% } .col-md-offset-1 { margin-left: 8.33333333% } .col-md-offset-0 { margin-left: 0 } } @media (min-width:1200px) { .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 { float: left } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666667% } .col-lg-10 { width: 83.33333333% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666667% } .col-lg-7 { width: 58.33333333% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666667% } .col-lg-4 { width: 33.33333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.66666667% } .col-lg-1 { width: 8.33333333% } .col-lg-pull-12 { right: 100% } .col-lg-pull-11 { right: 91.66666667% } .col-lg-pull-10 { right: 83.33333333% } .col-lg-pull-9 { right: 75% } .col-lg-pull-8 { right: 66.66666667% } .col-lg-pull-7 { right: 58.33333333% } .col-lg-pull-6 { right: 50% } .col-lg-pull-5 { right: 41.66666667% } .col-lg-pull-4 { right: 33.33333333% } .col-lg-pull-3 { right: 25% } .col-lg-pull-2 { right: 16.66666667% } .col-lg-pull-1 { right: 8.33333333% } .col-lg-pull-0 { right: auto } .col-lg-push-12 { left: 100% } .col-lg-push-11 { left: 91.66666667% } .col-lg-push-10 { left: 83.33333333% } .col-lg-push-9 { left: 75% } .col-lg-push-8 { left: 66.66666667% } .col-lg-push-7 { left: 58.33333333% } .col-lg-push-6 { left: 50% } .col-lg-push-5 { left: 41.66666667% } .col-lg-push-4 { left: 33.33333333% } .col-lg-push-3 { left: 25% } .col-lg-push-2 { left: 16.66666667% } .col-lg-push-1 { left: 8.33333333% } .col-lg-push-0 { left: auto } .col-lg-offset-12 { margin-left: 100% } .col-lg-offset-11 { margin-left: 91.66666667% } .col-lg-offset-10 { margin-left: 83.33333333% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-8 { margin-left: 66.66666667% } .col-lg-offset-7 { margin-left: 58.33333333% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-5 { margin-left: 41.66666667% } .col-lg-offset-4 { margin-left: 33.33333333% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-2 { margin-left: 16.66666667% } .col-lg-offset-1 { margin-left: 8.33333333% } .col-lg-offset-0 { margin-left: 0 } } .visible-lg,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block { display: none!important } @media (max-width:767px) { .visible-xs { display: block!important } table.visible-xs { display: table!important } tr.visible-xs { display: table-row!important } td.visible-xs,th.visible-xs { display: table-cell!important } } @media (max-width:767px) { .visible-xs-block { display: block!important } } @media (max-width:767px) { .visible-xs-inline { display: inline!important } } @media (max-width:767px) { .visible-xs-inline-block { display: inline-block!important } } @media (min-width:768px) and (max-width:991px) { .visible-sm { display: block!important } table.visible-sm { display: table!important } tr.visible-sm { display: table-row!important } td.visible-sm,th.visible-sm { display: table-cell!important } } @media (min-width:768px) and (max-width:991px) { .visible-sm-block { display: block!important } } @media (min-width:768px) and (max-width:991px) { .visible-sm-inline { display: inline!important } } @media (min-width:768px) and (max-width:991px) { .visible-sm-inline-block { display: inline-block!important } } @media (min-width:992px) and (max-width:1199px) { .visible-md { display: block!important } table.visible-md { display: table!important } tr.visible-md { display: table-row!important } td.visible-md,th.visible-md { display: table-cell!important } } @media (min-width:992px) and (max-width:1199px) { .visible-md-block { display: block!important } } @media (min-width:992px) and (max-width:1199px) { .visible-md-inline { display: inline!important } } @media (min-width:992px) and (max-width:1199px) { .visible-md-inline-block { display: inline-block!important } } @media (min-width:1200px) { .visible-lg { display: block!important } table.visible-lg { display: table!important } tr.visible-lg { display: table-row!important } td.visible-lg,th.visible-lg { display: table-cell!important } } @media (min-width:1200px) { .visible-lg-block { display: block!important } } @media (min-width:1200px) { .visible-lg-inline { display: inline!important } } @media (min-width:1200px) { .visible-lg-inline-block { display: inline-block!important } } @media (max-width:767px) { .hidden-xs { display: none!important } } @media (min-width:768px) and (max-width:991px) { .hidden-sm { display: none!important } } @media (min-width:992px) and (max-width:1199px) { .hidden-md { display: none!important } } @media (min-width:1200px) { .hidden-lg { display: none!important } } .visible-print { display: none!important } @media print { .visible-print { display: block!important } table.visible-print { display: table!important } tr.visible-print { display: table-row!important } td.visible-print,th.visible-print { display: table-cell!important } } .visible-print-block { display: none!important } @media print { .visible-print-block { display: block!important } } .visible-print-inline { display: none!important } @media print { .visible-print-inline { display: inline!important } } .visible-print-inline-block { display: none!important } @media print { .visible-print-inline-block { display: inline-block!important } } @media print { .hidden-print { display: none!important } } .container { max-width: 1510px; } #swipebox-close { background-image: url(../image/close.svg)!important; background-size: 20px 20px!important } #anchor { position: relative; visibility: hidden; top: -165px } .common-title { color: red } .common-title .title-cn { font-size: 28px } .common-title .title-en { font-size: 18px; font-weight: 700 } .common-title.column-title .title-cn { margin-bottom: 10px } .btn-default { width: 230px; height: 56px; line-height: 52px; border: 2px solid red; color: red; overflow: hidden; position: relative } .btn-default:hover { color: #fff } .btn-default:hover:before { width: 100% } .btn-default:before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 100%; background: red; -webkit-transform: skew(30deg) translateX(-50%); transform: skew(30deg) translateX(-50%); -webkit-transition: width .2s linear; transition: width .2s linear } .bg-pic,.btn-default span { position: relative; z-index: 10 } .bg-pic { border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; overflow: hidden } .bg-pic:before { content: url(../image/bg-topLeft.png); position: absolute; top: -70px; left: -20px; z-index: -1 } .bg-pic:after { content: url(../image/bg-bottomRight.png); position: absolute; bottom: 0; right: -90px; z-index: -1 } .type-list-rightTop { text-align: right; font-size: 0; margin-top: -20px } .type-list-rightTop li { display: inline-block; font-size: 16px } .type-list-rightTop li:not(:last-child):after { content: "/"; margin: 0 20px; color: #dedede } .type-list-rightTop li a { color: #999; -webkit-transition: all .2s linear; transition: all .2s linear } .type-list-rightTop li a.active,.type-list-rightTop li a:hover { color: #111 } #commonTop { overflow: hidden } #commonTop .top-main { height: 560px; background: grey; color: #fff; line-height: 30px } #commonTop .top-main>div { height: 100%; position: relative } #commonTop .top-main .top-box { position: absolute; bottom: 100px; left: 0; right: 0 } #commonTop .top-main .title { font-size: 36px; margin-bottom: 20px } #commonTop .top-main .des { font-size: 16px } #commonTop .top-nav { margin-right: -1px } #commonTop .top-nav,#commonTop .top-nav li { display: -webkit-box; display: -ms-flexbox; display: flex } #commonTop .top-nav li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 69px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } #commonTop .top-nav a { display: block; text-align: center; font-size: 16px; color: #b8a892; border: 1px solid #d1d3d4; margin-left: -1px; position: relative; z-index: 0; -webkit-transition: all .2s linear; transition: all .2s linear } #commonTop .top-nav a.active,#commonTop .top-nav a:hover { background: #b8a892; color: #fff; border-color: #b8a892; z-index: 1 } .page_list a { display: inline-block; margin-bottom: 10px; vertical-align: middle; -webkit-transition: all .2s linear; transition: all .2s linear } .page_list .page-normal { width: 56px; height: 56px; line-height: 56px; border-radius: 50%; color: #b8a892; vertical-align: middle } .page_list .page-normal.on,.page_list .page-normal:hover { background: #b8a892; color: #fff } .page_list .page-first { width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #b8a892; border-bottom: 10px solid transparent; margin-right: 50px } .page_list .page-first:hover { border-right-color: red } .page_list .page-last { width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid #b8a892; border-bottom: 10px solid transparent; margin-left: 50px } .page_list .page-last:hover { border-left-color: red } .news-right .news-rtitle { color: #999; font-size: 15px; margin-bottom: 35px } .news-right .type-list { padding-bottom: 20px; border-bottom: 1px solid #eaeaea } .news-right .type-list>li:not(:last-child) { margin-bottom: 5px } .news-right .type-list a { display: block; line-height: 44px; padding: 0 18px; -webkit-transition: all .2s linear; transition: all .2s linear } .news-right .type-list a.active,.news-right .type-list a:hover { background: #b8a892; color: #fff } .news-right .hot-list li { padding-left: 15px; padding-bottom: 30px; border-bottom: 1px solid #eaeaea; position: relative; line-height: 1.5; color: #333 } .news-right .hot-list li:not(:last-child) { margin-bottom: 30px } .news-right .hot-list li:before { content: ">"; position: absolute; top: -2px; left: 0 } .news-right .hot-list li a { color: #333; -webkit-transition: all .2s linear; transition: all .2s linear } .news-right .hot-list li a:hover { color: #b8a892 } .news-right .keywords-list { margin-bottom: 20px } .news-right .keywords-list a { padding: 0 18px; height: 32px; line-height: 30px; border: 1px solid #eaeaea; color: #999; margin-bottom: 3px; -webkit-transition: all .2s linear; transition: all .2s linear } .news-right .keywords-list a:hover { color: #fff; background: #b8a892; border-color: #b8a892 } .news-right .search-form { position: relative } .news-right .search-form input { display: block; width: 100%; height: 40px; border: 1px solid #eaeaea; padding: 0 58px 0 18px } .news-right .search-form button { position: absolute; top: 0; right: 0; height: 100%; width: 40px; background: #b8a892; border: none } .news-right .search-form button:hover { background: red } .mCSB_inside>.mCSB_container { margin-right: 0!important } .mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools { visibility: hidden } .service-main { color: #fff; font-size: 16px } .service-main a { color: #fff; -webkit-transition: all .2s linear; transition: all .2s linear } .service-main .bg-box { padding-top: 120px; padding-bottom: 250px; -webkit-transition: all .1s linear; transition: all .1s linear } .service-main .bg-box.active,.service-main .bg-box:hover { padding-bottom: 30px } .service-main .bg-box.active .slide-box,.service-main .bg-box:hover .slide-box { margin-bottom: 0; -webkit-transform: translateY(0); transform: translateY(0) } .service-main .bg-box.active .slide-more,.service-main .bg-box:hover .slide-more { display: none } .service-main .bg-box:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2) } .service-main .slide-main { position: relative; z-index: 5; height: 100%; overflow: hidden } .service-main .slide-main .slide-box { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 30px 50px 0; overflow: hidden; margin-bottom: 140px; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all .3s linear; transition: all .3s linear } .service-main .slide-more { margin-bottom: 30px } .service-main .slide-title { font-size: 42px; font-weight: 700; margin-bottom: 30px } .service-main .slide-des { line-height: 30px } .service-main .slide-list a { -webkit-transition: all .2s linear; transition: all .2s linear } .service-main .slide-list a:before { content: "> "; position: relative; top: -2px } .service-main .slide-list a:hover { opacity: .6 } .service-main .slide-list dt:not(:last-child) { margin-bottom: 20px } .service-main .swiper-btn { position: absolute; z-index: 10; bottom: 90px; width: 82px; height: 82px; text-align: center; line-height: 82px; border-radius: 50%; background: rgba(0,0,0,.46) } .service-main .swiper-btn:hover { background: #000 } .service-main .swiper-btn.btn-prev { left: 40px } .service-main .swiper-btn.btn-next { right: 40px } .service-main .swiper-btn.btn-return { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .service-main .swiper-btn img { width: 20px } .server-list a { -webkit-transition: all .2s linear; transition: all .2s linear } .server-list a svg { width: 12px } .server-list a path { -webkit-transition: fill .3s linear; transition: fill .3s linear } .server-list a:hover .title { color: red } .server-list a:hover path { fill: red } .server-list a:hover .pic img { -webkit-transform: scale(1.1); transform: scale(1.1) } .server-list .pic { overflow: hidden } .server-list .pic img { width: 100%; -webkit-transition: all .3s linear; transition: all .3s linear } .server-list .title { font-size: 16px; overflow: hidden; margin-bottom: 15px; -webkit-transition: color .3s linear; transition: color .3s linear } .server-list .title span { float: right } .server-list .desc { line-height: 26px; color: #666; max-width: 360px } .server-list .box { padding: 24px 0 } .bread-crumb { text-align: right; margin-bottom: 20px } .bread-crumb a { color: #999; -webkit-transition: all .2s linear; transition: all .2s linear } .bread-crumb a.active,.bread-crumb a:hover { color: #b8a892 } .bread-crumb li { display: inline-block } .bread-crumb li:not(:first-child):before { content: "> "; position: relative; top: -1px; margin: 0 5px; color: #999 } .social-share .icon-wechat { position: relative } .social-share .icon-wechat .wechat-qrcode { display: none; border: 1px solid #eee; position: absolute; z-index: 99999; bottom: 100%; left: 50%; margin-left: -100px; margin-bottom: 20px; width: 200px; height: 192px; color: #666; font-size: 12px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 2px 10px #aaa; box-shadow: 0 2px 10px #aaa; -webkit-transition: all .2s; transition: all .2s; -webkit-tansition: all .35s; -moz-transition: all .35s } .social-share .icon-wechat .wechat-qrcode.bottom { top: 40px; left: -84px } .social-share .icon-wechat .wechat-qrcode.bottom:after { display: none } .social-share .icon-wechat .wechat-qrcode h4 { font-weight: 400; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777 } .social-share .icon-wechat .wechat-qrcode .qrcode { width: 105px; margin: 10px auto } .social-share .icon-wechat .wechat-qrcode .qrcode table { margin: 0!important } .social-share .icon-wechat .wechat-qrcode .help p { font-weight: 400; line-height: 16px; padding: 0; margin: 0 } .social-share .icon-wechat .wechat-qrcode:after { content: ""; position: absolute; left: 50%; margin-left: -6px; bottom: -13px; width: 0; height: 0; border: 6px solid transparent; border-top: 8px solid #fff } .social-share .icon-wechat:hover .wechat-qrcode { display: block } .investors-right .search-form { position: relative } .investors-right .search-form input { display: block; width: 100%; height: 40px; border: 1px solid #eaeaea; padding: 0 58px 0 18px } .investors-right .search-form button { position: absolute; top: 0; right: 0; height: 100%; width: 40px; background: #b8a892; border: none } .investors-right .search-form button:hover { background: red } .investors-rlist .investors-rtitle { font-size: 15px; color: #999; margin-bottom: 25px } .investors-rlist .date-list { margin-left: -3px; margin-right: -3px; padding-bottom: 40px; border-bottom: 1px solid #eaeaea } .investors-rlist .date-list>li { padding: 3px } .investors-rlist .date-list a { display: block; border: 1px solid #eaeaea; height: 44px; line-height: 42px; text-align: center; font-size: 16px; color: #999; -webkit-transition: all .2s linear; transition: all .2s linear } .investors-rlist .date-list a.active,.investors-rlist .date-list a:hover { background: #b8a892; color: #fff; border-color: #b8a892 } .investors-rlist .hot-list>li { border-bottom: 1px solid #eaeaea; padding: 0 12px 30px } .investors-rlist .hot-list>li:not(:last-child) { margin-bottom: 30px } .investors-rlist .hot-list a { color: #333; -webkit-transition: all .2s linear; transition: all .2s linear } .investors-rlist .hot-list a:hover { color: #b8a892 } .investors-rlist .keywords-list { margin-bottom: 20px } .investors-rlist .keywords-list a { padding: 0 18px; height: 32px; line-height: 30px; border: 1px solid #eaeaea; color: #999; margin-bottom: 3px; -webkit-transition: all .2s linear; transition: all .2s linear } .investors-rlist .keywords-list a:hover { color: #fff; background: #b8a892; border-color: #b8a892 } @media screen and (max-width:1400px) { #commonTop .top-main { height: 460px } } @media screen and (max-width:991px) { .type-list-rightTop { margin-top: 30px; text-align: left } .type-list-rightTop li { margin-bottom: 5px } .type-list-rightTop li:not(:last-child):after { margin: 0 5px } #commonTop .top-main { height: 360px; line-height: 1.3 } #commonTop .top-main .top-box { left: 15px; right: 15px } #commonTop .top-main .title { font-size: 20px } #commonTop .top-nav { overflow-x: auto } #commonTop .top-nav li { min-width: 110px } .p-tb-60,.p-tb-70,.p-tb-80,.p-tb-90,.p-tb-100 { padding-top: 40px; padding-bottom: 40px } .m-b-40,.m-b-50,.m-b-60,.m-b-70,.m-b-80 { margin-bottom: 30px } .m-b-90,.m-b-100 { margin-bottom: 40px } .page_list .page-normal { width: 40px; height: 40px; line-height: 40px } .service-main .bg-box { padding-top: 15px; padding-bottom: 100px } .service-main .bg-box .slide-box { padding: 15px 15px 0; margin-bottom: 0; -webkit-transform: translateY(0); transform: translateY(0) } .service-main .bg-box .slide-more { display: none } .service-main .bg-box .slide-title { font-size: 20px } .service-main .swiper-btn { bottom: 15px; width: 60px; height: 60px; line-height: 60px } .service-main .swiper-btn.btn-prev { left: 15px } .service-main .swiper-btn.btn-next { right: 15px } } #header { line-height: 20px; -webkit-transition: all .1s linear; transition: all .1s linear; position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #fff; } #header.header-fixed .header-main { -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); background-image:url(../image/background.jpg); line-height: 80px; -webkit-transition: all .1s linear; transition: all .1s linear; position: fixed; top: 0; left: 0; right: 0; z-index: 999 } #header .header-main { -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); background: #fff0; line-height: 100px; transition: all .1s linear; position: fixed; top: 0; left: 0; right: 0; z-index: 999 } #header .header-main .container { position: relative; z-index: 50 } #header .header-main .header-logo img { -webkit-transition: all .2s linear; transition: all .2s linear } #header .header-main .header-nav dt { float: left; font-size: 0 } #header .header-main .header-nav dt:not(:last-child) { margin-right: 60px } #header .header-main .header-nav dt:before { content: ""; display: inline-block; vertical-align: middle; height: 100% } #header .header-main .header-nav dt:hover .nav-hide { visibility: visible; opacity: 1 } #header .header-main .header-nav dt>.btn-more { position: absolute; top: 0; right: 0; width: 50px; text-align: right; padding-right: 10px; display: none } #header .header-main .header-nav dt>a { display: inline-block; vertical-align: middle; padding: 0 6px; position: relative } #header .header-main .header-nav dt>a.active .name-cn,#header .header-main .header-nav dt>a.active .name-en,#header .header-main .header-nav dt>a:hover .name-cn,#header .header-main .header-nav dt>a:hover .name-en { color: #b8a892 } #header .header-main .header-nav dt>a.active:after,#header .header-main .header-nav dt>a:hover:after { width: 100% } #header .header-main .header-nav dt>a:after { content: ""; display: block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 6px; background: #b8a892; -webkit-transition: all .2s linear; transition: all .2s linear } #header .header-main .header-nav dt .name-cn { font-size: 16px; color:#000000; -webkit-transition: color .2s linear; transition: color .2s linear } #header .header-main .header-nav dt .name-en { font-size: 12px; color: #999; font-weight: 700; -webkit-transition: color .2s linear; transition: color .2s linear } #header .header-main .header-nav .nav-hide { position: absolute; top: 100%; left: 65px; right: 65px; background: rgba(184,168,146,.78); text-align: center; padding-left: 290px; opacity: 0; visibility: hidden; -webkit-transition: all .2s linear; transition: all .2s linear; color: #fff; line-height: 50px } #header .header-main .header-nav .nav-hide a { color: #fff } #header .header-main .header-nav .nav-hide .hide-title { position: absolute; top: 0; left: 0; width: 290px; height: 100%; background: #b8a892; font-size: 36px; padding-top: 65px } #header .header-main .header-nav .nav-hide .nav-list { width: 290px; padding: 65px 0; position: relative; font-size: 16px } #header .header-main .header-nav .nav-hide .nav-list:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 65px; background: rgba(184,168,146,.8) } #header .header-main .header-nav .nav-hide .nav-list:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 65px; background: rgba(184,168,146,.8) } #header .header-main .header-nav .nav-hide .nav-list>li>a { width: 100%; display: block; text-align: left; background: rgba(184,168,146,.8); padding: 0 50px } #header .header-main .header-nav .nav-hide .nav-list>li.active>a { background: rgba(184,168,146,0) } #header .header-main .header-nav .nav-hide .nav-list>li.active .hide-children { display: block } #header .header-main .header-nav .nav-hide .nav-list>li>.btn-more { position: absolute; top: 0; right: 0; width: 70px; display: none } #header .header-main .header-nav .nav-hide .nav-list .hide-children { position: absolute; left: 100%; top: 0; padding: 65px 0; max-width: 250px; max-height: 100%; overflow-y: auto; display: none; white-space: nowrap } #header .header-main .header-nav .nav-hide .nav-list .hide-children::-webkit-scrollbar-track { background-color: transparent } #header .header-main .header-nav .nav-hide .nav-list .hide-children::-webkit-scrollbar { width: 0; background-color: transparent } #header .header-main .header-nav .nav-hide .nav-list .hide-children::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 4px } #header .header-main .header-nav .nav-hide .nav-list .hide-children p { padding-left: 50px; text-align: left } #header .header-main .header-nav .nav-hide .nav-list .hide-children a:hover { opacity: .6 } #header .header-main .header-nav .nav-hide .pic { margin-bottom: 10px; overflow: hidden } #header .header-main .header-nav .nav-hide .pic img { -webkit-transition: all .2s linear; transition: all .2s linear } #header .header-main .mobile-bottom { display: none; color: #333; font-size: 14px!important; padding-top: 20px; line-height: 30px } #header .header-main .mobile-bottom:before { content: none!important } #header .header-main .mobile-bottom input { width: 100%; padding: 0 15px; height: 40px; border: 1px solid #ebebeb; margin-bottom: 10px } #header .header-main .header-btn { margin-left: 60px; font-size: 16px } #header .header-main .header-btn a:hover { color: #b8a892 } #header .header-main .header-btn .header-search { display: inline-block; position: relative; z-index: 20; margin-left: 60px } #header .header-main .header-btn .header-search:hover form { opacity: 1; visibility: visible } #header .header-main .header-btn .header-search form { position: absolute; top: 50%; right: 100%; line-height: 1; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-right: 15px; font-size: 0; opacity: 0; visibility: hidden } #header .header-main .header-btn .header-search form input { width: 205px; height: 40px; border: 0; padding: 0 15px; font-size: 12px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2) } #header .header-code { position: absolute; bottom: 0; right: 50px; z-index: 99; line-height: 1 } #header .header-code>div { display: inline-block; vertical-align: middle } #header .header-code .shares-code { line-height: 40px; margin-right: 12px; position: relative } #header .header-code .qrcode .icon { cursor: pointer } #header .header-code .qrcode:hover .qrcode-pic { -webkit-transform: scale(1); transform: scale(1); visibility: visible } #header .header-code .qrcode-pic { position: absolute; top: 100%; right: 0; width: 125px; height: 125px; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all .2s linear; transition: all .2s linear; visibility: hidden } @media screen and (max-width:1400px) { #header .header-main .header-logo { width: 200px } #header .header-main .header-nav dt:not(:last-child) { margin-right: 40px } #header .header-main .header-btn,#header .header-main .header-btn .header-search { margin-left: 40px } #header .header-code { right: 60px } } @media screen and (max-width:1200px) { .container { padding-left: 15px; padding-right: 15px } #header .header-main .header-nav dt:not(:last-child) { margin-right: 20px } #header .header-main .header-btn,#header .header-main .header-btn .header-search { margin-left: 20px } #header .header-code { right: 15px } } @media screen and (max-width:991px) { #header { height: 55px; background:#fff0; } #header .header-main { line-height: 55px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2); background:#fff0; } #header .header-main .mobile-bottom { display: block } #header .header-main .header-logo { width: 150px } #header .header-main .header-btn { margin-right: 50px } #header .header-main .header-btn .header-search { display: none } #header .header-main .header-nav { display: none; position: absolute; top: 70px; left: 0; width: 100%; max-height: calc(100vh - 70px); background: #fff; padding: 0 15px 15px; line-height: 50px; overflow-y: auto; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2) } #header .header-main .header-nav dl { float: none!important } #header .header-main .header-nav dt { float: none; margin-right: 0!important; border-bottom: 1px solid #ebebeb; position: relative } #header .header-main .header-nav dt>a { padding: 0 } #header .header-main .header-nav dt>a:after { content: none } #header .header-main .header-nav dt>.btn-more { display: block } #header .header-main .header-nav .nav-hide { display: none; opacity: 1; visibility: visible; position: static; padding-left: 0; background: none; -webkit-transition: none; transition: none } #header .header-main .header-nav .nav-hide .hide-title { display: none } #header .header-main .header-nav .nav-hide .nav-list { width: 100%; padding: 0; background: none } #header .header-main .header-nav .nav-hide .nav-list:after,#header .header-main .header-nav .nav-hide .nav-list:before { content: none } #header .header-main .header-nav .nav-hide .nav-list>li { position: relative } #header .header-main .header-nav .nav-hide .nav-list>li>a { color: #333; background: none; padding: 0 30px } #header .header-main .header-nav .nav-hide .nav-list>li>.btn-more { display: block } #header .header-main .header-nav .nav-hide .nav-list>li:hover .hide-children { display: none } #header .header-main .header-nav .nav-hide .nav-list .hide-children { display: none; position: static; width: 100%; text-align: left; padding: 0 60px; white-space: normal } #header .header-main .header-nav .nav-hide .nav-list .hide-children p { padding-left: 0 } #header .header-main .header-nav .nav-hide .nav-list .hide-children a { color: #333 } #header .header-code { display: none; bottom: 50%; right: 100px; -webkit-transform: translateY(50%); transform: translateY(50%) } } #footer { background: #f7f7f7; padding-top: 90px; padding-bottom: 50px } #footer,#footer .footer-main { position: relative } #footer .footer-map { position: absolute; top: 130px; right: 20px } #footer .footer-map .addr-list svg { cursor: pointer } #footer .footer-map .addr-list li { position: absolute; z-index: 10 } #footer .footer-map .addr-list li:first-child { top: 16%; left: 12% } #footer .footer-map .addr-list li:nth-child(2) { bottom: 27%; left: 23% } #footer .footer-map .addr-list li:nth-child(3) { top: 15%; left: 55% } #footer .footer-map .addr-list li:nth-child(4) { top: 50%; left: 56% } #footer .footer-map .addr-list li:nth-child(5) { bottom: 20%; right: 6% } #footer .footer-map .addr-list li:nth-child(5) .btn { left: auto; right: 100%; margin-left: auto; margin-right: 6px } #footer .footer-map .addr-list li:nth-child(6) { top: 30%; left: 80% } #footer .footer-map .addr-list li.active path { fill: red } #footer .footer-map .addr-list li.active .btn { display: block } #footer .footer-map .addr-list li .btn { display: none; padding: 12px 15px; border: 1px solid #d2d2d2; background: #fff; color: red; position: absolute; top: 50%; left: 100%; margin-left: 6px; margin-top: -20px } #footer .footer-map .addr-list li .btn:hover { background: red; color: #fff } #footer .footer-qrcode { position: absolute; bottom: 0; right: 0; z-index: 10 } #footer .footer-qrcode .pic { margin-bottom: 16px } #footer .footer-nav dt { float: left } #footer .footer-nav dt:not(:last-child) { margin-right: 80px } #footer .footer-nav li:not(:last-child) { margin-bottom: 16px } #footer .footer-nav .title { margin-bottom: 40px } #footer .footer-nav a { color: #666 } #footer .footer-nav a:hover { color: red } #footer .footer-addr { margin-bottom: 30px; line-height: 32px; color: #666 } #footer .footer-addr>li { float: left; padding: 20px; background: hsla(0,0%,87.1%,.36); border-radius: 10px } #footer .footer-addr>li:not(:last-child) { margin-right: 30px } #footer .footer-addr .title { color: #333; margin-bottom: 10px } #footer .footer-addr .title b { color: rgba(51,51,51,.2); font-size: 18px; vertical-align: middle } #footer .footer-addr .title span { font-size: 10px; color: rgba(51,51,51,.2); vertical-align: middle } #footer .footer-addr .title i { font-style: normal; vertical-align: middle } #footer .footer-info { margin-bottom: 30px } #footer .footer-info p { display: inline-block; color: #333; margin-right: 30px } #footer .footer-webInfo { color: #666; margin-bottom: 30px } #footer .footer-webInfo p { display: inline-block; margin-right: 10px } #footer .footer-webInfo a { color: #666 } #footer .footer-webInfo a:hover { color: red } #footer .footer-link { max-width: 1020px; line-height: 1.5; color: #aaa } #footer .footer-link a { color: #aaa; margin-right: 5px } #footer .footer-link a:hover { color: red } #formPop { position: fixed; z-index: 9999; top: 0; left: 0; font-size: 0; width: 100%; height: 100%; display: none; text-align: center } #formPop:before { content: ""; height: 100% } #formPop .pop-box,#formPop:before { display: inline-block; vertical-align: middle } #formPop .pop-box { position: relative; width: 300px; height: 200px; background: #fff; font-size: 14px; padding: 30px 15px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2) } #formPop .pop-logo { margin-bottom: 40px } #formPop .btn-close { position: absolute; top: 10px; right: 15px; font-size: 20px; line-height: 1 } #formPop .btn-close:hover { color: red } #goTop { position: fixed; bottom: 60px; right: 50px; z-index: 999; opacity: 0; visibility: hidden } #goTop.is-show { visibility: visible; opacity: 1 } #goTop.is-show:hover { opacity: .6 } @media screen and (max-width:991px) { #footer { text-align: center; padding-top: 50px; line-height: 1.5 } #footer .footer-map,#footer .footer-map .addr-list,#footer .footer-nav { display: none } #footer .footer-addr { text-align: center } #footer .footer-addr li { float: none; display: inline-block; margin: 5px!important } #goTop { bottom: 30px; right: 15px } } /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2017 Daniel Eden */.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } @keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } @keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%,0,0) rotate(-5deg); transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate(3deg); transform: translate3d(20%,0,0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate(-3deg); transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate(2deg); transform: translate3d(10%,0,0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate(-1deg); transform: translate3d(-5%,0,0) rotate(-1deg) } to { -webkit-transform: none; transform: none } } @keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%,0,0) rotate(-5deg); transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate(3deg); transform: translate3d(20%,0,0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate(-3deg); transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate(2deg); transform: translate3d(10%,0,0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate(-1deg); transform: translate3d(-5%,0,0) rotate(-1deg) } to { -webkit-transform: none; transform: none } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes jello { 0%,11.1%,to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.39062deg) skewY(.39062deg); transform: skewX(.39062deg) skewY(.39062deg) } 88.8% { -webkit-transform: skewX(-.19531deg) skewY(-.19531deg); transform: skewX(-.19531deg) skewY(-.19531deg) } } @keyframes jello { 0%,11.1%,to { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.39062deg) skewY(.39062deg); transform: skewX(.39062deg) skewY(.39062deg) } 88.8% { -webkit-transform: skewX(-.19531deg) skewY(-.19531deg); transform: skewX(-.19531deg) skewY(-.19531deg) } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } to { -webkit-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } to { -webkit-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } to { -webkit-transform: none; transform: none } } @keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } to { -webkit-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: none; transform: none } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: none; transform: none; 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% { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) 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; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; 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(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; 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(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; 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(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; 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 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-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; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -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; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 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%,80% { -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; opacity: 1 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } @keyframes hinge { 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%,80% { -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; opacity: 1 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate(-120deg); transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate(-120deg); transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; -webkit-transform: none; transform: none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate(120deg); transform: translate3d(100%,0,0) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate(120deg); transform: translate3d(100%,0,0) rotate(120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } #banner .slide-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0 } #banner .slide-main:before { content: ""; display: inline-block; vertical-align: middle; height: 100% } #banner .slide-main .slide-box { display: inline-block; vertical-align: middle; font-size: 20px; color: #fff } #banner .swiper-pagination { bottom: 60px } #banner .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 4px; background: #fff; opacity: 1; -webkit-transition: width .3s linear; transition: width .3s linear; margin: 0 10px } #banner .swiper-pagination-bullet-active { width: 40px } #banner .swiper-slide { overflow: hidden; background: #b8a892 } #banner .swiper-slide>img { width: 100%; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: transform 6s ease; transition: transform 3s ease } #banner .swiper-slide .slide-main { padding: 15px } #banner .swiper-slide-active>img { -webkit-transform: scale(1); transform: scale(1) } #homeServer .server-list li:nth-child(2n) { margin-top: 80px } #homeServer .server-list .box { padding: 24px } #homeAbout { background: #f7f7f7; padding-bottom: 100px } #homeAbout .swiper-container { padding-right: 25% } #homeAbout .aboutMain { position: relative; z-index: 20; margin-top: -90px } #homeAbout .about-item { min-height: 600px } #homeAbout .about-item>div { padding-top: 30px; padding-bottom: 30px } #homeAbout .about-left { background: #fff } #homeAbout .about-left .left-main { max-width: 640px; margin-left: auto; margin-right: auto } #homeAbout .about-left .left-content { text-indent: 25px; color: #333 } #homeAbout .about-right { position: relative; top: 166px } #homeAbout .about-right .right-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; background: rgba(255,0,0,.9); padding-left: 60px; padding-right: 60px } #homeAbout .about-right .top-title { font-size: 28px; margin-bottom: 30px } #homeAbout .about-right .right-main { max-width: 480px; line-height: 1.5 } #homeAbout .about-right li:not(:last-child) { margin-bottom: 20px } #homeAbout .about-right .title { margin-bottom: 10px } #homeAbout .about-right .title:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 10px; position: relative; top: -2px } #homeNews .news-list-arr .news-list { display: none } #homeNews .news-list-arr .news-list.is-show { display: block } #homeNews .container { padding-top: 190px; padding-bottom: 120px } #homeNews .pic { margin-bottom: 20px; overflow: hidden } #homeNews .pic img { -webkit-transition: all .2s linear; transition: all .2s linear } #homeNews .date { color: #333; font-size: 12px; margin-bottom: 5px } #homeNews .title { font-size: 16px; line-height: 24px; margin-bottom: 5px; -webkit-transition: color .3s linear; transition: color .3s linear } #homeNews .desc { color: #999; line-height: 22px } #homeNews .box { padding: 0 8px } #homeNews .news-list li:nth-child(2n) { margin-top: 80px } #homeNews .news-list li a:hover .title { color: red } #homeNews .news-list li a:hover .pic img { -webkit-transform: scale(1.1); transform: scale(1.1) } @media screen and (max-width:991px) { .bg-pic:after,.bg-pic:before { content: none } #banner .swiper-pagination { bottom: 10px } #banner .swiper-pagination-bullet-active { width: 30px } #homeServer .server-list li:nth-child(2n) { margin-top: 0 } #homeServer .server-list li:not(:last-child) { margin-bottom: 30px } #homeAbout { padding-bottom: 40px } #homeAbout .swiper-container { padding-right: 0 } #homeAbout .about-item { min-height: auto } #homeAbout .aboutMain { margin-top: 0 } #homeAbout .about-right { background: none!important; top: 0; padding-top: 40px } #homeAbout .about-right .right-container { position: static } #homeNews .container { padding-top: 40px; padding-bottom: 40px } #homeNews .news-list li { margin-bottom: 30px } #homeNews .news-list li:nth-child(2n) { margin-top: 0 } } @media screen and (max-width:768px) { #homeNews .news-list li { max-width: 295px; margin-left: auto; margin-right: auto } } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1 } .swiper-container-no-flexbox .swiper-slide { float: left } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box } .swiper-container-android .swiper-slide,.swiper-wrapper { -webkit-transform: translateZ(0); transform: translateZ(0) } .swiper-container-multirow>.swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap } .swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative } .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide { height: auto } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: -webkit-transform,height; -webkit-transition-property: height,-webkit-transform; transition-property: height,-webkit-transform; transition-property: transform,height; transition-property: transform,height,-webkit-transform } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x } .swiper-button-next,.swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: 50%; background-repeat: no-repeat } .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-prev,.swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23007aff'/%3E%3C/svg%3E"); left: 10px; right: auto } .swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z'/%3E%3C/svg%3E") } .swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23fff'/%3E%3C/svg%3E") } .swiper-button-next,.swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23007aff'/%3E%3C/svg%3E"); right: 10px; left: auto } .swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z'/%3E%3C/svg%3E") } .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23fff'/%3E%3C/svg%3E") } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s; transition: .3s; -webkit-transform: translateZ(0); transform: translateZ(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-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; -webkit-box-shadow: none; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-white .swiper-pagination-bullet { background: #fff } .swiper-pagination-bullet-active { opacity: 1; background: #007aff } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000 } .swiper-container-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0) } .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px 0; display: block } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px } .swiper-pagination-progress { background: rgba(0,0,0,.25); position: absolute } .swiper-pagination-progress .swiper-pagination-progressbar { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top } .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin: right top; transform-origin: right top } .swiper-container-horizontal>.swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0 } .swiper-container-vertical>.swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-progress.swiper-pagination-white { background: hsla(0,0%,100%,.5) } .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff } .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #000 } .swiper-container-3d { -webkit-perspective: 1200px; -o-perspective: 1200px; 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 { -webkit-transform-style: preserve-3d; 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: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(transparent)); background-image: linear-gradient(270deg,rgba(0,0,0,.5),transparent) } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(transparent)); background-image: linear-gradient(90deg,rgba(0,0,0,.5),transparent) } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(transparent)); background-image: linear-gradient(0deg,rgba(0,0,0,.5),transparent) } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(transparent)); background-image: linear-gradient(180deg,rgba(0,0,0,.5),transparent) } .swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper { -ms-perspective: 1200px } .swiper-container-cube,.swiper-container-flip { overflow: visible } .swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .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,.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 } .swiper-container-cube .swiper-slide { visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0 } .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-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0 } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; 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-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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%; -o-object-fit: contain; object-fit: contain } .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-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12) infinite; animation: swiper-preloader-spin 1s steps(12) infinite } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' stroke='%23fff' stroke-width='11' stroke-linecap='round' d='M60 7v20'/%3E%3C/defs%3E%3Cuse xlink:href='%23a' opacity='.27'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(30 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(60 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(90 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(120 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.27' transform='rotate(150 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.37' transform='rotate(180 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.46' transform='rotate(210 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.56' transform='rotate(240 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.66' transform='rotate(270 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.75' transform='rotate(300 60 60)'/%3E%3Cuse xlink:href='%23a' opacity='.85' transform='rotate(330 60 60)'/%3E%3C/svg%3E") } @-webkit-keyframes swiper-preloader-spin { to { -webkit-transform: rotate(1turn) } } @keyframes swiper-preloader-spin { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .case216 .ico216 { background: url(../image/ico216.png) no-repeat; display: inline-block; vertical-align: middle; } .case216 .item216 .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../image/bj216.png) repeat 0 0; opacity: 0; filter: alpha(opacity=0); transition: all .5s; } .case216 .item216 .t1 { width: 100%; position: absolute; left: 0; bottom: 0; height: 56px; line-height: 56px; background: url(../image/t216.png) repeat-x 0 0; font-size: 20px; font-weight: bold; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); color: #fff; transition: all .5s; } .case216 { width: 100%; overflow: hidden; } .case216 .item216 { width: 25%; float: left; text-align: center; } .case216 .item216 a { width: 100%; overflow: hidden; display: block; position: relative; } .case216 .item216 .img { width: 100%; padding-top: 112.66%; position: relative; overflow: hidden; } .case216 .item216 .img img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; min-height: 100%; display: block; } .case216 .item216 .txtcon { opacity: 0; filter: alpha(opacity=0); text-align: center; position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(0%, 0%); color: #fff; transition: all .5s; } .case216 .item216 .txtcon .t2 { width: 100%; font-size: 28px; font-weight: bold; } .case216 .item216 .txtcon span { font-size: 12px; margin: 5px 0 15px; display: block; } .case216 .item216 .txtcon s { width: 58px; height: 58px; display: block; margin: 0 auto; background-position: 0 -42px; } .case216 .item216 a:before { opacity: 0; width: 94%; height: 94%; position: absolute; display: block; border: 1px solid #fff; content: ''; left: 3%; top: 3%; -webkit-transform: scale(0.5); transform: scale(0.5); z-index: 11; filter: alpha(opacity=0); transition: all .5s; } .case216 .item216:hover .bg, .case216 .item216:hover .txtcon { opacity: 1; filter: alpha(opacity=100); } .case216 .item216:hover .txtcon { top: 50%; } .case216 .item216:hover .t1 { opacity: 0; filter: alpha(opacity=0); } .case216 .item216:hover a { color: #000; } .case216 .item216:hover a:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* 宽度 */ .ey-news107 .n_cw { width: 1220px; padding: 0 10px; margin: 0 auto; } /* 颜色 */ .ey-news107 .top .pic .bg,.ey-news107 .bot107 ul > li .box .line107,.ey-news107 .bot107 ul > li .box:hover { background: #ff0000; } .ey-news107 .top .font107 ul { overflow: hidden; padding: 14px 0; background: #b8a892; display: inline-block; border-radius: 30px } .ey-news107 .top .font107 ul > li .box { display: block; color: #fff; } .ey-news107 .top .font107 .con .p1 { font-size: 18px; color: #333; padding: 54px 0 24px 0; } .ey-news107 .top .font107 .con .p2 { line-height: 24px; } .ey-news107 .top .font107 .con .more107 { color: #ff0000; padding-top: 20px; display: block; } .ey-news107 .bot107 ul > li .box { background: #f1f1f1; display: block; border-radius: 20px; padding: 36px 40px 30px 36px; } .ey-news107 .bot107 ul > li .box .time107 { font-size: 18px; padding-bottom: 15px; } .ey-news107 .bot107 ul > li .box .p1 { font-size: 16px; color: #333; padding: 18px 0; } .ey-news107 .bot107 ul > li .box .p2 { line-height: 24px; } .ey-news107 .bot107 ul > li .box:hover .time107 { color: rgba(255,255,255,.6); } .ey-news107 .bot107 ul > li .box:hover .line107 { background: #fff; } .ey-news107 .bot107 ul > li .box:hover .p1 { color: #fff; } .ey-news107 .bot107 ul > li .box:hover .p2 { color: rgba(255,255,255,.6); } /* 颜色 end*/ .ey-news107 .top .pic .bg { width: 576px; height: 325px; display: block; border-radius: 20px; } .ey-news107 .bot107 ul > li .box .line107 { width: 34px; height: 2px; display: inline-block; } .ey-news107 .n_cw::before, .ey-news107 .n_cw::after { content: ''; display: block; clear: both; } .ey-news107 .ey-news107 { margin-top: 20px; } .ey-news107 .top { overflow: hidden; padding-top: 70px; } .ey-news107 .top .pic { float: left; padding-right: 60px; position: relative; } .ey-news107 .top .pic .tp { display: block; position: absolute; left: 20px; top: -20px; } .ey-news107 .top .pic .tp img { border-radius: 20px; width: 580px; height: 320px; } .ey-news107 .top .font107 { float: left; max-width: 542px; padding: 40px; } .ey-news107 .top .font107 ul > li { float: left; padding: 0 40px; border-left:1px solid #fff; } .ey-news107 .bot107 { margin-top: 50px; overflow: hidden; } .ey-news107 .bot107 ul { margin-left: -40px; margin-bottom: -30px; } .ey-news107 .bot107 ul > li { float: left; width: 33.33%; padding-left: 40px; padding-bottom: 30px; } @media (max-width: 1024px) { .ey-news107 .top .pic { float: none; padding-right: 0; } .ey-news107 .top .pic .bg { display: none; } .ey-news107 .top .pic .tp { position: unset; text-align: center; } .ey-news107 .top .font107 { float: none; max-width: none; padding-top: 30px; } .ey-news107 .top .font107 ul { display: block; margin: 0 100px; } .ey-news107 .top .font107 ul > li { width: 50%; } .ey-news107 .top .font107 ul > li .box { text-align: center; } .ey-news107 .top .font107 .con .more107 { text-align: center; } .ey-news107 .bot107 ul > li { width: 50%; } .ey-news107 .bot107 ul > li .box { padding: 20px 20px; } } @media (max-width: 700px) { .ey-news107 .top .font107 ul { margin: 0; } .ey-news107 .bot107 ul > li { width: 100%; } .ey-news107 .bot107 ul > li .box { padding: 20px 10px; } } @media (max-width: 1024px) { body { min-width: 0; } .ey-news107 .n_cw {width: 100%; } }