body{
	background-color: #eef0f3;
}
.tab-element-box{
	background: #F8FBFF;
	border-radius: 24px;
	padding-left: 0;
	padding-right: 0;
	position: relative;
}
.bg_white{
	background-color: #FFFFFF;
}
.tab-element-box .tab-box{
	border-bottom: 1px solid #EAEAEA;
	text-align: center;
}
.tab-element-box .tab-box>span{
	display: inline-block;
	cursor: pointer;
	padding: 20px 0;
	margin: 0 50px;
	position: relative;
	cursor: pointer;
	font-weight: 500;
}
.tab-element-box .tab-box>span.active,.tab-element-box .tab-box>span:hover{
	color: #163EFB;
}
.tab-element-box .tab-box>span.active::before,.tab-element-box .tab-box>span:hover::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: linear-gradient(227deg, #21C0FA 0%, #163EFB 100%);
	border-radius: 1px;
}
.item_marker{
	display: inline-block;
	width: 8px;
	height: 8px;
	background: linear-gradient(227deg, #21C0FA 0%, #163EFB 100%);
	border-radius: 50%;
	margin-right: calc(1rem - 8px);
}
.tab-element-box .change-box ul{
	/* display: flex;
	align-items: center;
	justify-content: space-between; */
	padding: 0;
}
.tab-element-box .change-box>div{
	padding: 50px 40px 30px;
}
.tab-element-box .change-box h2{
	font-size: 24px;
}
.tab-element-box .change-box ul li{
	list-style: none;
	/* width: calc(25% - 15px); */
	/* padding: 15px 0 15px 20px; */
	position: relative;
}
.tab-element-box .change-box ul li>div{
	box-sizing: border-box;
	background: #FFFFFF;
	box-shadow: 0px 4px 42px 0px rgba(0,0,0,0.1);
	border-radius: 20px;
	padding: 30px 15px 0 20px;
	min-height: 157px;
	box-sizing: border-box;
	position: relative;
}
.tab-element-box .change-box ul li>div>h6{
	margin-bottom: 15px;
}
.tab-element-box .change-box ul li::after{
	position: absolute;
	content: "";
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width:calc(100% - var(--bs-gutter-x));
	height: 25px;
	border-bottom:3px solid transparent;
	z-index: 0;
	transition: all 0.3s ease-out 0s;
	border-radius: 0 0 20px 20px;
}
.tab-element-box .change-box ul li:hover::after{
	bottom: -1px;
	border-bottom:3px solid rgba(22, 62, 251, 0.5);
}
.tab-element-box .change-box ul li::before{
	position: absolute;
	content: "";
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 10px;
	background: linear-gradient(227deg, rgba(33, 192, 250, 0.2) 0%, rgba(22, 62, 251, 0.2) 100%);
	z-index: 0;
	transition: all 0.3s ease-out 0s;
	border-radius: 0 0 20px 20px;
}
.tab-element-box .change-box ul li:hover::before{
	bottom: -10px;
}
.tab-element-box .change-box ul li>div>div:first-child{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 20px;
	margin-bottom: 1rem;
}
.tab-element-box .change-box ul li>div>div:first-child>img{
	width: 56px;
	height: 43px;
}
.tab-element-box .change-box ul li>div>div:nth-child(2)>p{
	padding-right: 5px;
}
.tab-element-box .change-02{
	display: none;
}
.tab-element-box .change-01{
	background: url('../../src/assets/images/index/solution-right-bg1.png') no-repeat;
	background-position: right top;
	background-size: auto calc(50% + 1rem);
}
.tab-element-box .change-02{
	background: url('../../src/assets/images/index/solution-right-bg2.png') no-repeat;
	background-position: right top;
	background-size: auto calc(50% + 1rem);
}
.product-bg-box{
	background:#F8FBFF url('../../src/assets/images/index/nice-bg-01.png') no-repeat left;
	background-size: 32% 100%;
}
.tab-element-box .change-01>p,.tab-element-box .change-02>p{
	max-width: calc(100% - 240px);
	min-height: 64px;
}
.solution-box{
	position: relative;
}
.solution-box::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 62%;
	background:#06346A url('../../src/assets/images/index/nice-bg-02.png') no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
	z-index: 0;
	border-radius: 40px;
}
.solution_box>div{
	padding: 10px;
}
.solution_box>div>div{
	padding: 20px 24px;
	width: 100%;
	height: 158px;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0px 1px 12px rgba(0,0,0,0.02);
}
.solution_box img{
	width: 44px;
}
.solution_box h6{
	margin-top: 22px;
	line-height: 28px;
}
.solution_box>div>div:hover{
	box-shadow: 0px 4px 42px 0px rgba(0,0,0,0.1);
}
/* 轮播 */
.swiper-container {
	width: calc(100% - 10px);
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 10px 35px;
	box-sizing: border-box;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	height: 184px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	box-shadow: 0px 4px 22px 0px rgba(0,0,0,0.1);
	border-radius: 24px;
}
.swiper-slide>div{
	width: 100%;
}
.swiper-slide>div>img{
	max-width: 100%;
}
/* 轮播 end */

