@charset "utf-8";
@font-face{ font-family:Impact; src:url(../font/impact.ttf);}
@font-face{ font-family:MLSBQ; src:url(../font/MLSBQ.TTF);}
@media (max-width:1920px){html{font-size:16px;}}
@media (min-width:1400px) and (max-width:1600px){html{font-size:15px;}}
@media (min-width:640px) and (max-width:1399px){html{font-size:14px;}}
@media (min-width:471px) and (max-width:639px){html{font-size:13px;}}
@media (min-width:329px) and (max-width:470px){html{font-size:12px;}}
@media (max-width:328px){html{font-size:12px;}}

/*==========================================公共 开始=============================================*/
.ar_wap{ display:none}
.a_body{ position:relative; z-index:0;}
.section{ overflow:hidden;}

header{height: 100px;position: absolute;z-index: 100;width: 100%;}
header:before{ content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:rgba(255,255,255,0.3); transition:3s}
header.on:before{ width:100%}
header .box{padding: 0 0 0 3%;}
header .logo{height: 100px;line-height: 100px;}

#nav{ height:70px; background:#0058af; position:relative; z-index:1}
.navBox { float: left;}
.nav li {float: left;text-align: center;height: 100px;position: relative;padding: 0 30px;}
.nav a {display: block;position: relative;padding: 0;font-size: 16px;height: 100px;line-height: 100px;perspective: 300px;transform-style: preserve-3d;}
.nav a .bg {background-color: #3ca0d3;position: absolute;left: 0px;bottom: 0px;width: 100%;display: block;height: 3px;-webkit-transition: 0.6s;-moz-transition: 0.6s;-o-transition: 0.6s;transition: 0.6s;-webkit-transform: rotateX(70deg);transform: rotateX(70deg);z-index: -1;transform-origin: center bottom 0;-webkit-transform-origin: center bottom 0;left: 0;opacity: 0;bottom: 0;visibility: hidden;}
.nav a .txt {position: relative;z-index: 2;font-size: 16px;color: #fff;}
.nav .active a .bg,.nav .on a .bg { transform: none; opacity: 1; visibility: visible; }
.nav .active a .txt,.nav .on a .txt{ color:#fff}
.navBox .arrow { position: absolute; left: 0px; top: 95px; height: 4px; display: block; background-color: #e62129; }
.subNavbox a:active .txt, .subNavbox a:hover {color: #3ca0d3;}
.subNavbox { position: absolute; left: 0px; top: 115px; width: 100%; background-color: #fcfcfc; box-shadow: 1px 2px 2px 0 rgba(88, 88, 88, 0.2); display: none; text-align: center; padding: 20px 0px; }
.subNavbox p {padding-bottom: 12px;line-height: 24px;}
.subNavbox p a {line-height: 28px;height: auto;padding: 0;font-size: 15px;display:  inline-block;}
.subNavbox p a:before{content:"";position:absolute;bottom: -3px;height: 3px;background: #3ca0d3;right:0;width:0;-webkit-transition: 0.6s;-moz-transition: 0.6s;-o-transition: 0.6s;transition: 0.6s;}
.subNavbox p a:hover:before{ left:0; width:100%}

header .right .tel{float:left;width: 225px;height: 100px;padding: 25px 0px;padding-left: 45px;margin-left: auto;position:relative;background: #3ca0d3;}
/*header .right .tel:before{ content:""; width:1px; height:15px; background:#c0c0c1; position:absolute; left:-30px; top:50%; margin-top:-7.5px;}*/
header .right .tel h5{font-size: 14px;color:#fff;margin-bottom: 3px;line-height:normal;}
header .right .tel h5 img{ margin-right:5px}
header .right .tel h3{font-size:22px;color:#fff;line-height:normal;font-family: DINOT;}

#section00{position:relative;z-index: 0; cursor:pointer}

header dl{display:inline-block;font-size:0;float: left;}
header dl dd{ display:inline-block; width:102px; height:100px; vertical-align:top}
header dl dd a{display:inline-block;width:102px;height:100px;position:relative;text-align:center;cursor: pointer;}
header dl dd a:before{ content:""; position:absolute; topp:0; left:0; width:1px; height:0; background:rgba(255,255,255,0.3); transition:1.2s; transition-delay:3s}
header.on dl dd a:before{ height:100%}

header dl dd a h3{height:48px;line-height:48px;margin-top: 10px;}
header dl dd a h5{ font-size:12px; color:#fff}

/*==========================================公共 结束=============================================*/

 #top {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
#top .indexBanner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
}
 #top .indexBanner .webGL-slider {
  position: absolute;
}
 .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  /* top: 0; */
  left: 0;
  z-index: 3;
}
.dis_bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}
.dis_bg img{
  width: 100%;
  display: block;
}

 #water {
  position: absolute;
  width: 23vw;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  z-index: 4;
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  -ms-transform: none;
  opacity: 0.8;
}
 #top .indexBanner .webGL-slider .txt-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
}
.indexBanner .webGL-slider .txt-item > li {
  position: absolute;
  top: 50%;
  left: 10vw;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
 .indexBanner .webGL-slider .txt-item > li > a {
  position: absolute;
  display: inline-block;
  top: 30vh;
  left: 0;
}
 .indexBanner .webGL-slider .txt-item > li > a > i {
  font-size: 32px;
  opacity: 0;
  vertical-align: middle;
  display: inline-block;
  animation: fadeInLeftSmall 1.5s ease forwards;
  animation-delay: 1s;
}
 .indexBanner .scr {
  position: absolute;
  z-index: 10;
  bottom: 4vh;
  right: 5vw;
  padding-top: 90px;
  cursor: pointer;
}
 .indexBanner .scr > span {
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  width: 84px;
  height: 84px;
  line-height: 84px;
  display: block;
  letter-spacing: 7px;
  transform: translateX(-50%) rotate(90deg);
  -webkit-transform: translateX(-50%) rotate(90deg);
  -moz-transform: translateX(-50%) rotate(90deg);
  -o-transform: translateX(-50%) rotate(90deg);
  -ms-transform: translateX(-50%) rotate(90deg);
}
 .indexBanner .scr #mouse {
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
}
 .indexBanner .scr #mouse #mouse-move {
  animation: Tmouse 0.8s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}
@keyframes Tmouse {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }
}



/*==========================================首页 开始=============================================*/

@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	0%{
		transform: scale(1);  /*开始为原始大小*/
	}
	25%{
		transform: scale(1.1); /*放大1.1倍*/
	}
	50%{
		transform: scale(1);
	}
	75%{
		transform: scale(1.1);
	}
}

.banner{ height:100vh}
.banner .banmiso{ height:100vh}
.banner_box{
	-webkit-animation-name: scaleDraw; /*关键帧名称*/
	-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
	-webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
	-webkit-animation-duration: 20s; /*动画所花费的时间*/
	cursor:pointer
}
.banner .banmiso h3{ font-size:42px; color:#fff; margin-bottom:24px}
.banner .banmiso h3{ opacity: 0; -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); -webkit-transition: 0.8s ease-out; -moz-transition: 0.8s ease-out; -ms-transition: 0.8s ease-out; transition: 0.8s ease-out; }
.banner .banmiso.miso-current h3{ opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); transition-delay:1s}

.banner .banmiso p{ font-size:26px; color:#fff}
.banner .banmiso p{ opacity: 0; -webkit-transform: translate(0, 50px); -moz-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); -webkit-transition: 0.6s ease-out; -moz-transition: 0.6s ease-out; -ms-transition: 0.6s ease-out; transition: 0.6s ease-out;}
.banner .banmiso.miso-current p{ opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); transition-delay:2s}
.banner .miso-prev,.banner .miso-next{ width:60px; height:120px;}
.banner .miso-prev{ background:url(../images/l.png) center no-repeat; left:6.25rem}
.banner .miso-next{ background:url(../images/r.png) center no-repeat; right:6.25rem}

.banner-next {z-index: 99;position: absolute;bottom: 80px;left: 50%;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-o-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);cursor: pointer;text-align: center;color: #ffffff;}
.banner-next span {display: inline-block;margin: 0 auto;}
.banner-next .next-text {-webkit-animation: fadeInDown 2s infinite;-moz-animation: fadeInDown 2s infinite;-o-animation: fadeInDown 2s infinite;-ms-animation: fadeInDown 2s infinite;animation: fadeInDown 2s infinite;position: relative;top: 15px;}
.banner-next .next-icon {position:relative;width: 25px;height: 40px;background:url(../images/next-icon.png) center no-repeat;}

.banner-next .next-icon:before{content:"";width:2px;height: 10px;position:absolute;left:50%;margin-left: -1px;top:50%;margin-top:-7.5px;background:url(../images/icon.png) center no-repeat;-webkit-animation: scroll 1.4s cubic-bezier(.15,.41,.69,.94) infinite;-moz-animation: scroll 1.4s cubic-bezier(.15,.41,.69,.94) infinite;animation: scroll 1.4s cubic-bezier(.15,.41,.69,.94) infinite;}
@keyframes scroll {
  0% { opacity: 0; }
  10% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -o-transform: translateY(0); transform: translateY(5px); opacity: 0;}
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

