@charset 'utf-8';
body { font-family: '微软雅黑', Arial; background: #fff }
.scale_img dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img dt:hover img, .scale_img li:hover img { -webkit-transform: scale(1.05) rotate(0deg) translateY(0); -ms-transform: scale(1.05) rotate(0deg) translateY(0); transform: scale(1.05) rotate(0deg) translateY(0) }
.scale_img1 { overflow: hidden }
.scale_img1 img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img1:hover img { -webkit-transform: scale(1.05) rotate(0deg) translateY(0); -ms-transform: scale(1.05) rotate(0deg) translateY(0); transform: scale(1.05) rotate(0deg) translateY(0) }

h2.main_title { text-align: center; padding-bottom: 39px; background: url(../images/tbg.png) no-repeat center bottom }
h2.main_title a { display: block; font-size: 44px; line-height: 100%; color: #333; letter-spacing: 2px }
h2.main_title span { font-size: 11px; line-height: 100%; color: #666; display: block; text-transform: uppercase; margin-top: 12px; font-weight: 400; letter-spacing: 8px }

.fullSlide { position: relative; z-index: 1; clear: both; width: 100% }
.fullSlide .bd { margin: 0 auto; position: relative; z-index: 0; overflow: hidden }
.fullSlide .bd .con { width: 100% !important; height: auto !important; display: block }
.fullSlide .bd .li { width: 100% !important; overflow: hidden; text-align: center; background: no-repeat center top; z-index: 0 }
.fullSlide .bd .li img { display: block; height: auto !important; width: 100% }
.fullSlide .hd { position: absolute; width: 100%; height: 12px; left: 0; bottom: 60px; text-align: center; cursor: pointer }
.fullSlide .hd li { display: inline-block; width: 12px; height: 12px; background: #fff; margin: 0 19px; border-radius: 50%; opacity: .6; -o-transition: all .3s ease; transition: all .3s ease }
.fullSlide .hd li.on { width: 36px; height: 12px; opacity: 1; border-radius: 5px }
.fullSlide p { display: none; position: absolute; top: 50%; width: 80px; height: 80px; z-index: 99; opacity: 1; text-align: center; margin-top: -40px }
.fullSlide .prev2 { left: 3% }
.fullSlide .next2 { right: 3% }

.intro { padding: 90px 0; background: #F2F2F3 }
.intro .intro_con { float: right; width: 688px }
.intro h2 { position: relative; font-weight: 400; margin-top: 20px; padding-bottom: 15px }
.intro h2 a { display: block; height: 42px }
.intro h2 strong { display: block; float: left; font-size: 42px; line-height: 100%; color: #333; font-weight: 400 }
.intro h2 span { display: block; float: left; font-size: 18px; line-height: 100%; color: #999; text-transform: uppercase; font-family: arial; margin-left: 16px; margin-top: 7px }
.intro h2 i { display: block; font-size: 14px; margin-top: 2px }
.intro h2:before { position: absolute; content: ""; width: 744px; height: 1px; background: #C8E0B7; left: -55px; bottom: 0 }
.intro h2:after { position: absolute; content: ""; width: 13px; height: 13px; background: #67b72d; right: 0; bottom: 0 }
.intro p { font-size: 16px; line-height: 26px; color: #333; margin: 29px 0 54px }
.intro li { display: inline-block; margin-right: 59px }
.intro li strong { display: block; font-size: 40px; line-height: 100%; color: #67b72d }
.intro li span { display: block; font-size: 18px; line-height: 100%; color: #333; margin-top: 10px }
.intro li:last-child { margin-right: 0 }
.intro .pic { float: left; width: 456px; height: 323px }

.product { padding-top: 100px; overflow: hidden }
.product h2 { margin-bottom: 29px }
.pro_con dl { height: 540px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 80px;  }
.pro_con dt { width: 700px; height: 540px; float: right; overflow: hidden }
.pro_con dt img { width: 700px; height: 540px }
.pro_con dd { width: 500px; height: 540px;background: #F2F2F3; float: left; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 93px 67px 0 63px; position: relative }
.pro_con dd h3 strong { display: block; position: absolute; width: 60px; height: 71px; background: #67b72d; border-radius: 0 0 30px 30px; top: 0; left: 63px; font-size: 32px; line-height: 60px; color: #fff; text-align: center }
.pro_con dd h3 a { display: block; font-size: 32px; line-height: 100%; color: #67b72d; letter-spacing: 1px }
.pro_con dd h3 i { font-weight: 400 }
.pro_con dd h3 span { display: block; font-size: 12px; line-height: 100%; color: #999; font-weight: 400; font-family: arial; margin-top: 8px; letter-spacing: .8px }
.pro_con dd p { font-size: 15px; line-height: 26px; color: #666; margin: 34px 0 54px }
.pro_con dd .subclass h4 { height: 18px; float: left; margin-right: 38px }
.pro_con dd .subclass h4 a { display: block; font-size: 18px; line-height: 100%; color: #333; padding-left: 13px; background: url(../images/pi.png) no-repeat left center; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.pro_con dd .subclass h4 a:hover { font-weight: 700 }
.pro_con dd .more { margin-top: 70px }
.pro_con dd .more a { display: block; font-size: 16px; line-height: 41px; color: #333; -o-transition: all .3s ease; transition: all .3s ease; width: 179px; height: 41px; border: 2px solid #333; border-radius: 2px; text-align: center }
.pro_con dd .more a img { vertical-align: 2px; margin-left: 11px }
.pro_con dd .more a:hover { width: 202px }
.pro_con .pro2 { position: relative; height: 700px }
.pro_con .pro2 dt { position: absolute; width: 1920px; height: 700px; left: 50%; margin-left: -960px; z-index: -1 }
.pro_con .pro2 dt img { width: 1920px; height: 700px }
.pro_con .pro2 dd { background: #fff; margin-top: 76px; float: right }
.pro_con .pro2 dd .subclass h4 { margin-bottom: 13px }
.pro_con .pro2 dd .more { margin-top: 40px }
.pro_con .pro2 dt:hover img, .pro_con .pro2 li:hover img { -webkit-transform: scale(1) rotate(0deg) translateY(0); -ms-transform: scale(1) rotate(0deg) translateY(0); transform: scale(1) rotate(0deg) translateY(0) }
.pro_con .pro3 .more { margin-top: 87px }

.quality { padding-top: 100px }
.qua_con { min-width: 1200px; max-width: 1920px; margin: 30px auto 0 }
.qua_con dl { width: 19.58%; float: left; border-right: 1px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; line-height: 0; -o-transition: all .5s ease; transition: all .5s ease }
.qua_con dl:last-child { border-right: 0 }
.qua_con dd { position: absolute; background: rgba(0, 0, 0, .4) url(../images/qi1.png) no-repeat 16.46% 87.6%; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20.37% 28.5% 0 13.46%; -o-transition: all .3s ease; transition: all .3s ease }
.qua_con dd h3 { font-size: 34px; line-height: 100%; color: #fff; letter-spacing: 8px }
.qua_con dd h3 span { display: block; font-size: 22px; line-height: 100%; color: #fff; font-weight: 400; margin-top: 10px; letter-spacing: 1px }
.qua_con dd p { font-size: 16px; line-height: 26px; color: #fff; margin-top: 24px }
.qua_con dd:after { position: absolute; content: ""; width: 3px; height: 25%; background: #fff; top: 43%; left: 13.46% }
.qua_con dl.on { width: 41.26% }
.qua_con dl.on dd { width: 87.34%; height: 117px; background: #fff url(../images/qi10.png) no-repeat 91% center; left: 0; bottom: 0; padding: 27px 0 0 57px; border-radius: 0 50px 0 0 }
.qua_con dl.on dd h3 { color: #333 }
.qua_con dl.on dd h3 span { display: inline-block; color: #333; margin-left: 5px }
.qua_con dl.on dd h3 span:before { content: "/ " }
.qua_con dl.on dd p { font-size: 16px; line-height: 100%; color: #333; margin-top: 13px }
.qua_con dl.on dd:after { display: none }
.qua_con dl:nth-child(2) dd { background-image: url(../images/qi2.png) }
.qua_con dl:nth-child(3) dd { background-image: url(../images/qi3.png) }
.qua_con dl:nth-child(4) dd { background-image: url(../images/qi4.png) }
.qua_con dl:nth-child(2).on dd { background-image: url(../images/qi20.png) }
.qua_con dl:nth-child(3).on dd { background-image: url(../images/qi30.png) }
.qua_con dl:nth-child(4).on dd { background-image: url(../images/qi40.png) }

.power { padding: 100px 0 }
.power_con { margin-top: 30px; background: #9FA5AF }
.power_con dl { width: 595px; height: 376px; float: left; background: #F4F4F4 }
.power_con dl dt { position: relative; width: 282px; height: 376px }
.power_con dl dt:after { position: absolute; content: ""; top: 169px; z-index: 999; border-width: 19px 25px; border-color: transparent #F4F4F4 transparent transparent; border-style: solid }
.power_con dl dd { width: 313px; height: 376px; padding: 45px 33px 0 34px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative }
.power_con dl dd h4 { font-size: 24px; color: #67b72d; line-height: 100%; margin-bottom: 22px }
.power_con dl dd h4 img { display: block; margin-bottom: 8px }
.power_con dl dd h4 span { display: block; font-size: 20px; line-height: 100%; color: #333; font-weight: 400; margin-top: 8px }
.power_con dl dd p { font-size: 15px; color: #333; line-height: 26px; text-align: justify }
.power_con dl dd:after { position: absolute; content: ""; width: 39px; height: 39px; background: #9FA5AF; border-radius: 50%; z-index: 999 }
.power_con dl:nth-child(odd) { margin-right: 10px }
.power_con dl:nth-child(odd) dt { float: left }
.power_con dl:nth-child(odd) dt:after { right: -2px }
.power_con dl:nth-child(odd) dd { float: right }
.power_con dl:nth-child(even) dt { float: right }
.power_con dl:nth-child(even) dt:after { left: -2px; border-color: transparent transparent transparent #F4F4F4 }
.power_con dl:nth-child(even) dd { float: left; padding: 45px 26px 0 40px }
.power_con dl:first-child, .power_con dl:nth-child(2) { margin-bottom: 10px }
.power_con dl:first-child dd:after { right: -24.5px; top: 168px }
.power_con dl:nth-child(2) dd:after { bottom: -24.5px; left: 137px }
.power_con dl:nth-child(3) dd:after { top: -24.5px; left: 137px }
.power_con dl:last-child dd:after { left: -24.5px; top: 168px }

.sm_banner { padding-top: 78px; background: url(../images/sm_bg.jpg) no-repeat center top; height: 352px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.sm_banner h2 a { display: block; font-size: 54px; line-height: 100%; color: #fff; letter-spacing: 5px }
.sm_banner h2 span { display: block; font-size: 30px; line-height: 100%; color: #fff; font-weight: 400; letter-spacing: 4px; margin-top: 19px }
.sm_banner h3 { font-size: 30px; line-height: 100%; color: #fff; opacity: .3; text-transform: uppercase; margin: 32px 0 10px }
.sm_banner p { font-size: 12px; line-height: 18px; color: #fff; opacity: .3; font-family: arial; letter-spacing: 1.5px }
.sm_banner .s_tel { padding-left: 37px; background: url(../images/s_tel.png) no-repeat left 65px; padding-top: 46px; color: #fff }
.sm_banner .s_tel span { display: block; font-size: 16px; line-height: 1 }
.sm_banner .s_tel strong { display: block; font-size: 26px; line-height: 1; margin-top: 7px }
.sm_banner .more a { margin-top: 31px; letter-spacing: 2px; display: block; width: 214px; height: 41px; border: 2px solid #fff; border-radius: 2px; font-size: 18px; line-height: 41px; color: #fff; text-align: center; font-weight: 700; -o-transition: all .3s ease; transition: all .3s ease }
.sm_banner .more a:hover { animation: pulse .5s; -webkit-animation: pulse .5s }

.case { background: #F2F2F3; padding: 100px 0 90px }
.case h2 span { font-size: 18px; line-height: 100%; color: #333; letter-spacing: 0; margin-top: 10px }
.case_con { margin: 30px 0 15px }
.case_con dl { width: 385px; float: left; margin-right: 22px; position: relative; margin-bottom: 25px }
.case_con dl:nth-child(3n) { margin-right: 0 }
.case_con dt { width: 385px; height: 288px; overflow: hidden }
.case_con dt img { width: 385px; height: 288px }
.case_con h4 a { display: block; width: 385px; height: 60px; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 60px 0 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 60px; color: #333; font-weight: 400; position: relative }
.case_con h4 a:after { position: absolute; content: ""; width: 21px; height: 21px; background: #fff url(../images/ci2.png) no-repeat center; border-radius: 50%; top: 21px; right: 27px; -o-transition: all .3s ease; transition: all .3s ease }
.case_con .info { position: absolute; width: 385px; height: 288px; background: rgba(6, 6, 6, .7); left: 0; top: 0; -o-transition: all .5s ease; transition: all .5s ease; opacity: 0 }
.case_con .info a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 49px 34px 0 37px; width: 385px; height: 288px }
.case_con .info strong { display: block; font-size: 22px; line-height: 100%; color: #fff; font-weight: 400 }
.case_con .info p { font-size: 14px; line-height: 26px; color: #fff; margin: 20px 0 33px }
.case_con .info span { display: block; font-size: 15px; line-height: 100%; color: #fff; background: url(../images/more1.png) no-repeat 65px center; -o-transition: all .3s ease; transition: all .3s ease }
.case_con dl:hover h4 a:after { background: #67b72d url(../images/ci1.png) no-repeat center }
.case_con dl:hover .info { opacity: 1 }
.case_con dl dd span:hover { background-position-x: 70px }
.case .more a { display: block; margin: 0 auto; font-size: 16px; line-height: 41px; color: #333; -o-transition: all .3s ease; transition: all .3s ease; width: 179px; height: 41px; border: 2px solid #333; border-radius: 2px; text-align: center }
.case .more a img { vertical-align: 2px; margin-left: 11px }
.case .more a:hover { width: 202px }

.news { padding: 88px 0 100px }
.news h2 { margin-bottom: 35px }
.news h2 span { font-size: 18px; line-height: 100%; color: #333; letter-spacing: 0; margin-top: 10px }
.company { width: 572px }
.company h3 a { display: block; height: 158px; position: relative; background: #67b72d; font-size: 24px; line-height: 100%; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 70px 0 0 28px; letter-spacing: 1px }
.company h3 a img { position: absolute; right: 0; top: 0 }
.company h3 a span { display: block; font-weight: 400; font-size: 12px; line-height: 100%; color: #fff; margin-top: 8px; font-family: Arial }
.company h3 a:before { position: absolute; content: ""; width: 43px; height: 2px; background: #fff; top: 47px; left: 30px }
.company li { height: 45px; border-bottom: 1px solid #DCDCDC; -o-transition: all .3s ease; transition: all .3s ease }
.company li span { width: 193px; text-align: center; float: left; font-size: 16px; line-height: 45px; color: #999; font-weight: 500 }
.company li h4 { width: 320px; float: left; font-size: 14px; line-height: 45px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.company li p { display: none }
.company ul li:first-child { height: 192px }
.company ul li:first-child span { text-align: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 64px; padding-top: 30px }
.company ul li:first-child i { display: block; font-size: 56px; line-height: 100%; color: #67b72d; margin-top: 21px; position: relative }
.company ul li:first-child i:before { position: absolute; content: ""; width: 16px; height: 1px; background: #999; top: -18px; right: 2px }
.company ul li:first-child h4 { font-size: 18px; line-height: 30px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 38px 0 13px; float: left; width: 341px }
.company ul li:first-child p { display: block; font-size: 14px; line-height: 24px; color: #999; float: left; width: 341px }
.company ul li:hover h4 { color: #67b72d }
.wiki { width: 570px; float: right }
.wiki li h4 { font-size: 15px; line-height: 17px; color: #010101; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 20px; position: relative; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.wiki li h4:before { position: absolute; content: ""; width: 10px; height: 10px; background: #7F7F7F; left: 0; top: 4px; -o-transition: all .3s ease; transition: all .3s ease }
.wiki li p { font-size: 14px; line-height: 22px; color: #9a9a9a; margin: 12px 0 40px }
.wiki li:hover h4 { color: #67b72d }
.wiki li:hover h4:before { background: #67b72d }
.wiki li:last-child p { margin-bottom: 32px }
.wiki h3 a { display: block; width: 570px; height: 158px; position: relative; font-size: 24px; line-height: 100%; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 52px 0 0 48px }
.wiki h3 a img { width: 570px; height: 158px; position: absolute; left: 0; top: 0; z-index: -1 }
.wiki h3 a span { display: block; font-size: 12px; line-height: 100%; color: #fff; background: url(../images/ni.png) no-repeat 44px center; font-family: arial; margin-top: 20px; font-weight: 400 }
.wiki h3 a:before { position: absolute; content: ""; width: 43px; height: 2px; background: #fff; top: 41px; left: 49px }

.about { height: 790px; background: #f2f2f3 url(../images/about_bg.jpg) no-repeat center top; overflow: hidden }
.about .content { position: relative }
.about .about_con { width: 699px; height: 552px; margin-top: 117px; background: rgba(255, 255, 255, .95); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 56px 99px 0 100px; position: relative; z-index: 2 }
.about .about_con:before { position: absolute; content: ""; width: 647px; height: 505px; border: 4px solid #E5E5E5; top: 19px; left: 22px; z-index: -1 }
.about .about_con:after { position: absolute; content: ""; width: 80px; height: 2px; background: #67b72d; top: 145px; left: -42px; z-index: 2 }
.about h2 { text-align: right; font-weight: 400; margin: 28px 0 18px }
.about h2 a { display: block; font-size: 24px; line-height: 100%; color: #333 }
.about h2 span { display: block; font-weight: 100; margin-top: 10px }
.about .more a { display: block; float: right; font-size: 16px; line-height: 41px; color: #333; -o-transition: all .3s ease; transition: all .3s ease; width: 179px; height: 41px; border: 2px solid #333; border-radius: 2px; text-align: center }
.about .more a img { vertical-align: 2px; margin-left: 11px }
.about .more a:hover { width: 202px }
.about .pic { position: absolute; right: 50%; margin-right: -297px }
.open-video { width: 500px; height: 281px; cursor: pointer; position: relative; overflow: hidden }
.open-video img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.open-video:hover img { -webkit-transform: scale(1.05) rotate(0deg) translateY(0); -ms-transform: scale(1.05) rotate(0deg) translateY(0); transform: scale(1.05) rotate(0deg) translateY(0) }
.open-video:after { content: "play video"; position: absolute; width: 500px; height: 281px; background: rgba(0, 0, 0, .6) url(../images/vi.png) no-repeat center 87px; top: 0; left: 0; font-size: 17px; color: #fff; z-index: 2; font-size: 16px; line-height: 100%; color: #fff; padding-top: 181px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center }
.video-box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; font-size: 0; z-index: 9999; background: rgba(0, 0, 0, .9); display: none }
.video-box .video { width: 800px; height: 640px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }
.video-box .video iframe { width: 800px; height: 640px }
.video-box .close-video { position: absolute; top: calc(54px); right: 5%; width: 30px; height: 30px; cursor: pointer; background: url(../images/close.png) no-repeat center }

.links { background: #0A0A0A; height: 80px; overflow: hidden }
.links .fl { width: 960px; overflow: hidden }
.links em { margin-right: 102px; display: block; float: left; font-weight: 700; background: url(../images/link.png) no-repeat right center; padding-right: 36px; letter-spacing: 1px; font-size: 16px; line-height: 80px; color: rgba(255, 255, 255, .5) }
.links span { margin-right: 15px }
.links a { margin-right: 54px; -o-transition: all .3s ease; transition: all .3s ease; font-size: 14px; line-height: 80px; color: rgba(255, 255, 255, .5) }
.links a:hover { color: #fff }
.links .fr { font-size: 14px; line-height: 80px; color: rgba(255, 255, 255, .3) }

@-webkit-keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }
@-webkit-keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }
@-webkit-keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }
@-webkit-keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes fadeInRight2 {
    from { -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight2 {
    from { -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight2 { -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2 }
@-webkit-keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
@keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
@-webkit-keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-moz-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-webkit-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-o-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}