@font-face {font-family: "iconfont";
    src: url('https://at.alicdn.com/t/font_2433237_3ix0zi7jwxe.eot?t=1616398733875'); /* IE9 */
    src: url('https://at.alicdn.com/t/font_2433237_3ix0zi7jwxe.eot?t=1616398733875#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('https:data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('https://at.alicdn.com/t/font_2433237_3ix0zi7jwxe.woff?t=1616398733875') format('woff'),
    url('https://at.alicdn.com/t/font_2433237_3ix0zi7jwxe.ttf?t=1616398733875') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('https://at.alicdn.com/t/font_2433237_3ix0zi7jwxe.svg?t=1616398733875#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.khfw_title {
    text-align: center;
}
.khfw_title>h3 {
    font-size: 27px;
    font-weight: bold;
    display: inline-block;
}
.khfw_info1 {
    font-size: 18px;
    color: rgb(206, 206, 206);
}
.khfw_info2 {
    font-size: 16px;
    color: #cac4c4;
}
.khfw_list {
    width: 100%;
    padding: 0px 50px;
    padding-top: 35px;
    box-sizing: border-box;
}
.khfw_list_ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.khfw_list_li {
    display: flex;
    width: 33.333%;
    margin-bottom: 40px;
    cursor: pointer;
}
.khfw_list_li:hover .khfw_list_icon{
    color: #00a4f7;
    transition: all 0.2s;
}
.khfw_list_li:hover .khfw_list_tit{
    color: #00a4f7;
    transition: all 0.2s;
}
.khfw_list_li:hover .khfw_list_info{
    color: #00a4f7;
    transition: all 0.2s;
}
.khfw_list_icon {
    font-size: 36px;
    margin-right: 10px;
}
.khfw_list_titBox {
    display: flex;
    flex-direction: column;
}
.khfw_list_tit {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}
.khfw_list_info {
    color: rgb(221, 221, 221);
    font-size: 16px;
}

/* 全景+行业 */
.khfw_ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.qjhy1 {
    width: 49.5%;
    height: 333px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    cursor: pointer;
}
.qjhy2 {
    width: 24.5%;
}
.qjhy3 {
    width: 41%;
}
.qjhy4 {
    width: 8%;
}
.qjhyImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s linear;
}
.zhebox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    z-index: 55;
    transition: opacity 0.3s linear;
}
.mask_info {
    width: 200px;
    height: 50px;
    line-height: 50px;
    margin: 140px auto 0;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    transition: opacity 0.3s ease,
    transform 0.3s linear;
    transform: translateY(-20px);
    opacity: 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    text-shadow: 3px 3px 4px #333;
}
.mask_info2 {
    border-top: none;
    border-bottom: none;
    font-size: 16px;
    width: 20px;  
    margin: 0 auto;  
    line-height: 30px;
    margin-top: 110px; 
}
.qjhy1:hover .zhebox {
    transition: 0.3s ease,
}
.qjhy1:hover .mask_info {
    opacity: 1;
    transition: all 0.3s,
}
.qjhy1:hover .mask {
    opacity: 0.2;
    transition: all 0.3s,
}
/* 服务客户 */
.gssl_kh {
    position: relative;
}
.gssl_mask {
    position: absolute;
    padding: 9px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: all 0.3s;
}
.gssl_mask>img{
    width: 100%;
    height: 100%;
}
.gssl_kh:hover .gssl_mask {
    height: 100%;
    transition: all 0.3s;
}
/* 精选案列 */
.grid {
	display: flex;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}
.grid figure h2::after {
    content:none
}
.grid figure h2 span::after {
    content:none
}
.grid figure h2 span::before {
    content:none
}

