﻿@charset "utf-8";
@import url(style.css);
 @import url(mobile.css);
 @import url(pscroll.css);
 @import url(animate.min.css);

/*首页*/

*::before,  *::after {
font: inherit;
margin: 0;
padding: 0;
color: inherit;
box-sizing: border-box;
}
html {
--main-color: #0086cd;
}
/*轮显*/

.main .banner .swiper-other {
	position: absolute;
	left: 0;
	bottom: 7.8%;
	z-index: 2;
	width: 100%;
}
.main .banner .swiper-other .swiper-pagination-bullet {
--cw: 18px;
	margin: 0 16px;
	position: relative;
	cursor: pointer;
	background:none;
}
.main .banner .swiper-pagination-bullet-active {
	background:none;
}
 .main .banner .swiper-other .swiper-pagination-bullet::before {
content: "";
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.8);
 width: var(--cw);
height: var(--cw);
opacity: 1;
transition: opacity 0.3s;
}
 .main .banner .swiper-other .swiper-pagination-bullet-active::before {
border: 2px solid rgba(255, 255, 255, 0.2);
}
.main .banner .swiper-other .cycle-box {
--size: var(--cw);
--b-c: #ffffff;
--b-w: 1px;
	display: block;
}
.main .banner [flex] {
	display: flex;
}
.main .banner [flex][flex~="aic"] {
	align-items: center;
}
.main .banner [flex][flex~="jc"] {
	justify-content: center;
}
.main .banner .cycle-box {
--size: 40px;
--time: 4s;
--b-c: var(--main-color);
--b-w: 3px;
	position: relative;
	width: var(--size);
	height: var(--size);
}
.main .banner .cycle-box .cycle-son {
	position: absolute;
	top: 0;
	height: var(--size);
width: calc(var(--size)*0.5);
	overflow: hidden;
}
 .main .banner .cycle-box .cycle-son::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.main .banner .cycle-box .left-c {
	left: 0;
}
 .main .banner .cycle-box .left-c::before {
transform-origin: right center;
border-radius: calc(var(--size)*0.5) 0 0 calc(var(--size)*0.5);
border: var(--b-w) solid var(--b-c);
 border-right: 0;
transform: rotate(-180deg);
}
.main .banner .cycle-box .right-c {
	right: 0;
}
 .main .banner .cycle-box .right-c::before {
transform-origin: left center;
border-radius: 0 calc(var(--size)*0.5) calc(var(--size)*0.5) 0;
border: var(--b-w) solid var(--b-c);
 border-left: 0;
transform: rotate(-180deg);
}
 .main .banner .cycle-box.run .left-c::before {
transform: rotate(0deg);
animation: cycle-left var(--time) linear;
}
.main .banner .cycle-box.run .right-c {
	right: 0;
}
 .main .banner .cycle-box.run .right-c::before {
transform: rotate(0deg);
animation: cycle-right var(--time) linear;
}
 .main .banner .cycle-box-h:hover .left-c::before {
transform: rotate(0deg);
animation: cycle-left var(--time) linear;
}
.main .banner .cycle-box-h:hover .right-c {
	right: 0;
}
 .main .banner .cycle-box-h:hover .right-c::before {
transform: rotate(0deg);
animation: cycle-right var(--time) linear;
}
 .main .banner .run .cycle-box .left-c::before {
animation: cycle-left var(--time) linear;
}
.main .banner .run .cycle-box .right-c {
	right: 0;
}
 .main .banner .run .cycle-box .right-c::before {
animation: cycle-right var(--time) linear;
}
/*技术*/

