@charset 'utf-8';
body { font-family: '微软雅黑', Arial; background: #fff; position: relative }
.scale_img dl img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img dl: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) }

h2.main_title a { font-weight: 700; display: block; text-align: center; font-size: 40px; line-height: 100%; color: #333; position: relative; padding-bottom: 25px }
h2.main_title a i{color:#41a8e9;font-size:50px;font-style:italic;width: 228px;display: inline-block;}
h2.main_title a i em{ font-size:100px;font-style:italic;}
h2.main_title a:before { position: absolute; content: ""; width: 50px; height: 7px; background: #41a8e9; bottom: 0; left: 50%; margin-left: -25px; z-index: 3 }
h2.main_title a:after { position: absolute; content: ""; width: 120px; height: 1px; background: #B5B5B5; bottom: 3px; left: 50%; margin-left: -60px }
h2.main_title a:hover { color: #333 }
h2.main_title span { display: block; margin-top: 18px; text-align: center; font-weight: 400; font-size: 18px; line-height: 100%; color: #666 }

.fullSlide { position: relative; z-index: 1; clear: both; width: 100% }
.fullSlide .tempWrap { margin: 0 auto }
.fullSlide .bd { position: relative; z-index: 1; overflow: hidden; margin: 0 auto }
.fullSlide .bd .li img { display: block; width: 100%; height: auto !important }
.fullSlide .hd { position: absolute; bottom: 45px; width: 100%; height: 18px; cursor: pointer; text-align: center; z-index: 2 }
.fullSlide .hd li { display: inline-block; width: 16px; height: 16px; margin: 0 12px; opacity: 1; border-radius: 50%; background: #fff; -o-transition: all .3s ease; transition: all .3s ease }
.fullSlide .hd li.on { background: #41a8e9 }
.fullSlide p { position: absolute; top: 50%; width: 80px; height: 80px; z-index: 9; opacity: 1; text-align: center; margin-top: -40px }
.fullSlide .prev2 { left: 3% }
.fullSlide .next2 { right: 3% }

.intro { padding-top: 118px; padding-bottom: 81px; background: url(../images/intro_bg.png) no-repeat center top }
.intro_con { width: 588px; padding-top: 17px; padding-left: 83px; margin-top: 20px; background: url(../images/intro_dd.png) no-repeat left top }
.intro_con h2 a { display: block; font-size: 36px; line-height: 100%; color: #000; font-weight: 400 }
.intro_con p { font-size: 14px; line-height: 36px; color: #000; margin-top: 21px; margin-bottom: 104px }
.intro_con .sign { font-size: 15px; line-height: 39px; color: #000; font-weight: 700 }
.intro_con .sign img { display: inline-block; margin-left: 26px; vertical-align: middle }
.intro_pic { padding-top: 80px; padding-left: 17px; width: 468px; height: 263px; background: url(../images/intro_dt.png) no-repeat left top }

.product { padding-top: 82px; padding-bottom: 70px }
.product ul { margin-top: 91px }
.product li { width: 380px; height: 451px; margin-right: 30px; margin-bottom: 31px; float: left; position: relative ;cursor:pointer;}
.product li img { position: absolute; top: 0; left: 0; max-width: 100%; -o-transition: all .3s ease; transition: all .3s ease }
.product li>div { width: 380px; height: 451px; position: relative; z-index: 2; border: 1px solid #E5E5E5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-transition: all .3s ease; transition: all .3s ease; padding-top: 275px }
.product li h3 a { display: block; position: relative; font-size: 36px; line-height: 100%; color: #41a8e9; font-weight: 400; margin-bottom: 24px }
.product li h3 a:after { content: ">"; padding-left: 20px; -o-transition: all .3s ease; transition: all .3s ease }
.product li h3 a:hover:after { padding-left: 30px }
.product li h4 a { display: block; font-size: 15px; line-height: 30px; color: #333; padding-left: 20px; position: relative; font-weight: 400 }
.product li h4 a:before { position: absolute; content: ""; width: 6px; height: 6px; background: #333; border-radius: 50%; left: 0; top: 12px }
.product li h4 a:after { content: ">"; padding-left: 9px; -o-transition: all .3s ease; transition: all .3s ease }
.product li h4 a:hover:after { padding-left: 16px }
.product li:hover { box-shadow: 0 0 15px rgba(0, 0, 0, .07) }
.product li:hover>div { border-color: transparent }
.product li:nth-child(3) h3, .product li:nth-child(4) h3, .product li:nth-child(5) h3 { position: relative }
.product li:nth-child(3) h3:before, .product li:nth-child(4) h3:before, .product li:nth-child(5) h3:before { position: absolute; content: ""; width: 36px; height: 5px; background: #41a8e9; left: 32px; bottom: -2px; z-index: 3 }
.product li:nth-child(3) h3:after, .product li:nth-child(4) h3:after, .product li:nth-child(5) h3:after { position: absolute; content: ""; width: 208px; height: 3px; background: #C9C9C9; left: 32px; bottom: -2px; z-index: 2 }
.product li:nth-child(3) h3 a, .product li:nth-child(4) h3 a, .product li:nth-child(5) h3 a { padding-bottom: 35px; padding-left: 31px; border-bottom: 1px solid #E5E5E5; font-size: 30px; margin-bottom: 19px }
.product li:nth-child(3) h4, .product li:nth-child(4) h4, .product li:nth-child(5) h4 { display: inline-block }
.product li:nth-child(3) h4:nth-child(2), .product li:nth-child(4) h4:nth-child(2), .product li:nth-child(5) h4:nth-child(2), .product li:nth-child(3) h4:nth-child(4), .product li:nth-child(4) h4:nth-child(4), .product li:nth-child(5) h4:nth-child(4) { margin-left: 20px; width: 190px }
.product li:nth-child(3) .more a, .product li:nth-child(4) .more a, .product li:nth-child(5) .more a { display: block; margin-top: 8px; position: relative }
.product li:nth-child(3) .more a:before, .product li:nth-child(4) .more a:before, .product li:nth-child(5) .more a:before { position: absolute; content: "+"; width: 47px; height: 47px; background: #41a8e9; border-radius: 50%; font-size: 48px; line-height: 40px; color: #fff600; text-align: center; left: 50%; margin-left: -23.5px; top: 0 }
.product li:nth-child(2), .product li:nth-child(5) { margin-right: 0 }
.product li:nth-child(1), .product li:nth-child(2) { width: 585px; height: 342px }
.product li:nth-child(1)>div, .product li:nth-child(2)>div { padding-top: 59px; padding-left: 48px; width: 585px; height: 342px }
.product li:nth-child(1):before, .product li:nth-child(2):before { position: absolute; content: ""; width: 36px; height: 5px; background: #41a8e9; left: 49px; bottom: -3px; z-index: 3 }
.product li:nth-child(1):after, .product li:nth-child(2):after { position: absolute; content: ""; width: 266px; height: 3px; background: #C9C9C9; left: 49px; bottom: -3px; z-index: 2 }
.product li:nth-child(1) .more a, .product li:nth-child(2) .more a { display: block; margin-top: 29px }
.product li:nth-child(1) .more a:before, .product li:nth-child(2) .more a:before { position: absolute; content: "查看更多 >"; width: 98px; height: 27px; font-size: 14px; line-height: 27px; color: #41a8e9; text-align: center; border: 1px solid #41a8e9; border-radius: 5px; -o-transition: all .3s ease; transition: all .3s ease }
.product li:nth-child(1) .more a:hover:before, .product li:nth-child(2) .more a:hover:before { background: #41a8e9; color: #FFF600 }

.quality { padding-top: 79px; padding-bottom: 82px; background: url(../images/quality_bg.jpg) no-repeat center top }
.quality h2 a, .quality h2 a:hover { color: #fff }
.quality h2 a:before { background: #FFF600 }
.quality h2 span { color: #ccc }
.quality ul { margin-top: 58px }
.quality li { width: 277px; height: 445px; float: left; margin-right: 30px; background: #fff; line-height: 0; position: relative; cursor: pointer }
.quality li strong { font-weight: 700 }
.quality li:last-child { margin-right: 0 }
.quality .pic { padding: 10px 11px; position: absolute; top: 0; left: 0; width: 277px; height: 445px; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.quality .pic span { display: block; text-align: center; font-size: 24px; line-height: 100%; color: #333; margin-top: 46px; position: relative }
.quality .pic span:before { position: absolute; content: "+"; width: 40px; height: 40px; background: #41a8e9; border-radius: 50%; font-size: 36px; line-height: 34px; color: #fff600; top: -66px; left: 50%; margin-left: -20px }
.quality .desc { opacity: 0; position: absolute; top: 0; left: 0; width: 277px; height: 445px; background: rgba(65, 168, 233, .9); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 71px 34px 0 30px; -o-transition: all .3s ease; transition: all .3s ease }
.quality .desc img { display: block; margin-bottom: 32px }
.quality .desc h4 { font-size: 24px; line-height: 100%; color: #fff600; position: relative; padding-bottom: 35px; font-weight: 400; margin-bottom: 25px }
.quality .desc h4:after { position: absolute; content: ""; left: 0; bottom: 0; width: 47px; height: 5px; background: #fff600; border-radius: 2px }
.quality .desc p { font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, .74) }
.quality .desc p:before { content: ">"; padding-right: 5px }
.quality li:hover .pic { display: none }
.quality li:hover .desc { opacity: 1 }

.ys { padding-top: 75px; padding-bottom: 81px; overflow: hidden }
.ys h2 { margin-bottom: 58px }
.ys .ys1 dt, .ys .ys3 dt { float: left }
.ys .ys1 dd, .ys .ys3 dd { float: right }
.ys .ys2 dt, .ys .ys4 dt { float: right }
.ys .ys2 dd, .ys .ys4 dd { float: left }
.ys h4 { height: 68px; margin-bottom: 46px; margin-top: 60px }
.ys h4 img { width: 68px; height: 68px; background: #41a8e9; margin-right: 19px; display: block; float: left }
.ys h4 span { display: block; font-size: 36px; line-height: 100%; color: #41a8e9; padding-top: 8px; padding-bottom: 20px; border-bottom: 1px solid #E5E5E5; position: relative; float: left }
.ys h4 span:after { position: absolute; content: ""; width: 40px; height: 7px; background: #41a8e9; left: 40px; bottom: -4px; z-index: 3 }
.ys p { font-size: 16px; line-height: 24px; color: #333; clear: both; margin-bottom: 8px; letter-spacing: .5px }
.ys p:before { content: ">"; padding-right: 5px }
.ys li { margin-top: 3px; width: 227px; float: left; margin-right: 29px; text-align: center; line-height: 0 }
.ys li img {width: 227px;}
.ys li span { display: block; font-size: 15px; line-height: 100%; color: #333; margin-top: 16px }
.ys li:last-child { margin-right: 0 }
.ys dl { clear: both }
.ys .ys1 dt { width: 600px; height: 448px }
.ys .ys1 dd { width: 500px }
.ys .ys2 dd, .ys .ys3 dd { width: 498px }
.ys .ys2 dt, .ys .ys3 dt { width: 600px; height: 629px; position: relative }
.ys .ys2 dt img, .ys .ys3 dt img { position: absolute; width: auto }
.ys .ys3 dd { width: 488px }
.ys .ys3 dd h4 { margin-top: 49px }
.ys .ys3 dt img { right: 0; top: 0 }
.ys .ys4 dt { width: 600px; height: 451px }
.ys .ys4 dd { width: 528px }

.sm_banner { background: url(../images/sm_bg.jpg) no-repeat center top; height: 250px }
.sm_banner h2 strong { display: block; font-size: 30px; line-height: 100%; color: #fff600; padding-top: 24px; font-weight: 400 }
.sm_banner h2 em { font-size: 48px; line-height: 100%; color: #fff; font-weight: 400; display: block; margin-top: 50px; margin-bottom: 29px }
.sm_banner h2 i { font-style: italic }
.sm_banner h2 span { display: block; padding-left: 253px; font-size: 24px; line-height: 100%; color: #fff; position: relative; font-weight: 400 }
.sm_banner h2 span:before { position: absolute; content: ""; width: 178px; height: 1px; background: rgba(255, 255, 255, .48); left: 64px; top: 11px }
.sm_banner div.fr span { display: block; font-size: 18px; line-height: 100%; color: #fff; padding-top: 49px; text-align: right }
.sm_banner div.fr em { display: block; font-style: italic; font-size: 30px; line-height: 100%; color: #fff600; margin-top: 26px; margin-bottom: 32px }
.sm_banner div.fr a { display: block; float: right; width: 120px; height: 36px; background: #41a8e9; border-radius: 5px; font-size: 14px; line-height: 36px; color: #fff600; text-align: center; -o-transition: all .3s ease; transition: all .3s ease }
.sm_banner div.fr a:hover { width: 140px }

.case { background: #F6F6F6; padding-top: 112px; padding-bottom: 56px }
.case_nav { margin-top: 51px; margin-bottom: 29px }
.case_nav li { width: 10%; text-align: center; height: 36px; float: left }
.case_nav li a { display: block; font-size: 16px; line-height: 36px; color: #333; font-weight:normal; }
.case_nav li.on, .case_nav li:hover { background: #41a8e9; border-radius: 18px }
.case_nav li.on a, .case_nav li:hover a { color: #FFF600 }
.case_con dl { height: 417px }
.case_con dt { width: 740px; height: 417px; overflow: hidden; float: left }
.case_con dt img { width: 740px; height: 417px }
.case_con dd { width: 460px; height: 417px; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right; padding: 70px 43px 0 53px; position: relative }
.case_con dd img { width: 132px; height: 132px; border-radius: 50%; border: 1px solid #41a8e9; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 36px; left: -66px }
.case_con dd h4 { margin-left: 36px; font-weight: 400 }
.case_con dd h4 strong { font-size: 24px; line-height: 34px; color: #333; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; padding-bottom: 22px; font-weight: 400 }
.case_con dd h4 strong:before { position: absolute; content: ""; width: 40px; height: 7px; background: #41a8e9; z-index: 3; bottom: 0; left: 35px }
.case_con dd h4 strong:after { position: absolute; content: ""; width: 176px; height: 1px; background: #E5E5E5; z-index: 2; bottom: 3px; left: 6px }
.case_con dd h4 span { display: block; font-size: 16px; line-height: 100%; color: #666; margin-top: 33px; text-align: right }
.case_con dd p { font-size: 14px; line-height: 30px; color: #666; margin: 20px 0 34px }
.case_con dd i { display: block; width: 110px; height: 36px; background: #41a8e9; border-radius: 5px; font-size: 14px; line-height: 36px; color: #fff600; text-align: center }

.brand { margin-top: 18px; position: relative }
.brand .tempWrap { margin-left: -12px }
.brand ul { width: 220px; margin-left: 12px; margin-right: 13px }
.brand li { width: 220px; height: 100px; margin-top: 24px; margin-bottom: 24px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, .07) }
.brand li img {width: 220px;}
.brand_switch div { position: absolute; top: 117px; width: 41px; height: 41px; cursor: pointer; z-index: 2; filter: grayscale(100%); -webkit-filter: grayscale(100%); opacity: .8; -o-transition: all .3s ease; transition: all .3s ease }
.brand_switch .prev { left: -86px }
.brand_switch .next { right: -86px }
.brand_switch div:hover { filter: grayscale(0); -webkit-filter: grayscale(0); opacity: 1 }

.news { padding-top: 78px; padding-bottom: 82px }
.news h2 { margin-bottom: 54px }
.news .news_title { padding-top: 4px; height: 25px; border-left: 6px solid #41a8e9; padding-left: 19px; margin-bottom: 17px }
.news .news_title .more a { font-size: 14px; line-height: 25px; color: #999; font-family: arial; text-transform: uppercase; float: right }
.news h3 { display: inline-block; position: relative }
.news h3 a { font-size: 18px; line-height: 25px; color: #333; font-weight: 400 }
.news h3:first-child { padding-right: 26px; margin-right: 25px }
.news h3:first-child:after { position: absolute; content: ""; width: 1px; height: 18px; right: 0; top: 4px; background: #333 }
.news h3.on a { font-weight: 700 }
.company { width: 762px }
.company li { width: 457px; height: 108px; border-top: 1px solid #E3E3E3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right }
.company li span { display: block; width: 92px; padding-top: 30px; float: left; font-size: 16px; line-height: 100%; color: #666; font-family: arial; text-align: right; margin-right: 60px }
.company li span i { display: block; font-size: 30px; line-height: 100%; color: #333 }
.company li h4 { font-size: 14px; line-height: 18px; color: #333; padding-top: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.company li p { font-size: 13px; line-height: 24px; color: #666; margin-top: 7px }
.company li:first-child { width: 254px; height: 326px; float: left; margin-right: 51px; position: relative; overflow: hidden }
.company li:first-child h4 { position: absolute; padding: 0 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 62px; left: 0; bottom: 0; background: rgba(65, 168, 233, .6); font-size: 15px; line-height: 62px; color: #fff600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400 }
.company li:last-child { border-bottom: 1px solid #E3E3E3 }
.company li:hover h4 { color: #41a8e9 }
.company li:first-child:hover h4 { color: #FFF600 }
.faq { width: 290px }
.faq h3 { display: block; margin-right: 0 !important; padding-right: 0 !important }
.faq h3 a { font-weight: 700 }
.faq h3 span { font-size: 14px; line-height: 25px; color: #999; font-family: arial; text-transform: uppercase; float: right; font-weight: 400 }
.faq h3:after { display: none }
.faq .pic { margin: 21px 0 19px; width: 290px; height: 116px }
.faq li { margin-bottom: 13px; -o-transition: all .3s ease; transition: all .3s ease }
.faq li h4 { font-size: 14px; line-height: 28px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 58px; position: relative; -o-transition: all .3s ease; transition: all .3s ease }
.faq li h4:before { position: absolute; content: "Q"; width: 28px; height: 28px; font-size: 14px; line-height: 28px; color: #464646; text-align: center; left: 0; top: 0 }
.faq li p { display: none; font-size: 13px; line-height: 24px; color: #666; padding-left: 47px; position: relative }
.faq li p:before { position: absolute; content: "A"; width: 28px; height: 28px; background: #F6F4F5; font-size: 14px; line-height: 28px; color: #41a8e9; text-align: center; left: 0; top: 0; font-weight: 700 }
.faq li.cur { padding-bottom: 11px; border-bottom: 1px solid #E3E3E3; margin-bottom: 15px }
.faq li.cur h4 { padding-left: 47px }
.faq li.cur h4:before { background: #41a8e9; color: #FFF600 }
.faq li.cur p { display: block }

.about { overflow: hidden; position: relative; height: 589px }
.about dt { width: 960px; height: 591px; position: absolute; left: 50% }
.about dd { width: 960px; height: 591px; position: absolute; right: 50%; background: url(../images/about_bg.jpg) no-repeat left top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 77px 71px 0 360px }
.about h2 a { display: block; font-size: 48px; line-height: 100%; color: #fff; text-align: left; padding-bottom: 29px }
.about h2 a:before { background: #FFF600; left: 50px; margin-left: 0 }
.about h2 a:after { width: 300px; background: rgba(255, 255, 255, .42); left: 0; margin-left: 0 }
.about h2 a:hover { color: #fff }
.about h2 span { text-align: left; color: #fff; margin-top: 26px }
.about p { font-size: 14px; line-height: 24px; color: #fff; margin: 20px 0 35px }
.about p a { font-weight: 700; color: #FFF600 }
.album_nav li { float: left; margin-bottom: 26px }
.album_nav li a { display: block; font-size: 18px; line-height: 33px; color: #fff; text-align: center; width: 100px; margin-right: 19px; font-weight:normal; }
.album_nav li.on a { color: #333; background: #FFF600; border-radius: 5px }
.album_con li { width: 157px; height: 118px; float: left; overflow: hidden; margin-right: 27px }
.album_con li img { width: 157px; height: 118px }
.album_con li:last-child { margin-right: 0 }

.f_info { padding-top: 46px !important }
.links { position: absolute;left: 50%;bottom: 5px;z-index: 2;font-size: 14px;color: #333;line-height: 1;overflow: hidden;width: 892px;height: auto;margin-left: -600px;line-height: 24px;}
.links em { font-style: normal; font-size: 15px; display: block; float: left; font-weight: 700 }
.links a { color: #868686; margin-right: 33px; transition: .3s ease; -o-transition: .3s ease }
.links a:hover { font-weight: 700 }

@-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 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 }
}