/*-----------------------------------------------------------------------
fonts [*1]
-------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------
Global [*2]
-------------------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 14px;
	line-height: 1.5;
	/*letter-spacing: .8px;*/
	background-color: #1b1b1b !important;
	color: #959595;
	font-family: '微软雅黑';

}




.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.work-pic,
.work-item {
	border-radius: 10px;
	overflow: hidden;
}

.work-pic img {
	border-radius: 10px;
	transition: transform 0.3s ease;
	/* 添加过渡效果 */
}

.work-pic img:hover {
	transform: scale(1.02);
	/* 鼠标悬停时放大到120% */
}

.work-pic img:active {
	transform: scale(1.05);
	/* 鼠标悬停时放大到120% */
}

.pagebar {
	text-align: center;
}



.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 样式内容 */
}

.des-con {
	background: linear-gradient(45deg, rgba(37, 38, 43, 1) 0%, rgba(0, 0, 0, 0.8) 100%);
	/*backdrop-filter: blur(8px) saturate(160%);*/
	box-shadow: rgba(0, 0, 0, 0.16) 0px -2px 6px 1px;
	padding: 10px;
	position: absolute;
	bottom: 15px;
	margin: 0 auto;
	z-index: 10;
	width: calc(100% - 30px);
	border-radius: 0 0 10px 10px;
	font-size: 13px;
}

.nortext {
	color: #757575;
	font-size: 14px;
	line-height: 20px;
	margin-top: 10px;
}

.mdbox {
	padding: 0 15px;


}

.taglist {
	border-radius: 10px;
	overflow: hidden;
	height: 120px;
	position: relative;
}



.tagimg {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: scroll;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background-size: cover;
	height: 120px;
	transition: transform 0.2s;
	filter: blur(0px);
}

.tagcon {

	position: relative;
	align-items: center;
	display: flex;
	min-height: 120px;
	-webkit-box-align: center;
	background-color: #0000008e;
	/** backdrop-filter: saturate(180%) blur(0px);**/
}

.tagcon:hover {
	background-color: #0000006d;
	/**backdrop-filter: saturate(180%) blur(0px);**/
}

.tagtitle {
	font-size: 24px;
	position: relative;
	padding: 20px 20px 15px;
	width: 100%;
	text-align: center;
}



.tagdec {
	font-size: 14px;
	color: #e3e3e3;

}


/*ajax弹窗*/
.close-btn {
	color: rgb(255, 255, 255);
	font-size: 24px;
	line-height: 24px;
	position: absolute;
	right: 30px;
	top: 30px;
	z-index: 1000;
	padding: 10px;
	transition: transform 0.3s ease;
	/*添加过渡效果 */
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 40px;
}

.close-btn:hover {
	transform: scale(0.8);
	/* 鼠标悬停时旋转180度并缩小到80% */
}


@keyframes modalFadeIn {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes modalFadeOut {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}

.modal.fade-in {
	animation: modalFadeIn 0.3s ease-in-out;
}

.modal.fade-out {
	animation: modalFadeOut 0.3s ease-in-out;
}


.modal {
	display: none;
	position: fixed;
	z-index: 999;
	backdrop-filter: saturate(180%) blur(40px);
}

.modal-content {
	background-color: rgba(34, 34, 34, 0.8);
	-webkit-box-shadow: none;
  	box-shadow: none;
}

.content_ajax {
	overflow-y: auto;
	width: 100vw;
	height: 100vh;
	position: relative;
}

/*end ajax弹窗*/


.show-box {
	margin: 0 auto;
	width: 50% !important;
	height: auto;

}

.show-con {
	padding: 0;
	width: calc(100% - 400px);
	float: left;
}

.show-dec {
	width: 400px;
	padding: 15px;
	float: left;
}

.mantine-Table-root {
	width: 100%;
	border-collapse: collapse;
	caption-side: top;
	color: rgb(193, 194, 197);
	line-height: 1.55;
}

.mantine-Table-root td {
	padding: 7px 8px;
	font-size: 14px;
	border: 1px solid rgba(55, 58, 64, 0.441);
	background-color: rgba(37, 38, 43, 0.752);


}

.mantine-Text-root {
	width: 30%;
}

.mantine-Table-root td.mantine-text {
	color: inherit;
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none;
	font-weight: 500;
	background-color: rgba(0, 0, 0, 0);
}


.img-box {
    background: #2727278f;
	border-radius: 10px;
	overflow: hidden;
}

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

/*切换优化*/

.tab-buttons-scrollable {
	white-space: nowrap;
	overflow: hidden;
	padding-top: 20px;
	padding-bottom: 5px;
}

.tab-buttons-scrollable::-webkit-scrollbar {
	width: 0.5em;
	height: 0.5em;
}

.tab-buttons-scrollable::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 2em;
}

.tab-buttons-scrollable::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

.uicon {
	border-radius: 4px;
	padding: 4px 6px 6px 6px;
	font-size: 12px;
}

.ucname {
	padding: 2px 10px 3px 10px;
	position: absolute;
	border-radius: 50px;
	top: 20px;
	left: 20px;
	z-index: 10;
	font-size: 13px;

}

