/*common start*/
body,div,ul,li,a,img,p,dl,dt,dd,h1,h2,h3,h4,span,strong,input{ margin:0; padding:0;list-style:none;text-decoration:none;border:0; list-style:none;}
.clear{ margin:0; padding:0; font-size:0; clear:both; }


.bannerhou{ width:100%; height:100%;}
.bannerhou .img-bg{ position:relative;}
.bannerhou .img-bg .img{ width:100%; height:100%; overflow:hidden}
.bannerhou .img-bg .img img{ width:100%; vertical-align:bottom;    transition: all 1.5s 1.5s ease;}

.bannerhou .swiper-slide-active .img-bg .img img{    transform: scale(1.05);}
.bannerhou .xz-banner-x{    position: absolute;left: 0; top: 0; right: 0;bottom: 0;background: linear-gradient(150deg, rgba(48, 142, 219, .66) 10%, rgba(1, 44, 125, .66) 50%);}
.xz-banner-x .xz-main1 { height: 100%; display: flex; flex-flow: column;justify-content: center;align-items: flex-start;  color: #fff; position: relative;z-index: 9; max-width:1440px; margin:0 auto; width:90%}
.xz-banner-x .xz-main1:after, .xz-banner-x .xz-main1:before {
    content: "";
    display: block;
    width: 21.5vw;
    height: 21.5vw;
    background: url(../images/banner-mark1.png) 50% 50% no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 2rem;
    transform: translateX(-50%);
    -webkit-animation: rotateLoop 5s infinite linear;
    animation: rotateLoop 5s infinite linear;
}
.xz-banner-x .xz-main1:after {
    width: 13.45vw;
    height: 13.45vw;
    background: url(../images/banner-mark.png) 50% 50% no-repeat;
    z-index: 1;
    background-size: cover;
    -webkit-animation: rotateLoop1 7s infinite linear;
    animation: rotateLoop1 7s infinite linear;
    top: calc(2rem + 4.025vw);
}
.xz-banner-info {
	width: 62%
}

.xz-banner-info p {
	margin: 0;
	font-size: 1.5625rem;
	font-weight: 500;
	line-height: 1.8125rem;
	margin-bottom: 2rem;
	  visibility: inherit;
}



.bannerhou .swiper-slide-active .xz-banner-info p {}


.xz-banner-info h2 {
	font-size: 3.125rem;
	line-height: 3.75rem;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	margin: 0 0 2.5rem;
	text-shadow: 0 0 .875rem rgba(0, 0, 0, .5);
	 visibility: inherit;
	 color:#fff;
}

.xz-banner-info br {
	line-height: 0
}

.xz-banner-info h2 div,
.xz-banner-info p div {
	font-family: inherit;
	line-height: inherit;
	visibility: hidden
}

.xz-banner-a {
	line-height: 3.75rem;
	background: #174b84;
	border-radius: 2rem;
	font-size: .875rem;
	font-weight: 700;
	font-family: Roboto, sans-serif;
	color: #fff;
	text-transform: uppercase;
	display: flex;
	flex-flow: row;
	align-items: center;
	padding-left: .375rem;
	padding-right: 3.875rem;
	box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0, 0, 0, .2);
	transition: transform 0s, background .3s;

}

.xz-banner-a:hover {
	background: #092c42
}

.xz-banner-a:active {
	transform: scale(.95) !important;
	transition: all .3s ease
}

.xz-banner-a i{
	display: inline-block;
	border-radius: 2rem;
	height: 3.125rem;
	width: 3.125rem;
	line-height: 3.125rem;
	background: #fff;
	color: #308edb;
	text-align: center;
	margin-right: 2rem;
	transition: all .3s ease;
	pointer-events: all
}

.xz-banner-a i:hover {
	background: #308edb;
	color: #fff;
	transform: rotate(90deg)
}

@-webkit-keyframes rotateLoop {
	from {
		transform: translateX(-50%) rotate(0)
	}

	to {
		transform: translateX(-50%) rotate(360deg)
	}
}

@keyframes rotateLoop {
	from {
		transform: translateX(-50%) rotate(0)
	}

	to {
		transform: translateX(-50%) rotate(360deg)
	}
}

@-webkit-keyframes rotateLoop1 {
	from {
		transform: translateX(-50%) rotate(0)
	}

	to {
		transform: translateX(-50%) rotate(-360deg)
	}
}

@keyframes rotateLoop1 {
	from {
		transform: translateX(-50%) rotate(0)
	}

	to {
		transform: translateX(-50%) rotate(-360deg)
	}
}


.swiper-pagination01 span{ width:13px; height:13px; background:#fff; opacity:1;}
.bannerhou .swiper-pagination-bullet-active{ background:#308EDB}


/*第二个板块*/
.hou01{ margin-top:4%;}
.hou01 .h1{ text-align:center; margin-top:2%}
.hou01 .home-procats-x{ margin-bottom:3%}
.hou01 .home-procats-x .swiper-slide-thumb-active .procat-index-li:before {
    opacity: 1;
}
.hou01 .home-procats-x .swiper-slide-thumb-active .procat-index-li:after{background: #308edb;}
.hou01 .swiper-button-next02{ right:10% !important; color:#666}
.hou01 .swiper-button-prev02{ left:10% !important; color:#666}


.xz-main1{ max-width:1440px; margin:0 auto; width:90%;    }
@charset "UTF-8";.alignleft {
    display: inline;
    float: left
}

.alignright {
    display: inline;
    float: right
}

.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto
}

img.alignleft {
    margin: .4em 1.6em 1.6em 0
}

img.alignright {
    margin: .4em 0 1.6em 1.6em
}

img.aligncenter {
    clear: both;
    margin-top: .4em;
    margin-bottom: 1.6em
}

.wp-block-image {
    margin: 0
}

.wp-block-columns {
    margin-bottom: 0
}

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: .8
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: 0!important;
    -webkit-backface-visibility: hidden
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045
}

.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none!important
}

.mfp-preloader {
    color: #ccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 1044
}

.mfp-preloader a {
    color: #ccc
}

.mfp-preloader a:hover {
    color: #fff
}

.mfp-s-ready .mfp-preloader {
    display: none
}

.mfp-s-error .mfp-content {
    display: none
}

button.mfp-arrow,button.mfp-close {
    overflow: visible;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: 0;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: .65;
    padding: 0 0 18px 10px;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    font-family: Arial,Baskerville,monospace
}

.mfp-close:focus,.mfp-close:hover {
    opacity: 1
}

.mfp-close:active {
    top: 1px
}

.mfp-close-btn-in .mfp-close {
    color: #333
}

.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap
}

.mfp-arrow {
    position: absolute;
    opacity: .65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent
}

.mfp-arrow:active {
    margin-top: -54px
}

.mfp-arrow:focus,.mfp-arrow:hover {
    opacity: 1
}

.mfp-arrow:after,.mfp-arrow:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: .7
}

.mfp-arrow-left {
    left: 0
}

.mfp-arrow-left:after {
    border-right: 17px solid #fff;
    margin-left: 31px
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f
}

.mfp-arrow-right {
    right: 0
}

.mfp-arrow-right:after {
    border-left: 17px solid #fff;
    margin-left: 39px
}

.mfp-arrow-right:before {
    border-left: 27px solid #3f3f3f
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px
}

.mfp-iframe-holder .mfp-close {
    top: -40px
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    background: #000
}

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto
}

.mfp-figure {
    line-height: 0
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0,0,0,.6);
    background: #444
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px
}

.mfp-figure figure {
    margin: 0
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

@media screen and (max-width: 800px) and (orientation:landscape),screen and (max-height:300px) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left:0;
        padding-right: 0
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0,0,0,.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0,0,0,.6);
        position: fixed;
        text-align: center;
        padding: 0
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        transform:scale(.75)
    }

    .mfp-arrow-left {
        transform-origin: 0
    }

    .mfp-arrow-right {
        transform-origin: 100%
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px
    }
}

.mfp-bg {
    opacity: 0;
    transition: all .3s
}

.mfp-bg.mfp-ready {
    opacity: .8
}

.mfp-bg.mfp-ready.mfp-removing {
    opacity: 0
}

.white-popup-block {
    position: relative;
    background: #fff;
    padding: 3rem;
    width: auto;
    max-width: 600px;
    margin: 20px auto
}

.white-popup-block .contact-sce-tit {
    margin-top: 0
}

.loop-item-200 {
    margin-bottom: 1.25rem
}

.loop-item-200 h2 {
    background: #eee;
    border-radius: 4px 4px 0 0;
    line-height: 2.5rem;
    padding: 0 1.25rem 0 2.5rem;
    margin: 0;
    transition: all .3s
}

.loop-item-200 h2 a {
    font-weight: 500;
    color: #333;
    font-size: 1rem;
    width: 70%;
    display: inline-block;
    transition: all .3s
}

.loop-item-200 h2 a:hover {
    color: #308edb
}

.loop-item-200 .meta {
    float: right;
    display: inline-block;
    font-weight: 400;
    font-size: .75rem;
    color: #888;
    background: #fff;
    border-radius: 4px;
    line-height: 1.6em;
    padding: 0 .5rem;
    margin-top: .875rem;
    margin-right: 1.25rem
}

.loop-item-200 .meta.cat_pro {
    background: #308edb;
    color: #fff
}

.loop-item-200 .meta.cat_sol {
    background: #5bc198;
    color: #fff
}

.loop-item-200 .meta.cat_page {
    background: #f48000;
    color: #fff
}

.loop-item-200 .meta.cat_case {
    background: #d580d2;
    color: #fff
}

.loop-item-200 .txt {
    background: #f8f8f8;
    padding: 1rem 2.5rem;
    border-radius: 0 0 10px 10px
}

.loop-item-200 .txt p {
    margin: 0;
    color: #666;
    font-size: .875rem;
    line-height: 1.8em
}

.loop-item-200 .txt.txt-pro {
    display: flex;
    flex-flow: row-reverse wrap;
    align-items: flex-start
}

.loop-item-200 .txt .pro-info {
    flex: 1
}

.loop-item-200 .txt .xz-pro-thumb {
    margin-right: 2rem;
    max-width: 40%
}

.loop-item-200:hover h2 {
    background: #ddd
}

@media screen and (max-width: 600px) {
    .loop-item-200 .txt {
        padding:1rem
    }

    .loop-item-200 h2 {
        padding: 0 1rem
    }

    .loop-item-200 .meta {
        margin-right: 0
    }

    .loop-item-200 h2 a {
        line-height: 1.2rem;
        padding: .8rem 0
    }

    .loop-item-200 .txt.txt-pro {
        flex-flow: column-reverse
    }

    .loop-item-200 .txt .xz-pro-thumb {
        margin-bottom: 1rem;
        margin-left: 0;
        max-width: none
    }
}

.loop-item-400 {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 1.25rem;
    background: #f8f8f8;
    border-left: solid 4px #308edb;
    border-radius: 2px;
    padding: 1.125rem 2.5rem;
    transition: all .3s ease
}

.loop-item-400:hover {
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    transform: translateY(-2px)
}

.loop-item-400:nth-of-type(2n+1) {
    background: #eee
}

.loop-item-400 p {
    line-height: 1.875rem;
    margin: 0;
    color: #131521
}

.file-name {
    padding-right: 2rem;
    flex: 1
}

.file-name a {
    color: inherit;
    transition: all .3s ease
}

.file-name a:hover {
    color: #308edb;
    text-decoration: underline
}

.file-size {
    flex: none;
    width: 6rem
}

.file-time {
    flex: none;
    width: 8rem
}

.file-icon {
    display: flex;
    justify-content: space-around;
    flex: none;
    width: 6rem
}

.file-icon a {
    display: block;
    padding: 0 .5rem;
    color: inherit;
    transition: all .3s ease
}

.file-icon a:hover {
    color: #308edb
}

.file-icon .view i {
    font-size: 1.25rem
}

@media screen and (max-width: 1023px) {
    .loop-item-400 p {
        line-height:1.3rem
    }
}

@media screen and (max-width: 800px) {
    .file-icon {
        display:none
    }

    .file-time {
        width: 6.5rem
    }

    .file-size {
        width: 5rem
    }
}

@media screen and (max-width: 600px) {
    .loop-item-400 {
        flex-flow:row wrap
    }

    .file-name {
        flex: none;
        width: 100%;
        margin-bottom: .5rem!important;
        padding-right: 0
    }

    .file-size,.file-time {
        color: #666!important
    }

    .file-item-tit.file-item-tit {
        display: none
    }
}

