@charset "utf-8";
/* CSS Document */
* {margin:0;padding:0; list-style:none;}
body {font-family:"Microsoft Yahei","微软雅黑"  sans-serif;font-size:12px;color:#333;word-break:break-all;}
a {text-decoration:none;}
a:hover {color:#1b509e;}
ul,li {list-style:none;}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
.hidden{display:none;}
img {border:none; max-width:100%; height:auto;}
.clear {height:1px;clear:both;margin-bottom:-1px;overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
.mt10 {margin-top: 10px;}

.w1200{ width:1200px; margin:0 auto;}

/*头部*/
.head{width:100%; position:fixed; z-index:99999; height:100px; margin-top: 20px;
   /* background:url(../images/logobj.png) no-repeat center center;*/
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;}
.head .logo{ width:235px;height:81px; margin-left:30px;}
.head .tel{margin-top:27px;}

.nav{ height:81px;}
.nav ul{}
.nav ul li{ width:257px; text-align:center; margin:0 5px; line-height:55px; font-size:15px; float:left;}
.nav ul li a{ color:#fff; /*display:block;*//*-webkit-transition: all .28s ease-in .1s;transition: all .28s ease-in .1s;*/}
/*.nav ul li a:hover{ background:url(../images/navhover.png) no-repeat center; color:#ff831d;}*/
/*.nav ul li.active a{background:url(../images/navhover.png) no-repeat center; color:#ff831d;}*/

.sms-container { background:url(../images/bg1.png) no-repeat center; height:908px; width: 100%;}
.meteor {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 4;
}

.meteor .m {
    position: relative;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 100px;
    left: 400px;
    transform-origin: 100% 0;
    animation: star-ani 2s infinite ease-out;
    box-shadow: 0 0 2px 2px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}

.meteor .m:after {
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    border: 0px solid #fff;
    border-width: 0px 200px 3px 200px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}

.meteor .m-1 {
    left: 74%;
    top: 10%;
    background: #FFF;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
}

.meteor .m-1:after {
    border-color: transparent transparent transparent #FFF;
    animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
}

.meteor .m-2 {
    left: 75%;
    top: 40%;
    background: #FFF;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

.meteor .m-2:after {
    -webkit-animation-delay: 2.2s;
    -moz-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

.meteor .m-3 {
    left: 30%;
    top: 40%;
    background: #FFF;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
}

.meteor .m-3:after {
    border-color: transparent transparent transparent #FFF;
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s;
    -moz-animation-delay: 3.2s;
}
@keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg) translate3d(0, 0, 0);
        -webkit-transform: scale(0) rotate(0deg) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(0) rotate(0deg) translate3d(-200px, 200px, 0);
        -webkit-transform: scale(0) rotate(0deg) translate3d(-200px, 200px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(2) rotate(0deg) translate3d(-400px, 400px, 0);
        -webkit-transform: scale(2) rotate(0deg) translate3d(-400px, 400px, 0);
    }
}


.swiper-slide-img-animation{
    animation: zoomOut 0.33s 0.9s forwards;
    -webkit-animation: zoomOut 0.33s 0.9s forwards;}
@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale3d(1.5, 1.5, 1.5);
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale3d(1.5, 1.5, 1.5);
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}

.slide-btnbox{ width:350px; margin:0px auto;display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;}
.slide-btn{border:1px solid #ff8018; border-radius:4px; color:#ff8018;font-size:21px;line-height:54px; width:162px; text-align:center;}

.canvas{ background:#0c0e16; position:relative;}
.canvas .img1{ position:absolute; top:202px; width:90%; left:5%;}
.canvas .img1 img{ max-width:100%; height:auto;}
.canvas-box{position:absolute; top:60px;width:70%; text-align:center; left:15%;}
.canvas-box .title-txt{ font-size:18px; color:#e7e7e7; line-height:42px; margin-top:60px;}
.canvas-main{ margin-top:120px; margin-bottom:190px;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;}
.canvas-main>div{ width:254px; height:254px; border:2px solid #d76d18; /*border-radius:50%;*/ text-align:center; font-size:12px; color:#5a5a5a; cursor:pointer;-webkit-transition: all .28s ease-in .1s;transition: all .28s ease-in .1s;}
.canvas-main>div .en{ font-size:42px; color:#fff; text-transform:uppercase; margin-top:52px;}
.canvas-main>div .ch{ font-size:18px; color:#c5c5c5; text-transform:uppercase; margin:30px 0;}
.canvas-main>div img{ margin:0 auto 20px auto;}
.canvas-main>div:hover{ background:rgba(255,128,24,.5);color:#fff;}

.ind-solution{ width:100%; height:825px; background:url(../images/bg2.png) no-repeat center; padding-top:80px;}
.title-solution{text-align:center;}
.title-solution-img{
	margin:auto;
	animation: zoomIn4 0.25s 0.2s both;
    -webkit-animation: zoomIn4 0.25s 0.2s both;}
.solution-main{ width:1400px; height:558px; position:relative; margin:88px auto;}	
#CSSBox{float:left;background:url(../images/img3.png) no-repeat top right;width:1400px; height:442px; }
#CSSBox ul{}
#CSSBox ul li{ float:left;width:1400px; position:relative;}
#CSSBox ul li .solut-txt{width:584px; color:#fff; float:left;}
#CSSBox ul li .solut-txt h2{ font-size:36px;}
#CSSBox ul li .solut-txt .line{ height:2px; display:block; width:40px; background:#ff8018; margin:30px 0;}
#CSSBox ul li .solut-txt p{ font-size:24px; line-height:42px; margin-bottom:20px;}
#CSSBox ul li .solut-txt small{font-size:14px; color:#9b9b9b;line-height:24px; }
#CSSBox ul li .solut-img{width:660px; height:403px;float:right;overflow:hidden;padding-top:37px; padding-left:96px;}
#CSSBox ul li .solut-img img{width:575px; height:359px;}
#LeftButton,#RightButton{ position: absolute; bottom:114px;width:54px; height:54px;cursor:pointer; z-index:999;}
#LeftButton{background:url(../images/btn-left.png);left:0;}
#RightButton{background:url(../images/btn-right.png);left:69px;}

.btn-details{ width:252px;height:57px; line-height:57px; border:1px solid #ff8018; position:absolute; bottom:-113px; right:250px;color:#ff8018; font-size:21px; border-radius:50px; font-family:"Microsoft YaHei","微软雅黑" , sans-serif; text-transform:uppercase; text-align:center; display:block;}

.ind-case{ background:#121214 url(../images/casebg.png) no-repeat center 854px; height:1080px; width:100%; overflow:hidden; position:relative;}
 @keyframes rotate {
	  0% {
	    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
	  }
	  100% {
	    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
	  }
	}
	.stars {
	  transform: perspective(500px);
	  transform-style: preserve-3d;
	  position: absolute;
	  bottom: 0;
	  perspective-origin: 50% 100%;
	  left: 50%;
	  animation: rotate 90s infinite linear;
	}

	.star {
	  width: 2px;
	  height: 2px;
	  background: #fff;
	  position: absolute;
	  top: 0;
	  left: 0;
	  transform-origin: 0 0 -300px;
	  transform: translate3d(0, 0, -300px);
	  backface-visibility: hidden;
	}

.ind-case-content{ position:absolute; top:103px; left:50%; margin-left:-700px; width:1400px; height:720px; background:url(../images/casembg.png) no-repeat center; z-index:9;}


.mod18{ width:1400px; height:650px;margin: 0px auto; position: relative;}
.mod18 .btn{position:absolute;width:60px;height:18px;bottom:40px;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:552px;background:url(../images/btn-lf.png) no-repeat;}
.mod18 #prevTop,.mod18 #nextTop{bottom:40px;width:60px;height:18px;}
.mod18 .next{left:634px;background:url(../images/btn-rg.png) no-repeat;}
.mod18 li{float:left;}


.mod18 .picBox{width:660px; height:650px;position: absolute; left:738px; top:0;overflow:hidden;}
.mod18 .picBox ul{width:660px; height:650px;position:absolute;}
.mod18 .picBox li{width:660px; height:650px;position:relative;}
.mod18 .picBox li img{width:616px; height:513px;}

.mod18 .listBox{ width: 644px; height:489px;top:80px; left:50px; position:absolute;overflow: hidden;}
.mod18 .listBox ul{/*height:489px;*/}
.mod18 .listBox li{width:310px;height:231px;cursor:pointer;position:relative; margin-right:24px; margin-bottom:24px;}
.mod18 .listBox li:nth-child(2n){margin-right:0;}
.mod18 .listBox li img{width:310px;height:231px;}
.mod18 .listBox .on img{width:304px;height:226px;border:3px solid #ff6600;}
/*.mod18 .listBox .on i{display:block;}*/

.more-read2{ position:absolute; left:48px; bottom:30px;}
.larimg-bot{ width:550px;color:#fff;position:absolute; bottom:10px; right:0px;}
.larimg-bot h2{ font-size:30px;}
.larimg-bot p{ font-size:16px; line-height:28px; margin-top:10px;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;}
.larimg-bot .more{ position:absolute; top:10px; right:0;}
.larimg-bot .more img{width:133px; height:24px;}

.ind-sum5{ width:100%; height:896px; background:url(../images/bg3.png) no-repeat center top; padding-top:50px;}
.ind-sum5-main{ width:1450px; margin:0 auto; overflow:hidden;}
.ind-sum5-block{ width:438px; float:left; margin:0 20px; background:#212121;border:1px solid transparent;}
.ind-sum5-block .img{ width:438px; height:300px; overflow:hidden;}
.ind-sum5-block .img img{width:438px; height:300px;transition: all 1s;  }
.ind-sum5-block .txt{padding:15px;color:#dfdfdf; text-align:center;}
.ind-sum5-block .txt h2{ font-size:24px;}
.ind-sum5-block .txt .time{ display:block; font-size:18px; color:#ff8018; margin:10px 0;}
.ind-sum5-block .txt p{ font-size:16px; line-height:32px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}
.ind-sum5-block .txt .more-read{ width:255px; line-height:56px; border:1px solid #dfdfdf; border-radius:50px; display:block; margin:30px auto; font-size:21px;color:#dfdfdf; text-transform:uppercase; 
font-family:"Microsoft YaHei","微软雅黑", sans-serif;}
.ind-sum5-block:hover{ border:1px solid #ff8018;}
.ind-sum5-block:hover .img img{transform: scale(1.2);}
.ind-sum5-block:hover .txt .more-read{ border-color:#ff8018; color:#ff8018;}
.ind-sum5-more{  text-align:center; margin-top:55px; display:block;}
/*主体*/


/*底部*/
.footbox{ height:903px;width:100%; background:url(../images/bg4.png) no-repeat center bottom;padding-top:170px;}
.footbox-content{ position:absolute; width:1400px;left:50%; margin-left:-700px; background:transparent; height:auto; z-index:9;}
.foot-con{width:1300px;margin:0 auto;overflow: hidden; position: relative; padding:0 50px;}
#CSSBox2{float:left;}
#CSSBox2 ul{}
#CSSBox2 ul li{ float:left;margin-right:90px; width:134px;}
#CSSBox2 ul li img{width:134px; height:72px;}
#LeftButton2,#RightButton2{ position: absolute; top:22px;width:17px; height:30px;cursor:pointer; z-index:999;}
#LeftButton2{background:url(../images/btn-l.png);left:0;}
#RightButton2{background:url(../images/btn-r.png);right:0;}

.foor-top{ width:100%;padding:43px 0;}
.foot-top-main{ margin:70px auto; width:1400px;}
.foot-top-main .title{ text-align:center;}
.foot-top-main .box{ margin-top:70px; overflow:hidden;}
.foot-top-main .blo{ font-size:16px; color:#d3d3d3; width:275px; line-height:30px; float:left;}
.foot-top-main .blo h2{ font-size:28px; margin-bottom:15px;color:#fff;}

.foot-mid{width:1400px; border-top:1px solid #414243; padding:35px 0; margin:auto; overflow:hidden;}
.foot_txt{ width:550px; margin-top:20px;}
.foot_txt p{ color:#9d9d9d; font-size:18px; line-height:42px;}
.foot_ewm{ width:118px;text-align:center; color:#dadada; font-size:18px; line-height:32px; float:right;}

.foot-bot{width:1400px; padding:50px 0 0 0; margin:auto;}
.foot-bot .link{border-bottom:1px solid #414243;line-height:32px;font-size:16px;color:#e7e7e7; text-align:center; padding:20px 0;}
.foot-bot .link a{ padding:0 20px; color:#cacaca;}
.foot-bot .p{ text-align:center; line-height:60px; color:#6c6c6c; font-size:16px; font-family:"Microsoft YaHei","微软雅黑", sans-serif;}


/*动画*/
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
        -webkit-transform: scale3d(.3, .3, .3);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
        -webkit-transform: scale3d(.3, .3, .3);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
}