/*==================================================
 <-- Except  Header Top Menu Area Css-->
===================================================*/
:root {
	--btnMainColor: #386FFF;
	--btnMainColorHover: #58f;
	--mainColor: #386FFF;
	--fontMainColor: #101010;
	--fontSecondColor: #666;
}

html,
body {
	overflow-x: hidden;
}

html {
	scroll-behavior: smooth;

}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-style: normal;
	margin-bottom: 0;
	margin-top: 11px;
	line-height: 1.2;
	font-weight: 700;
	-webkit-transition: .5s;
	transition: .5s;
	font-size: 36px;
}

h1 {
	font-size: 50px;
}

h2 {
	font-size: 35px;

}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

h6 {
	font-size: 18px;
}

a {
	-webkit-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}

a:focus,
.btn:focus {
	text-decoration: none;
	outline: none;
}

a:focus,
a:hover {
	text-decoration: none;
	text-decoration: none;
}


ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.align-center,
.justify-center {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.align-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.btn-primary,
.btn-primary:focus {
	background-color: var(--btnMainColor);
	border-color: var(--btnMainColor);
}

.btn-primary:hover {
	background-color: var(--btnMainColorHover);
	border-color: var(--btnMainColorHover);
}

.btn-ligh,
.btn-ligh:focus {
	background-color: #ffffff;
	border-color: #fff;
	color: #666;
}

.btn-ligh:hover {
	background-color: var(--btnMainColor) !important;
	border-color: var(--btnMainColor);
	color: #fff;
}

.btn-primary:focus,
.btn-outline-primary:focus,
.btn-ligh:focus {
	box-shadow: none;
}

.btn-outline-primary,
.btn-outline-primary:focus {
	border-color: var(--btnMainColor);
	color: var(--btnMainColor);
}


.btn-outline-primary:hover {
	background-color: var(--btnMainColor);
	border-color: var(--btnMainColor);
	box-shadow: none;
	color: #fff;
}


.Except-topbar-section {
	padding: 18px 0;
	background: #19142d;
}

.Except-top-menu ul {
	list-style: none;
}

.Except-top-menu ul li {
	display: inline-block;
	margin-right: 36px;
	position: relative;
}

.Except-top-menu ul li a::after {
	position: absolute;
	content: "";
	height: 30px;
	width: 2px;
	background: #3a3a42;
	left: -22px;
	top: -2px;
	opacity: 0.702;
}

.Except-top-menu ul li.line a::after {
	display: none;
}

.Except-top-menu ul li a {
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	font-size: 14px;
}


.Except-top-menu ul li a i {
	color: #0b4df5;
	font-size: 15px;
	margin-right: 7px;
}

.Except-top-content-menu {
	text-align: right;
}

.Except-top-content {
	display: inline-block;
	margin-right: 25px;
	position: relative;
}

.Except-top-content select#Language {
	background: no-repeat;
	border: none;
	font-size: 17px;
	color: #ffffff;
	font-weight: 400;
	outline: 0;
}

.Except-top-content::before {
	position: absolute;
	content: "";
	height: 30px;
	width: 2px;
	opacity: 0.702;
	background: #3a3a42;
	right: -22px;
}

.Except-top-content option {
	background: #19142d;
	font-size: 16px;
}

.Except-top-social-icon {
	display: inline-block;
}

.Except-top-social-icon ul li {
	display: inline-block;
	margin-left: 13px;
}

.Except-top-social-icon ul li a i {
	color: #ffffff;
	font-size: 15px;
	transition: .5s;
}

.Except-top-social-icon ul li a:hover i {
	color: #0b4df5;
}


/*==================================================
 <-- Except  Header  Menu Area Css-->
===================================================*/

.Except-header-section {
	background: transparent;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
}



.Except-menu {
	text-align: left;
}

.Except-menu ul {
	list-style: none;
}

.Except-menu ul li {
	display: inline-block;
	margin-right: 32px;
}


.Except-menu ul li:last-child {
	margin-right: 0;
}

.Except-menu ul li a {
	display: inline-block;
	color: #C0D5FD;
	font-size: 14px;
	font-weight: 500;
	padding: 20px 0;
	text-decoration: none;
	transition: .5s;
	position: relative;
}


.Except-menu ul li a.on,
.Except-menu ul li a:hover {
	color: #ffffff;
}

.Except-menu ul li a.on::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	height: 2px;
	border-radius: 10px;
	background-color: #ffffff;
}

.Except-menu ul li a i {
	font-size: 12px;
	margin-left: 5px;
}

.Except-menu ul li img {
	width: 18px;
	margin-right: 4px;
}

.Except-search-button {
	text-align: right;
}

.Except-social-menu {
	display: inline-block;
}

.Except-social-menu ul li {
	display: inline-block;
	margin-left: 10px;
}

.Except-social-menu ul li a i {
	color: #141422;
	font-size: 21px;
}

.Except-header-btn {
	text-align: right;
}

.Except-header-btn .btn {
	padding: 5px 20px;
	font-size: 13px;

}


.Except-header-btn .btn-outline-primary,
.Except-header-btn .btn-outline-primary:focus {
	border-color: #fff;
	color: #fff;
}

.Except-header-btn .btn-outline-primary:hover {
	background-color: var(--btnMainColor);
	border-color: var(--btnMainColor);
}

.Except-header-btn .btn+.btn {
	margin-left: 20px;
}

/* sticky css */
.logo a img {
	height: 30px;
}