.i_title {
	letter-spacing:0;
	color:#040000;
	text-align:center;
	overflow:hidden;
	line-height:1.3;
	margin-top:5.4%;
}
.i_title_desc {
	text-align:center;
	overflow:hidden;
	color:#666666;
	font-size:18px;
	line-height:1.5;
	margin-top:1%;
}
.picture-transition {
	overflow:hidden;
	margin-bottom:7%;
}
.picture-transition figure .pc-version {
	display: flex;
	list-style: none;
	position: relative;
	padding-left: 0;
	width: 100%;
	margin-top:3%;
}
.picture-transition figure .pc-version .img-item {
	width: 32.66%;
	margin-right:1%;
	position: relative;
	padding-bottom: 37.75%;
	transition: all 1.6s;
	overflow:hidden;
	border-radius:30px;
}
 .picture-transition figure .pc-version .img-item:nth-child(3n) {
margin-right:0;
}
.picture-transition figure .pc-version .img-item .bg-img {
	width: 100%;
	background-position: 72% 0;
	background-size: auto 100%;
	background-repeat: no-repeat;
	height: 100%;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 0;
	padding:70px;
	display: flex;
	flex-direction: column;
	color: #fff;
	text-align: left;
	justify-content: space-between;
transition: all .6s;
	overflow:hidden;
	border-radius:30px;
	background-color:#040000;
}
.picture-transition figure .pc-version .img-item .bg-img p {
	margin: 0;
transition: all .6s
}
.picture-transition figure .pc-version .img-item .bg-img .item-title {
	font-size:32px;
	color: #fff;
	z-index: 10
}
.picture-transition figure .pc-version .img-item .bg-img div {
	z-index: 10
}
.picture-transition figure .pc-version .img-item .bg-img div .item-desc {
	font-size:26px;
	color: #fff
}
.picture-transition figure .pc-version .img-item .bg-img div .item-function {
	font-size:26px;
	display: none;
	color: #fff
}
.picture-transition figure .pc-version .img-item .bg-img:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;/*background-color: rgba(0,0,0,.5);*/
	z-index: 9;
}
 .picture-transition figure .pc-version .img-item:nth-of-type(2) .bg-img {
background-position: 80% 0
}
.picture-transition figure .pc-version .img-item+.img-item {
	border-left: 1px solid #fff
}
.picture-transition figure .pc-version .active {
	width: 70%
}
.picture-transition figure .pc-version .active .bg-img div .item-desc {
	margin-bottom: 60px
}
.picture-transition figure .pc-version .active .bg-img div .item-function {
	display: block
}
.picture-transition figure .pc-version .active .bg-img:before {
	background-color: rgba(0, 0, 0, 0)
}
.picture-transition figure .pc-version .active .bg-img .item-title .bb {
	animation: show_hiden2 2s ease-out;
}
.picture-transition figure .pc-version .active .bg-img .item-desc .bb {
	animation: show_hiden2 2s ease-out;
}
.picture-transition figure .pc-version .normal {
	width: 13%
}
.picture-transition figure .pc-version .normal .bg-img {
	background: #040000!important
}
.picture-transition figure .pc-version .normal .bg-img .item-title {
	writing-mode: vertical-lr;
	display: inline-flex;
	align-items: center;/*color: rgba(255,255,255,.5)*/
}
.picture-transition figure .pc-version .normal .bg-img div .item-desc {
	display: none
}
.picture-transition figure .pc-version .normal .bg-img div .item-function {
	display: none
}
.picture-transition figure .mobile-version {
	display: none
}
/*产品*/

.i_two_bg {
	overflow:hidden;
	background:url(../img/i_img7.jpg) center bottom no-repeat;
	background-size:cover;
	padding-bottom:236px;
}
.i_three_bg {
	overflow:hidden;
	background:url(../img/i_img8.png) center bottom no-repeat;
	background-size:cover;
	margin-top:-73px;
}
.i_three_bg .h3 {
	font-weight:normal;
	text-align:center;
	line-height:60px;
	color:#fff;
	margin:0 auto;
	max-width:1570px;
	margin-top:17.5%;
	margin-bottom:17%;
}
/*视频*/

