body{ background:url(/public/img/introduction/aboutbg.jpg) center top no-repeat;}
header{ height:600px; background:url(/public/img/introduction/banner.jpg) center center no-repeat; }
.bannerwz{ width:400px; height:232px; text-align:center; background:url(/public/img/introduction/wzbg.png) center center no-repeat; position:absolute; left:50%; top:50%; margin:-116px 0 0 -200px; color:#fff; padding-top:68px;}
.bannerwz div{ line-height:1.3em;}

.companyinfo .desc{ display:table-cell; vertical-align:middle; width:620px; padding:30px 30px 0 0; color:#999; line-height:1.8em;}
.companyinfo .desc p{ text-indent:2em;}
.companyinfo .img{  display:table-cell; vertical-align:middle; width:580px; padding:30px 30px 0 0; position:relative;}
.companyinfo .img .border{ width:468px; height:420px; border: solid 4px #0d6fb8; position:absolute; right:0; top:0;}
.companyinfo .img img{ position:relative; z-index:1; width:550px; height:420px; box-shadow:0 0 0 4px #daedfb;}
.companyinfo.animate .desc{ transition:all ease-in-out 1000ms; transform:translateX(-200px); opacity:0;}
.companyinfo.animate.load .desc{ transform:scale(1); opacity:1;}
.companyinfo.animate .img{ transition:all ease-in-out 1000ms; transform:translateX(200px); opacity:0;}
.companyinfo.animate.load .img{ transform:scale(1); opacity:1;}

.aboutonkoo{ padding:50px 0 20px 0;}
.aboutonkoo dl{ width:200px; height:214px; margin-right:50px; float:left; text-align:center; background:#fff; box-shadow: -15px 0px 50px rgba(0, 0, 0, 0.05);}
.aboutonkoo dl.n5{ margin-right:0;}
.aboutonkoo dt{ padding:20px 0 0 0;}
.aboutonkoo dt i{ display:block; font-size:50px; line-height:1.1em; color:#0d6fb8; font-weight:bold;}
.aboutonkoo dt em{ display:block; font-size:16px; line-height:1.8em; color:#0d6fb8; font-weight:bold;}
.aboutonkoo dt span{ display:block; font-size:12px; line-height:1.8em; color:#aaa}
.aboutonkoo dd{ color:#999; padding:8px 15px; line-height:1.7em; font-size:14px; text-align:left; text-align:justify;}
.aboutonkoo.animate dl{ transition:all ease-in-out 1000ms; transform:translateY(80px); opacity:0;}
.aboutonkoo.animate.load dl{ transform:scale(1); opacity:1;}

.brandinfo .desc{ line-height:1.8em; color:#999; padding-bottom:30px;}
.brandinfo.animate .img{ transition:all ease-in-out 1000ms; transform:translateY(80px); opacity:0;}
.brandinfo.animate.load .img{ transform:scale(1); opacity:1;}

.brandstrength{ height:645px; background:url(/public/img/introduction/rongyubg.png) center bottom no-repeat; margin-bottom:70px;}
.brandstrength .item{ width:237px; height:327px; padding:14px 15px; float:left; margin:0 31px 0 32px; background:url(/public/img/introduction/rybg.jpg) center center no-repeat; position:relative;}
.brandstrength .item::after{ content:""; position:absolute; left:50%; top:100%; width:390px; height:8px; margin:0 0 0 -195px; background:url(/public/img/introduction/yinying.png) center center no-repeat;}
.brandstrength .renzheng{ width:1100px; margin:60px auto 0 auto; height:258px;}
.brandstrength .renzheng li{ width:20%; padding:50px 30px; float:left; color:#999; text-align:center;}
.brandstrength .renzheng li img{ width:100px; height:100px; display:block; margin:0 auto;}
.brandstrength .renzheng li div{ padding:15px 0; line-height:1.6em;}
.brandstrength .renzheng li div span{display:block;}
.brandstrength.animate .item{ transition:all ease-in-out 1000ms; transform:translateY(-50px); opacity:0;}
.brandstrength.animate.load .item{ transform:scale(1); opacity:1;}

.wenhuabg{ height:1516px; background:url(/public/img/introduction/wenhuabg.jpg) center top repeat;}
.wenhua .item{ margin-bottom:45px;}
.wenhua .item .left{ display:table-cell; vertical-align:middle; width:772px; padding:0 80px 0 50px;}
.wenhua .item .img{ display:table-cell; vertical-align:middle; width:420px; height:280px; background:rgba(255,255,255,.5);}
.wenhua .item .img img{ width:420px; height:280px; transform:translate(-8px,-8px); display:block;}
.wenhua .item .ttl{ font-size:24px; line-height:1.8em;}
.wenhua .item .desc{ line-height:1.8em; padding:30px 0;}
.wenhua .item .line{ width:106%; height:0; border-bottom:1px solid #fff; position:relative; left:-15px;}
.wenhua .item .line::before{content:""; width:36px; height:208px; border:1px solid #fff; border-right:0; position:absolute; left:-36px; bottom:-1px;}
.wenhua .item .line::after{content:""; width:0; height:0; border-width:4px; border-style:solid; border-color:transparent transparent transparent #fff; position:absolute; left:100%; top:-3px;}
.wenhua .item.lpic .img img{ transform:translate(-8px,8px);}
.wenhua .item.lpic .left{padding:0 50px 0 80px;}
.wenhua .item.lpic .ttl{ text-align:right}
.wenhua .item.lpic .line{ left:auto; right:30px;}
.wenhua .item.lpic .line::before{ left:auto; right:-36px; border:1px solid #fff; border-left:0;}
.wenhua .item.lpic .line::after{ left:auto; right:100%; border-color:transparent #fff transparent transparent;}
.wenhua.animate .item{ transition:all ease-in-out 1000ms; transform:translateX(100px); opacity:0;}
.wenhua.animate .item.lpic{ transform:translateX(-100px);}
.wenhua.animate.load .item{ transform:scale(1); opacity:1;}

.development{ position:relative; padding-top:40px; padding-bottom:80px; margin-bottom:-60px; background:url(/public/img/introduction/fazhanbg.jpg) center bottom no-repeat;}
.development .item{ padding:25px 52% 25px 0; text-align:right;}
.development .item.r,.development .item:nth-child(2n+1){ padding:25px 0 25px 52%; text-align:left;}
.development .item .time{ font-weight:bold; color:#0d6fb8; font-size:20px; line-height:2em; position:relative;}
.development .item .time:before{content:""; position:absolute; left:auto; right:-31px; top:50%; margin-top:-6px; width:13px; height:13px; background:#0d6fb8; border:3px solid #e6f0f8; border-radius:50%; display:block; box-sizing:border-box;}
.development .item.r .time:before,.development .item:nth-child(2n+1) .time:before{ left:-30px;}
.development .item .ttl{ font-weight:bold;}
.development .item .desc{ line-height:1.8em; color:#666; padding-top:10px;}
.development .line{ position:absolute; left:50%; top:40px; border-left:1px solid #0d6fb8; color:#0d6fb8; width:0; height:755px;}
.development .line .iconfont{ position:absolute; left:-20px; bottom:100%; margin-bottom:-2px;}
.development.animate .item{ transition:all ease-in-out 1000ms; transform:translateX(100px); opacity:0;}
.development.animate .item.r{ transform:translateX(-100px);}
.development.animate.load .item{ transform:scale(1); opacity:1;}