.sticky-nav {
	left: 0;
	margin: auto;
	top: 0;
	width: 100%;
	position: fixed !important;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
	-webkit-animation: 300ms running fadeInDown;
	animation: 500ms running fadeInUp;
	-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
	transition: 0.5s !important;
	background: #ffffff !important;
	z-index: 9999 !important;
	animation-name: slideInDown;
	padding: 0 30px;
}

.about-nav {
	background: #ffffff;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
}

.logo a img.black {
	display: none;
}

.sticky-nav .logo a .white,
.about-nav .logo a .white {
	display: none;
}

.sticky-nav .logo a .black,
.about-nav .logo a .black {
	display: block;
}

.sticky-nav .Except-menu ul li a.on,
.sticky-nav .Except-menu ul li a:hover,
.about-nav .Except-menu ul li a.on,
.about-nav .Except-menu ul li a:hover {
	color: var(--mainColor);
}

.sticky-nav .Except-menu ul li a.on::before,
.about-nav .Except-menu ul li a.on::before {
	display: none;
}

.sticky-nav .Except-menu ul li a,
.about-nav .Except-menu ul li a {
	color: #101010;
}


.sticky-nav .Except-header-btn .btn-outline-primary,
.sticky-nav .Except-header-btn .btn-outline-primary:focus,
.about-nav .Except-header-btn .btn-outline-primary,
.about-nav .Except-header-btn .btn-outline-primary:focus {
	border-color: var(--btnMainColor);
	color: var(--btnMainColor);
}

.sticky-nav .Except-header-btn .btn-outline-primary:hover,
.about-nav .Except-header-btn .btn-outline-primary:hover {
	background-color: var(--btnMainColorHover);
	border-color: var(--btnMainColorHover);
	color: #fff;
}


/* sub menu area css */
.Except-menu ul .sub-menu {
	background: #fff;
	position: absolute;
	top: 125%;
	/* border-radius: 5px; */
	/* width: 217px; */
	text-align: left;
	margin: 0;
	/* -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%); */
	transition: .5s;
	display: none;
	/* visibility: hidden; */
	/* border-top: 2px solid #0b4df5; */
	opacity: 0;
	z-index: 11;
}

.Except-menu ul .sub-menu ul li {
	display: inline-block;
	margin-left: 0;
	width: 100%;
}

.Except-menu ul .sub-menu ul li a {
	padding: 12px 20px;
	text-align: left;
	width: 100%;
	display: inline-block;
	visibility: inherit !important;
	color: #202020;
	margin: 0;
}

.Except-menu ul .sub-menu ul li a:hover {
	/* background: var(--mainColor) !important;
	color: #fff; */
}

.Except-menu ul .sub-menu.second-menu {
	left: 0;
	right: 0;
	border-top: 1px solid #EFEFEF;
	padding: 0px 0 20px;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
}