.loop-case {
    background: #fff;
    padding: 1.8125rem 4.3% 1.8125rem 2%;
    margin-bottom: 2.5rem;
    display: flex;
    transition: all .3s ease
}

.loop-case:hover {
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2)
}

.case_thumb {
    flex: none;
    width: 45.85%;
    margin-right: 3.9%;
    overflow: hidden
}

.case_thumb img {
    display: block;
    transition: all .3s ease
}

.case_thumb:hover img {
    filter: brightness(1.05);
    transform: scale(1.05)
}

.case_info {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    padding-bottom: 2.25rem;
    padding-top: 2.25rem
}

.case-more {
    display: inline-block;
    margin-top: auto;
    flex: none;
    font-size: .875rem
}

.case-more i {
    display: inline-block;
    margin-left: .5rem;
    font-size: .75rem;
    transition: all .3s ease
}

.case-more:hover {
    color: #174b84
}

.case-more:hover i {
    transform: translateX(5px)
}

.case_data {
    font-size: .875rem;
    color: #308edb;
    margin: 0 0 1rem
}

.case_tit {
    font-size: 2rem;
    line-height: 2.375rem;
    color: #174b84;
    margin: 0 0 1.5rem;
    font-weight: 700;
    font-family: Roboto,sans-serif
}

.case_tit a {
    color: inherit
}

.case_tit:hover a {
    color: #308edb
}

.case_des {
    color: #666;
    line-height: 1.625rem;
    max-height: 4.875rem;
    overflow: hidden;
    margin: 0 0 2rem
}

.case_des p {
    margin: 0
}

@media screen and (max-width: 1280px) {
    .case_tit {
        font-size:1.5rem;
        line-height: 2rem;
        margin-bottom: 1rem
    }

    .case_info {
        padding: 0
    }

    .case_des {
        margin-bottom: 1rem
    }
}

@media screen and (max-width: 600px) {
    .case-more {
        display:none
    }

    .loop-case {
        flex-flow: column;
        padding: 1.25rem
    }

    .case_thumb {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem
    }

    .case_tit {
        font-size: 1.25rem;
        line-height: 1.625rem
    }

    .case_des {
        font-size: .875rem;
        line-height: 1.3rem;
        max-height: 3.9rem
    }
}

.loop-hotpro {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #fff
}

.hotpro_thumb {
    display: block;
    overflow: hidden
}

.hotpro_thumb img {
    display: block;
    transition: all .3s ease
}

.hotpro_thumb:hover img {
    filter: brightness(1.05);
    transform: scale(1.05)
}

.hotpro_thumb img {
    display: block;
    margin: 0 auto
}

.hotpro_tit {
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(23,75,132,.9);
    color: #fff;
    padding: 1rem;
    font-size: .75rem;
    margin: 0;
    opacity: 0;
    transition: all .3s ease;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.hotpro_tit a {
    color: #fff;
    font-family: Roboto,sans-serif;
    font-weight: 500
}

.loop-hotpro:hover .hotpro_tit {
    opacity: 1
}

@media screen and (max-width: 1280px) {
    .hotpro_tit {
        position:static;
        opacity: 1;
        pointer-events: all
    }
}

.loop-news {
    border-bottom: solid 1px #ededed;
    border-right: solid 1px #ededed;
    padding: 0 14.4% 0 0;
    display: flex;
    flex-flow: column
}

.loop-news:nth-of-type(2n) {
    border-right: none;
    padding: 0 0 0 14.4%
}

.news_thumb {
    display: block;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    margin-bottom: -1rem;
    overflow: hidden
}

.news_thumb img {
    display: block;
    transition: all .3s ease
}

.news_thumb:hover img {
    filter: brightness(1.05);
    transform: scale(1.05)
}

.news_info {
    padding-top: 2.8125rem;
    padding-bottom: 2.8125rem;
    position: relative;
    flex: 1
}

.news_data {
    font-size: .875rem;
    color: #308edb;
    line-height: 1rem;
    margin: 0;
    margin-bottom: .875rem;
    font-family: Roboto,sans-serif;
    font-weight: 700
}

.news_tit {
    font-size: 1.625rem;
    color: #333;
    line-height: 1.875rem;
    font-family: Roboto,sans-serif;
    margin: 0 0 1rem;
    font-weight: 700
}

.news_tit a {
    color: inherit
}

.news_tit:hover a {
    color: #308edb
}

.news_des {
    font-size: .875rem;
    line-height: 1.3125rem;
    color: #666;
    margin: 0
}

.news_des p {
    margin: 0
}

.news-more {
    display: inline-block;
    position: absolute;
    bottom: 1.625rem;
    right: 0;
    line-height: 1.25rem;
    color: #308edb;
    opacity: 0
}

.news-more:hover {
    text-decoration: underline;
    color: #174b84
}

.loop-news:hover .news-more {
    opacity: 1
}

@media screen and (max-width: 600px) {
    .loop-news {
        padding:0 7%!important;
        border-left: solid 1px #ededed!important;
        border-right: solid 1px #ededed!important;
        border-bottom: solid 1px #ededed!important
    }

    .loop-news:first-child {
        border-top: solid 1px #ededed
    }

    .news_thumb {
        margin-top: 1.5rem
    }

    .news_tit {
        font-size: 1.25rem;
        line-height: 1.5rem
    }

    .news-more {
        display: none
    }
}

.loop-pro {
    display: flex;
    flex-flow: column;
    position: relative;
    transition: all .3s ease;
    border: solid 1px #f4f9fd
}

.loop-pro:hover {
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2)
}

.loop-pro:hover .pro-item-more {
    opacity: 1
}

.loop-pro:hover .pro-item-tit {
    color: #fff;
    background: #308edb
}

.pro-item-more {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 3.625rem;
    height: 3.625rem;
    background: #308edb;
    color: #fff;
    padding: .5rem;
    -webkit-clip-path: polygon(100% 0,0 0,0 100%);
    clip-path: polygon(100% 0,0 0,0 100%);
    opacity: 0;
    transition: all .5s ease;
    font-size: .8rem;
    z-index: 9;
    text-align: left
}

.pro-item-more:hover {
    background: #174b84
}

.pro-item-thumb {
    display: block;
    background: #fff
}

.pro-item-thumb img {
    display: block;
    max-width: none;
    width: 100%
}

.pro-item-tit {
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .5rem 1rem;
    font-weight: 500;
    color: #174b84;
    display: block;
    transition: all .3s ease;
    background: #f4f9fd;
    flex: 1;
    font-family: Roboto,sans-serif;
    text-align: center
}

@media screen and (max-width: 600px) {
    .pro-item-more {
        width:2.5rem;
        height: 2.5rem;
        padding: .2rem .5rem
    }

    .pro-item-more i {
        font-size: .7rem
    }
}

.loop-rel_news {
    display: flex;
    justify-content: space-between
}

.loop-rel_news:not(:last-child) {
    margin-bottom: 2.8125rem
}

.rel_news_thumb {
    flex: none;
    width: 5.625rem;
    height: 3.75rem;
    overflow: hidden;
    display: block;
    margin-right: .75rem
}

.rel_news_thumb img {
    display: block;
    transition: all .3s ease
}

.rel_news_thumb:hover img {
    filter: brightness(1.05);
    transform: scale(1.05)
}

.rel_news_thumb img {
    -o-object-fit: cover;
    object-fit: cover
}

.rel_news_tit {
    margin: 0 0 .25rem
}

.rel_news_tit a {
    font-size: .875rem;
    font-weight: 600;
    font-family: Roboto,sans-serif;
    line-height: 1.1875rem;
    color: #131521;
    display: block;
    transition: all .3s ease
}

.rel_news_tit a:hover {
    color: #308edb
}

.rel_news_data {
    margin: 0;
    color: #999;
    font-size: .8rem
}

.rel_news_data i {
    display: inline-block;
    font-size: .8rem;
    margin-right: 3px
}

.rel_news_info {
    flex: 1
}

.loop-sol {
    transition: all .3s ease;
    padding: 0 2.5rem 3.75rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start
}

.loop-sol:hover {
    background: #308edb
}

.loop-sol:hover a {
    color: #fff
}

.sol-item-thumb {
    width: 8.75rem;
    height: 8.75rem;
    border-radius: 5rem;
    overflow: hidden;
    overflow: hidden;
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    margin-bottom: 1.125rem;
    margin-top: 3rem
}

.sol-item-thumb img {
    display: block;
    transition: all .3s ease
}

.sol-item-thumb:hover img {
    filter: brightness(1.05);
    transform: scale(1.05)
}

.sol-item-tit {
    font-family: Roboto,sans-serif;
    color: #174b84;
    font-weight: 500;
    line-height: 1.625rem;
    display: block;
    text-align: center
}

@media screen and (max-width: 1280px) {
    .loop-sol {
        padding:0 1.5rem 2rem
    }
}

@media screen and (max-width: 800px) {
    .sol-item-thumb {
        width:7.5rem;
        height: 7.5rem
    }
}

.loop-video {
    background: #f8f8f8;
    border-radius: 2px;
    padding: .625rem
}

.video_thumb {
    display: block;
    border-radius: .2rem;
    overflow: hidden;
    background: #5bc198;
    position: relative
}

.video_thumb:after {
    content: "\ec73";
    font-family: iconfont;
    color: #308edb;
    font-size: 3rem;
    display: block;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    transition: all .3s ease
}

.video_thumb img {
    display: block;
    opacity: .6;
    transition: all .3s ease
}

.video_thumb:hover img {
    opacity: .85
}

.video_thumb:hover:after {
    opacity: 0;
    transform: scale(2)
}

.video_tit {
    font-size: 1.125rem;
    line-height: 1.25rem;
    color: #333;
    margin: 1rem 0 .75rem
}

.xz-toppic-404 {
    height: 0!important
}

.xz-404 {
    text-align: center
}

.xz-404-a {
    display: inline-block;
    margin: 3rem auto;
    transition: all .3s ease
}

.xz-404-a:hover {
    transform: translateX(2%)
}

.xz-404-a:active {
    transform: translateX(2%) scale(.9)
}

footer {
    background: #131521
}

.footer-btm {
    padding: 2.375rem 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.xz-copyright {
    margin: 0
}

footer .xz-sns-li:not(:first-child) {
    margin-left: .5rem
}

footer .xz-sns-a {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    line-height: calc(2.75rem - 2px);
    text-align: center;
    border: solid 1px #fff;
    border-radius: 2rem;
    color: #fff;
    transition: all .3s ease
}

footer .xz-sns-a:hover {
    color: #308edb;
    border-color: #308edb;
    transform: none
}

footer .xz-sns-i {
    font-size: 1.125rem
}

@media screen and (max-width: 600px) {
    .footer-btm {
        flex-flow:column;
        align-items: flex-start;
        padding: 1rem 0 .75rem
    }

    .xz-copyright {
        margin-bottom: 1rem;
        font-size: .75rem;
        line-height: 1.4em
    }

    footer .xz-sns-li:not(:first-child) {
        margin-left: .75rem
    }

    footer .xz-sns-a {
        width: 2rem;
        height: 2rem;
        line-height: calc(2rem - 2px)
    }

    footer .xz-sns-a .xz-sns-i {
        font-size: .875rem
    }
}

#xz-form {
    margin-top: 8.25rem;
    background: url(../img/form_bg.jpg) 50% 50% no-repeat #131521;
    background-size: cover;
    display: flex;
    flex-flow: row wrap
}

#xz-form>div {
    flex: none;
    width: 50%
}

#xz-form h2 {
    font-size: 2.5rem;
    color: #fff;
    line-height: 2.875rem;
    margin: 0;
    margin-bottom: 2rem;
    font-family: Roboto,sans-serif;
    font-weight: 500
}

#xz-form h2+p {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.375rem;
    margin: 0 0 2.875rem
}

.xz-form-sec1 {
    background: rgba(48,142,219,.9);
    padding: 3.75rem 4% 3.75rem calc(50vw - var(--main_w)/ 2)
}

.xz-form-sec2 {
    background: rgba(23,75,132,.9);
    padding: 3.75rem calc(50vw - var(--main_w)/ 2) 3.75rem 4%
}

