@charset 'utf-8';
body { font-family: '微软雅黑', Arial; background: #fff }
.scale_img dl dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img dl:hover dt 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: 400; display: block; text-align: center; font-size: 48px; line-height: 100%; color: #333; position: relative; padding-bottom: 12px }
h2.main_title a:hover { color: #333 }
h2.main_title span { display: block; font-size: 18px; line-height: 100%; color: #666; font-weight: 400; text-align: center }

.fullSlide { position: relative; z-index: 1; clear: both; width: 100% }
.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: #c53535 }
.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: 138px; padding-bottom: 73px }
.intro dl { height: 270px }
.intro dd { width: 839px; height: 270px; float: left; position: relative; background: #FAF3ED; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 87px 90px 0 74px }
.intro dd h2 { width: 320px; height: 70px; background: #333; text-align: center; left: 0; top: -35px; position: absolute }
.intro dd h2 a { font-size: 28px; line-height: 70px; color: #fff; display: block; font-weight: 700; letter-spacing: 1px }
.intro dd h3 { font-size: 22px; line-height: 100%; color: #000; font-weight: 400; margin-bottom: 18px }
.intro dd h3 strong { color: #c53535 }
.intro dd h3 span { margin-right: 20px }
.intro dd p { font-size: 15px; line-height: 30px; color: #333 }
.intro_tel {padding-left:36px;background: url(../images/intro_tel.png) no-repeat left center; font-size:14px;color:#435061; line-height:1;margin-top:18px; min-height:25px;}
.intro_tel strong{color: #C53535;font-size: 24px;line-height: 1;vertical-align: sub;}
.intro dt { width: 361px; height: 270px; overflow: hidden }
.intro dt img { width: 361px; height: 270px }

.product h2 { padding-top: 42px; background: url(../images/product_t.png) no-repeat center top; margin-bottom: 57px }
.pro1 { padding-top: 60px; padding-bottom: 100px; height: 1080px; background: url(../images/pro1_bg.jpg) no-repeat center top }
.pro1 h3 a { display: block; text-align: center; font-size: 28px; line-height: 100%; color: #fff }
.pro1 h3 a img { display: block; margin: 0 auto 19px }
.pro1_nav { height: 40px; text-align: center; margin: 42px 0 60px; font-size: 0 }
.pro1_nav h4 { width: 120px; height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .3); display: inline-block; text-align: center; margin: 0 10px; -o-transition: all .3s ease; transition: all .3s ease }
.pro1_nav h4 a { font-size: 16px; line-height: 38px; color: #fff; display: block; font-weight: 400 }
.pro1_nav h4:hover { background: #c53535; border-color: #c53535 }
.pro_con { width: 1100px; margin: 0 auto }
.pro_con dl { width: 450px }
.pro_con dt { width: 450px; height: 450px; overflow: hidden }
.pro_con dt img { width: 450px; height: 450px }
.pro_con dd { padding: 33px 31px 0 24px }
.pro_con dd p { font-size: 14px; line-height: 24px; color: #fff }
.pro_con dd p strong { font-size: 22px; line-height: 100%; color: #fff; font-weight: 400; white-space: nowrap; display: block; margin-bottom: 15px; letter-spacing: 1.5px }
.pro_con .morebtn { font-size: 0; margin-top: 58px }
.pro_con .morebtn a { display: inline-block; width: 120px; height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 11px; font-size: 16px; line-height: 38px; color: #fff; text-align: center; -o-transition: all .3s ease; transition: all .3s ease; border: 1px solid #ccc }
.pro_con .morebtn .ask { background: #c53535; border-color: #c53535 }
.pro_con .morebtn a:hover { width: 140px }
.pro_con ul { width: 640px }
.pro_con ul li { width: 300px; height: 400px; float: left; position: relative; margin-left: 20px; margin-bottom: 20px; overflow: hidden }
.pro_con ul li img { width: 300px; height: 400px }
.pro_con ul li h4 { position: absolute; background: rgba(0, 0, 0, .5); width: 100%; height: 80px; bottom: 0; font-size: 16px; line-height: 80px; color: #fff; text-align: center; font-weight: 400 }

.pro_con1 { padding: 66px 0 112px; overflow: hidden }
.pro_con1 h3 a { display: block; text-align: left; font-size: 28px; line-height: 100%; color: #333 }
.pro_con1 h3 a img { display: block; margin-bottom: 18px }
.pro_con1 .pro1_nav { margin: 36px 0 50px; overflow: hidden; text-align: left; width: 520px; height: 100px }
.pro_con1 .pro1_nav h4 { float: left; margin-right: 10px; margin-left: 0; margin-bottom: 10px; text-align: center; border-color: #ccc }
.pro_con1 .pro1_nav h4 a { color: #666; -o-transition: all .3s ease; transition: all .3s ease }
.pro_con1 .pro1_nav h4:hover { border-color: #c53535 }
.pro_con1 .pro1_nav h4:hover a { color: #fff }
.pro_con1 .pro1_nav h4:last-child { border: 0 }
.pro_con1 .pro1_nav h4:last-child a { color: #c53535 }
.pro_con1 .pro1_nav h4:last-child:hover { border: 0; background: 0 0 }
.pro_con1 .pro1_nav h4:last-child:hover a { font-weight: 700; color: #c53535 }
.pro_con1 ul li { margin-left: 0; margin-right: 20px }
.pro_con1 dl { margin-top: 36px }
.pro_con1 dt { width: 450px; height: 600px }
.pro_con1 dt img { width: 450px; height: 600px }
.pro_con1 dd p { color: #666 }
.pro_con1 dd p strong { color: #333 }
.pro_con1 dd .more { color: #666 }

.morepro { background: url(../images/bg.png) repeat; padding-top: 76px; padding-bottom: 118px }
.morepro h2 { padding-top: 42px; margin-bottom: 47px; background: url(../images/morepro_t.png) no-repeat center top }
.morepro dl { width: 355px; height: 581px; float: left; position: relative; margin-bottom: 121px }
.morepro dt { width: 355px; height: 436px; overflow: hidden }
.morepro dt>img { width: 355px; height: 436px }
.morepro dd { width: 355px; height: 145px; background: #fff; text-align: center; padding-top: 26px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.morepro dd h4 { position: absolute; top: 0; left: 0; width: 355px; height: 436px; background: url(../images/morepro_bg.png) no-repeat center top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 28px; font-weight: 400 }
.morepro dd h4 a { display: block; height: 100% }
.morepro dd h4 img { display: block; margin: 0 auto }
.morepro dd h4 span { display: block; font-size: 24px; line-height: 100%; color: #fff; text-align: center }
.morepro dd p { font-size: 18px; line-height: 100%; color: #333 }
.morepro dd .ask { display: block; width: 182px; height: 45px; background: #fff url(../images/ask.png) no-repeat 27px 11px; text-align: left; font-size: 22px; line-height: 45px;border:1px solid #c53535; color: #c53535; text-indent: 63px; -o-transition: all .3s ease; transition: all .3s ease; margin: 25px auto }
.morepro dd .ask:hover {color:#fff;background-color:#c53535;background-image:url(../images/ask1.png); background-repeat:no-repeat;}
.morepro dl:nth-child(2) { margin: 0 67px }

.custom { background: url(../images/sm_bg.jpg) no-repeat left top; height: 252px }
.custom h3 a { display: block; font-size: 36px; line-height: 100%; color: #fff; padding-top: 74px; margin-left: 138px }
.custom .btn { margin-top: 64px; margin-left: 71px; font-size: 0 }
.custom .btn a { display: inline-block; width: 134px; height: 33px; background: #fff; margin-right: 7px; font-size: 14px; line-height: 33px; color: #c53535; text-align: center; -o-transition: all .3s ease; transition: all .3s ease }
.custom .btn a:hover { font-weight: 700 }

.ys { background: url(../images/bg.png) repeat; overflow: hidden }
.ys h2 { padding-top: 50px; background: url(../images/ys_t.png) no-repeat center top; margin-bottom: 46px }
.ys h2 a, .ys h2 a:hover, .ys h2 span { color: #fff }
.ys .content { position: relative }
.ys_bg { background: url(../images/ys_bg.jpg) no-repeat center top; padding-top: 66px }
.ys_con { width: 1172px; height: 502px; margin: 0 auto; background: #fff; padding: 15px 14px }
.ys_con dl { width: 1172px; height: 502px; position: relative; overflow: hidden }
.ys_con dl dt img { width: 1172px; height: 502px }
.ys_con dd { position: absolute; width: 740px; height: 98px; left: 198px; bottom: 30px; z-index: 2; background: rgba(0, 0, 0, .7) }
.ys_con dd h4 { width: 193px; height: 98px; float: left; background: #fff; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 37px; font-size: 28px; line-height: 98px; color: #c53535; font-weight: 700 }
.ys_con dd h4 span { display: block; font-weight: 400; font-size: 18px; line-height: 100%; color: #fff; margin-top: 6px }
.ys_con dd h4:after { position: absolute; content: ""; border-width: 14px; border-style: solid; border-color: transparent transparent transparent #fff; top: 35px; right: -28px }
.ys_con dd p { width: 448px; float: left; margin: 19px 0 0 45px; font-size: 16px; line-height: 28px; color: #fff }
.ys_switch div { width: 120px; height: 40px; position: absolute; top: 250px; cursor: pointer; -o-transition: all .3s ease; transition: all .3s ease; background: #B5B5B5 }
.ys_switch div:hover { background: #c53535 }
.ys_switch .prev { left: -76px }
.ys_switch .next { right: -76px }
.ys_nav { padding: 41px 40px 95px; text-align: center; overflow: hidden; background: url(../images/ys_nav.png) no-repeat center 45px; cursor: pointer }
.ys_nav li { width: 33.33%; float: left }
.ys_nav li em { display: block; font-weight: 700; -o-transition: all .3s ease; transition: all .3s ease; font-size: 20px; line-height: 100%; color: #303030 }
.ys_nav li span { display: block; width: 9px; height: 9px; background: #303030; border-radius: 50%; position: relative; margin: 0 auto 25px }
.ys_nav li span:before { position: absolute; content: ""; width: 21px; height: 21px; border: 1px solid #303030; border-radius: 50%; top: -7px; left: -7px; -o-transition: all .3s ease; transition: all .3s ease }
.ys_nav li:hover em, .ys_nav li.on em { color: #c53535 }
.ys_nav li:hover span:before, .ys_nav li.on span:before { background: #c53535 url(../images/ysi.png) no-repeat center; width: 25px; height: 25px; top: -9px; left: -9px; border-color: #c53535 }

.case { background: url(../images/bg.png) repeat; padding-bottom: 75px; overflow: hidden; clear: both }
.case h2 { padding-top: 49px; background: url(../images/case_t.png) no-repeat center top; margin-bottom: 46px }
.case .content { position: relative }
.case_con dl { width: 282px; margin-right: 24px; float: left }
.case_con dt { width: 282px; height: 153px; overflow: hidden }
.case_con dt img { width: 282px; height: 153px }
.case_con dd { width: 282px; height: 246px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #E5E5E5; border-top: 0; background: #fff; padding: 30px 34px 0 }
.case_con dd h4 { font-size: 18px; line-height: 36px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.case_con dd p { font-size: 14px; line-height: 24px; color: #333; margin: 10px 0 20px }
.case_con dd i { display: block; font-size: 14px; line-height: 100%; color: #7d7d7d }
.case_con dl:hover dd h4, .case_con dl:hover dd i { color: #c53535 }
.case_switch div { position: absolute; top: 155px; width: 26px; height: 50px; padding: 20px 48px 20px 0; cursor: pointer; z-index: 2 }
.case_switch div img { -o-transition: all .3s ease; transition: all .3s ease; filter: grayscale(100%); -webkit-filter: grayscale(100%); opacity: .48 }
.case_switch .prev { left: -74px }
.case_switch .next { right: -74px; padding: 20px 0 20px 48px }
.case_switch div:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); opacity: 1 }
.case .morebtn { margin-top: 51px; position: relative; height: 40px }
.case .morebtn a { width: 120px; height: 40px; display: block; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-transition: all .3s ease; transition: all .3s ease; border: 1px solid #ccc; font-size: 16px; line-height: 38px; color: #666; text-align: center }
.case .morebtn a:hover { width: 140px }
.case .morebtn a:first-child { right: 50%; margin-right: 10px }
.case .morebtn a:last-child { left: 50%; margin-left: 10px; border-color: #c53535; background: #c53535; color: #fff }

.news { padding-top: 75px; padding-bottom: 89px }
.news h2 { padding-top: 35px; background: url(../images/news_t.png) no-repeat center top }
.news h3 a { display: block; font-size: 20px; line-height: 100%; color: #434343; font-weight: 400; padding-bottom: 10px; border-bottom: 1px solid #E5E5E5; margin-bottom: 30px; margin-top: 57px }
.news h3 a span { float: right; font-size: 14px; line-height: 20px; color: #7d7d7d; -o-transition: all .3s ease; transition: all .3s ease }
.news h3 a span:hover { color: #c53535 }
.news dl dd span { display: block; padding-left: 22px; background: url(../images/ni.png) no-repeat left center; font-size: 14px; line-height: 15px; color: #c53535 }
.company { width: 549px }
.company h3 a { background: url(../images/ni1.png) no-repeat 90px 2px }
.company dl { height: 140px; margin-bottom: 30px }
.company dt { width: 249px; float: left; height: 140px; overflow: hidden }
.company dt img { width: 249px; height: 140px }
.company dd { width: 280px; float: right }
.company dd h4 { font-size: 16px; line-height: 22px; color: #313131; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.company dd p { font-size: 14px; line-height: 24px; color: #7c7c7c; margin: 13px 0 16px }
.company dd p i { color: #c53535 }
.company dl:hover dd h4 { color: #c53535 }
.company ul { width: 549px; height: 189px; border: 1px solid #dcdcdc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 23px 0 27px }
.company ul li { height: 36px }
.company ul li h4 { float: left; width: 320px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 36px; color: #434343; font-weight: 400; padding-left: 16px; position: relative; -o-transition: all .3s ease; transition: all .3s ease }
.company ul li h4:before { position: absolute; content: ""; left: 0; top: 14px; width: 8px; height: 8px; background: #434343; border-radius: 50%; -o-transition: all .3s ease; transition: all .3s ease }
.company ul li span { float: right; font-size: 16px; line-height: 36px; color: #7d7d7d; -o-transition: all .3s ease; transition: all .3s ease }
.company ul li:hover h4 { color: #c53535 }
.company ul li:hover h4:before { background: #c53535 }
.company ul li:hover span { color: #434343 }
.faq { width: 548px }
.faq h3 a { background: url(../images/ni2.png) no-repeat 87px 2px }
.faq dl { height: 102px; margin-bottom: 26px }
.faq dt { width: 183px; height: 102px; overflow: hidden; float: left }
.faq dt img { width: 183px; height: 102px }
.faq dd { width: 338px; float: right }
.faq dd h4 { font-size: 16px; line-height: 18px; color: #313131; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.faq dd h4 i { color: #c53535 }
.faq dd p { font-size: 14px; line-height: 24px; color: #707070; margin: 8px 0 10px }
.faq dl:hover dd h4 { color: #c53535 }

.about { background: url(../images/bg.png) repeat; padding-top: 73px; padding-bottom: 132px; overflow: hidden }
.about h2 { padding-top: 42px; background: url(../images/about_t.png) no-repeat center top; margin-bottom: 55px }
.about_con { width: 300px; margin-top: 100px }
.about_con p { font-size: 16px; line-height: 30px; color: #333; margin-bottom: 74px }
.about_con p strong { display: block; font-size: 30px; line-height: 100%; color: #333; margin-bottom: 27px }
.about_con .morebtn { font-size: 0; margin-top: 58px }
.about_con .morebtn a { display: inline-block; width: 120px; height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 11px; font-size: 16px; line-height: 38px; color: #666; text-align: center; -o-transition: all .3s ease; transition: all .3s ease; border: 1px solid #ccc }
.about_con .morebtn .ask { background: #c53535; border-color: #c53535; color: #fff }
.about_con .morebtn a:hover { width: 140px }
.enterprise { width: 819px; height: 429px; background:#ededed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 25px 42px 0 46px; position: relative }
.enterprise .a_switch { width: 90px; height: 34px; background: #fff; float: right; margin-bottom: 23px; border-radius: 5px; cursor: pointer }
.enterprise .a_switch div { width: 45px; height: 34px; float: left }
.enterprise .a_switch .prev { background: #c53535; border-radius: 5px 0 0 5px }
.feature { width: 215px; height: 388px; background: #fff; clear: both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 36px; padding-left: 75px }
.feature li { margin-bottom: 43px }
.feature em { display: block; font-size: 24px; line-height: 100%; color: #333; margin-bottom: 8px; font-weight: 700 }
.feature em i { font-size: 16px; vertical-align: text-top }
.feature span { display: block; font-size: 13px; line-height: 100%; color: #333 }
.album { width: 516px; height: 388px }
.album li { width: 516px; height: 388px }
.album li img { width: 516px; height: 388px }

.links { font-size: 14px; color: rgba(255, 255, 255, .3); line-height: 80px; background: #1e1e1e; height: 80px; overflow: hidden }
.links em { font-style: normal; font-size: 16px; display: block; float: left; margin-right: 163px }
.links em span { font-family: arial; text-transform: uppercase; padding-left: 10px }
.links a { color: rgba(255, 255, 255, .3); margin-right: 66px; transition: .3s ease; -o-transition: .3s ease }
.links a:hover { color: rgba(255, 255, 255, .6) }

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