@charset "UTF-8";

/*config*/

html {

  width: 100%;

  height: 100%;

  overflow: hidden; }

.show-img{
  /*display: block!important;*/
}
.big-img{
  display: none;
}
.russ-zzimg{width: 95%;border: 1px solid #000}
.bannerimg{height: 576px;overflow: hidden;}
pre {

  border: none; }

.am-slider-a1 .am-control-nav {
    width: 100%;
    position: absolute;
    bottom: 20px;
    text-align: center;
    line-height: 0;
}

body {

  width: 100%;

  height: 100%;

  overflow-x: hidden;

  overflow-y: auto; }




.nav {

  margin: 2rem 0;

  font-size: 1.4rem; }

  .nav span {

    color: #999;

    padding-left: 2px; }



.page {

  margin: 3rem 0;

  text-align: center; }

  .page a {

    border: 1px solid #ccc;

    color: #999;

    padding: 0.5rem 1rem;

    margin: 0 0.2rem;

    font-size: 1.2rem; }

  .page .active-page {

    background: #ef5600;

    color: #fff !important; }



.news-active {

  background: #0a6ce1;

  color: #fff !important; }



.center {


width: 90%;

margin: 0 auto;
}



.border-bottom {

  background: url("../images/title-bottom.jpg") no-repeat bottom center;

  padding-bottom: 0.5rem; }

.Iproduct{


    z-index:9;

    height :80%;

}

.Iproduct-cp{

    height :50%;

    cursor:pointer;

}

.Iproduct-image{

    width:100%;

    height :100%;

    background:#e9e9e9;

    overflow :hidden;

    position :relative;

}

.Iproduct-image-bg{

    width:100%;

    transform:scale(1);

    transition:0.7s;

}

.Iproduct-image-cp{

    position :absolute;

    bottom :5px;

    left :5px;

    transition:0.7s;

}

.Iproduct-image-but{

    width :200px;

    height :60px;

    line-height:60px;

    text-align:center;

    background :#ee1c25;

    color :#fff;

    font-size:30px;

    font-weight:bold;

    transform:skewX(-30deg);

    position :absolute;

    bottom :5px;

    right :-10px;

    transition:0.7s;

}

.Iproduct-image-but .text{

    display :inline-block;

    transform:skewX(30deg);

    transition:0.7s;

}

.Iproduct-hover{

    width :100%;

    height :100%;

    border :5px solid #c9c9c9;

    position :absolute;

    top :0;

    left :0;

    transition:0.7s;

    background :rgba(0,0,0,0);

}

.Iproduct-box{

    width :40%;

    height :40%;

    position :absolute;

    top :30%;

    left :30%;

    border :3px solid #bababa;

    text-align:center;

    transition:0.7s;

    opacity:0;

    transform:translateY(100px) scale(1.2);

    border-radius:40px;

}
.am-container{
  max-width: 1400px;
}
.Iproduct-box-title{

    font-size:30px;

    font-weight:bold;

    color :#e7e7e7;

    margin-top:10%;

}

.Iproduct-box-msg{

    color :#fff;

    margin-top:5%;

}

.Iproduct-cp:hover .Iproduct-image-bg{

    transform:scale(1.1);

}

.Iproduct-cp:hover .Iproduct-image-cp{

    transform:translateX(-200px) skewX(0);

    opacity :0;

}

.Iproduct-cp:hover .Iproduct-image-cp .text{

    transform:skewX(0);

}

.Iproduct-cp:hover .Iproduct-image-but{

    transform:translateX(200px);

    opacity :0;

}

.Iproduct-cp:hover .Iproduct-hover{

    background :rgba(0,0,0,0.7);

}

.Iproduct-cp:hover .Iproduct-box{

    opacity:1;

    transform:translateY(0);

    border-radius:0;

}


.slider {


  overflow: hidden; }



.am-slider-a1 .am-control-nav li a {

  width: 20px;

  height: 20px;

  background-color: #fff; }



/*澶撮儴*/

.header {

  width: 100%;
  position: fixed;
  top:0;
  background:rgba(255,255,255,0.7);
  border-bottom: 3px solid #dc0016;
  z-index: 9999;
  }

  .header-top-left {

    padding: 1.5rem 0;

    margin-left: 22%;

    float: left; }

    .header-top-left img {

      width: 100%; }

  .header-top-right {

    width: 40%;

    float: right;

    background: url("../images/top-right-bg.png") no-repeat;

    background-size: 100% 100%;

    color: #fff;

    padding: 1.5rem 3%; }

    .header-top-right span {

      padding-left: 1rem;

      line-height: 5rem;

      float: left; }

    .header-top-right-msg {

      font-family: Arial;

      display: block;

      font-size: 2.2rem;

      font-weight: bold; }

    .header-top-right-tell {

      font-size: 2.6rem;

      font-weight: 600; }

  .header-menu {

    width: 100%;
    float: left;

    text-align: center; }

    .header-menu-ch, .header-menu-en {

      color: #000;

      z-index: 2;

      transition: 1s;

      position: relative; }

    .header-menu-en {

      font-size: 1.2rem; }

    .header-menu-hover {


      position: absolute;

      width: 100%;

      height: 100%;

      top: 0;

      transition: 1s;

      z-index: 1; }

    .header-menu a {

      position: relative;

      width: 100%;

      padding: 1.5rem 0;

      display: block; 
  }

    li:hover .header-menu-hover {

      background: #dc0016;


      z-index: 3; }

    li:hover .header-menu-en, li:hover .header-menu-ch {
      z-index: 200; 
      color: #fff;
  }



#active .header-menu-hover {

  background: #dc0016;
  z-index: 3;
  color: #fff;
 }



#active .header-menu-en, #active .header-menu-ch {

  z-index: 100;
  color: #fff;
   }



.footer {

  background: url(../images/footerbg.jpg) no-repeat;

  background-size: 100% 100%;

  padding: 3rem 0;

  float: left; }

  .footer-logo {

    width: 20%;

    float: left;

    margin-top: 3rem; }

  .footer-message {

    width: 50%;

    float: left;
    text-align: center;

    color: #a0a0a0;

    font-size: 1.3rem;

    line-height: 2.5rem;

    margin-top: 2rem; }

    .footer-message img {

      max-width: 100%; }

  .footer-ma {

    width: 20%;

    float: right;

    margin-top: 1rem;

    max-width: 50%; }



.index-about {

  float: left;

  padding-top: 5rem;

  background: url("../images/index-about.png") no-repeat;

  background-size: 100% 100%; }

  .index-about-title, .index-product-title {

    text-align: center; }

    .index-about-title-ch, .index-product-title-ch {

      font-size: 2.6rem;

      color: #003b7d;

      font-weight: bold; }

    .index-about-title-en, .index-product-title-en {

      font-size: 2.6rem;

      color: #000; }

    .index-about-title-message, .index-product-title-message {

      color: #707070;

      font-size: 1.4rem;

      line-height: 3rem; 

      height: 6rem}

  .index-about-content {

    float: right;

    color: #707070;

    min-height: 20rem;

    font-size: 1.4rem;

    line-height: 3rem;

    margin-top: 3rem; }

  .index-about-but {

    width: 100%;

    float: right;

    margin: 3rem 0; }

    .index-about-but a {

      float: right;

      background: #dc0016;

      font-size: 1.2rem;

      padding: 1.2rem; }

  .index-about-footer {

    margin-top: 2rem;

    float: left;

    padding: 1rem 0;

    width: 100%;

    color: #fff;

    text-align: center; }

    .index-about-footer li {

      border-right: 1px solid #fff; }

    .index-about-footer li:nth-child(3) {

      border: none; }

    .index-about-footer li div {

      font-size: 2rem;

      font-weight: bold; }

      .index-about-footer-left{
        width: 50%;
        position: absolute;
        bottom: 0;
        left: 0;

      }

.index-product {

  float: left;

  padding-top: 5rem;

  background: url("../images/index-product.jpg") no-repeat;

  background-size: 100% 100%; }

  .index-product-title-message {

    line-height: 2.5rem; }

  .index-product-content {

    width: 100%;

    float: left;


    margin: 3rem 0; }

    .index-product-content-ul {

      width: 100%; }

      .index-product-content-ul-one:hover .index-product-content-ul-one-left img {

        transform: rotate(-30deg); }

      .index-product-content-ul-one {

        background: url("../images/cpbg.jpg");

        background-size: 100% 100%;

        padding-top: 4rem; }

        .index-product-content-ul-one-left {

          padding: 3rem; }

          .index-product-content-ul-one-left img {

            width: 100%;

            transition: 1s; }

        .index-product-content-ul-one-right {

          padding: 3rem 0 6rem 0;

          writing-mode: tb-rl;

          background: url("../images/footerlogo.png") no-repeat bottom right;

          background-size: 50%; }

          .index-product-content-ul-one-right-title {

            font-size: 2rem;

            font-weight: bold; }

          .index-product-content-ul-one-right-msg {

            font-size: 1.2rem;

            margin: 0 2rem; }

      .index-product-content-ul-two li {

        border: 1px solid #959595;

        padding-top: 3rem;

        height: 412px;

        padding-left: 2rem;

        padding-bottom: 12rem;

        position: relative;

        z-index: 0;

        background: #fff;

        transition: 1s; }

        .index-product-content-ul-two li a {

          transition: 1s; }

      .index-product-content-ul-two li:nth-child(2) {

        z-index: 2; }

      .index-product-content-ul-two li:nth-child(3) {

        z-index: 4; }

      .index-product-content-ul-two li:nth-child(4) {

        z-index: 6; }

        .index-product-content-ul-two li:nth-child(4) .index-product-content-ul-two-msg {

          margin-bottom: 2.5rem;

          margin-right: 5rem; }

      .index-product-content-ul-two li:hover {

        background-color: #be0315;

        color: #fff; }

        .index-product-content-ul-two li:hover a {

          color: #fff !important; }

      .index-product-content-ul-two li:hover .index-product-content-ul-two-title-hover {

        display: block; }

      .index-product-content-ul-two li:hover .index-product-content-ul-two-title-image {

        display: none; }

      .index-product-content-ul-two li:hover .index-product-content-ul-two-image {

        bottom: -3rem;

        right: -1.5rem; }

      .index-product-content-ul-two li:hover .index-product-content-ul-two-image1 {

        bottom: -0rem;

        right: -1.5rem; }

      .index-product-content-ul-two-title {

        float: left; }

        .index-product-content-ul-two-title-hover {

          display: none;

          transition: 0.5s; }

      .index-product-content-ul-two-msg {

        writing-mode: tb-rl;

        font-size: 1.2rem;

        margin-right: 2rem;

        margin-top: 4rem;

        float: right;

        margin-bottom: 5rem; }

      .index-product-content-ul-two-image {

        position: absolute;

        bottom: -1rem;

        right: -3rem;

        transition: 1s; }

        .index-product-content-ul-two-image img {

          z-index: 1; }

      .index-product-content-ul-two-image1 {

        position: absolute;

        bottom: -0rem;

        right: -3rem;

        transition: 1s; }

        .index-product-content-ul-two-image1 img {

          z-index: 1; }

  .index-product-button a {

    margin-top: 5rem;

    background-color: #003b7d;

    border-color: #003b7d;

    margin-bottom: 5rem;
    transition: 1s; 
  }


.index-product-button a:hover{
      background-color: #dc0016;
      border-color: #dc0016;
}



.index-video-title {

  width: 100%;

  padding: 4rem 0;

  background: url("../images/video-top.jpg") center;

  background-size: 100%;

  float: left;

  position: relative; }

  .index-video-title-image {

    position: absolute;

    top: 0; }

    .index-video-title-image img {

      width: 90%; }

  .index-video-title-msg {

    text-align: center;

    color: #fff;

    font-size: 2rem;

    line-height: 4rem;
 }

 .index-video-title-msg .title{    font-size: 2.6rem;
    color: #fff;
    font-weight: bold; }

.index-video-content {

  width: 100%;

  padding: 13rem 0 4rem 0;

  float: left;

  background: url("../images/video-bg.jpg") no-repeat;

  background-size: 100% 100%;

  text-align: right; }

  .index-video-content img {

    width: 50%;

    margin-right: 6%; }

@media (min-width: 1400px) {

  .index-video-content {

    padding: 9rem 0; } }

.index-news {

  margin-bottom: 5rem; }

  .index-news-one {

    background: url("../images/news-bg.jpg") no-repeat;

    background-size: 100% 100%; }

  .index-news-title {

    padding: 3rem 2rem; }

    .index-news-title-en {

      font-size: 3.4rem;

      color: #fff; }

    .index-news-title-ch {

      font-size: 3rem;

      color: #fff;

      font-weight: bold; }

  .index-news-content {

    padding: 2rem;

    color: #fff;

    font-size: 1.4rem; }

  .index-news-button {

    padding: 2rem; }

    .index-news-button a {

      display: block;

      color: #fff;

      width: 30px;

      height: 30px;

      border: 1px solid #fff;

      border-radius: 50%;

      line-height: 25px;

      text-align: center;

      font-size: 2rem; }


  .index-news li{margin: 10px 0;border: 2px solid #ddd}
  .index-news li:hover {

    background: #198d3b; }

  .index-news-box:hover .index-news-box-content-title {

    color: #fff; }

  .index-news-box:hover .index-news-box-content-msg {

    color: #fff; }

  .index-news-box:hover .index-news-box-bottom {

    color: #fff; }

    .index-news-box:hover .index-news-box-bottom a {

      color: #fff;

      border-bottom: 1px solid #fff; }

    .index-news-box:hover .index-news-box-bottom span {

      color: #fff; }

  .index-news li:hover .index-news-box-image-hover {

    background: rgba(0, 0, 0, 0.5); }

  .index-news li:hover .index-news-box-image-hover-box {

    opacity: 1;

    border-radius: 0;

    transform: translate(0, 0); }

    .index-news li:hover .index-news-box-image-hover-box img {

      transform: translate(0, 0); }

  .index-news-box {

    padding-bottom: 2rem;

    width: 100%; 
  }

    .index-news-box-image {

      position: relative; 
		overflow: hidden;
		height: 200px;
  }
      .index-news-box-image>img{    
      	min-height: 200px;
	    min-width: 100%;
	    max-width: 200%;
	    max-height: 200px;
}
      

      .index-news-box-image-hover {

        width: 100%;

        height: 100%;

        padding: 1rem;

        background: rgba(60, 199, 220, 0);

        overflow: hidden;

        transition: 1s;

        position: absolute;

        top: 0;

        left: 0; }

        .index-news-box-image-hover-box {

          width: 100%;

          height: 100%;

          z-index: 999;

          border: 1px solid #fff;

          text-align: center;

          padding-top: 15%;

          transition: 0.5s;

          border-radius: 40%;

          opacity: 0; }

          .index-news-box-image-hover-box img {

            transform: translate(0, 100px);

            transition: 0.8s; }
    .index-news-box-content {

      padding-left: 2rem;

      font-size: 1.4rem; }

      .index-news-box-content-title {

        padding: 2rem 0;

        font-weight: bold; }

      .index-news-box-content-msg 
  {

        color: #707070;

        overflow: hidden;

  }

    .index-news-box-bottom {

      padding-top: 1rem;

      padding-left: 2rem; }

      .index-news-box-bottom a {

        color: #ff0000;

        font-size: 1.2rem;

        padding: 1rem;

        border-bottom: 1px solid #f00; }

      .index-news-box-bottom span {

        float: right;

        line-height: 3rem; }



.about-siofu-title, .cps-title {

  background: url("../images/title.jpg") no-repeat;

  background-size: 100% 100%;

  margin: 2rem 0; }

  .about-siofu-title-sf, .cps-title-sf {

    width: 130px;

    background: #dc0016;

    color: #fff;

    font-weight: bold;

    font-size: 1.8rem;

    padding-top: 0.2rem;

    padding-bottom: 0.2rem;

    text-align: center; }

    .about-siofu-title-sf span, .cps-title-sf span {

      font-size: 1rem;

      padding-right: 0.5rem; }

.about-siofu-content {

  padding: 3rem; }

  .about-siofu-content li {

    overflow: hidden;


    margin-bottom: 3rem; }

  .about-siofu-content img {

    max-height: 450px; }

.about-siofu-ftitle-sf {

  font-size: 2rem;

  font-weight: bold; }

  .about-siofu-ftitle-sf span {

    font-size: 1rem;

    color: #f00;

    padding-right: 0.5rem; }

.about-siofu-msg {

  line-height: 3rem; }

  .about-siofu-msg h {

    font-weight: bold; }



.cp {

  margin: 3rem 0;
}

  .cp-menu {

    margin-top: 3rem; 
    padding: 0 10rem;
    background: #000;
    text-align: center;

}

    .cp-menu-ul li {

      text-align: center;

      padding-right: 2px; }

      .cp-menu-ul li a {

        display: block;

        line-height: 4rem;

        width: 100%;

        background: #000;

        padding: 0.2rem 5rem;

        transition: 1s;
        color: #fff;
        font-size: 18px;
}

 .cp-menu-ul li{display: inline-block;}

      .cp-menu-ul li a:hover {

        background: #dc0016; }
  .cp-menu-ul li a.active{background: #ff0000;color: #fff}
  .cp-content ul {

    margin: 0 -3.5%; 
  }
  .cp-content ul li a{
    display: block;
  
    margin: 3rem 10%;
  }
.con-contenttitle{line-height: 60px;background: #ddd;text-align: center;color: #000;transition: 1s;}

.cp-content ul li a:hover .con-contenttitle{line-height: 60px;background:rgba(220,0,22,0.8);text-align: center;color: #fff;transition: 1s;}
.cp-content ul li a:hover{box-shadow: 11px 1px 21px #d2cdcd;transition: 1s;}

  .cp-content-box {

    border: 3px solid #ddd;
}

    .cp-content-box-image {

   /*  padding: 7rem 0 4rem 0;*/

      text-align: center; 
      background: #fff;
    }

      .cp-content-box-image img {

        height: 375px; 
       	width: auto;
    }

    .cp-content-box-bottom {

      width: 100%;
      
      background: #ddd;

      float: left;

      text-align: center;

      color: #333; }

      .cp-content-box-bottom div {

        padding: 1rem 0; }

      .cp-content-box-bottom-but {

        background: #dc0016;

        color: #fff; }



.cp-gengduo{
	background: #f5f5f5;    
	padding: 1rem;
    margin-top: 3rem;
}

.content-image {

  padding-top: 6rem;

  padding-bottom: 8.4rem;

  background: url("../images/content-logo.jpg") no-repeat center top;

  background-size: 95%;

  text-align: center; }
  .content-image img{
  	height: 400px;
  }

.content-title{

background: #f5f5f5;
padding-left: 0;
}
.content-title span {

  display: block;

  background: url("../images/content-title.png") no-repeat ;

  background-size: 30% 100%;

  color: #fff;

  padding: 1rem; }

.content-msg {

padding-left: 0;
background: #f5f5f5;

  padding: 2rem 3rem;
min-height: 28rem;
  color: #666;

  line-height: 3rem; }



.cps-title {

  background: #fff;

  border-bottom: 1px solid #999; }

  .cps-title-sf {

    background: #fff;

    color: #000; }

    .cps-title-sf span {

      color: #dc0016; }



.news li {

  padding: 2rem; }

.news-box-image {

  position: relative;

  height: 185px;

  overflow: hidden; }

  .news-box-image-timer {

    width: 100%;

    background: rgba(0, 0, 0, 0.8);

    color: #fff;

    padding: 0.5rem 2rem;

    position: absolute;

    bottom: 0; }

    .news-box-image-timer div {

      padding-left: 3rem;

      background: url("../images/timer.png") no-repeat left;

      background-size: auto 100%; }

.news-box-title {

  font-weight: bold;

  line-height: 3rem; }

.news-box-msg {

  font-size: 1.4rem;

  color: #888; }

.news-content-title {

  text-align: center;

  font-weight: bold;

  border-bottom: 1px solid #ccc;

  padding-bottom: 3rem; }



.marketing {

  margin-top: 3rem; }

  .marketing-title {

    text-align: center;

    font-size: 2.6rem;

    font-weight: bold; }

  .marketing-keyword {

    color: #666;

    font-size: 1.8rem;

    width: 60%;

    margin-left: 20%;

    text-align: center;

    margin-top: 1rem;

    line-height: 3rem; }

  .marketing-image {

    text-align: center; }

  .marketing-content {

    color: #333;

    line-height: 3rem;

    margin-top: 2rem; }

  .marketing-national {

    margin-top: 3rem;

    margin-bottom: 3rem; }

    .marketing-national-title {

      text-align: center; }

      .marketing-national-title-en {

        font-size: 5rem;

        border-bottom: 2px solid #000;

        padding-bottom: 2.8rem;

        position: relative;

        z-index: 1; }

      .marketing-national-title-ch {

        margin-left: 37%;

        width: 26%;

        font-size: 2.8rem;

        position: relative;

        z-index: 10;

        background: #fff; }

/*  .marketing-ul {

    margin-bottom: 5rem; }*/

    .marketing-ul li {

      padding-bottom: 2rem;

      text-align: center;

      height: 260px;

      overflow: hidden;

    border: 5px solid #fff; }


.client{
	background: url(../images/service-bg.png) no-repeat center;
	background-size:100%;
	padding-bottom: 3rem;

}
.client-title {

  font-size: 2.4rem;

  font-weight: bold;

  padding-bottom: 1rem;

  padding-top: 1rem;

  border-bottom: 1px solid #c50114;

  color: #c50114;

  text-align: center; }

.client-box, .client-box1, .client-box2 {

  height: 20rem;

  margin: 2rem;

  padding-top: 2rem;

  padding-bottom: 2rem;

  text-align: center;

  background: #003b7d;

  color: #fff;

  line-height: 3rem; }

  .client-box-title, .client-box1-title, .client-box2-title {

    font-weight: bold;

    font-size: 2rem;

    padding: 1rem 0; }

.client-box1 {

  background: #000; }

  .client-box1-msg {

    margin: 0 auto;
}

.client-box2 {

  background: #dc0016; }

  .client-box2-msg {

    font-size: 2.4rem; }

.client-input {

padding: 0;

  float: left;

  background: url("../images/client-bg.png") no-repeat;

  background-size: 100%;

  font-size: 1.4rem; }

  .client-input-box {

    width: 44%;

    padding: 1rem;

    background: rgba(0, 0, 0, 0.7); }

    .client-input-box input {

      width: 47%;

      margin-left: 1%;

      margin-right: 1%;

      padding: 0.3rem 1rem;

      margin-top: 0.5rem;

      background: none;

      border: 1px solid #bbb;

      color: #fff; }

    .client-input-box textarea {

      width: 97%;

      margin: 1rem 1%;

      background: none;

      border: 1px solid #e5e5e5;

      color: #fff;

      padding: 0.3rem 1rem;

      resize: none;

      height: 15rem; }

    .client-input-box button {

      width: 97%;

      margin: 0.5rem 1%;

      padding: 0.3rem 1rem;

      resize: none; }

    .client-input-box-msg {

      line-height: 3rem;

      font-weight: bold;

      color: #fff; }

      .client-input-box-msg span {

        font-weight: 100;

        font-size: 1.2rem;

        color: #a5a5a5; }



@media (max-width: 1400px) {

  #textarea {

    height: 10rem; } }

.scientific-image {

  text-align: center; }

.scientific-bottom {

  margin-top: 3rem;

  margin-bottom: 10rem;

  float: left; }

  .scientific-bottom-title {

    font-weight: bold;

    color: #df0023;

    text-align: center;

    font-size: 16px;

    margin-top: 3rem; }

  .scientific-bottom li {

    margin-right: 3rem;

    float: left; }

  .scientific-bottom-box {

    margin-top: 3rem;

    margin-left: 3rem; }

    .scientific-bottom-box div {

      float: left;

      margin-left: 1rem;

      font-size: 1.4rem;

      line-height: 2rem; }



.scientific-nav {

  font-size: 1.4rem;

  background: #c50114;

  padding: 1rem;

  color: #fff;

  margin-bottom: 2rem; }

  .scientific-nav a {

    color: #fff; }



body {

  font-size: 14px;

  font-family: "Microsoft YaHei"; }



ul {

  margin: 0;

  padding: 0; }



ul li {

  list-style: none; }



.phone-bg {

  background: url("../images/phone-index-bg.png") no-repeat;

  background-size: 100%; }



.index-top {

  background: #000;

  background-size: auto 100%;

  position: relative; }



.index-top i {

  position: absolute;

  top: 15px;

  right: 20px;

  color: #dc0016;

  font-size: 1.8rem; }



.am-margin-top-md {

  margin-top: 2rem; }



.am-offcanvas-bar {

  width: 200px; }



.am-offcanvas-content {

  padding: 5px 0; }



.am-offcanvas-content ul li a {

  display: block;

  line-height: 40px; }



.am-offcanvas-content ul li a.active, .am-offcanvas-content ul li a:hover {

  background: #222; }



.index-two {

  padding: 20px 30px; }



.index-two ul li {

  margin: 10px 0; }



.index-two ul li a {

  color: #000;

  display: block; }



.index-two ul li a .img {

  width: 70%; }



.index-two-border {

  height: 10px;

  background: #ececec; }



.footer {

  background: #051121;

  border-top: 4px solid #b40010; }



.in-message li {

  background: #000;

  padding: 1rem 0;

  border-right: 2px solid #e9be07; }

  .in-message li div {

    color: #e9be07; }

  .in-message li span {

    color: #fff;

    font-size: 1.6rem;

    font-weight: bold; }

.in-message li:nth-child(3) {

  border-right: none; }



.phone-product-title {

  text-align: center;

  font-size: 1.4rem; }

  .phone-product-title div {

    font-size: 3rem;

    font-weight: bold; }



.phone-product-content {

  margin-top: 3rem; }



.phone-product-content-box-title {

  padding-top: 2rem;

  font-size: 1.8rem;

  font-weight: bold; }



.phone-product-content-box {

  line-height: 2.5rem; }



.phone-product-but button {

  width: 80%;

  padding: 0.5rem 0;

  background: #003b7d;

  margin: 2rem 10%;

  border-radius: 5px; }



/*# sourceMappingURL=app.css.map */

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

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.htmleaf-header{
  padding: 1em 190px 1em;
  letter-spacing: -1px;
  text-align: center;
  background: #66677c;
}
.htmleaf-header h1 {
  color: #D5D6E2;
  font-weight: 600;
  font-size: 2em;
  line-height: 1;
  margin-bottom: 0;
  font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
.htmleaf-header h1 span {
  display: block;
  font-size: 60%;
  font-weight: 400;
  padding: 0.8em 0 0.5em 0;
  color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #fff;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 1.5em;
  text-align: center;
}

.htmleaf-links::after {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #dbdbdb;
  content: '';
  -webkit-transform: rotate3d(0,0,1,22.5deg);
  transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
  display: inline-block;
  margin: 0.5em;
  padding: 0em 0;
  width: 1.5em;
  text-decoration: none;
}

.htmleaf-icon span {
  display: none;
}

.htmleaf-icon:before {
  margin: 0 5px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: 'icomoon';
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.htmleaf-container{
  margin: 0 auto;
}

.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Icons */
.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  fill: currentColor;
}

.message-mobile {
  font-size: 0.85em;
  display: none;
  width: 100%;
  padding: 0.5em;
  text-align: center;
  background: #ff3d53;
}


/* Content */
.content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 0 1em;
}

.content:not(:first-child) {
  padding: 4em 0;
}

.content.content--padded {
  padding: 4em 0 8em;
}

.content__title {
  font-size: 0.85em;
  position: absolute;
  top: 18%;
  left: 2em;
  width: 5em;
  margin: 0.75em 0;
  color: #b0adad;
}

/* Grid */
.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 100%;
}

.grid__item {
  position: relative;
  display: block;
  flex: none;
  width: 30%;
  margin: 1em 1.2rem;
  cursor: default;
  transform-style: preserve-3d;
}

.grid__item:hover,
.grid__item:focus {
  outline: none;
}

.grid__item--c1,
.grid__item--c1:hover,
.grid__item--c1:focus {
  color: #52649e;
}

.grid__item--c2,
.grid__item--c2:hover,
.grid__item--c2:focus {
  color: #666;
}

.grid__item--c3,
.grid__item--c3:hover,
.grid__item--c3:focus {
  color: #f7f295;
}

.stack {
  position: relative;
  width: 100%;
  height: 200px;
  transform-style: preserve-3d;
}

.stack__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  transform-origin: 50% 100%;
}

.stack__deco:first-child {
  opacity: 0.2;
}

.stack__deco:nth-child(2) {
  opacity: 0.4;
}

.stack__deco:nth-child(3) {
  opacity: 0.6;
}

.stack__deco:nth-child(4) {
  opacity: 0.8;
}

.stack__figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-origin: 50% 100%;
}

.stack__img {
  position: relative;
  display: block;
  flex: none;
}

.grid__item-caption {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  transform-style: preserve-3d;
}

.grid__item-title {
  font-size: 1.15em;
  width: 100%;
  margin: 1em 0;
  text-align: left;
  color: #000;
}

.column {
  width: 100%;
  opacity: 0;
}
.column--right {
  text-align: left;
}

.column__text {
  font-size: 14px;
  display: block;
  color: #888;
}

.column--right .column__text {
  color: #b0adad;
}

/* Individual effects */

/* Vega */
.grid--effect-vega .column {
  opacity: 1;
}

/* Castor */
.grid--effect-castor .stack__figure,
.grid--effect-castor .stack__deco {
  transform-origin: 50% 50%;
}

.grid--effect-castor .column {
  opacity: 1;
}

/* Hamal */
.grid--effect-hamal {
  perspective: none;
}

.grid--effect-hamal .column {
  opacity: 1;
}

/* polaris */
.grid--effect-polaris {
  perspective-origin: 100% -100%;
}

.grid--effect-polaris .column {
  opacity: 1;
}

/* Alphard */
.grid--effect-alphard {
  perspective: none;
}

.grid--effect-alphard .column {
  opacity: 1;
}

.grid--effect-alphard .stack__figure,
.grid--effect-alphard .stack__deco {
  transform-origin: 50% 150%;
}

/* Altair */
.grid--effect-altair {
  perspective-origin: 50% -50%;
}

.grid--effect-altair .column {
  opacity: 1;
}

.grid--effect-altair .stack__figure,
.grid--effect-altair .stack__deco {
  transform-origin: 50% 100%;
}

/* rigel */
.grid--effect-rigel {
  perspective-origin: 50% 100%;
}

.grid--effect-rigel .column {
  opacity: 1;
}

/* Canopus */
.grid--effect-canopus {
  perspective-origin: 50% 0%;
}

.grid--effect-canopus .column {
  opacity: 1;
}

.grid--effect-canopus .stack__figure,
.grid--effect-canopus .stack__deco {
  transform-origin: 50% 100%;
}

/* pollux */
.grid--effect-pollux {
  perspective: 1000px;
  perspective-origin: 50% -70%;
}

.grid--effect-pollux .column {
  opacity: 1;
}

.grid--effect-pollux .stack__figure,
.grid--effect-pollux .stack__deco {
  transform-origin: 50% 50%;
}

.grid--effect-pollux .grid__item-caption > .grid__item-title {
  transform-origin: 50% -200%;
}

/* deneb */
.grid--effect-deneb {
  perspective: none;
}

.grid--effect-deneb .stack__figure,
.grid--effect-deneb .stack__deco {
  transform-origin: 50% 50%;
}

.grid--effect-deneb .grid__item-caption > .column {
  transform-origin: 50% -200%;
}

/* Related demos */
.content.content--related {
  font-weight: bold;
  justify-content: center;
  min-height: 0;
  padding-bottom: 10em;
  text-align: center;
  background: #5d5d66;
}

.content--related a {
  color: #b0adad;
}

.content--related a:hover,
.content--related a:focus {
  color: #fff;
}

.content--related p:first-child {
  padding: 6em 0 2em;
}

.content--related p {
  width: 100%;
  color: #37373e;
}

.media-item {
  font-size: 0.85em;
  display: inline-block;
  padding: 1em 2vw;
  vertical-align: top;
  transition: color 0.3s;
}

.media-item__img {
  max-width: 100%;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
  opacity: 1;
}

.media-item__title {
  font-size: 1em;
  margin: 0;
  padding: 0.5em;
}

/****/
.related {
  color: #fff;
  background: transparent;
  text-align: center;
  font-size: 1.25em;
  padding: 0.5em 0;
  overflow: hidden;
}

.related > a {
  vertical-align: top;
  width: calc(100% - 20px);
  max-width: 340px;
  display: inline-block;
  text-align: center;
  margin: 20px 10px;
  padding: 25px;
  font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.related a {
  display: inline-block;
  text-align: left;
  margin: 20px auto;
  padding: 10px 20px;
  opacity: 0.8;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
  opacity: 1;
}

.related a img {
  max-width: 100%;
  opacity: 0.8;
  border-radius: 4px;
}
.related a:hover img,
.related a:active img {
  opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}
.related a h3 {
  font-size: 0.85em;
  font-weight: 300;
  margin-top: 0.15em;
  color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
  content: "\e5000";
}

.icon-htmleaf-arrow-forward-outline:before {
  content: "\e5001";
}

@media screen and (max-width: 42em) {
  .codrops-header {
    display: block;
    text-align: center;
  }
  .github {
    width: 100%;
    margin: 0;
    padding: 0.5em 0;
  }
  .message-mobile {
    display: block;
  }
}