.fp2-content *,.fp4-content-inner *{margin:0; padding:0; font-size:0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.fp2-content{height:900px; position:relative; background-image:url(../images/demos.jpg); background-repeat:repeat; -webkit-animation:infiniteBackground 185s linear infinite; animation:infiniteBackground 185s linear infinite}
.fp-content-title-text{font-size:30px; letter-spacing:5px; color:#222222}
@keyframes infiniteBackground{from{background-position:0 0}
    to{background-position:2080px 0}
}
@-webkit-keyframes infiniteBackground{from{background-position:0 0}
    to{background-position:2080px 0}
}
@-moz-keyframe infiniteBackground{from{background-position:0 0}
    to{background-position:2080px 0}
}
.fp2-modal{height:100%; background:#000000; opacity:0.75}
.fp2-content-inner{position:absolute; top:0; left:0; width:100%; height:100%}
.fp2-content-title{margin-top:70px; text-align:center; padding-bottom:15px}
.fp2-content-title-text{color:#fff;}
.mark-line{text-align:center; width:75%; height:8px; margin:26px auto 0 auto; background-image:url(../images/mark-line.png); background-size:auto; background-repeat:no-repeat; background-position:bottom center}
.inner-content{width:93.75%; max-width:1200px; margin:0 auto}
.fp2-content-inner-ct{margin-top:50px}
.fp2-content-inner-ct.n{margin-top:0; padding-bottom:4em;}

.fp1-content-item-ct{width:300px; height:100%; margin:0 auto}
.fp1-content-item-logo{text-align:center; height:121px}
.fp1-content-item-logo img{width:100px}
.fp1-content-item-label{margin-top:26px; text-align:center}
.fp1-content-item-label span{color:#222; letter-spacing:15px; font-weight:500; font-size:24px; /* font-family:'PingFang SC-R'; */}
.fp1-content-item-desc{margin-top:24px; /* text-align:center; */}
.fp1-content-item-desc span{font-size:14px; color:#8e9399; line-height:1.8; letter-spacing:0}


.fp1-content-item-logo i {
    width: 130px;
    height: 121px;
    display: block;
    margin: 0px auto; }

.fp1-content-item-1 i.one-s {
    width: 121px;
    background: url(../images/icon1-1.png) no-repeat center center;
    overflow: hidden; }

.fp1-content-item-1 i.one-s i.one-s-two {
    width: 121px;
    background: url(../images/icon1-2.png) no-repeat center center;
    overflow: hidden; }

.fp1-content-item-1 i.one-s i.one-s-two i.one-s-three {
    width: 121px;
    /*width:11px; height:11px; margin:55px 0px 0px 55px;*/
    background: url(../images/icon1-3.png) no-repeat center center;
    float: left; }

.fp1-content-item-1 i.one-s i.one-s-two i.one-s-three i.one-s-four {
    width: 117px;
    height: 117px;
    margin: 2px 0px 0px 2px;
    -webkit-transform: scale(0);
    transform: scale(0);
    background: #fff;
    background: url(../images/icon1-4.png) no-repeat center center;
    float: left; }

.fp1-content-item-1:hover i.one-s {
    -webkit-animation: one-s 0.2s ease 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: one-s 0.2s ease 0s;
    -moz-animation-fill-mode: forwards;
    -o-animation: one-s 0.2s ease 0s;
    -o-animation-fill-mode: forwards;
    animation: one-s 0.2s ease 0s;
    animation-fill-mode: forwards; }

.fp1-content-item-1:hover i.one-s i.one-s-two i.one-s-three {
    -webkit-animation: one-s-three 0.2s ease 0.1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: one-s-three 0.2s ease 0.1s;
    -moz-animation-fill-mode: forwards;
    -o-animation: one-s-three 0.2s ease 0.1s;
    -o-animation-fill-mode: forwards;
    animation: one-s-three 0.2s ease 0.1s;
    animation-fill-mode: forwards; }

.fp1-content-item-1:hover i.one-s i.one-s-two i.one-s-three i.one-s-four {
    -webkit-animation: one-s-four 0.6s ease 0.1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: one-s-four 0.6s ease 0.1s;
    -moz-animation-fill-mode: forwards;
    -o-animation: one-s-four 0.6s ease 0.1s;
    -o-animation-fill-mode: forwards;
    animation: one-s-four 0.6s ease 0.1s;
    animation-fill-mode: forwards; }

@-webkit-keyframes one-s {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@keyframes one-s {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@-webkit-keyframes one-s-three {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@keyframes one-s-three {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@-webkit-keyframes one-s-four {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    30% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0); } }

@keyframes one-s-four {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    30% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0); } }

.fp1-content-item-2 .fp1-content-item-logo i.two-s {
    background: url(../images/icon2-1.png) no-repeat center center;
    -webkit-transition: all 1s;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 0.15s;
    -o-transition: all 1s;
    position: relative; }

.fp1-content-item-2 .fp1-content-item-logo i.two-s i.two-s-two {
    background: url(../images/icon2-2.png) no-repeat center top; }

.fp1-content-item-2 .fp1-content-item-logo i.two-s i.two-s-three {
    width: 111px;
    background: url(../images/icon2-3.png) no-repeat center top;
    float: right;
    margin-right: 10px; }

.fp1-content-item-2 .fp1-content-item-logo i.two-s i.two-s-four {
    height: 87px;
    background: url(../images/icon2-4.png) no-repeat center bottom;
    position: absolute;
    left: 0px;
    bottom: 32px; }

.fp1-content-item-logo i.two-s i.two-s-five {
    width: 12px;
    height: 12px;
    background: url(../images/icon2-5.jpg) no-repeat center center;
    position: absolute;
    left: 58px;
    top: 54px; }

.fp1-content-item-logo:hover i.two-s {
    -webkit-animation: two-s 0.2s ease 0s;
    -webkit-animation-fill-mode: forwards; }

.fp1-content-item-logo:hover i.two-s i.two-s-two {
    -webkit-animation: two-s-two 0.5s ease 0.15s;
    -webkit-animation-fill-mode: forwards; }

.fp1-content-item-logo:hover i.two-s i.two-s-three {
    -webkit-animation: two-s-three 0.5s ease 0.15s;
    -webkit-animation-fill-mode: forwards; }

.fp1-content-item-logo:hover i.two-s i.two-s-four {
    -webkit-animation: two-s-four 0.5s ease 0.15s;
    -webkit-animation-fill-mode: forwards; }

.fp1-content-item-logo:hover i.two-s i.two-s-five {
    -webkit-animation: two-s-five 0.3s ease 0.15s;
    -webkit-animation-fill-mode: forwards;
    position: absolute;
    left: 58px;
    top: 54px; }

@-webkit-keyframes two-s {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@keyframes two-s {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@-webkit-keyframes two-s-two {
    0% {
        height: 0px; }
    100% {
        height: 100px; } }

@keyframes two-s-two {
    0% {
        height: 0px; }
    100% {
        height: 100px; } }

@-webkit-keyframes two-s-three {
    0% {
        width: 10px; }
    100% {
        width: 111px; } }

@keyframes two-s-three {
    0% {
        width: 10px; }
    100% {
        width: 111px; } }

@-webkit-keyframes two-s-four {
    0% {
        height: 0px; }
    100% {
        height: 100px; } }

@keyframes two-s-four {
    0% {
        height: 0px; }
    100% {
        height: 100px; } }

@-webkit-keyframes two-s-five {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    95% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

@keyframes two-s-five {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    95% {
        -webkit-transform: scale(0);
        transform: scale(0); }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

.fp1-content-item-3 .fp1-content-item-logo i {
    background: url(../images/icon3-1.png) no-repeat center center;
    position: relative;
    overflow: hidden; }

.fp1-content-item-3 .fp1-content-item-logo i span {
    width: 38px;
    height: 39px;
    position: absolute;
    left: 2px;
    top: 0;
    background: url(../images/icon3-2.png) no-repeat center center;
    z-index: 999;
    margin: 40px 0px 25px 0px;
    display: block;
    text-align: center;
    color: #222;
    font-size: 20px;
    line-height: 20px; }

.fp1-content-item-3 .fp1-content-item-logo i em {
    width: 36px;
    height: 37px;
    position: absolute;
    left: 40px;
    top: 41px;
    background: url(../images/icon3-3.png) no-repeat center center;
    z-index: 888; }

.fp1-content-item-3 .fp1-content-item-logo i strong {
    width: 33px;
    height: 37px;
    position: absolute;
    left: 76px;
    top: 41px;
    background: url(../images/icon3-4.png) no-repeat center center;
    z-index: 777; }

.fp1-content-item-3 .fp1-content-item-logo:hover i {
    transform: scale(0);
    animation: three-an 0.2s linear 0s;
    animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    -webkit-animation: three-an 0.2s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-transform: scale(0);
    -moz-animation: three-an 0.2s linear 0s;
    -moz-animation-fill-mode: forwards;
    -o-transform: scale(0);
    -o-animation: three-an 0.2s linear 0s;
    -o-animation-fill-mode: forwards; }

.fp1-content-item-3 .fp1-content-item-logo:hover i em {
    left: 2px;
    animation: three-x1 0.3s ease 0.18s;
    animation-fill-mode: forwards;
    -webkit-animation: three-x1 0.3s ease 0.18s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: three-x1 0.3s ease 0.18s;
    -moz-animation-fill-mode: forwards;
    -o-animation: three-x1 0.3s ease 0.18s;
    -o-animation-fill-mode: forwards; }

.fp1-content-item-3 .fp1-content-item-logo:hover i strong {
    left: 0px;
    animation: three-x2 0.3s linear 0.28s;
    animation-fill-mode: forwards;
    -webkit-animation: three-x2 0.3s linear 0.28s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: three-x2 0.3s linear 0.28s;
    -moz-animation-fill-mode: forwards;
    -o-animation: three-x2 0.3s linear 0.28s;
    -o-animation-fill-mode: forwards; }




.fp2-demos{list-style:none}
.fp2-demos.sn .fp2-demos-item,.fp2-demos.hn .fp2-demos-item{margin-bottom:1%;}
.fp2-demos.sn .fp2-demos-item:nth-child(3n+1){margin-left:0;}
.fp2-demos-r1{margin-top:30px}
.fp2-demos-r2{margin-top:1.25%}
.fp2-demos-item:not(:first-child){margin-left:1.306913996627315%}
.fp2-demos.hn .fp2-demos-item:nth-child(4){margin-left:0;}
.fp2-demos-item{display:inline-block; *display:inline; *zoom:1;overflow:hidden; float: left;}
.fp2-demos.lg-show > .fp2-demos-item-short{width:32.46205733558179%}
.fp2-demos.lg-show > .fp2-demos-item-long{width:66.2310286677909%}
.fp2-demos.md-show > .fp2-demos-item-short{width:49.375%}
.fp2-demos.md-show > .fp2-demos-item-long{width:100%}

/*.fp2-demos.hn .fp2-demos-item:first-of-type{width:66.2310286677909%}*/
/*.fp2-demos.hn .fp2-demos-item:nth-child(3n){margin-left:0;}*/
.fp2-demos-item-ct{height:100%; position:relative; background-size:cover; background-repeat:no-repeat; background-position:center top; -webkit-transition:-webkit-transform ease 0.15s; transition:-webkit-transform ease 0.15s; transition:transform ease 0.15s; transition:transform ease 0.15s,-webkit-transform ease 0.15s}
/*.fp2-demos.lg-show .fp2-demos-item-ct-1{background-image:url("../images/demo-11.jpg")}*/
/*.fp2-demos.lg-show .fp2-demos-item-ct-2{background-image:url("../images/demo-2.jpg")}*/
/*.fp2-demos.lg-show .fp2-demos-item-ct-3{background-image:url("../images/demo-3.jpg")}*/
/*.fp2-demos.lg-show .fp2-demos-item-ct-4{background-image:url("../images/demo-4.jpg")}*/
/*.fp2-demos.lg-show .fp2-demos-item-ct-5{background-image:url("../images/demo-55.jpg")}*/
.fp2-demos.lg-show .fp2-demos-item-ct-n1{background-image:url("../images/demo_n1.jpg")}
.fp2-demos.lg-show .fp2-demos-item-ct-n2{background-image:url("../images/demo_n2.jpg")}
.fp2-demos.lg-show .fp2-demos-item-ct-n3{background-image:url("../images/demo_n3.jpg")}
.fp2-demos.lg-show .fp2-demos-item-ct-n4{background-image:url("../images/img_c1.jpg")}
.fp2-demos.lg-show .fp2-demos-item-ct-n5{background-image:url("../images/demo_n55.jpg")}
.fp2-demos.lg-show .fp2-demos-item-ct-n6{background-image:url("../images/demo_n6.jpg")}
.fp2-demos-item-ct:hover{-webkit-transform:scale(1.05); transform:scale(1.05)}
.fp2-demos-item-logo{width:100%; height:280px; overflow:hidden}
.fp2-demos-item-logo img{width:100%; -webkit-transition:all 1s ease 0s; transition:all 1s ease 0s}
.fp2-demos-item-logo img:hover{transform:scale(1.08); -ms-transform:scale(1.08); /* IE 9 */
    -moz-transform:scale(1.08); /* Firefox */
    -webkit-transform:scale(1.08); /* Safari 和 Chrome */
    -o-transform:scale(1.08); /* Opera */}
.fp2-demos-item-footer{position:absolute; bottom:0; left:0; background:#5cbfc8; height:40px; width:100%; line-height:40px; opacity:0.8}
.fp2-demos-item-footer img{margin-top:12px; margin-left:25px}
.fp2-demos-item-ct > .fp2-demos-item-tooltip{position:absolute; top:0; left:0; width:100%; height:100%; padding:0 50px; text-align:center; background:rgba(0,0,0,0.5); color:#fff; opacity:0; -webkit-transition:all 0.25s ease; transition:all 0.25s ease; box-sizing: border-box;}
/*.fp2-demos-item-ct-2 > .fp2-demos-item-tooltip{padding:0 150px}*/
.fp2-demos-item-tooltip:hover{opacity:1}
.fp2-demos-item-tooltip > .item-tooltip-title{margin-top:110px; font-size:24px; line-height:24px; font-weight:bold; letter-spacing:2px; -webkit-transform:scale(0.2); transform:scale(0.2); -webkit-transition:all 0.25s ease; transition:all 0.25s ease}
.fp2-demos-item-tooltip:hover > .item-tooltip-title{-webkit-transform:scale(1); transform:scale(1)}
.fp2-demos-item-tooltip > .item-tooltip-content{margin-top:25px; margin-bottom:25px; font-size:16px; letter-spacing:1px; line-height:2; -webkit-transform:scale(0.8); transform:scale(0.8); -webkit-transition:all 0.25s ease; transition:all 0.25s ease}
.fp2-demos-item-tooltip:hover > .item-tooltip-content{-webkit-transform:scale(1); transform:scale(1)}
.fp2-demos-item-tooltip > .item-tooltip-climb{font-size:13px; line-height:1.4em; font-weight: bold; border:1px solid #ffffff; padding:0 1em; border-radius:.5em; text-decoration:none; text-align:center; cursor:pointer; display: inline-block; margin-top:1em; color:#fff; letter-spacing:1px}
.fp3-content-title{margin-top:70px; text-align:center}
.fp4-content{margin-top:2em; padding:70px 0 121px 0; background:#f7f7f7}
.fp4-content .fp4-content-title{text-align:center}
.fp4-content .fp4-content-title span.marked{color:#31a9b9}
.fp4-content .fp4-content-inner > ul{list-style:none; text-align:center}
.fp4-content .fp4-content-inner > ul > li{margin-top:52px; width:378.6px; height:290px; display:inline-block; vertical-align:top}
.fp4-content .fp4-content-inner > ul > li.large{background-color:#f1ecec; margin-right:32px; text-align:center}
.fp4-content .fp4-content-inner > ul > li.large p{color:#fff}
.fp4-content .fp4-content-inner > ul > li.large p.main-title{font-size:25px; line-height:1}
.fp4-content .fp4-content-inner > ul > li.large p.main-title a{color:#131212; font-size:20px; line-height:1; text-decoration:none}
.fp4-content .fp4-content-inner > ul > li.large p.sub-title{margin-top:32px; font-size:17px; line-height:1}
.fp4-content .fp4-content-inner > ul > li.small > ul{height:100%}
.fp4-content .fp4-content-inner > ul > li.small > ul > li{height:86px; text-align:left}
.fp4-content .fp4-content-inner > ul > li.small > ul > li:not(:nth-of-type(1)){margin-top:16px}
.fp4-content .fp4-content-inner > ul > li.small > ul > li .bg{display:inline-block; vertical-align:top; width:101px; height:100%; background-color:#232323}
.fp4-content .fp4-content-inner > ul > li.small > ul > li .content{display:inline-block; vertical-align:top; width:267px; margin-left:10px; overflow:hidden}
.fp4-content .fp4-content-inner > ul > li.small > ul > li .content .main-title{margin-top:5px; font-size:20px; line-height:1; color:#232323}
.fp4-content .fp4-content-inner > ul > li.small > ul > li .content .main-title a{font-size:16px; line-height:1; color:#232323; text-decoration:none}
.fp4-content .fp4-content-inner > ul > li.small > ul > li .content .sub-title{margin-top:5px; font-size:16px; line-height:1.2; color:#808080}

.fp4-content-inner .large{background-color:#f1ecec; margin-right:32px; text-align:center; margin-top:52px; width:378.6px; height:290px; display:inline-block; vertical-align:top; position:relative; float: left; overflow:hidden;}
.fp4-content-inner .large .bg{display:inline-block; vertical-align:top; height:100%}
.fp4-content-inner .large .bg img{width:100%; height:100%}
.fp4-content-inner .m2-title{height:290px; z-index:20; position:absolute; top:0; width:380px; white-space:nowrap; text-overflow:ellipsis; background:#000; overflow:hidden; color:#fff; opacity:0.4}
.fp4-content-inner .m2-title a{color:#fff; font-size:22px; line-height:290px; text-decoration:none}
.fp4-content-inner .small{margin-top:52px; width:370.6px; height:290px; overflow:hidden; display:inline-block; vertical-align:top}
.fp4-content-inner .small .bg2{display:inline-block; vertical-align:top; width:101px; height:100%; float:left; background-color:#232323}
.fp4-content-inner .small ul{height:100%}
.fp4-content-inner .small ul li{height:86px; text-align:left}
.fp4-content-inner .small ul li:not(:nth-of-type(1)){margin-top:16px}
.fp4-content-inner .small .content .m-title a{font-size:16px; line-height:1; color:#232323; text-decoration:none}
.fp4-content-inner .small .content{display:inline-block; vertical-align:top; width:259px; margin-left:10px; overflow:hidden}
.fp4-content-inner .small .m-title{margin-top:5px; font-size:20px; line-height:1; color:#232323}
.fp4-content-inner .small .sub-title{margin-top:5px; font-size:16px; line-height:1.2; color:#808080}