.Except-menu ul .sub-menu.second-menu .menu-title {
	margin: 20px 0;
	font-size: 18px;
	font-weight: bold;
	color: var(--fontMainColor);
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box {
	background-color: #F6F7FF;
	border-radius: 0px 20px 20px 20px;
	padding: 20px;
}

.Except-menu ul li:hover .sub-menu {
	display: block;
	/* visibility: visible; */
	opacity: 1;
	top: 99%;
}


.Except-menu ul .sub-menu.second-menu .sub-menu-box .icon-box {
	width: 36px;
	margin-left: 26px;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box img {
	width: 100%;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box ul {
	margin-top: 8px;
	overflow: hidden;
	padding-left: 0;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box li {
	margin-top: 12px;
	padding-bottom: 8px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box li .content {
	flex: 1;
	max-width: 90%;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box .icon {
	width: 18px;
	margin-right: 12px;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box a.title {
	font-size: 16px;
	color: var(--fontMainColor);
	font-weight: bold;
	padding-top: 1px;
	padding: 0;
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box a.title:hover {
	color: var(--mainColor);
}

.Except-menu ul .sub-menu.second-menu .sub-menu-box p {
	color: var(--fontSecondColor);
	font-size: 14px;
	font-weight: 500;
	margin: 8px 0 0;
}




/* header style two */

.Except-header-section.style-two::before {
	background: #1c1632;
	height: 100%;
}

.Except-header-section.style-two::after {
	display: none;
}


/* sola btn */

.Except-btn {
	display: inline-block;
	margin-left: 32px;
	margin-top: 30px;
}

.Except-btn a {
	display: inline-block;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	background: var(--btnMainColor);
	color: #fff;
	padding: 10px 44px;
	border-radius: 3px;
	position: relative;
	z-index: 1;
}

.Except-btn a::before {
	position: absolute;
	content: "";
	background-color: var(--btnMainColorHover);
	width: 100%;
	height: 0%;
	left: 50%;
	top: 50%;
	border-radius: 3px;
	transform: translate(-50%, -50%) rotate(0deg);
	z-index: -1;
	transition: all 500ms ease;
}

.Except-btn a:hover::before {
	height: 104%;
}

/* slider btn */

.Except-btn.slider1 {
	margin: 0;
}

.Except-btn.slider2 {
	margin-left: 14px;
}

.Except-btn.slider2 a {
	background: #fff;
	color: #0f0f0f;
}

.Except-btn.slider2 a:hover {
	color: #ffffff;
}

/* about btn */

.Except-btn.about {
	margin: 0;
}

.Except-btn.about a {
	padding: 16px 33px;
}

/* about style two btn */

.Except-btn.about.about2 {
	margin-top: 50px;
}




/* protfolio btn */

.Except-btn.protfolio {
	text-align: right;
	display: inherit;
	margin-left: 0;
	margin-top: -33px;
}

.Except-btn.protfolio a {
	padding: 14px 20px;
}

.Except-btn.protfolio a:hover {
	color: #0b4df5;
}

.Except-btn.protfolio a::before {
	background: #ffffff;
}

/* call back section btn */

.Except-btn.call-back a::before {
	background: #ffff;
}

.Except-btn.call-back a:hover {
	color: #0b4df5;
}

/*==================================================
 <-- Except  Slider Section Css-->
===================================================*/

.slider-section {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider.jpg);
	background-repeat: no-repeat;
background-color:#1a1c24;
	background-size: cover;
	background-position: center;
	height: 700px;
	position: relative;
}

.slider-section.style-two {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider2.jpg);
}

.slider-section.style-three {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider3.jpg);
}

.slider-section.style-prouduct {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider_product.jpg);
}

.slider-section.style-live {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider_live.jpg);
}

.slider-section.style-solution {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider_solution.jpg);
}

.slider-section.style-operation {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider_operation.jpg);
}

.slider-section.style-about {
	background-image: url(http://jingyu-common.ugiyu.com/website/banner/slider_about.jpg);
}

.slider-content .h4 {
	font-size: 24px;
	line-height: 1.5;
	color: #fefefe;
	font-weight: 500;
	margin-bottom: 28px;
}

.slider-content .banner-height {
	height: 220px;

}

.slider-content .h1 {
	font-size: 36px;
	line-height: 1.5;
	letter-spacing: 2px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 0;
}

.slider-content .line {
	background: linear-gradient(to right, #00A3FF 0%, transparent);
	border-radius: 10px;
	width: 520px;
	height: 7px;
	margin-top: 12px;
}

.slider-content p {
	font-size: 18px;
	line-height: 1.8;
	color: #bbb;
	font-weight: 400;
	width: 57%;
	margin: 20px 0 0px;
}


/* owl nav css */

.slider-section .owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
	display: block;
}

.owl-nav {
	position: absolute;
	bottom: 42%;
	right: 60px;
}

.owl-prev i {
	width: 62px;
	height: 62px;
	line-height: 62px;
	background: #0b4df5;
	text-align: center;
	display: inline-block;
	border-radius: 50%;
	color: #ffffff;
	font-size: 24px;
	transition: .5s;
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
}

.owl-prev i:hover {
	color: #0b4df5;
}

.owl-prev i::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	right: 0;
	bottom: 0;
	background: #ffffff;
	transform: scale(0);
	border-radius: 50%;
	z-index: -1;
	transition: .5s;
}

.owl-prev i:hover::after {
	transform: scale(1);
}

.owl-next i {
	width: 62px;
	height: 62px;
	line-height: 62px;
	background: #ffffff;
	text-align: center;
	display: inline-block;
	border-radius: 50%;
	color: #0b4df5;
	font-size: 24px;
	transition: .5s;
	position: relative;
	z-index: 1;
}

.owl-next i:hover {
	color: #ffffff;
}

.owl-next i::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	right: 0;
	bottom: 0;
	background: #0b4df5;
	transform: scale(0);
	border-radius: 50%;
	z-index: -1;
	transition: .5s;
}

.owl-next i:hover::after {
	transform: scale(1);
}




/*==================================================
 <-- Except  About Section Css-->
===================================================*/

.about-thumb {
	position: relative;
	padding-left: 5%;
}

.about-thumb.right {
	padding-right: 5%;
	padding-left: 0;
}

.about-thumb img {
	width: 100%;
}

/*==================================================
 <-- Except  Section title Css-->
===================================================*/


.section-main-title .h2 {
	font-size: 32px;
	font-weight: bold;
	color: var(--fontMainColor);
	margin-bottom: 52px;
}

.section-main-title .h2 span {
	color: var(--mainColor);
}


.section-main-title .h2+p {
	margin-top: -36px;
}

.section-main-title p {
	font-size: 18px;
	color: #4E5D74;
	margin-bottom: 52px;
}


/*==================================================
 <-- Except  Service Section Css-->
===================================================*/

.container-section {
	padding: 100px 0;
}

.container-section.section-bg {
	background: #F5F7FA;
}



/*==================================================
 <-- Except  Pricing Section Css-->
===================================================*/


a.active {
	color: #1c1632;
}


/*==================================================
 <-- Except  Footer Section Css-->
===================================================*/
footer {
	background-color: #181E2F;
}

footer,
footer a {
	color: #999999;
	position: relative;
	text-decoration: none;
}

footer .footer-top {
	padding-top: 60px;
	border-bottom: 1px solid #505050;
}

footer .footer-top img {
	width: 100%;
}

footer .widget.footer-widget {
	background-color: transparent;
	padding: 0;
	margin-bottom: 20px;
}

footer .widget.footer-widget .footer-logo {

	width: 90px;
}

footer .widget.footer-widget .code-box {
	margin-top: 52px;
}

footer .widget.footer-widget .code-img {
	width: 100px;
	padding: 5px;
	background: #fff;
	margin: 0 auto 12px;
	max-width: 100%;
}

footer .widget.footer-widget .code-img+p {
	margin-top: 12px;
	color: #999;
	font-size: 12px;
	text-align: center;
}

