.jzbox .leftddd .jzboxleft .context h2,.jzbox .leftddd .jzboxleft .context h2 strong{ color:#063394; font-size:24px; margin-top:1.5em; margin-bottom:0.8em; } .jzbox .leftddd .jzboxleft .context h3,.jzbox .leftddd .jzboxleft .context h3 strong{ color:#063394; font-size:18px; margin-top:1em; margin-bottom:.5em; } .jzbox .leftddd .jzboxleft .context strong{ font-weight:500; color:#202020; } .jzbox .leftddd .jzboxleft .context img{ max-width: 100%; height: auto; } /*表格*/ .tg {border-collapse:collapse;border-spacing:0;margin:0px auto;} .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;} .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;} @media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}} table{ border-collapse:collapse; border-spacing:0; } table td{ border: 1px solid black; padding-left:5px; } .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%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-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: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 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: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 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: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .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; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); 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: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-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% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @font-face { font-family: 'icomoon'; font-display: swap; font-style: normal; font-weight: 400; font-family: "icomoon"; src: url("/font/icomoon.eot?#iefix") format("embedded-opentype"), url("/font/icomoon.woff") format("woff"), url("/font/icomoon.ttf") format("truetype"), url("/font/icomoon.svg#$font") format("svg"); } @font-face { font-family: 'icomoon_seh'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon_seh.eot?#iefix") format("embedded-opentype"), url("/font/icomoon_seh.woff") format("woff"), url("/font/icomoon_seh.ttf") format("truetype"), url("/font/icomoon_seh.svg#$font") format("svg"); } @font-face { font-family: 'icomoon_35'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon35.eot?#iefix") format("embedded-opentype"), url("/font/icomoon35.woff") format("woff"), url("/font/icomoon35.ttf") format("truetype"), url("/icomoon35.svg#$font") format("svg"); } @font-face { font-family: 'icomoon3'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon3.eot?#iefix") format("embedded-opentype"), url("/font/icomoon3.woff") format("woff"), url("/font/icomoon3.ttf") format("truetype"), url("/icomoon3.svg#$font") format("svg"); } @font-face { font-family: 'icomoon4'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon4.eot?#iefix") format("embedded-opentype"), url("/font/icomoon4.woff") format("woff"), url("/font/icomoon4.ttf") format("truetype"), url("/icomoon4.svg#$font") format("svg"); } @font-face { font-family: 'icomoon5'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon5.eot?#iefix") format("embedded-opentype"), url("/font/icomoon5.woff") format("woff"), url("/font/icomoon5.ttf") format("truetype"), url("/icomoon5.svg#$font") format("svg"); } @font-face { font-family: 'icomoon_9'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon_9.eot?#iefix") format("embedded-opentype"), url("/font/icomoon_9.woff") format("woff"), url("/font/icomoon_9.ttf") format("truetype"), url("/icomoon_9.svg#$font") format("svg"); } @font-face { font-family: 'icomoon_g'; font-display: swap; font-style: normal; font-weight: 400; src: url("/font/icomoon_g.eot?#iefix") format("embedded-opentype"), url("/font/icomoon_g.woff") format("woff"), url("/font/icomoon_g.ttf") format("truetype"), url("/icomoon_g.svg#$font") format("svg"); } *{ box-sizing: border-box; } a{ transition: all 0.2s ease 0s; } body{ font-family: 'Manrope', sans-serif; margin:0; overflow-x: hidden; color:#222; } *{margin:0;padding:0;} .row>* { padding-right:0; padding-left: 0; } .row{ margin-left:0px; margin-right:0px; } .oppo{ font-family: 'Open Sans', sans-serif; } .ssb2-tit-f { width: 88%; margin-left: 6%; } .gn-udl{ color:#009E00; border-bottom:1px solid #009E00; } .gn-udl:hover{ color:#FFA800; border-bottom:1px solid #FFA800; } .undl{ border-bottom:2px solid #009E00; } .green{ color:#009E00; } .yl{ color:#FFA800; } .ylb{ color:#FFA800; font-weight:700; } .brown{ color:#A75426; } .img{ width:100%; transition: all 0.6s ease 0s; } .w900{ font-weight:900; } .w700{ font-weight:700; } .w200{ font-weight:200; } .dly{ transition: all 0.2s ease 0s; } .dly4{ transition: all 0.4s ease 0s; } .lazy-f{ position:relative; } .lazy-f2{ float:left;width:100%; } .tit{ font-size:40px; color:#0B1937; font-weight:700; text-align:center; } .nav-con-i-f{ position:relative; } .sd-btn-ico{ position:absolute!important; left:0px; top:3px; font-size:20px; } .sd-btn-ico:before{ display: block; position:absolute; top:0px; } .title{ color:#222222; font-size:36px; font-weight:700; width:100%; text-align:center; line-height:60px; } .container-fluid{ padding:0; } .desc{ color:#222222; font-size:16px; line-height:21px; margin-top:20px; width:100%; text-align:center; } .desc2{ float:left; color:#000; font-size:18px; line-height:26px; font-family: 'Montserrat', sans-serif; margin-top:37px; width:100%; } .ap1-selm-f{ float:left;width:100%; margin-top:60px; text-align:center; } .sh-son-nav-f{ border-top:1px solid #CDCDCD; padding-top:20px; } .sh-son-nav-s{ font-size:16px; margin-left:40px; } .sh-son-nav-s:hover{ color:#FFA800; } .selnavc{ color:#009B29; } .sh-son-nav-s:first-child{ margin-left:0px; } .ap1-btn{ font-size:18px; position:relative; cursor:pointer; } .ap1-btn:before { content: "\e903"; font-family: 'icomoon_9'; color: #FF8022; font-size: 16px; position: absolute; right: -30px; top: 4px; transform: rotate(90deg); } @keyframes kuod { 0% {transform: scale(1);opacity: 1;} 100% {transform: scale(2); opacity: 0;} } @keyframes suof { 0% {transform: scale(1)} 50% {transform: scale(1.3)} 100% {transform: scale(1)} } .blankbtn{ background:rgba(0,0,0,.4); border-radius:34px; cursor:pointer; } .b1s-btn{ float:left; width:275px; height:62px; border:2px solid #D7D8DA; padding:0px 20px; font-size:16px; line-height:62px; position:relative; color:#222; transition: all 0.3s ease .6s; } .kbt-l{ position:absolute; left:-2px; top:0px; width:2px; height:0px; background:#FF8022; transition: all 0.3s ease 0s; } .kbt-b{ position:absolute; left:-2px; bottom:-2px; width:0px; height:2px; background:#FF8022; transition: all 0.3s ease .3s; } .kbt-r{ position:absolute; right:-2px; bottom:0px; width:2px; height:0px; background:#FF8022; transition: all 0.3s ease 0s; } .kbt-t{ position:absolute; right:-2px; top:-2px; width:0px; height:2px; background:#FF8022; transition: all 0.3s ease .3s; } .b1s-btn:hover .kbt-l{ height:100%; } .b1s-btn:hover .kbt-b{ width:calc(100% + 2px); } .b1s-btn:hover .kbt-r{ height:100%; } .b1s-btn:hover .kbt-t{ width:calc(100% + 2px); } .b1s-btn:hover{ background:#FF8022; color:#fff; } .b1s-btn:hover:before{ color:#fff; } .b1s-btn:before { content: "\e903"; font-family: 'icomoon_9'; line-height: 62px; text-align: center; color: #FF8022; font-size: 20px; position: absolute; right: 20px; top: 0px; transition: all 0.3s ease .6s; } .blankbtn:hover .blankbtn-in{ transform: scale(0.9); } .blankxcet{ position: absolute; left: 50%; transform: translateX(-50%); } .tex{ position:absolute; width:100%; height:100%; border-radius: 50%; background: rgba(255,255,255,0.3); animation: kuod 2s infinite ease-in-out; } .tex2{ position:absolute; width:100%; height:100%; left:0px; top:0px; border-radius: 50%; background: rgba(255,255,255,0.3); animation: kuod2 2s infinite ease-in-out; animation-delay: .5s; } .blankbtn-in{ float:left; margin:7px; background:#000; padding:0px 40px; height:54px; color:#ED8037; font-size:16px; line-height:54px; border-radius:27.5px; } a{ text-decoration: none; } input,textarea:focus { outline: none; } picture{ width:100%; display:block; } .nim{ float:left;width:100%; } .b2img{ float:left;width:100%; } .b2img2{ float:left;width:100%; height:100%; } .se1-cet { float: left; width: 960px; margin-left: calc(50% - 480px); } .main-f{ width:100%; padding-bottom:115px; } .mt-95{ margin-top:95px; } .yellowbtn{ width: 260px; float: left; background: #F6C600; height: 52px; border-radius: 26px; margin-left:calc(50% - 130px); color: #fff; font-weight: 600; font-size: 15px; line-height: 52px; text-align: center; transition: all 0.2s ease 0s; cursor: pointer; } .yellowbtn-sinbtn-ico { position: relative; padding-top: 3px; } .yellowbtn-sinbtn-ico:before { content: "\ea3c"; position: absolute; width: 25px; height: 25px; top: 0px; left: 0px; background: #fff; border-radius: 50%; font-size: 14px; color: #F6C600; font-family: icomoon3; text-align: center; line-height: 25px; } .plistcet{ margin-top: 85px; } .p-ritxt{ float:none; width:auto; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-dots{ display:none; } .slick-prev, .slick-next { position: absolute; display: block; width: 50px; line-height: 80px; font-size: 60px; cursor: pointer; opacity: 0.8; top: calc(50% - 40px); padding: 0; border: none; outline: none; z-index: 89; text-indent: 900px; overflow: hidden; color: #fff; transition: all 0.6s ease 0s; background-color:rgba(0,0,0,0); } .slick-next { right: 30px; } .slick-prev { left: 30px; } .slick-prev:before { content: "\e625"; float: left; } .slick-next:before { float: right; content: "\e628"; } .slick-prev:before, .slick-next:before { text-indent: 0; font-family: "icomoon"; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: 0; font-family: "icomoon"; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; } .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-initialized .slick-slide { display: block; } .slick-slide { float: left; min-height: 1px; display: none; } .slick-track { position: relative; left: 0; top: 0; display: block; } .b-d-content strong,.b-d-content b,[csstype="bk"],[csstype="underline"],[csstype="unline-short"]{ font-family: 'Roboto', serif, sans-serif; } .mobile-header{ display:none; } .header-f { position: fixed; width: 100%; top: 0px; left: 0px; z-index: 99; transition: all 0.6s ease 0s; } .head-top-f { float: left; width: 100%; color: #808080; border-bottom: 2px solid #F3F3F3; overflow: hidden; height:72px; transition: all 0.6s ease 0s; } .cet { width: 1200px; margin:0px auto; } .cet_1660{ width: 1660px; margin:0px auto; } .float_cet { float:left; width: 1660px; margin-left:calc(50% - 830px); } .cet2{ float: left; width: 1400px; margin-left: calc(50% - 700px); } .cet3{ float: left; width: 1300px; margin-left: calc(50% - 650px); } .hdtp-cet{ padding-bottom:20px; } .pc-hd-top{ color:#fff; overflow:hidden; height:50px; position:relative; transition: all 0.6s ease 0s; } .pc-hd-top:before{ content:""; position:absolute; width:100%; height:2px; left:0px; bottom:0px; background:rgba(255,255,255,.3); } .pc-hd-t-l-b{ float:left; font-size:14px; color:#fff; position:relative; margin-top:12px; margin-left:20px; } .pc-hd-t-l-b:before { content: '\e901'; position: absolute; font-size: 12px; color: #fff; width: 12px; height: 8px; left: -20px; top: 3px; font-family: icomoon_35; } .pc-hd-t-right{ float:right; margin-top:11px; } .top-share-f{ float:left; } .topshare { float: left; width: 22px; height: 22px; margin-left: 10px; background:#fff; border-radius: 50%; position:relative; } .topshare:first-child{ margin-left: 0px; } .topshare:before { width: 22px; font-family: icomoon; text-align: center; line-height: 22px; color: #889BC8; font-size: 12px; position:absolute; transition: all 0.6s ease 0s; } .ffacebook:before { content: '\e62c'; } .ftwitter:before { content: '\e62b'; } .flinkedin:before { content: '\e630'; } .fyoutobe:before { content: '\e634'; } .youtobe:before { content: '\e634'; } .google:before { content:'\e62d'; } .bluebtn{ padding-left: 50px; padding-right: 50px; height: 60px; background: #2C00E9; border-radius: 30px; line-height: 60px; text-align: center; color: #fff; font-size: 15px; } .ht-l-f { float: left; line-height: 72px; padding-left: 28px; position: relative; color: #808080; } .ht-l-f:hover{ color: #2C00E9; } .ht-l-f:hover:before{ color: #2C00E9; } .ht-l-f:before { content: '\e901'; position: absolute; left: 0px; top: 0px; font-family: icomoon_35; color: #A3A3A3; transition: all 0.6s ease 0s; } .ht-r-f { float: right; height:100%; } .h-s-form { float: left; margin-left:30px; } .h-searchbtn { float: left; width: 30px; height: 30px; position: relative; } .h-searchbtn:before { position: absolute; left: 0px; top: 0px; content: '\e900'; width: 100%; height: 100%; font-family: icomoon_seh; color: #1A1A1A; font-size: 20px; line-height: 30px; text-align: center; } #int1111 { float: left; width: 180px; border: none; height: 30px; margin-left:10px; background:none; color:#fff; font-style:italic; font-size:14px; } #int1111::-webkit-input-placeholder{ font-size:14px; color:#fff; } #int1111.change::placeholder { opacity: 0.5; } #int1111:-moz-placeholder{ font-size:14px; color:#fff; } .search-btn { float: left; width: 30px; height: 30px; position:relative; border:none; background:none; } .search-btn:before { content: '\e900'; position:absolute; width: 30px; height: 30px; font-family: icomoon_seh; color: #fff; font-size: 20px; text-align:center; line-height:30px; transition: all 0.6s ease 0s; } .ft-share { float: left; margin-top: 27px; margin-left:35px; } .fshare { float: left; width: 20px; height: 20px; margin-left: 10px; border-radius: 50%; background: #FFA800; position: relative; } .snv-cet{ padding-top:80px; } .fshare:before { position: absolute; width: 100%; line-height: 20px; text-align: center; font-family: icomoon; color: #fff; font-size: 12px; transition: all 0.6s ease 0s; } .fshare:hover{ background: #00bd33; } h1,h2,h3{ padding:0px; margin:0px; font-weight:normal; } .tblue{ color:#2C00E9; } .facebook:before { content: '\e62c'; } .twitter:before { content: '\e62b'; } .fyoutube:before { content: '\e634'; } .linkedin:before { content: '\e630'; } .fgoogle:before { content: '\e62d'; } .LangUrlArrf { float: left; position: relative; margin-left:30px; } .langurlarrBtin { float:left; font-size: 14px; padding: 8px; padding-left: 45px; padding-right: 20px; position: relative; cursor: pointer; color: #fff; padding-top:2px; } .langurlarrBtin:before { content: ''; position: absolute; left: 0px; top: 0px; background-image: url(/templates/Web/en/images/En.jpg); background-repeat: no-repeat; width: 38px; height: 25px; } .langurlarrBtin:after{ content: '\e900'; position: absolute; right: -2px; top: 4px; color: #fff; font-size: 16px; font-family: icomoon3; } .header-bottom-f { float: left; width: 100%; } .left-cet{ float: left; width: calc(100% - 80px); margin-left: 80px; } .logo-f { width:225px; margin-top:28px; } .m1 { width: 100%; } .h-b-right { position:relative; width:calc(100% - 225px - 230px); } .nav-right-f{ float:right; margin-top:34px; } .nav-ano-f-2{ position: absolute; top: 120px; left: 0px; min-width: 100%; z-index: 100; background-color: #fff; border-radius:15px; opacity: 0; box-shadow: 0 3px 6px rgb(0 0 0 / 5%); visibility: hidden; transition: all 0.3s ease 0s; overflow: hidden; } .nav-ano-2-cet{ float: left; margin: 75px 5%; margin-top: -20px; width: 90%; } .nav-as2-ofs { float: left; margin-left: -5%; width: 105%; } .nav-ano-s-2{ float:left; margin-left:5%; width:20%; margin-top:95px; } .nav-as2-txt{ float:left; width:100%; font-size:24px; color:#00bd33; text-align:center; margin-top:30px; transition: all 0.3s ease 0s; } .nav-as3-ofs{ float:left; margin-left:-8%; width:108%; margin-top:10px; } .nav-ano-s-3{ float:left; margin-left:8%; width:42%; } .nav-anos3-t{ float:left; width:100%; margin-top:10px; font-size:18px; color:#222; text-align:center; } .nav-f { float: left; margin-left:-20px; } .nav-s-1 { float: left; position:relative; } .nav-s-1-a { float: left; padding-left: 22px; padding-right: 22px; font-size: 16px; position: relative; color:#fff; } .nav-nop{ position:static; } .nav-s-1:hover .nav-s-1-a:after { width: calc(100% - 40px); } .nav-s-1-a span{ position:relative; } .nav-s1adown span{ padding-right:20px; } .nav-s1adown span:after { content: '\e900'; position: absolute; right: 0px; top: 2px; color: #fff; font-size: 16px; font-family: icomoon3; line-height:20px; transition: all 0.3s ease 0s; } .nav-s1adown .downnavsp:after { color: #222; } .selgra span:after { color: #00BD33!important; } .selectnav:before { content: ''; position: absolute; left: 22px; bottom: 0px; width: 0px; height: 2px; width: calc(100% - 44px); background: #9F2D29; } .selectnav-fa .nav-s1adown:before{ width: calc(100% - 64px); } .selectnav-s2:before { background: #0B1937; } .nav-s-1 .nav-s-1-a:hover{ color:#9F2D29!important; } .nav-s-1 .nav-s-1-a span:hover:before{ width: 100%; } .nav-s-1 .nav-s1adown span:hover:after{ color:#9F2D29; } .nav-s-1:hover .nav-f-2 { display: block!important; top: 35px; opacity: 1; visibility: visible; } .navs1-sp{ line-height:35px; } .nav-s-1:hover .nav-ano-f-2 { display: block!important; top: 80px; opacity: 1; visibility: visible; } .nav-f-2 { position: absolute; top: 70px; left: 22px; min-width: 100%; z-index: 1; background-color: #fff; padding: 10px 20px; transition: all 0.3s ease 0s; opacity: 0; box-shadow: 0 3px 6px rgb(0 0 0 / 5%); overflow:hidden; visibility:hidden; } .nav-f2-c1{ padding-bottom:10px; border-bottom:1px solid #CDCDCD; margin-bottom:5px; } .nav-f-2-cet { float: left; padding: 30px 7%; padding-top:10px; width: 100%; } .nav-ano-s-2:hover .img { transform: scale(1.2); } .nav-ano-s-2:hover .nav-as2-txt{ color:#222; } .nav-as2-pic{ float: left; width: 100%; border-radius:50%; overflow:hidden; border:1px solid #EDEDED; } .nav-s-2 { float: left; width: 100%; position: relative; } .pcsonff{ display:flex; padding:10px 5px; } .pcsonf-son:last-child{ padding-left:20px; } .cpson2t{ margin-top:20px; } .cpson2t:first-child{ margin-top:0px; } .pcsonf-son:first-child{ padding-right:35px; border-right:1px solid #d2d2d2; } .cpson2t-t{ color:#0B1937; font-size:14px; white-space:nowrap; } .cpson2t-t:hover{ color:#9F2D29; } .cpson3t-t:hover{ color:#9F2D29; } .cpson3t-t{ color:#565656; display:block; font-size:14px; white-space:nowrap; } .nav-s-2-a { float: left; padding: 5px 0px; color: #222; font-size: 16px; position: relative; white-space: nowrap; } .nav-s-2:hover .nav-s-2-a{ color: #9F2D29; } .nav-f-3{ position: absolute; top: 0px; left: 100%; border-left: 1px solid rgb(226, 226, 226); box-shadow: 5px 4px 7px rgba(0,0,0,0.1); background-color: rgba(255,255,255,0.9); min-width: 100%; z-index: 100; display:none; } .nav-s-2:hover .nav-f-3{ display:block; } .nav-s-3{ float:left; width:100%; } .nav-s-3:hover .nav-s-3-a{ color: #FF8022; } .nav-s-3-a{ float:left; width:calc(100% - 0px); padding:10px 20px 10px 20px; color: #222; font-size: 16px; } .headersearchf { float: left; width: 290px; } .h-r-r{ width:230px; margin-top:18px; } .h-r-r-lm{ float:left; font-size:16px; line-height:50px; } .h-r-r-lm:hover{ color:#009E00; } .h-r-btn-f{ float:right; width:200px; height:54px; background:#9F2D29; line-height:54px; border:none; text-align:center; border-radius:27px; cursor:pointer; color:#fff; } .nav-conus-btn{ font-size:14px; } .hogrbtn:focus{ box-shadow: 0 0 0 0.25rem rgba(0,158,0,0.5); } .h-r-btn-f:hover{ color:#fff; transform: translateY(-.15rem); box-shadow: 0 0.25rem 0.75rem rgba(30,34,40,.25); } .inb-con-spread { position: absolute; width: 100%; height: 100%; border-radius:27.5px; background: rgba(44,0,233,0.3); animation: none; left: 0px; top: 0px; z-index: -1; } .h-r-btn-f:hover .inb-con-spread { animation: kuod 1100ms infinite; } .limove{ background:rgba(255,255,255,.6); width:30px; height:calc(100% + 100px); left:-60px; top:-50px; transform: rotate(-30deg); position:absolute; } .limove:before{ content:""; background:rgba(255,255,255,.2); width:20px; height:calc(100% + 100px); left:-30px; top:-50px; position:absolute; } @keyframes limove { 0% {left:-60px;} 100% {left:calc(100% + 90px);} } @keyframes kuod { 0% {transform: scale(1);opacity: 0;} 50% {transform: scale(1.5);opacity: 1;} 100% {transform: scale(2); opacity: 0;} } @keyframes kuod2 { 0% {transform: scale(1);opacity: 0;} 50% {transform: scale(1.5);opacity: 1;} 100% {transform: scale(2); opacity: 0;} } .ft-blk{ position:absolute; width:1340px; left:calc(50% - 670px); background:#000; z-index:0; top:-140px; border-radius:122.5px; } .ft-blk-in{ float:left; margin:90px 10%; width:80%; } .ftbl-t{ float:left; width:calc(95% - 180px); font-size:40px; color:#fff; } .ftbl-btn{ float:left; margin-left:5%; width:180px; background:#00bd33; height:65px; text-align:center; color:#fff; font-size:16px; line-height:65px; border-radius:32.5px; cursor:pointer; transition: all 0.3s ease 0s; } .ftbl-btn:hover{ background:#00ff33; } .foot { width: 100%; } .ft-m1{ padding:70px 0px; background-repeat: no-repeat; background-image: url(/uploads/202302/hyt_1675221777_WNo_1920d317.jpg); background-position: 50% 0%; color:#fff; background-size:2100px 347px; } .ftm1-t1{ text-align:center; font-size:40px; } .ftm1-t2{ font-size:16px; text-align:center; margin-top:30px; } .ft-logo-f{ display:flex; justify-content:center; align-items:center; } .ft-logo{ width:120px; } .ftm1-btnf{ margin-top:25px; display: flex; justify-content: center; align-items: center; } .ft-m2{ background:#0B1937; padding-bottom:40px; } .ftb-cet{ overflow:hidden; } .foot-b-t2{ float:left; } .ftb-r{ float:right; } .ftm1-btnf .h-r-btn-f{ float:none; } .ftc-cet{ float:left; margin:50px 12%; width:76%; } .foot-cov-t{ float:left; color:#fff; width:calc(95% - 75px); font-size:36px; margin-top:15px; } .foot-cov-arw{ float:left; width:75px; height:75px; margin-left:5%; border-radius:50%; background:#008080; position:relative; } .foot-cov-arw:hover:before{ left:10px; } .foot-cov-arw:before{ content: "\e903"; font-family: 'icomoon_9'; line-height:75px; text-align:center; width:100%; color:#fff; font-size:30px; position:absolute; left:0px; top:0px; transition: all 0.6s ease 0s; } .footcet { padding-top:70px; color:#fff; } .ft-b1,.ft-b2,.ft-b3{ padding-right:10%; } .ft-b4{ overflow:hidden; } .ft-b4 .ban-fi-btn{ float:right; margin-top:60px; } .fb4-shf{ float:right; margin-top:25px; } .ft-tit{ font-size:16px; } .ft-txt{ margin-top:40px; font-size:14px; } .f-topb{ margin-top:55px; border-bottom: 1px solid #FFC642; padding-bottom:35px; } .ft-b2-k1{ padding-right:10%; } .ft-m-t{ font-size:16px; } .ft-m-t2{ font-size:16px; margin-top:45px; } .ft-logo{ width:100px; vertical-align: middle; display: inline-block; } .foot-h-t1{ width:100%; color:#fff; font-size:48px; margin-top:25px; } .foot-h-t2{ width:100%; color:#fff; } .footh-btn{ width: auto; background: #009E00; border: none; padding: 15px 30px; border-radius: 10px; margin-top: 35px; cursor:pointer; } .footh-btn:hover{ background: #222; } .fb1-e{ width:100%; display:block; padding-left:30px; position:relative; font-size:19px; color:#9F2D29; margin-top:15px; } .fb1-e:hover{ color:#222; } .ft-m{ margin-top:80px; } .ft-b2-k2{ margin-top: 40px; } .fb1-e:before{ content: "\e901"; font-family: icomoon_35; position: absolute; top: 3px; left: 0px; color:#9F2D29; font-size:16px; } .fb1-ad{ width:100%; font-size:14px; margin-top:20px; } .ftk2-nav-f{ margin-top: 45px; } .f-top-share{ float:left; width:172px; margin-left:calc(50% - 86px); } .fb2-tit{ float:left;width:100%; color:#fff; font-size:24px; } .ft-bl{ float:left; width:50%; padding-right:5%; } .ft-br{ float:right; padding-right:0%; margin-top:10px; } .ft-sin2{ display:block; padding-left:40px; color:#fff; font-size:16px; position:relative; transition: all 0.2s ease 0s; } .ft-sin2:hover{ color:#222; } .ft-sin2:hover:before{ color:#222; } .ft-sin2:before{ content: "\e900"; font-family: 'icomoon_9'; color: #FFA800; font-size: 12px; text-align:center; line-height:20px; position: absolute; width:20px; height:20px; border-radius:50%; background:#fff; left: 0px; top: 2px; } .ft-sin{ display:block; color:#fff; font-size:14px; margin-top:10px; } .ft-sin:first-child{ margin-top:0px; } .ft-sin:hover{ color:#9F2D29; } .ft-sin:hover:before{ color:#222; } .f-box1{ float:left; width:33.3%; padding-right:5%; } .f-box2{ float:left; width:27%; padding-right:5%; } .f-box3{ float:left; width:27%; } .f-box4{ float:left; width:15%; } .fb1-t1{ float:left; width:100%; font-size:18px; color:#ED8037; font-weight:700; background:#000; } .fb1-t2{ float:left; width:100%; font-size:14px; margin-top:40px; line-height:30px; } .fb1-em{ float: left; padding-left: 30px; padding-right: 30px; height: 40px; background: #2C00E9; border-radius: 20px; line-height: 40px; text-align: center; color: #fff; font-size: 12px; margin-top: 40px; transition: all 0.6s ease 0s; position:relative; overflow:hidden; } .fb1-em:hover{ background: #F6C600; } .fb1-em:hover .limove{ animation: limove 1100ms infinite; } .fb2-main{ float:left; width:100%; margin-top:30px; } .fb2-i1{ float:left; width:50%; } .fb2-i2{ float:left; width:50%; } .ft-nav-l2{ float:left; width:100%; font-size:16px; margin-top:15px; color:#fff; padding-left:30px; position:relative; padding-right:5%; } .ft-nav-l2:hover{ color:#ED8037; } .ft-nav-l2:hover:before{ color:#ED8037; } .ft-nav-l2:before{ content: "\e900"; font-family: 'icomoon_9'; color: #fff; font-size: 16px; position: absolute; left: 0px; top: 1px; } } .ft-nav-l2:hover{ color:#2C00E9; } .fb4-mid{ float:right; width:140px; } .f-b3-share{ float:left; width:calc(100% + 10px); margin-left: -10px; margin-top:30px; } .fb3-sh { float: left; width: 30px; height: 30px; border:1px solid #fff; position: relative; margin-left: 10px; transition: all 0.2s ease 0s; border-radius:50%; } .fb3-sh:first-child{ margin-left: 0px; } .fb3-sh:before { position: absolute; top:0px; left:0px; width: 100%; line-height: 30px; text-align: center; font-family: icomoon; color: #fff; font-size: 14px; transition: all 0.2s ease 0s; } .f-box4{ float:left; width:33.3%; margin-top:50px; } .f-st3-adr{ float:left; width:100%; padding-left:35px; font-size:16px; color:#fff; position:relative; } .f-st3-adr:before{ content: "\e902"; font-family: 'icomoon_9'; color: #ED8037; font-size: 24px; position: absolute; left: 0px; top: 0px; } .f-st3-em{ float:left; width:100%; padding-left:35px; font-size:16px; color:#fff; position:relative; margin-top:21px; } .f-st3-em:before{ content: "\e901"; font-family: icomoon_35; color: #ED8037; font-size: 16px; position: absolute; left: 0px; top: 2px; } .fb3-sh:hover{ transform: translateY(-.15rem); box-shadow: 0 0.25rem 0.75rem rgba(30,34,40,.25); } .foot-bottom{ margin-top:105px; padding-top:40px; border-top:1px solid #22304C; font-size:14px; color:#fff; } .foot-bottom a{ color:#fff; } .foot-b-mid{ float: left; width: 100%; margin-top: 25px; margin-bottom: 25px; font-size: 18px; } .foot-b-t1{ float: left; width:23%; padding-right:3%; } .foot-b-t2{ text-align:right; } .foot-b-t3{ float:left; width:33%; text-align:right; } .ft-b-t4{ color:#9F2D29!important; } .foot-b-up { width: 55px; height: 55px; background: #9F2D29; border-radius: 50%; cursor: pointer; z-index: 99; position: fixed; right: 10px; top: -80px; transition: all 1.2s ease 0s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px; } .foot-b-up:before { content: "\e901"; font-family: 'icomoon_9'; top: 0px; line-height:55px; color: #fff; width:100%; height:100%; text-align:center; font-size: 22px; position: absolute; } .mobile-header{ position: fixed; left:0px; width:100%; display:none; z-index:1000; transition: all 0.6s ease 0s; height:75px; } .mobile-tool{ float:left; width:100%; } .mobile-tool-center{ float:left; width:94%; margin-left:3%; height:100%; } .mobile-logo-f{ float:left; white-space: nowrap; width: 170px; margin-top:8px; } .mobile-logo-f:before{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mob-logo-img{ float: left; display: inline-block; vertical-align: middle; width: 100%; margin-top:10px; } .mobile-menu{ cursor: pointer; float: right; width:30px; text-align:center; } .mobile-menu:before{ content: '\f0c9'; display: block; font-family: icomoon5; font-size: 30px; color: #11358f; line-height: 75px; float: left; } .mob-me-ge:before{ color: #00bd33; } .mob-contact-btn{ cursor: pointer; float: right; width:30px; margin-right:20px; text-align:center; } .mob-contact-btn:before{ content: '\e900'; display: block; font-family: icomoon5; font-size: 25px; color: #11358f; line-height: 75px; float: left; } .mob-ct-ge:before{ color: #00bd33; } .mob-search-btn{ cursor: pointer; float: right; width:30px; margin-right:20px; text-align:center; } .mob-search-btn:before{ content: '\e900'; font-family: icomoon_seh; display: block; font-size: 25px; color: #11358f; line-height: 75px; float: left; } .mob-se-ge:before{ color: #009E00; } .mobile-menu-close{ cursor: pointer; float: right; width:30px; text-align:center; } .mobile-menu-close:before{ content: '\e60b'; display: block; font-family: icomoon; font-size: 30px; color: #11358f; line-height: 75px; float: left; } .mobile-sellang-f{ float:right; margin-top:24px; margin-right:25px; } .mobile-dowshow{ float:left; width:100%; margin-top:20px; background: #f5f5f5; opacity: 0; visibility: hidden; transition: all 0.6s ease 0s; overflow:hidden; padding-bottom:20px; box-shadow: rgba(0, 0, 0, .05) 0 5px 5px; } .mob-nav1{ float:left; width:100%; } .mob-nav-s1{ float:left; width:100%; position:relative; } .mob-col-name1{ float:left; width:100%; position:relative; } .mob-col-name1:before{ content:''; position:absolute; bottom:0px; left:0px; width:0; height:1px; background:#; transition: all 0.6s ease 0s; } .mob-col-name1:hover:before{ width:100%; } .mob-col-name1-line{ float:left; width:100%; position:relative; } .mob-col-name1-line:before{ content:''; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#; } .mob-col-name2{ float:left; width:100%; } .mob-col-name2-line{ float:left; width:100%; position:relative; } .mob-col-name2-line:before{ content:''; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#; } .mob-col-name2:hover .mob-nav-a2{ color:#; } .mob-col-name2:hover .mob-nav-btn2:before{ border-top-color: #; } .mob-nav-a1{ float:left; margin-left:3%; font-size:14px; padding-top:13px; padding-bottom:10px; color:#222; } .mob-nav-btn{ float:left; margin-left:10px; width: 30px; height: 30px; position:relative; margin-top:7px; cursor:pointer; } .mob-nav-btnup{ float:left; margin-left:10px; width: 30px; height: 30px; margin-top:7px; cursor:pointer; position:relative; } .mob-nav-btnup:before{ content:''; position:absolute; left: 11px; top: 12px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #1A1919; } .mob-nav-btn-close{ display:none; } .mob-nav-btn:before{ content:''; position:absolute; width: 0; height: 0; overflow: hidden; border: 5px solid transparent; border-top-color: #1A1919; left: 11px; top: 12px; } .mob-nav-btn2{ float:left; margin-left:10px; width: 30px; height: 30px; position:relative; margin-top:3px; cursor:pointer; } .mob-nav-bt2nup{ float:left; margin-left:10px; width: 30px; height: 30px; margin-top:2px; cursor:pointer; position:relative; } .mob-nav-bt2nup:before{ content:''; position:absolute; left: 11px; top: 12px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #707071; } .mob-nav-btn2:before{ content:''; position:absolute; width: 0; height: 0; overflow: hidden; border: 5px solid transparent; border-top-color: #707071; left: 11px; top: 12px; } .mob-nav2{ float:left; width:100%; display:none; } .mob-nav-s2{ float:left; width:100%; } .mob-nav-a2{ float:left; margin-left:6%; font-size:14px; padding-top:10px; padding-bottom:10px; transition: all 0s ease 0s; color:#1A1919; } .mob-nav3{ float:left; width:100%; display:none; } .mob-nav-s3{ float:left; width:100%; } .mob-nav-a3{ float:left; margin-left:9%; width:88%; color:#707071; font-size:14px; padding-top:10px; padding-bottom:10px; transition: all 0s ease 0s; } .mob-nav-a3:hover{ color:#; } .mob-search{ position:absolute; width:350px; left:calc(50% - 175px); top:50%; transform:translate(0,-50%); } .mob-sr-close{ position: absolute; right: 50px; top: 50px; width: 50px; height: 50px; cursor: pointer; } .mob-sr-close:before{ content: '\e60b'; font-family: icomoon; width: 100%; text-align: center; font-size: 30px; color: #fff; line-height: 50px; } .mob-srh-form{ float:left; width: 100%; } .mob-srh-in { float: left; width:calc(100% - 70px); border: none; height: 55px; border-radius: 27.5px; background:#fff; padding-left: 20px; font-size: 14px; } .mob-srh-in:hover{ border: 1px solid #; } .mob-search-cover{ position:fixed; right:0px; width:100%; height:100%; background:#11358f; z-index:1001; overflow:hidden; opacity: 0; visibility: hidden; transition: all 0.8s ease 0s; } .mob-con-cover{ position:fixed; right:0px; width:100%; height:100%; background:#11358f; z-index:1001; overflow:hidden; opacity: 0; visibility: hidden; transition: all 0.8s ease 0s; } .mob-contact-det-f{ float:right; width:320px; height:100%; background:#fff; margin-right:-320px; transition: all 0.8s ease 0s; } .mob-con-d{ float:left; margin:30px 25px; width:calc(100% - 50px); position:relative; } .mob-con-d-close{ position:absolute; right:0px; top:0px; width:30px; height:30px; cursor:pointer; } .mob-con-d-close:before{ content: '\e60b'; font-family: icomoon; width:100%; text-align:center; font-size: 22px; color: #333; line-height: 30px; } .con-s-sin{ float:left;width:100%; margin-top:35px; } .con-s-sin:first-child{ margin-top:0px; } .cons-s-img{ float:left; width:30px; margin-top:10px; } .cons-s-t{ float:left; margin-left:8%; width:calc(92% - 30px); } .cons-t-t1{ float:left;width:100%; color:#000000; font-size:18px; font-weight:600; } .cb1-t1{ font-size:46px; } .cu-email:before{ content: "\e901"; } .cu-tel:before{ font-family: icomoon!important; content: '\e603'; } .cu-addr:before{ font-family: icomoon_9!important; content: "\e902"; font-size:38px; } .cb1-t2{ font-size:21px; margin-top:15px; } .cons-t-t2{ float:left;width:100%; color:#333333; font-size:18px; margin-top:10px; } .con-s-l-2{ float:left;width:100%; padding-top:35px; } .srh-btn { float:left; width: 55px; height: 55px; margin-top: 0px; margin-left: 15px; border: none; cursor: pointer; border-radius:50%; background:#fff; position:relative; } .srh-btn span{ position:absolute; width:100%; height:100%; top:0px; left:0px; } .srh-btn span:before{ position: absolute; left: 0px; top: 0px; content: '\e900'; width: 100%; height: 100%; font-family: icomoon_seh; color: #11358f; font-size: 20px; line-height: 55px; text-align: center; } .mob-share{ float:left; width:100%; margin-top:30px; margin-bottom:30px; } .mob-share-center{ float:left; width:204px; margin-left:calc(50% - 102px); } .langurlarrself{ display:none; } .sel-n-mob-btn-close { float: left; width: calc(100% - 2px); height: 35px; border: 1px solid #E0E0E0; border-radius: 5px; cursor: pointer; } .sel-n-mob-btn-close .sel-n-mob-btn-sline:before { content: '\e60b'; font-family: icomoon; font-size: 20px; color: #222; line-height: 35px; } ol, ul{ padding-left:0; } .sel-n-mob-btn { height: 35px; cursor: pointer; display: none; } .sel-n-mob-btn-left { float: left; } .sel-n-mob-btn-sline { width: 44px; float: left; text-align: center; } .sel-n-mob-btn .sel-n-mob-btn-sline:before { content: '\e637'; font-family: icomoon; font-size: 20px; color: #222; line-height: 35px; } .sel-n-mob-btn-right { float: left; margin-left: 25px; } .sel-n-mob-btn-menu { float: left; color: #222; font-size: 13px; line-height: 35px; position: relative; } .sel-n-mob-btn-menu:before { content: ''; position: absolute; width: 0; height: 0; overflow: hidden; border: 5px solid transparent; border-top-color: #222; left: -30px; top: 15px; } .mobep{ display:none; } @keyframes updown { 0% {top: calc(50% - 9.5px)} 30% {top: calc(50% - 20px)} 100% {top: calc(50% - 9.5px)} } @media screen and (min-width: 1930px){ .ft-m1 { background-size: cover; } } @media screen and (max-width:1710px) { .cet_1660 { width: 94%; } .float_cet { width: 94%; margin-left: 3%; } } @media screen and (max-width:1490px) { .selectnav-fa .nav-s1adown:before { width: calc(100% - 50px); } .selectnav:before{ left:15px; width: calc(100% - 30px); } .nav-s-1-a { padding-left: 15px; padding-right: 15px; } .h-r-r { width: 200px; } .h-b-right { width: calc(100% - 180px - 200px); } .dhtopbtn { width: 175px; } .logo-f { width: 180px; margin-top: 40px; } } @media screen and (max-width:1360px) { .cet{ width:94%; margin-left:3%; } } @media screen and (max-width:1420px) { .cet2 { width: 94%; margin-left: 3%; } } @media screen and (max-width:1300px) { .selectnav-fa .nav-s1adown:before { width: calc(100% - 40px); } .selectnav:before{ left:10px; } .nav-s-1-a { padding-left: 10px; padding-right: 10px; font-size: 14px; } } @media screen and (max-width:1320px) { .cet3 { width: 94%; margin-left: 3%; } } @media screen and (max-width:1050px) { #id-jump-send-cover .feng{ display:none; } #id-jump-send-cover .con-s-l-1 { border-bottom: 1px solid #BBBBB8; padding-bottom: 20px; } #id-jump-send-cover .cons-s-t { margin-top:10px; margin-left: 0%; } #id-jump-send-cover .cons-t-t2 { float:none!important; width: auto!important; margin-top: 0px!important; display:inline!important; } #id-jump-send-cover .cons-t-t1 { float:none!important; width: auto!important; display:inline!important; } #id-jump-send-cover .cons-s-img{ display:none!important; } #id-jump-send-cover .con-s-sin { float: none!important; width: auto!important; margin-top: 0px!important; display:inline; } #id-jump-send-cover .con-s-l-2{ display:none!important; } #id-jump-send-cover .sned-m-cet { margin: 30px 5%!important; width: 90%!important; } #id-jump-send-cover .con-s-cet { margin: 30px 5%!important; width: 90%!important; margin-bottom:0px!important; } #id-jump-send-cover .send-m-f { width: 100%!important; margin-top:0px; } #id-jump-send-cover .con-s-l { width: 100%!important; } } @media screen and (max-width:1250px) { .ftb-r { float: left; width:100%; } .foot-b-t2 { width:100%; text-align:left; } .fb3-sh:before { line-height: 25px; font-size: 12px; } .fb3-sh { width: 25px; height: 25px; margin-left: 5px; } } @media screen and (max-width:850px) { .mobep{ display:inline; } .sh-son-nav-s { margin-left: 0px; } .ft-sin2 { padding-left: 30px; } .fb1-e { padding-left: 30px; } .ftk2-nav-f { margin-top: 10px; } .ft-b2-k2,.ft-b2-k3{ margin-top:20px; } .ft-m-t2 { margin-top: 10px; } .ft-b1 { padding-bottom: 30px; } .footh-btn { margin-top: 20px; } .foot-h-t1 { margin-top: 15px; } .se1-cet { width: 94%; margin-left: 3%; } .foot-bottom { margin-top: 20px; padding-bottom: 20px; } .br{ display:none; } .ft-br { float: left; width:50%; margin-top:0px; } .f-topb { margin-top: 25px; padding-bottom: 20px; } .title { line-height: 30px; } .main-f { padding-bottom: 50px; } .br{ display:none; } .foot-b-t3 { width: 100%; text-align: left; margin-top:15px; } .ft-m2 { padding-bottom: 0px; } .ft-logo { width: 70px!important; } .b1s-btn:before { line-height: 40px; font-size: 16px; } .b1s-btn { width: 60%; height: 40px; padding: 0px 10px; line-height: 40px; } .foot-cov-t { margin-top: 0px; width: calc(95% - 40px); } .foot-cov { margin-top: -50.5px; } .foot-cov-arw:before { line-height: 40px; font-size: 20px; } .foot-cov-arw { width: 40px; height: 40px; } .ftc-cet { margin: 30px 10%; width:80%; } .desc,.desc2{ margin-top:10px; } .btbcet{ width:94%!important; margin-left:3%!important; } .footcet { padding-top: 40px; } .foot-b-t2 { text-align: left; line-height:25px; } .foot-b-t1 { width:100%; } .foot-b-mid { width: 100%; margin-left: 0; margin-bottom: 0px; } .fb4-mid { float: left; } .f-box3,.f-box4{ margin-top:30px; } .f-box1,.f-box2,.f-box3,.f-box4 { float:none; width: calc(50% - 5px); display: inline-block; vertical-align: top; position: relative; } .fb2-main { margin-top: 15px; } .fb1-t2 { margin-top: 30px; line-height: 25px; } .foot-b-up:before { text-align:center; line-height:40px; top:0px; animation: none; } .foot-b-up{ float: none; width: 40px; z-index:99; height: 40px; margin-top: 0px; position: fixed; right:10px; top:-50px; transition: all 1.2s ease 0s; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px; } .langurlarrBtin { padding-right: 0px; } .langtxt{ display:none; } .LangUrlArrf { margin-left: 0px; margin-top: 0px; } .mobile-header{ display:block; } .header-f{ display:none; } } @media screen and (max-width:850px) { .ft-b4 { margin-top:30px; } .ft-b4 .ban-fi-btn { float: left; margin-top: 0px; } .fb4-shf { float: right; } .foot-bottom { padding-top: 20px; } .ft-txt { margin-top: 20px; } .ft-m { margin-top: 40px; } .ftm1-t2 { margin-top: 15px; } .ftm1-t2 { margin-top: 15px; } .ft-m1 { padding: 35px 0px; } .ic3-morebtn:before { left: 60px!important; top: 10px!important; } .ic3-morebtn{ width:150px!important; margin-left:calc(50% - 75px)!important; height:50px!important; background:url(/templates/Web/en/images/ic3btn2.png) no-repeat!important; } .blankbtn { border-radius: 25px; } .blankbtn-in { margin: 4px; padding: 0px 20px; height: 42px; line-height: 42px; border-radius: 21px; } .bk-btn-in { margin: 5px!important; width: calc(100% - 10px)!important; height: 40px!important; line-height: 40px!important; border-radius: 20px!important; } .bk-btn { width: 150px!important; height: 50px!important; border-radius: 25px!important; } .mt-95{ margin-top:50px; } #id-jump-send-f .ib4-se-in { width: 100%; height: 30px; border-radius: 5px; } #id-jump-send-f .ib4-se-in-tea { height: 80px; } .br{ display:none; } .fs-230{ font-size:115px!important; } .fs-103{ font-size:50px!important; } .fs-96{ font-size:48px!important; } .fs-85{ font-size:42px!important; } .fs-80{ font-size:40px!important; } .fs-75{ font-size:38px!important; } .fs-72{ font-size:37px!important; } .fs-66{ font-size:37px!important; } .fs-62{ font-size:36px!important; } .fs-60{ font-size:35px!important; } .fs-56{ font-size:30px!important; } .fs-50{ font-size:28px!important; } .fs-48{ font-size:28px!important; } .fs-46{ font-size:28px!important; } .fs-40{ font-size:28px!important; } .fs-38{ font-size:25px!important; } .fs-36{ font-size:18px!important; } .fs-34{ font-size:18px!important; } .fs-30{ font-size:18px!important; } .fs-28{ font-size:17px!important; } .fs-27{ font-size:17px!important; } .fs-26{ font-size:16px!important; } .fs-24{ font-size:16px!important; } .fs-23{ font-size:16px!important; } .fs-22{ font-size:16px!important; } .fs-21{ font-size:15px!important; } .fs-20{ font-size:15px!important; } .fs-18{ font-size:14px!important; } .fs-17{ font-size:14px!important; } .fs-16{ font-size:14px!important; } .fs-15{ font-size:13px!important; } .fs-14{ font-size:12px!important; } } .blog-r{ padding-left:5%; margin-top:30px; } .br-b1{ width:100%; overflow:hidden; } .hot-search-form { position: relative; } .hot-search-in { border: 1px solid #CDCDCD; height: 40px; background: #F8F7F6; padding-left: 45px; border-radius:20px; width:100%; } .hot-search-in::-webkit-input-placeholder{ font-size:14px; color:#222; padding-left:0px; } .hot-search-in::-moz-placeholder{ font-size:14px; color:#222; padding-left:30px; } .blgsearbtn { position: absolute; width: 40px; height: 45px; left: 5px; top: 0px; } .blgsearbtn:before { position: absolute; left: 0px; top: 0px; content: '\e900'; width: 100%; height: 100%; font-family: icomoon_seh; color: #00BC33; font-size: 16px; line-height: 45px; text-align: center; } .hot-search-btn { display: none; } .brb-in{ } .brb1-t1{ padding-left:30px; position:relative; font-size:16px; margin-top:35px; } .brb1-ico{ position:absolute; left:0px; top:0px; color:#00BC33; } .brb1-m{ width:100%; } .hot-sin{ display:block; font-size:14px; color:#222; width:100%; margin-top:25px; border-bottom : 1px solid #CDCDCD; line-height:25px; padding-bottom:15px; } .hot-sin:hover{ color:#00bd33; } .hot-sin:before{ content:""; position:absolute; left:0px; top:5px; background:url(/templates/Web/en/images/hj.png) no-repeat; width:18px; height:18px; background-size:100%; } .hbtbtn{ color:#009E00; position:relative; padding-right:60px; } .hbtbtn-ico{ position:absolute; top:0px; right:0px; color:#009E00; font-size:1.7em; } @media screen and (max-width: 850px){ .brb1-t1 { margin-top: 20px; } .hot-sin { margin-top: 15px; line-height: 20px; padding-bottom: 5px; } .brb1-t1:before { top: -5px; } .blog-r{ padding-top:30px; } } .ps-bann-f{ width: 100%; background-repeat: no-repeat; background-image: url(/uploads/202302/bin-1675236830-WNo-1920d393_1677315655_WNo_1920d393.jpg); height: 393px; background-attachment: fixed; position: relative; background-size:cover; z-index:1; } .ibn-cet{ padding-top:170px; color:#fff; font-size:48px; text-align:center; } .inb-bre{ background:#E4E6EA; padding:30px 0; font-size:16px; font-family: 'Open Sans', sans-serif; } .inb-bre a{ color:#565656; } .inbann-bre-text { position: relative; } .inbann-bre-text:before { content: "\e900"; font-family: 'icomoon_9'; color: #666666; font-size: 16px; position: absolute; right: -30px; top: 0px; } .nojj:before{ display:none; } .company { position: absolute; bottom: 0; /* margin: 0 auto; */ left:50%; transform:translateX(-50%); width: 1100px; height: 80px; background-color: #063395; border-radius: 85px 85px 0 0; } .company_jz { display: flex; width: 880px; margin: 0 auto; } .comptxt img { position: absolute; top: 0px; right: -40px; width: 20px; height: 20px; } .company_jz>.company_right>img { position: absolute; top: 31px; left: 257px; } .company_right, .company_left { position: relative; color: #ffffff !important; text-align: center; line-height: 80px; width: 440px; height: 80px; } .company_right:hover { background-color: #071839; } .company_left:hover { background-color: #071839; } @media screen and (min-width: 1930px){ .bann-f{ height:1609px; overflow:hidden; } } .comptxt{ position:relative; } @media screen and (max-width: 850px){ .dald{ display:none; } .inb-bre { padding: 15px 0; } .company_jz img { right: -30px; } .company_right, .company_left { line-height: 60px; width: 50%; height: 60px; } .company_jz { width: calc(100% - 40px); } .company { left: 3%; transform: translateX(0%); width: 94%; height: 60px; border-radius: 60px 60px 0 0; } }.Equipment_right{ width: 673px ; background-color: #063395; /* border: 1px solid #000; */ } .Equipment_right_con{ width:100%; padding:35px 5%; } .Equipment_right_con>p{ padding-left: 10px ; color: #ffffff !important; font-size: 24px ; font-weight: bold; } .inputs{ margin-top: 20px ; box-sizing: border-box; width:100%; display:flex; } .inputs>input::-webkit-input-placeholder{ color:#fff; } .inputs>input:-moz-placeholder{ font-size:14px; color:#fff; } .asdaasa::-webkit-input-placeholder{ color:#fff; } .asdaasa:-moz-placeholder{ font-size:14px; color:#fff; } .taxt::-webkit-input-placeholder{ color:#fff; } .taxt:-moz-placeholder{ font-size:14px; color:#fff; } .inputs>input{ /* padding-left: 15px ; */ padding-left: 15px ; margin-top: 20px ; border: 1px solid #5370b5; background-color: #063395; border-radius: 8px ; outline: none; /* border: 0 ; */ width: 47% ; height: 50px ; color:#fff; } .inputs>input:last-child{ margin-left:6%; } .asdaasa{ margin: 20px 0 0 0px ; padding-left: 15px ; height: 50px ; width: 100% ; border: 1px solid #5370b5; background-color: #063395; border-radius: 8px ; outline: none; color:#fff; } .taxt{ outline: none; border: 1px solid #5370b5; width: 100% ; height: 100px ; margin: 20px 0 0 0 ; padding: 10px ; background-color: #063395; border-radius: 8px ; color:#fff; } .yunupbtnf{ cursor:pointer; position:relative; } .uploadify-button{ position:absolute; left:0px; top:0px; padding:0!important; margin: 0px!important; border:none!important; color:#063395!important; border-radius: 0!important; width:100%; height:100%; display:block!important; background-color:rgba(255,255,255,0)!important; } .uploadify-button:hover{ color:#063395!important; } .uploadify-progress{ width:100%!important; } .yunduan{ /* margin-top: 40px ; */ padding-top: 45px ; display: flex; align-items: center; width: 181px ; margin: 0 auto; height: 41px ; /* text-align: center; */ color: #ffffff !important; } .yunduan>img{ width: 25px ; height: 25px ; } .Equipment_right_content{ color: #ffffff !important; width: 626px ; height: 50px ; text-align: center; line-height:50px; } .redaniu { position: relative; margin: 32px auto; width: 40%; color: #ffffff !important; border-radius: 20px; height: 40px; line-height: 40px; text-align: center; background-color: #ad1e22; cursor:pointer; margin-bottom:10px; } .btnsndtam{ margin-top:25px; } .redaniu >img { width: 20px; height: 20px; }.jump-send-cover { position: fixed; background: rgba(0,0,0,0.7); width: 100%; height: 100%; z-index: 1000; overflow: hidden; display:none; left:0px; top:0px; } #id-jump-send-f{ width: 673px; margin-left: calc(50% - 336.5px); transition: all 0.6s ease 0s; margin-top: -800px; position:relative; float:left; background: #063395; } .jpsd-l{ padding-right:5%; } .jp-l-tf{ margin-top:25px; } .jpcb2-s{ margin-top:10px; overflow:hidden; } .jpcb2-ico{ float:left; width:30px; height:30px; } .jpcb2-ico:before{ font-family: icomoon_35; font-size: 18px; color: #9c433e; } .jpcb2-s .cu-addr:before { font-size: 24px; } .jpcb2-t{ float:left; width:calc(100% - 30px); font-size:18px; } .jump-send-cet{ margin: 50px 30px; width:90%; } .jump-send-title{ color:#fff; text-align:center; } .jump-send-close{ position:absolute; right:15px; top:15px; width: 35px; height: 35px; cursor: pointer; border-radius:50%; } .jump-send-close:before { content: '\e60b'; width: calc(100% + 1px); position: absolute; left: 0px; top: 0px; font-family: icomoon; font-size: 25px; color: #fff; line-height: 35px; text-align: center; } .jump-send-in{ float: left; border: none; border-bottom: 2px solid #fff; width: 47%; height: 45px; padding-left: 0px; color: #fff; font-size: 16px; outline: none; background: #ED8037; margin-top: 20px; } .jumpsin-2{ margin-left:6%; } .jump-send-textarea-f{ float: left; width: 100%; position: relative; margin-top: 30px; } .jump-send-message-tip{ float:left; width:100%; color: #fff; font-size: 16px; margin-left: 0px; } .jump-send-in::-webkit-input-placeholder{ font-size:16px; color:#fff; } .jump-send-in:-moz-placeholder{ font-size:16px; color:#fff; } .jump-send-textarea{ float: left; border: none; border-bottom: 2px solid #fff; width: 100%; height: 100px; padding-left: 10px; color: #fff; font-size: 16px; outline: none; margin-top: 10px; background: #ED8037; } .jump-send-submit{ width: 100%; float: left; border:none; background: #000; margin-top: 40px; height: 65px; border-radius: 32.5px; color: #ED8037; font-weight: 700; font-size: 18px; line-height: 65px; text-align: center; transition: all 0.2s ease 0s; cursor: pointer; } .jump-bot-tip { float: left; width: 100%; margin-top: 30px; color: #fff; font-size: 12px; } .jump-send-f .ib4-s-cet{ margin-bottom: 70px; } .jump-send-f .ib4-send-f{ background:#fff; border-radius:15px; overflow:hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 10px; } .jump-send-f .ib4-s-cet { padding: 35px 4%; padding-top:15px; margin-bottom:0px; } @media screen and (max-height:750px) { .send-textarea { margin-top: 0px; margin-bottom: 5px; } .sendif { margin-top: 10px; } .se-in-f { margin-top: 0px; } } @media screen and (max-width:850px) { .redaniu { width: 200px; } .inputs { margin-top: 0px; } .Equipment_right{ width:100%; } #id-jump-send-f{ width:94%; margin-left:3%; } .jump-send-cet .ib4-se-in-tea { padding: 10px; } .jump-send-cet .ib4-se-in { padding-left: 10px; } .jump-send-cet { margin: 40px 5%; } .jump-send-close { right: 0px; top: 0px; } .sd-sel{ display:none; } .sd-sel-s { width:100%; } .cb1-t1,.cb1-t2,.jp-l-tf{ display:none; } .jump-send-in::-webkit-input-placeholder{ font-size:14px; } .jump-send-in:-moz-placeholder{ font-size:14px; } } * { margin: 0; padding: 0; /*list-style: none;*/ text-decoration: none; font-family: 'Manrope', sans-serif; font-family: 'Open Sans', sans-serif; } .logo { position: relative; background-image: url(./img/bjimg-1.png); width: 100%; height: 398px; background-repeat: no-repeat; } .heaed { width: 100%; height: 123px; background-color: bisque; } .logocontent { position: absolute; left: 40%; top: 50%; font-size: 48px; font-weight: bold; color: #ffffff !important; } .jzbox { display: flex; width: 1200px; margin: 140px auto; margin-bottom:0; } .jzboxleft { width: 100%; /* position: relative; */ border: 1px solid #e9e9e9; } .leftdao { width: 882px; height: 90px; background-color: #dbdfe2; } .jzboxleftcontent { position: relative; border-bottom: 1px solid #d8d8d8; font-weight: bold; font-size: 30px; color: #4f4a4b; padding-bottom:35px; } .fgimg{ width: 857px; margin: 10px ; } .fgimg>img{ width: 100%; height: 100%; } .jzboxleftcontent>p { margin-left: 30px; margin-top: 20px; } .context{ overflow: hidden; color: #606060; } .context{ width: 100%; padding: 30px 10px 0 10px ; } .context>p{ color: #606060; margin-bottom:10px ; } .context>p:last-child{ padding-bottom: 30px ; } .jzboxright { width: 305px; } .jzboxright>p { font-size: 24px; font-weight: bold; color: #4f4a4b; } .jzboxright>ul>li { display: flex; } .tysaasd { margin-bottom: 15px; height: 80px; display: flex; justify-content: space-between; } .tysaasd>img { width: 128px; height: 80px; } .xiaobiaot { margin-left: 30px; margin-top: 40px; font-size: 14px; color: #ad1e22; font-weight: 500; } p{ cursor: pointer; } .leftdaozhon { width: 728px; height: 85px; margin: 20px 0 0 48px; } .leftdaozhonleft>span:nth-child(1) { font-size: 21px; color: #ad1e22; font-weight: bold; } .leftdaozhonleft>span:nth-child(2) { font-size: 16.7px; color: #535353; margin-left: 20px; } .leftdaozhon { display: flex; align-items: center; justify-content: space-between; } .icon { display: flex; } .icon img { width: 25px; margin-right: 10px; height: 25px; } .dakaui { color: #535353; width: 855px; margin-top:40px; } .dakauishanng { height: 120px; border-left: #ad1e22 solid 1px; } .dakauishanng1 { margin-top: 20px; height: 120px; border-left: #ad1e22 solid 1px; } .dakauishanngtu { display: flex; align-items: center; } .dakauishanngtu>div { margin: 10px 0 0 20px; } .dakauishanngtext { margin-left: 21px; font-size: 16.7px; } .biaoti { font-size: 21px; color: #4f4a4b; font-weight: bold; height: 30px; margin: 20px auto; } .biaoti1 { color: #4f4a4b; font-size: 16px; height: 30px; margin: 20px auto; } .wenben { height: 133px; margin: 0 auto; } .wenben>textarea { border: 0; outline: none; border: 1px solid #cbcbcb; width: 765px; height: 135px; } .inputjz { margin: 10px auto; } .inputjznei { position: relative; display: flex; width: 770px; } .oubub { padding-left: 20px; font-size: 18px; width: 360px; height: 45px; border: 0; outline: none; border: 1px solid #cbcbcb; } .inputs2 { margin-top: 10px; } .oubub{ } #hasgf { position: absolute; right: 0; } .button { width: 770px; height: 60px; border-radius: 40px; text-align: center; line-height: 60px; font-size: 16px; margin-top: 50px; color: #ffffff !important; background-color: #ad1e22; } .button:hover{ background-color: #f76700; color: #ffffff !important; } .tuasd { width: 666px; height: 579px; position: absolute; right: 105px; top: -156px; } .icon1 img { width: 25px; height: 25px; margin-right: 10px; } .leftddd{ width:73%; } .ghimg{ width: 27px !important; height: 27px !important; } .zuimianjzright { width: 27%; padding-left:3%; } .inpt { width: 215px; height: 32px; font-size: 14px; line-height: 29px; border: 0; outline: none; } .inpt::-webkit-input-placeholder { color: #ad1e22; } .sous { overflow: hidden; align-items: center; display: flex; color: #f76700; width: 276px; height: 35px; line-height: 35px; border: 1px solid #dcdcdc; border-radius: 40px; } .rtert { width: 18px ; height: 18px ; margin-left: 10px ; } .mianbiaoti { color: #535353; margin-top: 20px; } .mianbiaoti>span { font-weight: bold; font-size: 24px; margin-left: 31px; } .c1 { width: 25px ; height: 25px ; } .lieb>ul>li>p:nth-child(1) { font-weight: bold; font-size: 14px; } .lieb>ul>li { /* margin-top: 10px; */ margin: 20px 0; /* height: 55px; */ border-bottom: 1px solid #c9c9c9; } .lieb>ul>li a{ color: #535353; } .lieb>ul>li>p:nth-child(2) { font-size: 12px; } .icon1 { position: absolute; right: 29px; bottom: 11px; display: flex; } .icon1>div { font-size: 20px; color: #f76700; margin-right: 20px; } .jian { position: relative; text-align: center; width: 100%; padding:0 2%; padding-bottom:70px; background-color: #063395; } .jian>img { margin-top: 20px; } .jian>p:nth-child(2) { font-size: 14px; color: #ffffff !important; margin-top:20px; } .jian>p:nth-child(3) { /* position: relative */ text-align: center; line-height: 55px; margin: 20px 0; width: 100%; height: 55px; background-color: #4f4a4b; border-radius: 40px; color: #ffffff !important; } .jianhua{ background-color: #ad1e22 !important; } .jianhua:hover{ background-color:#f76700 !important; } .nav-box:hover { background-color: #ffffff5b !important; color: #f76700 !important; } @media screen and (max-width: 1250px){ .jzbox { width: 94%; } } @media screen and (max-width: 850px){ .jzbox{ flex-direction:column; } .leftdao{ width: 100%; } .wenben>textarea{ width: 100%; } .leftdaozhon{ width: 90%; } .button, .inputjznei{ width:100%; } .leftddd{ width: 100%; } .zuimianjzright{ margin-top:20px ; width: 100%; } .sous{ width: 100%; } .mianbiaoti{ width: 100%; } } .jzboxleftcontent>h1{ margin-left: 30px; margin-top: 20px; font-size: 30px ; font-weight: bold; } ```css /* ========================================================= Blog Article Content Main selector: .context ========================================================= */ .context { width: 100%; max-width: 100%; color: #333; font-size: 16px; line-height: 1.8; word-break: break-word; overflow-wrap: break-word; } /* ------------------------- Paragraph ------------------------- */ .context p { margin: 0 0 20px; padding: 0; color: #333; font-size: 16px; line-height: 1.8; } .context p:last-child { margin-bottom: 0; } /* ------------------------- Headings ------------------------- */ .context h1, .context h2, .context h3, .context h4, .context h5, .context h6 { margin-top: 32px; margin-bottom: 18px; padding: 0; color: #222; font-weight: 700; line-height: 1.4; } .context h1 { font-size: 32px; margin-top: 10px; margin-bottom: 22px; } .context h2 { font-size: 26px; margin-top: 38px; margin-bottom: 18px; padding-left: 14px; border-left: 4px solid #0b75d1; } .context h3 { font-size: 22px; margin-top: 30px; margin-bottom: 15px; } .context h4 { font-size: 19px; margin-top: 25px; margin-bottom: 12px; } .context h5 { font-size: 17px; margin-top: 22px; margin-bottom: 10px; } .context h6 { font-size: 16px; margin-top: 20px; margin-bottom: 10px; } /* ------------------------- Links ------------------------- */ .context a { color: #086fc1; text-decoration: none; transition: all 0.2s ease; } .context a:hover { color: #00559d; text-decoration: underline; } /* ------------------------- Strong / Em ------------------------- */ .context strong, .context b { color: #222; font-weight: 700; } .context em, .context i { font-style: italic; } /* ------------------------- Unordered List ------------------------- */ .context ul { margin: 0 0 22px; padding-left: 28px; } .context ul li { margin-bottom: 9px; padding-left: 4px; color: #333; font-size: 16px; line-height: 1.75; } .context ul li::marker { color: #0b75d1; } /* ------------------------- Ordered List ------------------------- */ .context ol { margin: 0 0 22px; padding-left: 30px; } .context ol li { margin-bottom: 9px; padding-left: 5px; color: #333; font-size: 16px; line-height: 1.75; } .context ol li::marker { color: #0b75d1; font-weight: 700; } /* ------------------------- Nested Lists ------------------------- */ .context ul ul, .context ol ol, .context ul ol, .context ol ul { margin-top: 8px; margin-bottom: 8px; } .context li > ul, .context li > ol { margin-bottom: 0; } /* ------------------------- Table ------------------------- */ .context table { width: 100%; margin: 28px 0; border-collapse: collapse; border-spacing: 0; background: #fff; font-size: 15px; line-height: 1.6; } .context table th, .context table td { padding: 13px 16px; border: 1px solid #ddd; text-align: left; vertical-align: middle; } .context table th { background: #f2f6fa; color: #222; font-weight: 500; } .context table tr:nth-child(even) td { background: #fafafa; } .context table tr:hover td { background: #f5f9fc; } /* ------------------------- Table Responsive ------------------------- */ .context .table-wrapper { width: 100%; overflow-x: auto; margin: 28px 0; } .context .table-wrapper table { margin: 0; min-width: 650px; } /* ------------------------- Images ------------------------- */ .context img { display: block; max-width: 100%; height: auto; margin: 25px auto; } .context p img { margin: 25px auto; } /* ------------------------- Image Caption ------------------------- */ .context figure { margin: 28px 0; padding: 0; text-align: center; } .context figure img { margin: 0 auto 10px; } .context figcaption { color: #777; font-size: 14px; line-height: 1.6; text-align: center; } /* ------------------------- Blockquote ------------------------- */ .context blockquote { margin: 25px 0; padding: 16px 22px; border-left: 4px solid #0b75d1; background: #f5f8fb; color: #555; font-size: 16px; line-height: 1.8; } .context blockquote p { margin-bottom: 0; } /* ------------------------- Code ------------------------- */ .context code { padding: 2px 6px; border-radius: 3px; background: #f1f3f5; color: #c7254e; font-family: Consolas, Monaco, monospace; font-size: 14px; } .context pre { margin: 25px 0; padding: 18px 20px; overflow-x: auto; border-radius: 4px; background: #f5f5f5; color: #333; font-family: Consolas, Monaco, monospace; font-size: 14px; line-height: 1.7; } .context pre code { padding: 0; background: transparent; color: inherit; } /* ------------------------- Horizontal Line ------------------------- */ .context hr { height: 1px; margin: 35px 0; border: 0; background: #e5e5e5; } /* ------------------------- Definition List ------------------------- */ .context dl { margin: 20px 0; } .context dt { margin-bottom: 6px; color: #222; font-weight: 700; } .context dd { margin: 0 0 15px 20px; color: #555; } /* ------------------------- WordPress Alignment ------------------------- */ .context .alignleft { float: left; margin: 8px 25px 18px 0; } .context .alignright { float: right; margin: 8px 0 18px 25px; } .context .aligncenter { display: block; margin: 25px auto; } .context .alignnone { margin: 25px 0; } /* ------------------------- WordPress Caption ------------------------- */ .context .wp-caption { max-width: 100%; margin: 25px auto; } .context .wp-caption img { margin: 0 auto 8px; } .context .wp-caption-text { margin: 0; color: #777; font-size: 14px; line-height: 1.6; text-align: center; } /* ------------------------- Video / iframe ------------------------- */ .context iframe { display: block; max-width: 100%; margin: 25px auto; } .context video { display: block; max-width: 100%; height: auto; margin: 25px auto; } /* ------------------------- First Paragraph ------------------------- */ .context > p:first-child { margin-top: 0; } /* ------------------------- Mobile ------------------------- */ @media screen and (max-width: 768px) { .context { font-size: 15px; line-height: 1.75; } .context p { font-size: 15px; line-height: 1.75; margin-bottom: 17px; } .context h1 { font-size: 26px; margin-top: 10px; margin-bottom: 18px; } .context h2 { font-size: 22px; margin-top: 30px; margin-bottom: 15px; padding-left: 10px; border-left-width: 3px; } .context h3 { font-size: 19px; margin-top: 25px; margin-bottom: 12px; } .context h4 { font-size: 17px; } .context ul, .context ol { padding-left: 24px; } .context ul li, .context ol li { font-size: 15px; line-height: 1.7; } .context table { min-width: 650px; font-size: 14px; } .context table th, .context table td { padding: 10px 12px; } .context .alignleft, .context .alignright { float: none; display: block; margin: 20px auto; } .context blockquote { padding: 13px 16px; margin: 20px 0; } } /* ------------------------- Very Small Screen ------------------------- */ @media screen and (max-width: 480px) { .context h1 { font-size: 24px; } .context h2 { font-size: 20px; } .context h3 { font-size: 18px; } .context table { font-size: 13px; } } .tg {border-collapse:collapse;border-spacing:0;margin:0px auto;} .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;} .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;} .tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle} .tg .tg-uzvj{border-color:inherit;font-weight:bold;text-align:center;vertical-align:middle} .tg .tg-g7sd{border-color:inherit;font-weight:bold;text-align:left;vertical-align:middle} @media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}