* {margin: 0; padding: 0; box-sizing: border-box;}

body {}

ul, ol {list-style-type: none;}
.hidden {display: none;}
.flex {display: flex;}
.items-center {align-items: center;}
.justify-around {justify-content: space-around;}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.z-10 {z-index: 10;}
.top-8 {top: 2rem;}
.top-32 {top: 8rem;}
.top-1\/2 {top: 50%;}
.-top-16 {top: -4rem;}
.right-0 {right: 0;}
.right-4 {right: 1rem;}
.right-8 {right: 2rem;}
.right-12 {right: 3rem;}
.right-16 {right: 4rem;}
.right-32 {right: 8rem;}
.right-48 {right: 12rem;}
.-right-12 {right: -3rem;}
.-right-40 {right: -10rem;}
.-right-48 {right: -12rem;}
.bottom-0 {bottom: 0;}
.bottom-28 {bottom: 7rem;}
.bottom-8 {bottom: 2rem;}
.left-48 {left: 12rem;}
.left-1\/2 {left: 50%;}
.-left-24 {left: -6rem;}
.-left-28 {left: -7rem;}
.-left-40 {left: -10rem;}
.-left-48 {left: -12rem;}
.mt-2 {margin-top: 0.5rem;}
.mt-8 {margin-top: 2rem;}
.-mt-32 {margin-top: -8rem;}
.mr-16 {margin-right: 4rem;}
.mr-48 {margin-right: 12rem;}
.mlr {margin-left: -15px; margin-right: -15px;}
.section {overflow: hidden;}
.text-center {text-align: center;}
.text-white {color: #fff;}

.shop { animation:shop 1s infinite; -webkit-animation:shop 1s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes shop
{
from { opacity: 0;}
to { opacity: 1;}
}
@-webkit-keyframes  shop /*Safari and Chrome*/
{
from { opacity: 0;}
to { opacity: 1;}
}

.fadeInUp { animation:fadeInUp 1s infinite; -webkit-animation:fadeInUp 1s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes fadeInUp
{
from { top: 300px; opacity: 0;}
to { top: 0; opacity: 1;}
}
@-webkit-keyframes  fadeInUp /*Safari and Chrome*/
{
from { top: 100px; opacity: 0;}
to { top: 0; opacity: 1;}
}
.fadeInLeft { animation:fadeInLeft 1s infinite; -webkit-animation:fadeInLeft 1s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes fadeInLeft
{
from { left: -200px; opacity: 0;}
to { left: 0; opacity: 1;}
}
@-webkit-keyframes fadeInLeft /*Safari and Chrome*/
{
from { left: -200px; opacity: 0;}
to { left: 0; opacity: 1;}
}
/*从左向右进入*/
.fadeInRight { animation:fadeInRight 1s infinite; -webkit-animation:fadeInRight 1s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes fadeInRight
{
from { right: -200px; opacity: 0;}
to { right: 0; opacity: 1;}
}
@-webkit-keyframes  fadeInRight /*Safari and Chrome*/
{
from { right: -200px; opacity: 0;}
to { right: 0; opacity: 1;}
}
/*从上向下落入*/
.fadeInBottom { animation:fadeInBottom 1s infinite; -webkit-animation:fadeInBottom 1s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes fadeInBottom
{
from { bottom: 200px; opacity: 0;}
to { bottom: 0; opacity: 1;}
}
@-webkit-keyframes fadeInBottom /*Safari and Chrome*/
{
from { bottom: 200px; opacity: 0;}
to { bottom: 0; opacity: 1;}
}
/*放大弹跳*/
.rubberBand { animation:rubberBand 2s infinite;-webkit-animation:rubberBand 2s infinite; animation-iteration-count:2;-webkit-animation-iteration-count:2;animation-fill-mode: forwards;}
@-webkit-keyframes rubberBand {
0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes rubberBand{
0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
.bounceInDown { animation:bounceInDown 2s infinite;-webkit-animation:bounceInDown 2s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes bounceInDown{
    0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
    0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}
    60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}
    75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}
    90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}
    to{-webkit-transform:translateZ(0);transform:translateZ(0)}
}
@-webkit-keyframes bounceInDown{
    0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
    0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}
    60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}
    75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}
    90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}
    to{-webkit-transform:translateZ(0);transform:translateZ(0)}
}



.fixed-top {background-color: rgba(0, 0, 0, 0.75);}

/*PC导航*/
.pc-nav ul {line-height: 100%;}
.pc-nav ul li {height:auto;}
.pc-nav a {color: #fff; display: block;}
.pc-nav a {color: #fff; display: block;}
.pc-nav a small {color: #e9e9e9; display: block; width: 100%; margin-top: 5px;}
.pc-nav .call { color: #fff;font-size: 1.1rem;}
.pc-nav .call i {font-size: 1.4rem; line-height: 2;}
.pc-logo { width:200px;height:48px;}
.pc-logo img {width:200px; height:48px;}
/*WAP导航*/
.wap-logo {display: block; height:100%; margin-top: 10px;}
.wap-logo img { width: 100%; height: auto; vertical-align: middle;}
.wap-nav {}
.wap-nav ul {margin-top: 12px;}
.wap-nav-button {text-align: right;}
.wap-nav-button i { color: #fff; font-size:2.2rem;}
.wap-nav ul { opacity: 0;}
.wap-nav ul li::before { margin-top:0; color: #fff;}
.wap-nav a { display: block;text-align: center; color: #fff;}
.wap-nav a small { display: block; width: 100%; margin-top: 5px;}
.show .list-group { animation:list-group 1s infinite; -webkit-animation:list-group 1s infinite; animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode: forwards;}
@keyframes list-group
{
from { opacity: 0;}
to { opacity: 1;}
}
@-webkit-keyframes list-group /*Safari and Chrome*/
{
from { opacity: 0;}
to { opacity: 1;}
}

.Server {}
.Server .fp-prev, .Server .fp-next {border:none; width: 49px; height: 99px; background-repeat: no-repeat; background-size: cover;}
.Server .fp-prev {background-image: url(../images/pic516_02L.png);}
.Server .fp-next {background-image: url(../images/pic516_02R.png);}

.Carousel-one {background-image: url(../images/indexbanerback.jpg); background-repeat: no-repeat; background-size: cover;}

.Carousel-one-img-03,.Carousel-one-img-02,.Carousel-one-img-01 { background-size:100%;background-repeat: no-repeat;}

.Carousel-one-img-03 {background-image: url(../images/bannerItm_03.png); width: 80%; max-width:1045px;  height:490px;  margin-top:25%; margin-right: auto; margin-bottom: auto; margin-left: auto; position: relative; }

.Carousel-one-img-02 {position: absolute; background-image: url(../images/bannerItm_02.png); width:30%; max-width:288px; height:77px; right: 0; top: 0;}
.Carousel-one-img-01 {position: absolute; background-image: url(../images/bannerItm_01.png); width:70%; max-width:761px; height:217px; left:15%;margin-bottom: 25%;}

.Carousel-two {background-image: url(../images/bannernew_02.jpg); background-repeat: no-repeat; background-size: cover; position: relative;}
.Carousel-two p {left:300px;}

.Carousel-three { background-color: chartreuse;}
.Carousel-four { background-color: crimson;}


.Advantage {background-image: url(../images/backImgs_1.jpg); background-repeat: no-repeat; background-size:100% 100%;}
.Advantage-bg {background-color: rgba(0, 0, 0, 0); width: 100%!important; height: 100%!important; position: relative;}
.Advantage-h { width: 32%; margin-top:15%; margin-left:34%; margin-right:34%; text-align: center; position: absolute;}
.Advantage-h button.btn-showOne,.Case-h button.btn-showTwo,.News-h button.btn-showThree {display: block; width: 150px; height: 40px; line-height: 36px; border-radius: 20px; text-align: center; margin-left: auto; margin-right: auto; border: none; position: relative;}
.Advantage-h button.btn-showOne {background-color:crimson; color: #fff; }
.Advantage-pic,.Case-pic {position: relative;}
.Advantage-h .pop-up,.Case-h .pop-up {position: relative; width: 100%;}
.Advantage-h .pop-up-float,.Case-h .pop-up-float,.News-h .pop-up-float { position: absolute; width: 100%; height: auto;position: absolute; margin-top: 30px; z-index: 1;}
.Advantage-h .pop-up-float img,.Case-h .pop-up-float img,.News-h .pop-up-float img { width: 300px; height: 300px; padding:10px; background-color: #fff; margin:0 auto; border-radius: 5px; box-shadow: rgb(0 0 0 / 20%) 0px 0px 30px;} 
.Advantage-icon { color: #fff; position: absolute;bottom:10%;}
.Advantage-icon-box {position: relative;}
.a-icon-One,.a-icon-Two,.a-icon-Three,.a-icon-Four { text-align: center; position: relative;opacity: 1;}
.a-icon-One dl,.a-icon-Two dl,.a-icon-Three dl,.a-icon-Four dl {}
.Advantage-icon-box dt {width: 168px; height: 168px;border-radius: 84px; margin: 10px auto 20px auto; background-color:rgba(255, 255, 255, 0);  transition:all .5s linear;-webkit-transition:all .5s ease-in-out 0s;-moz-transition:all .5s ease-in-out 0s; }
.a-icon-One dt {border: solid 5px #e10000; color: #e10000;}
.a-icon-Two dt {border: solid 5px #00a2ff; color: #00a2ff;}
.a-icon-Three dt {border: solid 5px #8ad902; color: #8ad902;}
.a-icon-Four dt {border: solid 5px #ffa800; color: #ffa800;}
.Advantage-icon-box dt i {font-size: 4.1rem; line-height: 2.4; font-weight: normal; transition:all .5s linear;-webkit-transition:all .5s ease-in-out 0s;-moz-transition:all .5s ease-in-out 0s; }
.Advantage-icon-box dt:hover i { color: #fff;}
.a-icon-One dt:hover {background: #e10000;}
.a-icon-Two dt:hover {background: #00a2ff;}
.a-icon-Three dt:hover {background: #8ad902;}
.a-icon-Four dt:hover {background: #ffa800;}
.Advantage-icon span { line-height: 2;}


.Case {background-image: url(../images/WEBseves6TU1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.Case-bg { background-color: rgba(0, 0, 0, 0.75); width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0;}
.Case-h { width: 50%; margin-top:15%; margin-left:25%; margin-right:25%; text-align: center; position: absolute;}
.Case-h button.btn-showTwo {background-color:crimson; color: #fff; }

.Case .Case-counter {color: #fff; margin-left: auto; margin-right: auto; position: relative; top: 50%;}
.Case .Case-counter .col_fourth h2 { font-size: 5rem; font-weight: bold; background-image: url(../images/redOpact0.5.png); height: 222px; width:222px; border-radius: 111px; line-height: 222px; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 30px;}
.Case .Case-counter .col_fourth i { font-size: 1.5rem; }
.Case .Case-counter .col_fourth p { font-size: 1rem; text-align: center;}


.News {background-image: url(../images/index_51.png);}
.News-h { width: 50%; margin-top:15%; margin-left:25%; margin-right:25%; text-align: center; position: absolute;}
.News-h button.btn-showThree {background-color:#fff; color: crimson;}
.News-list {margin-left: auto; margin-right: auto; position: relative; top: 450px;}
.News-list dl {background-color: #fff; overflow: hidden; padding:10px 10px 30px 10px; width: 100%;}
.News-list dl img {vertical-align: middle;display: block; max-width: 100%; height: auto;}

.News-list dl dt { color: #333; font-size: 1.2rem; font-weight: 500; padding-top:10px; padding-bottom: 15px;}
.News-list dl dd p {color: #9e9e9e; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-indent: 1.6rem;}
.News-list dl dd a { display: block; width: 100px; height: 26px; border-radius: 12px; background-color: #333; color: #fff; text-align: center; font-size: 0.8rem; line-height: 26px; margin-top: 30px;}
.News-list dl dd a:hover {background-color: crimson;}



.About { background-color: chartreuse;}
.Contact { background-color: crimson;}



@media (min-width:1200px) {
    .Carousel-one-img-03 {margin-top: 10%;}
    .Carousel-one-img-01 {margin-bottom: 15%;}
    
}