footer .phone-box {
	font-size: 13px;
}


footer .phone-box span+span {
	margin-left: 24px;
}

.footer-bottom .copy-right {
	font-size: 12px;
}

.footer-bottom .copy-right span {
	margin-right: 10px;

}

.footer-bottom .copy-right img {
	vertical-align: -4px;
}

.footer-bottom .copy-right a {
	position: relative;
}

.footer-bottom .copy-right a:hover,
.footer-top a:hover {
	color: var(--mainColor);
}


.footer-bottom .copy-right a:hover::before,
.footer-top a:hover::before {
	width: 100%;
}

footer .widget.footer-widget .widget-title {
	margin-bottom: 30px;
	color: #fff;
	font-size: 24px;
	line-height: 28px;
}

footer .widget.footer-widget ul.nav-widget {
	padding-left: 0;
}


footer .widget.footer-widget ul.nav-widget li {
	color: #fff;
	font-size: 16px;

}

footer .widget.footer-widget ul.nav-widget li a {
	position: relative;
	color: #999;
	font-size: 14px;

}

footer .widget.footer-widget ul.nav-widget li:not(:first-child) {
	margin-top: 8px;
}

footer .widget.footer-widget ul.nav-widget li:nth-child(2) {
	margin-top: 20px
}

footer .widget.footer-widget ul.nav-widget li a:hover {
	color: var(--mainColor);
}


footer .widget.footer-widget .recent-post li {
	padding-left: 100px;
	position: relative;
	min-height: 80px;
	margin-bottom: 20px;
}

footer .widget.footer-widget .recent-post li:last-child {
	margin-bottom: 0;
}

footer .widget.footer-widget .recent-post li h6 {
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 5px;
}

footer .widget.footer-widget .recent-post li h6 a:hover {
	color: #fff;
}

footer .widget.footer-widget .recent-post li .recent-post-img {
	position: absolute;
	left: 0;
	top: 0;
	height: 80px;
	width: 80px;
}

footer .widget.footer-widget .recent-post li .recent-post-img img {
	border-radius: 5px;
}


footer ul.social-icons {
	margin-top: 30px;
}

footer ul.social-icons li {
	display: inline-block;
}

footer ul.social-icons li a {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	color: #556a96;
	border: 2px solid #2d416a;
	text-align: center;
	font-size: 14px;
	line-height: 38px;
	display: inline-block;
	margin-right: 10px;
	-webkit-transition: all 400ms ease-out 0s;
	transition: all 400ms ease-out 0s;
}

footer ul.social-icons li a:hover {
	background-color: var(--mainColor);
	border-color: transparent;
	color: #fff;
}

footer .footer-bottom {
	position: relative;
	padding: 24px 0;
}

footer .footer-bottom p {
	margin-bottom: 0;
}

footer .footer-bottom .footer-nav li {
	display: inline-block;
	margin-right: 25px;
}

footer .footer-bottom .footer-nav li:hover a {
	color: #0b4df5;

}

footer .footer-bottom .back-to-top {
	position: absolute;
	left: 50%;
	z-index: 2;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 35px;
	width: 35px;
	color: #fff;
	border-radius: 50%;
	background: #0b4df5;
	line-height: 35px;
	text-align: center;
	font-size: 20px;
	top: -20px;
}

footer .footer-bottom ul.social-icons {
	margin-top: 0;
}


/*==================================================
 <-- Except  Home Pages Two  Css-->
===================================================*/


/* testimonial section css */


.customer-list {
	background: linear-gradient(180deg, #EEF1F9 0%, #FFFFFF 100%);
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	margin: 0 0 25px;
	padding: 32px;
}

.customer-list .user-heard {
	background-color: #ccc;
	width: 76px;
	height: 76px;
	border-radius: 5px;
	overflow: hidden;
}

.customer-list .user-heard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.customer-list .yinhao {
	position: absolute;
	right: 32px;
	width: 32px;
}

.customer-list .yinhao_up {
	margin-top: 18px;
	width: 32px;
}



.customer-list .user-name {
	font-size: 18px;
	color: var(--fontMainColor);
	font-weight: bold;
	margin-top: 24px;
}

.customer-list .user-name span {
	font-size: 14px;
	color: var(--fontSecondColor);
}

.customer-list .doc {
	height: 176px;
}

.customer-list p {
	margin-top: 15px;
	margin-bottom: 0;
	color: var(--fontSecondColor);
	font-size: 14px;
	line-height: 1.8;
}



/* owlcarousel css */
.slider-list .owl-dots {
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 105px;
}

.slider-list .owl-dot {
	margin-right: 10px;
	height: 4px;
	width: 20px;
	border-radius: 50px;
	display: inline-block;
	background: #ffffff;
}

.slider-list .owl-dot.active {
	height: 4px;
	width: 40px;
	background: #386FFF;
	opacity: 1;
}


.testimonial-section .owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
	display: none;
}

.testimonial-section .owl-carousel .owl-item img {
	display: inline-block;
}

.testimonial-section .owl-dots {
	text-align: center;
	margin-top: 24px;
}

.testimonial-section .owl-dot {
	margin-right: 9px;
	height: 5px;
	width: 52px;
	background-color: #D9E4F2;
	border-radius: 50px;
	display: inline-block;
}

.testimonial-section .owl-dot.active {
	background-color: var(--mainColor);
}






/*
<!-- ============================================================== -->
<!-- Except  Scrollup Section -->
<!-- ============================================================== -->*/