/*特色标签*/
.u-color-a {
	background: rgba(25, 113, 194, 0.3);
	color: rgb(165, 216, 255);
}

.u-color-b {
	background: rgba(103, 65, 217, 0.3);
	color: rgb(208, 191, 255);
}

.u-color-c {
	background: rgba(232, 89, 12, 0.3);
	color: rgb(255, 216, 168);
}

.u-color-d {
	background: rgba(158, 63, 47, 0.3);
	color: rgb(255, 194, 183);
}

.u-color-e {
	background: rgba(46, 165, 86, 0.3);
	color: rgb(187, 255, 203);
}

.u-color-f {
	background: rgba(84, 105, 160, 0.3);
	color: rgb(204, 217, 255);
}

.u-color-g {
	background: rgba(203, 142, 36, 0.3);
	color: rgb(255, 233, 194);
}

.u-color-h {
	background: rgba(111, 201, 158, 0.3);
	color: rgb(219, 255, 238);
}

.u-color-i {
	background: rgba(176, 95, 150, 0.3);
	color: rgb(255, 206, 234);
}

.u-color-j {
	background: rgba(21, 180, 190, 0.3);
	color: rgb(188, 237, 242);
}

.u-color-k {
	background: rgba(229, 78, 141, 0.3);
	color: rgb(255, 198, 228);
}

.u-color-l {
	background: rgba(84, 115, 61, 0.3);
	color: rgb(193, 222, 168);
}

.u-color-m {
	background: rgba(201, 133, 208, 0.3);
	color: rgb(255, 219, 245);
}

.u-color-o {
	background: linear-gradient(45deg, rgba(37, 38, 43, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
	color: #e5e5e5;
}

.u-tabs {
	padding: 2px 12px;
	position: relative;
	width: auto;
	float: left;
	margin: 5px 10px 5px 0;
	border-radius: 4px;
}

.u-tabs span {
	z-index: 4;
	position: relative;
	font-size: 12px;
	font-weight: 500;

}

.u-tabs i {
	background: #00e4ff;
	position: absolute;
	top: -2px;
	left: 0px;
	width: 8px;
	height: 8px;
	z-index: 2;
	display: block;
	border-radius: 1px;
	transform: skewX(-12deg);
}

/*
.u-tabs:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    transform: skewX(-12deg);
	background: rgba(25, 113, 194, 0.2);
    color: rgb(165, 216, 255);
}


.u-tabs:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transform: skewX(-15deg);
    background: inherit;
    box-shadow: inset -2px 4px 6px 0 rgba(0, 234, 241, 0.4);
    border-radius: 1px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
*/


/*全局加载*/
div#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	overflow: visible;
	/*background: #fff url('../img/preloader.gif') no-repeat center center; */
	background-color: rgba(34, 34, 34, 0.8) !important;
	backdrop-filter: saturate(180%) blur(40px);
	background-size: 400px;
}

@media (max-width: 575px) {
	div#preloader {
		background-size: 250px;
	}
}


.ul-li ul {
	margin: 0;
	padding: 0;
}

.ul-li li {
	display: inline-block;
	list-style: none;
}

.ul-li-block li {
	display: block;
}

section {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	transition: .3s all ease-in-out;
	color: #e5e5e5;

}

.form-control:focus,
button:visited,
button.active,
button:hover,
button:focus,
input:visited,
input.active,
input:hover,
input:focus,
textarea:hover,
textarea:focus,
a:hover,
a:focus,
a:visited,
a.active,
select,
select:hover,
select:focus,
select:visited {
	outline: none;
	box-shadow: none;
	text-decoration: none;
	color: #e3e3e3;
}

.form-control {
	box-shadow: none;
}

.ul-li ul {
	margin: 0;
	padding: 0;
}

.ul-li li {
	display: inline-block;
	list-style: none;
}

.ul-li-block li {
	display: block;
}

.disply {
	display: table;
	width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;

}



#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background: #fff url('../img/loader_img.gif') no-repeat center center;
}

.deep-black {
	color: #e3e3e3;
}

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

.tlinks {
	text-indent: -9999px;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}


.nb_tbox {
	padding-top: 100px !important;
}

.nb_tbox2 {
	padding-top: 110px !important;
}

.nb_tbox3 {
	padding-top: 0px !important;
}

/* Isotope Transitions
------------------------------- */
.isotope,
.isotope .item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-ms-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
}

.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-ms-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width;
}

.isotope .item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	-o-transition-property: top, left, opacity;
	transition-property: transform, opacity;
}

.section-title h2 {
	font-size: 36px;
}

.border-top {
	position: relative;
}

.border-top:before {
	content: '';
	position: absolute;
	background-color: #e5e5e5;
	width: 88%;
	height: 1px;
	left: 0;

}

.table-display {
	display: table;
	width: 100%;
}

/*----------------------------------
padding setting
-----------------------------------*/
.pb10 {
	padding-bottom: 10px;
}

.pb20 {
	padding-bottom: 20px;
}

.pb30 {
	padding-bottom: 30px;
}

.pb40 {
	padding-bottom: 40px;
}

.pb45 {
	padding-bottom: 45px;
}

