@charset "utf-8";

/*banner*/
@font-face {
    font-family:'wrjz';
    src: url('../fonts/wrjz.eot');
    src:url("../fonts/wrjz.ttf");
}
.banner{position: relative;}
.banner li{width: 100%;}
.banner li img{display: block;width: 100%;}
.banner .content{position: relative;}
.ban_pg{position: absolute;left: 0;bottom: 39px;height:10px;z-index: 10;width: 100%;text-align: center;}
.ban_pg i{display: inline-block;width: 10px;height: 10px;background: #eee;border-radius: 100%;margin: 0 10px;vertical-align: top;}
.ban_pg i.on{background: #e3590b;}

.banners{position: relative;}
.banners:before{ position: absolute; left: 20%; bottom: 20%; content: ""; width: 639px; height: 260px;background: url(../images/ban.png) no-repeat;z-index: 55!important;}

.banner .prev{position:absolute;top:45%;left:19%;z-index: 10;cursor: pointer;transition: all .25s linear;}
.banner .next{position:absolute;top:45%;right:1.5%;z-index: 10;cursor: pointer;transition: all .25s linear;}
.banner em{text-align: center;width: 60px; height: 60px;border-radius: 50%;background: rgba(227,89,11,0.8);}
.banner em img{height: 30px;display: inline-block;margin-top: 15px;}

.banner:hover  .prev{opacity: 1;}
.banner:hover .next{opacity: 1;}
.c_right ul li img{ width: 381px;}
.banner .prev{position:absolute;top:82.5%;left:19%;z-index: 10;cursor: pointer;transition: all .25s linear;background:url(../images/jiantou.png) no-repeat;width: 64px;
    height: 64px;}
.banner .prev:hover{background:url(../images/jiantou.png) no-repeat -64px 0px;;}
.banner .next{position:absolute;top:82.5%;left:23%;z-index: 10;cursor: pointer;transition: all .25s linear;background:url(../images/jiantou.png) no-repeat -192px 0px;;width: 64px;
    height: 64px;}
.banner .next:hover{background:url(../images/jiantou.png) no-repeat -128px 0px;}
.pageState{ font-size: 0; position: absolute; top: 84.5%; left: 27.5%;}
.pageState span{ color: #333333; font-size: 36px;font-family:'wrjz'; line-height: 100%;}
/**/
.tils{ overflow: hidden; padding: 90px 0 55px 0;background:url(../images/tils.jpg) no-repeat center 0; height: 540px; box-sizing: border-box;}
.tils h2  i em{ color: #00bcb4;}
.tils h2 span{ color: #262626; font-size: 20px; padding-top: 20px;}
.tils h2 span em{font-weight: bold;}
.tils h2{ padding-bottom: 73px;}
.tils h2:before{top: 125px;}
.tils p{ height: 126px; font-size: 16px; color: #595959; line-height: 32px; text-align: center; margin: 0 60px;}

.tils ul{ padding-left: 61px;}
.tils ul li{ float: left; line-height: 100%; font-size: 18px; color: #595959;border-right: 1px dashed #989898; padding-right: 90px; margin-right: 90px;}
.tils ul li:last-of-type{ padding-right: 0; border-right: none; margin-right: 0;}
.tils ul li em{ display: block; line-height: 100%; padding-top: 5px;}
.tils ul li i{ display: block; color: #333333; position: relative;}
.tils ul li i span{ display: inline-block; line-height:86%;font-family:'wrjz'; font-size: 66px;font-weight: normal;}
.tils ul li i strong{font-weight:normal; line-height: 100%;font-size: 48px; display: inline-block;    position: relative;    top: -8px;}
.tils ul li:last-of-type{ margin-right: 0;}
.tils ul li b{ position: absolute; right: -28px;background:url(../images/tl.png) no-repeat; height: 52px; line-height: 100%; text-align: center;font-weight: normal; font-size: 20px; color: #333333; padding-top:14px; top: -8px;}
/**/

/**/
/**/
/**/
h2{ position: relative; line-height: 100%; text-align: center; font-size: 44px; color: #333333; padding-bottom:52px;}
h2:before{display: inline-block;width:46px;height:2px;background: #00bcb4;content: "";position: absolute;top:95px;transform: translateX(-50%);transition: all 0.6s cubic-bezier(.075, .82, .165, 1); left:49.85%;opacity: 1;}
h2:hover:before{  width:95px;opacity: 1;}
h2 span{ display: block; font-weight: normal; font-size: 18px; color: #666666; line-height: 100%; padding-top: 13px;}

/**/
/**/
/**/
/**/
/**/
/**/
.kji{padding-top: 79px; height: 1007px;}
.kji h2{ padding-bottom: 45px;}
.kji h2 span{ color: #333;}
.kji_l{ margin-left: -179px; width: 693px; float: left; position: relative;}
.kji_l em{ display: block; left: 48px; top: 64px; position: absolute;background:url(../images/kji.png) no-repeat;min-height: 137px; width: 280px; box-sizing: border-box; padding: 59px 0 0 17px; font-size: 18px; color: #333333; line-height: 100%;}
.kji_l em i{ display: block;}
.kji_l em span{ display: block; letter-spacing: 9px; height: 39px;}
.kji_l em i a{ display: inline-block; width: 110px; height: 35px; text-align: center; line-height:35px; border: 2px solid #fff799; font-size: 16px; color: #333333;transition: all 0.2s;}
.kji_l em i a:last-of-type{ background: #fff799;}
.kji_l em i a:hover{ letter-spacing: 4px;}

.kji_r{ margin-right: -178px; width: 864px;}
.kji_r ul li{ float: left; width:427px;margin-left: 4px; margin-bottom:8px;    font-size: 0;    line-height: 0;}
.kji_r ul li a{ display:block;}
.kji_r ul li img{ width: 427px;}
.kji_r ul li em{ display: block; height: 76px; line-height: 76px; border: 1px solid #e5e5e5; border-top: none; padding: 0 29px; color: #1a1a1a; font-size: 20px;background:url(../images/xil_m.jpg) no-repeat 373px 23px #fff; }
/**/
.xil{ overflow: hidden; padding-top: 68px; height: 639px; background: #f2f2f2;}
.xil h2 span{ color: #333333;}
.xil p{ overflow: hidden; height: 48px; text-align: center; line-height: 100%; color: #333333; font-size: 18px;}
.xil p a{ display: inline-block; line-height: 100%; color: #333; padding: 0 25px; text-transform: uppercase;}
.xil p a:hover{ color: #00bcb4;}
.xi_uu{ position: absolute; cursor: pointer; width: 56px; height: 56px; left: -102px; top: 313px;background:url(../images/z_uu.png) no-repeat; }
.xi_uu:hover{background:url(../images/z_dd1a.png) no-repeat;}
.xi_dd{ position: absolute; cursor: pointer; width: 56px; height: 56px; right: -102px; top: 313px;background:url(../images/z_uu1.png) no-repeat; }
.xi_dd:hover{background:url(../images/z_dd1.png) no-repeat;}
.xil ul li{ float: left; width: 397px; margin-right: 4px;}
.xil ul li a{ display:block;}
.xil ul li img{ width: 397px;}
.xil ul li em{ display: block; height: 56px; line-height: 56px; border: 1px solid #e5e5e5; border-top: none; padding: 0 24px; color: #1a1a1a; font-size: 20px;background:url(../images/xil_m.jpg) no-repeat 348px 13px #fff; }
/**/
.chd{ overflow: hidden;background:url(../images/chd.jpg) no-repeat center 0; height: 356px;}
.chd h3{ float: left; width: 303px; margin-top: 85px; color: #fff; line-height: 100%; font-weight: normal; font-size: 16px;}
.chd h3 i{ display: block;font-weight: bold; font-size: 28px; line-height: 100%; letter-spacing: 2px; padding-bottom: 5px;}
.chd h3 em{ display: block; margin-top: 11px; padding-top: 15px; height: 61px; font-size: 36px;font-weight: bold;background:url(../images/chd_a.png) no-repeat; line-height: 100%;}
.chd h3 strong{ display: block; border: 3px solid #fff799; line-height: 43px; overflow: hidden;}
.chd h3 strong span{ display: inline-block; float: left; width: 179px; text-align: center; font-size: 16px; color: #fff;font-weight: normal;}
.chd h3 strong a{ display: inline-block; float: left; line-height: 43px; text-align: center; background: #fff799; width: 118px; font-size: 16px; color: #333333; font-weight: bold; transition: all 0.2s;}
.chd h3 strong a:hover{ letter-spacing: 3px;}
.chd ul{ float: right; margin-right: -48px;}
.chd ul li{ float: left; margin-left: 29px; margin-top: 84px; width: 191px; height: 192px; position: relative; text-align: center; color: #fff;}
.chd ul li span{ display: block; padding-top: 35px; height: 76px;transition: all 0.2s;}
.chd ul li i{ display: block; line-height: 100%; font-size: 24px; font-weight: bold; letter-spacing: 2px;}
.chd ul li:before{ position: absolute; left: 0;top: 0; content: "";background:url(../images/chd.png) no-repeat; width: 191px; height: 192px;}
.chd ul li:hover span{ animation-duration: 1.5s;animation-name: flipInX;}
    /**/
.ys{ overflow: hidden; height:913px; padding-top: 98px;}
.ys .con{margin-top:0;}.ys h2{ margin-bottom:25px;}
.ys .con li{width:11.8%;overflow: hidden;float: left;position: relative;border-right:8px solid #fff;box-sizing: border-box;transition: all .25s linear;}
.ys .con li:last-of-type{ border-right: none;}
.ys .con li > em{display: block;width: 100%;overflow: hidden;}
.ys .con li > em img{opacity: 1;display: block;min-height:760px;}
.ys .con li .hov{position: absolute;top: 0;z-index: 1;width: 100%;height: 100%;background: rgba(0,0,0,0.7);box-sizing: border-box;padding:60%  0 0 0; right: 0; text-align: center;}
.ys .con li:nth-of-type(2) .hov em{background:url(../images/pin_pic02.png) no-repeat center bottom;}
.ys .con li:nth-of-type(3) .hov em{background:url(../images/pin_pic01.png) no-repeat center bottom;}
.ys .con li .hov p,.ys .con li .hov h4{ display: none; }
.ys .con li .hov em{ display: block; line-height: 100%; font-size: 32px; font-weight: normal; padding-bottom: 75px;background:url(../images/pin_pic03.png) no-repeat center bottom; position: relative;}
.ys .con li .hov em:before{ position: absolute; left: 49%; width: 1px; height: 125%; background: #fff; content: ""; top: 145%;}
.ys .con li .hov em:after{ position: absolute; left: 40.8%;; width:37px; height:37px; background: #fff; content: ""; top: 300%;background:url(../images/ys_m1.png) no-repeat }
.ys .con li .hov em span{ display: block; padding-bottom: 12px;}
.ys .con li .hov h3{ color: #fff; font-size: 36px; position: relative; }
.ys .con li .hov h3 img{ display: none;}
.ys .con li .hov h3 i {
    display: block;
    font-size: 15px;
    color: #fff;
    position: absolute;
    left: 0;
    top:37px;
    font-weight: normal;
    line-height: 150%;
    width: 100%;}
.ys .con li .hov h3 i span{ display: block;}
.ys .con li .hov h3 b,.ys .con li .hov h3 strong{ display: none;}



.ys .con li.cur{width:75.3%;}
.ys .con li.cur:nth-of-type(3) .hov em{    background: #d72a1a;display: none;}
.ys .con li.cur:nth-of-type(2) .hov em{    background: #d72a1a;display: none;}
.ys .con li.cur:nth-of-type(1) .hov em{    background: #d72a1a;display: none;}
.ys .con li.cur .hov{width:87.26%;background: rgba(255,255,255,0.9);padding: 0; bottom: 45px; top: inherit; right: 6%;  height: 209px; overflow: hidden;}
.ys .con li.cur p{opacity: 1;width: auto;padding-right: 5%;}
.ys .con li.cur .hov h3{ float: left;text-align: center; background: #00bcb4; height: 168px; width:204px;  padding-top:41px; line-height: 100%; overflow: hidden; font-size: 32px; font-weight: bold;}
.ys .con li.cur .hov h3 strong{ display: block;line-height: 100%; font-weight: normal; padding-top: 7px; font-family: Arial; font-size: 12px; color: #b5e5e2;}
.ys .con li.cur .hov h3 b{ display: block; padding-top: 12px;}
.ys .con li.cur .hov h3 img{ display: block; margin:0 auto;}
.ys .con li.cur .hov p{ float:left; width: 75%; color: #333333; font-size: 16px; line-height:26px; padding: 31px 0 0 65px;}
.ys .con li.cur .hov p i{ display: block; font-size: 26px; color: #333333; font-weight: bold; padding-bottom: 12px;}
.ys .con li.cur .hov p{ display: block; padding-right: 0; text-align: left;}
.ys .con li.cur .hov p span{ display: block;}
.ys .con li.cur .hov p span strong{ display: block;font-weight: normal; padding-left: 25px;background: url(../images/ys_li.png) no-repeat 0 10px;}
/**/

.zhul{ overflow: hidden;background: url(../images/zhul.jpg) no-repeat center 0;height:686px; box-sizing: border-box; padding-top: 80px;}
.zhul h2{ padding-bottom: 65px;font-weight: normal;}
.zhul h2 span{ font-size: 20px; color: #333333;}
.zhul ul li{ float: left; width: 220px;background: url(../images/zl_ig.png) no-repeat; height: 324px; margin-left: 72px;}
.zhul ul li span{ display: block; overflow: hidden; font-size: 0; line-height: 0;margin: 9px 0 0 8px;}
.zhul ul li span img{ width:199px;}
.zl_u{ position: absolute; cursor: pointer; width: 56px; height: 56px; border-radius: 56px;background: url(../images/z_uu.png) no-repeat; left: -57px; top:268px;}
.zl_u:hover{background: url(../images/z_dd1a.png) no-repeat;}
.zl_d{ position: absolute; cursor: pointer; width: 56px; height: 56px; border-radius: 56px;background: url(../images/z_uu1.png) no-repeat; right: -57px; top:268px;}
.zl_d:hover{background: url(../images/z_dd1.png) no-repeat;}
/**/
.liuy{background: url(../images/liuy.jpg) no-repeat center bottom;height:365px; overflow: hidden;}
.liuy h3{ margin-top: 67px; text-align: center; line-height: 100%; height: 77px; color: #fff; font-size: 39px;background: url(../images/ly_h.png) no-repeat center  10px;}
.ly_fr{ float: right; width: 580px; padding-top: 38px; line-height: 100%; font-size: 18px; color: #fff;}
.ly_fr p{ margin-bottom: 16px;}
.ly_fl{ float: left; width: 589px;}
.liuy h5{  color: #fff; z-index: 66; margin-top:18px; padding-left: 66px;background: url(../images/ly_tel.png) no-repeat ; padding-bottom: 6px;}
.liuy h5 em{ display: block; overflow: hidden;font-weight: normal; padding-bottom: 10px; font-size: 14px; color: #aeafaf; line-height: 100%;}
.liuy h5 i{ display: inline-block; line-height:80%;font-family: Arial; font-size: 32px;font-weight: bold;}
.liuy ul{ overflow: hidden; width: 580px;}
.liuy ul li{ float: left; width: 265px; height: 39px; overflow: hidden; margin: 0 9px 9px 0; border: 1px solid rgba(255,255,255,0.34);}
.liuy ul li i{ display: inline-block; float: left; line-height: 39px; font-size: 15px; color: #fff; padding-left: 12px; width: 77px;}
.liuy ul li input{ display: inline-block; float: left; height: 39px; line-height: 39px; color: #fff; font-size: 16px; border:none; background: none; width: 167px;}
.liuy ul li textarea{ display: inline-block; float: left; height: 39px; line-height: 39px; color: #fff; font-size: 16px; border:none; background: none; width: 167px;}
.liuy ul li span{ display: inline-block; line-height: 39px; color: #fff799;}
.liuy ul li.btn{border: 1px solid #fff799;}
.liuy ul li.btn button{ font-size: 15px; color: #333333; border: none;background: url(../images/ly_m.png) no-repeat 162px 12px #fff799; display: block; height: 39px; line-height: 39px; padding-left: 118px; text-align: left; width:265px;  cursor: pointer; outline: none; transition: all 0.2s;}
.liuy ul li.btn button:hover{background: url(../images/ly_m.png) no-repeat 172px 12px #fff799; letter-spacing: 4px;}

/**/
.cases{overflow: hidden;background:#f2f2f2; height:769px;padding-top: 99px; position: relative;}
.cases h2 span{ color: #333333;}
.cases h2{ padding-bottom: 50px;}
.case1{ height: 575px;}
.case1 ul li{ float: left; overflow: hidden; width: 957px; position: relative;}
.case1 ul li img{ display: block; width: 957px;}
.case1 ul li em{ display: none; position: absolute; left: 0; background: rgba(0,0,0,0.36);overflow: hidden; bottom: 0; width: 100%; box-sizing: border-box; padding:24px 40px 0 55px; font-size: 16px; color: #fff; height: 119px;}
.case1 ul li em i{ display: block; font-size: 16px; line-height: 100%;  width: 667px; float: left; color: #e2e5e7; margin-top: 4px;}
.case1 ul li em i span{ display: block; font-weight: normal; font-size: 22px; color: #fff; padding-bottom: 13px;}
.case1 ul li em strong{ display: inline-block; float: right;}
.case1 ul li em strong a{ display: block; text-align: center; margin-bottom: 6px; font-size: 13px; font-weight:normal; color: #fff; width: 115px; height: 28px; border-radius: 28px; border: 2px solid #dcdcdc; line-height: 28px;}
.case1 ul li em strong a:last-of-type{background:url(../images/c_mor.png) no-repeat 20px 7px; padding-left: 41px; box-sizing: border-box; text-align: left; height: 32px;}
.case1 ul li em strong a:hover{transition: all 0.2s; width: 135px;}
.case1 ul li.roundabout-in-focus em{ display: block;}

.case_m{ }
.case_m ul{width:957px; height:539px; position: relative; margin:0 auto;}
.case_m ul li{ width:957px; height:539px;overflow: hidden; position: relative;}
.case_m ul li.roundabout-moveable-item{}
.case1 .btn_l{ position: absolute; left:-135px; top: 239px; z-index: 99;}
.case1 .btn_r{ position: absolute; right:-129px; top: 239px; z-index: 99;}
/**/
.xinw{ height:750px; padding-top: 92px;}
.xinw h2{ padding-bottom:28px;}
.xinw h2:before{ display: none;}
.xinw h3{ height:51px; box-sizing: border-box; line-height: 100%;background:url(../images/n_ico1.jpg) no-repeat 225px 15px;}
.xinw h3 a{ display: inline-block; line-height: 100%; font-size:24px; color: #333333;}
.xinw h3 i{font-weight: normal; color: #999999; font-size: 12px; font-family: Arial; padding-left: 10px;text-transform: capitalize;}
.xinw h3 span{ display: inline-block; float: right; padding-top:10px;}
.xinw h3 span a{font-weight: normal; font-size: 12px; font-family: Arial; text-transform: capitalize; color: #333333;}
.xw_l{ width: 569px;}
.xw_l dl{ height:422px; overflow: hidden;}
.xw_l dl dt{ font-size: 0; line-height: 0; overflow: hidden; margin-bottom: 23px;}
.xw_l dl dt img{ width: 569px;}
.xw_l dl dd h4{ overflow: hidden; height: 26px; line-height: 26px; margin-bottom: 11px;}
.xw_l dl dd h4 span{ display: inline-block; width: 53px; height: 22px; line-height: 22px; text-align: center; border: 2px solid #00bcb4; border-radius: 2px; color: #00bcb4;font-weight: normal; margin-right: 10px; float: left; font-size: 16px; }
.xw_l dl dd h4 a{ display: inline-block; float: left; font-size: 22px; color: #333333;font-weight: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;    width: 87%;}
.xw_l dl dd h4 a:hover,.xinw h3 a:hover{ color: #00bcb4;}
.xw_l dl dd p{ height:94px; font-size: 14px; color: #808080; line-height: 24px;}
.xw_l dl dd p a{  font-size: 14px;}
.xw_l dl dd p a:hover{text-decoration: underline;color: #00bcb4;}

.xw_l ul li{line-height: 100%; margin-bottom: 22px; overflow: hidden;}
.xw_l ul li i{ padding-right: 16px;}
.xw_l ul li a{ display:inline-block; font-size: 14px; color: #333333; float: left; width: 423px; line-height: 100%; overflow: hidden; padding-left: 28px;background:url(../images/x_lik.jpg) no-repeat 0 3px;text-decoration: underline;}
.xw_l ul li span{ display: inline-block; float: right; font-size: 12px; color: #333333; line-height: 100%; }
.xw_l ul li:hover a{ color: #00bcb4; }
.xw_r{ width:585px;}
.xw_r h3{ height: 51px;background:url(../images/n_ico2.jpg) no-repeat 342px 15px;}
.xw_r h3 a{ display: inline-block; font-weight: normal;}
.xw_r h3 a:nth-of-type(1){ margin-right: 22px;}
.xw_r dl{height: 144px; border-bottom: 1px solid #e5e5e5; margin-bottom:40px;}
.xw_r dl h4{ overflow:hidden;}
.xw_r dl h4 span{ display: inline-block; float: left; width: 109px; height: 30px; line-height: 30px; text-align: center; color: #fff; font-size: 16px; background: #00bcb4;font-weight: normal; margin-right: 16px; border-top-left-radius: 9px;border-bottom-right-radius: 9px;}
.xw_r dl h4 a{display: inline-block;font-size: 20px; color: #1a1a1a;font-weight: normal; line-height: 30px; overflow: hidden;    width: 75%;
    float: left;white-space: nowrap;text-overflow: ellipsis;
    overflow: hidden;}
.xw_r dl h4 a:hover{color: #00bcb4;}
.xw_r dl dd p{ height: 59px; font-size: 14px; color: #808080; line-height: 24px; padding-top: 12px;}
.xw_r dl dd em{ display: block;}
.xw_r dl dd em a{ color: #333333; font-size: 14px; }
.xw_r dl dd p a:hover{ text-decoration: underline;color: #00bcb4;}
.xw_r ul{ height: 167px;}
.xw_r ul li{ height: 16px; line-height: 16px; margin-bottom: 19px;}
.xw_r ul li a{ display: block; font-size: 14px; color: #3b2c27;   width: 573px;}
.xw_r ul li span{ float: right;  font-size: 12px; color: #333333; line-height: 100%; }
.xw_r ul li a:hover{color: #00bcb4;}
.xw_r h5{ background: #00bcb4; height:156px; overflow: hidden;}
.xw_r h5 i{ display: inline-block; float: left; width: 410px;}
.xw_r h5 em{ display: inline-block; text-align: center; width:175px; color: #fff; padding-top:55px; font-weight: normal; font-size:18px; height: 101px;background:url(../images/xw_rm.png) no-repeat center 87px; }

/**/

/**/
.about{ overflow: hidden; background: url(../images/a_bg.jpg) no-repeat center 0; box-sizing: border-box; height: 848px; padding-top: 613px;}
.about h3{ float: left;padding: 60px 0 0 40px;}
.about h3 i{ display: block; line-height: 100%; color: #fff; font-size: 47px; margin-bottom: 16px;}
.about h3 a{ display: block; line-height: 100%; color: #fff; font-size: 18px; letter-spacing: 1px;}
.about p{ float: right; width: 723px; padding: 47px 57px 0 0;}
.about p i{ display: block; line-height: 27px; font-size: 16px; height: 85px;}
.about p i a{ color: #333333;}
.about p em{ display: inline-block; float: left;}
.about p em span{ display: inline-block; float: left; font-size: 18px; font-weight: bold; padding-right: 17px; margin-right:22px; border-right: 2px solid #333; line-height: 100%;}
.about p em span:last-of-type{border-right: none;}
.about p em span a{ display: inline-block; color: #333333; position: relative;}
.about p em span a:before{ position: absolute; content: ""; top: 39px; left: 0; width:0; height: 4px; background: #00bcb4; border-top-left-radius: 4px;border-top-right-radius: 4px;}
.about p em span a:hover:before{ width: 100%;}
/**/
.pro_on ul li i:hover{ color: #e50014;}
.pro_on ul li strong,.p_ud span img,.p_ud span img,.case h4 a{transition: all 0.3s linear 0s;}
.pro_on ul li strong:hover{transform: translateX(5px);}
.p_ud span:hover img{transform: translateX(5px);}
.p_bom h3 span:hover{ background: #e50014;}
.case h4 a:hover{transform: translateX(5px);}
.news1 .bt a:hover{color: #e50014;}
.dail p i a:hover{ background: #e50014; color: #fff;}

.pic img,.picl img,.pics img{-webkit-transition: -webkit-transform 0.8s; -moz-transition: -moz-transform 0.8s; -o-transition: -o-transform 0.8s; transition: transform 0.8s;}
.pic img:hover{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);  transform: scale(1.05);}
.picl img:hover{-moz-transform: translate(0,5px);-webkit-transform: translate(0,8px);-ms-transform: translate(0,8px);-o-transform: translate(0,8px);}
.pics img:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);}
.white,.whites{position: relative;overflow: hidden;}
.white:after,.whites:after{content: ''; cursor: pointer; position: absolute; left: -100%; top: 0; width:100%; height:100%; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)); transform: skewx(-25deg); }
.white:hover:after{left:100%; -moz-transition:1s; -o-transition:1s; -webkit-transition:1s; transition:1s;}
.whites:hover:after {left:100%; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s;}


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