.xz-form-sec2 ul {
    margin-bottom: 2.875rem
}

.xz-form-sec2 .swt-btn {
    border-color: #fff;
    color: #fff
}

.xz-form-sec2 .swt-btn:hover {
    border-color: #308edb
}

.xz-contact-ul li {
    display: flex;
    align-items: center
}

.xz-contact-ul li:not(:first-child) {
    margin-top: 2.25rem
}

.xz-contact-ul i {
    display: block;
    flex: none;
    margin-right: 1.625rem;
    width: 3.75rem;
    height: 3.75rem;
    line-height: 3.75rem;
    color: #fff;
    background: #308edb;
    text-align: center;
    font-size: 1.25rem;
    border-radius: 2rem;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.xz-contact-ul .tit {
    margin: 0 0 .375rem;
    font-size: .875rem;
    line-height: 1rem;
    color: #fff
}

.xz-contact-ul .txt {
    font-family: Roboto,sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 1.375rem;
    line-height: 1.5rem;
    margin: 0
}

.xz-contact-ul .txt a {
    color: inherit
}

.xz-contact-ul .txt a:hover {
    color: #308edb;
    text-decoration: underline
}

.nav-links {
    clear: both;
    text-align: center;
    font-size: 0;
    margin: 2rem 0 3rem
}

.page-numbers {
    display: inline-block;
    width: 3.75rem;
    line-height: 3.75rem;
    text-align: center;
    background: #ddd;
    border-radius: 2rem;
    margin: 0 .3rem;
    transition: all .3s;
    color: #333;
    font-size: 1rem;
    box-shadow: none
}

.page-numbers.current,.page-numbers:hover {
    background: #174b84;
    color: #fff;
    box-shadow: none
}

@media screen and (max-width: 800px) {
    .page-numbers {
        width:3rem;
        line-height: 3rem;
        margin: .3rem .15rem
    }
}

.xz-pn-next,.xz-pn-pre {
    margin: 1rem 0;
    display: flex;
    align-items: baseline;
    overflow: hidden
}

.xz-pn-next:before,.xz-pn-pre:before {
    content: "Previous: ";
    display: inline-block;
    font-size: 1.125rem;
    color: #131521;
    margin-right: .4rem;
    text-align: right;
    font-family: Roboto,sans-serif;
    font-weight: 700
}

.xz-pn-next a,.xz-pn-pre a {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #174b84;
    transition: all .3s ease;
    flex: 1;
    text-decoration: underline
}

.xz-pn-next a:hover,.xz-pn-pre a:hover {
    color: #308edb
}

.xz-pn-next .xz-pn-link,.xz-pn-pre .xz-pn-link {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.xz-pn-next:before {
    content: "Next: "
}

.xz-tab-content-x {
    position: relative;
    transition: all .3s ease
}

.xz-tab-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    transform: scale(0);
    transform-origin: center top;
    transition: opacity .5s ease,transform 0s .5s ease
}

.xz-tab-content.current {
    transform: scale(1);
    opacity: 1;
    transition: opacity .5s ease,transform 0s ease
}

.h1 {
    color: #092c42;
    font-family: Roboto,sans-serif;
    line-height: 3rem;
    font-size: 2.5rem;
    margin: 0 0 4rem
}

.h2 {
    color: #174b84;
    font-family: Roboto,sans-serif;
    line-height: 2.375rem;
    font-size: 2rem;
    margin: 0 0 1.625rem
}

.xz-search {
    padding-top: 4rem
}

#searchform {
    margin: 2rem auto 40vh;
    width: 50%;
    height: 3.5rem;
    box-sizing: border-box;
    border: solid 1px #308edb;
    border-radius: .5rem;
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,.9)
}

#searchform #submit {
    pointer-events: auto
}

.xz-searchform-submit {
    border: none;
    color: #308edb;
    background: 0 0;
    transition: all .3s ease;
    width: 3.5rem;
    font-size: 1.5rem
}

.xz-searchform-submit:hover {
    filter: brightness(1.1);
    transform: scale(1.1)
}

.xz-searchform-input {
    flex: 1;
    font-size: 1.125rem;
    color: #308edb;
    padding: .5rem 1rem;
    border: none;
    background: 0 0;
    max-width: calc(100% - 3.5rem)
}

.xz-searchform-input:focus {
    outline: 0;
    color: #131521
}

.service-intro {
    margin-right: .875rem;
    box-shadow: .875rem 1.375rem 0 #f2f9ff;
    margin-bottom: 6rem;
    border-radius: 2px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 5.9375rem 55% 5rem 4.3%;
    position: relative
}

.service-intro:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg,#d8d8d8 0,rgba(255,255,255,0) 0,#fff 100%);
    display: block;
    top: 0;
    left: 0
}

.service-intro h2,.service-intro p {
    position: relative;
    z-index: 9
}

.service-intro h2 {
    color: #092c42;
    font-size: 2.5rem;
    line-height: 2.9375rem;
    margin: 0;
    font-family: Roboto,sans-serif
}

.service-intro h2:after {
    content: "";
    display: block;
    width: 2.875rem;
    height: .25rem;
    background: #308edb;
    margin: 1.625rem 0 2.3125rem
}

.service-intro p {
    color: #174b84;
    font-size: 1.125rem;
    line-height: 1.625rem;
    margin: 0
}

.service-tab-tit-x {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 99;
    padding-top: 1rem
}

.service-tab-tit {
    padding: 0 1rem 1.625rem;
    position: relative;
    text-align: center;
    color: #666;
    font-family: Roboto,sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.25rem;
    white-space: nowrap
}

.service-tab-tit:after {
    content: "";
    width: 100%;
    height: .25rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #eee;
    border-radius: 3px
}

.service-tab-tit:nth-of-type(odd):after {
    background: #d8d8d8
}

.service-tab-tit.current:after {
    background: #308edb
}

.service-tab-tit i {
    display: inline-block;
    color: #308edb;
    font-size: 1.125rem;
    margin-right: .875rem
}

div.service-tab-content-x {
    margin-top: 0
}

.service-tab-content-x h2 {
    margin-top: 4.1875rem;
    margin-bottom: .75rem;
    line-height: 2.9375rem;
    font-size: 2.5rem;
    font-family: Roboto,sans-serif;
    color: #092c42;
    text-align: center
}

.service-tab-content-x h2+p {
    width: 90%;
    margin: 0 auto 3.75rem;
    color: #333;
    line-height: 1.625rem;
    text-align: center
}

.z-card-x {
    counter-reset: c1
}

.z-card {
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    transition: box-shadow .3s ease;
    counter-increment: c1;
    background: #fff
}

.z-card:hover {
    box-shadow: 0 .5rem 1.75rem -.75rem rgba(48,142,219,.3)
}

.z-card:not(:last-child) {
    margin-bottom: 3.25rem
}

.z-card h3 {
    margin: 0 0 .875rem;
    font-family: Roboto,sans-serif;
    color: #174b84;
    font-size: 2rem;
    line-height: 2.375rem;
    position: relative;
    z-index: 9
}

.z-card h3+p em {
    color: #308edb;
    font-family: Roboto,sans-serif;
    font-size: 1.25rem;
    line-height: 1.625rem;
    margin-top: -.25rem;
    margin-bottom: 1.625rem;
    display: inline-block
}

.z-card h3+ul {
    margin-top: 3rem;
    margin-bottom: 2rem
}

.z-card p {
    color: #333;
    line-height: 1.625rem;
    margin: 0
}

.z-card p strong {
    font-weight: 500
}

.z-card img {
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.z-card.wp-block-media-text>div {
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative
}

.z-card.wp-block-media-text>div:after {
    content: counter(c1,decimal-leading-zero);
    position: absolute;
    display: block;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    top: 1rem;
    right: 1rem;
    font-size: 5rem;
    color: #fff;
    text-shadow: 0 0 2px rgba(48,142,219,.3);
    line-height: 1em
}

.z-card ul {
    margin-top: 1.625rem;
    padding-left: 1rem
}

.z-card li {
    list-style: disc;
    color: #174b84;
    line-height: 2rem;
    font-weight: 500
}

.z-card .wp-block-media-text__media {
    height: 100%
}

.z-card .wp-block-media-text__media img {
    height: 100%;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover
}

.z-card .txt {
    margin: 1.6rem 0 2rem;
    padding-left: 1.5rem;
    border-left: solid 3px #308edb
}

.z-card .txt p:not(:last-child) {
    margin-bottom: 1.5rem
}

.z-card a {
    display: inline-block;
    font-size: .875rem
}

.z-card a:after {
    content: "\e609";
    font-family: iconfont;
    font-size: .75rem;
    line-height: 1em;
    margin-left: .5rem;
    display: inline-block;
    transition: all .3s ease
}

.z-card a:hover {
    color: #174b84
}

.z-card a:hover:after {
    transform: translateX(5px)
}

.service3 {
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2)
}

.service3 .wp-block-column {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3.625rem 1.625rem 4.5rem 3rem;
    transition: all .3s ease
}

.service3 .wp-block-column:hover {
    box-shadow: 0 .5rem 1.75rem -.75rem rgba(48,142,219,.3)
}

.service3 .wp-block-column:not(:first-child) {
    border-left: solid 1px #e6e6e6;
    margin-left: 0
}

.service3 .wp-block-column figure {
    align-self: center;
    display: block;
    width: 4.375rem;
    height: 4.375rem;
    text-align: center
}

.service3 .wp-block-column figure img {
    display: block
}

.service3 .wp-block-column h3 {
    font-size: 1.625rem;
    color: #333;
    line-height: 1.875rem;
    margin: 2.875rem 0 2.25rem;
    font-family: Roboto,sans-serif
}

.service3 ul {
    padding-left: 1rem
}

.service3 li {
    line-height: 1.625rem;
    color: #174b84;
    list-style: disc
}

.service4 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1rem
}

.service4 li {
    padding: 3rem;
    border-top: solid .25rem #5bc198;
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: #333;
    line-height: 2rem;
    font-weight: 500;
    transition: all .3s ease
}

.service4 li:hover {
    transform: translateY(-5px)
}

.service4 i {
    display: block;
    width: 4.375rem;
    line-height: 4.375rem;
    font-size: 4.375rem;
    text-align: center;
    color: #5bc198;
    margin-bottom: 1.5rem
}

.service4 li:nth-of-type(2) {
    border-top-color: #f48000
}

.service4 li:nth-of-type(2) i {
    color: #f48000
}

.service4 li:nth-of-type(3) {
    border-top-color: #d580d2
}

.service4 li:nth-of-type(3) i {
    color: #d580d2
}

.xz-contact h1 {
    color: #174b84;
    font-family: Roboto,sans-serif;
    text-align: center;
    font-size: 2rem;
    line-height: 2.375rem;
    margin: 0
}

.xz-contact h1:after {
    content: "";
    display: block;
    width: 3rem;
    height: .25rem;
    background: #308edb;
    border-radius: 2px;
    margin: 1.3125rem auto 3.875rem
}

.xz-contact .wp-block-columns {
    margin-bottom: 3.5rem
}

.xz-contact .wp-block-columns p {
    color: #666;
    line-height: 1.625rem;
    margin: 0
}

.xz-contact .wp-block-columns p strong {
    display: inline-block;
    font-family: Roboto,sans-serif;
    color: #333;
    font-size: 1.125rem;
    line-height: 1em;
    margin: 1.25rem 0 .75rem
}

.xz-contact .wp-block-columns a {
    color: inherit
}

.xz-contact .wp-block-columns a:hover {
    color: #308edb;
    text-decoration: underline
}

.xz-contact .wp-block-columns>div:first-child {
    flex: 1
}

.xz-contact .wp-block-columns>div:last-child {
    flex: none;
    width: 43%
}

.xz-contact .wp-block-columns>div:last-child img {
    display: block
}

