html{overflow-x:hidden}
body{color:#333;font:14px "Microsoft Yahei"}
body,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,span,ul{margin:0;padding:0;list-style:none}
a{color:#333;text-decoration:none}
a:focus{outline:0}
img{border:none}
.vam{vertical-align:middle}
.clear{clear:both;height:0;line-height:0;font-size:0}
p{word-spacing:0}
em,i{font-style:normal}
.tr{text-align:right}
.tl{text-align:left}
.center{text-align:center}
.fl{float:left;}
.fr{float:right;}
.pa{position:absolute}
.pr{position:relative}
.clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden}
.clearfix{zoom:1}
.content{width:1280px;margin:0 auto}

/* -- 字体 -- */

@font-face {
    font-family:'wrjz';
    src: url('../font/wrjz.eot');
    src:url("../font/wrjz.ttf");
}

/* -- 页面整体布局 -- */

.pic{width:100%;overflow: hidden;}
.pic img{-o-transition:all 1s linear 0s;transition:all 1s linear 0s}
.pic:hover img{-webkit-transform:scale(1.05) rotate(0) translateY(0);-ms-transform:scale(1.05) rotate(0) translateY(0);transform:scale(1.05) rotate(0) translateY(0)}

.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:.5s;-o-transition:.5s;-webkit-transition:.5s;transition:.5s}
body{min-width:1200px;width:100%;max-width:1920px;margin:0 auto;overflow-x:hidden}
em,i{font-style:normal}

