@charset "utf-8";
body{font-family: "Microsoft YaHei";}
.content{width:1400px;min-width: 1200px;max-width:1920px; margin: 0 auto;}
i,em,b{font-style: normal;}


@media (min-width: 1200px) and (max-width: 1680px) {}



.tit{font-size:48px; font-weight:bold; color:#000; text-align:center;}
.tit a{ display:block; color:#000;}
.tit em{ display:block; font-weight:normal; font-size:20px;padding-top:6px; color:#282828;}



/**/
.g_guide{ padding:85px 0; background:url(../images/guide_bg.jpg) no-repeat center top;} 
.g_guide dl{ width:50%; float:left;}
.g_guide dd{}
.g_guide dd h3{ font-size:48px; font-weight:bold; color:#18a5b7; padding:20px 0 36px; border-bottom:1px solid #cedbdc; margin-bottom:35px;}
.g_guide dd h3 a{color:#18a5b7; }
.g_guide dd h3 em{ display:block; font-size:26px; color:#000; line-height:50px; font-weight:bold;}
.g_guide dd p{ font-size:16px; line-height:36px; color:#333;}
.g_guide dt{ margin-top:56px; height:150px; background:#fff; border-radius:150px; box-shadow:0.1rem 0.1rem 1rem #ece9e9;}
.g_guide dt p{ width:33.33%; float:left; text-align:center; font-size:20px; color:#333; border-right:1px solid #ccc; height:150px; box-sizing:border-box; padding-top:30px; position:relative;}
.g_guide dt p:last-child{ border:0;}
.g_guide dt p a{ color:#333;}
.g_guide dt p b{ display:block; width:46px; height:41px; margin:0 auto 12px; overflow:hidden;}
.g_guide dt p b img{display:block; width:100%; margin-top:-41px;}
.g_guide dt p em{ display:none; position:absolute; top:0; left:50%; margin-left:-75px; width:150px; height:150px;}
.g_guide dt p em img{ display:block;width:150px; height:150px;}
.g_guide dt p:nth-child(1):hover{ background:#00a1e9; border-radius:150px 0 0 150px;}
.g_guide dt p:nth-child(1):hover a{ color:#fff;}
.g_guide dt p:nth-child(1):hover b img{ margin:0;}
.g_guide dt p:nth-child(2):hover em,.g_guide dt p:nth-child(3):hover em{ display:block;}
.g_guide h5{ width:43.071%; float:right; position:relative;}
.g_guide h5 img{ display:block; width:100%;}
.g_guide h5 em{ display:block; position:absolute; left:14.6%; bottom:40px; background:url(../images/guide_v.png) no-repeat; width:100px; height:100px;}

@media (max-width: 1440px) {
}




/**/
.g_pro{ background:url(../images/pro_bg.jpg) no-repeat center top; padding:85px 0 0;}
.g_pro h2{ padding-bottom:36px; text-align:center; font-size:48px; font-weight:bold;}
.g_pro h2 a{ color:#fff;}
.g_pro h2 em{ display:block; font-size:20px; font-weight:normal; line-height:40px;}

.fen_v{ height:85px; border-top:1px solid rgba(255,255,255,0.3);}
.fen_v a{ display:block; width:14.28571%; font-size:20px; text-align:center; line-height:85px; color:#fff; float:left; position:relative;}
.fen_v a:before{content: "";position: absolute;width:0;height:2px;top:0;left:0;z-index:0;background:#fff;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.fen_v .cur{ font-weight:bold;}
.fen_v .cur:before{ width:100%;}

.pro dl{ width:32%; float:left; background:#fff; margin-bottom:55px;}
.pro dl:last-child{ float:right;}
.pro dl:nth-child(2){ margin-left:2%;}
.pro dt{}
.pro dt h3 a{display:block; font-size:24px; font-weight:bold; line-height:90px; height:90px; overflow:hidden; color:#333; text-align:center;}
.pro dt span{ display:block; width:294px; height:294px; margin:0 auto; background:url(../images/pro_bg.png) no-repeat; position:relative; z-index:2;}
.pro dt span img{ display:block; width:220px; margin:0 auto; padding-top:30px; border-radius:300px;}
.pro dd{ padding:15px 6% 35px; text-align:center; font-size:16px; line-height:24px; color:#000;}
.pro dd .prod{}
.pro dd h5 a{ display:block; width:150px; height:45px; background:#e5e5e5; border-radius:40px; margin:20px auto 0; font-size:16px; line-height:45px; color:#333; font-weight:normal;}
.pro dl:hover dt h3 a{ color:#00a1e9;}
.pro dl:hover dd h5 a{ background:#00a1e9; color:#fff;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.pro dl:hover dt span:before{position: absolute;
        content: "";
        width: 70%;
        height: 70%;
        margin-left: 15%;
		margin-top: 15%;
        border: 1px solid #00a1e9;border-radius:12rem;
        animation: wave 2s ease-out infinite; z-index:0; animation-delay: 0.1s;}

.probtn{}
.probtn span{display:block; width:140px; height:140px; background:#fff; padding:10px; margin:0 auto; border-radius:150px; position:relative; z-index:1;}
.probtn span:before{position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        margin-left: -7%;
		margin-top: -5%;
        border: 1px solid #fff;
        border-radius: inherit;
        animation: wave 2s ease-out infinite; z-index:0; animation-delay: 0.1s;}
.probtn span em{ display:block; width:140px; height:105px; background:#18a5b7; text-align:center; color:#fff; font-weight:bold; line-height:30px;border-radius:150px; font-size:20px; padding-top:35px; position:relative; z-index:5;}
.probtn span em:before{position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        margin-left: -21%;
		margin-top: -25%;
        border: 1px solid #fff;
        border-radius: inherit;
        animation: wave 2s ease-out infinite; z-index:4; animation-delay: 0.1s;}
.probtn a{ color:#fff; position:relative; z-index:8;}
@keyframes wave {
        50%,
        75% {
            transform: scale(1.6);
        }
        60%,
        100% {
            opacity: 0;
        }
    }

/**/
@media (max-width: 1440px) {
}
@media (min-width: 1200px) and (max-width: 1400px) {

}

/**/
.baoz{ position:relative; min-width:1200px; max-width:1920px; width:100%; overflow:hidden; margin:30px auto 60px;}
.baoz_con{ margin-top:40px;}
.baoz_con dl{ position:relative;}
.baoz_con dt{ max-height:768px; position:relative;}
.baoz_con dt img{ display:block; width:100%;}
.baoz_con dt em{ display:block; min-width:1200px; max-width:1920px; width:100%;height:396px; background:url(../images/ys_bg.png) no-repeat; background-size:100% 396px; position:absolute; bottom:0;}
.baoz_con dd{ width:31.125%; position:absolute; top:8rem; right:8%;}
.baoz_con dd h3{ height:80px; margin-bottom:30px;}
.baoz_con dd h3 em{ display:block; width:105px; height:80px; border-right:2px solid #b9c2c9; float:left;}
.baoz_con dd h3 em img{ display:block;}
.baoz_con dd h3 span{ display:block;font-size:48px; font-weight:bold; color:#18a5b7; width:72%; float:right; margin-top:-8px;}
.baoz_con dd h3 span i{ display:block; font-size:18px; color:#2b3438; font-weight:normal; line-height:28px;}
.baoz_con dd p{ font-size:20px; line-height:36px; color:#333; margin-bottom:15px;}
.baoz_tit{ height:99px; border-top:1px solid rgba(255,255,255,0.4); position:relative; margin-top:-100px; z-index:8;}
.baoz_tit p{ width:25%; height:99px; float:left; font-size:24px; line-height:99px; color:#fff;}
.baoz_tit p em{ display:block; float:left; width:38px; height:35px; margin:33px 3% 0 20%;}
.baoz_tit p em img{ display:block;}
.baoz_tit .cur{ background:#00a1e9; font-weight:bold;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
@media (min-width: 1200px) and (max-width: 1400px) {
	.baoz_con dd{ width:44.125%;top:3rem;}
	.baoz_con dd p{ font-size:16px; }
}


/**/
.case .content{ position:relative;}
.case dl{ margin-top:45px;}
.case dt{ width:960px; height:684px; float:right; margin-right:-250px;}
.case dt img{ display:block;width:960px; height:684px;}
.case dd{ width:43.9285%; float:left; margin-top:20px;}
.case dd h3{ height:60px; font-size:36px; font-weight:bold;}
.case dd h3 a{ color:#333;}
.case dd h3 em{ font-size:16px; color:#666; background:url(../images/case_ad.png) no-repeat left center; padding-left:24px; margin-left:11px; line-height:25px; font-weight:normal; display:inline-block;}
.case dd h5{ width:85.36585%; height:52px; background:#00a1e9; border-radius:30px; text-align:center; line-height:52px; font-size:24px; color:#fff; font-weight:normal;}
.case dd p{ font-size:16px; line-height:36px; color:#666; margin:25px 0 0;}

.cased{ background:#fff; box-shadow:0.1rem 0.1rem 1rem #ccc; width:57.142%; padding-bottom:30px; position:absolute; bottom:50px; left:0;}
.cased h3{ height:70px; font-size:20px; font-weight:bold; color:#333; line-height:70px; text-align:center;}
.cased2{ width:88.75%; margin:0 auto; overflow:hidden;}
.cased li{ width:31.9%; float:left; border:1px solid #e0e0e0;margin-right:12px;}
.cased li:hover{ border:1px solid #00a1e9;}
.cased li img{ display:block; width:100%;}
.case_l{ background:url(../images/par_l.png) no-repeat; width:18px; height:19px; position:absolute; top:130px; left:17px;}
.case_r{background:url(../images/par_r.png) no-repeat; width:18px; height:19px; position:absolute; top:130px; right:17px;}
@media (max-width: 1400px) {
}
@media (max-width: 1366px) {
}
@media (max-width: 1360px) {
}
@media (min-width: 1200px) and (max-width: 1400px) {
.case dt{ margin-right:-320px;}
.cased li{ width:31.4%;}
.case_l,.case_r{top:110px;}
}


/**/
.new{ background:#f5f5f5; overflow:hidden; padding:60px 0 100px; margin-top:100px;}
.new_tit{ height:75px; margin:30px 0 45px; border-bottom:1px solid #ccc; position:relative;}
.new_tit li{ float:left; font-size:20px; line-height:75px; margin-right:50px;}
.new_tit sli a{ color:#666;}
.new_tit li em{ display:block; width:30px; height:27px; overflow:hidden; float:left; margin:25px 4px 0 0;}
.new_tit li em img{ display:block;}
.new_tit .cur a{ font-weight:bold; color:#00a1e9;}
.new_tit .cur em img{ margin-top:-27px;}
.new_tit h5 a{ display:block; width:79px; text-align:right; font-size:16px; line-height:75px; color:#666; position:absolute; right:0; font-weight:normal;}

.new_con{}
.new_con dl{ width:31.4285%; float:left; margin-right:1.8%; height:549px; background:#fff; position:relative;}
.new_con dl:nth-child(2){ margin-right:0;}
.new_con dt{ overflow:hidden;}
.new_con dt img{ display:block; width:100%;}
.new_con dd{ padding:25px 5%;}
.new_con dd h3{ font-size:24px; color:#333; line-height:32px;}
.new_con dd h3 a{ color:#333;}
.new_con dd em{ display:block; font-size:14px; color:#b7b8ba; margin:15px 0;}
.new_con dd p{ font-size:14px; line-height:24px; height:48px; overflow:hidden;}
.new_con dd h5{ display:none; width:140px; height:40px; border-radius:30px; background:#fff; line-height:40px;}
.new_con dd h5 a{ display:block; font-weight:bold; color:#24b6ad; padding-left:25px; background:url(../images/new_arr.png) no-repeat 112px center;}
.new_con dl:hover dd{ width:90%; height:499px; position:absolute; top:0; background:url(../images/new_bg.jpg) no-repeat; background-size:100% 100%;}
.new_con dl:hover dd h3 a{ display:block; color:#fff; margin-top:70px;}
.new_con dl:hover dd em{ color:#95daf7;}
.new_con dl:hover dd p{ height:72px; margin:80px 0 50px; color:#fff;}
.new_con dl:hover dd h5{ display:block;}
.new_con ul{ width:33.571%; float:right; margin-top:-30px;}
.new_con li:last-child{ border:0;}
.new_con li{ padding:26px 0; border-bottom:1px solid #ccc;}
.new_con li img{ display:block; width:42.5531%; float:left;}
.new_con li span{ display:block; width:50%; float:right; margin-top:16px;}
.new_con li span em{ display:block; font-size:16px; font-weight:bold; line-height:24px; color:#333;}
.new_con li span i{display:block; font-size:14px; color:#b7b8ba; margin-top:20px;}
.new_con li:hover span em{ color:#00a1e9;}
@media (min-width: 1200px) and (max-width: 1400px) {
	.new_con dl{ height:509px; }
	.new_con dl:hover dd{ height:459px;}
	.new_con li{ padding:30px 0;}
}

.about{ background:url(../images/about_bg.jpg) no-repeat center top; padding:70px 0 0;}
.about .tit a,.about .tit em{ color:#fff;}
.about .tit{ position:relative; padding-bottom:38px; margin-bottom:38px;}
.about .tit:before{ content:""; position:absolute; bottom:0; left:50%; width:90px; height:1px; background:#5bc0f0; margin-left:-45px;}
.about p{ font-size:16px; line-height:30px; color:#fff; text-align:center;}
.about .aboutul{ height:115px; margin-top:40px;}
.about .aboutul li{ width:20%; float:left; text-align:center; color:#fff; font-size:18px;}
.about .aboutul li span{ display:block; font-size:20px; font-weight:bold;}
.about .aboutul li span b{ font-size:40px;}

.pic{ width:100%; background:#fff; padding:30px 0 0; position:relative; margin-bottom:30px;}
.pic1{ width:91.428571%; margin:0 auto; overflow:hidden;}
.pic1 li{ width:23.4375%; float:left; height:auto; margin-right:28px; overflow:hidden;}
.pic1 li img{ display:block; width:100%;transition: all 0.3s linear 0s;}
.pic1 li em{ display:block; height:60px; text-align:center; line-height:60px; font-size:16px; color:#333;}
.pic1 li:hover img{transform: scale(1.05);}
.pic1 li:hover em{ font-weight:bold; color:#00a1e9;}
.pic_l{ background:url(../images/about_l.png) no-repeat; width:17px; height:29px; position:absolute; top:42%; left:20px;}
.pic_r{ background:url(../images/about_r.png) no-repeat; width:17px; height:29px; position:absolute; top:42%; right:20px;}
.about .probtn a{ line-height:70px; }


/*友情链接*/
.g_link{ font:16px "Microsoft YaHei UI"; line-height:100px; position:relative; margin-top:-185px;}
.g_link p{ width:60%; float:right; text-align:right;}
.g_link a{color:#333; display:inline-block; padding-left:25px;}
.g_link a:hover{ text-decoration:underline; color:#00a1e9;}

@media (min-width: 1200px) and (max-width: 1400px) {
	.g_guide .content,.g_pro .content,.baoz .content,.case .content,.new .content,.about .content,.g_link .content{ width:1200px; margin:0 auto;}
	}


@-webkit-keyframes spin{
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*animation*/
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