.xz-contact img {
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.contact-banner {
    margin-bottom: 3.5rem;
    position: relative
}

.contact-banner:after {
    position: absolute;
    content: "";
    width: 5%;
    height: 100%;
    background: #308edb;
    z-index: 9;
    right: 0;
    top: 0;
    -webkit-clip-path: polygon(100% 0,0 100%,100% 100%);
    clip-path: polygon(100% 0,0 100%,100% 100%)
}

.contact-banner p {
    position: absolute;
    left: 30%;
    right: 5%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    color: #fff;
    font-size: 1.875rem;
    line-height: 2.1875rem;
    font-style: italic;
    font-family: Roboto,sans-serif
}

.contact-banner p strong {
    display: inline-block;
    margin-left: 1rem;
    font-family: inherit
}

.add-x {
    background: #f8f8f8;
    padding: 2.1875rem 1.25rem;
    margin-bottom: 4.2rem;
    border-top: solid 2px #308edb
}

.add-x h2 {
    font-family: Roboto,sans-serif;
    color: #333;
    font-size: 1.625rem;
    line-height: 1.875rem;
    margin: 0 0 1.75rem
}

.add-x iframe {
    display: block;
    margin-bottom: 2rem
}

.add-x p {
    line-height: 1.625rem;
    margin: 0
}

.add-x p strong {
    color: #174b84;
    font-family: Roboto,sans-serif;
    display: inline-block;
    margin-right: .5rem
}

.xz-turnkey .z-card-x {
    background: #f8f8f8;
    padding-top: 4.25rem;
    padding-bottom: 7.5rem;
    margin-bottom: 3.625rem
}

.xz-turnkey .z-card .wp-block-media-text__media {
    position: relative
}

.xz-turnkey .z-card .wp-block-media-text__media:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    left: 0;
    top: 0;
    background: #174b84;
    opacity: .37
}

.xz-turnkey .intro {
    font-size: 1.125rem;
    line-height: 1.625rem;
    margin-top: -1.2rem;
    margin-bottom: 2rem
}

.xz-turnkey .intro:after {
    display: block;
    clear: both;
    content: "";
    height: 0;
    width: 100%
}

.xz-turnkey .intro p {
    margin: 0
}

.xz-turnkey .intro figure {
    transform: translateY(-1.5rem)
}

.xz-turnkey .z-card-x .h1 {
    text-align: center
}

.benefit {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 1.5rem;
    margin-bottom: 5rem
}

.benefit li {
    padding: 1.5rem;
    background: #f1f6fa;
    border-radius: .625rem;
    color: #333;
    line-height: 1.625rem;
    transition: all .3s ease
}

.benefit li:hover {
    box-shadow: 0 .5rem 1.75rem -.75rem rgba(48,142,219,.3);
    transform: translateY(-5px)
}

.benefit li:nth-of-type(2) i {
    background: #5bc198
}

.benefit li:nth-of-type(3) i {
    background: #f48000
}

.benefit li:nth-of-type(4) i {
    background: #d580d2
}

.benefit i {
    display: block;
    width: 2.875rem;
    height: 2.875rem;
    font-size: 1.25rem;
    color: #fff;
    text-align: center;
    line-height: 2.875rem;
    background: #308edb;
    margin: 0 0 .75rem;
    -webkit-clip-path: url(#egg-cp1);
    clip-path: url(#egg-cp1)
}

.turnkey-how p {
    color: #666;
    line-height: 1.625rem;
    margin: 0
}

.turnkey-how .wp-block-gallery {
    margin: 3.25rem 0
}

.turnkey-how h3 {
    font-size: 1.125rem;
    line-height: 1.375rem;
    color: #174b84;
    margin: 0 0 .75rem
}

.turnkey-how h3+ul {
    margin: .875rem 0 2.375rem;
    padding-left: 1.125rem
}

.turnkey-how h3+ul li {
    list-style: disc;
    color: #666;
    line-height: 2rem;
    margin: 0
}

.contact-btn a {
    display: inline-block;
    line-height: 2.5rem;
    padding: 0 1.5rem;
    border: solid 1px #308edb;
    border-radius: 2rem;
    color: #308edb;
    font-size: .875rem;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    transition: all .3s ease
}

.contact-btn a:hover {
    background: #308edb;
    color: #fff
}

.contact-btn a:active {
    transform: scale(.95)
}

.contact-btn a:after {
    content: "\e609";
    font-family: iconfont;
    display: inline-block;
    margin-left: .5rem;
    font-weight: 300;
    font-size: .7rem
}

.xz-turns .h1 {
    margin-bottom: 0
}

.xz-turns .h1:after {
    content: "";
    display: block;
    width: 3rem;
    height: .25rem;
    background: #308edb;
    margin: 1.75rem 0 2rem
}

.xz-turns li,.xz-turns p {
    color: #333;
    line-height: 1.625rem;
    margin: 0
}

.xz-turns .intro {
    margin-bottom: 4.375rem
}

.xz-turns .intro .wp-block-column:last-child {
    width: 38%;
    flex: none
}

.xz-turns .intro .wp-block-column:first-child {
    flex: 1;
    margin-right: 7.5%
}

.xz-turns .intro p {
    margin-bottom: 1.5rem
}

.xz-turns strong {
    font-weight: 500
}

.xz-turns .we-offer {
    background: url(../img/bg1.png) no-repeat 50% 50%;
    background-size: cover;
    margin-bottom: 4.75rem;
    padding-top: 3.75rem;
    padding-bottom: 4.6875rem
}

.xz-turns .we-offer ul {
    display: flex;
    flex-flow: column wrap;
    height: 8rem;
    max-width: 100%;
    overflow: auto;
    align-content: flex-start
}

.xz-turns .we-offer ul li {
    line-height: 2rem;
    color: #174b84;
    margin-right: 3rem
}

.xz-turns .we-offer ul li:before {
    content: "-";
    display: inline-block;
    margin-right: .5rem
}

.phases {
    margin-top: 3.125rem
}

.phases img {
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.phases h3 {
    color: #333;
    font-size: 1.625rem;
    line-height: 1.875rem;
    font-family: Roboto,sans-serif;
    margin: 2.25rem 0 .75rem
}

.phases ul {
    margin: 1.5rem 0 0;
    padding-left: 1rem
}

.phases li {
    list-style: disc;
    color: #174b84;
    font-size: .875rem;
    line-height: 2rem
}

.xz-case {
    background: #f8f8f8
}

.xz-case-ul {
    margin-bottom: 4rem
}

.news-cat-x {
    padding-left: 12.5%;
    padding-right: 12.5%;
    display: flex;
    margin-bottom: 4.875rem
}

.news-cat-x li {
    flex: 1;
    text-align: center
}

.news-cat-x a {
    display: block;
    padding-bottom: 1.625rem;
    line-height: 1.3125rem;
    font-size: 1.125rem;
    color: #666;
    font-family: Roboto,sans-serif;
    font-weight: 500;
    position: relative
}

.news-cat-x a:after {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: .25rem;
    border-radius: 3px;
    background: #eee;
    transition: all .3s ease
}

.news-cat-x a:before {
    content: "\e660";
    font-family: iconfont;
    display: inline-block;
    margin-right: 1rem;
    color: #308edb;
    font-size: 1.25rem;
    line-height: 1em
}

.news-cat-x .cat_21 a:before {
    content: "\e662"
}

.news-cat-x .cat_20 a:before {
    content: "\e65f"
}

.news-cat-x li:nth-of-type(2n) a:after {
    background: #d8d8d8
}

.news-cat-x li.current-menu-item a {
    color: #174b84
}

.news-cat-x li.current-menu-item a:after {
    background: #308edb
}

.news-cat-x li:hover a:after {
    background: rgba(48,142,219,.75)
}

.xz-news-ul {
    margin-bottom: 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr
}

.xz-single {
    background: #f8f8f8;
    padding-top: 0
}

.post-body {
    background: #fff;
    margin-top: -3.5rem;
    position: relative;
    z-index: 100;
    padding: 5rem 8.3% 7.5rem;
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    margin-bottom: 5rem
}

.post-tit {
    text-align: center;
    margin-bottom: 2.375rem
}

.post-meta {
    padding-bottom: 2rem;
    border-bottom: solid 1px #d8d8d8;
    line-height: 1.125rem;
    margin: 0 0 4.25rem;
    display: flex;
    justify-content: center
}

.post-data {
    background: #f4f9fd;
    line-height: 1.5rem;
    font-size: .875rem;
    color: #174b84;
    margin-right: 4rem;
    padding: 0 1rem;
    border-radius: 3px
}

.post-data i {
    font-size: .875rem;
    display: inline-block;
    margin-right: .5rem
}

.post-content div {
    max-width: 100%!important
}

.post-content li,.post-content p {
    color: #333;
    line-height: 1.625rem;
    margin: 0 0 1rem
}

.post-content .wp-block-image,.post-content .wp-caption {
    margin: 2rem 0
}

.post-content .wp-block-image img,.post-content .wp-caption img {
    display: block
}

.post-content .wp-caption-text,.post-content figcaption {
    line-height: 1rem;
    margin: 1rem 0;
    font-style: italic;
    font-weight: 300
}

.post-content ol li {
    list-style: decimal
}

.post-content>ul li,.xz-turns .content>ul li {
    position: relative;
    padding-left: 1.5rem
}

.post-content>ul li:before,.xz-turns .content>ul li:before {
    position: absolute;
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: #174b84;
    display: block;
    left: 0;
    top: .75rem
}

.post-content h2,.post-content h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 4rem 0 1rem;
    font-family: Roboto,sans-serif;
    font-weight: 500;
    color: #333
}

.post-content h2 strong,.post-content h3 strong {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    font-weight: 500
}

.post-content h3 {
    font-size: 1.2rem;
    line-height: 1.75rem;
    margin-top: 2rem
}

.post-content a {
    transition: all .3s ease;
    color: #308edb;
    text-decoration: underline
}

.post-content a:hover {
    color: #174b84
}

.post-nav {
    padding-bottom: 5rem
}

.rel-posts-x {
    padding-top: 3.875rem;
    padding-bottom: 1rem
}

.rel-posts-x .loop-news {
    border-bottom: none
}

.rel-case-x {
    background: #f8f8f8;
    padding-top: 0
}

.a2a_kit a {
    width: 1.375rem;
    height: 1.375rem;
    padding: 0!important;
    color: #308edb;
    display: inline-block;
    margin-right: .5rem;
    overflow: hidden
}

.a2a_kit a>.a2a_svg {
    background: #999!important;
    height: 100%;
    width: 100%;
    display: block;
    transition: all .3s ease
}

.a2a_kit a>.a2a_svg path {
    transform: scale(.8);
    transform-origin: 50% 50%
}

.sol-cats-x {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4.375rem
}

.sol-cats-x h1 {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1em;
    color: #092c42;
    font-family: Roboto,sans-serif
}

.sol-cats {
    display: flex;
    background: #f4f9fd;
    padding-left: 1.5rem;
    -webkit-clip-path: polygon(1rem 0,100% 0,100% 100%,0 100%);
    clip-path: polygon(1rem 0,100% 0,100% 100%,0 100%)
}

.sol-cats a {
    display: block;
    line-height: 2.5rem;
    padding: 0 2rem;
    color: #174b84;
    font-weight: Roboto,sans-serif
}

.sol-cats a:hover {
    color: #308edb
}

.sol-cats li.current-menu-item a {
    font-weight: 700
}

.xz-sol-ul {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: solid 1px #eee;
    border-left: solid 1px #eee
}

.xz-sol-ul li {
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee
}

.xz-sol .xz-main {
    display: flex;
    justify-content: space-between
}

.sol-body {
    flex: none;
    width: calc(100% - 7.8% - 19.25rem);
    margin-left: 7.8%
}

.sol-body .slick-dots {
    bottom: -2rem;
}

.sol-body .loop-pro {
    margin-right: .5rem;
}

.sol-body h1 {
    margin-bottom: 2rem
}

.sol-content h2 {
    color: #333;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    line-height: 1.875rem;
    font-size: 1.625rem;
    margin: 2.5rem 0 1.5rem
}

.sol-content p {
    color: #333;
    line-height: 1.625rem;
    margin: 0 0 1.5rem
}

.sol-content strong {
    font-weight: 500
}

.sol-content .wp-block-gallery {
    margin: 2rem 0
}

.sol-content .wp-block-column ul,.sol-content>ul {
    margin-bottom: 1.5rem
}

.sol-content .wp-block-column ul li,.sol-content>ul li {
    line-height: 2rem;
    color: #174b84;
    font-family: Roboto,sans-serif;
    font-weight: 500;
    margin: 0
}

.sol-content .wp-block-column ul li:before,.sol-content>ul li:before {
    content: "-";
    display: inline-block;
    margin-right: .5rem
}

.sol-btn {
    margin-top: 3rem;
    margin-bottom: 5.75rem;
    line-height: 3.5rem;
    background: #308edb;
    color: #fff
}

.sol-btn:hover {
    background: #174b84
}

.sol-btn:after {
    content: "\e609";
    font-family: iconfont;
    font-size: .75rem;
    display: inline-block;
    margin-left: .5rem
}

.rel-pro-x {
    margin-bottom: 7.5rem
}

.touch #pro-menu,.touch #sol-menu {
    display: none!important
}

#sol-menu {
    display: grid;
    position: absolute;
    grid-template-columns: repeat(4,1fr);
    background: #fff;
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    width: var(--main_w1);
    left: calc((50vw - var(--main_w1)/ 2));
    border-left: solid 1px #f4f9fd;
    border-top: solid 1px #f4f9fd
}