.grid figure h2,
.grid figure p {
	margin: 0;
    background-image: none;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
figure.effect-ming {
	background: #030c17;
    cursor: pointer;
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h2 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}


.xmjs_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.xmjs_item {
    width: 24%;
    height: 640px;
    background: #101a2d;
    padding: 1%;
    box-sizing: border-box;
    cursor: pointer;
}
.xmjs_box .box-border {
    border: 1px solid #999;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.border-corner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.vedio-item {
    height: 290px;
    top: 80px;
    left: 5%;
    width: 90%;
    padding: 3px;
    overflow: hidden;
}
.vedio-item>img {
    width: 100%;
    height: 100%;
}
.xmjx_info {
    font-size: 16px;
    margin-top: 20px;
    text-indent: 20px;
}
.xmjs_look {
    width: 90%;
    left: 5%;
    height: 45px;
    top: 140px;
    text-align: center;
    line-height: 45px;
    background: #00a3f5;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    letter-spacing: 6px;
}
.xmjs_look:hover {
    background: #101a2d;
    color: #337ab7;
}
    /* 动画开始 */
      @keyframes breath {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }

      @-webkit-keyframes breath {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }

      .corner,
      .corner1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        z-index: 99;
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: breath; /* 动画名称 */
        animation-duration: 2s; /* 动画时长3秒 */
        animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite; /* 播放次数：无限 */

        /* Safari and Chrome */
        -webkit-animation-name: breath; /* 动画名称 */
        -webkit-animation-duration: 2s; /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
      }
      .corner::before {
        width: 9px;
        height: 9px;
        z-index: 999;
        top: 0px;
        right: 0px;
        content: " ";
        position: absolute;
        border-top: 2px solid #00a4f7;
        border-right: 2px solid #00a4f7;
        animation: flash 3s ease infinite;
        box-sizing: border-box;
      }
      .corner1::before {
        width: 9px;
        height: 9px;
        z-index: 999;
        top: 0px;
        left: 0px;
        content: " ";
        position: absolute;
        border-top: 2px solid #00a4f7;
        border-left: 2px solid #00a4f7;
        animation: flash 3s ease infinite;
        box-sizing: border-box;
      }
      .corner::after {
        width: 9px;
        height: 9px;
        z-index: 999;
        bottom: 0px;
        left: 0px;
        content: " ";
        position: absolute;
        border-bottom: 2px solid #00a4f7;
        border-left: 2px solid #00a4f7;
        animation: flash 3s ease infinite;
        box-sizing: border-box;
      }
      .corner1::after {
        width: 9px;
        height: 9px;
        z-index: 999;
        bottom: 0px;
        right: 0px;
        content: " ";
        position: absolute;
        border-bottom: 2px solid #00a4f7;
        border-right: 2px solid #00a4f7;
        animation: flash 3s ease infinite;
        box-sizing: border-box;
      }
      .vedio-box1 {
        position: absolute;
        top: calc(50% - 60px);
        left: calc(50% - 60px);
        /* opacity: 0; */
        transition: opacity 0.9s;
      }
      .btn-vedio-play {
        position: relative;
        width: 120px;
        height: 120px;
        animation: rotatein 1s ease-out backwards;
        z-index: 99;
      }
      .btn-vedio-play::before {
        content: " ";
        position: absolute;
        top: 35px;
        left: 35px;
        width: 50px;
        height: 50px;
        border: 2px solid #fff;
        border-radius: 50%;
        opacity: 0.9;
        box-sizing: border-box;
      }

      .circle1 {
        position: absolute;
        top: 35px;
        left: 35px;
        width: 50px;
        height: 50px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
      .circle1::before {
        content: " ";
        position: absolute;
        top: -7px;
        left: -7px;
        width: 60px;
        height: 60px;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 0.3;
        animation: circle-flash 3s ease infinite;
        box-sizing: border-box;
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: cir1Befor; /* 动画名称 */
        animation-duration: 1s; /* 动画时长3秒 */
        animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite; /* 播放次数：无限 */

        /* Safari and Chrome */
        -webkit-animation-name: cir1Befor; /* 动画名称 */
        -webkit-animation-duration: 1s; /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
      }
      @keyframes cir1Befor {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }
      @-webkit-keyframes cir1Befor {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }

      .circle1::after {
        top: -12px;
        left: -12px;
        width: 70px;
        height: 70px;
        content: " ";
        position: absolute;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 0.3;
        animation: circle-flash 3s ease infinite;
        box-sizing: border-box;
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: cir1After; /* 动画名称 */
        animation-duration: 2s; /* 动画时长3秒 */
        animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite; /* 播放次数：无限 */

        /* Safari and Chrome */
        -webkit-animation-name: cir1After; /* 动画名称 */
        -webkit-animation-duration: 2s; /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
      }
      @keyframes cir1After {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }
      @-webkit-keyframes cir1After {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }

      .circle2 {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 80px;
        height: 80px;
        border: 2px solid #fff;
        border-radius: 50%;
        opacity: 0.5;
        animation: circle-flash 3s ease infinite;
      }
      .circle2::before {
        content: " ";
        position: absolute;
        top: -7px;
        left: -7px;
        width: 90px;
        height: 90px;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 0.3;
        box-sizing: border-box;
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: cir2Befor; /* 动画名称 */
        animation-duration: 3s; /* 动画时长3秒 */
        animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite; /* 播放次数：无限 */

        /* Safari and Chrome */
        -webkit-animation-name: cir2Befor; /* 动画名称 */
        -webkit-animation-duration: 3s; /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
      }
      @keyframes cir2Befor {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }
      @-webkit-keyframes cir2Befor {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }

      .circle2::after {
        top: -12px;
        left: -12px;
        width: 100px;
        height: 100px;
        content: " ";
        position: absolute;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 0.3;
        box-sizing: border-box;
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: cir2After; /* 动画名称 */
        animation-duration: 4s; /* 动画时长3秒 */
        animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite; /* 播放次数：无限 */

        /* Safari and Chrome */
        -webkit-animation-name: cir2After; /* 动画名称 */
        -webkit-animation-duration: 4s; /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
      }
      @keyframes cir2After {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }
      @-webkit-keyframes cir2After {
        from {
          opacity: 0.1;
        } /* 动画开始时的不透明度 */
        50% {
          opacity: 1;
        } /* 动画50% 时的不透明度 */
        to {
          opacity: 0.1;
        } /* 动画结束时的不透明度 */
      }

      .triborder {
        display: block;
        position: relative;
        top: 48px;
        left: 50px;
        width: 10px;
        height: 24px;
        border-radius: 5px;
        background-image: linear-gradient(-180deg, #0097e5 0%, #0000ff 100%);
        background: #0097e5;
      }
      .triborder::before {
        transform-origin: 50% calc(100% - 5px);
        transform: rotate(60deg);
        background-image: linear-gradient(90deg, #0097e5 0%, #0000ff 100%);
        background: #0097e5;
        z-index: 2;
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 10px;
        height: 24px;
        border-radius: 5px;
        box-sizing: border-box;
      }
      .triborder::after {
        transform: rotate(-60deg);
        content: " ";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        transform-origin: 50% 5px;
        display: block;
        width: 10px;
        height: 24px;
        border-radius: 5px;
        background-image: linear-gradient(-180deg, #0097e5 0%, #0000ff 100%);
        background: #0097e5;
        box-sizing: border-box;
      }

    /* 动画结束 */