abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: "PingFang SC","Microsoft YaHei",sans-serif;
	vertical-align: baseline;
	background: 0 0;
	box-sizing: border-box
}

body {
	line-height: 1.5;
	font-size: 12px;
	-webkit-text-size-adjust: 100%;
	background: #f6f6f6;
	will-change: scroll-position;
	color: #212B35
}

nav,ul {
	list-style: none
}

.com-w12 {
	max-width: 1200px;
	margin: 0 auto
}

.excellent-case {
	background: #ffffff
}

.excellent-case .excellent-container {
	padding-top: 120px;
	padding-bottom: 90px
}

.excellent-case .excellent-container .title {
	margin-bottom: 44px;
	font-family: PingFangSC-Semibold;
	font-size: 36px;
	color: #FFF;
	letter-spacing: 0
}

.excellent-case .excellent-container .small-desc {
	margin-bottom: 156px;
	font-family: PingFangSC-Semibold;
	font-size: 24px;
	color: #FFF;
	letter-spacing: 0
}

.excellent-case .excellent-container .case-items {
	overflow: hidden
}

.excellent-case .excellent-container .case-items .img-box {
	z-index: 2;
	-webkit-box-shadow: 0 10px 16px rgba(39,39,51,.69);
	box-shadow: 0 10px 16px rgba(39,39,51,.69)
}

.excellent-case .excellent-container .case-items .img-box .video-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 9;
	width: 62px;
	height: 62px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background: url(data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAMAAABEH1h2AAAABGdBTUEAALGPC/xhBQAAANJQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA09XXO0RMsra5VFxj6+zt0tTW8PHxkJWaQUlSMTpE293eXmVsIy03d32DVV1ks7a66+zs2tzdio+VdnyC9/f4WWFooaaqvL/C5ufpu77Bf4SKKTM9Iiw2XWRrJS85JC44o6es/Pz8mZ2iLTZA+vv7QElRISs1////rCdDHAAAAB50Uk5Tonyje47wI7rsDzfZY0fO3xDKxVr++dzJTYAn/AMA2mppVQAAAZxJREFUSMel19dywjAQBVDhhrsNxl2k9957R/v/vxRCwgQSq9h7H7HPDGNppV0ybo5T6CSP7DS1o5zohcN5jTT9aJWDGpZSD0pLjdNkCI0ZJlTKqZ8BN5lPxdwNQZjQFXBqjECSkUF5PO6DQvpxM688UIpXNfHABMWYwX8e1KCcOvjLKxNaxKyWeexBq3jxIqd9aJk+XeAGtI7xy91Rez5y55yG0CEh/eE+dIr/zWnWjWd0xhPomGTGh1358Itb0DnWlJfdeTnlA97DVykfjInDrbTLNWnlOaTgPpyw9U2JL0hPwNnD+YmQ60QTccbe3z4EXCO5mDM2ueXznEQyztjjKe+ViNhyzp7vtppfsUmqwBnbvWrcBakiZ08vzdxW4vt7nD+v8OnYzjX300kXTrT0uWzbsIPDDf66E6KL+dGKeNOKSoatHstKhl+wk/vtC2nB8o+LsxuF4wJ7WCGPSuRBjb0mkJcU8orEXtDI9gDbnGBbI2Rjhm0LsU0ptiXGNuTYcQA7jGBHIfQghh0D0UPofATuafMRWOtxR+BPjGtmuOhW4aEAAAAASUVORK5CYII=) center center no-repeat #fff;-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	transform: translate(-50%,-50%);
	box-shadow: 0 2px 15px rgba(0,0,0,.5);
	cursor: pointer
}

.excellent-case .excellent-container .case-items .img-box .video-btn:hover {
	opacity: .8
}

.excellent-case .excellent-container .case-items .case-box .case-title {
	display: block;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 36px;
	color: #3e3e3e;
	letter-spacing: 0;
	-webkit-text-transform: uppercase;
	-moz-text-transform: uppercase;
	-ms-text-transform: uppercase;
	-o-text-transform: uppercase;
	text-transform: uppercase
}