#sol-menu li {
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 9.3%;
    border-right: solid 1px #f4f9fd;
    border-bottom: solid 1px #f4f9fd
}

#sol-menu .sol-item-thumb {
    width: 5.4375rem;
    height: 5.4375rem;
    flex: none;
    margin: 0;
    margin-right: 1rem
}

#sol-menu .sol-item-tit {
    text-align: left
}

#pro-menu {
    position: absolute;
    width: var(--main_w1);
    left: calc((50vw - var(--main_w1)/ 2));
    background: #fff;
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    padding: 2rem 2rem 3rem;
    display: grid;
    grid-template-columns: repeat(6,auto);
    grid-gap: 1rem;
    border-radius: 0 0 .5rem .5rem
}

#pro-menu .sider-menu-li>a {
    color: #131521;
    display: block;
    font-family: Roboto,sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1rem;
    margin-bottom: 1rem;
    padding: .5rem 1rem
}

#pro-menu .sider-menu-li>a:hover {
    color: #174b84;
    text-decoration: underline
}

#pro-menu .sider-menu-sub-li>a {
    font-size: .875rem;
    line-height: 1rem;
    color: #666;
    font-family: Roboto,sans-serif;
    display: block;
    padding: .5rem 1rem;
    border-radius: 2px
}

#pro-menu .sider-menu-sub-li>a:hover {
    color: #131521;
    background: #f4f4f4
}

#pro-menu .sider-menu-sub-li.current-menu-item>a {
    color: #131521;
    background: #f4f4f4
}

#pro-menu .sider-menu-li.current>a {
    color: #174b84;
    text-decoration: underline
}

.sidebar {
    width: 19.25rem;
    flex: none;
    margin-bottom: 4rem
}

.sider-contact {
    margin-top: 3.5rem
}

.sider-contact h2 {
    font-size: 1.75rem;
    line-height: 2rem;
    color: #174b84;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    padding-bottom: 1rem;
    border-bottom: solid 1px #d8d8d8;
    margin-bottom: 1rem
}

.sider-contact .tit {
    color: #174b84;
    font-size: .875rem;
    line-height: 1rem;
    margin: 0;
    font-weight: 700;
    font-family: Roboto,sans-serif
}

.sider-contact .txt {
    color: #333;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    font-family: "Helvetica Neue",Helvetica,Tahoma,Arial,sans-serif
}

.sider-contact i {
    margin-right: 1.125rem;
    width: 2.625rem;
    height: 2.625rem;
    line-height: 2.625rem;
    font-size: 1rem
}

.sider-contact li:not(:first-child) {
    margin-top: 1.5rem
}

.sider-menu .sider-menu-li {
    margin-bottom: .625rem
}

.sider-menu .sider-menu-li>a {
    font-size: 1.125rem;
    line-height: 1.625rem;
    color: #174b84;
    padding: 1rem 2rem;
    border-left: solid .5rem #308edb;
    background: #f4f9fd;
    display: block;
    position: relative;
    transition: all .3s ease;
    font-family: Roboto,sans-serif
}

.sider-menu .sider-menu-li>a:after {
    content: "\e609";
    font-family: iconfont;
    font-size: .75rem;
    color: #308edb;
    display: block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    transition: all .3s ease;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.sider-menu .sider-menu-li>a:hover {
    background: #308edb;
    color: #fff
}

.sider-menu .sider-menu-li>a:hover:after {
    color: #fff
}

.sider-menu .sider-menu-li.current>a {
    background: #308edb;
    border-left-color: #174b84;
    color: #fff;
    font-weight: 700
}

.sider-menu .sider-menu-li.current>a:after {
    color: #fff;
    transform: translateY(-50%) rotate(90deg)
}

.sider-menu .sider-menu-li.current .sider-menu-sub {
    display: block
}

.sider-menu .sider-menu-sub {
    display: none;
    padding: .75rem 2rem .75rem 2.5rem
}

.sider-menu .sider-menu-sub .sider-menu-sub-li.current-menu-item a {
    text-decoration: underline;
    font-weight: 500
}

.sider-menu .sider-menu-sub .sider-menu-sub-a {
    display: inline-block;
    line-height: 2.3125rem;
    font-family: Roboto,sans-serif;
    color: #174b84;
    transition: all .3s ease
}

.sider-menu .sider-menu-sub .sider-menu-sub-a:hover {
    color: #308edb
}

.xz-prols .xz-main {
    display: flex;
    justify-content: space-between
}

.xz-pro-x {
    flex: 1;
    margin-left: 5.3%
}

.xz-pro-x h1 {
    margin-bottom: 2.25rem
}

.pro-ls {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem .5rem
}

.sub-procats {
    margin-bottom: 2.25rem;
    display: flex;
    flex-flow: row wrap
}

.sub-procats li {
    margin-right: 1rem;
    margin-bottom: .5rem
}

.sub-procats a {
    font-size: .875rem;
    display: inline-block;
    line-height: 2rem;
    border: solid 1px #308edb;
    padding: 0 1.5rem;
    border-radius: 2rem;
    font-family: Roboto,sans-serif;
    font-weight: 500
}

.sub-procats a:hover {
    background: #308edb;
    color: #fff
}

.pro-cover-cats a {
    display: inline-block
}

.pro-cover-cats .lv1 {
    margin-top: 3rem
}

.pro-cover-cats .lv2-x {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem
}

.pro-cover-cats .lv2 {
    margin-bottom: 2rem;
    padding-top: 1rem;
    border-top: solid 2px #174b84
}

.pro-cover-cats .lv1-a {
    color: #131521;
    margin-bottom: 2rem
}

.pro-cover-cats .lv1-a:hover {
    color: #308edb;
    transform: translateX(5px)
}

.pro-cover-cats .lv2-a {
    font-size: 1rem;
    color: #174b84;
    font-family: Roboto,sans-serif;
    font-weight: 500;
    margin-bottom: 1rem
}

.pro-cover-cats .lv2-a:before {
    content: "\ea5d";
    font-family: iconfont;
    font-size: .75rem;
    display: inline-block;
    margin-right: .5rem
}

.pro-cover-cats .lv2-a:hover {
    color: #308edb;
    transform: translateX(5px)
}

.pro-cover-cats .lv3-x li {
    margin-bottom: .5rem
}

.pro-cover-cats .lv3-x a {
    line-height: 1.25rem;
    font-size: .875rem;
    font-family: Roboto,sans-serif;
    color: #666
}

.pro-cover-cats .lv3-x a:hover {
    text-decoration: underline;
    color: #308edb
}

.pro-cover-cats .lv3-x a:before {
    content: "\e609";
    font-family: iconfont;
    font-size: .5rem;
    display: inline-block;
    margin-right: .5rem;
    vertical-align: top
}

.xz-pro {
    padding-top: 0;
    background: #f8f8f8
}

.xz-pro .xz-main {
    display: flex
}

.pro-intro {
    background: #fff;
    padding-top: 4.8rem;
    padding-bottom: 2.8125rem;
    margin-bottom: 3.5rem
}

.pro-intro .xz-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.pro-gallery {
    flex: none;
    width: 41.65%;
    margin-right: 3.75rem;
    box-shadow: 0 .5rem 1.5625rem -.5rem rgba(0,0,0,.2);
    overflow: hidden
}

.pro-gallery a,.pro-gallery img {
    display: block;
    border-radius: 2px;
    overflow: hidden
}

.pro-gallery img {
    border: none!important
}

.pro-gallery dd {
    display: none
}

.pro-gallery .gallery-item {
    margin: 0!important
}

.pro-intro-x h1 {
    font-family: Roboto,sans-serif;
    font-size: 1.875rem;
    line-height: 2.5rem;
    margin: .875rem 0 1.5rem;
    color: #174b84;
    font-weight: 700
}

.pro-intro-x .share-tool {
    display: flex;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.pro-intro-x .share-tool>span {
    font-family: Roboto,sans-serif;
    font-weight: 500;
    line-height: 1.5rem;
    display: inline-block;
    margin-right: 1.5rem
}

.procat-tags {
    margin-bottom: 1rem
}

.procat-tags a {
    display: inline-block;
    background: #f4f9fd;
    border-radius: 1rem;
    padding: 0 .875rem;
    font-size: .875rem;
    line-height: 1.875rem;
    margin: 0 1rem 1rem 0
}

.procat-tags a:hover {
    background: #308edb;
    color: #fff
}

.pro-intro-txt {
    margin-top: 1.75rem;
    border-top: solid 1px #f4f4f4;
    border-bottom: solid 1px #f4f4f4;
    padding: 2rem 0;
    margin-bottom: 2rem
}

.pro-intro-txt li,.pro-intro-txt p {
    line-height: 1.625rem;
    font-size: .875rem;
    color: #666;
    margin: 0
}

.pro-intro-txt li {
    position: relative;
    padding-left: 1.5rem
}

.pro-intro-txt li:before {
    position: absolute;
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: #174b84;
    display: block;
    left: 0;
    top: .75rem
}

.xz-pro-intro-btn {
    display: flex;
    margin-bottom: 3.25rem
}

.pro-btn {
    margin-right: .75rem
}

.pro-btn.btn1 {
    background: #f4f9fd
}

.pro-btn.btn1:hover {
    background: #308edb
}

.pro-btn.btn2 {
    background: #308edb;
    color: #fff
}

.pro-btn.btn2:hover {
    background: #174b84
}

.pro-content-x {
    flex: none;
    position: relative;
    width: calc(75% - 1.5625rem)
}

.pro-intro-x {
    flex: 1
}

.pro-sidebar {
    width: 25%;
    margin-left: 1.5625rem
}

.pro-sidebar .pro-ls {
    grid-template-columns: 1fr;
    grid-gap: .625rem;
    margin-bottom: 2rem
}

.pro-content {
    padding: .5rem 2.625rem 5rem;
    background: #fff;
    color: #333;
    line-height: 2rem
}

.pro-content h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.875rem;
    color: #333
}

.pro-content p {
    margin: 0 0 1.5rem
}

.pro-content h3 {
    font-family: Roboto,sans-serif;
    color: #333;
    font-weight: 600;
    margin: 1.75rem 0 1.5rem;
    font-size: 1.25rem;
    line-height: 2rem
}

.pro-content ol,.pro-content ul {
    margin-bottom: 2rem
}

.pro-content>ul li {
    position: relative;
    padding-left: 1.5rem
}

.pro-content>ul li:before {
    position: absolute;
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: #174b84;
    display: block;
    left: 0;
    top: .75rem
}

.pro-content ol {
    padding-left: 0
}

.pro-content ol li {
    list-style: decimal;
    list-style-position: inside
}

.pro-content strong {
    font-weight: 600
}

.pro-content .wp-block-table {
    margin: 2rem 0
}

.pro-content .wp-block-table.is-style-stripes {
    border-bottom: none
}

.pro-content .table-x {
    overflow: auto
}

.pro-content table {
    width: 100%;
    font-size: .875rem;
    border-collapse: collapse
}

.pro-content table td {
    color: #333;
    padding: .8rem 1rem;
    line-height: 1.2rem;
    transition: all .3s ease;
    border: solid 1px #d8d8d8;
    text-align: center
}

.pro-content table th {
    font-family: Roboto,sans-serif;
    font-weight: 700;
    background: #f4f9fd;
    line-height: 1.5rem;
    color: #333;
    padding: 1rem 1rem;
    border: solid 1px #d8d8d8;
    text-align: center
}

.pro-content table tr:hover td {
    background: #f8f8f8
}

.pro-content a {
    color: #308edb;
    transition: all .3s ease
}

.pro-content a:hover {
    text-decoration: underline;
    color: #174b84
}

.pro-content .wp-block-image {
    margin: 2rem 0
}

.pro-content .wp-block-image img {
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.pro-sec-nav {
    overflow-x: auto;
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    background: #f4f9fd;
    height: 3.5rem;
    z-index: 99
}

.pro-sec-nav #nav-form {
    display: none
}

#pro-sec-nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start
}

