.index-container{background: url(/yinghai/img/index-bg.jpg) no-repeat bottom center;background-size:cover;width: 100%;height:100%;min-height:100%;overflow:hidden;padding:200px 0 0 0;position: fixed}
.index-container h1{background:url(/yinghai/images/biaoti.png) no-repeat;margin:0 auto;width:713px;height:96px;margin-bottom: 100px}

section.business {}

.business .box {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -ms-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

.business .box ul.items {
    margin: 0 auto;

}

.business .box ul.items li {
    width: 218px;
    height: 300px;
    margin: 0 7px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer
}

.business .box ul.items li a{ width:278px; height:300px;}

.business .box ul.items li i {
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 43px;
    height: 69px;
}

.business .box ul.items li.pc i {
    width: 69px;
    background: url(/yinghai/img/words.png) no-repeat -245px 0;
}

.business .box ul.items li.mobi i {
    width: 79px;
    background: url(/yinghai/img/words.png) no-repeat -420px -80px;
}

.business .box ul.items li.sys i {
    width: 76px;
    background: url(/yinghai/img/words.png) no-repeat -415px 0;
}

.business .box ul.items li.app i {
    width: 74px;
    background: url(/yinghai/img/words.png) no-repeat -244px -80px;
}

.business .box ul.items li.host i {
    width: 79px;
    background: url(/yinghai/img/words.png) no-repeat -628px 0;
}

.business .box ul.items li u {
    display: block;
    position: absolute;
    width: 156px;
    height: 156px;
    margin-left: 30px;
    background: url(/yinghai/img/words.png) no-repeat 0px -5px;
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
}

.business .box ul.items li u.cl {
    clip: rect(0px,156px,-10px,78px);
}

.business.active .box ul.items li u.cl {
    clip: rect(0px,156px,156px,78px);
}

.business .box ul.items li u.cr {
    clip: rect(156px,78px,156px,0px);
}

.business.active .box ul.items li u.cr {
    clip: rect(0px,78px,156px,0px);
}

.business .box ul.items li strong {
    display: block;
    margin-top: 70px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #06c;
}

.business .box ul.items li p {
    position: relative;
    top: 200px;
    color: White;
    font-family: Verdana,"Î¢ÈíÑÅºÚ";
    font-size: 12px;
    line-height: 20px;
    padding: 0 10px;
    text-align: center;
}

.business .box ul.items li:hover {
    -webkit-transition: all .5s ease-in-out .3s;
    -moz-transition: all .5s ease-in-out .3s;
    -ms-transition: all .5s ease-in-out .3s;
    -o-transition: all .5s ease-in-out .3s;
    transition: all .5s ease-in-out .3s;
    background:#06c;
}

.business .box ul.items li a:hover {text-decoration: none;}

.business .box ul.items li:hover i {
    -webkit-transition: all .5s ease-in-out .4s;
    -moz-transition: all .5s ease-in-out .4s;
    -ms-transition: all .5s ease-in-out .4s;
    -o-transition: all .5s ease-in-out .4s;
    transition: all .5s ease-in-out .4s;
}

.business .box ul.items li.pc:hover i {
    background: url(/yinghai/img/words.png) no-repeat -168px 0;
}

.business .box ul.items li.mobi:hover i {
    background: url(/yinghai/img/words.png) no-repeat -335px -80px;
}

.business .box ul.items li.sys:hover i {
    background: url(/yinghai/img/words.png) no-repeat -327px 0;
}

.business .box ul.items li.app:hover i {
    background: url(/yinghai/img/words.png) no-repeat -164px -80px;
}

.business .box ul.items li.host:hover i {
    background: url(/yinghai/img/words.png) no-repeat -525px 0;
}

.business .box ul.items li:hover u.cl {
    clip: rect(0px,156px,-10px,78px);
}

.business .box ul.items li:hover u.cr {
    clip: rect(156px,78px,156px,0px);
}

.business .box ul.items li:hover strong {
    color: White;
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -ms-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

.business .box ul.items li:hover p {
    top: 20px;
    -webkit-transition: all .3s ease-in-out .5s;
    -moz-transition: all .3s ease-in-out .5s;
    -ms-transition: all .3s ease-in-out .5s;
    -o-transition: all .3s ease-in-out .5s;
    transition: all .3s ease-in-out .5s;
}

.business .box label {
    display: block;
    margin: 0 auto;
    margin-top: -40px;
    width: 297px;
    height: 21px;
    background: url(/yinghai/img/words.png) no-repeat 0px -333px;
}