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

/* banner */
.ibanner{ width:100vw; height:880px; 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 .swiper-pagination{ display:block; height:12px; bottom:180px;}
.ibanner .swiper-pagination-bullet{ width:12px; height:12px; background:#fff; border-radius:50%; opacity:1; margin:0 12px !important; vertical-align:top; transition:all ease 0.4s;}
.ibanner .swiper-pagination-bullet-active{ background:#ffae12; opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none;}

.data{ color:#fff; font-size:16px; background:rgba(0,0,0,0.5); margin:-9.375em 0 0;}
.data ul{ display:block; width:1400px; overflow:hidden; margin:0 auto;}
.data ul li{ display:block; width:25%; text-align:center; padding:2em 0; float:left; position:relative;}
.data ul li::after{ content:''; display:block; width:1px; height:66px; background:rgba(255,255,255,0.1); position:absolute; left:0; top:50%; transform:translateY(-50%);}
.data ul li:first-child::after{ display:none;}
.data ul li em{ display:block; line-height:1; overflow:hidden;}
.data ul li b{ line-height:1.34; font-size:2.75em; margin-right:0.18em; vertical-align:top;}
.data ul li span{ display:block; line-height:1; opacity:0.5; padding:0.75em 0 0; font-weight:bold;}

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

.ibox .con{ width:1400px; margin:0 auto;}
.ibox .con::before,
.ibox .con::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox h2.title{ display:block; line-height:4.5; color:#106c9d; font-size:40px; font-weight:normal; text-align:center; overflow:hidden;}
.ibox a.more{ display:block; width:9.75em; line-height:3; color:#fff; font-size:16px; text-align:center; background:#ffae12; border-radius:1.5em; overflow:hidden; margin:0 auto; clear:both; transition:all ease 0.4s;}
.ibox a.more:hover{ background:#106c9d;}

.box1{ background:url(../images/icons/bg1.png) center no-repeat; background-size:cover; padding:80px 0 0;}
.box1 h2.title{ line-height:1.85; text-align:left;}
.box1 i{ display:block; width:62px; height:4px; background:#106c9d; overflow:hidden; margin:16px 0 0;}
.box1 .video{ width:684px; height:430px; overflow:hidden; position:relative; float:right; margin:-94px 0 0 80px;}
.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:58px; height:58px; position:absolute; left:50%; top:50%; z-index:9; transform:translate(-50%,-50%); cursor:pointer;}
.box1 .video .poster em::before,
.box1 .video .poster em::after{ content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,0.21); border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:playBtn 2s linear infinite; opacity:0;}
.box1 .video .poster em::after{ animation-delay:1s;}
.box1 .video .poster em i{ display:block; width:100%; height:100%; background:#fff url(../images/icons/video.png) center no-repeat; background-size:contain; border-radius:50%; position:relative; z-index:9; cursor:pointer; margin:0;}
@keyframes playBtn{
	0%{ opacity:0; transform:scale(1);}
	20%{ opacity:1;}
	80%{ opacity:1;}
	100%{ opacity:0; transform:scale(2.2);}
}
.box1 .video .poster img{ display:block; width:100%; height:100%; /*opacity:0.5;*/}
.box1 .txt{ height:13.4em; line-height:2.23; color:#333; font-size:17px; overflow:hidden; margin:2em 0;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:6;
}
.box1 a.more{ margin:0; clear:none;}
.box1 ul.ab{ display:block; font-size:16px; padding:80px 0 100px; margin:0 1.6%; clear:both;}
.box1 ul.ab::before,
.box1 ul.ab::after{ content:''; display:block; overflow:hidden; clear:both;}
.box1 ul.ab li{ display:block; width:25%; float:left; transition:all ease 0.4s;}
.box1 ul.ab li a{ display:block; line-height:1; color:#106c9d; text-align:center; overflow:hidden; background:#fff; padding:1.125em 0 1.5em; border-radius:14px; box-shadow:0 0 16px rgba(196,199,216,0.3); transition:all ease 0.4s; margin:0 43px;}
.box1 ul.ab li a img{ display:block; height:3em; margin:0 auto 1em; transition:all ease 0.4s;}
.box1 ul.ab li:hover a{ color:#fff; background:#909395;}
.box1 ul.ab li:hover a img{ filter:brightness(0) invert(1);}

.box2{ background:url(../images/icons/bg2.jpg) center no-repeat; background-size:cover; padding:0 0 110px;}
.box2 h2.title{ color:#fff; text-align:left;}
.box2 .product{ font-size:16px; overflow:visible; margin:0 5%;}
.box2 .product>.swiper-pagination{ width:1400px; text-align:right; left:auto; right:50%; bottom:100%; margin-bottom:4.4em; transform:translateX(50%);}
.box2 .product>.swiper-pagination span.swiper-pagination-bullet{ width:12.875em; height:auto; line-height:2.125; color:#fff; text-align:center; background:none; border:1px solid rgba(255,255,255,0.6); border-radius:1.125em; opacity:1; margin:0 0 0 1.7em; position:relative;}
.box2 .product>.swiper-pagination span.swiper-pagination-bullet-active{ background:#ffae12; border-color:#ffae12;}
.box2 .inner{ visibility:hidden; position:relative; padding:0 0 42px;}
.box2 .inner.swiper-slide-active{ visibility:visible;}
.box2 .inner .swiper-slide{ overflow:hidden; position:relative; cursor:pointer; pointer-events:auto;}
.box2 .inner .swiper-slide a{ display:block; overflow:hidden; position:relative;}
.box2 .inner .swiper-slide a img{ display:block; width:100%; transition:all ease 0.4s;}
.box2 .inner .swiper-slide a span{ display:block; width:100%; box-sizing:border-box; line-height:3; color:#fff; font-size:1.125em; text-align:center; padding:0 0.5em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:rgba(0,0,0,0.5); transition:all ease 0.4s; position:absolute; left:0; bottom:0;}
.box2 .inner .swiper-slide a:hover img{ transform:scale(1.08);}
.box2 .inner .swiper-slide a:hover span{ background:rgba(16,108,157,0.9);}
.box2 .inner .swiper-button-prev,
.box2 .inner .swiper-button-next{ width:52px; height:52px; margin-top:0; top:100%;}
.box2 .inner .swiper-button-prev{ background:url(../images/icons/prev.png) center no-repeat; left:50%; transform:translateX(-100%);}
.box2 .inner .swiper-button-next{ background:url(../images/icons/next.png) center no-repeat; right:50%; transform:translateX(100%);}

.box3{ padding:0 0 90px;}
.box3 h2.title{ text-align:left; float:left;}
.box3 p.tab{ display:block; font-size:16px; overflow:hidden; float:right; padding:4.5em 0;}
.box3 p.tab a{ display:block; width:9.675em; line-height:2.125; color:#666; text-align:center; background:none; border:1px solid #999; border-radius:1.125em; float:left; margin:0 0 0 1.7em; cursor:pointer;}
.box3 p.tab a.cur{ color:#fff; background:#ffae12; border-color:#ffae12;}
.box3 dl{ display:none; font-size:16px; padding:0 0 34px; clear:both;}
.box3 dl::before,
.box3 dl::after{ content:''; display:block; width:100%; height:0; overflow:hidden; clear:both;}
.box3 dl dt{ display:block; width:650px; box-sizing:border-box; padding:0 40px 34px; background:#fff; overflow:hidden; float:left; margin:0 48px 0 0; position:relative; box-shadow:0 0 16px rgba(184,184,184,0.3);}
.box3 dl dd{ display:block; background:#fff; padding:34px 24px; border:1px solid #fff; overflow:hidden; box-shadow:0 0 16px rgba(184,184,184,0.3); margin:0 0 32px; transition:all ease 0.4s;}
.box3 dl a.pic{ display:block; overflow:hidden; margin:0 -40px; position:relative;}
.box3 dl a.pic img{ display:block; width:100%; height:470px;}
.box3 dl a.title{ display:block; line-height:1.88; color:#333; font-size:1.125em; margin:0 0 0.22em; transition:all ease 0.4s;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
}
.box3 dl span{ display:block; width:66px; height:66px; line-height:22px; color:#fff; font-size:13px; text-align:center; background:#bbbbbb; overflow:hidden; float:left; margin:0 26px 0 0; transition:all ease 0.4s;}
.box3 dl span em{ display:block; line-height:32px; font-size:28px; font-weight:bold; padding:8px 0 0;}
.box3 dl .txt{ line-height:1.75; color:#999;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
}
.box3 dl a.view{ display:block; width:58px; height:66px; background:url(../images/icons/more.png) right center no-repeat; border-left:1px solid #ddd; float:right; margin-left:26px; transition:all ease 0.4s;}

.box3 dl dt a.title{ height:auto; -webkit-line-clamp:1; color:#333; font-size:1.25em; line-height:3.2; margin:0.8em 0 0;}
.box3 dl dt a.title:hover{ color:#106c9d;}
.box3 dl dt span{ background:#106c9d; position:absolute; left:0; top:0; margin:20px;}
.box3 dl dt .txt{ height:3.5em; -webkit-line-clamp:2;}
.box3 dl dd:hover{ border-color:#106c9d;}
.box3 dl dd:hover a.title{ color:#106c9d;}
.box3 dl dd:hover span{ background:#106c9d;}
.box3 dl dd:hover a.view{ background-image:url(../images/icons/more_h.png);}

.box4{ background:url(../images/icons/bg4.jpg) center no-repeat; background-size:cover; padding:0 0 80px;}
.box4 .fengcai{ position:relative; margin:0 0 50px;}
.box4 .fengcai .swiper-container{ overflow:hidden;}
.box4 .fengcai .swiper-slide{ font-size:14px; position:relative; cursor:pointer; pointer-events:auto; z-index:3; opacity:0; overflow:visible; visibility:hidden;}
.box4 .fengcai .swiper-slide::before,
.box4 .fengcai .swiper-slide::after{ content:''; display:block; width:100%; height:0; overflow:hidden; clear:both;}
.box4 .fengcai .swiper-slide a{ display:block; margin:49% 0; background:#fff; transition:transform ease 0.4s; transform:scale(1.033);}
.box4 .fengcai .swiper-slide a img{ display:block; width:100%; opacity:0.5; transition:all ease 0.4s;}
.box4 .fengcai .swiper-slide-active,
.box4 .fengcai .swiper-slide-prev,
.box4 .fengcai .swiper-slide-prev-prev,
.box4 .fengcai .swiper-slide-next,
.box4 .fengcai .swiper-slide-next-next{ opacity:1; visibility:visible;}
.box4 .fengcai .swiper-slide-active{ z-index:9;}
.box4 .fengcai .swiper-slide-active a{ transform:scale(2.3);}
.box4 .fengcai .swiper-slide-active a img{ opacity:1;}
.box4 .fengcai .swiper-slide-prev{ z-index:5;}
.box4 .fengcai .swiper-slide-prev a{ transform:scale(1.52) translateX(-7%);}
.box4 .fengcai .swiper-slide-next{ z-index:5;}
.box4 .fengcai .swiper-slide-next a{ transform:scale(1.52) translateX(7%);}
.box4 .fengcai .swiper-slide-prev-prev a img{ transform-origin:left center;}
.box4 .fengcai .swiper-slide-next-next a img{ transform-origin:right center;}
.box4 .fengcai .swiper-button-prev,
.box4 .fengcai .swiper-button-next{ width:27%; height:100%; background:none; top:0; margin-top:0;}
.box4 .fengcai .swiper-button-prev{ left:0;}
.box4 .fengcai .swiper-button-next{ right:0;}

@media only screen and (max-width:1440px){
.ibanner{ height:754px;}

.data ul,
.ibox .con{ width:1200px;}

.box2 .product{ margin:0 40px;}
.box2 .product>.swiper-pagination{ width:1200px;}
.box2 .product>.swiper-pagination span.swiper-pagination-bullet{ width:11em;}
}

@media only screen and (max-width:768px){
.ibanner{ height:60vw; margin-top:56px;}
.ibanner .swiper-pagination{ bottom:12px; height:10px;}
.ibanner .swiper-pagination-bullet{ width:10px; height:10px; margin:0 6px !important;}

.data{ margin:0; font-size:12px; padding:1.5em 0; background:#106c9d;}
.data ul{ width:auto; margin:0 12px;}
.data ul li{ width:50%; padding:0.5em 0;}
.data ul li::after{ display:none;}
.data ul li b{ font-size:2em;}
.data ul li span{ margin:0 1em; line-height:1.5; height:3em;}

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

.box1{ padding:30px 0 0;}
.box1 h2.title{ text-align:center;}
.box1 i{ margin-left:auto; margin-right:auto;}
.box1 .video{ width:100%; height:auto; float:none; margin:20px 0 0;}
.box1 .video .poster em{ width:42px; height:42px;}
.box1 .txt{ font-size:14px; -webkit-line-clamp:99; height:auto; margin:1em 0;}
.box1 a.more{ margin:2em auto;}
.box1 ul.ab{ font-size:14px; margin:0; padding:0 0 30px;}
.box1 ul.ab li{ width:50%;}
.box1 ul.ab li a{ margin:5px; padding:1em 0 1em; border-radius:8px;}
.box1 ul.ab li a img{ height:2.25em; margin:0 auto 0.75em;}

.box2{ padding:0 0 70px;}
.box2 h2.title{ text-align:center;}
.box2 .product{ font-size:14px; margin:0 12px;}
.box2 .product>.swiper-pagination{ position:static; transform:none; width:auto; overflow:hidden; margin:-0.75em 0 1em;}
.box2 .product>.swiper-pagination span.swiper-pagination-bullet{ display:block; width:48%; margin:0 1% 2%; float:left; box-sizing:border-box;}
.box2 .inner{ padding:0 0 12px;}
.box2 .inner .swiper-slide a span{ font-size:1em;}
.box2 .inner .swiper-button-prev{ transform:translateX(-100%) scale(0.8);}
.box2 .inner .swiper-button-next{ transform:translateX(100%) scale(0.8);}

.box3{ padding:0 0 40px;}
.box3 h2.title{ text-align:center; float:none;}
.box3 p.tab{ font-size:14px; float:none; padding:0 0 1.5em; margin:-0.75em 0 0;}
.box3 p.tab a{ width:29%; margin:0 1%;}
.box3 dl{ font-size:14px;}
.box3 dl dd{ margin:12px 0 0; padding:12px;}
.box3 dl span{ transform:scale(0.9); transform-origin:left center; margin:0 10px 0 0;}
.box3 dl a.title{ font-size:16px; line-height:2; margin:0.2em 0 0;}
.box3 dl a.view{ display:none;}
.box3 dl dt{ width:auto; float:none; padding:0 16px 16px; margin:0;}
.box3 dl a.pic{ margin:0 -16px;}
.box3 dl a.pic img{ height:auto;}
.box3 dl dt a.title{ font-size:16px; line-height:2.5;}
.box3 dl dt span{ margin:10px;}

.box4{ padding:0 0 40px;}
.box4 .fengcai{ margin:-10px 0 40px;}
.box4 .fengcai .swiper-slide{}
.box4 .fengcai .swiper-slide a{ transform:none !important; margin:0;}
.box4 .fengcai .swiper-button-prev,
.box4 .fengcai .swiper-button-next{ width:32px; height:60px; top:50%; margin-top:-30px;}
.box4 .fengcai .swiper-button-prev{ background:rgba(0,0,0,0.5) url(../images/icons/prev.png) center no-repeat;}
.box4 .fengcai .swiper-button-next{ background:rgba(0,0,0,0.5) url(../images/icons/next.png) center no-repeat;}
}

























/**/