﻿.erweima1{position:absolute;width:150px;height:168px;background: url("../img/erweimabg.png") no-repeat top center;top:370px;z-index:1000;left:50%;margin-left:-620px;text-indent:-9999rem;}
.erweima1 img{float:left;width:110px;height:110px;margin-left:21px;margin-top:20px}
.erweima2{position:absolute;width:150px;height:168px;background: url("../img/erweimabg2.png") no-repeat top center;top:370px;z-index:1000;left:50%;margin-left:-460px;text-indent:-9999rem;}
.erweima2 img{float:left;width:110px;height:110px;margin-left:21px;margin-top:20px}

.head-wrap{position:relative;width:100%;height:520px;overflow:hidden}

.header{position:relative;width:1260px;margin:0 auto;height:100%;display:block}
.header .h-title{position:absolute;width:480px;height:290px;top:260px;background:url(img/h-titlebg.png) no-repeat;padding:30px}
.header .h-title h2{float:left;font-size:50px;line-height:72px;color:#272a2c;font-weight:bold;text-align:center}
.header .h-title h3{float:left;font-size:36px;line-height:52px;color:#272a2c;padding-bottom:10px;border-bottom:1px #cf1132 solid}
.header .h-title p{float:left;margin:15px 0 30px;font-size:18px;color:#272a2c;line-height:24px}
.header .h-title i{float:left;width:214px;height:76px;display:block;background:url(img/btn_4c6e4eb.png) no-repeat;margin-top:215px;margin-left:120px}
.header .white h2{color:#8e0103}
.header .white h3{color:#a42700}
.header .white p{color:#000}
.header .left{left:40px}
.header .left h2{text-align:left}
.header .left h3{text-align:left}
.header .left p{text-align:left}
.header .center{left:50%;margin-left:-245px;top:100px}
.header .center h2{text-align:center}
.header .center h3{text-align:left}
.header .center i{margin:0 auto}
.header .center p{text-align:center}
.header .right{right:40px}


/* flexslider */
.flexslider{position:relative;height:650px;overflow:hidden;background:url(img/loading.gif) 50% no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:950px;}
.flex-control-nav{position:absolute;top:600px;z-index:2;width:100%;text-align:center;}
.flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(img/dot.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}

.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:300px;background:url(img/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:300px;background:url(img/next.png) center center no-repeat;}


span{ display: inline-block; }
img{vertical-align:top;border:none; }

.erweima{position:absolute;width:450px;height:163px;z-index:9999;top:440px;left:50%;margin-left:140px;background:rgba(255,255,255,0.8);border-radius:20px}
.erweima .qcord{float:left;width:145px;height:145px;margin-left:10px;margin-top:10px}
.erweima .qcord img{width:145px;height:145px;border-radius:5px}
.erweima .qcordtit{float:right;width:275px;height:145px;margin-right:10px;margin-top:10px;overflow:hidden}
.erweima .qcordtit h2{width:275px;height:35px;line-height:35px;font-size:20px;font-weight:bold;color:#d21d01;text-align:center;}
.erweima .qcordtit h3{float:left;width:275px;height:25px;line-height:25px;font-size:16px;color:#d21d01;text-align:center;}

.banner { width: 100%; height: 656px;  color: #fff; position: relative; z-index: 1001; overflow: hidden; -moz-transition: background 0.5s; -o-transition: background 0.5s; -webkit-transition: background 0.5s; transition: background 0.5s; }
.banner .Flash { position: absolute; width: 1920px; height: 656px; top: 0; left: 50%; margin-left: -960px; z-index: 100000; }
.banner .hd { width: 200px; height: 60px; background: rgba(0, 0, 0, 0.4); position: absolute; left: 50%; bottom: 0; z-index: 10; margin-left: -100px; text-align: center; font-size: 0; }
.banner .hd ul { display: inline-block; margin: 25px 20px 0; position: relative; }
.banner .hd ul:before, .banner .hd ul:after { content: ''; position: absolute; left: -28px; top: 4px; width: 33px; height: 1px; background: rgba(255, 255, 255, 0.4); }
.banner .hd ul:after { left: auto; right: -28px; }
.banner .hd li { display: inline-block; vertical-align: top; width: 6px; height: 6px; outline: 2px solid #fff; outline: 2px solid rgba(255, 255, 255, 0.4); padding: 2px; margin: 0 8px; -moz-transition: outline-color 0.4s; -o-transition: outline-color 0.4s; -webkit-transition: outline-color 0.4s; transition: outline-color 0.4s; }
.banner .hd li + li:before { content: ''; position: absolute; width: 10px; height: 1px; background: rgba(255, 255, 255, 0.4); margin-left: -15px; margin-top: 2px; }
.banner .hd li:after { content: ''; display: inline-block; width: 100%; height: 100%; background: #ff3a3a; opacity: 0; visibility: hidden; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; }
.banner .hd li.on { outline-color: #ff3a3a; }
.banner .hd li.on:after { visibility: visible; opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.banner .bd { height: 760px; }
.banner .bg { position: absolute; width: 1920px; height: 760px; top: 0; left: 50%; margin-left: -960px; z-index: -1; }
.banner .bd-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; display: block !important; visibility: hidden; }
.banner .bd-item.on { visibility: visible; }
.banner .bd-inner { position: relative; height: 100%; }
.banner .bd-inner dl { position: relative; z-index: 100; }
.banner .name { font-size: 48px; color: #fffd57; font-weight: bold; padding-top: 205px; margin-bottom: 45px; letter-spacing: 3px; }
.banner .name b { font-size: 60px; font-weight: inherit; }
.banner .text { width: 625px; font-size: 16px; line-height: 48px; padding-left: 35px; position: relative; }
.banner .text:before, .banner .text:after { font-family: 'arial'; font-size: 48px; font-weight: bold; position: absolute; margin-left: -33px; margin-top: 11px; }
.banner .text:before { content: '???'; }
.banner .text:after { content: '???'; margin-top: 13px; margin-left: 10px; }

.polyhedron, .polyhedron-item, .polyhedron-item:before { box-sizing: border-box; position: absolute; top: 50%; left: 50%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.polyhedron { -moz-animation: polyhedron3d 16s linear infinite; -webkit-animation: polyhedron3d 16s linear infinite; animation: polyhedron3d 16s linear infinite; -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; }

.polyhedron-green { font-size: 28px; margin: 100px 0 0 -450px; }

.polyhedron-purple { margin: -180px 0 0 500px; font-size: 20px; -moz-animation-duration: 10s; -webkit-animation-duration: 10s; animation-duration: 10s; }
.polyhedron-purple .polyhedron-item1:before { background: #8f4cff; }
.polyhedron-purple .polyhedron-item2:before { background: #a168ff; }
.polyhedron-purple .polyhedron-item3:before { background: #bb92ff; }
.polyhedron-purple .polyhedron-item4:before { background: #a984e6; }

.polyhedron-blue { font-size: 14px; margin: 250px 0 0 360px; -moz-animation-duration: 8s; -webkit-animation-duration: 8s; animation-duration: 8s; }
.polyhedron-blue .polyhedron-item1:before { background: #9afffe; }
.polyhedron-blue .polyhedron-item2:before { background: #29e0de; }
.polyhedron-blue .polyhedron-item3:before { background: #13b0ae; }
.polyhedron-blue .polyhedron-item4:before { background: #20d6d4; }

.polyhedron-green2 { font-size: 26px; margin: 180px 0 0 -600px; -moz-animation-duration: 8s; -webkit-animation-duration: 8s; animation-duration: 8s; }
.polyhedron-green2 .polyhedron-item1:before { background: #73da97; }
.polyhedron-green2 .polyhedron-item2:before { background: #55c97e; }
.polyhedron-green2 .polyhedron-item3:before { background: #46b26c; }
.polyhedron-green2 .polyhedron-item4:before { background: #49bd72; }

.polyhedron-item { overflow: hidden; margin: -2.5em; width: 5em; height: 5em; -moz-transform: rotate(60deg) skewX(30deg) scaleY(0.86603); -ms-transform: rotate(60deg) skewX(30deg) scaleY(0.86603); -webkit-transform: rotate(60deg) skewX(30deg) scaleY(0.86603); transform: rotate(60deg) skewX(30deg) scaleY(0.86603); }

.polyhedron-item:before { content: ''; margin: -2.165065em -2.5em; width: 5em; height: 4.3301252em; font-style: oblique; line-height: 5.773505em; -moz-transform: scaleY(1.1547) skewX(-30deg) rotate(-60deg) translateY(-50%); -ms-transform: scaleY(1.1547) skewX(-30deg) rotate(-60deg) translateY(-50%); -webkit-transform: scaleY(1.1547) skewX(-30deg) rotate(-60deg) translateY(-50%); transform: scaleY(1.1547) skewX(-30deg) rotate(-60deg) translateY(-50%); }

.polyhedron-item1 { -moz-transform: rotateX(-90deg) translateY(1.44339em) rotate(60deg) skewX(30deg) scaleY(0.86603); -ms-transform: rotateX(-90deg) translateY(1.44339em) rotate(60deg) skewX(30deg) scaleY(0.86603); -webkit-transform: rotateX(-90deg) translateY(1.44339em) rotate(60deg) skewX(30deg) scaleY(0.86603); transform: rotateX(-90deg) translateY(1.44339em) rotate(60deg) skewX(30deg) scaleY(0.86603); }

.polyhedron-item2 { -moz-transform: rotateY(60deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); -ms-transform: rotateY(60deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); -webkit-transform: rotateY(60deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); transform: rotateY(60deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); }

.polyhedron-item3 { -moz-transform: rotateY(180deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); -ms-transform: rotateY(180deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); -webkit-transform: rotateY(180deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); transform: rotateY(180deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); }

.polyhedron-item4 { -moz-transform: rotateY(300deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); -ms-transform: rotateY(300deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); -webkit-transform: rotateY(300deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); transform: rotateY(300deg) translateZ(1.44339em) rotateX(19.47122deg) rotate(60deg) skewX(30deg) scaleY(0.86603); }

.polyhedron-item1:before { background: #6dce1e; }

.polyhedron-item2:before { background: #8de545; }

.polyhedron-item3:before { background: #afff6e; }

.polyhedron-item4:before { background: #9dfb50; }

.bd-atmosphere .beam, .bd-atmosphere .dyeing { position: absolute; z-index: 10; }
.bd-atmosphere .beam li, .bd-atmosphere .dyeing li { position: absolute; }

.bd-atmosphere .beam-bot { width: 183px; height: 587px; left: -70px; bottom: 0; background:red; -moz-animation: beamBottom 8s both linear infinite; -webkit-animation: beamBottom 8s both linear infinite; animation: beamBottom 8s both linear infinite; -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; }

.bd-atmosphere .beam-top { width: 245px; height: 260px; top: 0; right: 0; -moz-animation: beamTop 8s both linear infinite; -webkit-animation: beamTop 8s both linear infinite; animation: beamTop 8s both linear infinite; -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; }
.bd-atmosphere .dyeing { width: 535px; height: 656px; bottom: -260px; right: -352px; }
.bd-atmosphere .dyeing .ani-dyeing1 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.bd-atmosphere .dyeing .ani-dyeing2 { -moz-animation-delay: 0.7s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.bd-atmosphere .dyeing .ani-dyeing3 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; }
.bd-atmosphere .dyeing .ani-dyeing4 { -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.bd-atmosphere .dyeing .ani-dyeing5 { -moz-animation-delay: 1.2s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }

.bd-outstanding { text-align: center; }
.bd-outstanding .name { font-weight: normal; color: #f9f9f9; }
.bd-outstanding .text { margin: 0 auto; }
.bd-outstanding .text:before, .bd-outstanding .text:after { color: #fdff44; }
.bd-outstanding .line { position: absolute; }
.bd-outstanding .line-bot { left: 0; bottom: 65px; }
.bd-outstanding .line-top { top: 30px; right: 0; }
.bd-outstanding .triangle-bg { position: absolute; left: 50%; top: 0; margin: 75px 0 0 -468px; }
.bd-outstanding .triangle-box { position: absolute; left: 50%; top: 200px; z-index: 110; }
.bd-outstanding .triangle-box .ani { position: absolute; -moz-animation: float ease-in-out 3s infinite; -webkit-animation: float ease-in-out 3s infinite; animation: float ease-in-out 3s infinite; }
.bd-outstanding .triangle-box .ani-triangle1 { margin: 170px 0 0 -600px; }
.bd-outstanding .triangle-box .ani-triangle2 { margin: 400px 0 0 300px; }
.bd-outstanding .triangle-box .ani-triangle3 { margin: -30px 0 0 400px; }
.bd-outstanding .triangle-box .ani-triangle1, .bd-outstanding .triangle-box .ani-triangle2, .bd-outstanding .triangle-box .ani-triangle3 { display: none; }
.bd-outstanding .triangle-box .ani-triangle4 { margin: 25px 0 0 -140px; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.bd-outstanding .triangle-box .ani-triangle6 { margin: 20px 0 0 95px; -moz-animation-delay: 0.8s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.bd-outstanding .triangle-box .ani-triangle7 { margin: 90px 0 0 60px; -moz-animation-delay: 0.11s; -webkit-animation-delay: 0.11s; animation-delay: 0.11s; }

.bd-inspiration .name { font-weight: normal; color: #FFF; position: relative; top: -20px; }
.bd-inspiration .triangle-bg { position: absolute; left: 50%; top: 0; margin: 200px 0 0 -180px; }
.bd-inspiration .triangle-box { position: absolute; left: -15px; top: 190px; z-index: 110; }
.bd-inspiration .triangle-box .ani { position: absolute; -moz-animation: float ease-in-out 2s infinite; -webkit-animation: float ease-in-out 2s infinite; animation: float ease-in-out 2s infinite; }
.bd-inspiration .triangle-box .ani-dot1 { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.bd-inspiration .triangle-box .ani-dot2 { -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.bd-inspiration .triangle-box .ani-dot3 { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.bd-inspiration .triangle-box .ani-dot4 { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.bd-inspiration .triangle-box .ani-dot5 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.bd-inspiration .triangle-box .ani-dot6 { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.bd-inspiration .triangle-box .ani-dot7 { -moz-animation-delay: 0.7s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.bd-inspiration .pen { width: 575px; height: 576px; background: url(../images/index/pen.png) no-repeat; position: absolute; left: 50%; bottom: 0; z-index: 1; margin-left: 376px; }
.bd-inspiration .draw { width: 385px; height: 315px; position: absolute; top: 50px; right: -110px; }
.bd-inspiration .draw li { position: absolute; }
.bd-inspiration .draw .ani-draw1 { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.bd-inspiration .draw .ani-draw2 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.bd-inspiration .draw .ani-draw3 { -moz-animation-delay: 0.7s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }

.bd-resonance .bd-inner dl { z-index: 120; }
.bd-resonance .name { color: #3df3fe; font-weight: normal; }
.bd-resonance .triangle-box { position: absolute; left: -85px; top: 170px; z-index: 110; }
.bd-resonance .triangle-box .ani { position: absolute; -moz-animation: float ease-in-out 2s infinite; -webkit-animation: float ease-in-out 2s infinite; animation: float ease-in-out 2s infinite; }
.bd-resonance .triangle-box .ani-piece1 { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.bd-resonance .triangle-box .ani-piece2 { -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.bd-resonance .triangle-box .ani-piece3 { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.bd-resonance .triangle-box .ani-piece4 { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.bd-resonance .triangle-box .ani-piece5 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.bd-resonance .triangle-box .ani-piece6 { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.bd-resonance .triangle-bg { position: absolute; bottom: 0; left: 50%; margin-left: -305px; }

.resonance-svg { position: absolute; left: 50%; top: 0; margin-left: -960px; }
.resonance-svg .circle, .resonance-svg .triangle { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; }
.resonance-svg .circle { -moz-animation: bubble 5s both linear infinite; -webkit-animation: bubble 5s both linear infinite; animation: bubble 5s both linear infinite; }
.resonance-svg .triangle { -moz-animation: float ease-in-out 2s infinite; -webkit-animation: float ease-in-out 2s infinite; animation: float ease-in-out 2s infinite; }
.resonance-svg .triangle1 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.resonance-svg .triangle2 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; }
.resonance-svg .circle1 { -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.resonance-svg .circle2 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; }
.resonance-svg .circle3 { -moz-animation-delay: 2s; -webkit-animation-delay: 2s; animation-delay: 2s; }
.resonance-svg .circle4 { -moz-animation-delay: 3s; -webkit-animation-delay: 3s; animation-delay: 3s; }
.resonance-svg .circle5 { -moz-animation-delay: 4s; -webkit-animation-delay: 4s; animation-delay: 4s; }
.resonance-svg .circle6 { -moz-animation-delay: 5s; -webkit-animation-delay: 5s; animation-delay: 5s; }
.resonance-svg .circle7 { -moz-animation-delay: 6s; -webkit-animation-delay: 6s; animation-delay: 6s; }

.on .beam-bot, .on .beam-top { -moz-animation-play-state: running; -webkit-animation-play-state: running; animation-play-state: running; }
.on .dyeing li, .on .draw li { -moz-animation: fadeIn 0.4s both; -webkit-animation: fadeIn 0.4s both; animation: fadeIn 0.4s both; }
.on .line-bot { -moz-animation: lineBot 0.5s 0.1s both; -webkit-animation: lineBot 0.5s 0.1s both; animation: lineBot 0.5s 0.1s both; }
.on .line-top { -moz-animation: lineTop 0.5s 0.1s both; -webkit-animation: lineTop 0.5s 0.1s both; animation: lineTop 0.5s 0.1s both; }
.on .polyhedron { -moz-animation-play-state: running; -webkit-animation-play-state: running; animation-play-state: running; }
.on .circle, .on .triangle { -moz-animation-play-state: running; -webkit-animation-play-state: running; animation-play-state: running; }

/*** @description: ??????; @Author:ray; @create date:2017-05-10;
***/
.index-logo { position: absolute; left: 50%; z-index: 2000; margin-top: 20px; margin-left: -600px; }

.navbar { height: 175px; padding-top: 45px; text-align: center; font-size: 0; }

.nav-item { display: inline-block; vertical-align: top; margin: 0 42px; }
.nav-item:hover .icon { -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
.nav-item .title { font-size: 16px; display: block; margin-top: 10px; }
.nav-item .icon { -moz-transition: -moz-transform 0.5s 0.1s; -o-transition: -o-transform 0.5s 0.1s; -webkit-transition: -webkit-transform 0.5s; -webkit-transition-delay: 0.1s; transition: transform 0.5s 0.1s; }

/*** @description: about; @Author:ray; @create date:2016-05-11;
***/
.about-banner { height: 500px; background: #379aff; margin-bottom: 30px; }
.about-banner .wrapper { height: 100%; background: url(../images/about/banner.jpg) no-repeat right center; }
.about-banner .text { font-size: 18px; line-height: 60px; color: #fff; padding-top: 110px; }
.about-banner .text p { width: 675px; }
.about-banner .text b { font-size: 30px; font-weight: normal; }

.about-xiaopi { margin-bottom: 30px; }

.about-remark { width: 435px; float: left; }
.about-remark .hd { font-size: 36px; color: #999; padding: 40px 0 20px; }
.about-remark .hd .title { font-size: 48px; color: #4c4c4c; vertical-align: bottom; margin-right: 10px; }
.about-remark .bd { font-size: 16px; line-height: 30px; color: #666; text-align: justify; text-justify: inter-ideograph; }
.about-remark .bd li { margin-bottom: 10px; list-style: none; }
.about-remark .bd li::before { content: ''; position: absolute; margin: 12px 0 0 -15px; width: 5px; height: 5px; background: #54a9ff; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.about-remark .bd li:nth-child(6n+2)::before { background: #ff9191; }
.about-remark .bd li:nth-child(6n+3)::before { background: #25ecbb; }
.about-remark .bd li:nth-child(6n+4)::before { background: #bd88ff; }
.about-remark .bd li:nth-child(6n+5)::before { background: #ffc15f; }
.about-remark .bd li:nth-child(6n+6)::before { background: #68d099; }

.about-focus { width: 685px; height: 570px; float: right; overflow: hidden; position: relative; }
.about-focus .hd { position: absolute; right: 20px; bottom: 20px; z-index: 10; font-size: 0; }
.about-focus .hd li { display: inline-block; vertical-align: top; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; margin-left: 5px; }
.about-focus .hd li.on { background: #fff; }
.about-focus .bd { overflow: hidden; }
.about-focus .bd-item { position: relative; }
.about-focus .bd-item .cover { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35); opacity: 0.35; }
.about-focus .bd-item.on .box:before { height: 160px; }
.about-focus .bd-item.on .box:after { width: 269px; }
.about-focus .bd-item.on .box dt:before { height: 269px; }
.about-focus .bd-item.on .box dt:after { width: 269px; }
.about-focus .bd-item.on .box dd:after { height: 22px; }
.about-focus .pic { width: 685px; height: 570px; }
.about-focus .box { width: 269px; height: 269px; color: #fff; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -134px 0 0 -134px; }
.about-focus .box:before, .about-focus .box:after, .about-focus .box dt:before, .about-focus .box dt:after, .about-focus .box dd:after { display: inline-block; position: absolute; left: 0px; top: 0px; content: ''; background: #fff; width: 3px; height: 0; -moz-transition: width 0.3s, height 0.3s; -o-transition: width 0.3s, height 0.3s; -webkit-transition: width 0.3s, height 0.3s; transition: width 0.3s, height 0.3s; }
.about-focus .box:before { top: auto; bottom: 109px; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.about-focus .box:after { width: 0; height: 3px; transition-delay: 0.8s; }
.about-focus .box dt { text-align: center; font-size: 24px; padding: 40px 0 30px; }
.about-focus .box dt:before { left: auto; right: 0; transition-delay: 1.1s; }
.about-focus .box dt:after { width: 0; height: 3px; top: auto; left: auto; right: 0; bottom: 0; transition-delay: 1.4s; }
.about-focus .box dd { width: 205px; margin: 0 auto; line-height: 30px; }
.about-focus .box dd:after { top: auto; bottom: 0px; transition-delay: 1.7s; }
.about-focus .num { font-size: 48px; line-height: 78px; font-family: arial; position: absolute; left: -50px; top: 165px; width: 100px; text-align: center; }
.about-focus .num:before, .about-focus .num:after { content: ''; width: 7px; height: 7px; border-radius: 50%; position: absolute; top: -10px; left: 48px; background: #fff; }
.about-focus .num:after { top: auto; bottom: -10px; }

.about-benefits { margin-bottom: 60px; }
.about-benefits .hd { font-size: 36px; color: #999; padding: 40px 0 20px; }
.about-benefits .hd .title { font-size: 48px; color: #4c4c4c; vertical-align: bottom; margin-right: 10px; }
.about-benefits .bd { overflow: hidden; height: 302px; }
.about-benefits .bd ul { margin-left: -2px; }
.about-benefits .bd li { float: left; margin-left: 2px; }

.about-benefits-item { color: #fff; width: 295px; height: 130px; margin-bottom: 2px; position: relative; }
.about-benefits-item .name, .about-benefits-item .icon { position: absolute; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; }

.about-benefits-1 { background: #89d78d; }
.about-benefits-1 .name { left: 25px; top: 50px; }
.about-benefits-1 .icon { right: 25px; bottom: 5px; }

.about-benefits-2 { background: #6ebcff; height: 170px; }
.about-benefits-2 .name { right: 25px; top: 70px; }
.about-benefits-2 .icon { left: 25px; top: 35px; }

.about-benefits-3 { background: #bd88ff; height: 170px; }
.about-benefits-3 .name { left: 25px; top: 70px; }
.about-benefits-3 .icon { right: 25px; top: 35px; }

.about-benefits-4 { background: #68d099; }
.about-benefits-4 .name { right: 25px; top: 50px; }
.about-benefits-4 .icon { left: 25px; bottom: 15px; }

.about-benefits-5 { width: 300px; height: 302px; background: #ff9191; }
.about-benefits-5 .name { left: 95px; bottom: 50px; }
.about-benefits-5 .icon { left: 95px; top: 35px; }

.about-benefits-6 { width: 304px; height: 302px; background: #ffc15f; }
.about-benefits-6 .name { left: 95px; bottom: 50px; }
.about-benefits-6 .icon { left: 95px; top: 50px; }

.transition .about-benefits-1:hover .name { left: 110px; }
.transition .about-benefits-1:hover .icon { -moz-transform: scale(0.4); -ms-transform: scale(0.4); -webkit-transform: scale(0.4); transform: scale(0.4); right: 170px; bottom: 20px; }
.transition .about-benefits-2:hover .name { right: 70px; }
.transition .about-benefits-2:hover .icon { left: 35px; -moz-transform: scale(0.45); -ms-transform: scale(0.45); -webkit-transform: scale(0.45); transform: scale(0.45); }
.transition .about-benefits-3:hover .name { left: 110px; }
.transition .about-benefits-3:hover .icon { -moz-transform: scale(0.4); -ms-transform: scale(0.4); -webkit-transform: scale(0.4); transform: scale(0.4); right: 170px; top: 35px; }
.transition .about-benefits-4:hover .name { right: 60px; }
.transition .about-benefits-4:hover .icon { left: 25px; bottom: 25px; -moz-transform: scale(0.45); -ms-transform: scale(0.45); -webkit-transform: scale(0.45); transform: scale(0.45); }
.transition .about-benefits-5:hover .name { bottom: 120px; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); }
.transition .about-benefits-5:hover .icon { top: 100px; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
.transition .about-benefits-6:hover .name { bottom: 120px; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); }
.transition .about-benefits-6:hover .icon { top: 100px; -moz-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }

/*** @description: ??????; @Author:ray; @create date:2016-05-11;
***/
/*banner*/
.product-focus { width: 100%; height: 710px; position: relative; overflow: hidden; background: #fff; margin-top: 48px; }
.product-focus.running .slides { visibility: visible; }
.product-focus .hd { position: relative; margin-bottom: 50px; }
.product-focus .hd .title { font-size: 48px; color: #4c4c4c; line-height: 1.1; font-weight: bold; }
.product-focus .hd .icon-text-products { margin-left: 10px; vertical-align: bottom; }
.product-focus .oper { position: absolute; right: 0; bottom: 0; }
.product-focus .page-state { vertical-align: middle; height: 36px; line-height: 36px; text-align: center; position: absolute; width: 62px; left: 50%; top: 15px; margin-left: 500px; font-size: 16px; color: #666; font-family: arial; letter-spacing: 5px; }
.product-focus .page-state span { color: #3e87ff; font-size: 24px; font-weight: normal; }
.product-focus .prev, .product-focus .next { background: #c0c0c0; border-radius: 50%; position: absolute; top: 16px; left: 50%; width: 36px; height: 36px; line-height: 35px; margin-left: 464px; cursor: pointer; text-align: center; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -moz-transition: background 0.4s; -o-transition: background 0.4s; -webkit-transition: background 0.4s; transition: background 0.4s; }
.product-focus .prev:hover, .product-focus .next:hover { background: #3e87ff; }
.product-focus .next { margin-left: 563px; }
.product-focus .icon-arrow-l, .product-focus .icon-arrow-r { display: inline-block; vertical-align: -5px; }
.product-focus .slides { margin: 0px auto 30px; overflow: hidden; position: relative; width: 1420px; height: 485px; visibility: hidden; }
.product-focus .slideItem { padding: 0px; overflow: hidden; position: absolute; cursor: pointer; }
.product-focus .slideItem a { display: block; }
.product-focus .slideItem img { width: 100%; }

.product-focus2 { height: 710px; position: relative; background: #fff; margin-top: 48px; }
.product-focus2 .hd { position: relative; margin-bottom: 50px; }
.product-focus2 .hd .title { font-size: 48px; color: #4c4c4c; line-height: 1.1; font-weight: bold; }
.product-focus2 .hd .icon-text-products { margin-left: 10px; vertical-align: bottom; }
.product-focus2 .bd { width: 1260px; height: 500px; margin-left: -30px; }
.product-focus2 .bd-wrap { margin-left: -60px; }
.product-focus2 .bd-item { width: 600px; height: 500px; margin-left: 60px; float: left; position: relative; overflow: hidden; cursor: default; box-shadow: 0 0 1px rgba(227, 227, 227, 0), 0 0 0 2px rgba(235, 235, 235, 0), 0 0 0 5px rgba(239, 239, 239, 0); -moz-transition: box-shadow 0.4s; -o-transition: box-shadow 0.4s; -webkit-transition: box-shadow 0.4s; transition: box-shadow 0.4s; }
.product-focus2 .bd-item.on { box-shadow: 0 0 1px #e3e3e3, 0 0 0 2px #ebebeb, 0 0 0 5px #efefef; }
.product-focus2 .bd-item .pic { width: 600px; height: 328px; }
.product-focus2 .bd-item .con { position: absolute; left: 0; top: 328px; background: #e5f8ff; padding: 0 25px 20px; }
.product-focus2 .bd-item .con-hd { height: 75px; line-height: 75px; }
.product-focus2 .bd-item .con-hd .lg { vertical-align: middle; }
.product-focus2 .bd-item .con-hd .btn { position: absolute; top: 23px; right: 25px; background: #b0eaff; color: #3e87ff; border: 1px solid #3e87ff; border-radius: 15px; padding: 4px 11px; }
.product-focus2 .bd-item .con-hd .btn:hover { background: #FFF; }
.product-focus2 .bd-item .con-bd { color: #3a85a0; font-size: 14px; line-height: 30px; margin-bottom: 25px; }
.product-focus2 .bd-item .con-ft { overflow: hidden; margin-top: -5px; margin-bottom: 30px; }
.product-focus2 .bd-item .con-ft .tt, .product-focus2 .bd-item .con-ft .ul, .product-focus2 .bd-item .con-ft .li { float: left; }
.product-focus2 .bd-item .con-ft .tt { font-size: 24px; color: #3e87ff; }
.product-focus2 .bd-item .con-ft .ul { padding-left: 15px; }
.product-focus2 .bd-item .con-ft .li { margin-right: 50px; text-align: center; }
.product-focus2 .bd-item .con-ft .lg { width: 70px; height: 70px; margin-bottom: 10px; }
.product-focus2 .bd-item .con-ft .lg-name { color: #3a85a0; }
.product-focus2 .bd-item .cover { height: 30px; position: absolute; left: 0; right: 0; bottom: 0; background: #e5f8ff; }

/*** @description: join; @Author:ray; @create date:2016-05-17;
***/
.join-banner { height: 500px; background: #64c586; margin-bottom: 70px; }
.join-banner .wrapper { height: 100%; position: relative; }
.join-banner .text { font-size: 14px; line-height: 36px; color: #fff; padding-top: 65px; position: relative; z-index: 1; }
.join-banner .text h3 { font-size: 24px; margin-bottom: 20px; }
.join-banner .text p { width: 675px; margin-bottom: 36px; }
.join-banner .text b { font-size: 30px; font-weight: normal; }
.join-banner .text .email { color: #fdff3c; }
.join-banner .bg { position: absolute; top: 0; bottom: 0; left: 0; right: -10px; background: url(../images/join/banner.jpg) no-repeat right center; }

.join-recruit { height: 560px; position: relative; overflow: hidden; background: #fff; }
.join-recruit .hd { position: relative; margin-bottom: 50px; }
.join-recruit .hd .title { font-size: 48px; color: #4c4c4c; line-height: 1.1; font-weight: bold; }
.join-recruit .hd .icon-text-needyou { margin-left: 10px; vertical-align: bottom; }
.join-recruit .hd .oper { position: absolute; right: 0; bottom: 0; }
.join-recruit .hd .prev, .join-recruit .hd .next { display: inline-block; vertical-align: middle; width: 36px; height: 36px; line-height: 36px; text-align: center; background: #c0c0c0; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.join-recruit .hd .prev:hover, .join-recruit .hd .next:hover { background: #3e87ff; }
.join-recruit .hd .icon-arrow-l, .join-recruit .hd .icon-arrow-r { display: inline-block; vertical-align: -5px; }
.join-recruit .bd { height: 400px; overflow: hidden; }
.join-recruit .bd li { width: 350px; height: 300px; float: left; margin: 50px 73px 50px 0; position: relative; }
.join-recruit .bd li.hover { z-index: 100; }
.join-recruit .bd li.hover .recruit-item { transform: perspective(800px) rotateY(180deg); }
.join-recruit .bd li.hover .recruit-item-active { z-index: 10; visibility: visible; transform: perspective(800px) rotateY(360deg); }
.join-recruit .bd .recruit-item, .join-recruit .bd .recruit-item-active, .join-recruit .bd .recruit-item-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; backface-visibility: hidden; -moz-transition: all 0.4s 0.1s; -o-transition: all 0.4s 0.1s; -webkit-transition: all 0.4s; -webkit-transition-delay: 0.1s; transition: all 0.4s 0.1s; }
.join-recruit .bd .recruit-item { width: 344px; height: 294px; background: #FFF; border: 3px solid #e6e6e6; z-index: 1; }
.join-recruit .bd .recruit-item .number, .join-recruit .bd .recruit-item .title, .join-recruit .bd .recruit-item .name { margin-left: 30px; }
.join-recruit .bd .recruit-item .number { width: 59px; height: 59px; line-height: 59px; text-align: center; background: #4f4f4f; color: #FFF; border-radius: 50%; font-family: arial; font-weight: bold; font-size: 30px; margin-top: 25px; margin-bottom: 35px; }
.join-recruit .bd .recruit-item .title { font-size: 36px; margin-bottom: 10px; }
.join-recruit .bd .recruit-item .name { font-size: 24px; font-family: Tahoma; color: #666; position: relative; z-index: 2; text-transform: uppercase; }
.join-recruit .bd .recruit-item .icon { position: absolute; bottom: 25px; right: 25px; }
.join-recruit .bd .recruit-item-active { background: #9ad7b0; text-align: center; visibility: hidden; transform: rotateY(180deg); }
.join-recruit .bd .recruit-item-active .icon { margin-top: 25px; vertical-align: top; }
.join-recruit .bd .recruit-item-active .title { font-size: 30px; color: #FFF; margin-bottom: 15px; }
.join-recruit .bd .recruit-item-active .more { text-align: right; color: #FFF; padding-right: 20px; }
.join-recruit .bd .recruit-item-cover { z-index: 100; }

/*** @description: contacts; @Author:ray; @create date:2016-05-17;
***/
.contacts-banner { height: 500px; background: #3baaff url(../images/contacts/banner.png) no-repeat center 0; margin-bottom: 70px; }
.contacts-banner .wrapper { height: 100%; position: relative; text-align: center; }
.contacts-banner .text { display: inline-block; vertical-align: top; text-align: left; font-size: 14px; color: #fff; padding-top: 115px; position: relative; z-index: 1; }
.contacts-banner .text h1 { font-size: 48px; margin-bottom: 40px; }
.contacts-banner .text p { color: #fff714; font-size: 16px; margin-bottom: 12px; margin-left: 90px; }
.contacts-banner .text .icon-addr { position: absolute; margin: -8px 0 0 -42px; }
.contacts-banner .text .btn-gps { width: 86px; height: 20px; padding: 8px 12px; border-radius: 17px; color: #3494ff; border: none; margin-top: 12px; position: relative; }
.contacts-banner .text .btn-gps:hover .text-gps { -moz-transform: translateX(-12px); -ms-transform: translateX(-12px); -webkit-transform: translateX(-12px); transform: translateX(-12px); }
.contacts-banner .text .btn-gps:hover .icon-gps { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); }
.contacts-banner .text .icon-gps, .contacts-banner .text .text-gps { -moz-transition: -moz-transform 0.4s; -o-transition: -o-transform 0.4s; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; }
.contacts-banner .text .icon-gps { vertical-align: -4px; margin-right: 6px; }
.contacts-banner .text .text-gps { display: inline-block; }

.contacts-list { overflow: hidden; margin-bottom: 70px; }
.contacts-list .item { width: 200px; height: 170px; background: #9ad67a; color: #FFF; float: left; text-align: center; cursor: default; }
.contacts-list .item + .item { margin-left: 50px; }
.contacts-list .item:hover .icon { animation: swing 1s; }
.contacts-list .item-2 { background: #6ed095; }
.contacts-list .item-3 { background: #61afff; }
.contacts-list .item-4 { background: #ffad5d; }
.contacts-list .item-5 { background: #ff7c7c; }
.contacts-list .icon { margin-top: 20px; margin-bottom: 10px; vertical-align: top; }
.contacts-list .cont { height: 50px; font-size: 0; }
.contacts-list .cont span { display: inline-block; margin: 0 9px; font-size: 14px; }
.contacts-list .cont span + span:before { position: absolute; margin: 5px 0 0 -10px; content: ''; width: 1px; height: 12px; background: #FFF; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; }
.contacts-list .qq { cursor: text; }

/*** @description: ie hack; @Author:ray; @create date:2016-01-06;
***/
.ie .polyhedron { display: none; }
.ie .bd-outstanding .triangle-box .ani-triangle1, .ie .bd-outstanding .triangle-box .ani-triangle2, .ie .bd-outstanding .triangle-box .ani-triangle3 { display: block; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .polyhedron { display: none; }
  .bd-outstanding .triangle-box .ani-triangle1, .bd-outstanding .triangle-box .ani-triangle2, .bd-outstanding .triangle-box .ani-triangle3 { display: block; } }
.lte-ie8 .resonance-svg { display: none; }
.lte-ie8 .bd-atmosphere { background: url(../images/index/banner.png) no-repeat center 0; }
.lte-ie8 .bd-resonance { background: url(../images/index/banner2.png) no-repeat center 0; }
.lte-ie8 .about-remark .bd li { list-style: decimal; }

/*# sourceMappingURL=style.css.map */
/******************************************************************************/
.banner1{ background:url(../img/banner.png) no-repeat}
.banner2{ background:url('img/banner3.png') no-repeat}
.banner3{ background:url('img/banner4.png') no-repeat}

.icon{ background:url('img/icon.png') no-repeat}
.in-top{ width:99px; height:50px; background-position: -40px -239px;}
.one-left{ width:195px; height:527px; position: absolute; top:9%; left:23%;}
.one-left li{ text-align:center;}
.icon-top{ width:99px; height:50px; background-position: -41px -239px; }
.icon-bt{ width:99px; height:50px; background-position: -41px -87px;}
.icon-line{ width:10px; height:37px; background-position: -299px -184px;}
.one-li-block span{ width:100%; height:30px; line-height:30px; font-size:24px; font-weight: 600; color:#C1A269; display: block; text-align:center;}
.one-li-block span:last-child{ font-size:14px;}
.ewm-img{ margin:10px auto;}
.ewm-img img{ width:130px; height:130px; border:5px solid #fff;}
.ewm-img span{ display: block; width:100%; height:30px; line-height:30px; text-align:center; color:#BB9E62;}

.one-logo{ width:834px; height:402px; position: absolute; top:10%; right:22%;}
.one-txt{ width:550px; height:40px; line-height:40px; font-size:26px; font-weight: 700; text-align:center; position: absolute; bottom:19%; left:35%; letter-spacing: .2em; color:#C09D5D; }
.one-txt-line{ width:370px; height:20px; position: absolute; bottom:15%; left:40%; background-position: -31px -424px;}

.two-logo{ width:376px; height:260px; background-position: -894px -68px; position: absolute; left:8%; top:5%;}
.two-logo-txt{ width:656px; height:343px; background-position: -1327px -69px; position: absolute; left:18%; top:30%; z-index: 9}
.two-rw{ width:896px; height:656px; background-position: -1076px -456px; position: absolute; right:10%; top:0;}

.three-logo{ width:332px; height:238px; background-position: -499px -71px; position:absolute; right:25%; top:5%;}
.three-rw{ width:1007px; height:664px; background-position: -70px -519px; position: absolute; left:0; top:0;}
.three-txt{ width:792px; height:285px; background-position: -96px -1322px; position: absolute; right:5%; bottom:10%;}