.i_video {
	text-align:center;
	overflow:hidden;
	border-radius:30px;
	margin-top:3%;
}
.i_video a {
	background:url(../img/i_img9.png) center center no-repeat;
	background-size:auto 100%;
	transition:all 0.6s;
	display:block;
	color:#fff;
	padding-top:7.5%;
	padding-bottom:7.5%;
}
.i_video:hover a {/*transform:scale(1.05, 1.05);*/
	background-size:auto 103%;
}
.i_video .a {
	display:inline-block;
	vertical-align:top;
	width:180px;
	height:50px;
	line-height:50px;
	transition:all 0.3s;
	border-radius:30px;
}
.i_video .a i {
	margin-left:23px;
	font-family:"宋体";
	font-weight:bold;
	font-style:normal;
	font-size:14px;
	display:inline-block;
	vertical-align:middle;
}
.i_video .a:hover { /*background:rgba(124,124,124,0.3);*/
	padding-left:10px;
}
.i_end {
	overflow:hidden;
	text-align:center;
	margin-top:6.5%;
	margin-bottom:6.5%;
}
.i_end ul li {
	float:left;
	width:32%;
	overflow:hidden;
	margin-right:2%;
}
 .i_end ul li:nth-child(3n) {
margin-right:0;
}
.i_end ul li a {
	display:inline-block;
	vertical-align:top;
	padding-left:88px;
	background-repeat:no-repeat;
	background-size:67px 59px;
	background-position:left top 4px;
	text-align:left;
}
 .i_end ul li:nth-child(1) a {
background-image:url(../images/i_pic1.png);
}
 .i_end ul li:nth-child(2) a {
background-image:url(../images/i_pic2.png);
}
 .i_end ul li:nth-child(3) a {
background-image:url(../images/i_pic3.png);
}
.i_end ul li .h4 {
	font-weight:normal;
	overflow:hidden;
	line-height:36px;
	height:36px;
	white-space:nowrap;
	text-overflow:ellipsis;
	color:#040000;
}
.i_end ul li .a {
	font-size:18px;
	color:#999999;
	transition:all 0.3s;
	line-height:28px;
	display:inline-block;
	vertical-align:top;
	position:relative;
}
.i_end ul li .a:after {
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	width:0;
	height:1px;
	background:#040000;
	transition:all 0.3s;
}
.i_end ul li a:hover .a {
	color:#040000;
}
.i_end ul li a:hover .a:after {
	width:100%;
}
.i_end ul li .a i {
	display:inline-block;
	font-style:normal;
	padding-left:8px;
	font-family:"宋体";
	font-weight:bold;
	font-size:14px;
}
 @media screen and (max-width: 1920px) {

/*技术*/

.picture-transition figure .pc-version .img-item .bg-img {
padding:48px
}
 .picture-transition figure .pc-version .img-item .bg-img .item-title {
font-size:24px
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-desc {
font-size:24px
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-function {
font-size:24px
}
 .picture-transition figure .pc-version .active .bg-img div .item-desc {
font-size: 26px;
margin-bottom:48px;
}
}
 @media screen and (max-width: 1400px) {

/*技术*/

.i_two_bg {
padding-bottom:200px;
}
 .picture-transition figure .pc-version .img-item .bg-img .item-title {
font-size:23px
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-desc {
font-size:23px;
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-function {
font-size:22px;
}
 .picture-transition figure .pc-version .active .bg-img div .item-desc {
font-size:25px;
}

/*产品*/

.i_three_bg .h3 {
line-height:56px;
}
}
 @media screen and (max-width: 1200px) {

/*轮显*/

.main .banner .swiper-slide .desc {
margin-bottom:20px;
}
 .main .banner:hover .btn .boxs {
width:97%;
}
 .main .banner .btn .boxs {
width:98%;
}
 .main .banner .swiper-other {
bottom: 30px;
}
 .main .banner .swiper-other .swiper-pagination-bullet {
--cw: 12px;
margin: 0 10px;
}
 .main .banner .swiper-other .swiper-pagination-bullet::before {
border-width: 2px;
}
 .main .banner .swiper-other .cycle-box {
--b-w: 2px;
}

/*技术*/

.i_title_desc {
font-size:16px;
}
 .i_two_bg {
padding-bottom:180px;
}
 .picture-transition {
font-size:16px;
}
 .picture-transition figure .pc-version .img-item .bg-img {
padding:40px;
}
 .picture-transition figure .pc-version .img-item .bg-img .item-title {
font-size:22px
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-desc {
font-size:22px;
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-function {
font-size:21px;
}
 .picture-transition figure .pc-version .active .bg-img div .item-desc {
font-size:24px;
margin-bottom:26px;
}

/*产品*/

.i_three_bg .h3 {
line-height:50px;
}
}
 @media screen and (max-width: 960px) {

/*技术*/

.i_title_desc {
font-size:15px;
}
 .i_two_bg {
padding-bottom:160px;
}
 .picture-transition {
font-size:15px;
}
 .picture-transition figure .pc-version .img-item .bg-img {
padding:32px;
}
 .picture-transition figure .pc-version .img-item .bg-img .item-title {
font-size:19px;
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-desc {
font-size:19px;
}
 .picture-transition figure .pc-version .img-item .bg-img div .item-function {
font-size:19px;
}
 .picture-transition figure .pc-version .active .bg-img div .item-desc {
font-size:21px;
margin-bottom:18px;
}

/*产品*/

.i_three_bg .h3 {
line-height:44px;
}

/*视频*/

.i_end ul li a {
padding-left:70px;
background-size: 58px 51px;
}
}
 @media screen and (max-width: 780px) {

/*技术*/

.i_two_bg {
padding-bottom:140px;
}
 .picture-transition {
font-size:14px;
}
 .picture-transition figure .pc-version {
display: none
}
 .picture-transition figure .mobile-version {
display: flex;
flex-direction: column;
list-style: none;
position: relative;
padding-left: 0;
width: 100%;
margin-top:5%;
}
 .picture-transition figure .mobile-version .img-item {
width: 100%;
position: relative;
}
 .picture-transition figure .mobile-version .img-item img {
width: 100%;
display:block;
border-radius:20px;
min-height:200px;
}
 .picture-transition figure .mobile-version .img-item .text-area {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
padding:20px;
display: flex;
flex-direction: column;
justify-content: space-between
}
 .picture-transition figure .mobile-version .img-item .text-area p {
text-align: left;
margin: 0
}
 .picture-transition figure .mobile-version .img-item .text-area .item-title {
font-size:18px;
}
 .picture-transition figure .mobile-version .img-item .text-area div .item-desc {
font-size:18px;
margin-bottom:12px;
}
 .picture-transition figure .mobile-version .img-item .text-area div .item-function {
font-size:14px;
color: rgba(255, 255, 255, .5)
}
 .picture-transition figure .mobile-version .img-item+.img-item {
margin-top: 10px
}

/*产品*/

.i_three_bg .h3 {
line-height:40px;
}
}
 @media screen and (max-width: 640px) {

/*轮显*/

.main .banner .swiper-slide .rbtn {
min-width:130px;
padding:0 30px;
font-size:15px;
}
 .main .banner .swiper-slide .rbtn span {
height:42px;
line-height:42px;
padding:0;
}
 .main .banner .swiper-button-prev, .main .banner .swiper-button-next {
width:40px;
height:40px;
margin-top:-20px;
background-size:10px auto;
}
 .main .banner .swiper-other {
bottom: 20px;
}
 .main .banner .swiper-other .swiper-pagination-bullet {
margin:0 6px;
}

/*技术*/

.i_two_bg {
padding-bottom:120px;
}
 .picture-transition {
font-size:13px;
}

/*产品*/

.i_three_bg .h3 {
line-height:36px;
}

/*视频*/

.i_video {
border-radius:20px;
}

/*.i_end ul li{ width:49%; margin-bottom:2%;}

.i_end ul li:nth-child(3n){ margin-right:2%;}

.i_end ul li:nth-child(2n){ margin-right:0%;}*/

.i_end {
text-align:center;
}
 .i_end ul {
display:inline-block;
text-align:left;
}
 .i_end ul li {
float:none;
width:100%;
margin-right:0;
margin-bottom:4%;
}
 .i_end ul li:last-child {
margin-bottom:2%;
}
 .i_end ul li a {
padding-left:60px;
background-size: 50px 44px;
background-position:left top 10px;
}
 .i_end ul li .a {
font-size:16px;
height:22px;
line-height:22px;
}
}
 @media screen and (max-width: 480px) {

/*轮显*/

.main .banner .btn {
bottom:22px;
display:none;
}
 .main .banner .swiper-slide .rbtn {
min-width:110px;
padding:0 20px;
font-size:13px;
margin-top:4%;
}
 .main .banner .swiper-slide .rbtn span {
height:36px;
line-height:36px;
}
 .main .banner .swiper-slide .rbtn {
margin-top:1%;
}
 .main .banner .swiper-slide .txt {
width:60%;
}
 .main .banner .swiper-slide .txt span {
line-height:1.2;
}

/*技术*/

.i_title {
margin-top:6%;
}
 .i_title_desc {
font-size:14px;
}
 .i_two_bg {
padding-bottom:100px;
}
 .picture-transition {
font-size:12px;
}
 .picture-transition figure .mobile-version .img-item+.img-item {
margin-top:6px;
}
 .picture-transition figure .mobile-version .img-item .text-area div .item-desc {
margin-bottom:5px;
}

/*产品*/

.i_three_bg .h3 {
line-height:30px;
}

/*视频*/

.i_video .a {
width:160ppx;
height:46px;
line-height:46px;
}
 .i_end ul li .a {
font-size:14px;
}
 .i_end ul li a {
padding-left:56px;
background-size: 46px 41px;
}
}
 @media screen and (max-width: 420px) {

/*轮显*/

.main .banner .swiper-slide .rbtn {
min-width:100px;
}
 .main .banner .swiper-slide .rbtn span {
height:32px;
line-height:32px;
}

/*技术*/

.i_title_desc {
font-size:13px;
}

/*产品*/

.i_three_bg .h3 {
line-height:28px;
font-size:18px;
}
}
 @media screen and (max-width: 360px) {

/*技术*/

.picture-transition figure .mobile-version .img-item .text-area {
padding:15px 12px
}
 .picture-transition figure .mobile-version .img-item .text-area div .item-desc {
font-size:16px;
margin-bottom:12px;
}
 .picture-transition figure .mobile-version .img-item .text-area div .item-function {
font-size:12px;
color: rgba(255, 255, 255, .5)
}

/*产品*/

.i_three_bg .h3 {
font-size:16px;
}
}
 @media screen and (min-width: 1200px) {

/*轮显*/

.swiper-container {
height:100%!important;
}
 .main .banner .swiper-slide {
position: relative;
height:100%;
}
}
 @keyframes mymove6 {
 from {
filter:alpha(opacity=0);
opacity:0;
-webkit-transform: translateY(100px) translateX(0);
 -moz-transform: translateY(60px) translateX(0);
 transform: translateY(60px) translateX(0);
 -webkit-transition-timing-function: ease-in-out;
 transition-timing-function: ease-in-out;
}
to {
	filter:alpha(opacity=100);
	opacity:1;
	-webkit-transform: translateY(0px) translateX(0);
	-moz-transform: translateY(0px) translateX(0);
	transform: translateY(0px) translateX(0);
}
}
 @-webkit-keyframes mymove6 {

	/*from { filter:alpha(opacity=0);opacity:0; margin-bottom:-20%;}

	to {margin-bottom:3%;filter:alpha(opacity=1);opacity:1;}*/

	from {
filter:alpha(opacity=0);
opacity:0;
-webkit-transform: translateY(100px) translateX(0);
 -moz-transform: translateY(60px) translateX(0);
 transform: translateY(60px) translateX(0);
 -webkit-transition-timing-function: ease-in-out;
 transition-timing-function: ease-in-out;
}
to {
	filter:alpha(opacity=100);
	opacity:1;
	-webkit-transform: translateY(0px) translateX(0);
	-moz-transform: translateY(0px) translateX(0);
	transform: translateY(0px) translateX(0);
}
}
 @keyframes cycle-left {
 0% {
 transform: rotate(-180deg);
}
 50% {
 transform: rotate(-180deg);
}
 100% {
 transform: rotate(0deg);
}
}
 @keyframes cycle-right {
 0% {
 transform: rotate(-180deg);
}
 50% {
 transform: rotate(0deg);
}
 100% {
 transform: rotate(0deg);
}
}
@keyframes show_hiden2 {
 0% {
 filter:alpha(opacity=0);
opacity:0;
transform: translateY(20px);
}
 40% {
 filter:alpha(opacity=0);
opacity:0;
transform: translateY(20px);
}
 100% {
 filter:alpha(opacity=100);
opacity:1;
transform: translateY(20px);
}
}