#pro-sec-nav a {
    line-height: calc(3.5rem - 2px);
    padding: 0 1.5rem;
    color: #333;
    font-family: Roboto,sans-serif;
    font-weight: 600;
    border-right: solid 1px #dcdcdc;
    transition: all .3s ease;
    border-top: solid 2px #dcdccd;
    white-space: nowrap
}

#pro-sec-nav a:hover {
    background: #fff;
    border-top-color: #308edb
}

.about-sec1 {
    margin-top: 1rem;
    background: url(../img/about-bg.jpg) 50% 100% no-repeat;
    background-size: 100% auto
}

.about-sec1 img {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.specialties {
    background: #f2f9ff;
    padding-top: 3.75rem;
    padding-bottom: 5rem;
    margin-top: 6rem;
    margin-bottom: 6.75rem
}

.specialties ul {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 1.25rem;
    margin-top: 3.25rem
}

.specialties li {
    background: #fff;
    box-shadow: 0 2px 1.25rem .5rem rgba(221,233,255,.5);
    padding: 2.625rem 1.25rem;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    transition: all .3s ease;
    color: #666;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem
}

.specialties li:hover {
    transform: translateY(-5px)!important;
    box-shadow: 0 .5rem 1.75rem -.75rem rgba(48,142,219,.3)
}

.specialties li:hover strong {
    color: #174b84
}

.specialties li:nth-of-type(2) i {
    background: #5bc198
}

.specialties li:nth-of-type(3) i {
    background: #f48000
}

.specialties li:nth-of-type(4) i {
    background: #d580d2
}

.specialties i {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    font-size: 2.5rem;
    color: #fff;
    text-align: center;
    line-height: 5.5rem;
    background: #308edb;
    margin: 0 0 1.6875rem;
    -webkit-clip-path: url(#egg-cp1);
    clip-path: url(#egg-cp1)
}

.specialties strong {
    font-family: Roboto,sans-serif;
    font-weight: 700;
    color: #333;
    font-size: 1.25rem;
    line-height: 1.5rem;
    display: block;
    margin-bottom: 1.125rem;
    transition: all .3s ease
}

.xz-about h2 {
    font-size: 2.5rem;
    line-height: 2.875rem;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    color: #092c42;
    margin: 0
}

.xz-about h2:after {
    content: "";
    display: block;
    width: 3rem;
    height: .25rem;
    background: #308edb;
    margin-top: .75rem;
    margin-bottom: 1rem;
    border-radius: 2px
}

.xz-about h2.has-text-align-center {
    text-align: center
}

.xz-about h2.has-text-align-center:after {
    margin-left: auto;
    margin-right: auto
}

.xz-about h2+p strong {
    color: #174b84;
    font-weight: 500;
    font-family: Roboto,sans-serif;
    font-size: 1.125rem;
    line-height: 1.625rem
}

.about-intro {
    margin-bottom: 7.5rem
}

.about-intro>div:first-child {
    flex: none
}

.about-intro>div:last-child {
    flex: 1;
    margin-left: 7.25%;
    margin-right: 3%
}

.about-intro p {
    color: #666;
    line-height: 1.625rem;
    margin: 0 0 1.25rem
}

.about-intro2>div:last-child {
    flex: none;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-end
}

.about-intro2>div:first-child {
    flex: 1;
    margin-right: 8%
}

.about-intro2 h3 {
    position: relative
}

.about-intro2 h3:before {
    content: "";
    display: block;
    width: 6.3rem;
    height: 3.75rem;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%,-50%);
    background: url(../img/title-mark.png) no-repeat 50% 50%;
    background-size: 100% auto;
    z-index: -1
}

.about-intro2 p {
    color: #333;
    line-height: 1.625rem;
    margin-bottom: 1.625rem
}

.about-video a,.about-video img {
    display: block
}

.about-video a {
    background: #131521;
    position: relative
}

.about-video img {
    opacity: .61;
    transition: all .3s ease
}

.about-video:hover img {
    opacity: 1
}

.about-video:hover a:after {
    font-size: 5rem;
    opacity: 0
}

.about-video a:after {
    content: "\e671";
    font-family: iconfont;
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s ease
}

.cert-des {
    max-width: 50%;
    margin: 0 auto 2.5rem
}

.clients-des {
    max-width: 85%;
    margin: 0 auto 2.5rem
}

.qualification {
    margin-bottom: 6rem
}

.qualification ul {
    width: 100%
}

.qualification li.blocks-gallery-item {
    background: #fff;
    border: solid .5rem #f2f9ff;
    padding: 2rem
}

.qualification li.blocks-gallery-item:not(:last-child) {
    margin-right: 1.6875rem!important
}

.qualification li.blocks-gallery-item figcaption {
    left: 0;
    background: linear-gradient(180deg,rgba(97,118,127,0) 0,#174b84 100%)
}

.qualification li.blocks-gallery-item a {
    overflow: hidden;
    overflow: hidden;
    border-radius: 5px
}

.qualification li.blocks-gallery-item a img {
    display: block;
    transition: all .3s ease
}

.qualification li.blocks-gallery-item a:hover img {
    filter: brightness(1.05);
    transform: scale(1.05)
}

.qualification .slick-dots {
    bottom: -2rem
}

.history {
    margin-bottom: 6rem;
    border: solid .875rem #fff;
    box-shadow: 0 2px 1.25rem .5rem rgba(221,233,255,.5);
    background: #f4f9fd
}

.history>div:first-child {
    position: relative
}

.history>div:first-child:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(23,75,132,.49)
}

.history>div:first-child img {
    display: block
}

.history>div:first-child figure {
    height: 100%
}

.history>div:first-child figure img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.history>div:last-child {
    padding: 5.5%;
    margin-left: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start
}

.history h2 {
    flex: none;
    margin-bottom: 3.75rem
}

.history h2:after {
    content: none
}

.history ul {
    flex: none;
    border-left: solid 1px #ddd
}

.history li {
    padding-left: 2rem;
    display: flex!important;
    flex-flow: row nowrap;
    align-items: flex-start;
    position: relative!important;
    color: #666;
    line-height: 1.625rem;
    font-size: 1.125rem;
    height: 5.25rem!important;
    transform: translateY(1rem)
}

.history li:before {
    content: "";
    display: block;
    width: .75rem;
    height: .75rem;
    border-radius: .5rem;
    background: #308edb;
    position: absolute;
    left: 0;
    top: .5rem;
    transform: translateX(-50%)
}

.history li strong {
    flex: none;
    font-size: 1.375rem;
    color: #174b84;
    font-weight: 500;
    margin-right: 1.125rem
}

.history li:nth-of-type(4n+2):before {
    background: #5bc198
}

.history li:nth-of-type(4n+3):before {
    background: #f48000
}

.history li:nth-of-type(4n):before {
    background: #d580d2
}

.history .slick-arrow {
    font-size: 0;
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 2rem;
    position: relative;
    background: 0 0;
    border: none;
    transition: all .3s ease;
    position: absolute;
    left: -1.5rem;
    bottom: -3rem;
    z-index: 99
}

.history .slick-arrow:before {
    content: "\e614";
    font-family: iconfont;
    color: #666;
    font-size: 1.125rem;
    font-weight: 600;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.history .slick-arrow.slick-disabled {
    opacity: 0
}

.history .slick-arrow:hover {
    background: #308edb
}

.history .slick-arrow:hover:before {
    color: #fff
}

.history .slick-arrow:active {
    transform: scale(.9)
}

.history .slick-arrow.slick-prev {
    bottom: auto;
    top: -3rem
}

.history .slick-arrow.slick-prev:before {
    transform: translate(-50%,-50%) rotate(180deg)
}

.clients .blocks-gallery-item {
    border-radius: 5px;
    overflow: hidden
}

.clients figcaption.blocks-gallery-item__caption {
    height: 100%;
    background: linear-gradient(-90deg,rgba(97,118,127,0) 0,#174b84 100%);
    padding: 1.5rem 3.25rem 1.25rem 1.625rem;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.625rem;
    text-align: left;
    font-weight: 500
}

.clients figcaption.blocks-gallery-item__caption:after {
    content: "";
    display: block;
    width: 1.75rem;
    height: 3px;
    background: #308edb;
    border-radius: 2px;
    margin-top: 1rem
}

.home-sec-tit {
    font-size: 2.5rem;
    line-height: 2.9375rem;
    color: #092c42;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    margin-top: 4.25rem;
    margin-bottom: 1.625rem
}

.home-sec-tit:after {
    content: "\e687";
    font-family: iconfont;
    color: #308edb;
    font-size: 1rem;
    display: inline-block;
    margin-left: 1.125rem;
    font-weight: 400;
    vertical-align: 3px
}

.card-txt a,.xz-btn.home-btn {
    line-height: 2.5rem;
    padding: 0 1.25rem
}

.card-txt a:after,.xz-btn.home-btn:after {
    content: "\e609";
    font-family: iconfont;
    display: inline-block;
    font-size: .6rem;
    margin-left: 3.75rem;
    vertical-align: 2px;
    line-height: 1em
}

.home-sol {
    position: relative;
    overflow: hidden;
    border-bottom: solid 1px #f8f8f8;
    padding-bottom: 3rem
}

.home-sol h2 {
    margin-bottom: 5rem
}

.home-sol:after,.home-sol:before {
    content: "";
    display: block;
    width: 66vw;
    height: 66vw;
    background: #f4f9fd;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    -webkit-clip-path: polygon(100% 0,0 0,0 100%);
    clip-path: polygon(100% 0,0 0,0 100%)
}

.home-sol:after {
    background: #f8f8f8;
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    -webkit-clip-path: polygon(100% 0,0 100%,100% 100%);
    clip-path: polygon(100% 0,0 100%,100% 100%)
}

.home-sol .xz-main1 {
    position: relative;
    z-index: 9
}

.home-sol .wp-block-media-text__media {
    overflow: hidden;
    border-radius: 3px
}

.home-sol .wp-block-media-text__media img {
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.home-sol .wp-block-media-text {
    margin-bottom: 3.75rem;
    grid-template-columns: 47.2% 1fr;
    grid-gap: 5.5%
}

.home-sol .has-media-on-the-right {
    grid-template-columns: 1fr 47.2%
}

.home-sol .has-media-on-the-right .wp-block-media-text__content {
    padding-right: 0;
    padding-left: 6%
}

.home-sol .wp-block-media-text__content {
    padding: 0;
    padding-right: 6%
}

.home-sol h3 {
    font-size: 2rem;
    height: 2.375rem;
    color: #174b84;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    margin: 0 0 2.1875rem
}

.home-sol p {
    line-height: 1.625rem;
    margin: 0;
    color: #666;
    padding-left: 1.5rem;
    border-left: solid 3px #308edb
}

.home-sol .detail {
    padding-left: 0;
    border-left: 0;
    margin-top: 2.625rem
}

.home-sol .detail a {
    font-family: Roboto,sans-serif;
    font-weight: 700;
    font-size: .875rem
}

.home-sol .detail a:after {
    content: "\e609";
    font-family: iconfont;
    display: inline-block;
    margin-left: .5rem;
    font-size: .6rem;
    vertical-align: 1px;
    transition: all .3s ease
}

.home-sol .detail a:hover {
    color: #174b84
}

.home-sol .detail a:hover:after {
    transform: translateX(5px)
}

.home-sol .wp-block-media-text:first-of-type {
    position: relative
}

.home-sol .wp-block-media-text:first-of-type:after {
    content: "";
    width: 14.375rem;
    height: 6rem;
    display: block;
    background: url(../img/about1.png) 50% 50% no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-150%)
}

.home-sol .wp-block-media-text:last-of-type {
    position: relative
}

.home-sol .wp-block-media-text:last-of-type:after {
    content: "";
    width: 14.375rem;
    height: 6rem;
    display: block;
    background: url(../img/about2.png) 50% 50% no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(50%)
}

.home-about {
    margin-top: 4rem;
    display: flex;
    flex-flow: row wrap;
    background: url(../img/home-bg1.png) no-repeat 95% 0;
    background-size: 22% auto;
    position: relative;
    z-index: 1
}

.about-pic-x {
    flex: none;
    width: 50%;
    transform: translateY(4rem)
}

.about-pic {
    display: block;
    border-radius: 0 3px 3px 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.about-content-x {
    margin-left: 4.375rem;
    margin-right: calc(50vw - var(--main_w1)/ 2);
    flex: 1;
    padding-bottom: 3.5rem
}

.about-content-x h2 {
    margin-top: 6rem
}

.about-content {
    margin-bottom: 2rem
}

.about-content p {
    color: #666;
    line-height: 2rem;
    margin: 0
}

.home-turnkey .xz-main1 {
    position: relative
}

.home-turnkey .sec-des {
    margin-top: -1.5rem;
    color: #308edb;
    line-height: 1rem;
    margin-bottom: 3.5rem
}

.home-turnkey .home-btn {
    position: absolute;
    right: 0;
    top: 1rem
}

.home-turnkey-x {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rem
}

.tk-pic-x {
    flex: none;
    width: 45.5%;
    margin-right: 4.5%
}

.tk-pic {
    display: block;
    border-radius: 0 3px 3px 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.tk-txt {
    padding: 0 5% 0 1.5%
}

.tk-txt ul {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between
}

.tk-txt li {
    display: flex;
    margin: .5rem 0;
    color: #333;
    line-height: 1.625rem;
    align-items: center
}

.tk-txt li i {
    flex: none;
    font-size: 3.75rem;
    color: #308edb;
    line-height: 1em;
    margin-right: 2rem
}

.home-cards {
    background: #f8f8f8;
    overflow: hidden;
    padding-top: 8.5rem;
    padding-bottom: 5.75rem
}

.home-cards .xz-main1 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 3.125%
}

.home-card {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-flow: column;
    background-size: cover;
    transition: all .3s ease
}

.home-card:after {
    content: "";
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: #174b84;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%);
    clip-path: polygon(0 0,100% 0,100% 100%)
}

.home-card .home-card-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    transition: all .3s .1s ease
}

.home-card .card-btm,.home-card .card-top {
    position: relative;
    z-index: 2
}

.home-card .card-top {
    padding: 2.5rem;
    flex: none;
    height: 45%
}

.home-card .card-btm {
    flex: none;
    height: 55%
}

.card-tit {
    color: #333;
    font-size: 1.625rem;
    line-height: 1.875rem;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    margin: 1.375rem 0
}

.card-intro {
    color: #666;
    line-height: 1.625rem;
    margin: 0
}

.card-btm {
    position: relative;
    min-height: 19rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 4rem;
    display: flex;
    flex-flow: column
}

.card-pic {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all .3s ease;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.card-txt {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between
}

.card-txt ul {
    margin-bottom: 1rem
}

.card-txt p {
    margin: 0
}

.card-txt li {
    color: #666;
    font-size: .875rem;
    line-height: 2rem;
    position: relative;
    padding-left: 1.5rem
}

.card-txt li:before {
    position: absolute;
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: #174b84;
    display: block;
    left: 0;
    top: .75rem
}

.card-txt a {
    color: #fff;
    border: solid 1px #fff;
    line-height: 2.5rem;
    border-radius: 2rem;
    display: inline-block;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    font-size: .875rem
}

.card-txt a:hover {
    background: #174b84;
    border-color: #174b84
}

.card-txt a:active {
    transform: scale(.95)
}

.home-card:hover {
    transform: translateY(-.5rem)
}

.home-card:hover .card-pic {
    transform: translateY(100%)
}

.home-card:hover .home-card-bg {
    background: rgba(10,127,200,.77)
}

.home-card:hover .card-intro,.home-card:hover .card-txt li {
    color: #fff
}

.home-pro {
    padding-top: 4.8rem;
    padding-bottom: 7rem
}

.home-procats-x {
    position: relative
}

.home-procats-x:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    border-top: solid 1px #ddd;
    position: absolute;
    top: 4.8rem
}

.procat-index-ul {
    display: flex;
    justify-content: space-between;
    padding: 0 7%
}

.procat-index-li {
    position: relative;
    z-index: 9;
    margin: 0 2rem
}

.procat-index-li a {
    display: flex;
    flex-flow: column;
    align-items: center
}

.procat-index-li img {
    display: block;
    margin-bottom: 3.5rem;
    height: 50px
}

.procat-index-li h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3125rem;
    color: #333;
    font-weight: 500;
    font-family: Roboto,sans-serif;
    text-align: center
}

.procat-index-li:after {
    content: "";
    display: block;
    width: .625rem;
    height: .625rem;
    position: absolute;
    background: #ddd;
    border-radius: 1rem;
    top: 4.55rem;
    left: 50%;
    transform: translate(-50%,0);
    transition: all .3s ease
}

.procat-index-li:before {
    content: "";
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 1rem;
    background: #fff;
    z-index: -1;
    position: absolute;
    border: solid 1.5px #308edb;
    top: 4.2rem;
    left: 50%;
    transform: translate(-50%,0);
    transition: all .3s ease;
    opacity: 0
}

.procat-index-li:hover:after {
    background: #308edb
}

.procat-index-li.current:after {
    background: #308edb
}

.procat-index-li.current:before {
    opacity: 1
}

.mySwiper02 .swiper-slide{ width: 1343px;}
.procat-x {
    display: flex!important;
    border-radius: 2px;
    overflow: hidden;
/*    margin-left: 5rem;
    margin-right: 5rem;*/
   
}

.home-pro-intro {
    background: #308edb;
    padding: 5rem 3.4375rem;
    padding-right: 1.75rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 49%;
    flex: none;
    min-height: 54vh;
}

.home-pro-intro h3 {
    line-height: 2.375rem;
    font-size: 2rem;
    font-family: Roboto,sans-serif;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1.75rem
}

.home-pro-ls-x {
    flex: 1;
    position: relative;
    background-size: cover
}

.home-pro-ls-x:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(23,75,132,.22);
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0
}

.home-pro-txt {
    color: #fff;
    line-height: 1.625rem;
    margin: 0
}

.home-pro-content {
    margin-top: 4.5rem;
    position: relative
}

.home-pro-content .slick-track {
    display: flex
}

.home-pro-content .slick-track li {
    height: auto
}

.home-pro-content .slick-arrow {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0,-50%);
    font-size: 0;
    border: none;
    z-index: 99;
    background: 0 0;
    opacity: .3;
    transition: all .3s ease
}

.home-pro-content .slick-arrow:hover {
    opacity: 1
}

.home-pro-content .slick-arrow:active {
    transform: translate(0,-50%) scale(.8)
}

.home-pro-content .slick-arrow:after {
    content: "\e615";
    font-family: iconfont;
    font-size: 2rem;
    color: #333;
    display: block
}

.home-pro-content .slick-arrow.slick-disabled {
    opacity: 0
}

.home-pro-content .slick-next {
    left: auto;
    right: 10%
}

.home-pro-content .slick-next:after {
    content: "\e609"
}

.home-pro-ls {
    position: absolute;
    left: 1.75rem;
    bottom: 2rem;
    right: 2rem;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.home-pro-ls .more {
    flex: none;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 2rem;
    background: #308edb;
    color: #fff;
    line-height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    margin-left: 1.75rem
}

.home-pro-ls .more:hover {
    background: #174b84
}

.home-pro-ls .more:active {
    transform: scale(.95)
}

.home-hotpros {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: .5625rem
}

@media screen and (max-width: 1650px) {
    .procat-x {
        margin-left:3rem;
        margin-right: 3rem
    }

    .home-pro-content .slick-arrow {
        left: 8%
    }

    .home-pro-content .slick-next {
        left: auto;
        right: 8%
    }

    .procat-index-ul {
        padding: 0 4%
    }
}

@media screen and (max-width: 1366px) {
    .home-pro-ls {
        flex-flow:column-reverse;
        align-items: flex-end
    }

    .home-pro-ls .more {
        margin-bottom: 1.5rem
    }

    .about-intro>div:first-child {
        width: 45%
    }

    .about-intro>div:last-child {
        margin: 0;
        margin-left: 5%;
        flex: none;
        width: 50%
    }
}

@media screen and (max-width: 1280px) {
    .tk-txt li {
        align-items:flex-start
    }

    .tk-txt li i {
        font-size: 3rem;
        margin-top: .5rem
    }

    .about-intro2>div:first-child {
        margin-right: 5%
    }

    .about-intro2>div:last-child {
        width: 40%
    }

    .about-intro2>div:last-child .about-rb {
        max-width: 40%
    }

    .service-intro {
        padding-right: 30%
    }
}

@media screen and (max-width: 1024px) {
    .procat-x {
        flex-flow:column
    }

    .home-pro-intro {
        width: 100%;
        padding: 3rem 3rem 2rem
    }

    .home-pro-ls {
        position: relative;
        padding: 2rem 3rem 3rem;
        left: 0;
        bottom: 0;
        right: 0
    }

    .h1 {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .home-sec-tit {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .xz-about h2 {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .home-sol .wp-block-media-text:first-of-type:after,.home-sol .wp-block-media-text:last-of-type:after {
        width: 10rem
    }

    .specialties ul {
        grid-template-columns: repeat(2,1fr)
    }

    .history li {
        font-size: 1rem
    }

    #xz-form h2 {
        font-size: 2rem;
        line-height: 1em
    }

    .xz-prols .xz-main {
        flex-flow: column-reverse
    }

    .xz-prols .sidebar {
        width: 100%
    }

    .xz-procover .sidebar {
        display: none
    }

    .xz-pro-x {
        margin-left: 0;
        margin-bottom: 5rem
    }

    .pro-intro+.xz-main {
        flex-flow: column
    }

    .pro-content-x {
        width: 100%;
        margin-bottom: 3rem
    }

    .pro-sidebar {
        width: 100%;
        margin-left: 0
    }

    .pro-sidebar .pro-ls {
        grid-template-columns: 1fr 1fr 1fr
    }

    .benefit {
        grid-template-columns: repeat(3,1fr)
    }

    .xz-turns .intro .wp-block-column:last-child {
        margin-left: 0;
        margin-top: 1rem
    }

    .service-tab-tit-x {
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
        position: static
    }

    .service3 .wp-block-column {
        padding: 2rem 1.5rem 3rem 2rem
    }

    .service-tab-tit::after {
        background: #eee!important
    }

    .contact-banner p {
        font-size: 1.5rem
    }
}

@media screen and (max-width: 800px) {
    .procat-index-ul {
        padding:0
    }

    .procat-index-li img {
        transform: scale(.75)
    }

    .home-pro-intro h3,.home-sol h3 {
        font-size: 1.75rem;
        height: auto;
        line-height: 1em
    }

    .home-card .card-top {
        padding: 1.5rem
    }

    .card-btm {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 2.5rem
    }

    .about-content-x {
        margin-left: 3rem
    }

    .about-intro {
        flex-flow: column-reverse
    }

    .about-intro>div:first-child {
        margin-top: 1rem;
        width: 100%;
        max-width: 500px
    }

    .about-intro>div:last-child {
        width: 100%;
        margin-left: 0
    }

    .about-intro2 {
        flex-flow: column
    }

    .about-intro2>div:last-child {
        width: 100%;
        margin-left: 0;
        flex-flow: row;
        margin-top: 1.5rem
    }

    .about-intro2>div:last-child .about-rb {
        display: none
    }

    .history .wp-block-column:last-child {
        flex: none!important;
        width: 66%
    }

    .history .wp-block-column:first-child {
        flex: none!important;
        width: 33%
    }

    .cert-des {
        max-width: 80%
    }

    .qualification li.blocks-gallery-item {
        padding: 1rem
    }

    .clients figcaption.blocks-gallery-item__caption {
        font-size: 1rem;
        line-height: 1.4rem
    }

    #xz-form {
        flex-flow: column;
        margin-top: 5rem
    }

    #xz-form>div {
        width: 100%
    }

    .xz-sol-ul {
        grid-template-columns: repeat(3,1fr)
    }

    .sol-cats-x {
        flex-flow: column;
        margin-bottom: 2rem
    }

    .sol-cats {
        margin-top: 2rem;
        justify-content: space-around
    }

    .xz-sol .xz-main {
        flex-flow: column-reverse
    }

    .sol-body {
        margin-left: 0;
        width: 100%;
    }

    .sidebar {
        width: 100%
    }

    .pro-sec-nav {
        display: none
    }

    .pro-intro .xz-main {
        flex-flow: column-reverse
    }

    .pro-gallery {
        width: 100%;
        max-width: 400px;
        margin-top: 3rem
    }

    .pro-intro {
        padding-top: 2.5rem
    }

    .xz-turnkey .intro figure {
        width: 25%;
        transform: translateY(0);
        margin-left: 2rem
    }

    .xz-turns .intro {
        margin-bottom: 3rem
    }

    .xz-turns .we-offer ul {
        height: auto
    }

    .phases .wp-block-column {
        padding-bottom: 3rem
    }

    .service-intro {
        padding: 3rem 20% 3rem 2rem
    }

    .service-intro h2 {
        font-size: 2rem;
        line-height: 2.2rem
    }

    .service-intro h2:after {
        margin: 1rem 0 1.5rem
    }

    .service-intro p {
        font-size: 1rem
    }

    .service3 {
        flex-flow: column
    }

    .service3 .wp-block-column:not(:first-child) {
        border-left: none;
        border-top: solid 1px #e6e6e6
    }

    .service3 .wp-block-column figure {
        align-self: flex-start;
        width: 3rem;
        height: 3rem
    }

    .service3 .wp-block-column h3 {
        margin: 2rem 0 1rem
    }

    .service4 li {
        padding: 1.5rem
    }

    .news-cat-x {
        padding-left: 0;
        padding-right: 0
    }

    .contact-banner p {
        font-size: 1.25rem
    }
}

@media screen and (max-width: 600px) {
    #searchform {
        width:80%
    }

    .home-procats-x .xz-main1 {
        width: calc(100% - 1rem);
        overflow: auto
    }

    .procat-index-li img {
        transform: scale(.65)
    }

    .procat-index-li {
        margin: 0 .75rem
    }

    .procat-index-li h3 {
        font-size: .875rem;
        line-height: 1rem
    }

    .procat-x {
        margin-left: 0;
        margin-right: 1rem
    }

    .slick-arrow {
        display: none!important
    }

    .home-pro-intro {
        padding: 2.5rem 1.75rem 1.75rem
    }

    .home-pro-ls {
        padding: 1rem 1.5rem 2rem
    }

    .home-pro-content {
        margin-top: 2rem
    }

    .h1 {
        font-size: 2rem;
        line-height: 2.25rem;
        margin-bottom: 3rem
    }

    .h2 {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .sol-content h2 {
        font-size: 1.5rem
    }

    .home-pro {
        padding-top: 3rem;
        padding-bottom: 4rem
    }

    .home-sec-tit {
        font-size: 2rem;
        line-height: 2.25rem
    }

    .sol-cats-x h1,.xz-about h2 {
        font-size: 2rem;
        line-height: 2.25rem
    }

    .home-sol {
        padding-bottom: 1rem
    }

.mySwiper02 .swiper-slide{ width:100%}
    .home-pro-intro h3,.home-sol h3 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem
    }

    .home-sol .wp-block-media-text:first-of-type:after,.home-sol .wp-block-media-text:last-of-type:after {
        display: none
    }

    .home-sol h2 {
        margin-bottom: 2.5rem
    }

    .home-sol .has-media-on-the-right .wp-block-media-text__content {
        padding-left: 0;
        padding-right: 6%
    }

    .home-sol .detail {
        margin-top: 1.25rem;
        margin-bottom: 1.75rem
    }

    .home-about {
        margin-top: 1rem;
        flex-flow: column
    }

    .about-pic-x {
        width: 75%
    }

    .about-content-x {
        margin-left: calc(50vw - var(--main_w1)/ 2)
    }

    .home-cards {
        padding-top: 5rem;
        padding-bottom: 4rem
    }

    .home-cards .xz-main1 {
        grid-template-columns: 1fr
    }

    .card-txt {
        flex: none
    }

    .home-turnkey .home-btn {
        position: static;
        margin-bottom: 2rem
    }

    .home-turnkey .sec-des {
        margin-bottom: 1.5rem
    }

    .home-turnkey-x {
        flex-flow: column
    }

    .tk-pic-x {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem
    }

    .tk-txt li i {
        font-size: 2.25rem;
        margin-right: 1.5rem
    }

    .home-turnkey-x {
        margin-bottom: 5rem
    }

    .specialties ul {
        grid-template-columns: 1fr
    }

    .history {
        flex-flow: column
    }

    .history .wp-block-column {
        width: 100%!important
    }

    .history .slick-arrow {
        display: block!important;
        transform: scale(.75)
    }

    .history .wp-block-column:last-child {
        padding-bottom: 3rem
    }

    .history .wp-block-column:first-child {
        height: 15rem;
        margin-bottom: 1.5rem
    }

    .history .wp-block-column:first-child img {
        -o-object-position: top;
        object-position: top
    }

    .xz-about h2 {
        margin-bottom: 2rem
    }

    .history li strong {
        font-size: 1.125rem
    }

    .history li {
        padding-left: 1rem;
        font-size: .875rem
    }

    .qualification li.blocks-gallery-item {
        padding: .5rem
    }

    .qualification li.blocks-gallery-item:not(:last-child) {
        margin-right: 1rem!important
    }

    .clients .blocks-gallery-item {
        width: 100%;
        margin-right: 0
    }

    .specialties {
        margin-bottom: 4rem
    }

    #xz-form h2+p {
        font-size: .875rem;
        margin-bottom: 2rem
    }

    .xz-contact-ul .txt {
        font-size: 1.125rem
    }

    .xz-contact-ul i {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 1rem
    }

    .xz-contact-ul li:not(:first-child) {
        margin-top: 2rem
    }

    .xz-sol-ul {
        grid-template-columns: repeat(2,1fr)
    }

    .sol-cats {
        flex-flow: row wrap;
        justify-content: flex-start;
        padding-left: 0;
        -webkit-clip-path: none;
        clip-path: none;
        background: 0 0
    }

    .sol-cats li {
        margin-bottom: .5rem;
        margin-right: .5rem
    }

    .sol-cats li a {
        border: solid 1px #308edb;
        border-radius: 2rem
    }

    .sol-cats li.current-menu-item a {
        background: #308edb;
        color: #fff
    }

    .pro-ls {
        grid-template-columns: 1fr 1fr
    }

    .pro-sidebar .pro-ls {
        grid-template-columns: 1fr 1fr
    }

    .pro-content {
        padding: .5rem 1.25rem 3rem
    }

    .pro-content iframe {
        max-width: 100%
    }

    .pro-content table td,.pro-content table th {
        padding: .5rem
    }

    .pro-intro .xz-main {
        flex-flow: column
    }

    .pro-gallery {
        margin: 0 0 2rem
    }

    .pro-intro-x h1 {
        font-size: 1.6rem;
        line-height: 2rem
    }

    .pro-intro-txt {
        margin-top: 1rem;
        padding: 1rem 0
    }

    .xz-pro-intro-btn {
        flex-flow: column;
        margin-bottom: 1rem
    }

    .xz-pro-intro-btn a {
        margin-bottom: 1rem;
        text-align: center
    }

    .xz-turnkey .intro figure {
        width: 150px;
        margin-left: 1rem
    }

    .xz-turnkey .intro {
        margin-top: 0
    }

    .benefit {
        grid-template-columns: 1fr
    }

    .benefit li {
        display: flex;
        flex-flow: row nowrap;
        align-items: center
    }

    .benefit li i {
        flex: none;
        margin-right: 1rem
    }

    .z-card h3 {
        font-size: 1.5rem;
        line-height: 1.8rem
    }

    .z-card .txt {
        margin-top: 1rem
    }

    .xz-turns .intro .wp-block-column:first-child {
        margin-right: 0
    }

    .xz-turns .we-offer {
        margin-bottom: 3rem
    }

    .phases h3 {
        margin-top: 1.25rem;
        font-size: 1.4rem;
        line-height: 1.6rem
    }

    #xz-form {
        background: #131521
    }

    #xz-form h2 {
        font-size: 1.5rem
    }

    .service-tab-tit-x {
        grid-template-columns: 1fr
    }

    .service-intro {
        padding: 3rem 5% 2rem 2rem
    }

    .service-tab-content-x h2 {
        font-size: 2rem
    }

    .z-card h3+ul {
        margin-top: 1rem
    }

    .service4 {
        grid-template-columns: 1fr
    }

    .news-cat-x a::before {
        display: block;
        margin: 0 auto .5rem
    }

    .news-cat-x a {
        white-space: nowrap;
        font-size: 1rem
    }

    .xz-news-ul {
        grid-template-columns: 1fr
    }

    .post-body {
        margin-top: -2rem;
        padding: 3rem 5%
    }

    .post-data {
        margin-right: 1rem
    }

    .contact-banner p {
        font-size: .875rem;
        line-height: 1em
    }

    .contact-banner img {
        height: 3.5rem;
        -o-object-fit: cover;
        object-fit: cover
    }

    .contact-banner p {
        left: 18%;
        right: 4%;
        justify-content: flex-end
    }

    .xz-contact .wp-block-columns>div:last-child {
        margin-top: 2rem
    }

    .add-x {
        padding: 2rem 0 1rem;
        background: #fff;
        margin-bottom: 1rem
    }

    .pro-cover-cats .lv2-x {
        grid-template-columns: 1fr;
        grid-gap: 0
    }

    .pro-cover-cats .lv1-a {
        margin-bottom: 1rem
    }

    .xz-procover .xz-pro-x {
        margin-bottom: 0
    }

    .pro-cover-cats .lv1 {
        margin-top: 1rem
    }
}

