﻿
/*-----------------------------------------------------------------------------------------------------------------------*/
.wrap img{ width:100%; display:block;}

.ban{ position:relative;}
.ban img{ display:block; width:100%;}
.ban .swiper-pagination{ bottom:3.6rem;}
.ban .swiper-pagination-bullet{ background:#fff; opacity:1; width:1.2rem; height:1.2rem; border-radius:1.2rem; margin:0 2%;}
.ban .swiper-pagination-bullet-active{ background:#ff9800; width:2.3rem;}

.tit{ text-align:center; font-size:2.4rem; font-weight:bold; color:#333;}
.tit b{ display:block; width:34.533%; margin:0.6rem auto;}
.tit em{ display:block; font-size:1.2rem; color:#4c4c4c; font-weight:normal;}

.g-yinz{ padding:3.5rem 0;}
.g-yinz h5{ width:92%; margin:0 auto;}
.g-yinz ul{width:92%; margin:1.5rem auto 1.3rem; height:7.5rem; border:1px solid #d9d9d9; box-sizing:border-box; text-align:center;}
.g-yinz li{ float:left; font-size:0.7rem; padding:0 1.2%; color:#000; border-right:1px solid #d9d9d9; height:7.5rem;}
.g-yinz li:last-child{ border:0;}
.g-yinz li span{ display:block; font-size:3rem; font-weight:bold; color:#212121; letter-spacing:-4px; padding-top:0.5rem;}
.g-yinz li span em{ display:inline-block; width:1.3rem; height:1.3rem; border-radius:1.3rem; background:#ff9800; text-align:center; line-height:1.3rem; font-size:0.7rem; color:#fff;letter-spacing:0;}


.g-pro{ margin:0 0 3rem;}
.prot{ width:92%; margin:1.4rem auto 0;height:8rem;}
.prot a{ display:block; width:25%; height:2.7rem; line-height:2.7rem; font-size:1.2rem; color:#000; overflow:hidden; border:1px solid #ccc; box-sizing:border-box; margin:0 0 0.7rem -1px;text-overflow: ellipsis;white-space: nowrap; float:left;text-align:center;}
.prot em{ display:block; width:1.6rem; height:1.6rem; float:left; margin:0.5rem 2% 0 18%;}
.prot a:nth-child(2) em{ margin-left:10%;}
.prot a:last-child{ text-align:center;}
.prot em img{ display:block;}
.m-pro{ width:92%; margin:0 auto; overflow:hidden;}
.m-pro p{ position:relative; background:#dedede;}
.m-pro p img{ display:block; float:left; width:50%;}
.m-pro p em{ display:block; font-size:1.4rem; color:#242424; width:50%; position:absolute; top:48%; right:0; text-align:center;}
.g-pro ul{ width:92%; margin:0 auto; overflow:hidden;}
.g-pro li{ width:47.82%; margin:1.5rem 0 0 0;}
.g-pro li img{ display:block; width:100%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1f1f3+0,dadcdd+100 */
background: rgb(241,241,243); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(241,241,243,1) 0%, rgba(218,220,221,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(241,241,243,1) 0%,rgba(218,220,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(241,241,243,1) 0%,rgba(218,220,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f3', endColorstr='#dadcdd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.g-pro li em{display:block; text-align:center;height:3rem; line-height:3rem; background:#242424; overflow:hidden; font-size:1.4rem; color:#fff;text-overflow: ellipsis;white-space: nowrap;}
.g-pro a:nth-child(2n) li{ float:left;}
.g-pro a:nth-child(2n-1) li{ float:right;}

.g-jic ul{ width:92%; margin:2rem auto 0;}
.g-jic li{ position:relative; margin-bottom:0.9rem; font-size:1.8rem; font-weight:bold; color:#fff;}
.g-jic li span{ display:block; width:46.37%; position:absolute; top:2.6rem; right:0;}
.g-jic li span b{ display:block; width:2.8rem; margin-bottom:0.3rem;}
.g-jic li em{ display:block; margin-top:.3rem; padding-right:3%; font-size:1.2rem; line-height:1.8rem; font-weight:normal;}
.g-jic li:nth-child(2n) span{ right:47%;}

.g-case{ padding:2rem 0;}
.m-caset{ width:92%; height:2.8rem; margin:1.5rem auto 0; overflow:hidden; background:#f2f2f2;}
.m-caset a{ display:block; width:20%; height:2.8rem; float:left; text-align:center; line-height:2.8rem; overflow:hidden; font-size:1.1rem; color:#333;}
.m-case{ width:92%; margin:1.5rem auto 0; overflow:hidden;}
.g-case li{ width:47.83%;}
.g-case li img{ display:block; width:100%;}
.g-case li em{display:block; text-align:center; height:3.2rem; background:#232323; line-height:3.2rem; color:#fff; overflow:hidden;text-overflow: ellipsis;white-space: nowrap; font-size:1.2rem; margin-bottom:2.3rem;}
.g-case a:nth-child(2n-1) li{ float:left;}
.g-case a:nth-child(2n) li{ float:right;}
.g-case .swiper-pagination-bullet{ background:#ff9800; opacity:1; width:1rem; height:1rem; border-radius:1rem; margin:0 2%;}
.g-case .swiper-pagination-bullet-active{ background:#ff9800; width:2.8rem;}

.g-super{ padding:3.5rem 0 0; background:url(../images/ys_bg.jpg) no-repeat center top; background-size:100% auto; margin-top:3rem;}
.supert{ height:6.5rem; background:#fff; box-shadow:0 0 1rem #ccc; width:92%; margin:1.3rem auto 1.2rem; border-radius:0.3rem;overflow:hidden;}
.supert p{ width:25%; float:left; text-align:center; font-size:1.0rem; color:#333; position:relative; height:6.5rem; border-right:1px solid #e4e4e5; box-sizing:border-box;}
.supert p:last-child{ border:0;}
.supert p span{ display:block; width:2.7rem; height:3.1rem; margin:0.6rem auto 0.2rem; position:relative; overflow:hidden;}
.supert p img{ display:block;}
.supert .active{ background:#232323; color:#fff; font-weight:bold;}
.supert .active img{ display:block; margin-top:-3.1rem;}
.m-super{ position:relative; overflow:hidden; width:92%; margin:0 auto;}
.m-super dl{ background:#fff; box-shadow:0 0 1rem #ccc;  padding-bottom:9rem; margin-bottom:2rem;}
.m-super dd h3{ font-size:1.6rem; color:#fff; background:#232323; font-weight:bold; text-align:center; overflow:hidden; height:4rem; line-height:4rem;text-overflow: ellipsis;white-space: nowrap; margin-bottom:1rem;}
.m-super dd p{ font-size:1.2rem; line-height:1.6rem; color:#333; margin-top:1.1rem; padding:0 3% 0 8%; background:url(../images/ys_arr.png) no-repeat 4% 0.5rem; background-size:.4rem 0.5rem;}
.m-super .arr{ width:100%; height:3rem; position:absolute; bottom:3.6rem;}
.m-super .swiper-pagination{ bottom:1rem; height:0.8rem; width:100%; height:2.8rem;}
.m-super .swiper-pagination-bullet{ background:url(../images/ys_yuan.png) no-repeat center top; background-size:100% auto; opacity:1; width:2.8rem; height:2.8rem; margin:0 2%; text-align:center; line-height:2.8rem; font-size:1.4rem; color:#999;}
.m-super .swiper-pagination-bullet:nth-child(1):before{ content:"01";}
.m-super .swiper-pagination-bullet:nth-child(2):before{ content:"02";}
.m-super .swiper-pagination-bullet:nth-child(3):before{ content:"03";}
.m-super .swiper-pagination-bullet:nth-child(4):before{ content:"04";}
.m-super .swiper-pagination-bullet-active{ background:#ff9800; color:#fff;}
.m-super .swiper-button-prev{ width:4.1rem; height:2.4rem; background:url(../images/ys_l.png) no-repeat; background-size:100% auto; left:10%; top:-0.8rem;}
.m-super .swiper-button-next{ width:4.1rem; height:2.4rem; background:url(../images/ys_r.png) no-repeat; background-size:100% auto; right:10%; top:-0.8rem;}

.g-news{padding:1rem 0 3.5rem;}
.m-new{ width:92%; margin:1.5rem auto 0; overflow:hidden;}
.g-news dl{ margin-bottom:0.6rem;}
.g-news dt{ width:50.289%; float:left;}
.g-news dt img{ display:block; width:100%;}
.g-news dd{ width:39.8%; float:right; margin-right:5%;}
.g-news dd h3{ font-size:1.3rem; line-height:1.5rem; padding:0.3rem 0 0.8rem; color:#333; border-bottom:1px solid #e6e6e6;}
.g-news dd p{ font-size:1.3rem; color:#6e6e6e; margin-top:0.8rem;}
.g-news li{ font-size:1.3rem; color:#6e6e6e; border-bottom:1px solid #e6e6e6; overflow:hidden;text-overflow: ellipsis;white-space: nowrap; height:3.2rem; line-height:3.2rem;}
.g-news li em{ float:right;}

.g-about dt img{ display:block; width:100%;}
.g-about dd{ width:86%; margin:-5.5rem auto 0; background:#fff; box-shadow:0.1rem 0.1rem 1rem 0.1rem #ccc; position:relative; z-index:5; padding:1.2rem 3% 4rem; }
.g-about dd p{text-align:center; font-size:1.3rem; line-height:2.2rem; color:#4c4c4c; margin-top:0.8rem;}



@-webkit-keyframes fade {
  from 
  {
   opacity:1;
   display:block;
   
  }

  to {
    opacity: 0;
    display:none;
    height:0;
   
  }
}

@keyframes fade {
  from{
    opacity: 1;
   display:block;
  }

  to 
  {
    display:none;
    opacity: 0;
    height:0;
  }
}

.fade {
  -webkit-animation-name: fade;
  animation-name: fade;
}

html{font-size:10px;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
@media screen and (min-width:320px){html{font-size:8.5333px;}}
@media screen and (min-width:360px){html{font-size:9.6px;}}
@media screen and (min-width:375px){html{font-size:10px;}}
@media screen and (min-width:400px){html{font-size:10.66666666666px;}}
@media screen and (min-width:414px){html{font-size:11.04px;}}
@media screen and (min-width:440px){html{font-size:11.73333333333333px;}}
@media screen and (min-width:480px){html{font-size:12.8px;}}
@media screen and (min-width:520px){html{font-size:13.86666666666667px;}}
@media screen and (min-width:560px){html{font-size:14.93333333333333px;}}
@media screen and (min-width:600px){html{font-size:16px;}}
@media screen and (min-width:640px){html{font-size:17.06666666666667‬px;}}
@media screen and (min-width:680px){html{font-size:18.1333333333px;}}
@media screen and (min-width:700px){html{font-size:18.66666666666667px;}}
@media screen and (min-width:720px){html{font-size:19.2px;}}
@media screen and (min-width:750px){html{font-size:20px;}}