/* 联系我们 */
.contact-box{
	background: #06346A;
}
.contact-box .pro-desc h3,.contact-box .pro-desc p{
	color: #FFFFFF;
}
.contact-box .col-form-label{
	text-align: right;
	color: #666666;
	font-size: 14px;
}
.form-control{
	color: #666666;
	font-size: 14px;
}
.contact-box form{
	background-color: #FFFFFF;
	padding: 5vw 4vw 4vw 0vw;
	text-align: center;
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	border-radius: 40px;
	font-size: 14px;
}
.contact-box .submit-btn{
	width: 230px;
	height: 50px;
	background: linear-gradient(227deg, #21C0FA 0%, #163EFB 100%);
	border-radius: 4px;
	margin-top: 2.5vw;
}
.sub_title_linear-gradient{
	width: 40px;
	height: 4px;
	background: linear-gradient( 227deg, #21C0FA 0%, #163EFB 100%);
	border-radius: 2px 2px 2px 2px;
}
.products_banner_btn{
	width: 192px;
	height: 50px;
	background: linear-gradient( 227deg, #21C0FA 0%, #163EFB 100%), #D8D8D8;
	border-radius: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 24px;
	text-decoration: none;
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
	box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
	transition: all 0.3s;
}
.products_banner_btn:hover{
	color: #FFFFFF;
	transition: all 0.3s;
	transform: scale(1.05);
}
.products_banner_btn:hover:after{
	position: absolute;
    content: '';
    display: inline-block;
    top: -50px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
    animation: shiny-btn1 0.7s ease-in-out;
}
@keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    40% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    60% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.bg_yellow_full {
  background-color: rgba(250, 189, 8, 1);
}

.bg_green_full {
  background-color: rgba(103, 194, 58, 1);
}

.bg_red_full {
  background-color: rgba(219, 40, 40, 1);
}

.bg_orange_full {
  background-color: rgba(243, 128, 52, 1);
}

.bg_purple_full {
  background-color: rgba(163, 160, 251, 1);
}

.bg_blue_full {
  background-color: rgba(0, 157, 255, 1);
}
/* 联系我们 end */

/*product*/
#product{
	background-color: #fff;
}
.pro-desc{
	padding-top: 2vw;
	margin: auto;
	text-align: center;
}
.pro-desc h3{
	color: #333;
	font-weight: 600;
	font-size: 40px;
}
.pro-desc p{
	line-height: 20px;
	font-size: 16px;
	color: #333;
	font-weight: 400;
	margin-top: 0.7vw;
	margin-bottom: 3vw;
}
.pro-track{
	position: relative;
	width: 823px;
	height: 505px;
	margin: 30px auto 20px;
	/* background: url("../../src/assets/images/index/guidao.png") no-repeat 180px 0/476px 477px; */
}
.pro-track::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.55;
	background: url("../../src/assets/images/index/guidao.png") no-repeat 180px 0/476px 477px;
}
.pro-item{
	position: absolute;
	display: flex;
	align-items: center;
	flex-wrap: initial;
}
.item-desc{
	padding: 0;
	text-align: right;
	width: auto;
}
.item-desc.order-12{
	text-align: left;
	padding-left: 5px;
}
.item-desc h3{
	margin: 0;
	padding-top: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #000;
}
.item-desc p{
	margin: 4px 0 0;
	font-size: 14px;
	color: #555;
	font-weight: normal;
}
.item-img{
	position: relative;
	cursor: pointer;
	width: auto;
}
.item-img>.i-img{
	margin-left: 3px;
}
.item-show{
	position: absolute;
	z-index: 9;
	top: 0;
	left: 15px;
	transition: all .5s ease-in-out;
}
.item-show img{
	width: 60px;
}
.hover-icon{
	position: relative;
	z-index: 9;
}
.item-show:before{
	position: absolute;
	z-index: 3;
	content: '';
	top: -5px;
	left: -5px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 1px dashed #fff;
	background: #fff;
	transition: all .2s ease-in;
}
.i-img{
	width: 60px;
	position: relative;
	transform: scale(0);
}
.item-img:hover .i-img{
	width: 60px;
	z-index: 99;
	transition: all .5s ease-in-out;
	transform: scale(1);
}
.item-img:hover .item-show:before{
	border: 1px dashed #5E5CEA;
	animation: rotate 4s infinite linear;
	-webkit-animation: rotate 4s infinite linear;
}
.opacitys{
	animation: opacitys .4s .6s linear;
}
.scales{
	animation: scales 2s ease;
}
.fadeLR{
	animation: fadeLR 2s cubic-bezier(.455, .03, .515, .955);
}
.lineRL{
	animation: lineRL 2s cubic-bezier(.455, .03, .515, .955);
}
.translateXY1{
	z-index: 99;
	animation: translateXY1 .8s .8s cubic-bezier(.455, .03, .515, .955);
}
.translateXY2{
	z-index: 99;
	animation: translateXY2 .8s .8s cubic-bezier(.455, .03, .515, .955);
}
.translateXY3{
	z-index: 99;
	animation: translateXY3 .8s .8s cubic-bezier(.455, .03, .515, .955);
}
.translateXY4{
	z-index: 99;
	animation: translateXY4 .8s .8s cubic-bezier(.455, .03, .515, .955);
}
.translateXY5{
	z-index: 99;
	animation: translateXY5 .8s .8s cubic-bezier(.455, .03, .515, .955);
}
@keyframes lineRL {
	0%{
		clip: rect(0,165px,21px,0);
	}
	50%{
		clip: rect(0,0,21px,0);
	}
	100%{
		clip: rect(0,165px,21px,0);
	}
}
@keyframes fadeLR {
	0%{
		transform: translateX(0);
		opacity: 1;
	}
	30%{
		opacity: 0;
	}
	50%{
		transform: translateX(-120px);
		opacity: 0;
	}
	55%{
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes rotate {
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes opacitys {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes scales {
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}
@keyframes translateXY1 {
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(139px,-82px);
	}
}
@keyframes translateXY2 {
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(221px,91px);
	}
}
@keyframes translateXY3 {
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(-28px,180px);
	}
}
@keyframes translateXY4 {
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(-248px,-82px);
	}
}
@keyframes translateXY5 {
	0%{
		transform: translate(0,0);
	}
	100%{
		transform: translate(-11px,-247px);
	}
}
.pro-item1{
	left: 10px;
    bottom: 155px;
}
.pro-item2{
	top: 108px;
    left: 50px;
}
.pro-item3{
	top: 22px;
	left: 408px;
}
.pro-item4{
	top: 285px;
	left: 609px;
}
.pro-item5{
	width: 372px;
	top: 440px;
	left: 380px;
}
.pro-item5 .item-desc.order-12 {
	padding-left: 5px;
}
.track-center{
	top: 132px;
	left: 302px;
}
.track-center>div{
	position: absolute;
}
.guangquan{
}
.cen-item{
	top: 70px;
	left: 76px;
}
.cen-item img{
	width: 70px;
}
.cen-line{
	top: 88px;
	left: 156px;
}
.cen-desc{
	width: 300px;
	top: 58px;
	left: 156px;
}
.cen-desc h3{
	font-size: 32px;
	font-weight: bold;
	color: #333;
	font-family: -webkit-pictograph;
}
.cen-desc p{
	font-size: 14px;
	color: #555;
}
.pro-info{
	padding-top: 40px !important;
	padding-right: 2.5vw !important;
}
.translateY{
	animation: translateY 1s .5s linear;
}
@keyframes translateY {
	0%{
		transform: translateY(0);
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	50%{
		transform: translateY(200px);
		opacity: 0;
	}
	0%{
		transform: translateY(0);
		opacity: 1;
	}
}
.pro-jumbotron .display-3{
	font-size: 24px;
	font-weight: bold;
	color: #000;
}
.pro-jumbotron p.lead{
	margin-top: 24px;
	margin-bottom: 25px;
	line-height: 25px;
	font-size: 14px;
	color: #666;
	font-weight: normal;
}
.pro-jumbotron .sd-btn{
	margin: 0;
	color: #666;
	border-color: #7d7d7d;
}
.pro-jumbotron .sd-btn:hover{
	color: #fff;
	background-color: #108cee;
	border-color: #108cee;
}
.list-unstyled{
	margin-top: 40px;
}
.list-unstyled .media img{
	width: 32px;
	margin-right: 16px;
}
.media-body h5{
	font-size: 16px;
	color: #000;
}
.media-body p{
	font-size: 14px;
	color: #666;
}
.pro-info{
	/* height: 505px; */
	position: relative;
}
.pro-info>div.pro-info-desc{
	opacity: 0;
	position: absolute;
	top: 20px;
	left: 0;
	right: 30px;
	transform: translate3d(0px, 64px, 0px);
	transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}
.pro-info>div.pro-info-desc.active{
	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
	transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.mobile-img{
	display: none;
}
.mobile-img,.mobile-img>img{
	width: 100%;
}

/* 折叠面板 */
/*折叠面板*/
.panel-group {
	display: none;
	width: 95%;
	margin: 20px auto;
}
.panel-group .panel {
	border: 1px solid transparent;
	margin-top: 10px;
}
.panel-group .panel-heading {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid #DDDDDD;
}
.panel .panel-heading .panel-border {
	position: relative;
	float: left;
	margin-right: 20px;
}
.panel-border img {
	position: relative;
	z-index: 9;
	width: 30px;
	height: auto;
	margin: 7px;
}
.panel .panel-heading::before {
	position: absolute;
	z-index: 3;
	content: '';
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	transition: all .2s ease-in;
	border: 1px dashed #5E5CEA;
	animation: rotate 3s infinite linear;
	-webkit-animation: rotate 3s infinite linear;
}
.panel-heading .panel-title {
	height: 100%;
	width: 100%;
	margin-bottom: 0;
}
.panel-heading .panel-title a {
	width: 100%;
	height: 100%;
	font-size: 14px;
	color: #333333;
	float: left;
	text-decoration: none;
	display: block;
	position: relative;
}
.panel .panel-heading .panel-title a::after {
	width: 30px;
	height: 30px;
	content: " ";
	background: url(img/arrow-up.png) no-repeat center/contain;
	background-size: 15px;
	position: absolute;
	right: 15px;
	bottom: 0;
	right: 0;
}
.panel .panel-heading .panel-title.active a::after {
	transform: rotateZ(-180deg);
}
.panel .panel-heading .arrow:active {
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin-top: 10px;
	background: url(img/arrow-up.png) no-repeat center/contain;
	background-size: 15px;
}
.panel-group .panel-body {
	font-size: 12px;
	text-indent: 20px;
	padding: 15px;
	border-left: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}
.order-1{
	order: initial !important;
}
/* 折叠面板end */


/*** Service ***/
.service-item {
    position: relative;
    text-align: center;
}
.solution .service-item .service-text{
	box-shadow: 0px 4px 42px 0px rgba(0,0,0,0.1);
}

.service-item .service-text {
    transition: .3s;
	border-radius: 24px;
	overflow: hidden;
	text-align: left;
}
.service-item .service-text h2.title{
	font-size: 22px;
	font-weight: 600;
	color: #333333;
	padding: 1.8rem 1.5rem;
	background: linear-gradient(227deg, rgba(33, 192, 250, 0.1) 0%, rgba(22, 62, 251, 0.1) 100%);
	transition: all 0.3s ease;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
}
.service-item .service-text h2.title a,
.service-item .service-text h2.title .btn{
	font-weight: 400;
	color: #163EFB;
	font-weight: 500;
}
.service-item:hover .service-text.bg-white h2.title{
	color: #FFFFFF;
	background: linear-gradient(227deg, #21C0FA 0%, #163EFB 100%);
}
.service-item:hover .service-text.bg-white h2.title a,
.service-item:hover .service-text.bg-white .btn{
	color: #FFFFFF;
}
.service-item:hover .service-text.bg-white{
	box-shadow: 0px 4px 42px 0px rgba(0,0,0,0.1);
}
.service-item .service-text .content{
	padding: 20px 30px 5px;
	font-size: 14px;
	font-weight: 400;
	color: #666666;
	line-height: 2;
}
.service-item:hover .service-text .content{
	background: url(../../src/assets/images/hover.png) no-repeat center;
	background-size: 100% calc(100% + 2px);
}
.service-item .service-text ul{
	padding-left: 1rem;
}
.service-item .service-text ul li{
	list-style: none;
	position: relative;
}
.service-item .service-text ul li::before{
	content: '';
	position: absolute;
	left: -1rem;
	width: 8px;
	height: 8px;
	top: 6px;
	border-radius: 50%;
	background: #D8D8D8 linear-gradient(227deg, #21C0FA 0%, #163EFB 100%);
}
.service-item .service-text ul li.border-end::after{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #dee2e6;
}
.service-item .service-text .content .btn{
	font-size: 14px;
	color: #163EFB;
	float: right;
}

/*product plan*/
@media screen and (max-width: 576px) {
	.service-item .service-text h2.title{
		padding: 1rem 15px;
		font-size: 15px;
	}
	.tab-element-box .change-01>p, .tab-element-box .change-02>p{
		max-width: 100%;
        background: #fff;
        padding: 16px;
        border-radius: 10px;
		margin-bottom: 0;
	}
	.tab-element-box .change-box ul li{
		width: 100%;
		margin-top: 20px;
	}
	.tab-element-box .tab-box{
		display: flex;
		justify-content:space-around;
	}
	.tab-element-box .tab-box>span{
		margin: 0;
	}
	.pro-desc h3{
		font-size: 18px;
	}
	.p-5{
		padding: 20px !important;
	}
	.contact-box{
		background-size: 100% auto;
		background-position: top;
	}
}

@media (max-width: 767.98px) {
	.service-item .service-text h2.title{
		padding: 1rem 15px;
		font-size: 15px;
	}
	.tab-element-box .change-01>p, .tab-element-box .change-02>p{
		max-width: 100%;
        background: #fff;
        padding: 16px;
        border-radius: 10px;
		margin-bottom: 0;
	}
	#mobile_footer{
		display: block;
	}
	.pc-img{
		display: none !important;
	}
	.product{
		margin-top: -135px !important;
		background: #fff;
        border-radius: 20px;
	}
	.product-bg-box{
		background-size: 45% auto;
	}
	.product-bg-box>.product>.product-title{
		border-radius: 12px !important;
		padding-bottom: 20px;
		margin-bottom: 15px;
	}
	.mobile-img,.panel-group{
		display: block !important;
	}
}
#contactUs{
	padding-bottom: calc(3rem + 1vw) !important;
}