.container01{background: #e7ebee url(../images/container01_bg.jpg) center top no-repeat;padding: 122px 0 120px;}
.container01 .title{ margin-bottom:74px;}
.container01 .title .fl h3{ font-size:30px; color:#3f3f3f; font-weight:bold; margin-bottom:12px}
.container01 .title .fl h5{ font-size:14px; color:#9e9fa3; }
.container01 .title .fr{ padding:5px 0 0}
.container01 .title .fr a{display:inline-block;width:145px;height:50px;line-height:50px;font-size:16px;color:#282a2e;background:#fff;border-radius:25px;text-align:center;position:relative;overflow: hidden;}
.container01 .title .fr a:before{content:"";position:absolute;width:145px;height:145px;top:50%;margin-top:-72.5px;left:50%;margin-left:-72.5px;background:#3ca0d3;transform:scale(0);transition:0.6s;border-radius: 50%; opacity:0}
.container01 .title .fr a span{ position:relative}

.container01 ul{ font-size:0; margin:0 -10px}
.container01 ul li{display:inline-block;width:25%;padding:0 10px;margin-bottom:20px;overflow: hidden;}
.container01 ul li a{ display:block; position:relative; transition:0.6s; overflow:hidden}
.container01 ul li a .img{ overflow:hidden}
.container01 ul li a .img img{ width:100%}
.container01 ul li a h5{ font-size:16px; color:#262626; height:40px; line-height:40px; position:absolute; bottom:15px; left:0; width:100%; padding:0 15px; text-align:center}

.container01 .title .fr a:hover{ color:#fff}
.container01 .title .fr a:hover:before{transform:scale(1); opacity:1}
.container01 ul li a:hover{ box-shadow:0 0 30px rgba(0,0,0,0.15)}

.jq22 .border-left{width: 1px;height: 0px;background: #3ca0d3;position:absolute;left: 0;bottom: 0;}
.jq22 .border-bottom{width: 0px;height: 1px;background: #3ca0d3;position:absolute;left:0;bottom: 0px;}
.jq22 .border-top{width: 0px;height: 1px;background: #3ca0d3;position:absolute;right:0;top: 0px;}
.jq22 .border-right{width: 1px;height: 0px;background: #3ca0d3;position:absolute;right: 0;top: 0;}

.container02{ position:relative}
.container02 .left{width:300px;position:absolute; top:0; bottom:0; background:#3ca0d3}
.container02 .left .title{ margin-bottom:110px;}
.container02 .left .title h5{ font-size:14px; color:#fff; display:inline-block; width:14px; vertical-align:top}
.container02 .left .title h3{ font-size:36px; color:#fff; font-weight:bold; margin-left:5px; display:inline-block; width:36px; vertical-align:top}
.ban_po .wrap p{ font-size:18px; color:#85cff5; font-family:DINOT; font-weight:bold}
.ban_po .wrap p .current,.ban_po .wrap p font{ color:#fff}
.ban_po.ban_po01{ margin-top:190px; position:relative}
.ban_po.ban_po01:before{ content:""; position:absolute; top:-100px; width:1px; height:80px; background:#77bde0; left:50%;}
.ban_po.ban_po01 .wrap p{ font-size:160px; color:#9dc9e5; font-family:DINOT; font-weight:bold}
.ban_po.ban_po01 .wrap p .current,.ban_po.ban_po01 .wrap p font{ color:#9dc9e5;}

.container02 .right{width:calc(100% - 300px);position:relative; background:#f7f9fa}
.container02 .right .box{ position:relative}
.container02 .right .miso-bd .box .top{position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.5);}
.container02 .right .miso-bd .box .top h3{ height:102px;}
.container02 .right .miso-bd .box .top h2{ height:102px; font-size:48px; color:#fff}
.container02 .right .miso-bd .box .top p{ font-size:14px; line-height:24px; color:#ffffff; margin-bottom:108px;}
.container02 .right .miso-bd .box .top .table_cell{ padding:0 26%}
.container02 .right .miso-bd .box .top a{background-image: linear-gradient(62deg, #3ca0d3, #00e4ff);display:inline-block;width:230px;height:50px;line-height:50px;border-radius:25px;font-size:14px; color:#fff; transition:0.6s}
.container02 .right .miso-bd .box .top a:hover{ opacity:0.9}

.container02 .right .miso-bd{ margin-bottom:18px; background:#000}
.container02 .right .miso-hd{ margin:0 -9px; padding:0 18px}
.container02 .right .miso-hd li{ padding:0 9px;}
.container02 .right .miso-hd li .box{ cursor:pointer}
.container02 .right .miso-hd li .box .img{ overflow:hidden; transition:0.9s}
.container02 .right .miso-hd li .box .img img{ width:100%}
.container02 .right .miso-hd .box .top{position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.4);}
.container02 .right .miso-hd .box .top h2{ font-size:18px; color:#fff}

.container02 .right .miso-hd li.miso-current .box .top{ background:rgba(60,160,211,0.9)}
.container02 .right .miso-hd li .box:hover .img img{ transform:scale(1.06)}


.container03{ padding:108px 0 140px; position:relative}
.container03 .title{ margin-bottom:74px;}
.container03 .title .fl h3{ font-size:30px; color:#3ca0d3; font-weight:bold; margin-bottom:12px}
.container03 .title .fl h5{ font-size:14px; color:#9e9fa3; }
.container03 .title .fr{ padding:5px 0 0}
.container03 .title .fr a{display:inline-block;width:145px;height:50px;line-height:50px;font-size:16px;color:#282a2e;background:#eaeef1;border-radius:25px;text-align:center;position:relative;overflow: hidden;}
.container03 .title .fr a:before{content:"";position:absolute;width:145px;height:145px;top:50%;margin-top:-72.5px;left:50%;margin-left:-72.5px;background:#3ca0d3;transform:scale(0);transition:0.6s;border-radius: 50%; opacity:0}
.container03 .title .fr a span{ position:relative}

.container03 ul{ font-size:0; margin:0 -5px; position:relative; z-index:1}
.container03 ul li{display:inline-block;width:33.333333%;padding:0 5px;margin-bottom:10px;overflow: hidden;}
.container03 ul li a{ display:block; overflow:hidden; position:relative}
.container05 ul li a:after{ content:""; position:absolute; z-index:8; bottom:0; left:0; width:100%; height:0; background:url(../images/hei50.png) center; -moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out; }
.container03 ul li a .img{ position:relative}
.container03 ul li a .img:after{content:"";position:absolute;z-index:1;top: -100%;left:0;width:100%;height:100%;background:url(../images/hei50.png) center;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.container03 ul li a .img,.container03 ul li a .img img{width: 100%;overflow:hidden;}
.container03 ul li a .con{position:absolute;z-index:10;top: 100%;left:0;width:100%;height:100%;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;padding:0 15px;}
.container03 ul li a .con .table .table_cell{padding: 0 15%;}
.container03 ul li a .con h5{font-size:18px;color:#ffffff;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
.container03 ul li a .con p{margin: 24px 0 45px;font-size:14px;line-height:18px;height:36px;overflow:hidden;position:relative;color: rgba(255,255,255,0.6);}
.container03 ul li a .con font{display:inline-block;width:145px;height:50px;line-height:50px;font-size:14px;color:#fff;background:rgba(60,160,211,0.9);border-radius:25px;text-align:center;position:relative;overflow: hidden;}
.container03 ul li a .con font:before{content:"";position:absolute;width:145px;height:145px;top:50%;margin-top:-72.5px;left:50%;margin-left:-72.5px;background:#3ca0d3;transform:scale(0);transition:0.6s;border-radius: 50%; opacity:0}
.container03 ul li a .con font span{ position:relative}

.container03 ul li a:hover .img:after{top:0;height: 100%;}
.container03 ul li a:hover:after{ height:100%; top:0}
.container03 ul li a:hover .con{ top:0; transition-delay:0.36s}

.container03 .title .fr a:hover{ color:#fff}
.container03 .title .fr a:hover:before{transform:scale(1); opacity:1}
.container03 ul li a:hover{ box-shadow:0 0 30px rgba(0,0,0,0.15)}

.container03 ul li a .con font:hover{ color:#fff}
.container03 ul li a .con font:hover:before{transform:scale(1); opacity:1}


.container04{background:url(../images/container04_bg.jpg) center top no-repeat;height:800px;background-attachment:fixed;padding:50px 0 0;overflow: hidden;}
.container04 .w1200{ position:relative}
.container04 .w1200 .top{ width:1px; height:0; background:rgba(255,255,255,0.4); position:absolute; top:0; left:50%; transition:2s}
.container04 .w1200 .top:after{ content:""; position:absolute; bottom:0; width:6px; height:6px; background:#fff; border-radius:50%; left:50%; margin-left:-3px; transform:scale(0); transition:2s; transition-delay:2s}
.container04 .w1200 .bottom{ width:1px; height:0; background:rgba(255,255,255,0.4); position:absolute; bottom:0; left:50%; transition:2s}
.container04 .w1200 .bottom:after{ content:""; position:absolute; top:0; width:6px; height:6px; background:#fff; border-radius:50%; left:50%; margin-left:-3px; transform:scale(0); transition:2s; transition-delay:2s}
.container04 .w1200 .left{ width:0; height:1px; background:rgba(255,255,255,0.4); position:absolute; top:50%; left:0; transition:2s}
.container04 .w1200 .left:after{ content:""; position:absolute; right:0; width:6px; height:6px; background:#fff; border-radius:50%; top:50%; margin-top:-3px; transform:scale(0); transition:2s; transition-delay:2s}
.container04 .w1200 .right{ width:0; height:1px; background:rgba(255,255,255,0.4); position:absolute; top:50%; right:0; transition:2s}
.container04 .w1200 .right:after{ content:""; position:absolute; left:0; width:6px; height:6px; background:#fff; border-radius:50%; top:50%; margin-top:-3px; transform:scale(0); transition:2s; transition-delay:2s}
.container04 ul{ font-size:0}
.container04 ul li{display:inline-block;width:50%;cursor: pointer;}
.container04 ul li .box{padding: 0 60px;height:353px;}
.container04 ul li .box .con{text-align:center;height: 138px;}

.container04 ul li .box .con p{font-size:14px;line-height:24px;color:rgba(255,255,255,0.6);display: inline-block;width: 315px;height: 0;overflow: hidden;transition:0.6s;}
.container04 ul li .box .con h2{ height:78px; transition:0.6s; overflow:hidden; opacity:1}
.container04 ul li .box .con h4{font-size:24px; font-weight:bold; color:#fff; position:relative; margin-bottom:8px; transition:0.6s}
.container04 ul li .box .con h6{font-size:12px; margin-bottom: 16px; color:rgba(255,255,255,0.4); position:relative; text-transform:uppercase; overflow:hidden; transition:0.6s}
.container04 ul li .box .shuzi{ font-size:24px; color:#fff; font-weight:bold}

.container04 ul li:hover .box .con h4{font-size:24px; font-weight:bold; background-image:-webkit-linear-gradient(bottom,#3ca0d3,#00e4ff);-webkit-background-clip: text;color: transparent; position:relative; margin-bottom:30px}
.container04 ul li:hover .box .con h6{ height:0;}
.container04 ul li:hover .box .con p{ height:72px;}
.container04 ul li:hover .box .con h2{ height:0; opacity:0}

.container04 .content{ position:relative;}
.container04 .center{display:inline-block;width: 394px;height: 394px;border-radius:50%;line-height: 394px;position:absolute;top: 50%;left:50%;margin-left: -197px;text-align: center;margin-top: -197px; transform:scale(0.5); opacity:0; transition:2s}
.container04 .center .box{position:relative;display:inline-block;width: 394px;height: 394px;line-height: 394px;vertical-align: middle;}
.container04 .center .box:before{content:"";position:absolute;left:0;top:0;width: 394px;height: 394px;}
.container04 .center .box01{display:inline-block;width: 394px;height: 394px;line-height: 394px;border-radius:50%;vertical-align: middle;}
.container04 .center .box01 span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: rgba(60,160,211);
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: circleScale1 3s linear infinite;
  -moz-animation: circleScale1 3s linear infinite;
  -ms-animation: circleScale1 3s linear infinite;
  animation: circleScale1 3s linear infinite;
}
.container04 .center .box01 span:nth-of-type(2) {
  animation-delay: 1s;
}
.container04 .center .box01 span:nth-of-type(3) {
  animation-delay: 2s;
}
@keyframes circleScale1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.container04 .center .box02{position:relative;display:inline-block;width: 315px;height: 315px;line-height: normal;vertical-align: middle;background: #3ca0d3;border-radius: 50%;}
.container04 .center .box02:before{ content:""; position:absolute; left:0; top:0; width:434px;height:434px;}
.container04 .center .box02 h3{ font-size:36px; color:#fff; font-weight:bold}
.container04 .center .box02 h6{font-size:14px;color:#fff;margin-bottom: 25px;}

.container04.action .w1200 .top{ height:152px;}
.container04.action .w1200 .top:after{ transform:scale(1)}
.container04.action .w1200 .bottom{height:152px;}
.container04.action .w1200 .bottom:after{ transform:scale(1)}
.container04.action .w1200 .left{ width:402px; }
.container04.action .w1200 .left:after{ transform:scale(1)}
.container04.action .w1200 .right{ width:402px;}
.container04.action .w1200 .right:after{transform:scale(1)}

.container04 ul li:nth-child(3) .box .shuzi,.container04 ul li:nth-child(4) .box .shuzi{ padding:120px 0 0}

.container04 .center .box02 a{display:inline-block;width: 170px;height: 45px;line-height: 45px;font-size: 14px;color: #3ca0d3;background:#eaeef1;border-radius: 4px;text-align:center;position:relative;overflow: hidden;}
.container04 .center .box02 a:before{content:"";position:absolute;width: 170px;height: 170px;top:50%;margin-top: -86px;left:50%;margin-left: -85px;background: #e6e6e6;transform:scale(0);transition:0.6s;border-radius: 50%;opacity:0;}
.container04 .center .box02 a font{ position:relative}
.container04 .center .box02 a img{ margin:-3px 4px 0 0; position:relative}

.container04 .center .box02 a:hover:before{transform:scale(1); opacity:1}

.container04.action .center{ transform:scale(1); opacity:1}

.container05{ background:#eaeef1; padding:130px 0 0}
.container05 .left{width:560px;padding: 32px 0 0;}
.container05 .left .title h2{font-size:48px;color:#393c3d;font-family:MLSBQ;text-transform: uppercase;}
.container05 .left .title h4{font-size:24px;color:#393c3d;margin: 5px 0 48px;}
.container05 .left>h3{font-size:22px;color:#1b2433;margin-bottom: 26px;}
.container05 .left p{font-size:14px;line-height:26px;color:#65686b;height: 104px;margin-bottom: 81px;overflow: hidden;}
.container05 .left ul{ font-size:0}
.container05 .left ul li{ display:inline-block;}
.container05 .left ul li a{display:inline-block;width:130px;height:250px;background-image:linear-gradient(62deg, #3ca0d3, #00e4ff);text-align:center;padding:55px 0 0;position: relative;}
.container05 .left ul li:nth-child(2) a:before{ width:100%; left:0}
.container05 .left ul li a:before{ content:""; position:absolute; right:0; width:0; height:100%; top:0; background-image:linear-gradient(62deg, #282a2e ,#3d5e95); text-align:center; transition:0.6s}
.container05 .left ul li a h3{ height:46px; position:relative}
.container05 .left ul li a h5{ font-size:14px; color:#fff; position:relative}
.container05 .left ul li a h6{ margin-top:70px; position:relative}

.vwrap { display: none; z-index: 1040; width: 100%; position: fixed; }
.vwrap .videobtg { z-index: 900; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.8; filter: alpha(opacity=80); overflow: hidden; }
.vwrap .videobox {z-index: 1200;width: 700px;height: 446px;background-color: #fff;position: fixed;left: 50%;top: 50%;margin-top: -223px;margin-left: -350px;}
.vwrap .videobox #videobox { width: 100%; display: inline-block; height: 100%; background:#000; }
#videobox_wrapper { height: 100%!important; }
.vwrap .close { z-index: 999; width: 31px; height: 31px; cursor: pointer; position: absolute; top: 0px; right: -42px; }
.vwrap .close i { display: block; width: 31px; height: 31px; background: url(../images/close_i1.png) no-repeat 50% 50%; -webkit-transition: 400ms; transition: 400ms; }
.vwrap .close:hover i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
#videobox_display_button,#videocontainer_display_button { background: none no-repeat!important; }
.jwplayer .jwicon { opacity: 0.8; filter: alpha(opacity=80); cursor: pointer;  }
.jwplayer .jwicon:hover { opacity: 1; filter: alpha(opacity=100); }
.jwlogo, .jwclick { display: none!important; }
.jwdisplayIcon{ background:  none no-repeat!important;}

.container05 .right .img{position:relative;width:510px;height: 382px;overflow: hidden;background:#000;margin: 124px 0;}
.container05 .right .img a>img{opacity:0.7;height: 382px;width: 510px;object-fit: cover;}
.container05 .right .img .top{ position:absolute; top:0; left:0; width:100%; height:100%}
.container05 .right:hover .img a>img{ transform:scale(1.06)}

.container05 .left ul li:hover a:before{ width:100%; left:0}

.container06{ padding:130px 0 115px}
.container06 .title h3{ font-size:30px; color:#3ca0d3; font-weight:bold; margin-bottom:12px}
.container06 .title h5{ font-size:14px; color:#9e9fa3; }

.container06 .miso_hd{float: right; margin-bottom:65px; margin-top:-42px}
.container06 .miso_hd .miso-slide{margin-left:8px;outline: none;width: 130px !important; cursor:pointer}
.container06 .miso_hd h5{font-size: 14px;color: #1b2433;height: 40px;line-height: 38px;border: #b2b5b9 1px solid;border-radius: 20px;outline: none;text-align: center;}
.container06 .miso_hd .miso-slide.miso-current{ /* Safari 5.1 - 6.0 */ /* Opera 11.1 - 12.0 */ /* Firefox 3.6 - 15 */ /* 标准的语法 */}
.container06 .miso_hd .miso-slide.miso-current h5{color: #3ca0d3;border: #3ca0d3 1px solid;}
.container06 ul{margin: 0 -15px;overflow:hidden;}
.container06 ul li{float:left;width: 33.3333333%;padding: 0 15px;overflow: hidden;}
.container06 ul li a .img,.container06 ul li a .img img{ width:380px; height:210px; overflow:hidden}
.container06 ul li a .con{ padding:40px 0; border-bottom:#e7e7e7 1px solid; margin-bottom:25px; position:relative; transition:0.6s}
.container06 ul li a .con:after{content:"";position:absolute;bottom: -1px;left:0;width:70px;height:2px;background:#3ca0d3; transition:0.6s}
.container06 ul li a .con h5{font-size:18px;color:#000000;margin-bottom:20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.container06 ul li a .con p{ font-size:14px; line-height:20px; height:40px; overflow:hidden; color:#919191}
.container06 ul li a .bottom font{ font-size:14px; color:#a5a5a5; text-transform:uppercase}
.container06 ul li a .bottom span{ font-size:18px; color:#3ca0d3; float:right}

.container06 ul li a:hover .con h5{ color:#3ca0d3}
.container06 ul li a:hover .con:after{ height:3px; width:100%}
.container06 ul li a:hover .bottom font{ color:#3ca0d3}

.container07{position:relative;z-index:1;background:#f7f9fa;padding: 70px 0 65px;}
.container07 .title{ position:relative; margin-bottom:46px;}
.container07 .title h3{ font-size:30px; color:#393c3d; font-weight:bold; margin-bottom:12px}
.container07 .title h5{ font-size:14px; color:#9e9fa3; }
.container07 .title .fr{ padding:15px 0 0}
.container07 .title .fr a{ font-size:16px; color:#393c3d; transition:0.6s}
.container07 .title .fr a:hover{ color:#3ca0d3}

.container07 ul{ width:1226px; margin-left:-13px;}
.container07 ul li{ float:left; padding:0 13px 15px; -moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;}
.container07 ul li img{width:220px;height: 80px;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;}
.container07 ul li .img{width:220px;height: 80px;position:relative;cursor: pointer;}
.container07 ul li .img h5{position:absolute;top:0;left:0;width:100%;height:0;background: rgba(60, 160, 211,0.8);line-height: 80px;font-size:14px;color:#fff;padding:0 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;text-align:center;}
.container07 ul li:hover .img h5{ height:100%}
.container07 .miso-prev,.container07 .miso-next{ width:27px; height:27px; margin-top:-14px;}
.container07 .miso-prev{ background:url(../images/container07_prev.png) center no-repeat; left:-50px;}
.container07 .miso-next{ background:url(../images/container07_next.png) center no-repeat; right:-50px}

.container07 ul li:hover img{ box-shadow:rgba(0,0,0,0.15) 0 10px 10px;}


/*==========================================首页 结束=============================================*/


/*==========================================内页 开始=============================================*/

.footer{background:#1e1b2e;padding:54px 0;border-bottom: #353243 1px solid;}
.footer .left {width: 255px;height:210px;border-right:#403f4e 1px solid;padding: 15px 0 0;}
.footer .left .title{ margin-bottom:52px;}
.footer .left ul{ font-size:0}
.footer .left ul li{ display:inline-block; margin-right:10px}
.footer .left ul li a{ display:inline-block; width:40px; height:40px; line-height:38px; text-align:center; border:#4a4857 1px solid; border-radius:50%; cursor:pointer}
.footer .left ul li a img{ opacity:0.5; transition:0.6s}
.footer .left ul li a:hover img{ opacity:1;}

.footer .center{text-align:center;width:712px;font-size:0;padding: 20px 0 0;}
.footer .center dl{ display:inline-block; vertical-align:top; margin:0 16px; text-align:left}
.footer .center dl dt{font-size:18px;margin-bottom: 24px;}
.footer .center dl dt a{color: #fff; transition:0.36s}
.footer .center dl dt a:hover{color: #3ca0d3;}
.footer .center dl dd{font-size: 14px;color: #868787;line-height: 30px; position:relative}
.footer .center dl dd:before{content:"";position:absolute;left:-15px;width:3px;height:0;background:#3ca0d3;transition: 0.6s;top: 50%;margin-top: -6px;}
.footer .center dl dd a{color: #868787;}
.footer .center dl dd a:hover{color: #3ca0d3;}

.footer .center dl dd:hover:before{ height:13px}


.footer .right{width: 228px;height:210px;border-left:#403f4e 1px solid;padding: 20px 0 0 44px;}
.footer .right h5{ font-size:16px; color:#ffffff}
.footer .right h3{font-size:24px;color:#ffffff;font-weight:bold;margin: 20px 0 12px;font-family: DINOT;}
.footer .right p{font-size:14px;line-height:20px;color:#646a71;margin-bottom: 32px;}
.footer .right a{display:inline-block;width:100px;height:32px;line-height:32px;font-size:14px;color:#fff;background:#3ca0d3;border-radius:25px;text-align:center;position:relative;overflow: hidden;}
.footer .right a:before{content:"";position:absolute;width:100px;height:100px;top:50%;margin-top:-50px;left:50%;margin-left:-50px;background:#43afe6;transform:scale(0);transition:0.6s;border-radius: 50%; opacity:0}
.footer .right a span{ position:relative}

.footer .right a:hover{ color:#fff}
.footer .right a:hover:before{transform:scale(1); opacity:1}


footer .bot{background: #1e1b2e;padding: 25px 0;}
footer .bot .tt{float:left;color: #efefef;line-height:35px;height:35px;margin-right:3px;}
footer .bot .tt img{ margin-right:10px;}
.copyright{float:right;font-size:12px;color: #7d7d7f;line-height:35px;}
.copyright *{display: inline-block;font-size:12px;color: #78777f;}
.copyright a{color: #7d7d7f;}
.copyright a:hover{ color:#fff; }
footer .bot { font-size:13px; color:#837a74; }

.s_foot_link{float:left;width: 178px;height: 35px;cursor:pointer;position: relative;text-align:left;}
.s_foot_link .tanchu{width: 247px;padding:0 10px;min-height: 50px;overflow:auto;box-sizing:border-box;position:absolute;bottom: 44px;border-bottom:0;display: none;left:-1px;overflow: visible !important;}
.s_foot_link .tanchu:before{content:"";display:block;border:10px solid transparent;border-top:10px solid #ebf8fa;width:0px;height:0px;position:absolute;bottom: -19px;left:50%;margin-left:-10px;}
.s_foot_link .tanchu>div{background: #ebf8fa;border: 1px solid #e2e2e2;padding:10px 13px;overflow:auto;box-shadow: 0px 6px 12px 0px rgba(225, 59, 58,0.25);}
.s_foot_link .tanchu>div::-webkit-scrollbar {display:none}
.s_foot_link .tanchu a { color: #333; line-height: 27px; display:block; font-size: 12px;}
.s_foot_link .tanchu a:hover{ font-weight:bold;}
.s_foot_link #bnt_link1.a {padding-left:12px;color: #ababab;text-align:left;line-height: 35px;width: 200px;position:absolute;z-index:1;font-size: 14px;}
.s_foot_link #bnt_link1.a i{display:inline-block;font-style:normal;width: 175px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
.s_foot_link .a span{ display:inline-block; float:right; color:#919397; line-height:28px;}

.tc1 .tc{transition:all ease 300ms;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 9999;}

.tc1 .tc{pointer-events: none;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;transform:scale(1.1);display:  none;}
.tc1 .tc.act{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;  pointer-events: auto;transform:scale(1);}
.tc1 .close:hover{ transform:rotate(180deg);}
.tc1 .close,.tc{ transition:all ease 400ms; -moz-transition:all ease 400ms; -ms-transition:all ease 400ms; -o-transition:all ease 400ms; -webkit-transition:all ease 400ms; } 
.tc1 .tc-box{position:absolute; overflow: hidden;top:50%;z-index:9999;height: 15rem;width: 12rem;left:50%;margin-left: -6rem;margin-top: -7.5rem;}
.tc1 .tc.act{display: block; }
.tc1 .close{position: absolute; cursor:pointer;font-size: 20px;right: 30px;top: 30px; }
.tc1 .tc-bg {height: 100%;background: rgba(0,0,0,.9);position: absolute;top: 0;left: 0;width: 100%;z-index: 0;}
.tc1 .tc-box h3 img{ width:12rem; height:12rem;}
.tc1 .tc-box h5{ width:12rem; height:3rem; line-height:3rem; font-size:1rem; color:#fff; text-align:center}

/* COMMON DEMO STYLE */
.page-view {
  height: 100vh;
  width: 100vw;

  position: absolute;
  top: 0;
  left: 0;
}

.page-view .project {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.page-view .project .text h1 {
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  display: table;
  text-align: center;
}

.page-view .project .text p {
  font-size: 16px;
  position: absolute;
  bottom: 40px;
  right: 60px;
  margin: 0;
}

.page-view .project:nth-child(1) {
  z-index: 30;
}

@media screen and (max-width: 640px) {
  .page-view .project .text h1 {
    font-size: 36px;
  }
  .page-view .project .text p {
    bottom: 20px;
    margin: 0;
    text-align: center;
    width: 100%;
    right: auto;
    font-size: 14px;
  }
}

.page-view .arrows {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 0 5%;
}

.page-view .arrows .arrow {
  float: left;
  cursor: pointer;
}

.page-view .arrows .arrow.next {float: right;}

.page-view .arrows .arrow:hover.previous {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform: translate3d(-5px, 0, 0);
          transform: translate3d(-5px, 0, 0);
}

.page-view .arrows .arrow:hover.next {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transform: translate3d(5px, 0, 0);
          transform: translate3d(5px, 0, 0);
}

.page-view .arrows .arrow svg {
  height: 40px;
  width: 25px;
  padding: 2px;
}

.page-view .arrows .arrow svg polygon {
  fill: #fff;
}

.page-view .arrows .arrow {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
          transition: transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  margin-right: 10px;
  margin-top: -7px;
}

@media screen and (max-width: 640px) {
  .page-view .arrows {
    bottom: 60px;
    left: 50%;
    z-index: 120;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .page-view .arrows .arrow.previous:hover {
    -webkit-transform: none;
            transform: none;
  }
  .page-view .arrows .arrow.next:hover {
  }
}

@-webkit-keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
}

@keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
}


/* SPECIFIC DEMO STYLE */
/* DEMO 1 */

@font-face {
    font-family: 'besom';
    src: url('../fonts/besom.eot');
    src: url('../fonts/besom.eot') format('embedded-opentype'),
         url('../fonts/besom.woff2') format('woff2'),
         url('../fonts/besom.woff') format('woff'),
         url('../fonts/besom.ttf') format('truetype'),
         url('../fonts/besom.svg#besom_2regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.w_banner {
  background: url(../images/nature-sprite.png) no-repeat -9999px -9999px;
  position: relative;
  min-width: 1080px;
  height: 100vh;
}

.w_banner .page-view {
  background: url(../images/nature-sprite-2.png) no-repeat -9999px -9999px;
}

.w_banner .page-view h1 {
  font-family: 'besom';
}

.w_banner .page-view .project:nth-child(1) {
}

.w_banner .page-view .project:nth-child(2) {
}

.w_banner .page-view .project:nth-child(3) {
}

.w_banner .page-view .project:nth-child(4) {
}

.w_banner .page-view .project:nth-child(even).hide {
  -webkit-mask: url(../images/nature-sprite.png);
          mask: url(../images/nature-sprite.png);
  -webkit-mask-size: 2300% 100%;
          mask-size: 2300% 100%;
  -webkit-animation: mask-play 1.4s steps(22) forwards;
          animation: mask-play 1.4s steps(22) forwards;
}

.w_banner .page-view .project:nth-child(odd).hide {
  -webkit-mask: url(../images/nature-sprite-2.png);
          mask: url(../images/nature-sprite-2.png);
  -webkit-mask-size: 7100% 100%;
          mask-size: 7100% 100%;
  -webkit-animation: mask-play 1.4s steps(70) forwards;
          animation: mask-play 1.4s steps(70) forwards;
}

/* DEMO 2 */
@font-face {
    font-family: 'adam';
    src: url('../fonts/adam/adam.eot');
    src: url('../fonts/adam.eot') format('embedded-opentype'),
         url('../fonts/adam.woff2') format('woff2'),
         url('../fonts/adam.woff') format('woff'),
         url('../fonts/adam.ttf') format('truetype'),
         url('../fonts/adam.svg#adam.cg_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.demo-2 {
  background: url(../images/building-sprite.png) no-repeat -9999px -9999px;
}

.demo-2 .page-view {
  background: url(../images/building-sprite-2.png) no-repeat -9999px -9999px;
}

.demo-2 .page-view h1 {
  text-transform: uppercase;
  letter-spacing: 16px;
  font-family: 'adam';
}

@media screen and (max-width: 640px) {
  .demo-2 .page-view h1 {
    letter-spacing: 4px;
  }
}

.demo-2 .page-view .project:nth-child(1) {
  background-image: url(../images/building-1.jpg);
}

.demo-2 .page-view .project:nth-child(2) {
  background-image: url(../images/building-2.jpg);
}

.demo-2 .page-view .project:nth-child(3) {
  background-image: url(../images/building-3.jpg);
}

.demo-2 .page-view .project:nth-child(4) {
  background-image: url(../images/building-4.jpg);
}

.demo-2 .page-view .project:nth-child(odd).hide {
  -webkit-mask: url(../images/building-sprite.png);
          mask: url(../images/building-sprite.png);
  -webkit-mask-size: 7500% 100%;
          mask-size: 7500% 100%;
  -webkit-animation: mask-play 1.4s steps(74) forwards;
          animation: mask-play 1.4s steps(74) forwards;
}

.demo-2 .page-view .project:nth-child(even).hide {
  -webkit-mask: url(../images/building-sprite-2.png);
          mask: url(../images/building-sprite-2.png);
  -webkit-mask-size: 8400% 100%;
          mask-size: 8400% 100%;
  -webkit-animation: mask-play 1.4s steps(83) forwards;
          animation: mask-play 1.4s steps(83) forwards;
}


/* DEMO 3 */
.demo-3 {
  background: url(../images/urban-sprite.png) no-repeat -9999px -9999px;
}

.demo-3 .page-view {
  background: url(../images/urban-sprite-2.png) no-repeat -9999px -9999px;
}

.demo-3 .page-view h1 {
  font-size: 180px !important;
  letter-spacing: 4px;
  text-shadow: 14px 0px rgba(1, 0, 0, 0.5);
}

.demo-3 .page-view .project:nth-child(1) {
  
}

.demo-3 .page-view .project:nth-child(2) {
  
}

.demo-3 .page-view .project:nth-child(3) {
}

.demo-3 .page-view .project:nth-child(4) {
}

.demo-3 .page-view .project:nth-child(odd).hide {
  -webkit-mask: url(../images/urban-sprite.png);
          mask: url(../images/urban-sprite.png);
  -webkit-mask-size: 3000% 100%;
          mask-size: 3000% 100%;
  -webkit-animation: mask-play 1.4s steps(29) forwards;
          animation: mask-play 1.4s steps(29) forwards;
}

.demo-3 .page-view .project:nth-child(even).hide {
  -webkit-mask: url(../images/urban-sprite-2.png);
          mask: url(../images/urban-sprite-2.png);
  -webkit-mask-size: 7400% 100%;
          mask-size: 7400% 100%;
  -webkit-animation: mask-play 1.4s steps(73) forwards;
          animation: mask-play 1.4s steps(73) forwards;
}

/* Fallback */
.no-cssmask .page-view .project.hide {
  opacity: 0;
  -webkit-transition: opacity 1.4s ease;
          transition: opacity 1.4s ease;
  -webkit-mask: none !important;
          mask: none !important;
}


.n_banner,.n_banner .w1200{ height:455px;}
.n_banner .table{ }
.n_banner .mianbao{display:inline-block;padding: 0;margin-left:30px;}
.n_banner .mianbao h3 span{ vertical-align:top}
.n_banner .mianbao h3 font{color:#3db8f7;font-family:MLSBQ;font-weight: bold;font-size: 50px;margin-left: 10px;display: inline-block;vertical-align:top;margin-top: -3px;}
.n_banner .mianbao h3{font-size: 42px;color: #ffffff;margin-bottom: 20px;font-weight: bold;text-transform: uppercase;height: 42px;margin-top: 40px;}
.n_banner .mianbao h6{padding: 0;position:relative;}
.n_banner .mianbao h6:before{content:"";position:absolute;left:5px;top:7px;width:60px;height:1px;background:#9d9fa4;display: none;}
.n_banner .mianbao h6 a,.n_banner .mianbao h6 i,.n_banner .mianbao h6 span{font-size: 14px;color: #b9c4d4;margin:0 3px;font-style:normal;height:14px;line-height:14px;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;}
.n_banner .mianbao h6 a:hover{color: #3db8f7;}

.sanji{margin-top: -28px;text-align:center;margin-bottom: -28px;}
.sanji ul{font-size: 0;}
.sanji ul li{display:inline-block;font-size:16px;color:#4f4f52;position:relative;margin-right: -1px;}
.sanji ul li a{font-size:16px;color:#4f4f52;display:inline-block;padding-bottom:14px;position:relative;width:  200px;height: 55px;line-height: 53px;border:  #dcdcdc 1px solid;text-align: center;background: #fff;}
.sanji ul li a:hover{ color:#3db8f7;}
.sanji ul li a:before{content:"";position:absolute;bottom: -1px;right:0;width:0;height: 3px;background: #3db8f7;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.sanji ul li.on a:before,.sanji ul li:hover a:before{ left:0; width:100%}

.n_about .fl01{ padding:102px 0 50px;}
.n_about .fl02{ padding:85px 0 80px; background:#f7f9fa}
.n_about .fl02 h2{ font-size:34px; color:#393c3d; font-weight:bold; margin-bottom:60px; text-align:center}
.n_about .fl02 ul{ font-size:0; margin:0 -7px;}
.n_about .fl02 ul li{ display:inline-block; padding:0 7px; width:25%; vertical-align:top; overflow:hidden}
.n_about .fl02 ul li a{ display:block}
.n_about .fl02 ul li a .img,.n_about .fl02 ul li a .img img{ width:290px; height:250px; overflow:hidden; transition:0.6s}
.n_about .fl02 ul li a .con{ padding:0 15px}
.n_about .fl02 ul li a .con h3{ font-size:24px; color:#393c3d; margin:28px 0 20px}
.n_about .fl02 ul li a .con p{ font-size:14px; color:#6e7171; line-height:22px;}
.n_about .fl02 ul li a:hover .img img{ transform:scale(1.06)}

.n_about .fl03{ padding:100px 0 50px;}
.n_about .fl03 h2{ font-size:34px; color:#393c3d; font-weight:bold; margin-bottom:60px; text-align:center}
.n_about .fl03 ul.miso_hd{ margin:0 -6px; margin-bottom:35px}
.n_about .fl03 ul.miso_hd li{ padding:0 6px; overflow:hidden}
.n_about .fl03 ul.miso_hd li a{ display:block; width:230px; height:230px; background-image:linear-gradient(62deg, #3ca0d3, #00e4ff); border-radius:50%; margin-bottom:35px; position:relative; cursor:pointer}
.n_about .fl03 ul.miso_hd li a:before{ content:""; position:absolute; left:50%; margin-left:-10px; width:21px; height:0; bottom:-35px; background:url(../images/down.png) center no-repeat; overflow:hidden; transition:0.6s}
.n_about .fl03 ul.miso_hd li.miso-current a:before{ height:13px;}
.n_about .fl03 ul.miso_hd li:nth-child(2n) a{  background-image:linear-gradient(62deg, #282a2e ,#3d5e95)}
.n_about .fl03 ul.miso_hd li a h3{ height:57px}
.n_about .fl03 ul.miso_hd li a h5{font-size:24px;color:#fff;margin-bottom: 6px;}
.n_about .fl03 ul.miso_hd li a h6{ font-size:12px; color:rgba(255,255,255,0.6); text-transform:uppercase}
.n_about .fl03 ul.miso_bd li p{ font-size:14px; line-height:24px; color:#595b5c}

.n_news{ padding:102px 0 65px}
.n_news ul{ margin-bottom:34px}
.n_news ul li{ margin-bottom:52px; overflow:hidden}
.n_news ul li a{ display:block}

.page { margin:0px auto 0px auto;}
.page .box{display:inherit;width:100%;text-align: center;}
.page a{padding: 0 13px;height: 35px;line-height: 35px;display:inline-block;margin:0 2px;color: #666666;font-size: 14px;border-radius:2px;background: #eeeff4;transition: 0.36s;}
.page .on{background: #3ca0d3;color:#fff !important;}
.page a font{  font-size: 14px; font-family: "SimSun"; color: rgb( 68, 68, 68 );}
.page span{/* background:#4a41bd; *//* color:#fff !important; *//* border:1px solid #4a41bd; */}
.page a:hover{background: #3ca0d3;color:#fff !important;text-decoration:none;}
.page a:hover font{ color:#fff;}
.page a.u_bnt{ transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari 和 Chrome */-o-transition: all 1s; /* Opera */} 

.n_hezuo{ padding:102px 0 65px; background:#fff}
.n_hezuo ul{ font-size:0; margin:0 -12px; margin-bottom:50px}
.n_hezuo ul li{ display:inline-block; float:none; padding:0 12px; width:20%; margin-bottom:30px}






.n_hezuo ul li .img{ cursor:pointer}
.n_hezuo ul li .img:after{ content:""; position:absolute; left:0; top:0; right:0; bottom:0; border:#e5e5e5 1px solid}

.n_case{ padding:102px 0 65px}
.n_case ul{font-size:0;margin:0 -7.5px;margin-bottom: 35px;}
.n_case ul li{padding:0 7.5px;text-align:center;width:33.333333%;display:inline-block;margin-bottom: 20px;overflow:hidden;}
.n_case ul li a{display:block;text-align:center;}
.n_case ul li .img{ overflow:hidden;position:relative}
.n_case ul li .img>img{width:390px;height:230px;}

.n_case ul li .img .top{top:-100%;left:0;position:absolute;width:100%;height:100%;background: rgba(60,160,211,0.8);text-align:center;-moz-transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;-webkit-transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;-o-transition:all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;-ms-transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;padding: 0 44px;}
.n_case ul li .img .top h5{font-size: 18px;color:#fff;margin-bottom: 18px;line-height: 26px;}
.n_case ul li .img .top h3{ text-align:center}
.n_case ul li .img .top h3 span{font-size: 16px;color:#242525; display:inline-block; width:120px; height:40px; line-height:40px; background:#fff; border-radius:20px}

.n_case ul li .img .top img{ display:inline-block;}
.n_case ul li a>h5{height: 62px;line-height: 62px;font-size: 18px;color: #1b2433;text-align:center;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.n_case ul li:hover .img .top{ top:0;}
.n_case ul li:hover a>h5{ transform:scale(0);}
.n_case ul li:hover .img>img{ transform:scale(1.06);}

.n_product{ padding:102px 0 65px}
.n_product ul{ font-size:0; margin:0 -11px; margin-bottom:40px}
.n_product ul li{ display:inline-block; width:33.333333%; padding:0 11px; margin-bottom:35px;}
.n_product ul li a{ display:block; position:relative; transition:0.6s; overflow:hidden}
.n_product ul li a .img{ overflow:hidden}
.n_product ul li a .img img{width:385px;height: 385px;object-fit: cover;}
.n_product ul li a h5{ font-size:16px; color:#262626; height:40px; line-height:40px; position:absolute; bottom:15px; left:0; width:100%; padding:0 15px; text-align:center}

.n_product .title .fr a:hover{ color:#fff}
.n_product .title .fr a:hover:before{transform:scale(1); opacity:1}
.n_product ul li a:hover{ box-shadow:0 0 30px rgba(0,0,0,0.15)}

.n_zizhi{ padding:102px 0 65px}
.n_zizhi ul{font-size: 0;margin:0 -29px;margin-bottom: 40px;}
.n_zizhi ul li{background: #fff;box-sizing:  border-box;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;display:  inline-block;padding: 0 29px;text-align:  center;margin-bottom: 10px;width: 25%;vertical-align: top;}
.n_zizhi ul li .pic_box{width: 100%;height: 340px;display:table;overflow:hidden; position:relative}
.n_zizhi ul li .pic_box:after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:url(../images/kuang.png) center no-repeat;}
.n_zizhi ul li .pic_box .box{display:table-cell;vertical-align:middle;text-align: -webkit-center;}
.n_zizhi ul li img{max-width: 256px;max-height: 338px;display:block;}
.n_zizhi ul li h5{font-size: 16px;color: #5a5c60;line-height: 80px;text-align:center;margin: 0;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
.n_zizhi ul li:hover h5{ color:#e84518}

.n_video{ padding:102px 0 65px}
.n_video ul{ font-size:0; margin:0 -15px; margin-bottom:30px}
.n_video ul li{ display:inline-block; width:33.333333%; padding:0 15px; margin-bottom:60px}
.n_video ul li .img{width: 380px;height: 230px;overflow:hidden;position:relative;background:#000;}
.n_video ul li .img>img{width: 380px;opacity: 0.4;height: 230px;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.n_video ul li .img .top01{ width:100%; height:100%; position:absolute; left:0; top:0;}
.n_video ul li .img .top01 img{ transition:0.6s}
.n_video ul li h5{border-bottom:#e7e7e7 1px solid;font-size: 16px;color: #000000;width:100%;position:relative;padding: 25px 0 20px;}
.n_video ul li h5 span{overflow:hidden;display:block;width:100%;height: 52px;line-height: 26px;}
.n_video ul li h5:after{content:"";position:absolute;left:0;bottom:-1px;width: 70px;height:2px;background:#a5a5a6;transition:0.6s;}

.n_video ul li a:hover .img>img{ transform:scale(1.06); opacity:1}
.n_video ul li a:hover h5:after{width:100%;height:3px;background: #3ca0d3;}
.n_video ul li a:hover .img .top01 img{ transform:rotate(180deg)}

/*资料下载*/
.n_xiazai{ padding:102px 0 65px}
.n_xiazai ul{ font-size:0; margin:0 -60px; margin-bottom:50px}
.n_xiazai ul li{ display:inline-block; padding:0 60px; width:50%; margin-bottom:40px; overflow:hidden}
.n_xiazai ul li a{display:block;border:#e5e5e5 2px solid;padding: 30px 30px;border-radius:4px;position:relative;min-height: 110px;}
.n_xiazai ul li a:after{ content:""; position:absolute; left:-2px; top:-2px; right:-2px; bottom:-2px; border:transparent 3px solid; border-radius:4px; transition:0.6s}
.n_xiazai ul li span{display:inline-block; background:url(../images/xiazai.png) center no-repeat; width:54px; height:54px; position:absolute; right:30px; top:28px; transition:0.6s}

.n_xiazai ul li .txt{display:inline-block;width: 385px;}
.n_xiazai ul li .txt h5{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n_xiazai ul li .txt h5{font-size: 16px;color: #242425;}
.n_xiazai ul li .txt h5 font{ font-size:18px; color:#0f89dd; margin-right:6px}
.n_xiazai ul li .txt p{color: #97989b;font-size: 14px;margin-top: 12px;}


.n_xiazai ul li a:hover span{ background:url(../images/xiazai_on.png) center no-repeat;}
.n_xiazai ul li a:hover:after{ border:#3ca0d3 3px solid;}

.n_service{ padding:102px 0 65px}
.n_service ul li{ overflow:hidden; margin-bottom:20px}
.n_service ul li .box{ font-size:0}
.n_service ul li .box .img,.n_service ul li .box .img img{ display:inline-block; width:390px; height:230px; overflow:hidden}
.n_service ul li .box .con{ display:inline-block; width:810px; height:230px; border:#dbdcdf 1px solid; padding: 0 42px}
.n_service ul li .box .con .table{ text-align:left}
.n_service ul li .box .con h3{ margin-bottom:34px}
.n_service ul li .box .con h3 font{ font-size:30px; color:#363535}
.n_service ul li .box .con dl{ font-size:0; float:right}
.n_service ul li .box .con dd{ display:inline-block;}
.n_service ul li .box .con dd a{ background-image:linear-gradient(62deg, #3ca0d3, #00e4ff); display:inline-block; font-size:14px; font-weight:bold; color:#fff; width:130px; height:40px; line-height:40px; text-align:center; margin-left:15px; border-radius:20px; transition:0.6s}
.n_service ul li .box .con dd.dd a{ background-image:linear-gradient(62deg, #282a2e ,#3d5e95)}
.n_service ul li .box .con p{ font-size:15px; color:#86868b; line-height:26px; height:52px;}

.n_service ul li .box .con dd a:hover{ opacity:0.6}

.n_solution{ padding:102px 0 65px}
.n_solution ul{ font-size:0; margin:0 -8px; margin-bottom:30px}
.n_solution ul li{ display:inline-block; width:33.333333%; padding:0 8px; margin-bottom:60px; text-align:center; overflow:hidden}
.n_solution ul li a{ display:block}
.n_solution ul li .img,.n_solution ul li .img img{width: 390px;height: 205px;overflow:hidden;position:relative;background:#000;}
.n_solution ul li .con{ padding:46px 15px; background:#fff; position:relative}
.n_solution ul li .con:before{ content:""; position:absolute; bottom:0; left:0; right:0; background:#3ca0d3; height:0; transition:1.2s}
.n_solution ul li .con h5{font-size:24px;color:#454545;margin-bottom: 6px; position:relative; transition:0.6s}
.n_solution ul li .con h6{ font-size:12px; color:#949494; text-transform:uppercase; margin-bottom:22px; position:relative; transition:0.6s}
.n_solution ul li .con span{ display:inline-block; width:120px; height:45px; line-height:45px; border-radius:2px; font-size:14px; color:#fff; background:#3ca0d3; position:relative; transition:0.6s}

.n_solution ul li a:hover .con:before{ top:0; height:100%}
.n_solution ul li a:hover .con h5{ color:#fff}
.n_solution ul li a:hover .con h6{ color:rgba(255,255,255,0.7)}
.n_solution ul li a:hover .con span{ color:#3ca0d3; background:#fff}

.n_solution_detail .fl01{ padding:102px 0 0 }
.n_solution_detail .fl01 .w1200{ border-bottom:#dedede 1px solid; padding-bottom:30px}
.n_solution_detail .fl01 h2{ font-size:36px; color:#3f3b3d; font-weight:bold; margin-bottom:38px; text-align:center;}
.n_solution_detail .fl01 ul{ margin-bottom:80px}
.n_solution_detail .fl01 ul li{ text-align:center;}
.n_solution_detail .fl01 ul li img{ display:inline-block; width:930px; height:490px;}
.n_solution_detail .fl02{ padding:72px 0 52px }
.n_solution_detail .fl02 .title{ margin-bottom:44px}
.n_solution_detail .fl02 .title h3{ font-size:30px; color:#262626; font-weight:bold}
.n_solution_detail .fl02 .title h3 img{margin-right:20px;margin-top: -3px;}
.n_solution_detail .fl03{ padding:88px 0 90px; background:#e7ebee }
.n_solution_detail .fl03 .title{ margin-bottom:44px}
.n_solution_detail .fl03 .title h3{font-size:30px;color:#262626;font-weight:bold;margin-top: -3px;}
.n_solution_detail .fl03 .title h3 img{ margin-right:20px}
.n_solution_detail .fl03 .title h3 a{ display:inline-block; line-height:30px; float:right; font-size:16px; color:#262626; font-weight:normal; transition:0.6s;}

.n_solution_detail .fl03 ul{ font-size:0; margin:0 -11px;}
.n_solution_detail .fl03 ul li{ display:inline-block; width:33.333333%; padding:0 11px;}
.n_solution_detail .fl03 ul li a{ display:block; position:relative; transition:0.6s; overflow:hidden}
.n_solution_detail .fl03 ul li a .img{ overflow:hidden}
.n_solution_detail .fl03 ul li a .img img{ width:385px; height:286px}
.n_solution_detail .fl03 ul li a h5{ font-size:16px; color:#262626; height:40px; line-height:40px; position:absolute; bottom:15px; left:0; width:100%; padding:0 15px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

.n_solution_detail .fl03 .title .fr a:hover{ color:#fff}
.n_solution_detail .fl03 .title .fr a:hover:before{transform:scale(1); opacity:1}
.n_solution_detail .fl03 ul li a:hover{ box-shadow:0 0 30px rgba(0,0,0,0.15)}
.n_solution_detail .fl03 .miso-prev,.n_solution_detail .fl03 .miso-next{ width:68px; height:68px; margin-top:-34px;}
.n_solution_detail .fl03 .miso-prev{ background:url(../images/left02.png) center no-repeat; left:-105px;}
.n_solution_detail .fl03 .miso-next{ background:url(../images/right02.png) center no-repeat; right:-105px}

.n_solution_detail .fl03 .title h3 a:hover{ color:#3ca0d3}

.n_solution_detail .fl04{padding:110px 0 150px;text-align:center;position: relative;}
.n_solution_detail .fl04 h2{ font-family:MLSBQ; font-size:72px; color:#262626; text-transform:uppercase; margin-bottom:12px}
.n_solution_detail .fl04 h2 font{ color:#3ca0d3; font-family:MLSBQ;}
.n_solution_detail .fl04 h5{ font-size:18px; color:#262626; margin-bottom:38px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.n_solution_detail .fl04 a{ background-image:linear-gradient(62deg, #3ca0d3, #00e4ff); display:inline-block; width:490px; line-height:72px; height:72px; border-radius:10px; font-size:22px; color:#fff; transition:0.6s}
.n_solution_detail .fl04 a img{ margin-right:15px}
.n_solution_detail .fl04 a:hover{ opacity:0.6}

.n_case_detail .fl01 .w1200{ border:none; padding-bottom:0}
.n_case_detail .fl01 .miso-prev,.n_case_detail .fl01 .miso-next{ width:74px; height:74px; margin-top:-37px;}
.n_case_detail .fl01 .miso-prev{ background:url(../images/left03.png) center no-repeat; left:0px;}
.n_case_detail .fl01 .miso-next{ background:url(../images/right03.png) center no-repeat; right:0px}


.n_case_detail .fl02 .title{ position:relative}
.n_case_detail .fl02 .title:before{ content:""; position:absolute; left:170px; right:84px; height:1px; background:#e3e3e3; top:50%}
.n_case_detail .fl02 .title h3 a{ display:inline-block; line-height:30px; float:right; font-size:16px; color:#262626; font-weight:normal; transition:0.6s;}
.n_case_detail .fl02 ul{ font-size:0; margin:0 -8px;}
.n_case_detail .fl02 ul li{ display:inline-block; width:33.333333%; padding:0 8px;}
.n_case_detail .fl02 ul li a{ display:block; position:relative; transition:0.6s; overflow:hidden}
.n_case_detail .fl02 ul li a .img{ overflow:hidden}
.n_case_detail .fl02 ul li a .img img{ width:390px; height:205px; transition:0.9s}
.n_case_detail .fl02 ul li a h5{ font-size:18px; color:#454545; height:70px; line-height:70px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:0.6s }
.n_case_detail .fl02 ul li a:hover .img img{ transform:scale(1.06)}
.n_case_detail .fl02 ul li a:hover h5{ color:#3ca0d3}

.n_case_detail .fl02 .title h3 a:hover{ color:#3ca0d3}

.n_case_detail .fl04{ padding:110px 0 80px}
.n_case_detail .fl04 .content{ padding:40px 0 0}
.n_case_detail .fl04 .content .form01{overflow:hidden; width:785px;}
.n_case_detail .fl04 .content .form01 .form_box{margin: 0 -8px;}
.n_case_detail .fl04 .content .form01 .form_box .box{float:left;width:  50%;padding: 0 8px;margin-bottom: 21px;}
.n_case_detail .fl04 .content .form01 .form_box .box .label{width: 150px;height: 60px;line-height: 60px;background: #e3e4ea;float:left;text-align:  center;font-size: 16px;color: #373737;}
.n_case_detail .fl04 .content .form01 .form_box .con{border: #e3e4ea 1px solid;background:none;height: 60px;line-height: 58px;float:  left;width: 235px;margin-left: -1px;position:relative;}
.n_case_detail .fl04 .content .form01 .form_box .con input{height: 43px;width:100%;padding:0 10px;font-size: 16px;border: none;color: #3e3e3e;}
.n_case_detail .fl04 .content .form01 .form_box .button{background: linear-gradient(62deg, #3ca0d3, #00e4ff);width: 100%;height: 60px;line-height: 60px;margin: 0 auto;margin-top: 0;cursor: pointer; transition:0.6s}
.n_case_detail .fl04 .content .form01 .form_box .button button{display:block;width:100%;line-height: 60px;height: 60px;background:none;border:none;font-size: 18px;color:#fff;font-weight: bold;cursor: pointer;}
.n_case_detail .fl04 .content .form01 .form_box .con .yzm{position:absolute;right:2px;top: 0px;}
.n_case_detail .fl04 .content .form01 .form_box .con textarea{width:100%;height:100%;padding: 16px 10px;border:none;outline:none;resize:none;font-size: 16px;color: #3e3e3e;}
.n_case_detail .fl04 .content .form01 .form_box .button:hover{ opacity:0.6}

.n_form{ height:1000px; padding:206px 0 0 }
.n_form .left{ width:600px}
.n_form .left h2{ font-size:80px; color:#fff; line-height:80px; font-family:MLSBQ; text-transform:uppercase; margin:22px 0 50px}
.n_form .left p{ font-size:16px; color:#fff; line-height:30px; }

.n_form form{overflow:hidden; width:475px;}
.n_form form .form_box{margin: 0 -8px;}
.n_form form .form_box .box{float:left;width:  100%;padding: 0 8px;margin-bottom: 15px;}
.n_form form .form_box .box .label{width: 150px;height: 60px;line-height: 60px;background: #e3e4ea;float:left;text-align:  center;font-size: 16px;color: #373737;}
.n_form form .form_box .con{border: #e3e4ea 1px solid;background:none;height: 60px;line-height: 58px;float:  left;width: 326px;margin-left: -1px;position:relative;}
.n_form form .form_box .con input{height: 58px;width:100%;padding:0 10px;font-size: 16px;border: none;color: #3e3e3e;}
.n_form form .form_box .button{background: linear-gradient(62deg, #3ca0d3, #00e4ff);width: 100%;height: 60px;line-height: 60px;margin: 0 auto;margin-top: 0;cursor: pointer; transition:0.6s}
.n_form form .form_box .button button{display:block;width:100%;line-height: 60px;height: 60px;background:none;border:none;font-size: 18px;color:#fff;font-weight: bold;cursor: pointer;}
.n_form form .form_box .con .yzm{position:absolute;right:2px;top: 0px;}
.n_form form .form_box .con .shouji{position:absolute; top: 0px; font-size:14px; color:#8e8e8e; right:26px}
.n_form form .form_box .con .shouji a{ color:#8e8e8e;}
.n_form form .form_box .con textarea{width:100%;height:100%;padding: 16px 10px;border:none;outline:none;resize:none;font-size: 16px;color: #3e3e3e;}

.n_form form .form_box .con .shouji a:hover{ color:#3ca0d3}
.n_form form .form_box .button:hover{ opacity:0.9}

#n_lianxi{/* position:relative; *//* z-index:9; */padding:62px 0 0;}
#n_lianxi .tt1{color: #3ca0d3;text-align:center;margin-bottom:45px;}
#n_lianxi .tt1 h3{font-size:30px;font-weight:bold;color: #393c3d;margin-bottom: 6px;}
#n_lianxi .tt1 span{ font-size:14px; font-family:arial; text-transform:uppercase;}
#n_lianxi .tt2{ text-align:center;}
#n_lianxi .con{ text-align:center; margin-top:40px; font-size:14px; color:#676768; line-height:30px;}

.lianxi_box{overflow:hidden;padding:70px;margin-top:80px;background: #fff;border-top: #393c3d 7px solid;position: relative;z-index: 1000;}
.lianxi_box .left{ width:527px; height:397px; border-right:1px solid #e4e7e9;}
.lianxi_box .tt{margin-bottom:90px;text-align: center;}
.lianxi_box .tt h3{font-size:36px;color: #3ca0d3;font-weight:bold;text-transform:uppercase;display:inline-block;}
.lianxi_box .tt span{ font-size:16px; color:#696969; display:inline-block; margin-left:10px; position:relative; top:-2px;}
.lianxi_box ul{ border-top:1px solid #e4e7e9; padding-top:65px;}
.lianxi_box ul li{font-size:14px;color: #727273;display:inline-block;padding-left: 40px;margin-bottom:30px;}
.lianxi_box ul li+li{ margin-left:35px;}
.lianxi_box ul li b{ display:block; font-weight:normal; font-size:16px; color:#171717; margin-bottom:3px;}
.lianxi_box ul li a{ font-size:14px;color: #727273; font-weight:bold}
.lianxi_box .ewm{ width:210px; float:left; margin-left:30px; text-align:center; font-size:16px; color:#303030;}
.lianxi_box .ewm img{ width:210px; height:210px; margin-bottom:20px; border:1px solid #e5e5e5; padding:20px;}

.n_container{ padding:28px 0 0}

.n_product_detail .fl01{ background:#e7ebee; padding:102px 0 115px;}
.n_product_detail .fl01 .left{ width:640px; overflow:hidden}
.n_product_detail .fl01 .left .miso_bd{width:640px;height: 640px;margin-bottom:12px;}
.n_product_detail .fl01 .left .miso_bd li img{width:640px;height: 640px;object-fit: cover;}
.n_product_detail .fl01 .left .miso_hd{padding:0 44px;margin:0 -6px;}
.n_product_detail .fl01 .left .miso_hd li{ padding:0 6px;}
.n_product_detail .fl01 .left .miso_hd li img{width: 176px;height: 176px;object-fit: cover;}
.n_product_detail .fl01 .left .miso_hd .miso-prev,.n_product_detail .fl01 .left .miso_hd .miso-next{width:35px;height: 176px;z-index:1000;margin-top: -88px;}
.n_product_detail .fl01 .left .miso_hd .miso-prev{background: #fff url(../images/left04.png) center no-repeat;left:0;}
.n_product_detail .fl01 .left .miso_hd .miso-next{background: #fff url(../images/right04.png) center no-repeat;right:0;}
.n_product_detail .fl01 .right{ width:510px; overflow:hidden}
.n_product_detail .fl01 .right h3{font-size:30px;color:#262626;font-weight:bold;line-height: 46px;margin-bottom: 40px;}
.n_product_detail .fl01 .right h4{font-size:18px;color:#65686b;font-weight:bold;padding:0 0 26px 16px;position:relative;border-bottom:#cdd1d4 1px solid;margin-bottom: 52px; position:relative}
.n_product_detail .fl01 .right h4:before{ content:""; position:absolute; left:0; top:0; width:5px; height:18px; background:#3ca0d3}
.n_product_detail .fl01 .right p{font-size:14px;color:#65686b;line-height:30px;height: 588px;}

.n_product_detail .fl01 .right a{background-image:linear-gradient(62deg, #3ca0d3, #00e4ff);display:inline-block;width: 100%;line-height: 55px;height: 55px;border-radius: 2px;font-size: 18px;color:#fff;transition:0.6s;text-align: center;}
.n_product_detail .fl01 .right a img{ margin-right:15px}
.n_product_detail .fl01 .right a:hover{ opacity:0.6}

.siji{background:#fff;border-bottom: #dcdcdc 1px solid;border-top: #dcdcdc 1px solid;}
.siji ul{font-size: 0;margin: -1px 0;position: relative;z-index: 100;}
.siji ul li{display:inline-block; width:20%; font-size:16px;color:#4f4f52;position:relative;margin-right: -1px;}
.siji ul li a{font-size: 18px;color: #262626;display:inline-block;padding-bottom:14px;position:relative;width: 100%;height: 70px;line-height: 68px;border:  #dcdcdc 1px solid;text-align: center;background: #fff; cursor:pointer}
.siji ul li a:hover{ color:#3db8f7;}

.siji ul li a:before{content:"";position:absolute;bottom: -1px;right:0;width:0;height: 3px;background: #3db8f7;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.siji ul li a:after{content:"";position:absolute;top: 90px;left:50%; margin-left:-7px;width:14px;height: 0;background:url(../images/jiantou01.png) center no-repeat;transition: 0.6s;}
.siji ul li.miso-current a:before,.siji ul li:hover a:before{ left:0; width:100%}
.siji ul li.miso-current a:after,.siji ul li:hover a:after{ height:8px;}

.n_product_detail .fl02{ background:#fff;}
.n_product_detail .fl02 .more{ text-align:center; margin-top:80px}
.n_product_detail .fl02 .more a{ background-image:linear-gradient(62deg, #3ca0d3, #00e4ff); display:inline-block; width:490px; line-height:72px; height:72px; border-radius:10px; font-size:22px; color:#fff; transition:0.6s}
.n_product_detail .fl02 .more a img{ margin-right:15px}
.n_product_detail .fl02 .more a:hover{ opacity:0.6}

.n_product_detail .fl02 .miso_hd .miso-list{ overflow:visible}

.n_product_detail .fl02 .miso_bd .con{ padding:102px 0 60px}
.n_product_detail .fl02 .miso_bd .con03 .img{ text-align:center}
.n_product_detail .fl02 .miso_bd .con03 .img img{ display:inline-block; width:930px; height:490px;}
.n_product_detail .fl02 .miso_bd .con03 h3{ font-size:30px; color:#454545; text-align:center; margin:52px 0 36px}
.n_product_detail .fl02 .miso_bd .con03 .ar_article{ margin-bottom:60px}
.n_product_detail .fl02 .miso_bd .con03 .more01{ text-align:center}
.n_product_detail .fl02 .miso_bd .con03 .more01 a{ font-size:16px; color:#fff; display:inline-block; width:210px; height:55px; line-height:55px; background:#3ca0d3; border-radius:3px; text-align:center;}
.n_product_detail .fl02 .miso_bd .con03 .more01 a:hover{ opacity:0.6}
.n_product_detail .fl02 .miso_bd .con04{}
.n_product_detail .fl02 .miso_bd .con04 .more01{ text-align:center}
.n_product_detail .fl02 .miso_bd .con04 .more01 a{ font-size:16px; color:#fff; display:inline-block; width:210px; height:55px; line-height:55px; background:#3ca0d3; border-radius:3px; text-align:center;}
.n_product_detail .fl02 .miso_bd .con04 .more01 a:hover{ opacity:0.6}
.n_product_detail .fl02 .miso_bd .con05{ background:#e7ebee;}
.n_product_detail .fl02 .miso_bd .con05 .more01{ text-align:center}
.n_product_detail .fl02 .miso_bd .con05 .more01 a{ font-size:16px; color:#fff; display:inline-block; width:210px; height:55px; line-height:55px; background:#3ca0d3; border-radius:3px; text-align:center;}
.n_product_detail .fl02 .miso_bd .con05 .more01 a:hover{ opacity:0.6}


.n_news_detail{padding: 102px 0 0;}
.n_news_detail .left{float:left;width: 770px;}
.n_news_detail .left .title{height: auto;overflow: hidden;position:relative;padding-bottom: 35px;}
.n_news_detail .left .ar_title{padding: 0;padding-bottom: 25px;border-bottom: #e7e7e7 1px solid; position:relative}
.n_news_detail .left .ar_title h3{font-size: 30px;color: #000000;line-height: 48px;margin-bottom: 5px;font-weight: bold;}
.n_news_detail .left .ar_title h6{position:relative;font-size: 16px;color: #3ca0d3; position:relative}
.n_news_detail .left .ar_title:before{content:"";position:absolute;bottom: -1px;left:0;width:70px;height:2px;background:#3ca0d3;}

#ar_fot01{position:relative;width: 100%;overflow:  hidden;}
#ar_fot01 h1{display:block;font-size: 14px;font-weight: normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;margin: 0;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;width: 100%;height: 30px;line-height: 30px;}
#ar_fot01 h1 span{color: #575c63;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;display: inline-block;vertical-align: top;}

#ar_fot01 h1 a{font-size: 14px;color: #575c63;font-weight:normal;-moz-transition: all 0.36s ease-in-out;-webkit-transition: all 0.36s ease-in-out;-o-transition: all 0.36s ease-in-out;-ms-transition: all 0.36s ease-in-out;transition: all 0.36s ease-in-out;width: 706px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#ar_fot01 h1:hover, #ar_fot01 h1:hover a, #ar_fot01 h1:hover span{color: #3db8f7;vertical-align: top;display: inline-block;}
#ar_fot01 .bnt_back{ position:absolute; top:28px; right:0; color:#fff; background:#063579; padding:0 25px; font-size:14px; height:30px; line-height:30px;}
#ar_fot01 .bnt_back:hover{ border-radius:3px;}
#ar_fot01 a,#ar_fot span{}
#ar_fot01 .shart_box a{ line-height:36px;}
#ar_fot01 .fr{text-align: left;}
#ar_fot01 h1:hover{}

.dibu{position:relative;margin-top: 70px;padding-top: 28px;border-top: #eef1f2 2px solid;margin-bottom: 23px;}
.dibu .end{display:inline-block;width:68px;height:20px;line-height:20px;background: #ffffff;position:absolute;left:50%;margin-left:-34px;top:-10px;text-align:center;font-size: 16px;color: #616060;text-transform:uppercase;font-weight: 600;}

.n_news_detail .right{ width:380px;}
.n_news_detail .right .fl00{ background:#e7ebee; padding:30px 30px}
.n_news_detail .right .fl00 .title{ font-size:24px; color:#262626; margin-bottom:30px;}
.n_news_detail .right .fl00 .title img{ margin:-3px 14px 0 0}
.n_news_detail .right .fl01{ margin-bottom:16px}
.n_news_detail .right .fl01 ul li{ text-align:center}
.n_news_detail .right .fl01 ul li .img,.n_news_detail .right .fl01 ul li .img img{ width:320px; height:240px; overflow:hidden; transition:0.9s}
.n_news_detail .right .fl01 ul li h5{ font-size:16px; margin-top:22px; color:#262626; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; transition:0.6s}
.n_news_detail .right .fl01 .miso-prev,.n_news_detail .right .fl01 .miso-next{width: 8px;height: 13px;z-index:1000;top: -50px;}
.n_news_detail .right .fl01 .miso-prev{background:url(../images/container07_prev.png) center no-repeat;left: auto;right: 26px;}
.n_news_detail .right .fl01 .miso-next{ background:url(../images/container07_next.png) center no-repeat; right:0}
.n_news_detail .right .fl01 ul li h5:hover{ color:#3ca0d3}
.n_news_detail .right .fl01 ul li a:hover .img img{ transform:scale(1.06)}

.n_news_detail .right .fl02{ margin-bottom:16px}
.n_news_detail .right .fl02 ul li{ text-align:center}
.n_news_detail .right .fl02 ul li a{ display:block; position:relative}
.n_news_detail .right .fl02 ul li .img,.n_news_detail .right .fl02 ul li .img img{ width:320px; height:185px; overflow:hidden; transition:0.9s}
.n_news_detail .right .fl02 ul li h5{background:rgba(0,0,0,0.7);padding:0 15px;height:40px;line-height:40px;font-size:18px;margin-top:22px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:0.6s;position:absolute;bottom:0;width:100%;text-align: left;padding-right: 110px;}
.n_news_detail .right .fl02 ul li h5:hover{ color:#3ca0d3}
.n_news_detail .right .fl02 ul li a:hover .img img{ transform:scale(1.06)}
.n_news_detail .right .fl02 .miso-dots{bottom: 14px;text-align: right;width: auto;right: 14px;}
.n_news_detail .right .fl02 .miso-dots li{width:10px;height:10px;background:#d1d1d1;border-radius:5px;margin: 0 3px;}
.n_news_detail .right .fl02 .miso-dots li.miso-active{ background:#3ca0d3; }


.n_news_detail .right .fl03 ul{ margin-top:15px;}
.n_news_detail .right .fl03 ul li{line-height: 30px;height: 30px;}
.n_news_detail .right .fl03 ul li a{display:block;position:relative;line-height: 30px;height: 30px;}
.n_news_detail .right .fl03 ul li a:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fafafa; opacity: 0; visibility: hidden\9; transform: scale(1, 0); transition: all .5s; z-index: -1;}
.n_news_detail .right .fl03 ul li a:hover:before { transform: none; opacity: 1; visibility: visible\9;}

.n_news_detail .right .fl03 ul li i{display:inline-block;width: 13px;vertical-align: top;}

.n_news_detail .right .fl03 ul li font{display:inline-block;font-size: 15px;color: #6d6f71;width: 246px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;transition:0.36s;vertical-align: top;}
.n_news_detail .right .fl03 ul li span{float:right;font-size:14px;color: #6d6f71;}
.n_news_detail .right .fl03 ul li:hover font{ color:#3ca0d3}

.m_3d .fl01{ padding:102px 0 0 }
.m_3d .fl01 .w1200{ border-bottom:#dedede 1px solid; padding-bottom:30px}
.m_3d .fl01 h2{ font-size:30px; color:#3f3b3d; font-weight:bold; margin-bottom:55px; text-align:center;}

.m_3d .fl04{padding:110px 0 150px;text-align:center;position: relative;}
.m_3d .fl04 h2{ font-family:MLSBQ; font-size:72px; color:#262626; text-transform:uppercase; margin-bottom:12px}
.m_3d .fl04 h2 font{ color:#3ca0d3; font-family:MLSBQ;}
.m_3d .fl04 h5{ font-size:18px; color:#262626; margin-bottom:38px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}

.m_3d .fl03{ padding:88px 0 90px; background:#e7ebee }
.m_3d .fl03 .title{ margin-bottom:44px}
.m_3d .fl03 .title h3{font-size:30px;color:#262626;font-weight:bold;margin-top: -3px;}
.m_3d .fl03 .title h3 img{ margin-right:20px}
.m_3d .fl03 .title h3 a{ display:inline-block; line-height:30px; float:right; font-size:16px; color:#262626; font-weight:normal; transition:0.6s;}


.m_3d .fl03 .danxuan .box{ font-size:0; margin:0 -20px;}
.m_3d .fl03 .danxuan .box .con{ display:inline-block; width:50%; padding:0 20px;}
.m_3d .fl03 .danxuan .box .con .layui-form-item{ height:115px; border:#e2e2e2 1px solid; background:#fff}
.m_3d .fl03 .danxuan .box .con .layui-form-item .layui-form-label{height:115px;line-height:115px;width:130px;border-right:#e2e2e2 1px solid;font-size:18px;color:#373737;padding: 0;text-align: center;}
.m_3d .fl03 .danxuan .box .con .layui-form-item .layui-form-label font{ color:#ff0000}
.m_3d .fl03 .danxuan .box .con .layui-form-item .layui-input-block{margin-left: 130px;height:113px;}
.m_3d .fl03 .danxuan .box .con .layui-form-item .table{}
.m_3d .fl03 .danxuan .box .con .layui-form-item .layui-form-radio *{ font-size:18px; color:#373737; text-transform:uppercase}
.m_3d .fl03 .danxuan .box.box01 .con .layui-form-item .layui-form-radio >div{ font-weight:bold; }
.m_3d .fl03 .danxuan .box .con .layui-form-item img{margin-left: -38px;margin-right: 20px;}

.m_3d .fl03 .danxuan .box.box02 .con .layui-form-item .layui-form-radio{ position:relative}
.m_3d .fl03 .danxuan .box.box02 .con .layui-form-item .layui-form-radio *{ margin-right:100px}
.m_3d .fl03 .danxuan .box.box02 .con .layui-form-item img{margin-left: -186px;margin-right: 20px;}
.m_3d .fl03 .danxuan .box.box02 .con .layui-form-item .layui-form-radio>div{ margin-right:0}
.m_3d .fl03 .danxuan .box.box02 .con .layui-form-item .lwy{width:220px;display:inline-block;text-align: left;}
.m_3d .fl03 .danxuan .box.box01 .con .layui-form-item .lwy{width:130px;display:inline-block;text-align: left;}
.m_3d .fl03 .danxuan .box .con .layui-form-item .layui-form-radio .layui-anim.layui-icon{ color:#9f9f9f}
.m_3d .fl03 .danxuan .box .con .layui-form-item .layui-form-radio.layui-form-radioed .layui-anim.layui-icon{ color:#3a3a3a}

.ar_article video{ width:100%; height:480px}

.siji01{margin-top: -28px;text-align:center;margin-bottom: -28px;}
.siji01 ul{font-size: 0;}
.siji01 ul li{display:inline-block;font-size:16px;color:#4f4f52;position:relative;margin-right: -1px;width: auto;}
.siji01 ul li a{font-size:16px;color:#4f4f52;display:inline-block;padding-bottom:14px;position:relative;width:  200px;height: 55px;line-height: 53px;border:  #dcdcdc 1px solid;text-align: center;background: #fff;border-radius: 4px;}
.siji01 ul li a:hover,.siji01 ul li.on a{color: #fff;border:#3db8f7 1px solid;}
.siji01 ul li a:before{content:"";position:absolute;bottom: -1px;right:0;width:0;height: 55px;background: #3db8f7;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;z-index: 0;}
.siji01 ul li.on a:before,.siji01 ul li:hover a:before{ left:0; width:100%}


/*==========================================内页 结束=============================================*/



@media(min-width: 768px){
	
}


@media(min-width: 992px) and (max-width: 1300px){
}

@media(max-width: 1610px){
	.nav li{ padding:0 10px}
}

@media(max-width: 1600px){
	.page-view .project{ background-size:cover !important}
}

@media(max-width: 1400px){
	header .right .tel{ width:190px; padding-left:25px}
}

@media(max-width: 1330px){

	header .right .tel{ display: none}
}

@media(max-width: 1200px){
	
}

@media(max-width: 1060px){
	
}


@media(max-width: 992px){
	
}

@media(max-width: 768px){
	
}



@media(max-width: 456px){
	
}