.sol-content .wp-block-column ul li a {
    color: inherit;
}

.sol-content .wp-block-column ul li a:hover {
    text-decoration: underline;
}

.home-pro-txt li {
    list-style: disc;
    list-style-position: inside;
    font-size: .875rem;
    font-family: Roboto;
    opacity: .8;
}

.home-pro-txt ul {
    margin-top: .75rem;
}

.xz-turns .content h2 {
    margin-top: 3rem;
}

.xz-turns .content>p {
    margin-bottom: 1.5rem;
}

@media screen and (max-width:1650px) {
	.xz-banner-info p {
		font-size: 1.5rem;
		line-height: 1em
	}

	.xz-banner-info h2 {
		font-size: 2.75rem;
		line-height: 3rem
	}

	.xz-banner-a {
		line-height: 3.5rem
	}

	.xz-banner-a i.iconfont {
		width: 2.8rem;
		height: 2.8rem;
		line-height: 2.8rem
	}
}

@media screen and (max-width:1280px) {
	.xz-banner-info p {
		font-size: 1rem;
		margin-bottom: 1.5rem
	}

	.xz-banner-info h2 {
		font-size: 2.125rem;
		line-height: 2.4rem;
		margin-bottom: 1.5rem
	}

	.xz-banner-a {
		line-height: 3rem
	}

	.xz-banner-a i.iconfont {
		width: 2.2rem;
		height: 2.2rem;
		line-height: 2.2rem
	}
}

