@charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2013 Daniel Eden */ * { font-family: "宋体", sans-serif; } .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; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); -ms-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(-48px); transform: scale(.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); -ms-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(-48px); -ms-transform: scale(.475) translateX(-48px); transform: scale(.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); -ms-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); -ms-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); -ms-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); -ms-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(42px); transform: scale(.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(42px); -ms-transform: scale(.475) translateX(42px); transform: scale(.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(-42px); transform: scale(.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(.475) translateX(-42px); -ms-transform: scale(.475) translateX(-42px); transform: scale(.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); -ms-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-transform-origin: center top; transform-origin: center top; } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } /* 002 */ @media screen and (max-width: 1200px) { img { max-width: 100%; } .wd, .main { width: 100%; } body { min-width: 100%; } .headTop { padding: 0 20px; } .indexMain { margin: 0 20px; } .newsBoxLeft { width: 780px; } .newsBoxLeft { float: none; width: 100%; } .indexNews { float: none; width: auto; margin-left: 405px; } .newsBox { height: auto; padding-bottom: 30px; } .newsBoxRight { float: none; width: auto; } .slideNotice .indexNews { width: 100%; margin-left: 0; } .iconList li { width: 25%; } .iconList li a { width: auto; } .newsDiv { width: 100%; margin-left: 0; } .newsDiv .indexNews { margin-left: 0; } .linkSelect li { width: 33%; margin-bottom: 10px; } .linkDiv { margin-left: 10px; } .sideTit { display: none; } .mobileTit { display: block; } .left { float: none; width: auto; margin: 0 20px; } .sideMenuNav, .sideContact { display: none; } .right { margin: 0 20px; } .meetList { margin: 20px 0 60px; } .meetList li { margin: 0; width: 25%; } .meetList li a { width: auto; margin: 30px 15px 0; } .indexMain { padding: 0 15px; } } @media screen and (max-width: 1024px) { .nav { display: none; } .mobileIconCon { display: block; } .mobileIconCon a.searchBtn { display: none; } .meetList li { width: 33.3333%; } .wd10 { width: auto; margin: 0 30px; } .columslideBox { float: none; margin: 0 auto 20px; } .columnRight { margin-left: 0; } .columnBoxDiv { width: 100%; float: none !important; } .columnLink { margin: 0 -10px; } .columnLink li { margin-left: 0; width: 25%; } .columnLink li a { margin: 0 10px 20px; } .columnBoxUl { float: none; margin-left: 0; width: 100%; margin-top: 20px; } .cTitle { padding: 0 20px 0 32px; } .bg3 .cTitle .more { right: 20px; } .columnMenuTit { display: block; } .columnMenu ul { display: none; } .columnMenu ul li { float: none; width: 100%; } .column { background-size: auto auto; } } @media screen and (max-width: 980px) { .logo { width: 430px; height: 58px; margin-top: 42px; } .banner .item { } } @media screen and (max-width: 800px) { .searchBtn { display: block; } .search, .lang { display: none; } .headRig { padding-top: 23px; } .headTop { height: 130px; } .logo { margin-top: 36px; } .bigImg { height: 250px; } .organzineText { line-height: 22px; } .meetList li { width: 50%; } .article { padding: 17px 46px 20px; } .article ul li { width: 100%; float: none; } .article ul li.next div { float: none; text-align: left; } .article ul li div { height: auto; padding: 5px 0; } .article ul li span { height: 22px; line-height: 22px; } .article ul li a { height: auto; margin-left: 50px; float: none; line-height: 22px; } .columnLink li { width: 50%; } } @media screen and (max-width: 768px) { .slideBox { float: none; margin: 0 auto 20px; } .indexNews { margin-left: 0; } .linkSelect li { width: 50%; } .placeDiv { height: auto; overflow: hidden; } .placeDiv div { width: 100%; float: none; } } @media screen and (max-width: 640px) { .banner .item { } .customSelect { text-indent: 4px; } .footLink a { margin: 0 6px; } .footer { padding: 29px 10px 45px; } .linkText { float: none; } .linkSelect { margin: 20px 0 0 0; } .linkSelect li { width: 100%; } .linkDiv { margin-left: 0; } .mobileIconCon a { height: 45px; } #mobileNavTit { height: 45px; line-height: 45px; } .bigImg { height: 200px; } .eventsInfo { padding-top: 0; line-height: 30px; margin-left: 100px; } .rightBox, .path { padding: 0 15px; } .downLoad li a, .organize li a { margin: 0 15px; } .downLoad li a span { width: 12px; font-size: 0; } .downLoad li a div { margin: 0 38px 0 22px; } .path h3 { position: relative; left: auto; top: auto; line-height: 52px; } .pathdiv { margin-top: 0; padding: 15px 0; line-height: 22px; height: auto; } .organzineText { margin-left: 115px; } .organzineText h3 { margin: 8px 0; line-height: 26px; max-height: 52px; overflow: hidden; } .orInfo { line-height: 22px; max-height: 44px; overflow: hidden; } .meetList li a { margin: 20px 10px 0; } .placeDiv div i { margin-left: 15px; } .placeDiv div span { margin-left: 55px; padding: 15px 0; height: auto; line-height: 28px; } .newsList li a div { margin: 0 0 0 22px !important; } .columnMain { padding: 15px; } .cTitle, .columnHot { padding: 0 15px; } .columnList, .columnBoxDiv .columnList { padding-left: 15px; padding-right: 15px; } .columnTitle h1 { font-size: 2em; } .columnTitle p { font-size: 1em; } .columnFooter { padding: 0 10px 30px; } .wd10 { margin: 0 15px; } .columnLink { margin: 0 -5px; } .columnLink li a { margin: 0 5px 10px; } .bg3 .cTitle .more { right: 15px; } .columnText { margin: 23px 20px; } .slideBox .bd .tit a { margin: 14px 20px 0; } } @media screen and (max-width: 540px) { .logo { width: 350px; height: 47px; margin-top: 44px; } .iconList li { width: 50%; } .organzineText h3 { font-size: 1.4em; } .orInfo { font-size: 1.2em; } .meetList li { width: 100%; } .meetList li a { margin: 20px 0 0; } .columslideBox { width: 100%; height: auto; } } @media screen and (max-width: 480px) { .paged a, .paged .p_info, .paged .current { padding: 0 8px; margin: 0 1px; height: 24px; line-height: 24px; } } @media screen and (max-width: 414px) { .banner .item { } .slideBox { width: 100%; height: auto; } .customSelect { font-size: 1.2em; } .logo { width: 280px; height: auto; margin-top: 30px; } .headTop { height: 100px; } .searchBtn { right: 10px; top: 20px; } .mspan1 { padding: 0; display: block; } .mspan2 { display: block; } .left, .right { margin: 0 10px; } .headTop { padding: 0 10px; } .columnList li a span { display: none; } .columnList li a b { margin-right: 0; } } @media screen and (max-width: 320px) { .logo { width: 240px; margin-top: 35px; } .placeDiv { font-size: 1.2em; } } @media screen and (max-width: 678px) { .content img{ width:100% !important; height:auto !important} } /* 003 */ /* * Owl Carousel - Animate Plugin */ @charset "utf-8"; .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("../images/owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } /*.owl-theme .owl-controls { margin-top: 15px; text-align: center; }*/ .owl-theme .owl-controls .owl-nav [class*="owl-"] { cursor: pointer; display: inline-block; font-size: 0; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; } /*.owl-theme .owl-controls .owl-nav [class*="owl-"]:hover { } .owl-theme .owl-controls .owl-nav .disabled { cursor: default; } .owl-theme .owl-controls .owl-nav .owl-prev{ left:-20px; background:url(../images/cprev.png) no-repeat 0 0; background-size:cover;} .owl-theme .owl-controls .owl-nav .owl-next{ right:-20px; background:url(../images/cnext.png) no-repeat 0 0; background-size:cover;}*/ /*banner*/ .banner .owl-carousel .owl-controls { display: none; } .banner .owl-carousel .owl-controls .owl-dot { display: inline-block; } .banner .owl-theme .owl-controls { position: absolute; left: 0; width: 100%; text-align: center; bottom: 0; z-index: 2; height: 40px; } .banner .owl-theme .owl-controls .owl-nav .disabled { cursor: default; } .banner .owl-theme .owl-dots .owl-dot span { margin: 0 5px; overflow: hidden; display: inline-block; *display:inline; zoom: 1; width: 11px; height: 11px; line-height: 9999px; cursor: pointer; background: url(../images/circle.png) no-repeat 0 0; } .banner .owl-theme .owl-dots .owl-dot.active span, .productBanner .owl-theme .owl-dots .owl-dot:hover span { background-position: -22px 0; } /* 004 */ @charset "utf-8"; /* LESS Document */ /* reset.css V1.2 Start*/ body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, form, button, input, textarea, th, td { margin: 0px; padding: 0px; font-weight: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; } body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, i { font: normal 62.5% Microsoft YaHei, Arial, "\5b8b\4f53", tahoma; } body { min-width: 1200px; background-color: #f3f3f3; } ul, ol, li { list-style: none; } a { text-decoration: none; color: #333; } a:hover { text-decoration: none; } img { border: 0; vertical-align: top; } button, input, select, textarea { font-size: 100%; vertical-align: middle; outline: none; } table { border-collapse: collapse; border-spacing: 0; } .fixed:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .fixed { *zoom: 1; } .clear { clear: both; } .fl { float: left; } .fr { float: right; } .wd { margin: 0 auto; width: 1200px; } .wd10 { margin: 0 auto; width: 1000px; } /* reset.css V1.0 End */ .p_scale { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); } .overflow { height: auto; overflow: hidden; } /*header*/ .headTop { height: 140px; } .logo { float: left; margin-top: 35px; width: 496px; height: 67px; } .logo img { width: 100%; height: auto; } .headRig { float: right; padding-top: 35px; text-align: right; } .lang { font-size: 1.4em; color: #004987; } .lang span { display: inline-block; padding: 0 14px; } .lang a { display: inline-block; color: #004987; } .search { width: 268px; height: 32px; border: 1px solid #9bc0df; padding-left: 10px; margin-top: 21px; } .search input { display: block; float: left; height: 32px; line-height: 32px; color: #999; border: 0; background: none; } .search input[type="text"] { width: 238px; font-size: 1.4em; } .search input[type="submit"] { width: 22px; cursor: pointer; background: url(../images/search.jpg) no-repeat center center; } .mobileNavTit { display: none; } .nav { height: 50px; position: relative; /*background-color: #004987;*/ /*background: -webkit-linear-gradient(top,#2a9fde,#12378f);*/ background: -webkit-linear-gradient(top,#cd3733,#ff0500); /*红色渐变*/ /*导航条背景颜色渐变 从上到下 这是一种新式写法*/ /*background: url(../images/bnbg.jpg);*/ } .nav ul { height: auto; overflow: hidden; /*border-left: 1px solid #063f74;*/ /*此处为二级栏目分割线*/ } .nav ul li { float: left; position: relative; width: 14.2856%; /*background: url(../images/navBg.jpg) repeat-y right 0;*/ /*此处是导航右侧的竖线*/ } .nav ul li > a { display: block; height: 50px; line-height: 50px; color: #fff; text-align: center; font-size: 1.6em; } .nav ul li:hover, .nav ul li.on { /*background: #ba8940;*/ /*background: #cd3733;*/ background: -webkit-linear-gradient(top,#cd3733,#ff0500); /*红色渐变*/ /*鼠标经过导航条时的颜色*/ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 10px; /*这是一级栏目鼠标悬停后显示的背景圆角*/ } .hover-text { visibility: hidden; /*border: 10px solid #000; */ /*上面是显示边框线条*/ /*background-color: #fff;*/ text-align: center; /*padding: 5px;*/ border-radius: 8px; /*这是二级栏目鼠标悬停后显示的背景圆角*/ } /* 鼠标悬停时显示hover内容 */ .hover-content:hover .hover-text { visibility: visible; } /*导航栏样式控制二级菜单的*/ .header { position: relative; background-color: #fff; z-index: 1000; /*此处数值1000 越大 表示此样式在最顶层*/ } .dandu-w a { width: 170px; } /*banner*/ .banner .item { width: 100%; } .banner .item a { display: block; width: 100%; position: absolute; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .indexMain { background-color: #fff; } /*news*/ .newsBox { height: 365px; overflow: hidden; } .newsBoxLeft { float: left; width: 790px; } .indexTitle { height: auto; overflow: hidden; padding: 42px 0 24px 30px; background: url(../images/icon2.png) no-repeat 0 40px; } .indexTitle b { display: inline-block; color: #004987; font-size: 2.2em; } .indexTitle a { display: block; color: #004987; font-size: 1.4em; font-weight: bold; margin: 11px 10px 0 0; float: right; } .indexTitle a:hover { color: #ba8940; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .slideBox { width: 385px; height: 230px; overflow: hidden; position: relative; float: left; } .slideBox .hd { height: 23px; overflow: hidden; position: absolute; left: 0; width: 100%; bottom: 0; z-index: 10; text-align: center; } .slideBox .hd ul li { display: inline-block; *display: inline; margin: 0 5px; width: 10px; height: 10px; line-height: 10px; text-align: center; cursor: pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border: 1px solid #b78841; } .slideBox .hd ul li.on { background-color: #ba8940; } .slideBox .bd li { position: relative; } .slideBox .bd { height: 100%; z-index: 0; } .slideBox .bd .pic { position: relative; z-index: 0; display: table; width: 385px; heigth: 228px; } .slideBox .bd .pic a { display: table-cell; width: 100%; height: 228px; text-align: center; vertical-align: middle; } .slideBox .bd .pic img { max-width: 385px; max-height: 228px; } .slideBox .bd .bg { width: 100%; height: 100px; position: absolute; bottom: -100px; left: 0; z-index: 1; background: url(../images/indexNewsBg.png) repeat 0 0; } .slideBox .bd .tit { width: 100%; height: 100px; line-height: 24px; position: absolute; bottom: -100px; left: 0; z-index: 2; font-size: 1.6em; } .slideBox .bd .tit a { color: #fff; margin: 14px 40px 0; display: block; } /*indexNews*/ .indexNews { float: right; height: auto; overflow: hidden; width: 373px; padding-top: 2px; } .indexNews li { height: 38px; overflow: hidden; background: url(../images/dian.jpg) repeat-x 0 bottom; } .indexNews li a { display: block; color: #000; height: 37px; line-height: 37px; overflow: hidden; font-size: 1.4em; } .indexNews li a:hover { color: #004987; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .indexNews li b { display: block; color: #004987; height: 37px; line-height: 37px; overflow: hidden; font-size: 1.4em; padding-left: 3px; width: 52px; float: left; } .newsBoxRight { float: right; position: relative; width: 361px; } .slideNotice { position: relative; } .slideNotice .indexNews { width: 361px; } .slideNotice .hd { position: absolute; right: 2px; top: -55px; height: 31px; line-height: 31px; width: 130px; border-bottom: 1px solid #ccdae5; } .slideNotice .hd ul { position: absolute; left: 0; top: -1px; height: 32px; } .slideNotice .hd ul li { float: left; width: 65px; cursor: pointer; font-size: 1.4em; text-align: center; } .slideNotice .hd ul li a { color: #00457b; display: block; } .slideNotice .hd ul li.on { height: 30px; border: 1px solid #ccdae5; border-bottom: 2px solid #fff; width: 63px; } /*indexAd*/ .indexAd .item, .linkImg .item { width: 100%; overflow: hidden; } .indexAd .item:hover img, .linkImg .item:hover img { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .iconList { height: auto; overflow: hidden; margin-top: 44px; } .iconList li { float: left; text-align: center; } .iconList li a { display: block; color: #fff; width: 180px; height: 116px; padding-top: 24px; } .iconList li a img { display: block; width: 66px; height: 66px; margin: 0 auto 10px; } .iconList li a div { font-size: 1.6em; } .iconList li.li1 a { background-color: #0084d2; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .iconList li.li2 a { background-color: #2cb168; border-bottom: 1px solid #fff; } .iconList li.li3 a { background-color: #745db9; border-right: 1px solid #fff; } .iconList li.li4 a { background-color: #009aaf; } .iconList li:hover { filter: alpha(opacity=70); opacity: 0.7; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .newsDiv { width: 380px; float: left; margin-left: 30px; } .newsDiv:first-child { margin-left: 0; } .newsDiv .indexNews { width: 100%; } .newsDiv .indexNews li, .slideNotice .indexNews li { position: relative; } .newsDiv .indexNews li b, .slideNotice .indexNews li b { position: absolute; left: 0; top: 0; float: none; z-index: 5; } .newsDiv .indexNews li a, .slideNotice .indexNews li a { margin-left: 55px; } /*link*/ .link { height: auto; overflow: hidden; padding: 40px 0; } .linkText { float: left; height: 30px; line-height: 30px; font-weight: bold; color: #004887; font-size: 2em; } .linkSelect { margin-left: 105px; } .linkSelect li { float: left; width: 20%; } .linkDiv { margin-left: 20px; height: 28px; border: 1px solid #c7ddf4; } .customSelect { height: 28px; line-height: 28px; font-size: 1.4em; color: #004987; background: url(../images/icon1.jpg) no-repeat right center; width: 100%; text-indent: 9px; } .customSelectInner { cursor: pointer; line-height: 28px; text-align: left; width: 100% !important; } /*footer*/ .footer { height: auto; overflow: hidden; color: #d4dbe5; line-height: 24px; text-align: center; padding: 29px 0 45px; /*background-color: #004887;*/ /*页面底部背景颜色--蓝色*/ background: -webkit-linear-gradient(top,#cd3733,#ff0500); /*红色渐变*/ } .footLink { font-size: 1.4em; } .footLink a { display: inline-block; color: #d4dbe5; margin: 0 30px; } .copy { height: auto; overflow: hidden; margin-top: 36px; font-size: 1.2em; } .copy a { color: #d4dbe5; display: inline-block; margin-right: 10px; } .copy a:hover { color: #fff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .mspan1 { padding: 0 21px 0 7px; display: inline-block; } .mspan2 { display: inline-block; } /*bigImg*/ .bigImg { height: 320px; position: relative; z-index: 0; background-repeat: no-repeat; background-position: center top; background-size: cover; } /*main*/ .main { width: 1200px; position: relative; margin: 41px auto 48px; } .left { float: left; width: 250px; } .sideMenu { height: auto; overflow: hidden; background-color: #fff; margin-bottom: 20px; } .sideTit a { height: auto; overflow: hidden; padding: 16px 0 22px 36px; color: #fff; display: block; /*background-color: #05568f;*/ /*二级页面左侧大分类背景颜色*/ background: -webkit-linear-gradient(top,#cd3733,#ff0500); /*红色渐变*/ } .sideTit a h3 { font-weight: bold; font-size: 1.8em; margin-bottom: 3px; } .sideTit a p { font-size: 1.2em; text-transform: uppercase; color: #a5b8cd; font-family: Arial; } .sideMenuNav { height: auto; overflow: hidden; } .sideMenuNav li { height: auto; overflow: hidden; position: relative; border-bottom: 1px solid #ececec; } .sideMenuNav li > a { height: 64px; line-height: 64px; padding: 0 31px 0 56px; color: #585858; font-size: 1.4em; display: block; background: url(../images/sideIcon1.png) no-repeat 36px center; } .sideMenuNav li i { display: block; position: absolute; right: 31px; top: 0; height: 64px; width: 10px; z-index: 5; background: url(../images/sideIcon3.png) no-repeat right center; } .sideMenuNav li i.ibg { background: url(../images/sideIcon5.png) no-repeat right center !important; } .sideMenuNav li.on, .sideMenuNav li:hover { background-color: #f8f8f8; } .sideMenuNav li.on > a, .sideMenuNav li:hover > a { /*color: #ba8940;*/ /*二级页面左侧 栏目标题 鼠标经过后的颜色*/ color: #cd3733; background: url(../images/sideIcon2.png) no-repeat 36px center; } .sideMenuNav li.on i, .sideMenuNav li:hover i { background: url(../images/sideIcon4.png) no-repeat right center; } .sideDiv { height: auto; overflow: hidden; background-color: #f8f8f8; } .sideDiv a { display: block; height: 34px; line-height: 34px; padding: 0 10px 0 56px; color: #585858; font-size: 1.2em; background: url(../images/circle4.png) no-repeat 37px center; } .sideDiv a:hover, .sideDiv a.cur { color: #004987; background: url(../images/circle3.png) no-repeat 37px center #efefef; } .sideContactTit { height: 54px; line-height: 54px; /*background-color: #065890;*/ background: -webkit-linear-gradient(top,#cd3733,#ff0500); /*红色渐变*/ } .sideContactTit a { display: block; padding-left: 36px; color: #fff; font-weight: bold; font-size: 1.8em; } .sideContactBox { height: auto; overflow: hidden; background: url(../images/contactBg.jpg) no-repeat 0 0; height: 178px; padding: 16px 0 0 55px; color: #585858; line-height: 30px; font-size: 1.2em; } /*right*/ .right { margin-left: 290px; background-color: #fff; min-height: 718px; } .path { height: auto; overflow: hidden; position: relative; padding: 0 40px; border-bottom: 1px solid #ececec; } .path h3 { position: absolute; left: 30px; top: 27px; z-index: 5; height: 52px; color: #004987; font-size: 1.7em; border-bottom: 2px solid #004987; } .pathdiv { float: right; color: #898989; font-size: 1.2em; margin-top: 4px; height: 77px; line-height: 77px; } .pathdiv a { color: #898989; } .pathdiv a.on, .pathdiv a:hover { color: #585858; } .pathdiv span { display: inline-block; padding: 0 6px; } /*rightBox*/ .rightBox { height: auto; overflow: hidden; padding: 0 40px; } .eventsTitle { height: auto; overflow: hidden; padding: 46px 0 38px; line-height: 36px; } .eventsTitle h3 { color: #585858; font-size: 1.7em; font-weight: bold; margin-bottom: 6px; } .year { color: #000; font-size: 1.7em; } .eventsList { height: auto; overflow: hidden; margin: 13px 0 78px; border-top: 1px solid #efefef; } .eventsList li { height: auto; overflow: hidden; padding: 21px 5px 21px 0; border-bottom: 1px solid #efefef; } .eventsdate { float: left; width: 82px; text-align: center; } .eventsdate h3 { color: #fff; font-size: 1.7em; font-weight: bold; height: 38px; line-height: 38px; font-family: Arial; background-color: #05558e; } .eventsdate p { color: #585858; font-size: 1.3em; height: 33px; line-height: 33px; background-color: #efefef; } .eventsInfo { margin-left: 111px; font-size: 1.4em; line-height: 34px; color: #585858; padding-top: 5px; } .downLoad { height: auto; overflow: hidden; padding: 20px 0 0; } .downLoad li { height: auto; overflow: hidden; } .downLoad li a { display: block; position: relative; margin: 0 40px; color: #585858; border-bottom: 1px solid #efefef; } .downLoad li a span { display: block; float: right; width: 98px; height: 66px; line-height: 66px; overflow: hidden; font-size: 1.3em; text-align: right; } .downLoad li a div { height: 66px; line-height: 66px; overflow: hidden; background: url(../images/circle2.png) no-repeat left center; padding-left:20px; font-size: 1.4em; } .downLoad li a i { position: absolute; right: 0; top: 0; z-index: 5; width: 33px; height: 66px; background: url(../images/down1.png) no-repeat left center; } .downLoad li:hover { background-color: #f8f8f8; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .downLoad li:hover a { color: #004987; } .downLoad li:hover i { background: url(../images/down2.png) no-repeat right center; } .downLoadTit { height: auto; overflow: hidden; padding: 46px 0 18px; border-bottom: 1px solid #efefef; } .downLoadTit h1 { font-size: 1.7em; color: #585858; font-weight: bold; } .source { font-size: 1.3em; color: #757575; margin: 17px 0 15px; } .source span { display: inline-block; padding: 0 12px; } .down { display: block; height: 33px; line-height: 33px; width: 93px; text-align: right; font-size: 1.3em; color: #9f9f9f; background: url(../images/down1.png) no-repeat left center; } .content { font-size: 14px; color: #585858; line-height: 34px; list-style: disc; padding: 22px 0 84px; } /*organize*/ .organize { height: auto; overflow: hidden; } .organize li a { display: block; height: auto; overflow: hidden; margin: 0 40px; padding: 30px 0; border-bottom: 1px solid #efefef; } .organize li:hover { background-color: #f8f8f8; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .photo { float: left; width: 100px; height: 132px; overflow: hidden; } .photo img { width: 100%; height: 100%; } .organzineText { margin-left: 132px; line-height: 34px; } .organzineText h3 { color: #3e3e3e; font-size: 1.6em; font-weight: bold; margin: 18px 0 8px; } .orInfo { color: #8b8b8b; font-size: 1.3em; } /*paged*/ .paged { padding: 52px 0 66px; text-align: center; } .paged a, .paged .p_info, .paged .current { display: inline-block; zoom: 1; *display: inline; margin: 0 4px; height: 38px; line-height: 38px; padding: 0 15px; font-size: 13px; text-align: center; color: #8b8b8b; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-color: #f3f3f3; border: 1px solid #ededed; } .paged .current, .paged a:hover { border-color: #004887; color: #fff; background-color: #004887; } .meetTitle { height: auto; overflow: hidden; color: #585858; line-height: 34px; font-size: 1.6em; font-weight: bold; padding: 46px 0 12px; } /*meetList*/ .meetList { height: auto; overflow: hidden; margin: 20px 0 0 -38px; } .meetList li { float: left; margin: 29px 0 0 33px; } .meetList li a { display: block; height: 76px; line-height: 76px; width: 250px; color: #585858; font-size: 1.6em; text-align: center; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; background-color: #f3f3f3; border: 1px solid #ececec; } .meetList li:hover a { color: #fff; background: url(../images/iconRight.jpg) no-repeat 95% center #05568f; } /*place*/ .place { height: auto; overflow: hidden; padding-bottom: 53px; } .placeBox { height: auto; overflow: hidden; margin-top: 39px; } .placeBox dt { height: 41px; line-height: 41px; padding: 0 24px; font-size: 1.4em; background-color: #065890; } .placeBox dt a { color: #fff; } .placeBox dd { border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; } .placeDiv { height: 58px; line-height: 58px; color: #585858; font-size: 1.4em; border-top: 1px solid #ededed; } .placeDiv div { width: 50%; float: left; } .placeDiv div i { display: block; float: left; width: 33px; height: 58px; margin-left: 22px; background-position: left center; background-repeat: no-repeat; } .placeDiv div i.i1 { background-image: url(../images/placeIcon1.png); } .placeDiv div i.i2 { background-image: url(../images/placeIcon2.png); } .placeDiv div i.i3 { background-image: url(../images/placeIcon3.png); } .placeDiv div i.i4 { background-image: url(../images/placeIcon4.png); } .placeDiv div i.i5 { background-image: url(../images/placeIcon5.png); } .placeDiv div i.i6 { background-image: url(../images/placeIcon6.png); } .placeDiv div span { display: block; margin-left: 69px; height: 58px; line-height: 58px; overflow: hidden; border-right: 1px solid #ededed; } .pbg { background-color: #f3f3f3; } .article { height: auto; overflow: hidden; position: relative; padding: 17px 51px 20px; border-top: 1px solid #efefef; } .article ul { color: #8b8b8b; height: auto; overflow: hidden; font-size: 1.2em; padding-top:30px } .article ul li { width: 48%; float: left; } .article ul li div { height: 34px; } .article ul li.next { float: right; } .article ul li.next div { float: right; text-align: right; } .article ul li span { float: left; display: block; height: 34px; line-height: 34px; } .article ul li a { height: 34px; line-height: 34px; float: left; overflow: hidden; display: block; color: #8b8b8b; } .article ul li a:hover { color: #004887; } .articleBtn { position: absolute; top: 50%; z-index: 5; width: 36px; height: 36px; margin-top: -20px; border: 1px solid #ededed; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; background-position: center center; background-repeat: no-repeat; background-color: #f3f3f3; } .articleBtn:hover { background-color: #004887; border-color: #004887; } .articlePrev { left: 0; background-image: url(../images/articleBtn1.png); } .articlePrev:hover { background-image: url(../images/articleBtn11.png); } .articleNext { right: 0; background-image: url(../images/articleBtn2.png); } .articleNext:hover { background-image: url(../images/articleBtn22.png); } .newsShre { height: auto; overflow: hidden; margin: -53px 0 44px 4px; } .newsShre .bdshare-button-style0-16 .bds_more { color: #757575; padding-left: 20px; } /*column*/ .column { height: auto; overflow: hidden; padding-bottom: 82px; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; } .bg1 { background-color: #1f458a; background-image: url(../images/columnbg1.jpg); } .bg2 { background-color: #363b45; background-image: url(../images/columnbg2.jpg); } .bg3 { background-color: #ca612e; background-image: url(../images/columnbg3.jpg); } .columnTitle { height: auto; overflow: hidden; padding: 38px 0 44px; text-align: center; } .columnTitle h1 { font-weight: bold; color: #fff; font-size: 3.2em; } .columnTitle p { color: #5c74c7; font-size: 1.2em; margin-top: 6px; text-transform: uppercase; } .columnMain { padding: 40px 40px 34px; background-color: #eceff4; } .columslideBox { width: 450px; height: 350px; overflow: hidden; position: relative; float: left; } .columslideBox .hd { height: 32px; overflow: hidden; position: absolute; right: 20px; width: auto; bottom: 0; z-index: 10; } .columslideBox .hd ul li { display: inline-block; *display: inline; margin-left: 5px; width: 7px; height: 7px; line-height: 7px; text-align: center; cursor: pointer; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background-color: #a6a9a3; } .columslideBox .hd ul li.on { background-color: #419ad2; } .columslideBox .bd li { position: relative; } .columslideBox .bd { height: 100%; z-index: 0; } .columslideBox .bd .pic { position: relative; z-index: 0; display: table; width: 450px; height: 350px; } .columslideBox .bd .pic a { display: table-cell; width: 100%; height: 350px; text-align: center; vertical-align: middle; } .columslideBox .bd .pic img { max-width: 450px; max-height: 350px; } .columslideBox .bd .bg { width: 100%; height: 54px; position: absolute; bottom: -54px; left: 0; z-index: 1; background: url(../images/textbg.png) repeat 0 0; } .columslideBox .bd .tit { width: 100%; height: 54px; line-height: 54px; position: absolute; bottom: -54px; left: 0; z-index: 2; background: url(../images/iconright2.png) no-repeat 21px center; } .columslideBox .bd .tit a { color: #fff; margin: 0 60px 0 38px; display: block; font-size: 1.3em; height: 54px; line-height: 54px; overflow: hidden; } .columnRight { margin-left: 450px; height: 350px; overflow: hidden; background-color: #fdfefe; } .cTitle { height: 62px; line-height: 62px; border-bottom: 1px solid #efefef; padding: 0 34px; } .cTitle i { display: block; height: 62px; width: 20px; float: left; background: url(../images/icon3.png) no-repeat left center; } .cTitle a { color: #585858; font-size: 1.7em; font-weight: bold; display: inline-block; } .cTitle a:hover { color: #004987; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .columnHot { padding: 0 36px; } .columnHot a { height: auto; overflow: hidden; color: #1f1f1f; padding: 23px 0 22px; display: block; border-bottom: 1px solid #efefef; } .columnHot a:hover { color: #004987; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .cImg { float: left; } .cImg img { width: 90px; height: 77px; } .cText { margin-left: 108px; } .cText h3 { font-size: 1.6em; height: 28px; line-height: 28px; overflow: hidden; } .cText p { color: #a0a0a0; line-height: 24px; max-height: 48px; overflow: hidden; font-size: 1.2em; } .columnList { height: auto; overflow: hidden; padding: 7px 36px 0; } .columnList li { height: 34px; line-height: 34px; position: relative; background: url(../images/circle4.png) no-repeat left center; } .columnList li a { display: block; color: #585858; padding-left: 21px; font-size: 1.2em; } .columnList li a b { font-weight: normal; display: block; height: 34px; line-height: 34px; overflow: hidden; margin-right: 65px; } .columnList li a span { display: block; position: absolute; right: 0; top: 0; color: #9f9f9f; } .columnList li a:hover { color: #004987; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .columnMain .indexAd { margin: 20px 0; } .columnBoxDiv { width: 450px; height: 311px; margin-bottom: 20px; overflow: hidden; background-color: #fdfefe; } .columnBoxDiv .columnList { padding: 17px 36px 0; } .columnFooter { height: auto; overflow: hidden; line-height: 24px; padding-bottom: 30px; text-align: center; background-color: #e1e1e1; color: #585858; } .columnFooter a { color: #585858; } .columnFooter a:hover { color: #333; } .columnAd img { width: 100%; height: auto; display: block; margin: 20px 0; } .columnLink { height: auto; overflow: hidden; margin: 0 0 14px -20px; } .columnLink li { float: left; margin-left: 20px; width: 215px; text-align: center; } .columnLink li a { height: 67px; line-height: 67px; display: block; color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; font-size: 2em; } .columnLink li.cli1 a { background-color: #63a0d9; } .columnLink li.cli2 a { background-color: #58b5ce; } .columnLink li.cli3 a { background-color: #a8d15b; } .columnLink li.cli4 a { background-color: #5b75d1; } .columnLink li:hover a { filter: alpha(opacity=70); opacity: 0.7; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .bg2 .columnTitle p { color: #616277; } .bg2 .columnFooter { background-color: #c6dbef; } .bg3 .columnTitle p { color: #e8c1ac; } .bg3 .cTitle { position: relative; background: url(../images/ctitlebg.jpg) repeat-x 0 0; } .bg3 .cTitle .more { position: absolute; right: 30px; top: 14px; z-index: 5; color: #404040; font-size: 1.2em; font-weight: normal; display: block; height: 32px; line-height: 32px; padding: 0 28px 0 17px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; border: 1px solid #e8ddcc; background: url(../images/more.png) no-repeat 45px center #fbf0e0; } .bg3 .cTitle .more:hover { color: #ff8830; } .bg3 .cTitle i { background-image: url(../images/icon4.png); } .bg3 .columnFooter { background-color: #fef8ef; } .bg3 .columnBoxDiv { height: 316px; } .bg3 .columnList li a:hover, .bg3 .cTitle a:hover, .bg3 .columnHot a:hover { color: #ff8830; } .m20 { margin-top: 20px; } .columnText { font-size: 12px; color: #7b7b7b; line-height: 28px; margin: 23px 34px; max-height: 196px; overflow: hidden; } .columnBoxUl { height: 316px; margin-left: 20px; float: left; background-color: #fefdfc; width: 293px; } .columnBoxUl:first-child { margin-left: 0; } .columnBoxUl .columnList { padding: 17px 21px 0; } .columnBoxUl .columnList li a b { margin-right: 0; } .columnBoxUl .cTitle { padding: 0 20px 0 32px; } .columnBoxUl .cTitle .more { right: 20px; } /*columnMenu*/ .columnMenu { height: auto; overflow: hidden; background-color: #ac5a24; } .columnMenu ul li { float: left; width: 16.66666%; } .columnMenu ul li a { display: block; height: 56px; line-height: 56px; text-align: center; color: #fff; font-size: 1.6em; border-left: 1px solid #bf7443; } .columnMenu ul li a:first-child { border-left: 0; } .columnMenu ul li:hover, .columnMenu ul li.on { background-color: #b66129; } .columnMenuTit { height: 56px; line-height: 56px; display: none; background-color: #ac5a24; color: #fff; font-size: 1.6em; text-align: center; background: url(../images/downicon.png) no-repeat 97% center; } /*手机端wap响应式导航*/ .mobileIconCon { display: none; /*background: url(../images/menu.png) no-repeat 20px center #004987;*/ /*background: -webkit-linear-gradient(top,#2a9fde,#12378f) ;*/ background: -webkit-linear-gradient(top,#cd3733,#ff0500); /*红色渐变*/ position: relative; } .mobileIconCon a { display: block; width: 40px; height: 50px; position: absolute; top: 0; z-index: 5; width: 100%; background: url(../images/menu.png) no-repeat 20px center; } .searchBtn { background: url(../images/search.jpg) center center no-repeat; width: 40px; height: 60px; right: 20px; position: absolute; top: 35px; z-index: 5; display: none; } #mobileNavTit { display: block; height: 50px; line-height: 50px; text-align: center; font-size: 1.8em; /*color: #fff;*/ /*background: url(../images/menu.png) no-repeat;*/ /*background: -webkit-linear-gradient(top,#ccc,#000);*/ /*手机端的导航样式*/ } #menuBtn { display: block; height: 50px; line-height: 50px; text-align: left; padding-left: 55px; font-size: 1.8em; } .mobileSearchCon { display: none; width: 100%; height: 46px; background-color: #9bc0df; overflow: hidden; } .mobileSearchBox { position: relative; width: 98%; height: 40px; margin: 3px auto; background-color: #fff; border-radius: 5px; overflow: hidden; } .mobileSearchBox input[type="text"] { width: 100%; height: 40px; line-height: 40px; font-size: 1.4em; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; color: #999; } .mobileSearchBox input[type="submit"] { position: absolute; display: block; width: 40px; height: 40px; top: 0; right: 0; border: none; background: url(../images/search.jpg) center no-repeat; } .sideNavCon { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 9999; } .sideNavCon .bg { position: absolute; top: 0; left: 0; width: 100%; height: inherit; background-color: rgba(0, 0, 0, 0.5); z-index: 11000; } .sideNavCon .sideNavScroll { position: absolute; top: 0; left: 0; width: 100%; height: inherit; background-color: #fff; overflow: hidden; z-index: 11001; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: .5s ease all; transition: .5s ease all; } .sideNavCon .sideNavScroll.on { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .sideNavCon .sideNavScroll .closeSideNavCon { display: block; width: 100%; height: 30px; text-align: right; padding-top: 5px; } .sideNavCon .sideNavScroll .closeSideNavCon a { margin-right: 10px; display: inline-block; vertical-align: middle; width: 30px; height: 30px; background-color: #666; border-radius: 50%; line-height: 30px; font-size: 22px; color: #fff; text-align: center; } .sideNavCon .sideNav { width: 100%; } .sideNavCon .sideNav li { position: relative; margin: 0 10px; border-bottom: 1px solid #dcdbdb; } .sideNavCon .sideNav li > a { position: relative; display: block; padding-left: 20px; font-size: 1.6em; color: #333; line-height: 50px; } .sideNavCon .sideNav li i { position: absolute; display: block; top: 0; right: 0; font-size: 1.4em; width: 50px; height: 50px; line-height: 4; color: #333; font-weight: bold; text-align: center; font-style: normal; z-index: 2; transition: 0.2s ease all; -webkit-transition: 0.2s ease all; -moz-transition: 0.2s ease all; } .sideNavCon .sideChildNavScroll { position: absolute; top: 0; left: 0; width: 100%; height: inherit; background-color: #f1f1f1; overflow: hidden; z-index: 11002; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: .5s ease all; transition: .5s ease all; } .sideNavCon .sideChildNavScroll.on { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .sideNavCon .sideChildNavScroll .backBtn { position: relative; width: 100%; text-align: center; height: 60px; line-height: 60px; color: #333; font-size: 16px; background-color: #fff; border-bottom: 1px solid #ededed; } .sideNavCon .sideChildNavScroll .backBtn span { position: absolute; top: 0; left: 0; width: 30px; height: 30px; } .sideNavCon .sideChildNav > ul { width: 100%; } .sideNavCon .sideChildNav > ul > li { width: 100%; display: none; } .sideNavCon .sideChildNav dl dt { height: 60px; line-height: 60px; background-color: #f7f7f7; border-bottom: 1px solid #ededed; } .sideNavCon .sideChildNav dl dt a { display: block; padding: 0 10px; color: #333; font-size: 16px; font-weight: bold; } .sideNavCon .sideChildNav dl dd { height: 50px; line-height: 50px; border-bottom: 1px solid #e8e8e8; } .sideNavCon .sideChildNav dl dd a { display: block; padding: 0 20px; color: #333; font-size: 16px; } .sideNavCon .sideChildNav .sideChildWord li { height: 50px; line-height: 50px; border-bottom: 1px solid #e8e8e8; } .sideNavCon .sideChildNav .sideChildWord li a { display: block; padding: 0 20px; color: #333; font-size: 16px; } /*wrapper*/ #wrapper { width: 100%; height: 100%; } #scroller { position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; padding: 0; height: 100%; } .imgdiv { position: absolute; left: 0; width: 100%; display: none; z-index: 990; background-color: #fff; } .imgdiv div.s1 img { display: block; position: absolute; top: 50%; z-index: 999; left: 50%; max-width: 95% !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .close { height: 5em; line-height: 5em; text-align: center; position: absolute; z-index: 999; left: 0; bottom: 0; width: 100%; color: #000; font-size: 1.6em; cursor: pointer; } .mobileTit { display: none; } .mobileTit a { height: 45px; line-height: 45px; font-size: 1.6em; color: #fff; display: block; padding-left: 21px; background: url(../images/downicon.png) no-repeat 97% center #1271b3; } /* 0507start */ .cellbox { margin: 100px auto; width: 500px; border: 1px solid #ccc; height: 200px; } .cellbox .cellbg { width: 500px; height: 60px; background: #05568f; font-size: 20px; color: #fff; line-height: 60px; text-align: center } .cellbox .mess1, .cellbox .mess2 { font-size: 15px; text-align: center; } .cellbox .mess1 { padding-bottom: 10px; padding-top: 40px } /* 0507end */ /* cxy */ .columnBoxUl1 { height: 316px; /*margin-left: 20px;*/ float: left; background-color: #fefdfc; width: 293px; } .columnBoxUl1:first-child { margin-left: 0; } .columnBoxUl1 .columnList { padding: 17px 21px 0; } .columnBoxUl1 .columnList li a b { margin-right: 0; } .columnBoxUl1 .cTitle { padding: 0 20px 0 32px; } .columnBoxUl1 .cTitle .more { right: 20px; } .ml20 { margin-left: 20px; } .exp .owl-item { width: 297px !important; } .fLink { font-size: 1.4em; margin-top: 5px; } .fLink a { display: inline-block; color: #004987; margin: 0px 14px; } .pagess {margin:50px 20px;overflow: hidden;margin-left: 0px;text-align: center;font-size:12px} .pagess ul li { display:inline-block;border: 1px solid #ccc;padding: 2px 9px;margin: 0 3px;line-height: 20px;background: #fff;color:#999} .pagess ul li:hover{ background:#065890; color:#fff;border: 1px solid #065890} .pagess ul li:hover a{color:#fff;} .pagess ul li.thisclass {display: inline-block;border: 1px solid #065890;padding: 2px 9px;margin: 0 3px;background:#065890;color: #fff;} .pagess ul li.thisclass a {color: #fff;} .pagess ul li a{ display:block;color:#999} .pagess ul li a:hover {color: #fff;} .message{ overflow:hidden;} .message dd{ margin-bottom:10px;} .message .kuang{ width:300px; height:40px; line-height:40px; border:1px solid #ddd; padding:0 10px} .message textarea{ width:400px; padding:10px; border:1px solid #ddd; height:100px;} .message .tj{ width:150px; height:40px; border:0; text-align:center; line-height:40xp; color:#fff; margin-left:42px; background:#065890; cursor:pointer} .message span{ float:left} /*首页视频播放*/ /*-视频-*/ .video {margin-top: 1000;cursor: pointer;position: relative;text-align: center} /*.video img{width: 100%;}*/ /*.video img.video-on{opacity: 0;transition: all .2s linear}*/ /*.video img.video-on,*/ /*.video img.video-off{width:6.94%;position: absolute;left: 50%;top: 48%;transform: translate(-50%,-30%);}*/ .video-box{margin-top:50px;} /*.video-box video{width: 100%}*/ /*.video:hover .video-off{display: none;}*/ /*.video:hover .video-on{opacity: 1;transform:translate(-50%,-30%) scale(1.1)}*/ .mask.on{display: block} .mask{ display: none; position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: #000;opacity: .6;z-index: 10}