body{font-family: "Microsoft YaHei";font-size:12px;line-height:24px;color: #333333;}
a{color: #333333;}
img{vertical-align: bottom;}
.m{width: 1200px; margin: 0 auto;}
.head{_padding-bottom: 25px;}
.head .lf{padding-top: 18px;}
.head .rt{padding-top: 12px; }
.head .rt ul li{ height:50px;float: left; margin-left: 25px;position:relative;}
.head .rt ul li a{font-size: 16px;}
.head .rt ul li a:hover{color:#63b7ff;}
.head .rt ul li a.on{color:#ff1616}
.head .rt ul li .ej{position: absolute; z-index: 999; background:rgba(99,183,255,0.8); width: 110px; display:none;margin-top: 15px;left: -20px;opacity:0.9;}
.head .rt ul li:hover .ej{display:block}
.head .rt ul li .ej a{color: #fff; display: block; text-align: center; font-size:14px;padding: 2px 0;}
.head .rt ul li .ej a:hover{ font-size:15px;}
.banner .lf{width: 905px;}
.xx3{position:relative;}
.xx3 .hd{position:absolute;bottom: 151px;text-align: right;z-index:99;width:100%;padding-right: 24px;}
.xx3 .hd ul li{display:inline-block;margin:0 5px;width:11px;height:11px;background: #f2d1b5;text-indent: 100px;cursor:pointer;overflow: hidden;}
.xx3 .hd ul li.on{background: #fff;}
.xx3 .bd{height:100%}
.xx3 .bd ul{height:100%}
.xx3 .bd ul li{height:100%}
.banner .lf .con1{background: rgba(255,255,255,0.5); position: relative; width: 100%; margin-top: -140px; height: 140px;}
.banner .lf .con1 ul li{float: left; width: 20%; text-align: center; padding: 10px 20px; border-left: 2px solid #ffd9c2; height: 140px;cursor:pointer;}
.banner .lf .con1 ul li:hover img{transform: rotateY(360deg);-o-transform: rotateY(360deg);-ms-transform: rotateY(360deg);-moz-transform: rotateY(360deg);-webkit-transform: rotateY(360deg);transition: .6s;-o-transition: .6s;-moz-transition: .6s;-webkit-transition: .6s;}
.banner .lf .con1 ul li p{font-size: 12px; line-height: 20px; color: #666666;}
.banner .rt{width: 295px; border: 2px solid #f7f7f7; height: 420px; overflow: hidden;}
.banner .rt .con1{padding-bottom: 15px; border-bottom: 2px solid #f7f7f7;}
.banner .rt .con1 ul li{padding: 0 28px; margin-top: 15px;}
.banner .rt .con1 ul li img{vertical-align: text-bottom; margin-right: 20px;}
.banner .rt .con1 ul li span{display: inline-block; line-height: 28px;}
.banner .rt .con1 ul li span strong{font-size: 24px; font-weight: normal; color: #ff0000;}
.banner .rt .con2{line-height: 37px; padding-left: 9px; margin-top: 21px;}
.banner .rt .con2 li{background:url(../image/i5.png) no-repeat left center; height:36px; line-height:36px; padding-left:27px;display:block;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}
.main .bt{border-bottom: 2px solid #f7f7f7; padding-bottom: 5px; margin-top: 45px;}
.main .bt .lf img{vertical-align: top; margin-right: 10px;}
.main .bt .lf span{font-size: 14px; display: inline-block; color: #63b7ff; line-height: 16px; padding-top: 10px;}
.main .bt .lf span strong{font-size: 16px; color: #333333; padding-right:3px;}
.main .bt .lf span font{font-size: 12px; color:#333333;}
.main .bt .rt{padding-top: 20px;}
.main .bt .rt a{color: #ff0000;}
.main .con1 .con ul li{float: left; width: 149px; text-align: center; margin: 0 45px; height: 205px; margin-top: 30px;}
.main .con1 .con ul li h3{font-size: 16px;}
.main .con1 .con ul li h4{color: #666666;}
.main .con1 .con ul li p{color: #999999; font-size: 12px; line-height: 16px; width: 113px; display: inline-block;}
.main .con2 .con{margin-top: 50px;}
.main .con2 .con ul li{float: left; margin-right: 20px;}
.main .con2 .con ul li img{transition: transform .3s ease-out;}
.main .con2 .con ul li:hover img{transform: translateY(-5px);transition: transform .3s ease-out;}
.main .con3 .con{margin-top: 50px;}
.main .con3 .con a{display: block; position: relative;overflow:hidden;}
.main .con3 .con a span{position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.5); text-align: center; color: #fff; width: 100%; height: 39px; line-height: 39px;}
.main .con3 .con .rt{width: 720px;}
.main .con3 .con .rt li{float: left; margin-bottom: 30px; margin-left: 20px; overflow:hidden;}
.main .con4 .con{margin-top: 50px;}
.main .con4 .con ul li{position: relative; float: left; margin: 0 30px; overflow:hidden;}
.main .con4 .con ul li span{position: absolute; left: 0; bottom: 0; background: rgba(99,183,255,0.8); text-align: center; color: #fff; width: 100%; height: 60px; line-height: 17px; padding: 13px 59px; font-size: 14px;}
.main .con5 .con{margin-top: 50px;}
.main .con5 .con .hy1{position: relative;}
.main .con5 .con .hy1 span{position: absolute; left: 0; bottom: 50px; background: rgba(99,183,255,0.45); text-align: center; color: #fff; width: 100%; height: 109px; line-height: 40px; padding-top: 18px; font-size: 14px;}
.main .con5 .con .hy1 span strong{font-size: 42px; font-weight: normal;}
.main .con5 .con .hy2{width: 370px; margin-left: 37px;}
.main .con5 .con .hy2 ul li{margin-top: 26px;}
.main .con5 .con .hy2 ul li a{color: #999999;}
.main .con5 .con .hy2 ul li a strong{display: block; font-weight: normal; font-size: 16px; color: #333333; display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main .con5 .con .hy3{width:320px;border-left: 1px solid #e6e6e6;padding-left: 20px;}
.main .con5 .con .hy3 .hybt{background:url(../image/i34.png) no-repeat bottom;height: 37px;line-height: 37px;padding: 0 7px;}
.main .con5 .con .hy3 .hybt .lf{font-size: 16px; color: #63b7ff;}
.main .con5 .con .hy3 .hybt .rt a{color: #ff0000;}
.main .con5 .con .hy3 ul li{height: 54px; line-height: 54px; border-bottom: 1px Dotted #f3f3f3;}
.main .con5 .con .hy3 ul li a{color: #666666; font-size: 14px;}
.main .con6 .con{margin: 30px 0; overflow: hidden;}
.main .con6 .con li{margin-right:10px}
.main .con6 .con li img{border:1px solid #f2f2f2;}
.xx41 li{display:inline-block;}
.foot{background: #e6e6e6; border-top: 2px solid #63b7ff; text-align: center; color: #666666; padding: 21px;}
.foot a{color: #666666; margin: 0 20px;}
.ny{padding-top: 35px;}
.ny .m>.lf{width: 180px; margin-bottom:50px;}
.ny .m>.lf h3{font-size: 18px; border-bottom: 1px solid #000000; height: 34px; line-height: 34px;}
.ny .m>.lf h3 span{font-size: 12px; color: #e51313;}
.ny .m>.lf ul{margin-top: 15px;}
.ny .m>.lf ul li a{display:block;height:40px;line-height: 40px;font-size: 16px;text-align: center; border-bottom:1px solid #CCC;}
.ny .m>.lf ul li a.on{background:url(../image/i35.png) no-repeat;color: #fff;}
.ny .m>.lf ul li p>span{ float:left;line-height: 40px; position:relative;left: 30px;}
.ny .m>.rt{width: 940px; border-left: 1px solid #999999; padding-bottom: 60px;}
.ny .m>.rt .nybt{border-bottom: 1px solid #999999; height: 34px; line-height: 34px; overflow: hidden; padding-left: 40px; position: relative; left: -20px; width: 960px;}
.ny .m>.rt .nybt .lf{font-size: 18px;}
.ny .m>.rt .nybt .lf span{font-size: 12px; color: #999999; text-transform: uppercase;}
.ny .m>.rt .con{padding: 0 44px; margin-top: 20px; font-size: 14px; line-height: 20px; padding-bottom: 25px; border-bottom: 1px solid #dedede;}
.ny .m>.rt .con .abimg{float: left; margin-right: 25px;}
.ny .m>.rt .hangjing h3{color: #e51313; font-size: 16px; font-style: oblique; padding-left: 34px; height: 57px; line-height: 57px;}
.ny .m>.rt .hangjing ul{margin-top: 10px;}
.ny .m>.rt .hangjing ul li{float: left; margin-left: 34px;}
.tab_2{width:120px;height:44px;line-height:44px;background:#63b7ff;color:#fff;text-align:center;font-size:16px;float:left;margin-top:50px;}
.bigimg{min-height:330px; display: block; cursor:pointer;}
.bigimg img{max-width:100%;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;}
.goodsInfo{ display:none;position: relative;bottom: 330px;z-index: 9999;}
.free{ width:300px; position:fixed; right:0px; top:30%;padding: 0 5px; background:#FFF;}
.free h1{ line-height:20px;}
.free h1 span{ color:#f1561a;}
.free p{ margin:5px 0;}
.free p input{ font-size:12px;}
.free p textarea{font-size:12px;}
.free p select{ width:143px;}

/*导航样式*/
.menu,
.menu-item a{width:100%;display:block;position:relative}
.menu-item{width:150px;position:relative;text-align:center;border-bottom: 1px solid #fff;}
.menu-item a{padding:16px 0;color:#000;border-radius:4px;transition:all .5s ease;transform-style:preserve-3d;font-size: 16px;}
.menu-item a:before{width:100%;padding:16px 0;display:block;position:absolute;color:#000;border-radius:4px}


.menu{ width:100%;margin: 10px 0;}
.menu > ol:first-child{width:100%;display:flex;position:relative;flex-flow:row wrap;justify-content:center}
.menu > ol:first-child > .menu-item{display:block}
.menu > ol:first-child > .menu-item:nth-of-type(2) > a,
.menu > ol:first-child > .menu-item:nth-of-type(4) > a{border-left:1px solid #fff;border-right:1px solid #fff}
.menu > ol:first-child > .menu-item > a:before{background:#ff9900;bottom:90%;transform:rotateX(-90deg) translate3d(0,0,75px)}
.menu > ol:first-child > .menu-item:nth-of-type(1) > a:before{content:"首页"}
.menu > ol:first-child > .menu-item:nth-of-type(2) > a:before{content:"关于之远"}
.menu > ol:first-child > .menu-item:nth-of-type(3) > a:before{content:"行业资讯"}
.menu > ol:first-child > .menu-item:nth-of-type(4) > a:before{content:"精品案例"}
.menu > ol:first-child > .menu-item:nth-of-type(5) > a:before{content:"合作客户"}
.menu > ol:first-child > .menu-item:nth-of-type(6) > a:before{content:"合作流程"}
.menu > ol:first-child > .menu-item:nth-of-type(7) > a:before{content:"招贤纳士"}
.menu > ol:first-child > .menu-item:nth-of-type(8) > a:before{content:"联系我们"}
.menu > ol:first-child > .menu-item:nth-of-type(3) > a:after,
.menu > ol:first-child > .menu-item:nth-of-type(4) > a:after{width:100%;padding:30px 0 0 0;top:0;display:block;position:absolute;color:#fff;font-size:20px;text-align:center}
.menu > ol:first-child > .menu-item:hover > a{transform:rotateX(90deg);}
.menu > ol:first-child > .menu-item:nth-of-type(3):hover > a:after,
.menu > ol:first-child > .menu-item:nth-of-type(4):hover > a:after{color:#000;transform:rotateX(-90deg) translate3d(0,0,75px)}
.sub-menu{background:#fff;width:100%;display:none;position:absolute;top:60px;z-index:99;}
.sub-menu > .menu-item:nth-of-type(1){animation:fadein-down .2s .2s ease both}
.sub-menu > .menu-item:nth-of-type(2){animation:fadein-down .4s .2s ease both}
.sub-menu > .menu-item:nth-of-type(3){animation:fadein-down .6s .2s ease both}
.sub-menu > .menu-item:nth-of-type(4){animation:fadein-down .8s .2s ease both}
.sub-menu > .menu-item:nth-of-type(5){animation:fadein-down 1s .2s ease both}
@keyframes fadein-down{from{display:none;opacity:0;transform:translateY(-10px)}to{display:block;opacity:1;transform:translateY(0)}}
.sub-menu > .menu-item > a{background:#f2f2f2;color: #000;}
.menu > ol:first-child > .menu-item:hover > .sub-menu{display:block}


.xiaocms-page{width:auto; height:30px; line-height:30px; text-align:center; }
.xiaocms-page a{ text-decoration:none; margin-left:5px; color:#666; font-size:12px; border:1px solid #eee; padding:5px 10px;}
.xiaocms-page span{ color:#fff; margin-left:5px; font-size:12px; background:#f77373; padding:5px 10px;}

.img-aoqi{-webkit-transition: all ease-out .5s;-o-transition: all ease-out .5s;transition: all ease-out .5s;-ms-transition: all ease-out .5s;}
.img-aoqi:hover{-webkit-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);-ms-transform: scale(1.05)}

/*product style*/
.productList{ width: 100%; margin: 0px auto;}
.productList li { float: left; display: block; width: 260px;margin: 15px 11px;}
.productList .clearfix li a{ color: #fff; display: block; position: relative; width: 100%; overflow: hidden;}
.productList .img{ overflow: hidden;}
.productList li:hover .con{ position: absolute; left: 0px; bottom:0; width: 100%; background: url(../image/black_.png) repeat; text-align: center; padding:0;transition: all 0.5s ease-in-out;}
.productList a .con{ position: absolute; left: 0px; bottom: -80px; width: 100%; background: url(../image/black_.png) repeat; text-align: center; padding:0 !important;}
.productList a .con .t{ font-size: 14px; height: 42px; overflow: hidden; line-height: 42px;}
.productList a .con .i{ height: 22px; margin-bottom: 18px; overflow: hidden;}
.productList a .con .more{ background-color: #80abde; text-align: center; display: block; height: 40px; line-height: 40px;}