.excellent-case .excellent-container .case-items .case-box .desc {
	font-weight: 700;
	font-size: 24px;
	color: #D80C18;
	letter-spacing: 0;
	line-height: 29px
}

.excellent-case .excellent-container .case-items .case-box .case-list {
	margin-top: 20px
}

.excellent-case .excellent-container .case-items .case-box .case-list li {
	font-family: PingFangSC-Regular;
	font-size: 16px;
	color: #1f1f1f;
	line-height: 30px;
	margin: 8px 0;
	text-align:left;
	
}

.excellent-case .excellent-container .case-items.case-1,.excellent-case .excellent-container .case-items.case-2 {
	margin-bottom: 90px;
	font-size: 0
}

.excellent-case .excellent-container .case-items.case-1 .img-box {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	width: 53.6%;
	padding-left: 14px;
	-webkit-box-shadow: 0 10px 16px rgba(39,39,51,.69);
	box-shadow: 0 10px 16px rgba(39,39,51,.69)
}

.excellent-case .excellent-container .case-items.case-1 .img-box .video-img {
	display: block
}

.excellent-case .excellent-container .case-items.case-1 .case-box {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	padding: 76px 140px 50px 60px;
	background: #dcdcdc;
	width: 46.4%
}

.excellent-case .excellent-container .case-items.case-1 .case-box:after {
	position: absolute;
	top: 0;
	left: -115%;
	content: "";
	width: 14px;
	height: 177px;
	background: #dcdcdc;
}

.excellent-case .excellent-container .case-items.case-2 .img-box {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	width: 53.6%;
	padding-right: 14px
}

.excellent-case .excellent-container .case-items.case-2 .img-box .video-img {
	display: block
}

.excellent-case .excellent-container .case-items.case-2 .case-box {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	text-align: right;
	padding: 76px 60px 50px 120px;
	background: #A9E4FC;
	width: 46.4%
}