@-webkit-keyframes ripple-blue {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
	}

	100% {
		-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
	}
}

@keyframes ripple-blue {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
	}

	100% {
		-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
	}
}





/*===========================
<-- Except  Loader Css -->
=============================*/
.loader-wrapper {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	transition: 0.8s 1s ease;
	z-index: 666;
}

.loader {
	position: relative;
	display: block;
	z-index: 201;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin: -50px 0 0 -50px;
	border-radius: 50%;
	transition: all 1s 1s ease;
	border: 3px solid transparent;
	border-top-color: #0b4df5;
	-webkit-animation: spin 1.5s linear infinite;
	-moz-animation: spin 1.5s linear infinite;
	-o-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}

.loader:before {
	position: absolute;
	content: '';
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-left-color: #1c1632;
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	-o-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

.loader:after {
	position: absolute;
	content: '';
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-right-color: #fff;
	-webkit-animation: spin 2.5s linear infinite;
	-moz-animation: spin 2.5s linear infinite;
	-o-animation: spin 2.5s linear infinite;
	animation: spin 2.5s linear infinite;
}

/*/ Here the Magic /*/

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.loader-wrapper .loder-section {
	position: fixed;
	top: 0;
	width: 50%;
	height: 100%;
	background: #111;
	z-index: 2;
}

.loader-wrapper .loder-section.left-section {
	left: 0;
	transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
	right: 0;
	transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
	left: -100%;
}

.loaded .loder-section.right-section {
	right: -100%;
}

.loaded .loader-wrapper {
	visibility: hidden;
}

.loaded .loader {
	top: -100%;
	opacity: 0;
}


/* 首页产品 */
.product-idx-box .product-row {
	display: flex;
}

.product-idx-box .product-row+.product-row {
	margin-top: 24px;
}

.product-idx-box .product-col {
	background-color: #fff;
	border: 1px solid #EFF2F6;
	flex: 1;
	max-width: 100%;
	padding: 24px 6px 20px 24px;
	position: relative;
	z-index: 2;
}

.product-idx-box .product-col:first-child {
	margin-right: 24px;
	border-radius: 5px;
	border: none;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.2);
	background: url('http://jingyu-common.ugiyu.com/website/banner/main/bg_product.png') no-repeat;
	background-size: cover;
}

.product-idx-box .product-col:first-child .name {
	font-size: 20px;
}

.product-idx-box .product-col:first-child .doc {
	height: 46px;
}

.product-idx-box .product-col:nth-child(2) {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.product-idx-box .product-col+.product-col:not(:nth-child(2)) {
	border-left: none;
}

.product-idx-box .product-col:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.product-idx-box .product-col .name {
	font-size: 18px;
	font-weight: bold;
}

.product-idx-box .product-col .doc {
	font-size: 13px;
	color: var(--fontSecondColor);
	margin-top: 8px;
	overflow: hidden;
}

.product-idx-box .product-col:hover {
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.2);
	z-index: 5;
}

.product-idx-box .product-col+.product-col {
	border-left-top-radius: 0;
	border-left-top-radius: 0;
}

.product-idx-box .product-col .box-btn {
	margin-top: 10px;
}

.product-idx-box .product-col .box-btn .btn {
	padding: 6px 24px;
	font-size: 13px;
}

.product-idx-box .product-col .box-btn .btn+.btn {
	margin-left: 16px;
}

