@charset "utf-8";
/* CSS Document */

/* banner */
.ibanner{ width:100vw; height:45.833vw; position:relative;}
.ibanner .swiper-slide{ display:block; height:100%; background:#fff center no-repeat; background-size:cover; overflow:hidden; position:relative;}
.ibanner .swiper-slide .box{ height:100%; overflow:hidden; position:relative;}
.ibanner .swiper-slide .box .bg{ height:100%; background-size:cover !important; overflow:hidden; position:relative; z-index:1;}
.ibanner .control{ height:12px; position:absolute; left:50%; bottom:5%; z-index:5; transform:translateX(-50%);}
.ibanner .swiper-pagination{ display:block; height:12px; position:static;}
.ibanner .swiper-pagination-bullet{ width:12px; height:12px; background:#fff; border-radius:6px; opacity:1; margin:0 10px !important; vertical-align:top; transition:all ease 0.4s;}
.ibanner .swiper-pagination-bullet-active{ width:40px; opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ width:32px; height:32px; background-size:auto 50% !important; top:50%; transform:translateY(-50%); margin:0;}
.ibanner .swiper-button-prev{ background:url(../images/icons/prev.png) center no-repeat; left:-36px;}
.ibanner .swiper-button-next{ background:url(../images/icons/next.png) center no-repeat; right:-36px;}

.ibox{ overflow:hidden; position:relative;}

.ibox .con{ width:83.33vw; min-width:1200px; margin:0 auto;}
.ibox .con::before,
.ibox .con::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox h2.title{ display:block; line-height:2.05; color:#333; font-size:42px; text-align:center; padding:1em 0 0;}
.ibox h2.title em{ display:block; line-height:2.05; padding:0.75em 0 0; position:relative; z-index:3;}
.ibox h2.title span{ display:block; line-height:1.26; font-size:2.14em; text-transform:uppercase; position:relative; z-index:2; opacity:0.09; margin:-1.26em 0 0;}
.ibox h2.title::after{ content:''; display:block; width:1.5em; height:4px; background:#01a0ea; margin:0 auto;}

.box1 .video{ width:50%; height:42.75vw; overflow:hidden; position:relative; float:left;}
.box1 .video video{ display:block; width:100%; height:100%; background:#000;}
.box1 .video .poster{ width:100%; height:100%; background:#000; position:absolute; left:0; top:0; z-index:9;}
.box1 .video .poster em{ display:block; width:138px; height:138px; position:absolute; left:50%; top:58%; z-index:9; transform:translate(-50%,-50%); cursor:pointer;}
.box1 .video .poster em::before{ content:''; display:block; width:200%; height:180%; background:url(../images/icons/video_logo.png) center top no-repeat; position:absolute; left:-50%; bottom:100%;}
.box1 .video .poster em i{ display:block; width:100%; height:100%; background:url(../images/icons/video.png) center no-repeat; background-size:contain; border-radius:50%; position:relative; z-index:9; cursor:pointer; margin:0;}
.box1 .video .poster em i::after{ content:''; display:block; width:100%; height:100%; background:url(../images/icons/video_mark.png) center no-repeat; background-size:contain; position:absolute; left:0; top:0; animation:Rotate linear 4s infinite;}
@keyframes Rotate{
	0%{ transform:rotate(0deg);}
	100%{ transform:rotate(360deg);}
}

.box1 .video .poster img{ display:block; width:100%; height:100%; object-fit:cover; opacity:0.9;}
.box1 ul.ab{ display:block; font-size:16px; overflow:hidden;}
.box1 ul.ab li{ display:block; width:50%; float:left; transition:all ease 0.4s;}
.box1 ul.ab li a{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:14.25vw; text-align:center; overflow:hidden; background:#fff;}
.box1 ul.ab li:nth-child(2) a,
.box1 ul.ab li:nth-child(3) a,
.box1 ul.ab li:nth-child(6) a{ background:#f4f7f9;}
.box1 ul.ab li a img{ display:block; height:3.75em; margin:0 auto 2em; transition:all ease 0.4s;}
.box1 ul.ab li a em{ display:block; line-height:1; color:#333; font-size:1.375em; transition:all ease 0.4s;}
.box1 ul.ab li a span{ display:block; line-height:2.375; color:#999;}
.box1 ul.ab li a:hover img{ transform:rotateY(180deg);}
.box1 ul.ab li a:hover em{ color:#01a0ea;}

.box2{ padding:0 0 80px;}
.box2 ul{ display:block; font-size:16px; overflow:hidden; margin:48px 0 0;}
/*.box2 ul li{ display:block; width:25%; height:12.8vw; float:left; transition:all ease 0.4s;}
.box2 ul li:nth-child(2){ width:50%;}
.box2 ul li:nth-child(5){ width:50%;}
.box2 ul li:nth-child(3){ height:25.6vw; float:right;}
.box2 ul li:nth-child(4){ height:25.6vw;}
.box2 ul li a{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; height:100%; overflow:hidden; padding:1.25em 2em; background:linear-gradient(#f7f7f7, #e2e3e3); box-sizing:border-box; border:1px solid #fff; border-width:0 1px 1px 0; position:relative;}
.box2 ul li a img{ display:block; height:100%; position:absolute; right:0; bottom:0; z-index:1;}
.box2 ul li:nth-child(3) img,
.box2 ul li:nth-child(4) img{ width:100%; height:auto;}*/
.box2 ul li{ display:block; width:33.3%; height:12.8vw; float:left; transition:all ease 0.4s;}
.box2 ul li:nth-child(3){ float:right;}
.box2 ul li a{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; height:100%; overflow:hidden; padding:1.25em 2em; background:linear-gradient(#f7f7f7, #e2e3e3); box-sizing:border-box; border:1px solid #fff; border-width:0 1px 1px 0; position:relative;}
.box2 ul li a img{ display:block; height:100%; position:absolute; right:0; bottom:0; z-index:1;}
.box2 ul li a em{ display:block; line-height:2.46; color:#333; font-size:1.625em; transition:all ease 0.4s;}
.box2 ul li a i{ display:block; width:2.5em; height:3px; background:#01a0ea;}
.box2 ul li a span{ display:block; line-height:2.8; color:#999; font-size:0.9375em;}
.box2 ul li a:hover em{ color:#01a0ea;}

.box3{ background:#f4f7f9;}
.box3 ul{ display:flex; width:100%; font-size:16px; margin:48px 0 0;}
.box3 ul li{ display:block; width:16.66%; overflow:hidden; position:relative; transition:all ease 0.4s;}
.box3 ul li a{ display:block; height:36vw; background:#000; overflow:hidden; position:relative;}
.box3 ul li .bg{ display:block; width:100%; height:100%; background-size:cover !important; transition:all ease 0.4s; opacity:0.8;}
.box3 ul li p{ display:flex; justify-content:center; align-items:center; width:2.625em; height:12.5em; color:#fff; background:#01a0ea; position:absolute; left:0; top:0; transition:all ease 0.4s;}
.box3 ul li p em{ display:block; width:1em; line-height:1.125;}
.box3 ul li p em::after{ content:'解决方案';}
.box3 ul.on li{ width:13.2%;}
.box3 ul li.on{ width:34%;}
.box3 ul li.on .bg{ opacity:1;}
.box3 ul li.on p{ background:#ffcc00;}

.box4{ padding:0 0 80px;}
.box4 .news{ width:100vw; font-size:16px; position:relative; margin:48px 0;}
.box4 .news .swiper-container{ overflow:hidden;}
.box4 .news .swiper-slide{ position:relative; pointer-events:auto; overflow:hidden;}
.box4 .news .swiper-slide::before,
.box4 .news .swiper-slide::after{ content:''; display:block; width:100%; height:0; overflow:hidden; clear:both;}
.box4 .news .swiper-slide a.pic{ display:block; overflow:hidden;}
.box4 .news .swiper-slide a.pic img{ display:block; width:100%; transition:all ease 0.4s;}
.box4 .news .swiper-slide a.title{ display:block; height:3.32em; line-height:1.66; color:#333; font-size:1.125em; margin:1.25em 0 0;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.box4 .news .swiper-slide a.title:hover{ color:#01a0ea;}
.box4 .news .swiper-slide .txt{ display:block; height:3.6em; line-height:1.8; color:#999; font-size:0.9375em; margin:1em 0 0;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.box4 .news .swiper-slide span{ display:block; line-height:4; color:#01a0ea; font-size:0.9375em; overflow:hidden;}
.box4 .controls{ font-size:16px; overflow:hidden; padding:3em 0 0; border-top:1px solid #ddd;}
.box4 .controls .swiper-button-prev,
.box4 .controls .swiper-button-next{ position:static; width:3.125em; height:3.125em; float:left; margin:0 16px 0 0;}
.box4 .controls .swiper-button-prev{ background:#01a0ea url(../images/icons/prev.png) center no-repeat;}
.box4 .controls .swiper-button-next{ background:#01a0ea url(../images/icons/next.png) center no-repeat;}
.box4 .controls a.more{ display:block; line-height:3.125; color:#01a0ea; float:right;}
.box4 .controls a.more:hover{ text-decoration:underline;}

@media only screen and (max-width:1440px){
.ibox .con{ width:1200px;}

.box2 ul li{ height:200px;}
/*.box2 ul li:nth-child(3),
.box2 ul li:nth-child(4){ height:400px;}*/
.box2 ul li a{ padding:0.75em 1.5em;}
.box2 ul li a img{ height:75%;}
}

@media only screen and (max-width:768px){
.ibanner{ height:52vw;}
.ibanner .control{ height:8px; bottom:12px;}
.ibanner .swiper-pagination{ height:8px;}
.ibanner .swiper-pagination-bullet{ width:8px; height:8px; margin:0 6px !important;}
.ibanner .swiper-pagination-bullet-active{ width:20px;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none;}

.ibox .con{ width:calc(100% - 24px); min-width:0;}
.ibox h2.title{ font-size:24px;}

.box1 .video{ width:100%; height:80vw; float:none;}
.box1 .video .poster em{ top:50%;}
.box1 .video .poster em::before{ display:none;}
.box1 .video .poster em i{ transform:scale(0.75);}

.box1 ul.ab{ font-size:12px;}
.box1 ul.ab li a{ display:block; height:auto; padding:1.25em 0;}
.box1 ul.ab li a img{ height:3.5em; margin-bottom:1.5em;}

.box2{ padding:0 0 48px;}
.box2 ul{ font-size:12px; margin:30px 0 0;}
.box2 ul li{ width:50% !important; height:200px !important; float:left !important;}
.box2 ul li a em{ font-size:1.5em;}
.box2 ul li a img{ max-width:90%; max-height:60%;}

.box3 ul{ display:block; font-size:13px; margin:30px 0 0;}
.box3 ul li{ width:50% !important; float:left;}
.box3 ul li a{ height:216px;}

.box4{ padding:0 0 48px;}
.box4 .news{ width:auto; margin:30px 0 6px; font-size:14px;}
.box4 .controls{ font-size:14px; padding:2em 0 0;}
.box4 .controls .swiper-button-prev,
.box4 .controls .swiper-button-next{ width:2.75em; height:2.75em; background-size:auto 40% !important;}
.box4 .controls a.more{ line-height:2.75;}









}

























/**/