input::-webkit-input-placeholder{color:#999;font-size:14px;text-transform:capitalize}
input::-moz-placeholder{color:#999;font-size:14px;text-transform:capitalize}
input:-moz-placeholder{color:#999;font-size:14px;text-transform:capitalize}
input:-ms-input-placeholder{color:#999;font-size:14px;text-transform:capitalize}
@keyframes myfirst{0%{background-position:0 bottom}
100%{background-position:100% bottom}
}
.line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clear{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}

/* -- 广告 -- */
.banner{height:auto;max-width:1920px;margin:0 auto!important;position:relative;margin-top:-34px}
.banner .bd li{float:left;width:100%;line-height:0}
.banner .bd li img{width:100%}
.banner .bd li a{display:block}
.banner .hd{position:absolute;bottom:30px;width:100%;height:2px;cursor:pointer;text-align:center;z-index:9;font-size:0}
.banner .hd li{display:inline-block;width:53px;height:9px;background:#fff;margin:0 4px;opacity:1;-o-transition:all .5s ease;transition:all .5s ease; border-radius:9px;}
.banner .hd li.on{background:#008283;width:54px}
.banner p{position:absolute;top:50%;z-index:99;opacity:1;text-align:center;margin-top:-26px;width:53px;height:53px;background:rgba(255,255,255,.3);cursor:pointer;-o-transition:all .3s ease;transition:all .3s ease}
.banner p:hover{background:#008283}
.banner .prev{left:0}
.banner .next{right:0}
/* -- 引子 -- */
.yz{background: url(../image/tils.jpg) no-repeat center -77px; height: 730px; overflow: hidden; margin-bottom: 138px; padding-top: 125px; box-sizing: border-box;}
.yz h3{ float: left; line-height: 100%;background: url(../image/t_h.png) no-repeat 0 5px; padding-left: 21px; color: #34444d; font-size: 48px;font-weight: normal; letter-spacing: 4px; height: 270px;}
.yz p{ float: right; width: 845px; color: #5c6970; line-height: 36px; font-size: 16px; margin-top: -4px;}
.yz h4{ position: absolute; left: -13px; bottom:74px;}
.yz h5{ position: absolute; right: 127px; top:315px;}
.yz .content{height: 686px;}
.yz ul{ overflow: hidden;}
.yz ul li{ line-height: 100%; font-size: 16px; color: #fff; height: 254px; float: left;}
.yz ul li i{ display: block; line-height: 100%; height: 34px;}
.yz ul li:first-of-type{ margin-left: 636px; width: 640px; color: #5c6970;}
.yz ul li em{ color: #fff; font-size: 30px; position: relative;}
.yz ul li em span{ display: inline-block; font-family: wrjz; font-size: 80px; line-height: 73%;font-weight: bold;}
.yz ul li em sup{ line-height: 73%; display: inline-block; position: absolute;    right: -22px;    top: -28px;}
.yz ul li:nth-of-type(3){ margin-left: 525px;}
.yz ul li:nth-of-type(4){ float: right; margin-right: 22px;}
.yz ul li:first-of-type em{ color: #008283;}
/**/
.cpi{ overflow: hidden; height: 1255px;}
.cpi .n_nav{ overflow: hidden; height: 116px;}

.cpi_a{ overflow: hidden; height: 692px;}
.cpi_a ul{ overflow: hidden;border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; height: 620px;}
.cpi_a ul li{ float: left; width: 425px; height: 318px; border-left:1px solid #e1e1e1; border-top:1px solid #e1e1e1; position: relative;}
/*.cpi_a ul li:first-of-type{ width: 426px; height: 637px;}*/
.cpi_a ul li a{ display: block; position: relative;}
.cpi_a ul li a em{ display: inline-block; position: absolute; left: 37px; top: 56px;}
.cpi_a ul li a em b{ display: block; line-height: 100%; font-weight: normal; font-size: 24px; color: #1a1e2f; padding-bottom:7px;}
.cpi_a ul li a em i{ display: block; line-height:26px; font-size: 16px; color: #838e94;width:162px;}
.cpi_a ul li a:before{position: absolute; content: ""; left: 40px; bottom: 42px;background: url(../image/c_mor.png) no-repeat; width: 41px; height: 41px; z-index: 55!important;}
.cpi_a ul li a:hover:before{background: url(../image/c_mor2.png) no-repeat;}
.cpi_a ul li a:hover b{ color: #008283;}
.cpi_a ul li a:hover i{ color: #333;}
/*.cpi_a ul li:first-of-type a:before{ left: 340px; bottom: 542px;}*/

.picScroll-left{overflow:hidden; position:relative;}
.picScroll-left .hd{ overflow:hidden; height: 44px; margin-right: 3px;}
.picScroll-left .hd em{ display: inline-block; float: left; line-height: 23px; padding-left: 33px;background: url(../image/cp_h.jpg) no-repeat; font-size: 20px; color: #1a1e2f;font-weight: bold; letter-spacing: 1px;}
.picScroll-left .hd .next{ display:block;  width:7px; height:15px; float:right; overflow:hidden;
    cursor:pointer;  background:url("../image/cp_dd.png") no-repeat; margin-left: 7px;}
.picScroll-left .hd .prev{display:block;  width:7px; height:15px; float:right;  overflow:hidden; margin-right:18px;
    cursor:pointer;background:url("../image/cp_uu.png") no-repeat;}
.picScroll-left .hd .prevStop{ background-position:-60px 0; }
.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:4px; zoom:1; }
.picScroll-left .hd ul li{ float:left;  width:7px; border-radius: 7px; height:7px; overflow:hidden; margin-right:9px; text-indent:-999px; cursor:pointer; background:#aaa; }
.picScroll-left .hd ul li.on{ background:#008283; }
.picScroll-left .bd{ border: 1px solid #dfdfdf; margin-right: 3px;}
.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
.picScroll-left .bd ul li{ float:left;overflow:hidden;width: 318px; height: 239px; border-right: 1px solid #dfdfdf;}
.picScroll-left .bd ul li img{width: 318px;}
.picScroll-left .bd ul li a{ display: block; position: relative;}
.bd ul li a em{ display: inline-block; position: absolute; left:27px; top: 46px;}
.bd ul li a em b{ display: block; line-height: 100%; font-weight: normal; font-size: 24px; color: #1a1e2f; padding-bottom:7px;text-shadow: 1px 1px 0 #fff;}
.bd ul li a em i{ display: block; line-height:26px; font-size: 16px; color: #838e94;width:162px;}
.bd ul li a:before{position: absolute; content: ""; left:26px; bottom: 32px;background: url(../image/c_mor.png) no-repeat; width: 41px; height: 41px; z-index: 55!important;}
.bd ul li a:hover:before{background: url(../image/c_mor2.png) no-repeat;}
.bd ul li a:hover b{ color: #008283;}
.bd ul li a:hover i{ color: #333;}
/**/
/**/
.gexi{ overflow: hidden;height: 925px;background: url(../image/gex.jpg) no-repeat center 0; }
.gex_i{ width: 659px; padding-top: 116px; height: 725px;}
.gex_i h3 span{ display: block; line-height: 100%; color: #008283; font-size: 24px;font-weight: normal; padding-bottom: 23px; letter-spacing: 1px;}
.gex_i h3 em{ display: block; line-height: 100%; color: #fff; font-weight: normal; font-size: 48px; letter-spacing: 2px; padding-bottom: 68px;}
.gex_i h3 em i{ display: block; padding-bottom: 17px;}
.gex_i ul{ border-bottom: 1px solid #5f717c;}
.gex_i ul li{ overflow: hidden; border-top: 1px solid #5f717c; padding-top: 34px; height: 88px; transition: all 0.2s;}
.gex_i ul li i{ display: inline-block; float: right; color: #049190; font-size: 60px; font-family: wrjz; transition: all 0.2s;}
.gex_i ul li em{ display: inline-block; float: left; width: 586px; font-size: 24px; color: #fff; letter-spacing: 2px; line-height: 100%;}
.gex_i ul li em span{ display: block; line-height: 100%; padding-top: 14px; letter-spacing: 1px; color: #fefeff; font-size: 16px;}
.gex_i ul li:hover{ border-top: 1px solid #fff;}
.gex_i ul li:hover i{animation-duration: 1.5s;animation-name: tada;}

.gex_r{ width: 100px;}
.gex_r p{ position: absolute; right: -320px; top: 60px;}
.gex_r em{ position: absolute; right: -10px; top:92px; z-index: 5}

.gex_bom{ overflow: hidden;}
.gex_bom h3{ float: left; line-height: 35px; font-weight: normal; color: #fff; font-size: 24px; letter-spacing: 1px; padding-right: 147px;background: url(../image/ge_t1.png) no-repeat right 0; margin-left: 5px;}
.gex_bom h4{ float: right; color: #fff;font-weight: normal;position: relative; z-index: 55;}
.gex_bom h4 i{ display: inline-block; float: left; font-size: 16px; line-height: 100%; padding-right: 14px; border-right: 1px solid #fff;}
.gex_bom h4 i span{ display: block; padding-bottom: 6px;}
.gex_bom h4 em{ display: inline-block; float: left; line-height:80%; font-size: 48px; font-family: wrjz; padding: 0 16px 0 12px;font-weight: bold;}
.gex_bom h4 a{ display: inline-block; float: right; transition: all 0.2s; height: 33px; line-height: 33px; background: #e71725; border-radius: 33px; border: 2px solid #fff; color: #fff; font-size: 16px; padding: 0 39px;}
.gex_bom h4 a:hover{ padding: 0 56px;}
    /**/
.sdbz{ overflow: hidden; margin-top: 117px; height: 728px;background: url(../image/sdbz.jpg) no-repeat center 0; }
.sdbz h3{ position:absolute; left: 0; top: 0;line-height: 100%;  padding-left: 17px; border-left: 4px solid #008283; font-size: 48px; font-weight: normal; color: #343434;letter-spacing: 3px;}
.sdbz h3 b{ color: #008283;}
.sdb_l{ width: 650px; margin-top: 122px;}
.sdb_l ul li b{ display: block; font-size: 0; line-height: 0; overflow: hidden; margin-bottom: 36px;}
.sdb_l ul li em{ display: block; padding-top: 21px; font-size: 16px; color: #808080; line-height: 30px;}
.sdb_l ul li i{ display: inline-block; height: 31px; line-height: 31px; border-radius: 6px; border: 1px solid #008283; color: #008283; padding:0 8px; font-size: 16px;}

.sdb_r{ width: 499px; border-top: 1px solid #b2bcc2;}
.sdb_r ul li{border-bottom: 1px solid #b2bcc2; padding-top: 40px; height: 111px;cursor: pointer; clear: both;}
.sdb_r ul li i{ display: inline-block; float: right; width: 72px; height: 72px; border-radius: 72px; overflow: hidden;}
.sdb_r ul li i img{ display: block; transition: all 0.2s;}
.sdb_r ul li em{ display: block; line-height: 100%; font-size: 24px; color: #343434; width: 386px; float: left; padding-top: 11px;}
.sdb_r ul li em span{ display: block; padding-top: 12px; font-size: 16px; font-family: wrjz; color: #999999; line-height: 100%; text-transform: uppercase;}
.sdb_r ul li.on i img:first-of-type{ margin-top: -72px;}
.sdb_r ul li.on em{ color: #008283;}
.sdb_r ul li.on{ position: relative;}
.sdb_r ul li.on:before{ content: ""; left: -20px; top:69px; width: 9px; height: 15px;background: url(../image/c_mok.png) no-repeat; position: absolute;}
/**/
/* --应用案例 -- */
.case{background: url(../image/case1.jpg) no-repeat center 0; height: 808px; overflow: hidden; padding-top: 107px; box-sizing: border-box;}
.case_nav{height:122px;display: block; overflow: hidden;}
.case_nav h3{ line-height: 100%; float: left; width: 420px; margin-top: 7px;}
.case_nav h3 a{ display: inline-block; line-height: 100%; padding-left: 17px; border-left: 4px solid #008283; font-size: 48px; font-weight: normal; color: #fff; letter-spacing: 3px; transition: all 0.2s;}
.case_nav h3 a:hover{ letter-spacing: 7px;}
.case_nav .btn{ float: right;background: url(../image/btn3.png) no-repeat 99% 0; color: #fff;}
.case_nav .btn a{color: #fff;}
.case_nav p{ float: right; margin-right: 40px;}
.case_nav p a{ display: inline-block; float: left;transition: all 0.2s; width: 107px; text-align: center; line-height: 100%; padding-top: 40px; font-size: 16px; color: rgba(255,255,255,0.9); border-right: 1px solid rgba(255,255,255,0.2);}
.case_nav p a:first-of-type{ border-left: 1px solid rgba(255,255,255,0.2);background: url(../image/c_ico1.png) no-repeat center 0;}
.case_nav p a:nth-of-type(2){background: url(../image/c_ico2.png) no-repeat center 0;}
.case_nav p a:nth-of-type(3){background: url(../image/c_ico3.png) no-repeat center 0;}
.case_nav p a:nth-of-type(4){background: url(../image/c_ico4.png) no-repeat center 0;}
.case_nav p a:hover{ background-position:center  5px;}

.case_con{position: relative;}
.case_con ul li{background: #fff;}
.case_con ul li .cas-one{position: relative;overflow: hidden;}
.case_con ul li .cas-one em{height:428px;width:848px;display: block;overflow: hidden; float: right;}
.case_con ul li .cas-one em img{height:428px;width:848px;display: block;}
.case_con ul li .cas-one .desc{ float: left; width: 318px; padding: 60px 0 0 60px;}
.case_con .desc h4  span{ font-size: 44px; color: #008283; font-family: wrjz; display: block; line-height: 80%; margin-bottom: 30px;}
.case_con .desc h4 a{ display: block; font-size: 22px; color: #1c222b; line-height: 110%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: normal;}
.case_con .desc p{ padding-top: 11px; height: 174px; color: #808080; font-size: 14px; line-height: 30px;}
.case_con .desc p a{color: #808080;}
.case_con .desc b a{ display: inline-block; width: 41px; height: 41px; border-radius: 41px;background: url(../image/c_mor.png) no-repeat;}
.case_con .desc b a:hover{background: url(../image/c_mor2.png) no-repeat;}

.case_con .ban_pg{position: absolute;left: 0;bottom:-51px;height:10px;z-index: 10;width: 100%;text-align: center;}
.case_con .ban_pg li{display: inline-block;width: 7px;height: 7px;background: #fff;border-radius: 100%;margin: 7px 5px 0;vertical-align: top;font-size: 0;line-height: 0; transition: all 0.2s;cursor: pointer;}
.case_con .ban_pg li.on{width: 21px; height: 21px;background: url(../image/c_li11.png) no-repeat; margin-top: 0;}
.case_con .prev{ position: absolute;left:-48px;top:182px;width: 22px;height: 91px;cursor: pointer; }
.case_con .next{ position: absolute;right:-48px;top:182px;width: 22px;height: 91px;cursor: pointer; }
/* --新闻资讯 -- */
.news{ background: #f2f2f2; padding-top: 121px; overflow: hidden; height: 680px;}
.n_nav{ overflow: hidden; height: 111px;}
.n_nav b{ float: right;}
.n_nav h3{ line-height: 100%; float: left; width: 740px; margin-top: 7px;}
.n_nav h3 a{ display: inline-block; line-height: 100%; padding-left: 17px; border-left: 4px solid #008283; font-size: 48px; font-weight: normal; color: #34444d; letter-spacing: 3px;}
.n_nav h3 a:hover{ color: #008283;}
.n_nav ul{ float: left; margin-top: 14px;}
.n_nav ul li{ float: left; margin-right: 9px;}
.n_nav ul li a{ display: inline-block; width: 94px; height: 31px; line-height: 31px; text-align: center; border-radius: 5px; border: 1px solid #b3b3b3; font-size: 16px; color: #666;}
.n_nav ul li.cur a{ color: #008283; border: 1px solid #008283;}

.n_con1 dl{ float: left; overflow: hidden; width: 650px;}
.n_con1 dl dt{ font-size: 0; line-height: 0; overflow: hidden; position: relative; height: 325px; margin-bottom: 31px;}
.n_con1 dl dt img{width: 650px;}
.n_con1 dl dt em{ display: block; position: absolute; left: 15px;  top: 0; font-size: 14px; color: #fff; font-family: wrjz; line-height: 100%; width: 62px; padding: 16px 0; background: #008283;font-weight: normal; text-align: center;font-weight: normal; text-transform: uppercase;}
.n_con1 dl dt em span{ display: block; font-size: 38px; line-height: 80%; font-weight: lighter; padding-top: 5px;}
.n_con1 dl dd h3 a{font-weight: normal; font-size: 24px; color:#1a1f27; display: block;}
.n_con1 dl dd h3 a:hover{color: #008283;}
.n_con1 dl dd p{ color: #808080; font-size: 14px; line-height: 24px; padding-top: 15px;}
.n_con1 dl dd p a{ color: #008283;}
.n_con1 ul{ float: right; width: 542px;border-top: 1px solid #c9c9c9;}
.n_con1 ul li{ overflow: hidden; border-bottom: 1px solid #c9c9c9; padding-top: 31px; height: 79px;}
.n_con1 ul li i{ display: block; overflow: hidden; width: 454px; float: left;}
.n_con1 ul li i a{ display: block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; color: #1a1f27; font-size: 18px; margin-bottom: 10px; line-height: 100%; transition: all 0.2s;}
.n_con1 ul li i span{ display: block; font-size: 14px; color: #808080; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.n_con1 ul li em{ display: inline-block; float: right; font-size: 14px; color: #808080; text-transform: uppercase; text-align: center;}
.n_con1 ul li em span{ display: block; line-height:80%; font-size: 38px; font-family: wrjz;}
.n_con1 ul li:hover i a{ padding-left: 11px; color: #008283;background: url(../image/n_ico.png) no-repeat 0 center;}
/* --关于我们 -- */
.abt{ padding-top: 133px; height: 700px; overflow: hidden;}
.a_r{ font-size: 0; line-height: 0; overflow: hidden;}
.a_l{ width: 626px;}
.a_l h3{ line-height: 100%; margin-bottom: 47px;}
.a_l h3 a{ display: inline-block; line-height: 100%; padding-left: 17px; border-left: 4px solid #008283; font-size: 48px; font-weight: normal; color: #34444d; letter-spacing: 3px;}
.a_l h3 a:hover{ color: #008283;}
.a_l p{ height: 240px; font-size: 14px; color: #808080; line-height: 29px;}
.btn{ height: 61px; overflow: hidden;}
.btn a{display: inline-block; height: 61px; line-height: 63px; color: #808080; font-size: 16px; text-transform: uppercase; padding-right: 41px;background: url(../image/btn.png) no-repeat 99% 0; font-family:"wrjz";font-weight: lighter;}
.btn a:hover{background: url(../image/btn2.png) no-repeat 99% 0; color: #008283;}
.a_l ul{ overflow: hidden; padding-top: 60px;}
.a_l ul li{ float: left; margin-right: 12px;}.a_l ul li:last-of-type{ margin-right: 0;}
.a_l ul li a{ display: inline-block;background: url(../image/aio1.jpg) no-repeat 24px 0 #eee; height: 100px; line-height: 100px; border-radius: 5px; width: 199px; box-sizing: border-box; font-size: 20px; color: #34444d; padding-left: 87px; transition: all 0.2s;}
.a_l ul li:nth-of-type(2) a{ display: inline-block;background: url(../image/aio2.jpg) no-repeat 33px 0 #eee;}
.a_l ul li:nth-of-type(3) a{ display: inline-block;background: url(../image/aio3.jpg) no-repeat 29px 0 #eee;}
.a_l ul li:hover a{ letter-spacing: 3px; color: #008283;}
/* -- 缓动 -- */
@-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 }


/* -- rem响应布局 -- */
@media screen and (min-width: 1263px) {
    html {
      font-size: calc(1263px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1349px) {
    html {
      font-size: calc(1349px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1463px) {
    html {
      font-size: calc(1463px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1543px) {
    html {
      font-size: calc(1543px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1583px) {
    html {
      font-size: calc(1583px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1643px) {
    html {
      font-size: calc(1643px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1663px) {
    html {
      font-size: calc(1663px * 20 / 1903);
    }
  }
  @media screen and (min-width: 1903px) {
    html {
      font-size: calc(1903px * 20 / 1903);
    }
  }