.excellent-case .excellent-container .case-items.case-2 .case-box:after {
	position: absolute;
	top: 0;
	right: -115%;
	content: "";
	width: 14px;
	height: 177px;
	background: #A9E4FC;
}
/*!
 *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face {
	font-family:'FontAwesome';src:url('/yys/fonts/fontawesome-webfont.eot?v=4.6.3');src:url('/yys/fonts/fontawesome-webfont.eot') format('embedded-opentype'),url('/yys/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('/yys/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('/yys/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('/yys/fonts/fontawesome-webfont.svg?v=4.6.3') format('svg');font-weight:normal;font-style:normal
}

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.fa-lock:before {
	content: "\f023"
}

.fa-eye:before {
	content: "\f06e"
}

.fa-comments:before {
	content: "\f086"
}

.fa-cloud:before {
	content: "\f0c2"
}

.fa-flash:before,.fa-bolt:before {
	content: "\f0e7"
}

.fa-lightbulb-o:before {
	content: "\f0eb"
}


.feature-item {
    margin-top: 70px;
    text-align: right;
}

.feature-item .icon {
    float: right;
    margin-left: 17px;
    height: 90px;
    width: 90px;
    border: 1px dashed #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 70px;
    font-size: 31px;
    color: #241d6d;
    position: relative;
}

.feature-item .icon:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 100%;
    height: 100%;
    border: 1px dashed #ddd;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.feature-item:hover .icon:before {
    left: 0;
    top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.feature-item .content {

}

.feature-item h4 {
    font-size: 20px;
    letter-spacing: 0;
    color: #333;
    margin-bottom: 8px;
}

.feature-item p {
    color: #444;
}

.right-side .feature-item .icon {
    float: left;
    margin-left: 0;
    margin-right: 17px;
}

.right-side .feature-item {
    text-align: left;
}


*,::after,::before {
	box-sizing: border-box
}



.pre-scrollable {
	max-height: 340px;
	overflow-y: scroll
}

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}

@media (min-width:576px) {
	.container {
		max-width: 540px
	}
}

@media (min-width:768px) {
	.container {
		max-width: 720px
	}
}

@media (min-width:992px) {
	.container {
		max-width: 960px
	}
}

@media (min-width:1200px) {
	.container {
		max-width: 1140px
	}
}



.row113 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px
}

.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px
}

	.offset-sm-0 {
		margin-left: 0
	}


	.col-lg-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%
	}

	.col-lg-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%
	}


	.order-lg-0 {
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 0;
		order: 0
	}

	.order-lg-1 {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1
	}

	.order-lg-2 {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2
	}
	
.d-none {
	display: none!important
}

	.d-lg-block {
		display: block!important
	}

.learnmore__bottom p,.learnmore__card h2,.learnmore__card span {
	font-family: Arial,Helvetica,sans-serif;
	color: #333
}

.learnmore-canvas {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
	background: 0 0
}

.l-canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #ffffff
}

.learnmore-main {
	padding: 132px 0;
	position: relative;
	top: 0;
	left: 50%;
	z-index: 2;
	width: 1200px;
	margin-left: -600px
}

.learnmore__icon {
	width: inherit;
	height: 80px;
	text-align: center;
	margin: 45px 0 36px
}

.learnmore__box {
	position: relative;
	width: 80px;
	z-index: 1;
	animation-name: boxUp;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear
}

.learnmore__box_blue,.learnmore__box_green,.learnmore__box_jimian,.learnmore__box_zise {
	animation-name: opacityChange;
	z-index: 2;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	position: relative;
	animation-timing-function: linear
}

.learnmore__box_jimian {
	left: 0;
	top: -58px;
	width: 90px
}

.learnmore__box_blue {
	left: 20px;
	top: -90px;
	width: 41px
}

.learnmore__box_zise {
	left: -.5px;
	top: -82px;
	width: 42px
}

.learnmore__box_green {
	left: 40px;
	top: -112px;
	width: 41px
}

.learnmore__box_left {
	position: relative;
	z-index: 2;
	left: -20px;
	top: -62px;
	width: 36px;
	animation-name: opacityChangehua;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear
}

.learnmore__box_yinying {
	position: relative;
	left: 0;
	top: -100px;
	z-index: 0;
	width: 80px;
	animation-name: yinyingUp;
	animation-duration: 3s;
	animation-iteration-count: infinite
}

.learnmore__box_yinying3,.learnmore__box_yinying4 {
	top: 10px;
	z-index: 0;
	width: 80px;
	left: 0;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	position: relative
}

.learnmore__box_yinying3 {
	animation-name: yinyingUp3
}

.learnmore__box_yinying4 {
	animation-name: yinyingUp4
}

.learnmore__box_yinying5 {
	position: relative;
	left: 0;
	z-index: 0;
	width: 80px;
	animation-name: yinyingUp5;
	animation-duration: 3s;
	animation-iteration-count: infinite
}

.learnmore__box_banqiu {
	position: relative;
	width: 80px;
	left: 0;
	top: 1px;
	z-index: 1;
	animation-name: boxUpOp;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear
}

.learnmore__box_xiabanqiu {
	position: relative;
	width: 80px;
	left: 0;
	top: -5px;
	z-index: 4;
	animation-name: boxUp;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear
}

.learnmore__box_jiantou {
	position: relative;
	width: 72px;
	left: 7px;
	top: -53px;
	z-index: 3;
	animation: jiantou;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear
}

.learnmore__box_yuanyinying {
	position: relative;
	left: 0;
	top: 10px;
	width: 80px;
	animation-name: yuanyinyingUp;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear
}

.learnmore__card {
	width: calc((100% - 96px)/ 3);
	padding: 45px 0 0;
	float: left
}

.learnmore__card:nth-child(3n+1),.learnmore__card:nth-child(3n+2) {
	margin-right: 40px
}

.learnmore__card:nth-child(3n+4) {
	clear: both
}

.learnmore__card h2 {
	height: 80px;
	text-align: center;
	font-size: 24px;
	letter-spacing: 0;
	line-height: 28px
}

.learnmore__card span {
	font-size: 14px;
	opacity: .7;
	letter-spacing: 0;
	line-height: 26px;
	display: inline-block;
	text-align: justify
}

.learnmore__card:nth-child(2)>.learnmore__icon {
	position: relative;
	top: -7px
}

.learnmore__card:nth-child(5)>.learnmore__icon .learnmore__box {
	width: 90px;
	top: 5px;
	z-index: 5
}

.loader {
    position: fixed;
    background: #222;
    height: 100%;
    width: 100%;
    z-index: 999999999999;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.loader .face{
    position: absolute;
    border: 2px solid #121212;
}
.loader .face.face-1 {
    box-shadow: 0 0 10px rgba(0,0,0,1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    height: 200px;
    width: 200px;
    border-left: 2px solid #D80C18;
    border-top: 2px solid #D80C18;
    animation: circle 3s linear infinite;
    -webkit-animation: circle 2s linear infinite;
}
.loader .face.face-2 {
    box-shadow: 0 0 10px rgba(0,0,0,1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    height: 130px;
    width: 130px;
    border-right: 2px solid #329c39;
    border-bottom: 2px solid #329c39;
    animation: circle 3s linear infinite;
    -webkit-animation: circle 2s linear reverse infinite;
}
.loader .face .circle{
    position: absolute;
    width: 50%;
    height: 2px;
    transform-origin: left;
    top: calc(50% - 1px);
    left: 50%;
}
.loader .face.face-1 .circle{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
.loader .face.face-2 .circle{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}
.loader .face .circle::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: #fff;
    top: -5px;
    right: -6px;
}
.loader .face.face-1 .circle::before{
    background: #D80C18;
    box-shadow: 0 0 20px #D80C18,
                0 0 40px #D80C18,
                0 0 60px #D80C18,
                0 0 80px #D80C18,
                0 0 100px #D80C18,
                0 0 5px rgba(225,225,0,.1);
}
.loader .face.face-2 .circle::before{
    background: #329c39;
    box-shadow: 0 0 20px #329c39,
                0 0 40px #329c39,
                0 0 60px #329c39,
                0 0 80px #329c39,
                0 0 100px #329c39,
                0 0 5px rgba(3,169,244,.1);
}
@keyframes circle{
    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
}
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
}
}
/*==============3. Auto_popup Area ==============*/
@charset "UTF-8";
:root {
 --bs-blue:#0d6efd;
 --bs-indigo:#6610f2;
 --bs-purple:#6f42c1;
 --bs-pink:#d63384;
 --bs-red:#dc3545;
 --bs-orange:#fd7e14;
 --bs-yellow:#ffc107;
 --bs-green:#198754;
 --bs-teal:#20c997;
 --bs-cyan:#0dcaf0;
 --bs-white:#fff;
 --bs-gray:#6c757d;
 --bs-gray-dark:#343a40;
 --bs-primary:#0d6efd;
 --bs-secondary:#6c757d;
 --bs-success:#198754;
 --bs-info:#0dcaf0;
 --bs-warning:#ffc107;
 --bs-danger:#dc3545;
 --bs-light:#f8f9fa;
 --bs-dark:#212529;
 --bs-font-sans-serif:system-ui,
 -apple-system,
 "Segoe UI",
 Roboto,
 "Helvetica Neue",
 Arial,
 "Noto Sans",
 "Liberation Sans",
 sans-serif,
 "Apple Color Emoji",
 "Segoe UI Emoji",
 "Segoe UI Symbol",
 "Noto Color Emoji";
 --bs-font-monospace:SFMono-Regular,
 Menlo,
 Monaco,
 Consolas,
 "Liberation Mono",
 "Courier New",
 monospace;
 --bs-gradient:linear-gradient(180deg,
 rgba(255,
 255,
 255,
 0.15),
 rgba(255,
 255,
 255,
 0))
}
*,
::after,
::before {
 box-sizing:border-box
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
 width:100%;
 padding-right:var(--bs-gutter-x,15px);
 padding-left:var(--bs-gutter-x,15px);
 margin-right:auto;
 margin-left:auto
}
@media (min-width:576px) {
 .container,
 .container-sm {
  max-width:540px
 }
}
@media (min-width:768px) {
 .container,
 .container-md,
 .container-sm {
  max-width:720px
 }
}
@media (min-width:992px) {
 .container,
 .container-lg,
 .container-md,
 .container-sm {
  max-width:960px
 }
}
@media (min-width:1200px) {
 .container,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl {
  max-width:1140px
 }
}
@media (min-width:1400px) {
 .container,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
  max-width:1400px
 }
}
.row {
 --bs-gutter-x:30px;
 --bs-gutter-y:0;
 display:flex;
 flex-wrap:wrap;
 margin-top:calc(var(--bs-gutter-y) * -1);
 margin-right:calc(var(--bs-gutter-x)/ -2);
 margin-left:calc(var(--bs-gutter-x)/ -2)
}
.row>* {
 flex-shrink:0;
 width:100%;
 max-width:100%;
 padding-right:calc(var(--bs-gutter-x)/ 2);
 padding-left:calc(var(--bs-gutter-x)/ 2);
 margin-top:var(--bs-gutter-y)
}

 .col-sm-12 {
  flex:0 0 auto;
  width:100%
 }

 .col-lg-4 {
  flex:0 0 auto;
 }