@media screen and (max-width:1023px) {
	.xz-banner {
		margin-top: 3.75rem;
		height: 320px
	}

	.slick-list,
	.slick-track,
	.xz-banner-ul {
		height: 100%
	}

	.xz-banner-img {
		height: 100%;
		width: 100%;
		max-width: none;
		-o-object-fit: cover;
		object-fit: cover
	}

	.xz-banner-info {
		width: 75%
	}
}

@media screen and (max-width:800px) {
	.xz-banner-info p {
		font-size: .875rem;
		margin-bottom: 1rem
	}

	.xz-banner-info h2 {
		font-size: 1.5rem;
		line-height: 2rem;
		margin-bottom: 1rem
	}

	.xz-banner-a {
		line-height: 2.5rem;
		padding-right: 2rem;
		font-size: .75rem
	}

	.xz-banner-a i.iconfont {
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
		margin-right: 1rem;
		font-size: .75rem
	}
}

@media screen and (max-width:600px) {
	.xz-banner-info {
		width: 100%
	}

	.xz-banner {
		height: 280px
	}

	.xz-banner .slick-dots li button::before {
		font-size: 8px
	}

	.xz-banner .slick-dots {
		bottom: .75rem
	}
}

@media only screen and (max-width: 980px) {
.bannerhou .img-bg .img img{ object-fit: cover; height:280px}

	}