@charset "utf-8";

#header.bg1,#header.bg0{background: #2450be;}

.bannerCont1{position: relative; width: 100%; height: 100%;}

.bannerCont2{
    position: relative; width: 100%; height: 100%;
    /* background: #1850c1; */
    /* background: -webkit-linear-gradient(#1850c1, #1a52c3); */
    /* background: -o-linear-gradient(#1850c1, #1a52c3); */
    /* background: -moz-linear-gradient(#1850c1, #1a52c3); */
    /* background: linear-gradient(#1850c1, #1a52c3); */
}
.bannerCont2 .title {
    display: flex;
    justify-content: center;
    margin-top: 100px;
}
.bannerCont2 .title span {
    color: #ffffff;
    font-size: 44px;
}
.bannerCont2 .box1 {
    display: flex;
    justify-content: center;

}
.bannerCont2 .box1 .box {
    display: flex;
    justify-content: space-between;
}
.bannerCont2 .box1 .box .left {
    position: relative;
    right: 300px;
}
.bannerCont2 .box1 .box .right {
    position: relative;
    left: 300px;
}
.bannerCont2 .box1 .box .con {
    width: 600px;
    height: 500px;
    margin-top: 50px;
}
.bannerCont2 .box1 .box .con img {
    width: 100%;
    height: 100%;
}


.bannerCont2 .center{
    height: 100%;
    position: relative;
}

.banner2-Img1{
    max-width: 80%;
    position: absolute;
    left:10%;
    top:calc(50% - 180px);
}