@media (prefers-reduced-motion:reduce) {
 .form-control::-webkit-file-upload-button {
  -webkit-transition:none;
  transition:none
 }
}


.form-control-sm::file-selector-button {
 padding:.25rem .5rem;
 margin:-.25rem -.5rem;
 -webkit-margin-end:.5rem;
 margin-inline-end:.5rem
}

p {
  margin: 0 0 10px;
}


h4 {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
}


section {
  background: #FFF;
  padding-top: 112px;
  padding-bottom: 120px;
}


/*----------------------------------------------------
  6. Service Section / .service-section
------------------------------------------------------*/

.service-section {
  background: #ffffff;
}

.service-section .base-header {
  padding-bottom: 97px;
}

.service-item {
  background: #f9f9f9;
  padding: 70px 50px 50px;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  text-align: left;
  position: relative;
  margin-top: 0px;
  border-radius: 10px;
  text-align: left;
  position: relative;
}

.service-item .icon-serv {
  text-align: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  position: relative;
  height: 120px;
  width: 120px;
  margin-top: -130px;
  margin-bottom: 34px;
  box-shadow: 0px 0px 60px 0px rgb(218, 218, 218);
  z-index: 99;
}

.service-item .icon-serv i {
  font-size: 50px;
  color: #E1B44F;
  line-height: 120px;
}

.icon-serv:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #6382f7;
  left: 0%;
}

.service-item h4 {
  font-size: 22px;
  margin-bottom: 12px;
  line-height: 28px;
  z-index: 9;
  position: relative;
}

.service-item p {
  z-index: 9;
  position: relative;
  font-size:16px;
}

.ser-link {
  background: #fff;
  width: 45px;
  height: 45px;
  display: inline-block;
  text-align: center;
  line-height: 45px;
  border-radius: 5px;
  font-size: 14px;
  color: #E1B44F;
  box-shadow: 0px 0px 60px 0px rgb(218, 218, 218);
  z-index: 9;
  position: relative;
  margin-top: 22px;
}

.service-item::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0%;
  height: 100%;
  width: 0%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.6s ease;
  opacity: 0;
  z-index: 1;
  background: #d80c18bf;
  border-radius: 10px;
}

.service-item:hover::after {
  left: 0%;
  opacity: 1;
  width: 100%;
}


<!--ºÄÊ±1753265014.3266Ãë-->