@charset "utf-8";
/* CSS Document */

.ibanner{ width:100vw; height:100vh; height:75vh; 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; transition:1s linear 2s; transform:scale(1.1,1.1);}
.ibanner .swiper-slide-active .box .bg,
.ibanner .swiper-slide-duplicate-active .box .bg{ transition:6s linear; transform:scale(1,1);}
.ibanner .swiper-pagination{ height:12px; bottom:3.5%;}
.ibanner .swiper-pagination-bullet{ width:12px; height:12px; background:#fff; border-radius:6px; opacity:1; margin:0 12px !important; vertical-align:top; transition:all ease 0.4s;}
.ibanner .swiper-pagination-bullet-active{ width:52px; opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none; width:36px; height:124px; margin-top:-62px; background-size:contain !important;}
.ibanner .swiper-button-prev{ background:url(../prev.html) center no-repeat; left:2.8%;}
.ibanner .swiper-button-next{ background:url(../next.html) center no-repeat; right:2.8%;}

.main{ width:auto; overflow:visible; position:relative;}

.ibox{ position:relative; z-index:2;}
.ibox .con{width:1260px; margin:0 auto;}
.ibox .con::before,
.ibox .con::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox h2.title{ display:block; font-size:100px; text-align:center; padding:0.56em 0 0.16em; position:relative;}
.ibox h2.title span{ display:block; width:100%; line-height:2; color:#0f94d0; text-transform:uppercase; opacity:0.08; position:absolute; left:0; top:0; z-index:1;}
.ibox h2.title em{ display:block; line-height:2.92; color:#0f94d0; font-size:0.36em; position:relative; z-index:3;}
.ibox h2.title i{ display:block; width:1.08em; height:4px; background:#148cc2; border-left:0.36em solid #6eb92b; margin:0 auto 0.44em; position:relative; z-index:3;}
.ibox a.more{ display:block; width:60px; height:60px; background:#6eb92b url(../png/more.png) center no-repeat; border-radius:50%; overflow:hidden; margin:0 auto; transition:all ease 0.3s;}
.ibox a.more:hover{ background-color:#0f94d0;}

.box1{ background:url(../jpg/bg1.jpg) center top no-repeat; background-size:cover; padding:32px 0 120px;}
.box1 .con{ position:relative; z-index:3;}
.box1 h2.title{ text-align:left;}
.box1 h2.title i{ margin-left:0;}
.box1 .txt{ line-height:2.375; color:#444; font-size:16px; margin-right:35%;}
.box1 ul.data{ display:block; font-size:18px; font-family:'思源黑体 CN'; overflow:hidden; padding:56px 0 0; margin-right/:20%;}
.box1 ul.data li{ display:block; width/:25%; float:left; margin-right:3em;}
.box1 ul.data p{ display:block; height:3.166em; line-height:3.166em; color:#6eb92b; font-size:1.33em; overflow:hidden;}
.box1 ul.data p b.counter{ font-size:2.833em; margin:0 0.1em;}
.box1 ul.data p sup{ display:inline-block; line-height:1; font-weight:bold; font-size:inherit; vertical-align:top; margin:0 0 0 2px;}
.box1 ul.data span{ display:block; line-height:2.44; color:#333;}
.box1 ul.ab{ display:block; padding:80px 0 0; margin-right:5%;}
.box1 ul.ab::before,
.box1 ul.ab::after{ content:''; display:block; overflow:hidden; clear:both;}
.box1 ul.ab li{ display:block; width:20%; float:left;}
.box1 ul.ab li a{ display:block; line-height:2.4; color:#0f94d0; font-size:18px; text-align:center; overflow:hidden; padding:0.8em 0 0.6em; background:#fff; border-radius:2.9em; margin:0 14% 0 0; transition:all ease 0.3s; box-shadow:0 0 20px 3px rgba(15,148,208,0.1);}
.box1 ul.ab li a em{ display:block; height:2em; background-size:auto 100% !important; transition:all ease 0.3s;}
.box1 ul.ab li:nth-child(1) a em{ background:url(../png/ab01.png) center no-repeat;}
.box1 ul.ab li:nth-child(2) a em{ background:url(../png/ab02.png) center no-repeat;}
.box1 ul.ab li:nth-child(3) a em{ background:url(../png/ab03.png) center no-repeat;}
.box1 ul.ab li:nth-child(4) a em{ background:url(../png/ab04.png) center no-repeat;}
.box1 ul.ab li:nth-child(5) a em{ background:url(../png/ab05.png) center no-repeat;}
.box1 ul.ab li:nth-child(1) a:hover em{ background-image:url(../png/ab01_h.png);}
.box1 ul.ab li:nth-child(2) a:hover em{ background-image:url(../png/ab02_h.png);}
.box1 ul.ab li:nth-child(3) a:hover em{ background-image:url(../png/ab03_h.png);}
.box1 ul.ab li:nth-child(4) a:hover em{ background-image:url(../png/ab04_h.png);}
.box1 ul.ab li:nth-child(5) a:hover em{ background-image:url(../png/ab05_h.png);}
.box1 ul.ab li a:hover{ color:#fff; background:#6eb92b;}
.box1 ul.ab li a:hover img{ transform:rotateY(180deg);}
.box1 .locate{ height:100%; position:absolute; right:50%; bottom:0; z-index:1; min-width:1750px; width:100%; transform:translateX(50%);}
.box1 .locate>div{ height:100%; position:relative; z-index:1; float:right;}
.box1 .locate div > img{ display:block; height:100%; position:relative; z-index:1;}
.box1 .locate em{ display:block; height:50px; position:absolute; right:28.6325%; bottom:46%; z-index:3; transform:translateX(50%); animation:balloon 4s infinite;}
.box1 .locate em::after{ content:''; display:block; border:1px solid #fff; border-width:8px 7px 0; border-color:#fff transparent; position:absolute; left:50%; top:100%; transform:translateX(-50%);}
.box1 .locate em img{ display:block; width:142px; height:50px; background:#fff; border-radius:25px; box-shadow:1px 1px 13px rgba(0,0,0,0.2);}
@keyframes balloon{
	0%{ transform:translate(50%,-3px) rotate(0.1deg);}
	40%{ transform:translate(50%,0) rotate(0.1deg);}    
	80%{ transform:translate(50%,-6px) rotate(0.1deg);}    
	100%{ transform:translate(50%,-3px) rotate(0.1deg);}
}


.box2{ height:826px; background:url(../jpg/bg2.jpg) center bottom no-repeat; background-size:cover; position:relative; z-index:8;}
.box2 h2.title em{ color:#fff;}
.box2 h2.title span{ color:#fff;}
.box2 h2.title i{ background:#fff;}
.box2 .con{ position:relative; z-index:3;}
.box2 .bg{ width:576px; height:576px; position:absolute; left:50%; bottom:85px; bottom:38px; z-index:1; transform:translate(-50%,0) scale(0.66);}
.box2 .bg::before,
.box2 .bg::after{ content:""; display:block; background:url(../png/round.png) center no-repeat; background-size:cover; position:absolute; left:0; top:0; right:0; bottom:0; animation:randAni 5s linear infinite; opacity:0;}
.box2 .bg::after{ animation-delay:2.5s;}
@keyframes randAni{
	0%{ opacity:1; transform:scale(1);}
	20%{ opacity:0.6;}
	60%{ opacity:0.2;}
	100%{ opacity:0; transform:scale(3.5);}
}
.box2 dl{ display:block; background:url(../png/slt_round.png) center no-repeat; position:relative; margin:-12px 0 0;}
.box2 dl::before,
.box2 dl::after{ content:''; display:block; width:100%; height:0; overflow:hidden; clear:both;}
.box2 dl dt{ display:block; width:100%; height:100%; background:url(../png/slt_txt.png) center no-repeat; position:absolute; left:0; top:0; z-index:1;}
.box2 dl dd{ display:flex; align-items:center; flex-direction:row-reverse; width:27.5%; height:112px; float:left; cursor:pointer; margin:40px 0; position:relative; z-index:3;}
.box2 dl dd:hover{ z-index:5;}
.box2 dl dd:nth-child(odd){ float:right; margin-left:45%; flex-direction:row;}
.box2 dl dd:nth-child(4),
.box2 dl dd:nth-child(5){ width:24.5%;}
.box2 dl dd em{ display:block; flex-shrink:0; width:74px; height:74px; background:url(../png/slt_bb.png) center no-repeat; background-size:contain; border-radius:50%; position:relative; cursor:pointer;}
.box2 dl dd em img{ display:block; width:100%; height:100%;}
.box2 dl dd em::after{ content:''; display:block; width:100%; height:100%; background:url(../png/slt_bt.png) center no-repeat; background-size:contain; border-radius:50%; position:absolute; left:0; top:0; z-index:1;}
.box2 dl dd:hover em::after{ animation:Rotate linear 4s infinite;}
@keyframes Rotate{ 0%{ transform:rotate(0deg);} 100%{ transform:rotate(360deg);}}
.box2 dl dd .info{ flex:auto; color:#fff; font-size:15px; text-align:right; padding:0 26px 0 0;}
.box2 dl dd:nth-child(odd) .info{ text-align:left; padding:0 0 0 26px;}
.box2 dl dd .info a{ display:block; line-height:1.363636; font-size:1.46666666em;}
.box2 dl dd .info p{ display:block; line-height:1.6; opacity:0.7; padding:0.6em 0 0;}
.box2 dl dd p.sub{ display:block; font-size:16px; background:#fff; padding:12px 26px 16px; border-top:6px solid #6eb92b; border-radius:0 0 20px 20px; position:absolute; left:1em; top:100%; z-index:9; box-shadow:0 0 6px rgba(0,0,0,0.2); transition:all ease 0.3s; opacity:0; visibility:hidden;}
.box2 dl dd:nth-child(even) p.sub{ left:auto; right:1em;}
.box2 dl dd:hover p.sub{ opacity:1; visibility:visible;}
.box2 dl dd p.sub::before{ content:''; display:block; border:1px solid #6eb92b; border-width:0 11px 13px; border-color:#6eb92b transparent; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);}
.box2 dl dd p.sub a{ display:block; width:10em; line-height:2.25; color:#6eb92b; text-align:center; border:1px solid #6eb92b; border-radius:2.375em; margin:0.75em 0; transition:all ease 0.3s;}
.box2 dl dd p.sub a:hover{ color:#fff; background:#6eb92b;}

.box3{ position:relative; padding:0 0 186px;}
.box3 .con{ position:relative; background/:url(../jpg/case1.jpg) center top 40px no-repeat; background-size:495.13px auto; z-index:3;}
.box3 .case{ padding:0 0 72px; position:relative;}
.box3 .case .swiper-container{ width:108vw; width:2074px; position:relative; margin-left:50%; transform:translateX(-13%); overflow:visible;}
.box3 .case .swiper-slide{ display:block; width:18.5% !important; height:calc((28.08vw - 44px) * 0.648 + 70px); height:392px; overflow:hidden; position:relative; transition:all ease 0.6s;}
.box3 .case .swiper-slide-active{ width:26% !important;}
.box3 .case .swiper-slide a{ display:block; overflow:hidden; margin:0 22px;}
.box3 .case .swiper-slide a em{ display:block; background/:#0f94d0; overflow:hidden; transition:all ease 0.6s; margin:2.62vw 0 0; margin:50px 0 0;}
.box3 .case .swiper-slide a img{ display:block; width:100%; height:220px; transition:all ease 0.6s;}
.box3 .case .swiper-slide a span{ display:block; line-height:1; color:#999; font-size:18px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:1.22em 0 0.5em; transition:all ease 0.6s;}
.box3 .case .swiper-slide-active a em{ margin:0;}
.box3 .case .swiper-slide-active a img{ height:320px;}
.box3 .case .swiper-slide-active a span{ color:#333; font-size:22px; padding:1.68em 0 0.5em;}
.box3 .case .swiper-slide-active a:hover img{ opacity/:0.2; transform:scale(1.1);}
.box3 .case .swiper-slide-active a:hover span{ color:#6eb92b; transform/:translateY(-141px);}
.box3 .case .swiper-slide-active a:hover span{ transform/:translateY(-208px);}
.box3 .case .swiper-pagination{ height:12px; padding:28px 0; left:50%; bottom:0; transform:translateX(-50%);}
.box3 .case .swiper-pagination-bullet{ width:12px; height:12px; background:#0f94d0; border-radius:50%; opacity:1; margin:0 9px !important; vertical-align:top; transition:all ease 0.4s;}
.box3 .case .swiper-pagination-bullet-active{ background:#6eb92b; opacity:1;}
.box3 .case .swiper-button-prev,
.box3 .case .swiper-button-next{ width:66px; height:66px; border:1px dashed #0f94d0; border-radius:50%; margin-top:0; background-size:contain !important; top:auto; bottom:0;}
.box3 .case .swiper-button-prev{ background:url(../png/prev3.png) center no-repeat; left:14%;}
.box3 .case .swiper-button-next{ background:url(../png/next3.png) center no-repeat; right:14%;}
.box3 .case .swiper-button-prev:hover,
.box3 .case .swiper-button-next:hover{ border-style:solid; border-color:#6eb92b; background-color:#6eb92b;}
.box3 .case .swiper-button-prev:hover{ background-image:url(../png/prev3_h.png);}
.box3 .case .swiper-button-next:hover{ background-image:url(../png/next3_h.png);}
.box3 .wave{ width:1920px; height:212px; position:absolute; left:50%; bottom:0; z-index:1; transform:translateX(-50%);}

.box4{ background:#d2e8f1 url(../png/bg4.png) center no-repeat; background-size:auto 100%; padding:0 0 70px;}
.box4 dl{ display:block; padding:0 0 30px;}
.box4 dl::before,
.box4 dl::after{ content:''; display:block; width:100%; height:0; overflow:hidden; clear:both;}
.box4 dl dt{ display:block; width:580px; box-sizing:border-box; padding:0 40px; background:#fff; border-radius:10px; overflow:hidden; float:left; margin:0 42px 0 0; position:relative;}
.box4 dl dd{ display:block; background:#fff; padding:26px 24px; border:1px solid #fff; border-radius:10px; overflow:hidden; margin:0 0 24px; transition:all ease 0.3s;}
.box4 dl a.pic{ display:block; overflow:hidden; margin:0 -40px; position:relative;}
.box4 dl a.pic img{ display:block; width:100%; height:350px;}
.box4 dl a.title{ display:block; height:64px; line-height:32px; color:#666; font-size:17px; margin:1px 0 0; transition:all ease 0.3s;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.box4 dl span{ display:block; width:66px; height:66px; line-height:22px; color:#fff; font-size:13px; text-align:center; border-radius:5px; background:#e6e6e6; background:#0f94d0; overflow:hidden; float:left; margin:0 26px 0 0; transition:all ease 0.3s;}
.box4 dl span em{ display:block; line-height:32px; font-size:28px; font-weight:bold; padding:8px 0 0;}
.box4 dl a.pic:hover span{ background:#6eb92b;}
.box4 dl .txt{ height:84px; line-height:28px; color:#999; font-size:15px; margin:0 0 32px;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
}
.box4 dl a.view{ display:block; width:58px; height:66px; background:url(../png/more1.png) right center no-repeat; border-left:1px solid #ddd; float:right; margin-left:26px; transition:all ease 0.3s;}
.box4 dl dt a.title{ height:auto; -webkit-line-clamp:1; color:#333; font-size:22px; font-weight:bold; line-height:72px; margin:14px 0 0;}
.box4 dl dt a.title:hover{ color:#0f94d0;}
.box4 dl dt span{ background:#0f94d0; position:absolute; left:0; top:0; margin:20px;}
.box4 dl dd:hover{ border-color:#0f94d0; border-color:#6eb92b;}
.box4 dl dd:hover a.title{ color:#0f94d0; color:#6eb92b; color:#333;}
.box4 dl dd:hover span{ background:#0f94d0; background:#6eb92b;}
.box4 dl dd:hover a.view{ background-image:url(../png/more_h.png);}

@media only screen and (max-width:768px){
.ibanner{ height:54vw;}
.ibanner .swiper-pagination{ height:8px; bottom:12px;}
.ibanner .swiper-pagination-bullet{ width:8px; height:8px; border-radius:4px; margin:0 4px !important;}
.ibanner .swiper-pagination-bullet-active{ width:34px;}

.ibox .con{ width:calc(100% - 24px);}
.ibox h2.title{ font-size:60px;}
.ibox a.more{ width:42px; height:42px;}

.box1{ padding:0 0 40px;}
.box1 .txt{ margin:-1.5em 0 0; font-size:14px;}
.box1 ul.data{ font-size:13px; padding:10px 0 0;}
.box1 ul.data li{ width:50%; margin:0 0 10px; box-sizing:border-box; padding:0 2px 0 10px;}
.box1 ul.data p{ font-size:1.25em;}
.box1 ul.data p b.counter{ font-size:2.25em;}
.box1 ul.ab{ margin:0 -5px; padding:20px 0 0;}
.box1 ul.ab li{ width:33.33%;}
.box1 ul.ab li a{ font-size:13px; border-radius:10px; margin:0 5px 10px; padding:0.8em 0 0.2em;}
.box1 .locate{ display:none;}

.box2{ height:auto; padding:0 0 40px; overflow:hidden;}
.box2 dl{ margin:0;}
.box2 dl dt{ display:none;}
.box2 dl dd{ width:auto !important; height:auto; overflow:hidden; float:none !important; flex-direction:row !important; margin:0 20px 20px !important; display:block;}
.box2 dl dd em{ float:left; width:60px; height:60px; margin:0 16px 0 0;}
.box2 dl dd em::after{ animation:Rotate linear 4s infinite;}
.box2 dl dd .info{ overflow:hidden; text-align:left !important; padding:5px 0 0 !important; font-size:13px;}
.box2 dl dd .info a{ font-size:1.25em;}
.box2 dl dd .info p br{ display:none;}
.box2 dl dd p.sub{ display:none !important;}

.box3{ overflow:hidden; padding:0 0 80px;}
.box3 .wave{ bottom:-68px;}
.box3 .case{ padding:0 0 60px;}
.box3 .case .swiper-container{ width:100%; margin:0; transform:none; overflow:hidden;}
.box3 .case .swiper-pagination{ display:none;}
.box3 .case .swiper-slide{ height:auto;}
.box3 .case .swiper-slide a{ margin:0 4px;}
.box3 .case .swiper-slide a em{ margin:0;}
.box3 .case .swiper-slide,
.box3 .case .swiper-slide-active{ width:100% !important;}
.box3 .case .swiper-slide a img,
.box3 .case .swiper-slide-active a img{ height:auto;}
.box3 .case .swiper-slide a span,
.box3 .case .swiper-slide-active a span{ font-size:16px; padding:1.25em 0 0.5em;}
.box3 .case .swiper-button-prev,
.box3 .case .swiper-button-next{ width:40px; height:40px;}
.box3 .case .swiper-button-prev{ left:50%; margin-left:-60px;}
.box3 .case .swiper-button-next{ right:50%; margin-right:-60px;}

.box4{ padding:0 0 40px;}
.box4 dl a.pic{ margin:0 -14px;}
.box4 dl a.pic img{ height:auto;}
.box4 dl .txt{ font-size:13px; line-height:1.8; height:5.4em; margin:0 0 1.5em;}
.box4 dl a.title{ font-size:14px; line-height:26px; height:52px; margin:7px 0 0;}
.box4 dl span{ transform:scale(0.8); transform-origin:left center; margin:0 4px 0 0;}
.box4 dl a.view{ display:none;}
.box4 dl dt{ width:auto; float:none; margin:0; border-radius:6px; padding:0 14px;}
.box4 dl dt span{ transform:scale(0.8); transform-origin:left top; margin:12px;}
.box4 dl dt a.title{ font-size:16px; line-height:3; margin:0.5em 0 0;}
.box4 dl dd{ margin:14px 0 0; padding:8px 14px; border-radius:6px;}
}





















/**/