.page1{ padding:0;  background: #2450be url("../ihope/images/bg1.jpg") no-repeat center center; background-size: cover;  }

.page4{background: #fff;}

.sec-box h1,.sec-box h2,.sec-box h3 {

    margin-top: 20px;

    margin-bottom: 10px;

}

img{width:auto; height: auto;}

section{padding:50px 0;}

#nav{font-size: 0;}

#nav li{ padding:0 10px; font-size: 15px;}



.clients .box {

    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

}



.clients .box .caption {

    width: 100%;

    text-align: center;

    -moz-opacity: 0;

    opacity: 0;

    -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

}



.clients.active .box .caption {

    -moz-opacity: 1;

    opacity: 1

}



.clients .box .caption i {

    display: block;

    margin: 0 auto;

    margin-bottom: 20px;

    width: 299px;

    height: 37px;

    background: url("../ihope/images/words.png") no-repeat -152px -528px

}



.clients .box .caption span {

    font-size: 24px;

    padding-left: 10px

}



.clients .box ul.items {

    margin: 0 auto;

    width: 1155px;

    height: 450px;

    font-size: 0;

    overflow: hidden

}



.clients .box ul.items li {

    position: relative;

    padding: 0;

    width: 229px;

    height: 150px;

    overflow: hidden;

    z-index: 10

}



.clients .box ul.items li.cctv {

    top: 600px;

    background: url("../ihope/images/clients.png") no-repeat;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.cctv.active {

    background: url("../ihope/images/clients.png") no-repeat 0 -150px

}



.clients.active .box ul.items li.cctv {

    top: 0

}



.clients .box ul.items li.unicom {

    top: -400px;

    background: url("../ihope/images/clients.png") no-repeat -230px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.unicom.active {

    background: url("../ihope/images/clients.png") no-repeat -230px -150px

}



.clients.active .box ul.items li.unicom {

    top: 0

}



.clients .box ul.items li.tsinghua {

    top: 600px;

    background: url("../ihope/images/clients.png") no-repeat -460px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.tsinghua.active {

    background: url("../ihope/images/clients.png") no-repeat -460px -150px

}



.clients.active .box ul.items li.tsinghua {

    top: 0

}



.clients .box ul.items li.cas {

    top: -400px;

    background: url("../ihope/images/clients.png") no-repeat -690px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.cas.active {

    background: url("../ihope/images/clients.png") no-repeat -690px -150px

}



.clients.active .box ul.items li.cas {

    top: 0

}



.clients .box ul.items li.sipo {

    top: 600px;

    background: url("../ihope/images/clients.png") no-repeat -920px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.sipo.active {

    background: url("../ihope/images/clients.png") no-repeat -920px -150px

}



.clients.active .box ul.items li.sipo {

    top: 0

}



.clients .box ul.items li.apple {

    top: 450px;

    background: url("../ihope/images/clients.png") no-repeat -1150px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.apple.active {

    background: url("../ihope/images/clients.png") no-repeat -1150px -150px

}



.clients.active .box ul.items li.apple {

    top: 0

}



.clients .box ul.items li.das {

    top: -550px;

    background: url("../ihope/images/clients.png") no-repeat -1380px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.das.active {

    background: url("../ihope/images/clients.png") no-repeat -1380px -150px

}



.clients.active .box ul.items li.das {

    top: 0

}



.clients .box ul.items li.hunantv {

    top: 450px;

    background: url("../ihope/images/clients.png") no-repeat -1610px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.hunantv.active {

    background: url("../ihope/images/clients.png") no-repeat -1610px -150px

}



.clients.active .box ul.items li.hunantv {

    top: 0

}



.clients .box ul.items li.sino {

    top: -550px;

    background: url("../ihope/images/clients.png") no-repeat -1840px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.sino.active {

    background: url("../ihope/images/clients.png") no-repeat -1840px -150px

}



.clients.active .box ul.items li.sino {

    top: 0

}



.clients .box ul.items li.report {

    top: 450px;

    background: url("../ihope/images/clients.png") no-repeat -2070px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.report.active {

    background: url("../ihope/images/clients.png") no-repeat -2070px -150px

}



.clients.active .box ul.items li.report {

    top: 0

}



.clients .box ul.items li.gedu {

    top: 300px;

    background: url("../ihope/images/clients.png") no-repeat -2300px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.gedu.active {

    background: url("../ihope/images/clients.png") no-repeat -2300px -150px

}



.clients.active .box ul.items li.gedu {

    top: 0

}



.clients .box ul.items li.bgg {

    top: -700px;

    background: url("../ihope/images/clients.png") no-repeat -2530px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.bgg.active {

    background: url("../ihope/images/clients.png") no-repeat -2530px -150px

}



.clients.active .box ul.items li.bgg {

    top: 0

}



.clients .box ul.items li.bsec {

    top: 300px;

    background: url("../ihope/images/clients.png") no-repeat -2760px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.bsec.active {

    background: url("../ihope/images/clients.png") no-repeat -2760px -150px

}



.clients.active .box ul.items li.bsec {

    top: 0

}



.clients .box ul.items li.huadan {

    top: -700px;

    background: url("../ihope/images/clients.png") no-repeat -2990px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.huadan.active {

    background: url("../ihope/images/clients.png") no-repeat -2990px -150px

}



.clients.active .box ul.items li.huadan {

    top: 0

}



.clients .box ul.items li.zd {

    top: 300px;

    background: url("../ihope/images/clients.png") no-repeat -3220px 0;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.clients .box ul.items li.zd.active {

    background: url("../ihope/images/clients.png") no-repeat -3220px -150px

}



.clients.active .box ul.items li.zd {

    top: 0

}



.clients .box ul.items li.r {

    border-right: 1px dotted #ddd

}



.clients .box ul.items li.b {

    border-bottom: 1px dotted #ddd

}



.clients .box ul.items li span {

    position: absolute;

    bottom: -30px

}



.clients .box ul.items li.bg.all {

    position: absolute;

    width: 1155px;

    height: 450px;

    background-color: White;

    -moz-opacity: .3;

    opacity: .3;

    filter: alpha(opacity=30)

}



.clients .box ul.items li.bg.one {

    position: absolute;

    background: #eee;

    -moz-opacity: .5;

    opacity: .5;

    filter: alpha(opacity=50);

    -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;

    display: none

}



.clients .box ul.mini {

    display: none

}

.list-inline li{

    display: inline-block;

}



section.quality {

    background: url("../ihope/images/wallpaper5.jpg") 50% 10%

}



.quality .box {

    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

}



.quality .box .caption {

    width: 100%;

    text-align: center;

    -moz-opacity: 0;

    opacity: 0;

    -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

}



.quality.active .box .caption {

    -moz-opacity: 1;

    opacity: 1

}



.quality .box .caption i {

    display: block;

    margin: 0 auto;

    margin-bottom: 20px;

    width: 240px;

    height: 37px;

    background: url("../ihope/images/words.png") no-repeat 0 -576px

}



.quality .box .caption span {

    padding-left: 5px;

    color: White;

    font-size: 24px

}



.quality .box .items {

    margin: 0 auto;

    margin-top: 120px;

    width: 960px

}



.quality .box .swiper-slide {

    position: relative;

    width: 254px;

    margin: 0 33px

}



.quality .box .items .swiper-slide.nth1 {

    left: -300px;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.quality.active .box .items .swiper-slide.nth1 {

    left: 0

}



.quality .box .items .swiper-slide.nth2 {

    bottom: -300px;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.quality.active .box .items .swiper-slide.nth2 {

    bottom: 0

}



.quality .box .items .swiper-slide.nth3 {

    right: -300px;

    -webkit-transition: all .8s ease-in-out 0s;

    -moz-transition: all .8s ease-in-out 0s;

    -ms-transition: all .8s ease-in-out 0s;

    -o-transition: all .8s ease-in-out 0s;

    transition: all .8s ease-in-out 0s

}



.quality.active .box .items .swiper-slide.nth3 {

    right: 0

}



.quality .box .swiper-slide ul {

    text-align: center;

    margin: 0 auto;

    margin-bottom: 20px

}



.quality .box .swiper-slide ul li {

    position: relative;

    margin: 0 15px;

    padding: 0;

    overflow: hidden

}



.quality .box .swiper-slide ul li.mobi {

    width: 14px;

    height: 27px;

    background: url("../ihope/images/icons.png") no-repeat 0 -264px

}



.quality .box .swiper-slide ul li.pad {

    width: 29px;

    height: 23px;

    background: url("../ihope/images/icons.png") no-repeat -71px -264px

}



.quality .box .swiper-slide ul li.pc {

    width: 35px;

    height: 27px;

    background: url("../ihope/images/icons.png") no-repeat 0 -303px

}



.quality .box .swiper-slide ul li.windows {

    width: 27px;

    height: 27px;

    background: url("../ihope/images/icons.png") no-repeat -73px -304px

}



.quality .box .swiper-slide ul li.ios {

    width: 24px;

    height: 30px;

    background: url("../ihope/images/icons.png") no-repeat 0 -344px

}



.quality .box .swiper-slide ul li.andriod {

    width: 28px;

    height: 29px;

    background: url("../ihope/images/icons.png") no-repeat -72px -345px

}



.quality .box .swiper-slide ul li.ie {

    width: 28px;

    height: 28px;

    background: url("../ihope/images/icons.png") no-repeat 0 -392px

}



.quality .box .swiper-slide ul li.chrome {

    width: 30px;

    height: 30px;

    background: url("../ihope/images/icons.png") no-repeat -71px -392px

}



.quality .box .swiper-slide ul li.firefox {

    width: 32px;

    height: 30px;

    background: url("../ihope/images/icons.png") no-repeat 0 -432px

}



.quality .box .swiper-slide ul li.safari {

    width: 30px;

    height: 32px;

    background: url("../ihope/images/icons.png") no-repeat -71px -432px

}



.quality .box .swiper-slide ul li span {

    position: absolute;

    top: 30px

}



.quality .box .swiper-slide p {

    color: #e1e1e1;

    text-align: center;

    line-height: 36px

}



.quality .box a.lookall {

    display: block;

    margin: 0 auto;

    margin-top: 90px;

    width: 300px;

    padding: 12px 0;

    color: #00a0e9;

    font-size: 18px;

    letter-spacing: 3px;

    text-align: center;

    text-decoration: none;

    border: 1px solid #00a0e9;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    -moz-opacity: 0;

    opacity: 0;

    -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

}



.quality.active .box a.lookall {

    -moz-opacity: 1;

    opacity: 1

}



.quality .box a.lookall:hover {

    color: White;

    background: #00a0e9;

    border: 1px solid #00a0e9

}



.quality .box .mini, .quality .box a.prev, .quality .box a.next {

    display: none

}



section.marketing {

    background: url("../ihope/images/wallpaper6.jpg") 50% 45%

}



.marketing .box {

    position: relative;

    margin-top: -80px;

    -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

}



.marketing .box .caption {

    position: relative;

    width: 100%;

    text-align: center;

    -moz-opacity: 0;

    opacity: 0;

    -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;

    z-index: 10

}



.marketing.active .box .caption {

    -moz-opacity: 1;

    opacity: 1

}



.marketing .box .caption i {

    display: block;

    margin: 0 auto;

    margin-bottom: 20px;

    width: 240px;

    height: 37px;

    background: url("../ihope/images/words.png") no-repeat right -576px

}



.marketing .box .caption span {

    padding-left: 5px;

    font-size: 24px

}



.marketing .box ul.items {

    margin: 0 auto;

    margin-top: 30px;

    position: relative;

    z-index: 10

}



.marketing .box ul.items li {

    width: 128px;

    height: 230px;

    margin: 0 20px;

    overflow: hidden

}



.marketing .box ul.items li i {

    display: block;

    position: relative;

    margin: 0 auto;

    margin-top: 28px;

    height: 70px

}



.marketing .box ul.items li.se i {

    width: 54px;

    background: url("../ihope/images/words.png") no-repeat -144px -632px

}



.marketing .box ul.items li.weixin i {

    width: 74px;

    background: url("../ihope/images/words.png") no-repeat -207px -630px

}



.marketing .box ul.items li.weibo i {

    width: 68px;

    background: url("../ihope/images/words.png") no-repeat -288px -630px

}



.marketing .box ul.items li.sms i {

    width: 61px;

    background: url("../ihope/images/words.png") no-repeat -366px -628px

}



.marketing .box ul.items li.pay i {

    width: 56px;

    background: url("../ihope/images/words.png") no-repeat -438px -639px

}



.marketing .box ul.items li.bbs i {

    width: 51px;

    background: url("../ihope/images/words.png") no-repeat -144px -705px

}



.marketing .box ul.items li u {

    display: block;

    position: absolute;

    width: 128px;

    height: 128px;

    background: url("../ihope/images/words.png") no-repeat 0 -624px;

    -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

}



.marketing .box ul.items li u.cl {

    clip: rect(0px, 128px, -10px, 64px)

}



.marketing .box ul.items li:hover u.cl {

    clip: rect(0px, 128px, 128px, 64px)

}



.marketing .box ul.items li u.cr {

    clip: rect(128px, 64px, 128px, 0px)

}



.marketing .box ul.items li:hover u.cr {

    clip: rect(0px, 64px, 128px, 0px)

}



.marketing .box ul.items li strong {

    display: block;

    margin: 200px 0 10px 0;

    font-size: 16px;

    text-align: center;

    -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

}



.marketing.active .box ul.items li strong {

    margin-top: 50px

}



.marketing .box ul.items li p {

    line-height: 20px;

    text-align: center

}



.marketing .shade {

    display: none;

    position: absolute;

    top: 0;

    width: 100%;

    background: White;

    -moz-opacity: .4;

    opacity: .4;

    filter: alpha(opacity=40)

}



section.aboutus {

    position: relative;

    background: url("../ihope/images/aboutus_bg.jpg") 50% 60%;

    -moz-background-size: cover;

    background-size: cover

}



.aboutus .swiper-container {

    width: 100%;

    height: 100%;

    z-index: 25;

    position: absolute

}



.aboutus .swiper-slide .items {

    max-width: 750px;

    width: 70%;

    margin: 0 auto;

    color: #fff

}



.aboutus .swiper-slide .title {

    font-size: 28px;

    font-weight: 300;

    color: #00a0e9

}



.aboutus .swiper-slide .text p {

    font-size: 14px;

    line-height: 1.3;

    padding: 3px 0

}



.aboutus ul.menu {

    position: absolute;

    list-style: none;

    top: 150px;

    left: 50px;

    width: 80px;

    padding: 0

}



.aboutus ul.menu li {

    position: relative;

    color: #888;

    font-size: 16px;

    text-align: center;

    padding: 10px 0;

    cursor: pointer;

    z-index: 30;

    -webkit-transition: all .0s ease-in-out .2s;

    -moz-transition: all .0s ease-in-out .2s;

    -ms-transition: all .0s ease-in-out .2s;

    -o-transition: all .0s ease-in-out .2s;

    transition: all .0s ease-in-out .2s

}



.aboutus ul.menu li.active {

    color: White

}



.aboutus ul.menu li.bg.all {

    position: absolute;

    padding: 0;

    top: 0;

    left: 0;

    width: 80px !important;

    height: 126px !important;

    background: #00a0e9;

    -moz-opacity: .15;

    opacity: .15;

    filter: alpha(opacity=15);

    z-index: 10

}



.aboutus ul.menu li.bg.one {

    position: absolute;

    top: 0;

    left: 0;

    width: 80px;

    background: #00a0e9;

    -moz-opacity: .2;

    opacity: .2;

    filter: alpha(opacity=20);

    -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;

    z-index: 20

}



.aboutus .items .swiper-slide.nth1 strong {

    display: block;

    color: #ddd;

    font-size: 40px;

    font-weight: normal;

    letter-spacing: 5px

}



.aboutus .items .swiper-slide.nth1 p, .aboutus .items .swiper-slide.nth3 {

    color: #999;

    line-height: 35px

}



.aboutus .items .swiper-slide.nth2 u {

    display: block;

    margin-top: 20px;

    color: #999;

    font-size: 24px;

    text-decoration: none

}



.aboutus .items .swiper-slide.nth2 strong {

    display: block;

    color: #00a0e9;

    font-size: 22px;

    font-weight: normal;

    text-indent: 28px

}



.aboutus .items .swiper-slide.nth2 p {

    margin-top: 20px;

    color: #999;

    line-height: 35px;

    text-indent: 28px

}



.aboutus .items .swiper-slide.nth3 strong {

    display: block;

    margin-bottom: 20px;

    color: #00a0e9;

    font-size: 22px;

    font-weight: normal

}



.aboutus .items .swiper-slide.nth3 ul {

    padding: 0

}



.aboutus .items .swiper-slide.nth3 ul li {

    color: #999;

    line-height: 35px;

    padding-left: 30px;

    list-style: none;

    background: url("../ihope/images/point.png") no-repeat 0 13px

}



.aboutus .items .swiper-slide.nth3 ul li u {

    margin: 0 15px;

    text-decoration: none

}



.aboutus table.exp {

    position: absolute;

    bottom: -80px;

    width: 100%;

    border-top: 1px solid #666;

    -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;

    z-index: 20

}



.aboutus.active table.exp {

    bottom: 0

}



.aboutus table.exp td {

    width: 20%;

    height: 70px;

    color: #bbb;

    text-align: center

}



.aboutus table.exp u {

    margin-right: 10px;

    color: #00a0e9;

    font-family: Arial;

    font-size: 26px;

    text-decoration: none

}



.aboutus .expBg {

    position: absolute;

    bottom: -80px;

    width: 100%;

    height: 70px;

    background: White;

    -moz-opacity: .2;

    opacity: .2;

    filter: alpha(opacity=20);

    -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;

    z-index: 10

}



.aboutus.active .expBg {

    bottom: 0

}



.aboutus .shade {

    position: absolute;

    width: 100%;

    height: 100%;

    background: Black;

    -moz-opacity: .5;

    opacity: .5;

    -webkit-transition: all 1s ease-in-out 0s;

    -moz-transition: all 1s ease-in-out 0s;

    -ms-transition: all 1s ease-in-out 0s;

    -o-transition: all 1s ease-in-out 0s;

    transition: all 1s ease-in-out 0s;

    z-index: 5

}



.aboutus.active .shade {

    -moz-opacity: 0;

    opacity: 0;

    z-index: -1

}



section.contact {

    position: relative;

    background: url("../ihope/images/wallpaper8.jpg") 50% bottom;

    -moz-background-size: cover;

    background-size: cover

}



.contact .box {

    position: relative;

    margin: 0 auto;

    width: 900px;

    height: 330px;

    -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

}



.contact .box .above {

    position: relative;

    top: -300px;

    width: 100%;

    height: 200px;

    -moz-opacity: 0;

    opacity: 0;

    -webkit-transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s ease-in-out 0s;

    -ms-transition: all .6s ease-in-out 0s;

    -o-transition: all .6s ease-in-out 0s;

    transition: all .6s ease-in-out 0s

}



.contact.active .box .above {

    top: 0;

    -moz-opacity: 1;

    opacity: 1

}



.contact .box .above .wechat {

    float: left

}



.contact .box .above .left {

    float: left;

    margin: -12px 0 0 70px

}



.contact .box .above .left a.tel {

    display: block;

    margin: 10px 0 15px 0;

    width: 243px;

    height: 37px;

    text-decoration: none;

    background: url("../ihope/images/words.png") no-repeat 0 -877px

}



.contact .box .above .left p {

    margin-top: 8px;

    color: #666;

    line-height: 26px

}



.contact .box .above .left a {

    color: #666;

    text-decoration: none

}



.contact .box .above .left p u {

    margin: 0 5px;

    text-decoration: none

}



.contact .box .above .left p a.job {

    margin-left: 20px;

    color: #d00000;

    font-weight: bold

}



.contact .box .above .left p a.job:hover {

    border-bottom: 1px solid #d00000

}



.contact .box .above .right {

    float: right;

    margin-top: 48px;

    color: #666;

    line-height: 26px

}



.contact .box .above .right u {

    margin: 0 5px;

    text-decoration: none

}



.contact .box .below {

    position: relative;

    padding-top: 20px;

    width: 100%;

    border-top: 1px dotted #ccc

}



.contact .box .below i {

    display: block;

    position: relative;

    top: 300px;

    margin: 0 auto;

    width: 424px;

    height: 86px;

    background: url("../ihope/images/words.png") no-repeat 0 -787px;

    -moz-opacity: 0;

    opacity: 0;

    -webkit-transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s ease-in-out 0s;

    -ms-transition: all .6s ease-in-out 0s;

    -o-transition: all .6s ease-in-out 0s;

    transition: all .6s ease-in-out 0s

}



.contact.active .box .below i {

    top: 0;

    -moz-opacity: 1;

    opacity: 1

}



.contact .box .below p {

    font-size: 12px;

    color: #999;

    display: block;

    position: relative;

    top: 300px;

    margin: 0 auto;

    width: 600px;

    height: 86px;

    -moz-opacity: 0;

    opacity: 0;

    -webkit-transition: all .6s ease-in-out 0s;

    -moz-transition: all .6s ease-in-out 0s;

    -ms-transition: all .6s ease-in-out 0s;

    -o-transition: all .6s ease-in-out 0s;

    transition: all .6s ease-in-out 0s

}



.contact.active .box .below p {

    top: 0;

    -moz-opacity: 1;

    opacity: 1

}



.dock {

    position: fixed;

    right: 0;

    width: 50px;

    -moz-opacity: .7;

    opacity: .7;

    z-index: 200

}



.dock .online_qq {

    display: block;

    width: 100%;

    height: 100%

}



.dock.close {

    z-index: 50

}



.dock ul.icons {

    position: absolute;

    list-style: none;

    right: 0;

    padding: 0;

    width: 50px;

    border: 1px solid #333;

    border-right: 0;

    background: #111;

    -moz-border-radius: 10px 0 0 10px;

    -webkit-border-radius: 10px 0 0 10px;

    border-radius: 10px 0 0 10px;

    -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

}



.dock.close ul.icons {

    right: -70px

}



.dock ul.icons li i {

    display: block;

    position: relative;

    width: 50px;

    height: 50px;

    background: url("../ihope/images/icons.png") no-repeat;

    cursor: pointer;

    -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;

    z-index: 210

}



.dock ul.icons li.active i {

    -moz-opacity: .4;

    opacity: .4

}



.dock ul.icons li.up i {

    background-position: -63px -150px

}



.dock ul.icons li.tel i {

    background-position: -62px -108px

}



.dock ul.icons li.im i {

    background-position: -63px -20px

}



.dock ul.icons li.wechat i {

    background-position: -59px -66px

}



.dock ul.icons li.down i {

    background-position: -63px -190px

}



.dock ul.icons li p {

    display: block;

    font-size: 13px;

    position: absolute;

    top: 20px;

    right: -260px;

    padding: 15px 20px;

    color: White;

    line-height: 30px;

    border: 1px solid #333;

    border-right: 0;

    background: #111;

    -moz-border-radius: 10px 0 0 10px;

    -webkit-border-radius: 10px 0 0 10px;

    border-radius: 10px 0 0 10px;

    -moz-opacity: 0;

    opacity: 0;

    filter: alpha(opacity=0);

    -webkit-transition: all .4s ease-in-out .1s;

    -moz-transition: all .4s ease-in-out .1s;

    -ms-transition: all .4s ease-in-out .1s;

    -o-transition: all .4s ease-in-out .1s;

    transition: all .4s ease-in-out .1s;

    overflow: hidden;

    z-index: 201

}



.dock ul.icons li.active p {

    right: 50px;

    -moz-opacity: 1;

    opacity: 1;

    filter: alpha(opacity=100)

}



.dock ul.icons li.tel p {

    width: 150px

}



.dock ul.icons li.im p {

    width: 120px

}



.dock ul.icons li.im p a {

    display: block;

    margin-top: 12px;

    width: 130px;

    height: 35px;

    line-height: 32px;

    color: #00a0e9;

    font-size: 14px;

    text-align: center;

    text-decoration: none;

    border: 1px solid #00a0e9;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    -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

}



.dock ul.icons li.im p a:hover {

    color: White;

    background: #00a0e9;

    border: 1px solid #00a0e9

}



.dock ul.icons li.wechat p {

    width: 118px

}



.dock ul.icons li.wechat p img {

    width: 115px;

    border: 2px solid White

}



.dock a.switch {

    position: absolute;

    display: block;

    top: 270px;

    right: 11px;

    width: 26px;

    height: 26px;

    background: url("../ihope/images/icons.png") no-repeat 0 -640px;

    cursor: pointer;

    -webkit-transition-delay: .15s;

    -moz-transition-delay: .15s;

    -ms-transition-delay: .15s;

    -o-transition-delay: .15s;

    transition-delay: .15s

}



.dock a.switch.off {

    background-position: -32px -640px

}



@media (max-width: 1300px) {

    header .logo {

        top: 24px;

        left: 35px;

        width: 160px

    }



    header .words {

        display: none

    }



    header nav.menu ul li, header nav.menu ul div {

        margin: 0 8px

    }



    header .hotline {

        right: 200px

    }



    header.fixed .hotline {

        right: 170px

    }



    header .hotline u {

        right: 215px

    }



    header.fixed .hotline u {

        right: 180px

    }

}



@media (max-width: 1080px) {

    header .words {

        display: block;

        left: 220px

    }



    header .hotline {

        right: 285px

    }



    header.fixed .hotline {

        right: 255px

    }



    header .hotline u {

        right: 300px

    }



    header.fixed .hotline u {

        right: 265px

    }



    header .menu-icon {

        display: block

    }



    header nav.menu {

        position: fixed;

        width: 72px;

        top: 38px;

        right: -100px;

        margin: 0;

        padding-top: 30px;

        border: 1px solid #000;

        border-top: 1px solid #00a0e9;

        border-right: 0;

        background: #3a3a3a

    }



    header.fixed nav.menu {

        top: 22px;

        margin: 0

    }



    header nav.menu.active {

        display: block;

        margin: 0;

        right: 0

    }



    header nav.menu ul li, header.fixed nav.menu ul div {

        margin: 0;

        margin-left: 5px;

        width: 73px;

        padding: 8px 0;

        font-family: "宋体";

        font-size: 14px;

        text-align: center

    }



    header nav.menu ul li.active, header.fixed nav.menu ul div.active {

        background: #111

    }



    header nav.menu .line {

        -moz-opacity: 0;

        opacity: 0

    }

}



@media (max-width: 720px) {

    header {

        height: 54px

    }



    header .logo, header.fixed .logo {

        top: 17px;

        left: 20px;

        width: 120px

    }



    header .words {

        display: none

    }



    header .menu-icon, header.fixed .menu-icon {

        top: 18px;

        right: 30px

    }



    header nav.menu, header.fixed nav.menu {

        width: 54px;

        top: 22px;

        padding-top: 30px

    }



    header nav.menu ul li {

        margin-left: 5px;

        width: 55px;

        padding: 5px 0;

        font-size: 12px

    }



    header .hotline, header.fixed .hotline {

        top: 21px;

        right: 218px

    }



    header .hotline span {

        font-size: 20px

    }



    header .hotline u, header.fixed .hotline u {

        top: 24px;

        right: 223px;

        width: 15px;

        height: 21px;

        background: url("../ihope/images/icons.png") no-repeat 0 -34px

    }

}



@media (max-width: 460px) {

    header {

        height: 42px

    }



    header.fixed {

        height: 60px

    }



    header .phone_website {

        display: block

    }



    header .logo, header.fixed .logo {

        width: 80px

    }



    header .menu-icon, header.fixed .menu-icon {

        top: 13px

    }



    header .menu-icon span.glyphicon-earphone {

        display: inline

    }



    header nav.menu, header.fixed nav.menu {

        top: 17px

    }



    header .hotline, header.fixed .hotline {

        display: none

    }



    header.fixed .bg {

        height: 60px

    }

}



@media (max-height: 310px) {

    header, header.fixed {

        display: none;

        height: 0

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    div.welcome2 {

        background: url("../ihope/images/welcome_h800.jpg") 30% 80%

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    div.welcome2 {

        background: url("../ihope/images/welcome_h600.jpg") 30% 80%

    }

}



@media (max-width: 800px),(max-height: 480px) {

    div.welcome2 p {

        width: 218px;

        top: 50%;

        left: 50%;

        margin-top: -110px;

        margin-left: -109px

    }

}



@media (max-height: 260px) {

    div.welcome2 p {

        height: 158px;

        padding: 0;

        margin-top: -79px

    }



    div.welcome2 p u {

        display: none

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    .video .swiper-container .nth1 {

        background: url("../ihope/images/wallpaper1_1_h800.jpg") 50% 35%

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    .video .swiper-container .nth1 {

        background: url("../ihope/images/wallpaper1_1_h600.jpg") 50% 35%

    }

}



@media (max-height: 750px) {

    .video .swiper-container .nth1 .line {

        display: none

    }

}



@media (max-width: 900px),(min-height: 1201px),(max-height: 720px) {

    .video .swiper-container .nth1 .shade {

        display: none

    }

}



@media (orientation: landscape) and (max-height: 480px),(orientation: portrait) and (max-width: 699px) {

    .video .swiper-container .nth1 .box .top {

        font-size: 40px

    }



    .video .swiper-container .nth1.active .box .top {

        font-size: 24px

    }



    .video .swiper-container .nth1 .box .mid {

        width: 216px;

        height: 40px;

        margin-top: 10px;

        background: url("../ihope/images/words_mini.png") no-repeat 0 -131px

    }



    .video .swiper-container .nth1 .box .bottom {

        font-size: 12px;

        font-family: "宋体";

        line-height: 20px

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    .video .swiper-container .nth2 {

        background: url("../ihope/images/wallpaper1_2_h800.jpg") 50% 20%

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    .video .swiper-container .nth2 {

        background: url("../ihope/images/wallpaper1_2_h600.jpg") 50% 20%

    }

}



@media (max-width: 799px) {

    .video .swiper-container .nth2 .box {

        left: -400px;

        width: 100%;

        text-align: center

    }



    .video .swiper-container .nth2.active .box {

        left: 0

    }



    .video .swiper-container .nth2 .box i {

        margin: 0 auto;

        margin-bottom: 10px

    }

}



@media (orientation: landscape) and (max-height: 480px),(orientation: portrait) and (max-width: 699px) {

    .video .swiper-container .nth2 .box span {

        font-size: 24px

    }



    .video .swiper-container .nth2 .box i {

        width: 191px;

        height: 40px;

        margin-top: 8px;

        margin-bottom: 5px;

        background: url("../ihope/images/words_mini.png") no-repeat 0 -45px

    }



    .video .swiper-container .nth2 .box p {

        font-size: 12px;

        font-family: "宋体";

        line-height: 20px

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    .video .swiper-container .nth3 {

        background: url("../ihope/images/wallpaper1_3_h800.jpg") 50% center

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    .video .swiper-container .nth3 {

        background: url("../ihope/images/wallpaper1_3_h600.jpg") 50% center

    }

}



@media (orientation: landscape) and (max-height: 480px),(orientation: portrait) and (max-width: 699px) {

    .video .swiper-container .nth3 .box .top {

        font-size: 40px

    }



    .video .swiper-container .nth3.active .box .top {

        font-size: 24px

    }



    .video .swiper-container .nth3 .box .mid {

        width: 216px;

        height: 40px;

        margin-top: 10px;

        background: url("../ihope/images/words_mini.png") no-repeat 0 -131px

    }



    .video .swiper-container .nth3 .box .bottom {

        font-size: 12px;

        font-family: "宋体";

        line-height: 20px

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    .video .swiper-container .nth4 {

        background: url("../ihope/images/wallpaper1_4_h800.jpg") 50% top

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    .video .swiper-container .nth4 {

        background: url("../ihope/images/wallpaper1_4_h600.jpg") 50% top

    }

}



@media (orientation: landscape) and (max-height: 480px),(orientation: portrait) and (max-width: 699px) {

    .video .swiper-container .nth4 .box .top span {

        font-size: 24px

    }



    .video .swiper-container .nth4 .box .top i {

        width: 143px;

        height: 38px;

        background: url("../ihope/images/words_mini.png") no-repeat 0 -88px

    }



    .video .swiper-container .nth4 .box .bottom {

        font-size: 12px;

        font-family: "宋体";

        line-height: 20px

    }

}



@media (orientation: landscape) and (max-height: 300px) {

    .video .swiper-container .swiper-slide {

        padding-top: 10px

    }



    .video .swiper-container .nth2 .shade {

        margin-top: -10px;

        height: 400px

    }

}



@media (orientation: landscape) and (max-height: 650px) {

    .video .innerBox {

        bottom: 15px

    }



    .video .innerBox .news {

        margin-left: 100px;

        margin-bottom: 10px

    }



    .video .innerBox .guide {

        width: 52px;

        margin-bottom: 40px

    }



    .video .innerBox .guide a {

        margin: 0 3px;

        width: 20px

    }

}



@media (orientation: landscape) and (max-height: 650px) and (max-width: 660px) {

    .video .innerBox .news a.more {

        display: none

    }



    .video .innerBox .news span {

        display: none

    }

}



@media (orientation: landscape) and (max-height: 650px) and (max-width: 540px) {

    .video .innerBox .news {

        margin-left: 85px

    }



    .video .innerBox .news ul li {

        font-size: 12px;

        font-family: "宋体"

    }

}



@media (orientation: landscape) and (max-height: 650px) and (max-width: 460px),(orientation: landscape) and (max-height: 300px),(orientation: portrait) and (max-height: 380px) {

    .video .innerBox .news {

        display: none

    }

}



@media (orientation: portrait) and (max-width: 460px) {

    .video .innerBox .news a.more {

        display: none

    }



    .video .innerBox .news span {

        display: none

    }



    .video .innerBox .news {

        width: 100%

    }



    .video .innerBox .news ul {

        width: 100%;

        text-align: center

    }

}



@media (orientation: portrait) and (max-width: 360px) {

    .video .innerBox .news {

        margin: 0;

        margin-bottom: 10px

    }



    .video .innerBox .news ul li {

        font-size: 12px;

        font-family: "宋体"

    }



    .video .innerBox .guide {

        position: static;

        margin: 0 auto;

        padding-top: 10px;

        margin-bottom: 25px;

        right: inherit;

        bottom: inherit;

        width: 110px

    }



    .video .innerBox .guide a {

        margin: 0 3px;

        width: 20px

    }



    .video .innerBox a.movedown {

        position: static;

        margin: 0 auto;

        left: 0

    }

}



@media (min-width: 1921px),(min-height: 1201px) {

    section.business {

        -moz-background-size: cover;

        background-size: cover

    }

}



@media (min-height: 1201px) {

    .business .box {

        margin-top: -70px

    }

}



@media (min-width: 1151px) and (max-height: 700px) {

    .business .box .caption i {

        display: none

    }



    .business .box ul.items {

        margin-top: 50px

    }

}



@media (min-width: 1151px) and (max-height: 630px) {

    .business .box {

        margin-top: 0

    }

}



@media (max-width: 1150px) {

    .business .box ul.items {

        margin-top: 40px

    }



    .business .box ul.items li {

        width: 170px;

        height: 270px;

        margin: 0

    }



    .business .box ul.items li u {

        background: 0;

        display: none

    }



    .business .box ul.items li strong {

        margin-top: 40px

    }



    .business .box ul.items li:hover {

        -webkit-transition-delay: 0s;

        -moz-transition-delay: 0s;

        -ms-transition-delay: 0s;

        -o-transition-delay: 0s;

        transition-delay: 0s

    }

}



@media (max-width: 1150px) and (max-height: 680px) {

    .business .box .caption i {

        display: none

    }



    .business .box ul.items {

        margin-top: 10px

    }

}



@media (max-width: 1150px) and (max-height: 580px) {

    .business .box {

        margin-top: 0

    }

}



@media (max-width: 1000px) {

    .business .box {

        margin-top: -55px

    }



    .business .box ul.items li {

        width: 270px;

        height: 80px;

        margin: 30px 0 0 21px;

        padding: 10px 0 5px 15px

    }



    .business .box ul.items li i {

        margin-top: 0;

        float: left

    }



    .business .box ul.items li strong {

        float: left;

        margin: 5px 0 0 20px

    }



    .business .box ul.items li p {

        float: left;

        margin: 5px 0 0 20px;

        color: #888;

        text-align: inherit

    }



    .business .box ul.items li:hover p {

        margin: 5px 0 0 20px;

        color: White;

        -webkit-transition-delay: .2s;

        -moz-transition-delay: .2s;

        -ms-transition-delay: .2s;

        -o-transition-delay: .2s;

        transition-delay: .2s

    }



    .business .box label {

        margin-top: 50px

    }

}



@media (max-width: 1000px) and (max-height: 730px) {

    .business .box .caption i {

        display: none

    }



    .business .box ul.items {

        margin-top: 10px

    }

}



@media (max-width: 1000px) and (max-height: 650px) {

    .business .box label {

        display: none

    }

}



@media (max-width: 1000px) and (max-height: 560px) {

    .business .box {

        margin-top: 0

    }

}



@media (max-width: 929px) and (max-height: 880px) {

    .business .box .caption i {

        display: none

    }



    .business .box ul.items {

        margin-top: 10px

    }

}



@media (max-width: 929px) and (max-height: 770px) {

    .business .box label {

        display: none

    }

}



@media (max-width: 929px) and (max-height: 680px) {

    .business .box {

        margin-top: 0

    }

}



@media (max-width: 929px) and (max-height: 570px),(max-width: 620px) {

    .business .box {

        margin-top: -55px

    }



    .business .box ul.items {

        margin-top: 30px

    }



    .business .box ul.items li {

        width: 173px;

        height: 43px;

        margin: 15px 10px 0 10px

    }



    .business .box ul.items li i {

        margin-top: 0

    }



    .business .box ul.items li.pc i {

        width: 46px;

        height: 35px;

        background: url("../ihope/images/words_mini.png") no-repeat -145px -217px

    }



    .business .box ul.items li.mobi i {

        width: 46px;

        height: 39px;

        background: url("../ihope/images/words_mini.png") no-repeat -245px -176px

    }



    .business .box ul.items li.sys i {

        width: 46px;

        height: 35px;

        background: url("../ihope/images/words_mini.png") no-repeat -249px -220px

    }



    .business .box ul.items li.app i {

        width: 46px;

        height: 41px;

        background: url("../ihope/images/words_mini.png") no-repeat -425px -266px

    }



    .business .box ul.items li.host i {

        width: 47px;

        height: 38px;

        background: url("../ihope/images/words_mini.png") no-repeat -253px -266px

    }



    .business .box ul.items li p {

        display: none

    }



    .business .box ul.items li strong {

        margin-left: 15px

    }



    .business .box ul.items li.pc:hover i {

        background: url("../ihope/images/words_mini.png") no-repeat -100px -217px

    }



    .business .box ul.items li.mobi:hover i {

        background: url("../ihope/images/words_mini.png") no-repeat -201px -176px

    }



    .business .box ul.items li.sys:hover i {

        background: url("../ihope/images/words_mini.png") no-repeat -196px -220px

    }



    .business .box ul.items li.app:hover i {

        background: url("../ihope/images/words_mini.png") no-repeat -336px -264px

    }



    .business .box ul.items li.host:hover i {

        background: url("../ihope/images/words_mini.png") no-repeat -201px -266px

    }

}



@media (max-width: 929px) and (max-height: 460px) {

    .business .box ul.items {

        margin-top: 15px

    }



    .business .box ul.items li {

        margin: 5px 10px 0 10px

    }

}



@media (max-width: 929px) and (max-height: 420px) {

    .business .box ul.items {

        margin-top: 30px

    }



    .business .box {

        margin-top: 0

    }

}



@media (max-width: 929px) and (max-height: 720px) {

    .business .box label {

        display: none

    }

}



@media (max-width: 929px) and (max-height: 660px) {

    .business .box .caption i {

        display: none

    }



    .business .box ul.items {

        margin-top: 30px

    }

}



@media (max-width: 929px) and (max-height: 550px) {

    .business .box ul.items {

        margin-top: 20px

    }



    .business .box ul.items li {

        margin: 5px 10px 0 10px

    }

}



@media (max-width: 929px) and (max-height: 460px) {

    .business .box {

        margin-top: 0

    }

}



@media (max-width: 929px) and (max-height: 320px) {

    .business .box ul.items {

        margin-top: 15px

    }

}



@media (max-width: 929px) and (max-height: 310px),(max-width: 638px) and (max-height: 390px),(max-width: 425px) and (max-height: 500px) {

    .business .box ul.items {

        margin-top: 40px

    }



    .business .box ul.items li {

        width: 120px;

        height: 40px;

        margin: 0 10px 15px 10px;

        padding: 0;

        background: 0

    }



    .business .box ul.items li strong {

        position: relative;

        margin: 0;

        width: 100%;

        height: 40px;

        font-size: 14px;

        line-height: 40px;

        text-align: center;

        z-index: 10

    }



    .business .box ul.items li:hover strong {

        color: #333

    }



    .business .box ul.items li i {

        position: absolute;

        display: block !important;

        width: 120px !important;

        height: 40px !important;

        background: White !important;

        border: 1px solid #bbb;

        -moz-opacity: .5;

        opacity: .5

    }

}



@media (max-width: 929px) and (max-height: 260px) {

    .business .box {

        margin-top: 8px

    }



    .business .box ul.items {

        margin-top: 18px

    }

}



@media (max-width: 425px) and (max-height: 880px) {

    .business .box .caption i {

        display: block

    }



    .business .box label {

        display: none

    }

}



@media (max-width: 425px) and (max-height: 770px) {

    .business .box .caption i {

        display: none

    }



    .business .box ul.items {

        margin-top: 20px

    }

}



@media (max-width: 425px) and (max-height: 670px) {

    .business .box {

        margin-top: 0

    }

}



@media (max-width: 425px) and (max-height: 500px) {

    .business .box ul.items {

        margin-top: 40px

    }

}



@media (max-width: 390px) {

    .business .box .caption i {

        display: none

    }

}



@media (min-width: 1921px),(min-height: 921px) {

    section.cases {

        -moz-background-size: cover;

        background-size: cover

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    section.cases {

        background: url("../ihope/images/wallpaper3_h800.jpg")

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    section.cases {

        background: url("../ihope/images/wallpaper3_h600.jpg")

    }

}



@media (min-width: 1151px) and (max-height: 700px) {

    .cases .box .swiper-container.items {

        margin-top: 40px

    }



    .cases .box .caption i {

        display: none

    }

}



@media (min-width: 1151px) and (max-height: 620px) {

    .cases .box .swiper-container.items .swiper-slide {

        border: 0

    }



    .cases .box .items .swiper-slide p, .cases .box .items .swiper-slide .bg {

        display: none

    }

}



@media (max-width: 1150px) {

    .cases .box .swiper-container.items {

        width: 840px

    }



    .cases .box .swiper-container.items .swiper-slide {

        width: 260px

    }



    .cases .box .swiper-container.items .swiper-slide img {

        width: 260px;

        height: 153px

    }



    .cases .box .swiper-container.items .swiper-slide .shade {

        width: 260px;

        height: 153px

    }



    .cases .box .swiper-container.items .swiper-slide .shade u {

        margin-top: 54px

    }



    .cases .box .swiper-container.items .swiper-slide p strong {

        font-size: 14px

    }



    .cases .box .swiper-container.items .swiper-slide .bg {

        width: 260px;

        height: 100px

    }



    .cases .box .swiper-container.items .swiper-slide .bg u {

        width: 260px;

        height: 100px

    }

}



@media (max-width: 1150px) and (max-height: 660px) {

    .cases .box .swiper-container.items {

        margin-top: 40px

    }



    .cases .box .caption i {

        display: none

    }

}



@media (max-width: 1150px) and (max-height: 580px) {

    .cases .box .swiper-container.items .swiper-slide {

        border: 0

    }



    .cases .box .items .swiper-slide p, .cases .box .items .swiper-slide .bg {

        display: none

    }

}



@media (max-width: 1150px) and (max-height: 480px) {

    .cases .box .swiper-container.items .swiper-slide {

        border: 0

    }



    .cases .box .items .swiper-slide p, .cases .box .items .swiper-slide .bg {

        display: none

    }

}



@media (orientation: landscape) and (max-width: 900px) {

    .cases .box .swiper-container.items {

        display: none

    }



    .cases .box .swiper-container.xs {

        display: block;

        margin: 0 auto;

        margin-top: 40px;

        width: 90%

    }



    .cases .box .swiper-container.xs .swiper-slide {

        width: 31.33%;

        margin: 0 1%

    }



    .cases .box .xs .swiper-slide p, .cases .xs .swiper-slide .bg {

        display: none;

        background: 0

    }

}



@media (orientation: landscape) and (max-width: 900px) and (max-height: 450px) {

    .cases .box .swiper-container.xs {

        margin-top: 15px

    }



    .cases .box a.more {

        margin-top: 18px;

        width: 66px;

        padding: 3px 6px;

        font-size: 16px

    }

}



@media (orientation: portrait) and (max-width: 900px) {

    .cases .box .swiper-container.items {

        display: none

    }



    .cases .box .swiper-container.mini {

        display: block;

        width: 340px;

        margin-top: 60px

    }



    .cases .box .swiper-container.mini .swiper-wrapper {

        height: 300px !important

    }



    .cases .box .swiper-container.mini .swiper-slide {

        width: 340px;

        height: 300px !important;

        border-bottom: 2px solid #00a0e9;

        cursor: pointer

    }



    .cases .box .swiper-container.mini .swiper-slide img {

        width: 340px;

        height: 200px

    }



    .cases .box .swiper-container.mini .swiper-slide p {

        position: absolute;

        margin: 10px 20px;

        color: #999;

        font-family: Arial, "宋体";

        font-size: 12px;

        line-height: 26px;

        z-index: 10

    }



    .cases .box .swiper-container.mini .swiper-slide p strong {

        color: #222;

        font-family: Arial, "微软雅黑";

        font-size: 16px;

        font-weight: normal

    }



    .cases .box .swiper-container.mini .swiper-slide .bg {

        width: 340px;

        height: 100px;

        background-color: #fff;

        -moz-opacity: .5;

        opacity: .5;

        filter: alpha(opacity=50)

    }



    .cases .box a.prev, .cases .box a.next {

        display: block;

        position: absolute;

        top: -300px;

        width: 16px;

        height: 30px;

        cursor: pointer;

        -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;

        z-index: 100

    }



    .cases .box a.prev {

        left: 30px;

        background: url("../ihope/images/icons.png") no-repeat 0 -219px

    }



    .cases .box a.next {

        right: 30px;

        background: url("../ihope/images/icons.png") no-repeat -25px -219px

    }

}



@media (orientation: portrait) and (max-width: 900px) and (max-height: 700px) {

    .cases .box .swiper-container.mini {

        margin-top: 40px

    }



    .cases .box .caption i {

        display: none

    }

}



@media (orientation: portrait) and (max-width: 500px) {

    .cases .box .caption i {

        display: block

    }



    .cases .box .swiper-container.mini {

        width: 260px;

        margin-top: 40px

    }



    .cases .box .swiper-container.mini .swiper-wrapper {

        height: 253px !important

    }



    .cases .box .swiper-container.mini .swiper-slide {

        width: 260px;

        height: 253px !important

    }



    .cases .box .swiper-container.mini .swiper-slide img {

        width: 260px;

        height: 153px

    }



    .cases .box .swiper-container.mini .swiper-slide p strong {

        font-size: 14px

    }



    .cases .box .swiper-container.mini .swiper-slide .bg {

        width: 260px;

        height: 100px

    }



    .cases .box a.prev {

        left: 20px

    }



    .cases .box a.next {

        right: 20px

    }

}



@media (orientation: portrait) and (max-width: 500px) and (max-height: 640px) {

    .cases .box .caption i {

        display: none

    }

}



@media (orientation: portrait) and (max-width: 500px) and (max-height: 580px) {

    .cases .box .swiper-container.mini {

        margin-top: 30px

    }



    .cases .box a.more {

        display: block;

        position: static;

        margin: 0 auto;

        margin-top: 30px;

        width: 66px;

        font-size: 16px;

        padding: 3px 6px

    }

}



@media (orientation: portrait) and (max-width: 370px) {

    .cases .box a.prev, .cases .box a.next {

        margin-top: 175px

    }



    .cases .box a.prev {

        left: 40px

    }



    .cases .box a.next {

        right: 40px

    }

}



@media (orientation: portrait) and (max-width: 370px) and (max-height: 500px) {

    .cases .box .swiper-container.mini .swiper-wrapper {

        height: 153px !important

    }



    .cases .box .swiper-container.mini .swiper-slide {

        height: 153px !important;

        border: 0

    }



    .cases .box .mini .swiper-slide p, .cases .box .mini .swiper-slide .bg {

        display: none

    }



    .cases .box a.prev, .cases .box a.next {

        margin-top: 73px

    }

}



@media (min-width: 1921px),(min-height: 1201px) {

}



@media (max-width: 1280px) and (max-height: 800px) {

}



@media (max-width: 960px) and (max-height: 600px) {

}



@media (min-width: 471px) and (max-height: 450px) {

    .clients .box .swiper-container.items {

        margin-top: 40px

    }



    .clients .box .caption i {

        display: none

    }

}



@media (max-width: 690px) and (max-height: 380px),(max-width: 620px) and (max-height: 480px),(max-width: 470px) {

    .clients .box ul.items {

        display: none

    }



    .clients .box ul.mini {

        display: block;

        position: relative;

        margin: 0 auto;

        margin-top: 30px;

        width: 500px;

        height: 550px;

        overflow: hidden

    }



    .clients .box ul.mini li {

        position: relative;

        float: left;

        width: 200px;

        padding: 8px 0 8px 40px;

        background: url("../ihope/images/point.png") no-repeat 20px 15px;

        z-index: 20

    }



    .clients .box ul.mini li.bg.all {

        position: absolute;

        width: 500px;

        height: 560px;

        list-style: none;

        background-color: White;

        -moz-opacity: .5;

        opacity: .5;

        filter: alpha(opacity=50)

    }



    .clients .box ul.mini li.bg.one {

        display: none

    }

}



@media (max-width: 560px) and (max-height: 480px),(max-width: 470px) {

    .clients .box ul.mini {

        width: 250px

    }



    .clients .box ul.mini li.bg.all {

        width: 250px

    }

}



@media (max-width: 470px) and (max-height: 800px) {

    .clients .box ul.mini {

        height: 440px

    }



    .clients .box ul.mini li.bg.all {

        height: 440px

    }

}



@media (max-width: 470px) and (max-height: 700px) {

    .clients .box ul.mini {

        height: 330px

    }



    .clients .box ul.mini li.bg.all {

        height: 330px

    }

}



@media (max-width: 560px) and (max-height: 600px) {

    .clients .box ul.mini {

        height: 260px

    }



    .clients .box ul.mini li.bg.all {

        height: 260px

    }

}



@media (max-width: 690px) and (max-height: 520px) {

    .clients .box ul.mini {

        margin-top: 15px

    }



    .clients .box .caption i {

        display: none

    }

}



@media (max-width: 690px) and (max-height: 430px) {

    .clients .box ul.mini {

        height: 150px

    }



    .clients .box ul.mini li.bg.all {

        height: 150px

    }

}



@media (max-width: 690px) and (max-height: 420px) {

    .clients .box ul.mini {

        height: 110px

    }



    .clients .box ul.mini li.bg.all {

        height: 110px

    }

}



@media (max-width: 690px) and (max-height: 300px) {

    .clients .box ul.mini {

        margin-top: 5px

    }

}



@media (max-width: 400px) {

    .clients .box .caption i {

        display: none

    }

}



@media (min-width: 1921px),(min-height: 1201px) {

    section.quality {

        -moz-background-size: cover;

        background-size: cover

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    section.quality {

        background: url("../ihope/images/wallpaper5_h800.jpg") 50% 10%

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    section.quality {

        background: url("../ihope/images/wallpaper5_h600.jpg") 50% 10%

    }

}



@media (max-width: 960px) {

    .quality .box .items {

        display: none

    }



    .quality .box .mini {

        display: block;

        margin: 0 auto;

        margin-top: 120px;

        width: 254px;

        height: 200px;

        overflow: hidden

    }



    .quality .box .mini .swiper-slide {

        margin: 0

    }



    .quality .box a.prev, .quality .box a.next {

        display: block;

        position: absolute;

        top: -300px;

        width: 16px;

        height: 30px;

        cursor: pointer;

        -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;

        z-index: 100

    }



    .quality .box a.prev {

        left: 30px;

        background: url("../ihope/images/icons.png") no-repeat 0 -219px

    }



    .quality .box a.next {

        right: 30px;

        background: url("../ihope/images/icons.png") no-repeat -25px -219px

    }

}



@media (max-height: 730px) {

    .quality .box .items, .quality .box .mini {

        margin-top: 80px

    }

}



@media (max-height: 710px) {

    .quality .box a.lookall {

        display: none

    }

}



@media (max-height: 530px) {

    .quality .box .items, .quality .box .mini {

        margin-top: 60px

    }



    .quality .box .caption i {

        display: none

    }

}



@media (max-height: 420px) {

    .quality .box .items, .quality .box .mini {

        height: 120px;

        margin-top: 40px

    }



    .quality .box a.prev, .quality .box a.next {

        margin-top: -40px

    }

}



@media (max-height: 360px) {

    .quality .box .items, .quality .box .mini {

        height: 110px;

        margin-top: 20px

    }



    .quality .box .swiper-slide ul {

        margin-bottom: 10px

    }



    .quality .box a.prev, .quality .box a.next {

        margin-top: -80px

    }

}



@media (min-width: 1921px),(min-height: 1201px) {

    section.marketing {

        -moz-background-size: cover;

        background-size: cover

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    section.marketing {

        background: url("../ihope/images/wallpaper6_h800.jpg") 50% 45%

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    section.marketing {

        background: url("../ihope/images/wallpaper6_h600.jpg") 50% 45%

    }

}



@media (max-width: 1100px) {

    .marketing .box ul.items li {

        margin: 0 10px

    }

}



@media (min-width: 1001px) and (min-height: 951px) {

    .marketing .box {

        margin-top: -170px

    }

}



@media (min-width: 1001px) and (max-height: 950px) {

    .marketing .box {

        margin-top: -130px

    }

}



@media (min-width: 1001px) and (max-height: 850px) {

    .marketing .box {

        margin-top: -90px

    }

}



@media (min-width: 1001px) and (max-height: 750px) {

    .marketing .box {

        margin-top: -60px

    }

}



@media (min-width: 1001px) and (max-height: 700px) {

    .marketing .box .caption i {

        display: none

    }

}



@media (min-width: 1001px) and (max-height: 650px) {

    .marketing .box {

        margin-top: 0

    }

}



@media (max-width: 1000px) {

    .marketing .box {

        margin: 0

    }



    .marketing .box ul.items {

        width: 550px !important

    }



    .marketing .box ul.items li {

        height: 190px;

        margin: 0 20px

    }



    .marketing .box ul.items li u {

        display: none

    }



    .marketing.active .box ul.items li strong {

        margin-top: 20px

    }



    .marketing .shade {

        display: block

    }

}



@media (max-width: 1000px) and (min-height: 920px) {

    .marketing .box {

        margin-top: -100px

    }

}



@media (max-width: 1000px) and (max-height: 700px) {

    .marketing .box ul.items li {

        height: 140px

    }

}



@media (max-width: 1000px) and (max-height: 580px) {

    .marketing .box .caption i {

        display: none

    }



    .marketing .box ul.items {

        margin-top: 10px

    }

}



@media (max-width: 1000px) and (max-height: 470px),(max-width: 600px) {

    .marketing .box ul.items {

        margin-top: 30px;

        width: 600px !important

    }



    .marketing .box ul.items li {

        width: 160px;

        height: 43px;

        margin: 30px 0 0 25px

    }



    .marketing .box ul.items li i {

        float: left;

        margin-top: 0;

        height: 43px

    }



    .marketing .box ul.items li.se i {

        width: 33px;

        margin: 0 6px;

        background: url("../ihope/images/words_mini.png") no-repeat -86px -380px

    }



    .marketing .box ul.items li.weixin i {

        width: 45px;

        background: url("../ihope/images/words_mini.png") no-repeat -124px -377px

    }



    .marketing .box ul.items li.weibo i {

        width: 42px;

        margin: 0 1px 0 2px;

        background: url("../ihope/images/words_mini.png") no-repeat -172px -377px

    }



    .marketing .box ul.items li.sms i {

        width: 38px;

        margin: 0 3px 0 4px;

        background: url("../ihope/images/words_mini.png") no-repeat -219px -374px

    }



    .marketing .box ul.items li.pay i {

        width: 34px;

        margin: 0 5px 0 6px;

        background: url("../ihope/images/words_mini.png") no-repeat -263px -382px

    }



    .marketing .box ul.items li.bbs i {

        width: 31px;

        margin: 0 7px;

        background: url("../ihope/images/words_mini.png") no-repeat -86px -422px

    }



    .marketing .box ul.items li strong, .marketing.active .box ul.items li strong {

        float: left;

        margin: 0;

        padding-left: 15px;

        line-height: 43px

    }



    .marketing .box ul.items li p {

        display: none

    }

}



@media (max-width: 1000px) and (max-height: 430px) {

    .marketing .box ul.items {

        margin-top: 20px

    }



    .marketing .box ul.items li {

        margin-top: 20px

    }

}



@media (max-width: 600px) {

    .marketing .box ul.items {

        margin-top: 50px;

        width: 395px !important

    }

}



@media (max-width: 600px) and (min-height: 750px) {

    .marketing .box {

        margin-top: -70px

    }

}



@media (max-width: 600px) and (max-height: 520px) {

    .marketing .box ul.items {

        margin-top: 20px

    }



    .marketing .box ul.items li {

        margin-top: 15px

    }

}



@media (max-width: 450px) {

    .marketing .box {

        margin-top: 0

    }



    .marketing .box ul.items {

        margin-top: 20px;

        width: 220px !important

    }

}



@media (max-width: 450px) and (max-height: 730px) {

    .marketing .box ul.items {

        margin-top: 30px

    }



    .marketing .box ul.items li {

        margin-top: 15px

    }

}



@media (max-width: 450px) and (max-height: 650px) {

    .marketing .box .caption i {

        display: none

    }



    .marketing .box ul.items {

        margin-top: 20px

    }

}



@media (max-width: 600px) and (max-height: 380px),(max-width: 450px) and (max-height: 550px) {

    .marketing .box ul.items {

        width: 222px !important

    }



    .marketing .box ul.items li {

        position: relative;

        width: 102px;

        margin: 0 3px;

        padding: 0;

        text-align: center

    }



    .marketing .box ul.items li strong, .marketing.active .box ul.items li strong {

        display: block;

        position: absolute;

        float: none;

        padding: 0;

        margin: 0 auto;

        width: 100px;

        font-size: 14px;

        font-weight: normal;

        line-height: 36px;

        border: 1px solid #eee

    }



    .marketing .box ul.items li i {

        position: absolute;

        width: 130px !important;

        height: 36px !important;

        margin: 0 !important;

        padding: 1px 0 0 1px !important;

        background: White !important;

        -moz-opacity: .5;

        opacity: .5;

        filter: alpha(opacity=50)

    }

}



@media (orientation: landscape) and (max-height: 230px) {

    .marketing .box ul.items {

        width: 334px !important

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    section.aboutus {

        background: url("../ihope/images/wallpaper7_h800.jpg") 50% 60%

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    section.aboutus {

        background: url("../ihope/images/wallpaper7_h600.jpg") 50% 60%

    }

}



@media (max-width: 1200px) {

    .aboutus table.exp td:nth-child(2) {

        display: none

    }



    .aboutus table.exp td {

        width: 25%

    }

}



@media (max-width: 900px) {

    .aboutus table.exp td:last-child {

        display: none

    }



    .aboutus table.exp td {

        width: 33.333333%

    }

}



@media (max-width: 780px) and (max-height: 500px) {

    .aboutus ul.menu {

        top: 100px

    }

}



@media (max-width: 780px) and (max-height: 400px) {

    .aboutus .items .swiper-slide.nth1 strong {

        font-size: 30px

    }



    .aboutus .items .swiper-slide.nth1 p {

        margin-top: 15px

    }



    .aboutus .items .swiper-slide.nth1 u {

        margin-top: 15px;

        font-size: 22px

    }



    .aboutus .items .swiper-slide.nth2 p {

        margin-top: 12px;

        line-height: 32px

    }



    .aboutus .items .swiper-slide.nth3 strong {

        margin-bottom: 15px

    }

}



@media (max-width: 780px) and (max-height: 340px) {

    .aboutus .items .swiper-slide.nth1 strong {

        font-size: 26px

    }



    .aboutus .items .swiper-slide.nth1 u {

        margin-top: 0;

        font-size: 14px

    }



    .aboutus .items .swiper-slide.nth2 p:last-child {

        display: none

    }



    .aboutus .items .swiper-slide.nth2 p {

        display: block;

        width: 350px;

        line-height: 35px

    }



    .aboutus .items .swiper-slide.nth3 ul li:last-child {

        display: none

    }

}



@media (max-width: 780px) and (max-height: 310px) {

    .aboutus ul.menu {

        top: 40px

    }



    .aboutus .items .swiper-slide.nth1 strong {

        font-size: 22px

    }



    .aboutus .items .swiper-slide.nth1 p {

        font-family: "宋体";

        font-size: 12px;

        line-height: 25px

    }



    .aboutus .items .swiper-slide.nth1 u {

        margin-top: -6px;

        font-family: "宋体";

        font-size: 12px

    }



    .aboutus .items .swiper-slide.nth2 p {

        width: 330px;

        font-family: "宋体";

        font-size: 12px;

        line-height: 25px

    }



    .aboutus .items .swiper-slide.nth3 ul li {

        font-family: "宋体";

        font-size: 12px;

        line-height: 25px;

        background-position: 0 7px

    }

}



@media (max-width: 550px) {

    .aboutus ul.menu {

        top: 90px;

        left: auto;

        right: 30px;

        width: 180px

    }



    .aboutus ul.menu li {

        float: left;

        width: 60px;

        padding: 6px 0

    }



    .aboutus ul.menu li.bg.all {

        left: auto;

        margin: 0;

        width: 180px !important;

        height: 34px !important

    }



    .aboutus ul.menu li.bg.one {

        width: 60px

    }

}



@media (max-width: 550px) and (max-height: 310px) {

    .aboutus ul.menu {

        top: 25px

    }



    .contact .box .above .wechat {

        display: none

    }

}



@media (orientation: portrait) and (max-width: 700px) {

    .aboutus ul.menu {

        top: 120px;

        left: 50%;

        width: 80px;

        margin-left: -120px;

        width: 240px

    }



    .aboutus ul.menu li {

        float: left;

        width: 80px !important;

        padding: 10px 0

    }



    .aboutus ul.menu li.bg.all {

        left: 50%;

        margin-left: -120px;

        width: 240px !important;

        height: 42px !important

    }



    .aboutus .items .swiper-slide.nth1 strong {

        font-size: 32px;

        text-align: center

    }



    .aboutus .items .swiper-slide.nth1 p {

        display: block;

        width: 230px;

        margin: 0 auto;

        margin-top: 30px

    }



    .aboutus .items .swiper-slide.nth1 u {

        font-size: 14px;

        width: 230px;

        margin: 0 auto;

        margin-top: 6px

    }



    .aboutus .items .swiper-slide.nth2 strong {

        text-align: center;

        margin-left: -20px

    }



    .aboutus .items .swiper-slide.nth2 p {

        display: block;

        width: 240px;

        margin: 0 auto;

        margin-top: 20px

    }



    .aboutus .items .swiper-slide.nth3 strong {

        text-align: center;

        margin-left: 10px

    }



    .aboutus .items .swiper-slide.nth3 ul {

        width: 240px;

        margin: 0 auto

    }



    .aboutus .items .swiper-slide.nth3 ul li {

        line-height: 32px

    }



    .aboutus .items .swiper-slide.nth3 ul li:last-child {

        display: none

    }

}



@media (orientation: portrait) and (max-width: 700px) and (max-height: 660px) {

    .aboutus ul.menu {

        top: 100px

    }

}



@media (orientation: portrait) and (max-width: 700px) and (max-height: 500px) {

    .aboutus ul.menu {

        top: 90px

    }



    .aboutus .items .swiper-slide.nth1 p {

        margin-top: 15px

    }



    .aboutus .items .swiper-slide.nth3 ul li {

        line-height: 30px

    }

}



@media (orientation: portrait) and (max-width: 700px) and (max-height: 470px) {

    .aboutus ul.menu {

        top: 80px

    }



    .aboutus .items .swiper-slide.nth1 strong {

        font-size: 24px

    }



    .aboutus .items .swiper-slide.nth1 p {

        margin-top: 10px;

        line-height: 27px

    }



    .aboutus .items .swiper-slide.nth1 u {

        margin-top: 4px

    }



    .aboutus .items .swiper-slide.nth2 p {

        margin-top: 10px;

        line-height: 28px

    }



    .aboutus .items .swiper-slide.nth2 p:last-child {

        display: none

    }



    .aboutus .items .swiper-slide.nth3 strong {

        margin-bottom: 8px

    }



    .aboutus .items .swiper-slide.nth3 ul li {

        line-height: 25px

    }

}



@media (max-width: 680px)and (max-height: 470px) {

    .aboutus table.exp, .aboutus .expBg {

        display: none;

        height: 0

    }

}



@media (max-width: 1280px) and (max-height: 800px) {

    section.contact {

        background: url("../ihope/images/wallpaper8_h800.jpg") 50% bottom

    }

}



@media (max-width: 960px) and (max-height: 600px) {

    section.contact {

        background: url("../ihope/images/wallpaper8_h600.jpg") 50% 10%

    }

}



@media (max-width: 950px) {

    .contact .box {

        width: 470px

    }



    .contact .box .above .left {

        float: right;

        margin-left: 0

    }



    .contact .box .above .right {

        display: none

    }

}



@media (orientation: landscape) and (max-height: 520px) {

    .contact .box {

        height: 150px

    }



    .contact .box .below {

        display: none

    }

}



@media (orientation: landscape) and (max-height: 480px) and (max-width: 570px) {

    .contact .box {

        width: 380px;

        height: 140px

    }



    .contact .box .above .wechat {

        margin-top: 5px;

        width: 100px;

        display: none

    }



    .contact .box .above .left p {

        margin-top: 0

    }

}



@media (orientation: portrait) and (max-width: 550px) {

    .contact .box {

        width: 430px;

        height: 490px

    }



    .contact .box .above .wechat {

        position: absolute;

        float: none;

        margin: 0;

        top: 200px;

        width: 100px;

        left: 50%;

        margin-left: -50px

    }



    .contact .box .above .left {

        position: absolute;

        float: none;

        margin: 0;

        top: 0;

        left: 50%;

        margin-left: -125px

    }



    .contact .box .below {

        margin-top: 150px

    }

}



@media (orientation: portrait) and (max-width: 550px) and (max-height: 650px),(orientation: portrait) and (max-width: 470px) {

    .contact .box {

        width: 260px;

        height: 350px

    }



    .contact .box .above .wechat {

        width: 150px;

        margin-left: -75px

    }



    .contact .box .below {

        display: none

    }

}



@media (orientation: portrait) and (max-height: 450px) {

    .contact .box {

        height: 160px

    }



    .contact .box .above .wechat {

        display: none

    }

}



@media (max-width: 700px),(max-height: 600px) {

    .dock {

        display: none

    }

}



@media (max-width: 319px),(max-height: 210px) {

    body {

        display: none

    }

}



.clear {

    clear: both

}



#BDBridgeWrap {

    display: none

}



.jyln {

    padding: 0

}



.jyln li {

    overflow: hidden;

    list-style: none

}



.jyln li h4 {

    margin-top: 15px;

    margin-bottom: 5px

}



.footer_content {

    margin-left: 306px;

    width: 350px

}



.tel_400 {

    margin: 0 0 20px 0

}



.tel_400 > a {

    color: #428bca;

    text-decoration: none

}



.address_box {

    float: left;

    width: 350px;

    height: 100px;

    color: #666

}



.address_box > h4 {

    font-size: 18px;

    color: #666

}



.address_box a {

    color: #666;

    text-decoration: none

}



.address_box p {

    margin: 0;

    margin-bottom: 6px

}



.foot_map {

    display: inline-block;

    width: 20px;

    height: 20px;

    background: url("../../templets/images/icon_foot_map.png") center no-repeat;

    background-size: 16px;

    vertical-align: middle

}



.foot_phone {

    display: inline-block;

    width: 20px;

    height: 20px;

    background: url("../../templets/images/icon_foot_phone.png") center no-repeat;

    background-size: 16px;

    vertical-align: middle

}



.foot_qq {

    display: inline-block;

    width: 20px;

    height: 20px;

    background: url("../../templets/images/icon_foot_qq.png") center no-repeat;

    background-size: 16px;

    vertical-align: middle

}



.cases #container {

    width: 100% !important

}



.solution {

    margin: 20px auto;

    color: #fff;

    list-style: none

}



.solution > li {

    overflow: hidden;

    margin-bottom: 8px

}



.solution .pic_show {

    float: left;

    width: 20%

}



.solution .pic_show img {

    max-width: 100%

}



.solution .txt {

    float: left;

    width: 70%;

    margin-left: 2%

}



.solution a h4 {

    color: #fff

}



.solution a p {

    color: #ddd

}



@media (max-width: 550px) {

    .solution > li {

        width: 100%

    }

}



@media (min-width: 1000px) {

    .solution > li {

        float: left;

        width: 50%

    }

}



* {

    margin: 0;

    padding: 0

}



#portfoliolist .portfolio {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    width: 202px;

    height: 200px;

    margin: 9px;

    display: none;

    float: left;

    overflow: hidden;

    padding-bottom: 10px;

    border: 1px solid #ddd

}



#portfoliolist .portfolio .tit {

    padding: 10px 20px;

    font-size: 20px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap

}



.portfolio:hover {

    -moz-box-shadow: 0 10px 35px 5px rgba(0, 0, 0, 0.2);

    -webkit-box-shadow: 0 10px 35px 5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 10px 35px 5px rgba(0, 0, 0, 0.2);

    transform: translateY(-10px)

}



.portfolio {

    background: #fff;

    box-shadow: 2px 0 3px rgba(0, 0, 0, 0.04);

    transition: all .2s ease-in-out 0s;

    position: relative

}



.portfolio-wrapper {

    background: #00f

}



.portfolio-wrapper {

    overflow: hidden;

    position: relative !important;

    background: #666;

    cursor: pointer;

    border-bottom: 1px solid #ddd

}



.portfolio img {

    max-width: 100%;

    width: 200px;

    height: 150px;

    position: relative

}



.portfolio .label {

    position: absolute;

    width: 100%;

    height: 40px;

    bottom: -40px

}



.portfolio .label-bg {

    background: #e95a44;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0

}



.portfolio .label-text {

    color: #fff;

    position: relative;

    z-index: 500;

    padding: 5px 8px

}



.portfolio .text-category {

    display: block;

    font-size: 9px

}



.container:after {

    content: "\0020";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden

}



.clearfix:before, .clearfix:after, .row:before, .row:after {

    content: '\0020';

    display: block;

    overflow: hidden;

    visibility: hidden;

    width: 0;

    height: 0

}



.row:after, .clearfix:after {

    clear: both

}



.row, .clearfix {

    zoom: 1

}



.clear {

    clear: both;

    display: block;

    overflow: hidden;

    visibility: hidden;

    width: 0;

    height: 0

}



.bounceInLeft {

    animation: bounceInLeft 2s;

    animation-delay: 1s;

    -o-animation: bounceInLeft 2s;

    -o-animation-delay: 1s;

    -ms-animation: bounceInLeft 2s;

    -ms-animation-delay: 1s;

    -moz-animation: bounceInLeft 2s;

    -moz-animation-delay: 1s;

    -webkit-animation: bounceInLeft 2s;

    -webkit-animation-delay: 1s

}



.bounceInLeft {

    animation: bounceInLeft 2s;

    -o-animation: bounceInLeft 2s;

    -ms-animation: bounceInLeft 2s;

    -moz-animation: bounceInLeft 2s;

    -webkit-animation: bounceInLeft 2s

}



@-webkit-keyframes bounceInLeft {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-3000px, 0, 0);

        transform: translate3d(-3000px, 0, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(25px, 0, 0);

        transform: translate3d(25px, 0, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(5px, 0, 0);

        transform: translate3d(5px, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes bounceInLeft {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-3000px, 0, 0);

        transform: translate3d(-3000px, 0, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(25px, 0, 0);

        transform: translate3d(25px, 0, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(5px, 0, 0);

        transform: translate3d(5px, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



.bounceInLeft {

    -webkit-animation-name: bounceInLeft;

    animation-name: bounceInLeft

}



@-webkit-keyframes bounceInRight {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes bounceInRight {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



.bounceInRight {

    -webkit-animation-name: bounceInRight;

    animation-name: bounceInRight

}



.bounceInRight {

    animation: bounceInRight 2s;

    -o-animation: bounceInRight 2s;

    -ms-animation: bounceInRight 2s;

    -moz-animation: bounceInRight 2s;

    -webkit-animation: bounceInRight 2s

}



.bounceInDown {

    animation: bounceInDown 2s;

    -o-animation: bounceInDown 2s;

    -ms-animation: bounceInDown 2s;

    -moz-animation: bounceInDown 2s;

    -webkit-animation: bounceInDown 2s

}



@-webkit-keyframes bounceInDown {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -3000px, 0);

        transform: translate3d(0, -3000px, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, 25px, 0);

        transform: translate3d(0, 25px, 0)

    }

    75% {

        -webkit-transform: translate3d(0, -10px, 0);

        transform: translate3d(0, -10px, 0)

    }

    90% {

        -webkit-transform: translate3d(0, 5px, 0);

        transform: translate3d(0, 5px, 0)

    }

    100% {

        -webkit-transform: none;

        transform: none

    }

}



@keyframes bounceInDown {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -3000px, 0);

        transform: translate3d(0, -3000px, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, 25px, 0);

        transform: translate3d(0, 25px, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(0, -10px, 0);

        transform: translate3d(0, -10px, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(0, 5px, 0);

        transform: translate3d(0, 5px, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



.bounceInDown {

    -webkit-animation-name: bounceInDown;

    animation-name: bounceInDown

}



.bounceInUp {

    animation: bounceInUp 2s;

    -o-animation: bounceInUp 2s;

    -ms-animation: bounceInUp 2s;

    -moz-animation: bounceInUp 2s;

    -webkit-animation: bounceInUp 2s

}



@-webkit-keyframes bounceInUp {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 3000px, 0);

        transform: translate3d(0, 3000px, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, -20px, 0);

        transform: translate3d(0, -20px, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(0, 10px, 0);

        transform: translate3d(0, 10px, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(0, -5px, 0);

        transform: translate3d(0, -5px, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



@keyframes bounceInUp {

    0%, 60%, 75%, 90%, 100% {

        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);

        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)

    }

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 3000px, 0);

        transform: translate3d(0, 3000px, 0)

    }

    60% {

        opacity: 1;

        -webkit-transform: translate3d(0, -20px, 0);

        transform: translate3d(0, -20px, 0)

    }

    75% {

        opacity: 1;

        -webkit-transform: translate3d(0, 10px, 0);

        transform: translate3d(0, 10px, 0)

    }

    90% {

        opacity: 1;

        -webkit-transform: translate3d(0, -5px, 0);

        transform: translate3d(0, -5px, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

}



.bounceInUp {

    -webkit-animation-name: bounceInUp;

    animation-name: bounceInUp

}



.fadeInDown {

    animation: fadeInDown 1s;

    -o-animation: fadeInDown 1s;

    -ms-animation: fadeInDown 1s;

    -moz-animation: fadeInDown 1s;

    -webkit-animation: fadeInDown 1s

}



@-webkit-keyframes fadeInDown {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInDown {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, -100%, 0);

        transform: translate3d(0, -100%, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



.fadeInDown {

    -webkit-animation-name: fadeInDown;

    animation-name: fadeInDown

}



.fadeInUp {

    animation: fadeInUp 1s;

    -o-animation: fadeInUp 1s;

    -ms-animation: fadeInUp 1s;

    -moz-animation: fadeInUp 1s;

    -webkit-animation: fadeInUp 1s

}



@-webkit-keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



@keyframes fadeInUp {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        transform: none

    }

}



.fadeInUp {

    -webkit-animation-name: fadeInUp;

    animation-name: fadeInUp

}



.btnHover {

    position: relative

}



.btnHover:hover a:hover {

    background: url("../ihope/images/icon2.png") no-repeat 95px center;

    color: #1aa1e6

}



.btnHover:before {

    content: " ";

    background: #fff;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: -1;

    -webkit-transform: scaleX(0);

    -webkit-transition-duration: .2s

}



.btnHover:hover:before {

    -webkit-transform: scaleX(1);

    -webkit-transition-duration: .3s

}



.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active {

    -webkit-transform: skew(-10deg);

    transform: skew(-10deg)

}



.hvr-skew-forward {

    display: inline-block;

    vertical-align: middle;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;

    -webkit-transition-duration: .3s;

    transition-duration: .3s;

    -webkit-transition-property: transform;

    transition-property: transform;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%

}



.hvr-skew-backward {

    display: inline-block;

    vertical-align: middle;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;

    -webkit-transition-duration: .3s;

    transition-duration: .3s;

    -webkit-transition-property: transform;

    transition-property: transform;

    -webkit-transform-origin: 0 100%;

    transform-origin: 0 100%

}



.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active {

    -webkit-transform: skew(10deg);

    transform: skew(10deg)

}



.hvr-grow-rotate {

    display: inline-block;

    vertical-align: middle;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;

    -webkit-transition-duration: .3s;

    transition-duration: .3s;

    -webkit-transition-property: transform;

    transition-property: transform

}



.hvr-grow-rotate:hover {

    -webkit-transition-duration: .3s;

    transition-duration: .3s;

    -webkit-transform: scale(1.1) rotate(4deg);

    transform: scale(1.1) rotate(4deg)

}



.hvr-float-shadow {

    display: inline-block;

    vertical-align: middle;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;

    position: relative;

    -webkit-transition-duration: .3s;

    transition-duration: .3s;

    -webkit-transition-property: transform;

    transition-property: transform

}



.hvr-float-shadow:before {

    pointer-events: none;

    position: absolute;

    z-index: -1;

    content: '';

    top: 100%;

    left: 5%;

    height: 30px;

    width: 90%;

    opacity: 0;

    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 80%);

    -webkit-transition-duration: .1s;

    transition-duration: .1s;

    -webkit-transition-property: transform, opacity;

    transition-property: transform, opacity

}



.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {

    -webkit-transform: translateY(-10px);

    transform: translateY(-10px)

}



.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {

    opacity: 1;

    -webkit-transform: translateY(10px);

    transform: translateY(10px)

}



.ceNav {

    position: fixed;

    right: 20px;

    top: 100px;

    width: 20px;

    height: 190px;

    z-index: 999;

    display: block !important

}



.ceNav p {

    width: 10px;

    height: 10px;

    background: #aaa8a9;

    border-radius: 50%;

    margin: 10px auto;

    color: #fff;

    text-align: center;

    line-height: 14px;

    cursor: pointer;

    border: 1px solid #aaa8a9;

    opacity: .5

}



.ceNav p.active {

    background: 0;

    width: 14px;

    height: 14px;

    opacity: 1

}



.nth-bg1 {

    background: url('../ihope/images/bg1.jpg') center center;

    background-size: cover

}



.nth-bg2 {

    background: url('../ihope/images/bg2.jpg') center center;

    background-size: cover

}



.nth-bg3 {

    background: url('../ihope/images/bg3.jpg') center center;

    background-size: cover

}



.banner1-Img1 {

    position: absolute;

    bottom: 500px;

    left: 0;

    text-align: center;

    width: 100%

}



.banner1-Img2 {

    position: absolute;

    bottom: 0;

    left: 0;

    text-align: center;

    width: 100%

}



.banner1-Img2 img {

    padding-left: 110px

}



.bannerImg2 {

    text-align: center;

    width: 100%;

    margin: 0 auto;

    position: absolute;

    left: 0;

    bottom: 0

}



.bannerImg2 img {

    max-width: 1150px;

    width: 90%;

    padding-right: 70px;

    padding-bottom: 80px

}



.bannerImg3 {

    text-align: center

}



.learnMore {

    width: 130px;

    height: 40px;

    border-radius: 20px;

    text-align: center;

    margin: 38px auto;

    font-size: 16px;

    background: rgba(255, 255, 255, 0.3);

    overflow: hidden

}



.learnMore a {

    width: 110px;

    height: 40px;

    line-height: 40px;

    display: block;

    background: url("../ihope/images/icon1.png") no-repeat 95px center;

    cursor: pointer;

    padding-right: 20px

}



.learnMore a, .learnMore a:link, .learnMore a:visited, .learnMore a:hover, .learnMore a:active {

    color: #fff;

    text-decoration: none

}



.sect2 {

    background: #f6f6f6

}



.sect3 {

    background: #fff

}



.sect4 {

    background: url("../ihope/images/bg9.jpg") center center;

    background-size: cover

}



.sect5 {

    background: url("../images/bg3.jpg") center center;

    background-size: cover

}



.sect6 {

    background: #fff

}



.sect7 {

    background: url("../ihope/images/secbg7.jpg") center center;

    background-size: cover

}



.sect8 {

    background: #3c3c3c

}



.sec-box {

    padding-top: 20px

}



.sec-box .sec-h1 {

    text-align: center;

    font-size: 40px;

    color: #2e2e2e;

    background: url("../ihope/images/icon4.png") no-repeat center center

}



.sec-box .sec5-h1 {

    background: url("../ihope/images/icon13.png") no-repeat center center

}



.sec-box .sec-h3 {

    text-align: center;

    font-size: 18px;

    color: #717171;

    line-height: 26px

}



.sec-box .sec-h1.wrtie {

    text-align: center;

    font-size: 40px;

    color: #fff;

    background: url("../ihope/images/icon3.png") no-repeat center center

}



.sec-box .wrtie {

    color: #fff

}



.pai-box {

    margin-top: 60px;

    width: 1180px;

    margin-left: auto;

    margin-right: auto

}



.pai-box .left {

    position: relative

}



.pai-box .left .simg {

    position: absolute;

    left: 76px;

    top: 14px

}



.pai-box .left p {

    font-size: 20px;

    color: #2e2e2e;

    margin-bottom: 10px;

}



.pai-box .left p .se1 {

    font-size: 24px;

    color: #407df1

}



.pai-box .left p .se2 {

    font-size: 24px;

    color: #5392cd

}



.pai-box .left p .se3 {

    font-size: 24px;

    color: #6ebbcb

}



.pai-box .left p .se4 {

    font-size: 24px;

    color: #407df1

}



.pai-box .left p .se5 {

    font-size: 24px;

    color: #8476cd

}



.pai-box .left p .se6 {

    font-size: 24px;

    color: #000

}



.pai-box .left p .se7 {

    font-size: 24px;

    color: #fd5d4f

}



.pai-box .left p .se8 {

    font-size: 24px;

    color: #5bca9f

}



.pai-box .left p .year {

    font-size: 18px;

    margin-right: 26px

}



.pai-box .left p .spanR {

    display: inline-block;

    height: 44px;

    line-height: 44px;

    background: #fff;

    padding-left: 20px;

    padding-right: 10px

}



.pai-box .right {

    width: 586px;

    float: right

}



.pai-box .right ul {

    margin: 0;

    padding: 0

}



.pai-box .right li {

    float: left;

    width: 186px;

    height: 190px;

    cursor: pointer;

    margin: 4px

}



.pai-img {

    position: relative

}



.pai-img .shadow-txt {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    background: rgba(0, 0, 0, 0.6)

}



.pai-img .shadow-txt .ys-img {

    position: absolute;

    left: 40px;

    bottom: 60px

}



.ser-box {

    width: 1200px;

    margin: 0 auto

}



.ser-box ul {

    width: 100%;

    padding: 100px 0 50px

}



.ser-box ul li {

    float: left;

    width: 25%;

    text-align: center;

    cursor: pointer

}



.ser-box ul li .tit {

    color: #2f2f2f;

    font-size: 24px;

    height: 60px;

    line-height: 60px

}



.ser-box ul li .txt {

    color: #717171;

    font-size: 14px

}



.fw-bg {

    height: 220px

}



.fw-bg img {

    margin-top: 60px

}



.fw-bg1 {
    background: url("../ihope/images/bg4.jpg") no-repeat 0 0
}



.fw-bg2 {
    background: url("../ihope/images/bg5.jpg") no-repeat 0 0
}



.fw-bg3 {

    background: url("../ihope/images/bg6.jpg") no-repeat 0 0

}



.fw-bg4 {

    background: url("../ihope/images/bg7.jpg") no-repeat 0 0

}



.fw-bg5 {
    background: url("../images/lianbg2.jpg") no-repeat 0 0;
}



.jiej-box {

    width: 970px;

    margin: 0 auto;

    padding-top: 50px

}



.jiej-box .center{

    background: #fff;

    border-radius: 10px;

    width: 180px;

    margin:0 auto;

    padding-top: 30px;

}



.jiej-box ul li {

    float: left;

    width: 25%;

    text-align: center;

    cursor: pointer;

    overflow: hidden;

    margin-bottom: 40px;

}



.jiej-box ul li .tit {

    font-size: 20px;

    padding-top: 20px;

    padding-bottom: 40px

}



.fa-img {

    height: 60px

}



.fa-img img {

    height: 60px

}



.team-box {

    padding-top: 60px

}



.team-box ul li {

    float: left;

    width: 25%;

    text-align: center;

    cursor: pointer

}



.team-box ul .center {

    width: 230px;

    margin: 0 auto

}



.team-box ul .num {

    font-size: 50px;

    color: #2278cf;

    width: 156px;

    height: 146px;

    line-height: 146px;

    text-align: center;

    background: url("../ihope/images/bg3.png") no-repeat 0 0;

    position: relative;

    margin: 0 auto;

    font-weight: bold

}



.team-box ul .jia {

    width: 30px;

    height: 30px;

    line-height: 30px;

    position: absolute;

    left: 114px;

    top: 28px;

    display: block;

    font-size: 32px;

    font-weight: normal

}



.team-box ul .tit {

    font-size: 20px;

    color: #fff;

    margin-top: 20px

}



.team-box ul .zi {

    font-size: 30px;

    color: #fff

}



.kehu-box {

    padding-top: 30px

}



.liuc-box {

    margin-top: 50px;

    height: 436px;

    text-align: center

}



.sect7 {

    position: relative

}



.sec3-h1, .ser-box li {

    opacity: 0

}



.lcImg {

    -webkit-transform: scale(0.5);

    -moz-transform: scale(0.5);

    -o-transform: scale(0.5)

}



.scaleD {

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -o-transform: scale(1);

    -webkit-transition-duration: 1s;

    -moz-transition-duration: 1s;

    -o-transition-duration: 1s

}



.sect8 {

    position: relative

}



.di-box {

    color: #797979;

    overflow: hidden

}



.di-box h1 {

    font-size: 22px;

    margin-bottom: 26px;

    color: #cdcdcd

}



.di-box span.tit {

    color: #cdcdcd;

    margin-right: 4px

}



.di-box .di-mode1 {

    float: left;

    width: 620px

}



.di-box .lx-box {

    overflow: hidden

}



.di-box .lx-box .lx-mode {

    float: left;

    width: 250px;

    height: 40px;

    margin-bottom: 40px

}



.lx-mode1 {

    background: url("../ihope/images/icon9.png") no-repeat 10px 8px;

    padding: 10px 0 10px 44px

}



.lx-mode2 {

    background: url("../ihope/images/icon10.png") no-repeat 10px 8px;

    padding: 10px 0 10px 44px

}



.lx-mode4 {

    background: url("../ihope/images/icon11.png") no-repeat 10px 8px;

    padding: 10px 0 10px 44px

}



.lx-mode3 {

    background: url("../ihope/images/icon12.png") no-repeat 10px 11px;

    padding: 10px 0 10px 44px

}



.di-box .di-mode3 {

    float: right;

    width: 488px

}



.di-box .about-box {

    line-height: 20px

}



.di-box .serves-mode {

    width: 90px;

    float: left

}



.di-box .serves-mode p {

    padding-top: 12px

}



#div10 {

    position: absolute;

    left: 0;

    bottom: 0;

    clear: both;

    border-top: 1px solid #444248;

    background: #252525;

    width: 100%;

    height: 60px

}



#copyright {

    clear: both;

    width: 1000px;

    min-width: 1000px;

    margin: 0 auto;

    margin-top: 10px

}



#copyright p, #copyright p span {

    font-size: 12px;

    color: #909090

}



#copyright #span10_1 {

    padding: 12px 0;

    display: inline-block

}



#copyright #span10_2 {

    float: right;

    padding: 12px 0;

    display: inline-block

}



#filters {

    text-align: center;

    padding: 20px 0 10px;

    margin: 0

}



#filters, #filters li {

    list-style: none

}



#filters li {

    display: inline-block;

    margin: 0;

    color: #a0a0a0;

    cursor: pointer

}



#filters li span {

    display: block;

    padding: 5px 20px;

    text-decoration: none;

    color: #666;

    cursor: pointer;

    border-radius: 15px

}



#filters li span:hover {

    background: #f1f1f1

}



#filters li span.active, #filters li span.active:hover {

    background: #1aa1e6;

    color: #fff

}



.anli-box {

    width: 1100px;

    margin: 0 auto;

    padding-top: 10px;

    max-height: 650px;

    overflow: hidden

}



.anli-box .anli-mode {

    width: 200px;

    height: 270px;

    margin: 0 8px;

    border: 1px solid #eee;

    border-radius: 4px;

    overflow: hidden;

    cursor: pointer;

    float: left;

    margin-bottom: 20px

}



.anli-box .anli-top {

    text-align: center;

    font-size: 20px;

    height: 50px;

    line-height: 50px;

    border-bottom: 1px solid #eee

}



.anli-box .anli-img {

    text-align: center;

    padding: 20px 0

}



.anli-box .anli-img img {

    width: 180px;

    height: 100px

}



.anli-box .anli-bot {

    width: 180px;

    padding: 10px 0;

    margin: 0 auto

}



.anli-mode:hover {

    border: 1px solid #00a0e9

}



.anli-mode:hover .anli-top {

    border-bottom: 1px solid #00a0e9

}



.more-duo {

    width: 194px;

    height: 46px;

    line-height: 46px;

    text-align: center;

    margin: 20px auto 0;

    border-radius: 4px;

    cursor: pointer;

    border: 1px solid #333;

    color: #333;

    display: block;

    text-decoration: none;

    opacity: 0;

    font-size: 18px

}



.more-duo, .more-duo:link, .more-duo:active, .more-duo:visited {

    color: #333;

    text-decoration: none

}



.more-duo:hover {

    border-color: #00a0e9;

    color: #00a0e9;

    text-decoration: none

}



.xq-box {

    width: 100%;

    height: 100%;

    position: fixed;

    background: #fff;

    overflow: auto;

    top: 0;

    padding-bottom: 50px;

    z-index: 9999

}



.anli-xq {

    position: fixed

}



.xq-box .anli-xq {

    background: #f1f1f1;

    width: 100%;

    text-align: center;

    height: 80px;

    line-height: 80px;

    font-size: 24px

}



.xq-box .anli-xq .back {

    float: left;

    width: 80px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    background: #1aa1e6;

    color: #fff;

    font-size: 14px;

    cursor: pointer;

    margin-top: 20px

}



.xq-box .xq-cont {

    padding-bottom: 60px;

    width: 1200px;

    margin: 0 auto;

    padding-top: 80px

}



.xq-box .rtiao {

    float: right;

    font-size: 0;

    margin-top: 20px;

    height: 40px;

    overflow: hidden

}



.xq-box .rtiao span {

    display: inline-block;

    width: 80px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    color: #fff;

    background: #1aa1e6;

    font-size: 14px;

    cursor: pointer;

    margin-left: 6px;

    float: left

}



.cebbox {

    width: 150px;

    position: fixed;

    right: 40px;

    bottom: 60px;

    z-index: 30;

    overflow: hidden

}



.cebbox img {

    display: block;

    margin: 0 auto

}



.cebb-top {

    width: 150px;

    height: 266px;

    background: url("../ihope/images/ce5.jpg") no-repeat 0 0

}



.cebb-logo {

    text-align: center;

    padding-top: 20px

}



.cebb-tel {

    text-align: center;

    padding: 10px

}



.cebb-qq1 {

    text-align: center;

    margin-top: 12px;

    margin-bottom: 8px

}



.cebb-qq2 {

    text-align: center;

    margin-bottom: 20px

}



.cebb-txt {

    text-align: center

}



.cebb-bt {

    margin-top: 40px;

    width: 48px;

    height: 48px;

    cursor: pointer;

    float: right

}



.cebb-bt a {

    display: block

}



.cebb-bt .btimg1 {

    display: inline-block

}



.cebb-bt .btimg2 {

    display: none

}



.cebb-bt.active .btimg1 {

    display: none

}



.cebb-bt.active .btimg2 {

    display: inline-block

}



.ce-line {

    text-align: center;

    height: 2px;

    padding: 4px 0

}



.ce-line1 {

    padding-top: 12px

}



.cebbox {

    overflow: hidden;

    padding-left: 36px;

    height: 354px;

    width: 150px

}



.cebb-top {

    position: absolute;

    right: 0;

    top: 0

}



.tabkg {

    width: 36px;

    background: #3268c4;

    position: absolute;

    left: -36px;

    top: 0;

    text-align: center;

    padding: 10px 0;

    cursor: pointer

}



.tabkg .kgtxt {

    color: #fff;

    font-size: 12px;

    padding: 10px 0

}



.kgimg2 {

    position: absolute;

    left: 4px;

    top: 4px;

    cursor: pointer

}



.tabkg {

    display: none

}



.cebb-bot {

    position: absolute;

    right: 0;

    bottom: 0

}



.page555{background: url("../images/ysbg.png") no-repeat center center; background-size: cover; height:560px;}

.youshi_box{ padding-top: 50px;}

.youshi_box .txts{

    overflow: hidden;

    font-size: 0;

}

.youshi_box .txts .item{

    display: inline-block;

    font-size: 18px;

    color: #fff;

    padding-left:40px;

    background: url("../images/dots.png") no-repeat 0 center;

    width: 33%;

    text-align: left;

    box-sizing: border-box;

    padding-top:10px;

    padding-bottom:10px;

    white-space: nowrap;



}

.youshi_box .txts .item span{

    font-size: 24px;

}

@media (max-width: 1300px){

    /*中屏 1280*800*/

    .youshi_box .txts .item:nth-of-type(5){text-indent: 60px;

        background: url("../images/dots.png") no-repeat 60px center;

    }

    .anli-box{max-height: 600px;}

}

.youshi_img{ position: relative; margin-top: 50px;}

.youshi_img .center{ position: absolute; left:0; top:0; box-shadow:  0 5px 5px rgba(50,104,196,0.2);  padding-top: 50px; width: 100%; height: auto; background: #fff; border-radius: 10px;}

.youshi_img .tit1{ font-size: 32px; color: #333; text-align: center; }

.youshi_img .tit1 span{ display: inline-block; padding-left:30px; background: url("../images/san.png") no-repeat 0 center; }

.youshi_img .tit2{ color: #999; font-size: 18px; text-align: center; margin-top:20px; }

.youshi_img .imgs{ overflow: hidden; padding:50px 40px; }

.youshi_img .imgs img{ display: block; margin:0 auto; width: 100%; height: auto; }



.page5{ margin-top: 500px; }



@media (max-width: 1400px) {

    .bannerImg2 img {

        max-width: 880px;

        width: 90%

    }



    .banner1-Img2 img {

        width: 900px;

        padding-left: 90px

    }



    .banner1-Img1 {

        bottom: 400px

    }



    .banner1-Img1 img {

        width: 800px

    }



    .ser-box {

        width: 960px

    }



    .fw-bg {

        height: 190px

    }



    .fw-bg img {

        margin-top: 45px

    }



    .ser-box ul {

        padding-top: 60px

    }



    #portfoliolist .portfolio {

        width: 182px;

        height: 180px;

        margin: 9px;

        padding-bottom: 10px

    }



    #portfoliolist .portfolio .tit {

        font-size: 14px

    }



    #filters {

        padding: 10px 0 5px

    }



    .portfolio img {

        width: 180px;

        height: 138px

    }



    .more-duo {

        width: 150px;

        height: 40px;

        line-height: 40px;

        text-align: center;

        margin: 10px auto 0;

        font-size: 14px

    }



    .sec9-h1, .sec6-h1 {

        margin-bottom: 0

    }



    .pai-box {

        margin-top: 40px;

        width: 960px

    }



    .pai-box .left {

        width: 500px

    }



    .pai-box .left p {

        font-size: 16px

    }



    .pai-box .left p .se4 {

        font-size: 18px

    }



    .pai-box .right {

        width: 460px

    }



    .pai-box .right li {

        width: 144px;

        height: 144px

    }



    .pai-box .right li img {

        max-width: 100%

    }



    .kehu-box {

        padding-top: 0

    }



    .liuc-box {

        margin-top: 0

    }



    .team-box {

        width: 960px

    }



    .lcImg img {

        width: 960px

    }



    .di-box {

        width: 960px

    }



    .di-box .di-mode1 {

        width: 600px

    }



    .di-box .di-mode3 {

        width: 300px;

        float: left

    }



    .ser-box ul li .txt {

        color: #717171;

        font-size: 12px

    }

}



.banner1-Img3{display: none;}

.banner2-Img2{display: none;}

@media (max-width:1000px){

    .banner1-Img1 img {

        max-width: 80%;

        display: block;

        margin:0 auto;

    }

    .sec-box .sec-h1{

        font-size: 24px;

        color: #354963;

        text-align: center;

        padding: 30px 0;

    }

    .sec-box .sec-h1 {

        text-align: center;

        font-size: 24px;

        color: #2e2e2e;

        background: url(../ihope/images/icon4.png) no-repeat center center;

        background-size: 240px 2px;

    }

    .sec-box .sec-h1.wrtie{

        text-align: center;

        font-size: 24px;

        background: url(../ihope/images/icon3.png) no-repeat center center;

        background-size: 240px 2px;

    }

    .ser-box{

        width: 90%;

        margin:0 auto;

    }

    section{

        padding: 0;

    }

    .ser-box ul{

        padding-top: 0;

    }

    .ser-box ul li{

        width: calc(50% - 10px);

        margin-top: 10px;

    }

    .ser-box ul li:nth-of-type(odd){

        margin-right: 20px;

    }

    .ser-box .yidonno{

        display: none;

    }

    .sec-box .sec-h3{

        max-width: 90%;

        margin:0 auto;

    }

    .jiej-box{

        width: 90%;

        margin:0 auto;

    }

    .jiej-box ul li{

        width: 50%;

        margin-bottom: 10px;

    }

    .youshi_box{padding-top: 10px;}

    .youshi_box .txts .item{

        width: 100%;

        font-size: 14px;

    }

    .youshi_box .txts .item:nth-of-type(5){

        text-indent: 0;

        background: url(../images/dots.png) no-repeat 0 center;

        background-size: 14px 14px;

    }

    .youshi_box .txts .item{

        background: url(../images/dots.png) no-repeat 0 center;

        background-size: 14px 14px;

        padding-left: 20px;

    }

    .youshi_box .txts .item span{

        font-size: 18px;

    }

    .youshi_img .tit1{

        font-size: 18px;

    }

    .youshi_img .tit1 span {

        display: inline-block;

        padding-left: 30px;

        background: url(../images/san.png) no-repeat 0 center;

        background-size: 12px 20px;

    }

    .youshi_img{

        margin-top: 10px;

    }

    .youshi_img .imgs{

        padding:15px;

    }

    .page5{

        margin-top: 250px;

    }

    .anli-box{

        width: 100%;

        max-height: 10000px;

    }

    .team-box{

        width: 100%;

    }

    .team-box ul li{

        width: 50%;

        margin-bottom: 10px;

    }

    .team-box ul .zi{

        font-size: 20px;

    }

    .team-box ul .tit{

        font-size: 14px;

        margin-top: 10px;

    }

    .team-box ul .center{

        width: 100%;

    }

    .liuc-box{

        height: 250px;

    }

    .lcImg img{

        max-width: 90%;

        display: block;

        margin:0 auto;

    }

    .clients .box{

        display: none;

    }

    .hzuoimg{

        display: block !important;

        padding:30px 0;

    }

    .hzuoimg img{

        display: block;

        width: 100%;

        height: auto;

    }

    .banner1-Img2 img{

        padding-left: 0;

    }

    .banner1-Img1{

        display: none !important;

    }

    .banner1-Img3{

        display: block;

        max-width: 80%;

        margin:0 auto;

        position: absolute;

        left:10%;

        top:calc(50% - 150px);

    }

    .banner2-Img1{

        display: none !important;

    }

    .banner2-Img2{

        display: block;

        max-width: 80%;

        margin:0 auto;

        position: absolute;

        left:10%;

        top:calc(50% - 150px);

    }

}