.product-idx-box .product-col .tag-row {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.product-idx-box .product-col .tag-col {
	background-color: #F1F2F5;
	color: #7A91AD;
	font-size: 12px;
	padding: 3.5px 12px;
	border-radius: 2px;
	margin-right: 12px;
	margin-top: 12px;
}

/* 客户服务 */
.customer-service-box {
	display: flex;
	flex-wrap: wrap;
	margin: -16px -24px;
}

.customer-service-box .customer-service-col {
	display: flex;
	align-items: flex-start;
	flex: 1;
	margin: 16px 24px;
	background: #FFFFFF;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	padding: 32px;
}

.customer-service-box .customer-service-col .icon {
	width: 72px;
}

.customer-service-box .customer-service-col img {
	width: 100%;
}

.customer-service-box .customer-service-col .content {
	flex: 1;
	margin-left: 14px;
}

.customer-service-box .customer-service-col .name {
	font-size: 20px;
	color: var(--fontMainColor);
	font-weight: bold;
	margin-top: 15px;
}

.customer-service-box .customer-service-col p {
	color: var(--fontSecondColor);
	font-size: 14px;
	line-height: 1.8;
	margin-top: 24px;
	margin-bottom: 0;
}

/* 选择我们 */
.choose-row {
	display: flex;
	align-items: flex-start;
	margin: 0 -26px;
}

.choose-row .choose-col {
	text-align: center;
	padding: 36px;
	background: linear-gradient(#EEF1F9, #fff);
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	flex: 1;
	margin: 0 26px;
}

.choose-row .choose-col img {
	width: 180px;
}

.choose-row .choose-col .title span {
	font-size: 28px;
	color: var(--fontMainColor);
	font-weight: bold;
	position: relative;
	z-index: 1;
}

.choose-row .choose-col .title span::after {
	content: '';
	position: absolute;
	left: -12px;
	right: -12px;
	bottom: 5px;
	z-index: -1;
	height: 5px;
	border-radius: 5px;
	background: linear-gradient(#38CFFF, #386FFF);
}

.choose-row .choose-col p {
	font-size: 16px;
	font-weight: 400;
	color: var(--fontSecondColor);
	margin: 0;
}

.choose-row .choose-col .dec {
	margin-top: 36px;
	height: 70px;
}

/* 合作伙伴 */
.partner-row {
	margin-top: 16px;
	margin-bottom: -12px;
	display: flex;
	flex-wrap: wrap;
}

.partner-col {
	text-align: center;
	flex: 0 0 20%;
	max-width: 20%;
}

.partner-col .padding {
	margin: 12px;
	position: relative;
	box-shadow: 0px 4px 12px 0px rgba(30, 47, 93, 0.1);
}

.partner-col img {
	width: 100%;
}

/*申请使用 */
.apply-input-box {
	display: flex;
	background: #FFFFFF;
	border-radius: 5px;
	padding: 2px 2px 2px 24px;
	width: 520px;
	margin: 0 auto;
}

.apply-input-box .form-input {
	border: none;
	flex: 1;
	outline: none;
}

.apply-input-box .form-input::placeholder {
	color: var(--fontSecondColor);
}

.apply-input-box .btn {
	padding: 12px 32px;
}

/* 痛点 */

.tongdian-col {
	display: flex;
	align-items: flex-start;
}

.tongdian-col+.tongdian-col {
	margin-top: 32px;
}

.tongdian-col .icon {
	width: 30px;
	margin-right: 12px;
}

.tongdian-col .icon img {
	width: 100%;
}

.tongdian-col .content {
	flex: 1;
	max-width: 100%;
	padding-top: 2px;
}

.tongdian-col .icon+.content {
	max-width: 88%;
}

.tongdian-col .content .title {
	font-size: 16px;
	color: var(--fontMainColor);
	font-weight: bold;
	padding-bottom: 4px;
}

.tongdian-col .content .big-title {
	font-size: 28px;
	color: var(--fontMainColor);
	font-weight: bold;
}

.tongdian-col .content p {
	font-size: 14px;
	color: var(--fontSecondColor);
	margin: 12px 0 0;
}

.tongdian-col.live-col .content p {
	margin-top: 20px;
}

.tongdian-col .content p img {
	width: 16px;
	margin-right: 5px;
	vertical-align: -3px
}

.ability-list-row {
	display: flex;
	flex-wrap: wrap;
	margin-top: 8px;
	overflow: hidden;
}

.ability-col {
	display: flex;
	align-items: center;
	margin-top: 22px;
	flex: 0 0 25%;
	max-width: 25%;
}

.ability-col .icon {
	width: 16px;
	margin-right: 8px;
}

.ability-col .icon img {
	width: 100%;
}

.ability-col .content {
	font-size: 14px;
	color: var(--fontSecondColor);
	margin-top: 3px;
}

.solution-btn {
	margin-top: 42px;
}

.solution-btn .btn {
	padding: 9px 28px;
}

.solution-btn .btn-ligh {
	background-color: #fff;
	box-shadow: 0px 4px 12px 0px rgba(30, 47, 93, 0.1);
}

.solution-btn .btn+.btn {
	margin-left: 32px;
}

/* 核心功能 */
.more-function-row,
.live-row {
	display: flex;
	flex-wrap: wrap;
	margin: -12.5px;
}

.more-function-col {
	flex: 0 0 20%;
	max-width: 20%;
}

.live-more-function-col {
	max-width: 100%;
}



.more-function-col .padding {
	margin: 12.5px;
	padding: 24px;
	height: 170px;
	box-sizing: border-box;
	border-radius: 10px;
	cursor: pointer;
	background: linear-gradient(#EEF1F9, #FFFFFF);
	box-shadow: 0px 4px 12px 0px rgba(30, 47, 93, 0.1);
}

.live-more-function-col .padding {
	text-align: center;
	margin: 12.5px 0;
}

.more-function-col .padding .icon-content .icon,
.live-more-function-col .padding .icon {
	width: 65px;
	margin: 0 auto 18px auto;
}



.more-function-col .padding .icon-content .icon img {
	width: 100%;
}

.more-function-col .padding .icon-content,
.more-function-col .padding .font-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.more-function-col .padding .title {
	font-size: 18px;
	font-weight: bold;
	color: var(--fontMainColor);
}

.more-function-col .padding .font-content .title {
	margin-top: 2px;
}

.more-function-col .padding .font-content {
	display: none;
	opacity: 0;
}

.more-function-col .padding .font-content p {
	width: 155px;
	color: var(--fontSecondColor);
	font-size: 14px;
	margin: 14px 0 0;
}

.more-function-col .padding:hover .icon-content {
	display: none;
}

.more-function-col .padding:hover .font-content {
	opacity: 1;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	display: flex;
}

.live-row .more-function-col {
	flex: 0 0 25%;
	max-width: 25%;
}

.live-row .more-function-col .padding {
	background: #FFFFFF;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	text-align: center;
	height: 300px;
	padding: 40px 24px;
	cursor: initial;
}

.live-row .more-function-col .padding .title {
	margin-top: 28px;
}

.live-row .more-function-col .padding p {
	color: var(--fontSecondColor);
	font-size: 14px;
	margin: 6px 0 0;
}

.live-row .more-function-col .padding p:first-child {
	margin: 20px 0 0;
}

/* 解决方案 */
.solution-plan-col a {
	position: relative;
	display: block;
	margin-top: 24px;
}

.solution-plan-col a img {
	width: 100%;
}

.solution-plan-col a .name {
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 对比 */
.pk-box {
	position: relative;
	margin: 0 -24px;
}

.pk-bg {
	width: 100%;
}

.pkbefore,
.pkafter {
	position: absolute;
	top: 120px;
	z-index: 2;
	width: 215px;
}

.pkbefore {
	text-align: left;
	left: 10%;
}

.pkafter {
	text-align: left;
	right: 10%;
}

.pkbefore .title,
.pkafter .title {
	font-size: 18px;
	font-weight: bold;
	color: var(--fontMainColor);
}

.pkbefore .title {
	text-align: right;
}

.pkbefore .content,
.pkafter .content {
	margin-top: 12px;
	overflow: hidden;
}

.pkbefore .content p,
.pkafter .content p {
	font-size: 14px;
	color: var(--fontSecondColor);
	margin: 12px 0;
}

/* 媒体报道 */
.news-col {
	background-color: #F5F7FA;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	overflow: hidden;
}

.news-col .img {
	width: 100%;
	height: 165px;
	text-align: center;
	line-height: 165px;
	overflow: hidden;
	background-color: #fff;
}

.news-col .img img {
	height: 100%;
}

.news-col .content {
	padding: 0 32px;
	box-sizing: border-box;
	height: 250px;
	overflow: hidden;
}

.news-col .content .title {
	font-size: 18px;
	font-weight: bold;
	color: var(--fontMainColor);
	margin-top: 16px;
}

.news-col .content p {
	margin: 24px 0 0;
	color: var(--fontSecondColor);
	line-height: 1.8;
	font-size: 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	word-break: break-all;
}

.news-col .content p+p {
	margin-top: 0;
}

/* 运营思考 */
.think-box {
	padding: 24px;
	background: #FFFFFF;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
}

.think-box+.think-box {
	margin-top: 24px;
}

.think-box .big-title {
	font-size: 18px;
	font-weight: bold;
	vertical-align: -6px;
}

.think-box .big-title img {
	width: 24px;
	margin-right: 8px;
	vertical-align: middle;
}

.think-col {
	display: flex;
	cursor: pointer;
}

.think-col+.think-col {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #EFEFEF;
}

.think-col .img {
	width: 276px;

	margin-right: 22px;
	overflow: hidden;
}

.think-col .img img {
	width: 100%;
	border-radius: 10px;
}

.think-col .content {
	flex: 0 0 63%;
	max-width: 63%;
}

.think-col .content .title {
	font-size: 18px;
	font-weight: bold;
	color: var(--fontMainColor);
}

.think-col:hover .content .title {
	color: var(--mainColor);
}

.think-col .content p {
	margin: 6px 0 0;
	color: var(--fontSecondColor);
	line-height: 1.5;
	font-size: 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
}

.think-col .tag-row,
.think-box .tag-row {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.think-box>.tag-row {
	padding: 8px 0px 0 32px;
	margin-right: -5px;
}

.think-col .tag-row .tag-col,
.think-box .tag-row .tag-col {
	background-color: #F1F2F5;
	color: #7A91AD;
	font-size: 12px;
	text-align: center;
	padding: 3.5px 8px;
	border-radius: 2px;
	margin-right: 12px;
	margin-top: 16px;
	box-sizing: border-box;
	width: 64px;
}

.think-col .content .date {
	color: var(--fontSecondColor);
	font-size: 14px;
	margin-top: 16px;
}

.zhiyuan-box {
	background-color: #F5F7FA;
	border-radius: 10px;
	overflow: hidden;
	margin: 30px 0 0;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.zhiyuan-box .code {
	margin: 36px 42px 24px;
}

.zhiyuan-box .code img {
	width: 100%;
}

.zhiyuan-box p {
	font-size: 14px;
	color: var(--fontSecondColor);
	margin: 0 0 16px;
}

/* 关于鲸域 */
.about-box {
	background-color: #fff;
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	padding: 32px;
}

.company-profile {
	padding: 0px 10% 0 20px;
}

.company-profile p {
	font-size: 14px;
	color: var(--fontSecondColor);
	margin: 12px 0;
}

.company-profile p+p {
	margin-top: 32px;
}

.about-img img {
	width: 100%;
	border-radius: 10px;
}

/* 鲸域的企业文化 */
.company-culture-col {
	box-shadow: 0px 8px 24px 0px rgba(30, 47, 93, 0.1);
	border-radius: 10px;
	background-color: #fff;
	padding: 24px;
}

.company-culture-col+.company-culture-col {
	margin-top: 24px;
}

.company-culture-col .title {
	font-size: 24px;
	color: var(--fontMainColor);
	font-weight: bold;
}

.company-culture-col p {
	font-size: 16px;
	color: var(--fontSecondColor);
	margin: 24px 0 0;
}

.culture-img {
	width: 100%;
	border-radius: 10px;
}

.company-culture-col .content {
	padding: 0 0 12px 28px;
}

.company-address {
	width: 420px;
	margin: 0 auto;
}

.company-address img {
	width: 100%;
	border-radius: 10px;
}


/* 手风琴 */

/* 手风琴 */
.w-accor {
	overflow: hidden;
	position: relative;
	background-color: #fff;
}

.w-accor ul,
.w-accor li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.w-accor ul {
	width: 101%;
}

.w-accor li {
	position: relative;
	overflow: hidden;
	float: left;
	height: 420px;
	padding-right: 12px
}

.w-accor li .img_ar {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
	opacity: 1;
	width: 100% !important;
	height: 420px;
	border-radius: 5px;
}

.w-accor li.cur .img_ar {
	opacity: 0.2;
}

.accorClick li {
	cursor: pointer;
}

.w-accor li .item {
	position: relative;
}

.w-accor li>a {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.w-accor .h3 {
	font-size: 18px;
	font-weight: bold;
}

.w-accor .unactive {
	font-size: 14px;
	color: #fff;
	margin-top: 16px;
	min-height: 60px;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	opacity: 1;
	*filter: alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	position: relative;
}

.w-accor .unactive::before {
	content: '';
	background-color: #fff;
	width: 60px;
	height: 3px;
	border-radius: 5px;
	position: absolute;
	bottom: -24px;
}

.w-accor .acr_p {
	margin-top: 0.5em;
}

.w-accor li .img {
	display: block;
}

.w-accor li .imgon {
	display: none;
}

.w-accor li img {
	max-width: 100%;
	border-radius: 5px;
	visibility: hidden;
}

.w-accor li .cont_ar {
	color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0;
}

.w-accor li .dec_ar {
	padding: 32px 24px;
	height: 100%;
	position: relative;
}

.w-accor li .acr_p {
	height: 0;
	overflow: hidden;
	line-height: 1.5;
	margin: 0;
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
	opacity: 0;
	*filter: alpha(opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.w-accor li .plan-btn-box {
	display: none;
	opacity: 0;
	*filter: alpha(opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.w-accor li .plan-btn-box .btn {
	padidng: 9px auto;
	flex: 1;
	max-width: 50%;
}

.w-accor li .plan-btn-box .btn-ligh {
	box-shadow: 0px 2px 8px 0px rgba(30, 47, 93, 0.1);
}

.w-accor li .plan-btn-box .btn+.btn {
	margin-left: 24px;
}

.w-accor li.cur .img {
	display: none;
}

.w-accor li.cur .imgon {
	display: block;
}

.w-accor li.cur .cont_ar {
	color: var(--fontMainColor);
}

.w-accor li.cur .unactive {
	display: none;
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
	opacity: 0;
	*filter: alpha(opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.w-accor li.cur .acr_p {
	min-height: 14.8em;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	opacity: 1;
	*filter: alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	color: var(--fontSecondColor);
	margin-top: 24px;
}

.w-accor li.cur .acr_p p {
	margin: 0 0 12px;
}

.w-accor li.cur .acr_p p i {
	color: var(--mainColor);
	margin-right: 6px;
}

.w-accor li.cur .plan-btn-box {
	transform: translateY(0);
	-webkit-transform: translateY(0);
	opacity: 1;
	*filter: alpha(opacity=100);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	display: flex;
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 40px;
}






.modal-box .bgblack {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1100;
	background-color: rgba(0, 0, 0, 0.6);
}

.modal-box .content {
	/* position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2000;
	background-color: #fff;
	*/
	padding: 32px 42px;
	border-radius: 10px;
	text-align: center;
}

.modal-box .content img {
	width: 160px;
}

.modal-box .content .p {
	font-size: 14px;
	color: var(--fontSecondColor);
	margin: 12px -20px 0;
}

.modal-box .content button {
	margin-top: 20px;
	width: 80%;
}


.float-right-box {
	position: fixed;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	z-index: 66;
}


.float-right-box .nav-row {
	background-color: #fff;
	border-radius: 5px;
	padding: 16px 10px;
	border-radius: 5px;
	box-shadow: 0px 2px 8px 0px rgba(30, 47, 93, 0.1);
}

.float-right-box .nav-col {
	position: relative;
}

.float-right-box .nav-col a {
	display: block;
	text-decoration: none;
	text-align: center;

}

.float-right-box .nav-col img {
	width: 32px;
	display: inline-block;
}

.float-right-box .nav-col .name {
	color: var(--fontMainColor);
	font-size: 14px;
	margin-top: 6px;
}

.float-right-box .nav-col+.nav-col {
	margin-top: 12px;
	padding-top: 12px;
}

.float-right-box .nav-col+.nav-col::before {
	content: '';
	height: 2px;
	background-color: #F1F2F5;
	position: absolute;
	left: 10%;
	right: 10%;
	top: 0;
}

.float-right-box .flex-section {
	visibility: hidden;
	opacity: 0;
	background: #fff;
	box-shadow: 0px 4px 16px 0px rgba(30, 47, 93, 0.1);
	padding: 16px;
	position: absolute;
	top: -15px;
	right: 90px;
	z-index: 5;
	width: 220px;
	border-radius: 5px;
	transition: all 0.5s ease;
}

.float-right-box .nav-col:hover .flex-section {
	opacity: 1;
	visibility: visible;
}

.float-right-box .flex-section .title {
	color: var(--fontMainColor);
	font-weight: bold;
	font-size: 16px;
}

.float-right-box .flex-section p {
	color: var(--fontSecondColor);
	font-size: 14px;
	margin-top: 6px;
}

.float-right-box .flex-section .code {
	width: 120px;
	margin: 24px auto;
}

.float-right-box .flex-section .code img {
	width: 100%;
}

.float-right-box .flex-section .form input {
	border-radius: 5px;
	outline: 0;
	border: 1px solid #CECECE;
	font-size: 14px;
	padding: 5px;
}

.float-right-box .flex-section .form button {
	margin-top: 12px;
}