.pb55 {
	padding-bottom: 55px;
}

.pb75 {
	padding-bottom: 75px;
}

.pb95 {
	padding-bottom: 95px;
}

.pt10 {
	padding-top: 10px;
}

.pt30 {
	padding-top: 30px;
}

.pt40 {
	padding-top: 40px;
}

.pt90 {
	padding-top: 90px;
}

.pt70 {
	padding-top: 70px;
}
.pttag{
	padding-top: 70px;

}
.pt50 {
	padding-top: 50px;
}


/*----------------------------------
Margin setting
-----------------------------------*/
.mt15 {
	margin-top: 15px;
}

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.mb30 {
	margin-bottom: 30px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb10 {
	margin-bottom: 10px;
}

.mt60 {
	margin-top: 60px;
}

.mt50 {
	margin-top: 50px;
}

.mt170 {
	margin-top: 170px;
}

.ml50 {
	margin-left: 50px;
}

/*-----------------------------------------------------------------------
Start of Page head section [*3]
-------------------------------------------------------------------------*/
.page-head-section {
	/**background-image: url(../img/banner/banner-1.jpg);**/
	/**background:url(../img/banner/banner-1.jpg) repeat 50% 50% fixed;**/
	background-color: #0e0e0e;
	padding-bottom: 300px;
	background-position: 50% 0%;
	position: relative;
	background-repeat: no-repeat;
	overflow: visible;
	top: 80px;
	margin-bottom: 100px;
}

.page-head-title {
	color: #fff;
}

.page-head-overlay,
.page-head-overlay-2 {
	/**background-color: rgb(249, 249, 249);**/
	opacity: 0.90;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}

.page-head-overlay-2 {
	/* background-color: rgb(0, 0, 0); */
	opacity: 0.90;
}

.page-head-effect {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#page-head-effect,
#page-head-effect canvas {
	height: 420px !important;
	width: 100%;
}

.page-head-title h1 {
	color: #090909;
	padding-bottom: 15px;
}

.social-title {
	transform: rotate(-90deg);
	text-align: center;
	position: absolute;
	left: 0;
}

.social-title span {
	color: #090909;
}

.page-head-content {
	position: absolute;
	top: 25%;
	left: 0;
	/* transform: translateX(-30%); */
	right: 0;
	text-align: center;
	margin: 0 auto;
}

.page-head-social {
	height: 200px;
	width: 200px;
	border: 2px solid #090909;
	border-top: none;
	position: relative;
	/* margin-top: 30px; */
	margin: 30px auto 0px;
}

.page-head-social:before {
	content: '';
	position: absolute;
	background-color: #090909;
	width: 20px;
	height: 2px;
	top: 0;
	left: 0;
}

.page-head-social:after {
	content: '';
	position: absolute;
	background-color: #090909;
	width: 150px;
	height: 2px;
	top: 0;
	right: 0;
}

.page-head-social-item {
	position: absolute;
	bottom: 10px;
	left: 15px;
}

.page-head-social-list li {
	color: #090909;
	margin: 0px 10px;
}

.home-2 .page-head-content {
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.home-2 .page-head-social {
	height: 185px;
	margin: 0 auto;
}

.home-2 .social-title {
	left: 32%;
}

.home-2 .page-head-social:before,
.home-2 .page-head-social:after {
	width: 80px;
}

.home-2.header-style-3 .page-head-section {
	background-image: none;
	padding-bottom: 360px;
}

.home-2.header-style-3 .page-head-section .page-head-effect {
	display: none;
}

.poppin-main-benner {
	background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
	margin: auto;
	outline: 1px solid #fff;
	outline-offset: 5px;
	padding: 65px 0;
	text-align: center;
	width: 500px;
}

.page-head-section.style-2 {
	margin-bottom: 50px;
}

/*-----------------------------------------------------------------------
End of Page head section [*3]
-------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------
Start of portfolio section [*4]
-------------------------------------------------------------------------*/
.item-wrap img {
	width: 100%;
}

.item-wrap {
	margin: 15px;
}

.portfolio-section {
	padding-top: 20px;
	padding-bottom: 0px;
}

.home-2.header-style-3 .portfolio-section {
	padding-top: 20px;
}

.home-2.header-style-3 .item-wrap {
	margin: 0;
}

.item-grid {
	width: 16.66%;
	float: left;
}

.item-grid-1 {
	width: 50%;
	float: left;
}

.item-grid-2 {
	width: 25%;
	float: left;
}

.button-group button {
	background: transparent;
	color: #959595;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-right: 10px;
	position: relative;
	padding: 4px 20px 5px 20px;
	background-color: #101010;
	border-radius: 20px;
	border: 3px solid #1b1b1b;
}

.button-group button:before,
button.tab-button.active:before {
	color: rgba(0, 0, 0, 0);
	content: ".";
	font-size: 30px;

	pointer-events: none;
	position: absolute;
	text-shadow: rgba(0, 0, 0, 0) 0px 0px;
	top: -42px;
	transition: text-shadow 0.3s ease 0s, color 0.3s ease 0s;

}

.button-group button:hover::before,
button.tab-button.active:before {
	color: #e3e3e3;
	text-shadow: 7px 0 #e3e3e3, 14px 0 #e3e3e3, 21px 0 #e3e3e3;
	text-align: center;
}

.button-group button span {
	position: absolute;
	top: -7px;
	right: -10px;
}

button.tab-button.active {
	color: #e3e3e3;
	background-color: #2b2b2b;
	border-radius: 20px;
	padding: 4px 20px 5px 20px;
	border: 3px solid #101010;

}

.work-item {
	position: relative;
	-moz-box-shadow: 1px 4px 8px #1b1b1b;
	-webkit-box-shadow: 1px 4px 8px #1b1b1b;
	box-shadow: 1px 4px 8px #1b1b1b;
}

.work-item:before {
	position: absolute;
	content: "";
	background-color: rgba(51, 51, 51, 0.45);
	width: 25%;
	height: 25%;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 0.5s ease;
}

.work-item:after {
	position: absolute;
	content: "";
	background-color: rgba(51, 51, 51, 0.45);
	width: 25%;
	height: 25%;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: all 0.5s ease;
	transition-delay: 0.2s;
}

.work-item:hover::before,
.work-item:hover::after {
	opacity: 1;
	width: 100%;
	height: 100%;
}

.work-item:hover::before {
	left: 0;
	top: 0
}

.work-item:hover::after {
	right: 0;
	bottom: 0;
}

.hover-text a span {
	font-size: 36px;
	background-color: #ffffff;
	opacity: 0.7;
	padding: 20px;
	border-radius: 50%;

}

.project-catagorry li a {
	font-size: 12px;
	color: #e3e3e3;
}

.hover-text {
	position: absolute;
	top: 45%;
	z-index: 1;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	transition: .5s all ease-in-out;
}

.work-item:hover .hover-text {
	opacity: 1;
	visibility: visible;
	top: 50%;
	transition-delay: .7s;
}

.project-description {
	position: absolute;
	bottom: 15px;
	right: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: .3s all ease-in-out;
}

.project-description h3 {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 16px;
	color: #000;
}

.project-description h3 a::before {
	border-bottom: 1px solid #e3e3e3;
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	width: 50px;
}

.work-item:hover .project-description {
	opacity: 1;
	visibility: visible;
	right: 15px;
	transition-delay: 1.2s;
}

.more-btn,
.contact-adress-form button {
	height: 50px;
	width: 230px;
	margin: 0 auto;
	line-height: 55px;
	background-color: #090909;
	position: relative;
}

.more-btn a,
.contact-adress-form button {
	letter-spacing: 3px;
	color: #e3e3e3;
	display: block;
	width: 100%;
}

.more-btn:before,
.contact-adress-form button:before {
	content: '';
	position: absolute;
	top: 0;
	background-color: #e7e7e7;
	height: 5px;
	width: 100%;
	left: 0;
}

.more-btn:after,
.contact-adress-form button:after {
	content: '';
	position: absolute;
	top: 0;
	background-color: #090909;
	height: 5px;
	width: 50%;
	left: 0;
	transition: .3s all ease-in-out;
}

.more-btn:hover::after,
.contact-adress-form button:hover::after {
	width: 70%;
}



/*-----------------------------------------------------------------------
Start of portfolio section
-------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------
Start of newsletter section [*5]
-------------------------------------------------------------------------*/
.newsletter-section,
.achivement-section {
	background-image: url(../img/banner/news-banner.jpg);
	padding: 55px 0px 100px;
	background-position: center center;
	background-repeat: no-repeat;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

.newsletter-title h2 {
	font-size: 35px;
}

.newsletter-section-content {
	position: relative;
	text-align: center;
}

.newsletter-form {
	max-width: 590px;
	margin: 0 auto;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	position: relative;
}

.newsletter-form input {
	border: none;
	border-bottom: 2px solid;
	border-radius: 0;
	height: 55px;
}

.newsletter-form input:focus {
	border-bottom: 2px solid #e7e7e7;
}

.newsletter-form form {
	width: 100%;
}

.newsletter-form .input-group-addon {
	background-color: transparent;
	border: none;
	position: absolute;
	right: 25px;
	z-index: 3;
	top: 15px;
}

.newsletter-form .input-group-addon button {
	background-color: transparent;
	border: none;
}

/*-----------------------------------------------------------------------
End of newsletter section
-------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------
Start of service section [*6]
-------------------------------------------------------------------------*/
.service-icon span {
	font-size: 72px;
}

.service-title h3 {
	font-size: 26px;
	position: relative;
}

.service-slide {
	position: relative;
}

.service-title h3:before {
	content: '';
	position: absolute;
	background-color: #959595;
	width: 70px;
	height: 2px;
	left: 0;
	bottom: 10px;
}

.service-slide:after {
	content: '';
	position: absolute;
	background-color: #959595;
	width: 70px;
	height: 2px;
	right: 0;
	top: -90px;
}

.service-title h3,
.service-icon span {
	padding-left: 85px;
}

.service-slide-content .owl-controls {
	position: absolute;
	top: -105px;
	right: 9%;
	display: inline-block;
}

.service-slide-content .owl-next,
.service-slide-content .owl-prev {
	float: left;
	text-transform: uppercase;
	color: #959595;
	font-size: 18px;
	margin-left: 15px;
	letter-spacing: 4px;
}

/*-----------------------------------------------------------------------
End of service section
-------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------
Start of footer section [*7]
-------------------------------------------------------------------------*/
.footer-area {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #333;
	padding: 30px 0px;
	/*max-width: 1280px;*/
	margin: 0 auto;
	position: relative;
}




.footer-area span {
	font-size: 12px;
}

.footer-area a span {
	font-size: 14px;
}

.footer-area .footerli {
	height: 50px;
}

.footer-area .footerli a {
	font-size: 12px;
	margin-right: 20px;
}


.footer-area a {
	color: #757575;
}

footer {
	position: relative;
}

.scrollup {
	position: absolute;
	bottom: 88px;
	right: 0%;
	display: none;
	transform: rotate(-90deg);
	border: 1px solid #090909;
	border-right: none;
	padding: 32px;
}

.scrollup.custom {
	bottom: 63px;
}

.scrollup:after {
	content: '';
	position: absolute;
	background-color: #090909;
	height: 1px;
	width: 19px;
	top: 10px;
	transform: rotate(-90deg);
	left: 54px;
}

.scrollup:before {
	content: '';
	position: absolute;
	background-color: #090909;
	height: 1px;
	width: 19px;
	transform: rotate(-90deg);
	right: -9px;
	bottom: 10px;
}

.back-top {
	position: absolute;
	width: 90px;
	top: 20px;
	letter-spacing: 1px;
}

.footer-2 {
	/*background-color: #f2f2f2;*/
	margin-top: 50px;
}

.footer-2 .page-head-social-item {
	position: inherit;
}

/*-----------------------------------------------------------------------
End of footer section
-------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------
Start of about us page
-------------------------------------------------------------------------*/
.single-page .page-head-title h1 {
	font-weight: 700;
}

.single-page .page-head-content {
	left: 50%;
	transform: translateX(-50%);
	top: 40%;
}

.breadcrumb {
	background-color: transparent;
}

.breadcrumb>li+li:before {
	content: "-";
	padding: 0px 10px;
	color: #090909;

}

.about-us-title h2 {
	font-size: 26px;
	line-height: 1.3;
}

@-webkit-keyframes Rx-width-75 {
	0% {
		width: 0%;
	}

	100% {
		width: 75%;
	}
}

@keyframes Rx-width-75 {
	0% {
		width: 0%;
	}

	100% {
		width: 75%;
	}
}

@-webkit-keyframes Rx-width-65 {
	0% {
		width: 0%;
	}

	100% {
		width: 65%;
	}
}

@keyframes Rx-width-90 {
	0% {
		width: 0%;
	}

	100% {
		width: 90%;
	}
}

@-webkit-keyframes Rx-width-90 {
	0% {
		width: 0%;
	}

	100% {
		width: 90%;
	}
}

@keyframes Rx-width-85 {
	0% {
		width: 0%;
	}

	100% {
		width: 85%;
	}
}

.Rx-width-75 {
	-webkit-animation-name: Rx-width-75;
	-o-animation-name: Rx-width-75;
	animation-name: Rx-width-75;
	animation-fill-mode: forwards;
}

.Rx-width-85 {
	-webkit-animation-name: Rx-width-85;
	-o-animation-name: Rx-width-85;
	animation-name: Rx-width-85;
	animation-fill-mode: forwards;
}

.Rx-width-65 {
	-webkit-animation-name: Rx-width-65;
	-o-animation-name: Rx-width-65;
	animation-name: Rx-width-65;
	animation-fill-mode: forwards;
}

.Rx-width-90 {
	-webkit-animation-name: Rx-width-90;
	-o-animation-name: Rx-width-90;
	animation-name: Rx-width-90;
	animation-fill-mode: forwards;
}

.progress {
	overflow: visible;
	height: 5px;
	margin-bottom: 20px;
	background-color: #e5e5e5;
	border-radius: 0;
}

.progress-bar {
	position: relative;
	background: #090909;
	height: 5px;
}

.skilled-tittle {
	display: inline-block;
	margin-bottom: 10px;
	font-weight: 300;
}

.skilled-percent {
	float: right;
}


/*-----------------------------------
Start of achivement section
-------------------------------------*/
.achivement-section {
	padding: 120px 0px;
}

.achive-icon span {
	font-size: 36px;
}

.achive-text h3 {
	font-weight: 700;
	padding: 10px 0px 15px;
}

/*-----------------------------------
End of achivement section
-------------------------------------*/



/*-----------------------------------
Start of testimonial section
-------------------------------------*/
.testimonial-section {
	background-color: #f1f1f1;
	margin-top: 55px;
}

.testimonial-section .section-content {
	padding-top: 60px;
	padding-bottom: 75px;
}

.testimonial-icon span {
	font-size: 72px;
	color: #d7d6d6;
}

.testimonial-dec {
	max-width: 630px;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	padding: 40px 0px 0px;
}

.testimonial-icon {
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	top: 25px;
}

.clients-des,
.testimonial-dec .name {
	font-size: 18px;
	position: relative;
}

.testimonial-dec .name:before {
	content: '';
	position: absolute;
	height: 2px;
	width: 40px;
	background-color: #090909;
	top: 10px;
	left: -50px;
}

.testimonial-item .owl-controls {
	text-align: center;
}

.testimonial-item .owl-dots .owl-dot {
	height: 10px;
	width: 10px;
	background-color: #e5e5e5;
	text-align: center;
	margin: 0 5px;
	display: inline-block;
	border-radius: 100%;
	margin-top: 45px;
}

.testimonial-item .owl-dots .owl-dot.active {
	background-color: #ababab;
}

/*-----------------------------------
End of testimonial section
-------------------------------------*/
.partner-logo-slide .logo-item {
	position: relative;
	height: 140px;
	width: 150px;
	background-color: #fcfcfc;
	padding-top: 30px;
	padding-left: 10px;
}

.partner-logo-slide .item-hover {
	position: absolute;
	opacity: 0;
	top: 0;
	transition: .3s all ease-in-out;
	padding-top: 30px;
}

.logo-item:hover .item-hover {
	opacity: 1;
}

.partner-section {
	padding: 70px 0px;
}

.blog-title {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
}

.blog-meta {
	font-size: 12px;
}

.blog-head h2 {
	font-size: 20px;
	line-height: 28px;
}

.latest-blog-comments a {
	color: #959595;
	font-size: 18px;
}

.blog-main-text-pic {
	width: 360px;
	margin: 0 15px 50px;
}

.blog-details {
	border-bottom: 1px solid #333;
	margin-bottom: 15px;
}

.meta-list li a {
	color: #959595;
	margin-right: 15px;
	line-height: 28px;
}

.blog-main-link h2 {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
}

.blog-read-more a {
	color: #959595;
	position: relative;
}

.blog-read-more a span {
	position: absolute;
	opacity: 1;
	left: 80px;
	top: 3px;
	opacity: 0;
	transition: .3s all ease-in-out;
}

.blog-read-more a:hover span {
	left: 90px;
	opacity: 1;
}

.blog-list-pic-text {
	display: table;
	border-bottom: 1px solid #dcdcdc;
	padding-bottom: 20px;
	margin-bottom: 40px;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span,
.pagination>li:last-child>a,
.pagination>li:last-child>span {
	border-radius: 0;
}

.pagination {
	margin-bottom: 0;
}

.pagination>li a {
	margin: 0px 5px;
	color: #090909;
	border-color: #090909;
}

.contact-text span {
	font-size: 26px;
}

.contact-text {
	max-width: 770px;
	margin: 0 auto;
}

.google-map-container {
	width: 100%;
	height: 500px;
	background-color: #dddddd;
}

.contact-adress .service-icon span {
	font-size: 52px;
}

.contact-adress .service-title h3,
.contact-adress .service-icon span {
	padding-left: 60px;
}

.contact-adress .service-title h3 {
	font-size: 18px;
}

.contact-adress .service-title h3:before {
	width: 40px;
}

.contact-info-item input {
	height: 50px;
	width: 29%;
	float: left;
	margin-right: 30px;
	padding: 15px;
	background-color: #f9f9f9;
	border: none;
}

.contact-info-msg textarea {
	width: 94%;
	border: none;
	background-color: #f9f9f9;
	padding: 15px;
	margin-top: 20px;
}

.contact-adress-form button {
	width: 230px;
	margin: 30px 0 0px;
	line-height: 53px;
	border: none;
}

.contact-us-section .section-content {
	padding-bottom: 50px;
}

/*-----------------------------------------------------------------------
End of about us page
-------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------
Start of Blog single page
-------------------------------------------------------------------------*/
.blog-single-quate blockquote {
	background-color: #f9f9f9;
	/*font-style: italic;*/
	font-size: 14px;
}

label {
	color: #626262;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
}

.comment-form input {
	border: 1px solid #e5e5e5;
	height: auto;
	margin-bottom: 20px;
	padding: 10px 15px;
	width: 100%;
}

.clear-fix textarea {
	border: 1px solid #e5e5e5;
	height: 150px;
	margin-bottom: 20px;
	margin-top: 0;
	padding: 15px;
	width: 100%;
}

.popin-btn,
.blog-tag-list li a {
	border: 1px solid #e5e5e5;
	color: #232323;
	display: inline-block;
	font-size: 12px;
	height: 45px;
	letter-spacing: 1px;
	line-height: 45px;
	padding: 0 30px;
	text-transform: uppercase;
}

.comment-form,
.comment-form-list-pic-text {
	box-shadow: 0 1px 5px 0 #ccc;
	padding: 30px;
	margin-bottom: 20px;
}

.comment-form-list {
	display: inline-block;
}

.author-name,
.author-date,
.reply-text {
	display: block;
}

.author-text {
	overflow: hidden;
}

.author-pic {
	margin-right: 25px;
}

.blog-search {
	position: relative;
}

.blog-search input {
	height: 50px;
	border: 1px solid #ccc;
	width: 100%;
	padding: 15px;
}

.blog-search button {
	position: absolute;
	top: 0;
	right: 15px;
	height: 50px;
	background-color: transparent;
	border: none;
}

.widgettitle {
	font-size: 26px;
}

.badge {
	background-color: transparent;
	color: #585858;
	font-size: 15px;
}

.category-item-list li {
	margin-bottom: 10px;
	transition: .3s all ease-in-out;
	position: relative;
}

.category-item-list li:after {
	position: absolute;
	content: '';
	left: 0px;
	background-color: #ccc;
	height: 2px;
	width: 0;
	top: 13px;
	transition: .3s all ease-in-out;
}

.category-item-list li:hover a {
	color: #ccc;
	margin-left: 15px;
}

.category-item-list li:hover:after {
	width: 10px;
}

.rec-img {
	float: left;
	margin-right: 10px;
}

.rec-link h3 a {
	color: #040404;
	font-size: 15px;
}

.rec-nws-meta li a,
.visit-reply span {
	font-size: 13px;
}

.side-tab-img-text {
	display: inline-block;
	margin-bottom: 20px;
	width: 100%;
}

.blog-tag-list li a {
	padding: 0px 15px;
	margin: 3px 0px;
}

/*-----------------------------------------------------------------------
End of Blog single page
-------------------------------------------------------------------------*/
.portfolio-single-slide-content .owl-dots {
	text-align: center;
	position: absolute;
	right: 20px;
	bottom: 10px;
}

.portfolio-single-slide-content .owl-dot {
	height: 10px;
	width: 10px;
	background-color: transparent;
	border: 1px solid #fff;
	display: inline-block;
	margin-right: 5px;
}

.banner-content::after {
	content: "";
	clear: both;
	display: table;
}


/** UOMER STYTLE**/

/**wap 底部固定导航**/

.navf {
	display: none;
	overflow: visible;
	padding-top: 5px;
	max-width: 768px;
	height: 60px;
	width: 100%;
	position: fixed;
	bottom: 0;
	box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.1);
	z-index: 998;
	background-color: #333;
	color: #9c9a9c;
}

.navf .navfico {
	width: 18%;
	text-align: center;
	font-size: 20px;
	float: left;
}

.navf .mainico {
	width: 20%;
	height: 60px;
	font-size: 30px;
	text-align: center;
	background-color: #333;
	margin-top: -20px;
	border-radius: 50px;
	padding-top: 10px;
	box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.1);
	margin-left: 4%;
	margin-right: 4%;
	float: left;
}

.navf .icofont-uo {
	margin-left: auto;
	margin-right: auto;
	width: 45px;
	height: 25px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-repeat: no-repeat;
	background-image: url(../img/logo/logo.svg);

}

.navf .nactive .icofont-uo {
	background-image: url(../img/logo/logo2.svg);

}

.navf .navtxt {
	font-size: 12px;
}

.navf a {
	color: #9c9a9c;
}

.navf .nactive {
	color: #fff;
}


/**wap end底部固定导航**/



/**banner css**/


.page-head-overlay {
	overflow: hidden;
	width: 100%;
	min-height: 300px;
	perspective: 300px;
	background-color: #1b1b1b;
	/**background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);**/
	cursor: move;
}

canvas {
	height: 100vh !important;
	position: fixed;
	width: 100vw !important;
	margin-top: -350px;
}




/* star field */
.stars {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	box-shadow: -238px 108px #00e4ff, 193px -376px #00e4ff, -1264px -60px #c70000,
		145px -443px #c70000, -1440px 37px #00e4ff, 262px -136px #cfcfcf,
		212px 219px #e3e3e3, 319px 223px #c70000, 1246px -51px #c70000,
		308px 26px #e0e0e0, 147px 229px #c70000, -1041px 450px #d1d1d1,
		671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
		1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
		311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #00e4ff,
		-790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c70000,
		-1294px -297px #c70000, -63px 200px #f0f0f0, -592px -86px #00e4ff,
		-732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c70000,
		-1442px -153px #00e4ff, 1124px -219px #ededed, 701px 257px #f0f0f0,
		36px -179px #00e4ff, -937px 480px #00e4ff, -267px -418px #f2f2f2,
		1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
		624px 275px #c70000, -473px 150px #c70000, -537px -348px #d4d4d4,
		410px 455px #00e4ff, 497px -29px #c70000, 416px -370px whitesmoke,
		977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
		-1049px 409px white, 959px 407px #c70000, -1153px -168px #dedede,
		-437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
		-925px 452px #c70000, 244px 30px #c4c4c4, 453px -336px #dedede,
		993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
		-170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
		-1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
		1056px 367px #00e4ff, 261px -128px #c70000, 1017px 401px #c70000,
		1381px 245px #e3e3e3, 536px -113px #c70000, -92px -217px #e3e3e3,
		1481px 268px #d1d1d1, 832px -345px #c70000, -863px 138px #f0f0f0,
		-997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
		-468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
		823px -225px #c70000, -1172px -348px white, 505px -319px #ededed,
		94px -45px #ededed, -687px -64px #c70000, -1133px -456px #f2f2f2,
		1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
		1453px -338px #c70000, -764px 83px #e8e8e8, 726px 85px #c70000,
		205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
		649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c70000,
		-1405px 397px #cfcfcf, 30px -81px #c70000;
	animation: fly 1s linear infinite;
	transform-style: preserve-3d;
}

.stars:before,
.stars:after {
	content: "";
	position: absolute;
	width: inherit;
	height: inherit;
	box-shadow: inherit;
}

.stars:before {
	transform: translateZ(-300px);
	animation: fade1 3s linear infinite;
}

.stars:after {
	transform: translateZ(-600px);
	animation: fade2 3s linear infinite;
}

@keyframes fly {
	from {
		transform: translateZ(0px);
	}

	to {
		transform: translateZ(300px);
	}
}

@keyframes fade1 {
	from {
		opacity: 0.8;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade2 {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.8;
	}
}

/**图片跑马灯**/
.carousel {
	width: 100%;
	margin: 0px auto;
	position: relative;
	overflow: hidden;
}
/* Disable image tap-and-hold menu on mobile */
.carousel img {
	-webkit-touch-callout: none;
	/* Disable long tap menu for iOS */
	-webkit-user-drag: none;
	/* Disable image dragging for iOS */
	pointer-events: none;
	/* Disable tap-and-hold menu for other mobile devices */
}
/* 标题-轮播图 */

.carousel ul {
	list-style: none;
	/* 消除ul自带圆点 */
	display: flex;
	/* Use flexbox to make the images horizontal */
	padding: 0;
	margin: 0;
}

.carousel .list {
	width: fit-content;
	/* Set the list width to fit the images */
	position: relative;
	left: 0px;
	/* 初始位置 */
	transition: left 0.5s ease 0s;
	/* 图片跳转的过渡效果 */
	display: flex;
	/* Use flexbox to make the images horizontal */
}

.carousel .list img {
	max-width: 100%;
	/* Set the image width to 100% of its parent container (carousel) */
	height: auto;
	/* Ensure the image height scales with width */
}

.carousel .list li {
	flex: 0 0 auto;
	/* Allow the images to resize dynamically */
	margin-right: 0px;
	/* Add some space between images */
}

/* 上一张/下一张控制按钮 */
.carousel>a {
	position: absolute;


	font-size: 16px;
	/* 垂直居中，距顶部一半的父元素盒子宽度，再向上移动自身的一半 */
	top: 50%;
	margin-top: -25px;
	background-color: rgba(0, 0, 0, 0.6);
}

.carousel>a>img {
	margin-left: -8px;
}

.carousel .leftbtn {
	display: none;
	padding: 20px 8px 20px 2px;
	left: 0px;
	border-radius: 0 20px 20px 0;


}

.carousel .rightbtn {
	right: 0px;
	border-radius: 20px 0 0 20px;
	padding: 20px 2px 20px 8px;
	display: none;
}

/* 底部定位圆点list */
.carousel .location_list {
	width: auto;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	/* Center the dots horizontally */
	display: flex;
	/* Use flexbox to make the dots horizontal */
	justify-content: center;
	/* Center the items inside the flex container */
}

.carousel .location_list li {
	flex: 0 0 30px;
	/* Allow the dots to resize dynamically */
	height: 8px;
	border-radius: 5px;
	margin: 2px;
	background-color: rgba(51, 51, 51, 0.675);
}

/* 圆点被激活时的样式，动态为圆点增加class */
.carousel .location_list li.active {
	background-color: #000;
}

/*结束图片跑马灯*/

.imgBtn{
	width: 100%;
	border: none;
    font-size:14px;
	margin-top: 10px;
    margin-right: 10px;
    color: #e3e3e3;
    background: rgba(59, 60, 67, 0.8);
    padding: 10px 11px;
    border-radius: 5px;
}
.imgBtn:hover{
	background: rgba(59, 60, 67, 0.5);

}
.imgBtn:active{
	background: rgba(59, 60, 67, 0.8);

}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: 0;
    z-index: -1;
}
#customModal{
	z-index: 2002;
	background-color: #1b1b1bc0;
	backdrop-filter: saturate(180%) blur(40px);
}
.modal-header {
	text-align: center;
    padding: 15px 0;
    border-bottom: 0px solid #e5e5e5;
}
.modal-footer {
	display: flex;
    padding: 15px 0;
    text-align: right;
    border-top: 0px solid #e5e5e5;
}
.modal-title {
	font-size: 16px;
    margin: 0;
	color:#c1c2c5;
    line-height: 1.42857143;
}
#myImage{
	border-radius: 10px;
}
.imgBtnd{
	width: 50%;
	border: none;
	float: right;
    font-size: 14px;
    margin: 0 5px;
    color: #e3e3e3;
    background: rgba(59, 60, 67, 0.8);
    padding: 10px 11px;
    border-radius: 5px;
}
.imgBtnd:hover{
	background: rgba(59, 60, 67, 0.5);

}
.imgBtnd:active{
	background: rgba(59, 60, 67, 0.8);

}
.uomodal{
	background-color: rgba(34, 34, 34, 0) !important;
	border: none;
}

.delete-btn{
	display: none;
}