/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  color: #5a5a5a;
  font-family:'KlavikaLight', 'Lucida Sans Unicode','Microsoft YaHei', sans-serif;
  background:#f5f5f5;
  margin-top:111px;
}
h1,h2,h3
{
    font-family:Microsoft YaHei UI; 
    }
a{color:rgb(21, 112, 166);}

.orange{color:#cc5e1e}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  z-index: 20;
  height:111px;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0;
  position:relative;
}
.navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px;
}
/*Headroom.js
----------------------------------------------------*/
.header--fixed {
position: fixed;
z-index: 20;
right: 0;
left: 0;
top: 0;
}
.animated {
	-webkit-animation-duration:.5s;
	-moz-animation-duration:.5s;
	-o-animation-duration:.5s;
	animation-duration:.5s;
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both
}
@-webkit-keyframes slideDown {
	0% {
	-webkit-transform:translateY(-4em)
}
100% {
	-webkit-transform:translateY(0)
}
}@-moz-keyframes slideDown {
	0% {
	-moz-transform:translateY(-4em)
}
100% {
	-moz-transform:translateY(0)
}
}@-o-keyframes slideDown {
	0% {
	-o-transform:translateY(-4em)
}
100% {
	-o-transform:translateY(0)
}
}@keyframes slideDown {
	0% {
	transform:translateY(-4em)
}
100% {
	transform:translateY(0)
}
}.animated.slideDown {
	-webkit-animation-name:slideDown;
	-moz-animation-name:slideDown;
	-o-animation-name:slideDown;
	animation-name:slideDown
}
@-webkit-keyframes slideUp {
	0% {
	-webkit-transform:translateY(0)
}
100% {
	-webkit-transform:translateY(-4em)
}
}@-moz-keyframes slideUp {
	0% {
	-moz-transform:translateY(0)
}
100% {
	-moz-transform:translateY(-4em)
}
}@-o-keyframes slideUp {
	0% {
	-o-transform:translateY(0)
}
100% {
	-o-transform:translateY(-4em)
}
}@keyframes slideUp {
	0% {
	transform:translateY(0)
}
100% {
	transform:translateY(-4em)
}
}.animated.slideUp {
	-webkit-animation-name:slideUp;
	-moz-animation-name:slideUp;
	-o-animation-name:slideUp;
	animation-name:slideUp
}
@-webkit-keyframes swingInX {
	0% {
	-webkit-transform:perspective(400px) rotateX(-90deg)
}
100% {
	-webkit-transform:perspective(400px) rotateX(0deg)
}
}@-moz-keyframes swingInX {
	0% {
	-moz-transform:perspective(400px) rotateX(-90deg)
}
100% {
	-moz-transform:perspective(400px) rotateX(0deg)
}
}@-o-keyframes swingInX {
	0% {
	-o-transform:perspective(400px) rotateX(-90deg)
}
100% {
	-o-transform:perspective(400px) rotateX(0deg)
}
}@keyframes swingInX {
	0% {
	transform:perspective(400px) rotateX(-90deg)
}
100% {
	transform:perspective(400px) rotateX(0deg)
}
}.animated.swingInX {
	-webkit-transform-origin:top;
	-moz-transform-origin:top;
	-ie-transform-origin:top;
	-o-transform-origin:top;
	transform-origin:top;
	-webkit-backface-visibility:visible!important;
	-webkit-animation-name:swingInX;
	-moz-backface-visibility:visible!important;
	-moz-animation-name:swingInX;
	-o-backface-visibility:visible!important;
	-o-animation-name:swingInX;
	backface-visibility:visible!important;
	animation-name:swingInX
}
@-webkit-keyframes swingOutX {
	0% {
	-webkit-transform:perspective(400px) rotateX(0deg)
}
100% {
	-webkit-transform:perspective(400px) rotateX(-90deg)
}
}@-moz-keyframes swingOutX {
	0% {
	-moz-transform:perspective(400px) rotateX(0deg)
}
100% {
	-moz-transform:perspective(400px) rotateX(-90deg)
}
}@-o-keyframes swingOutX {
	0% {
	-o-transform:perspective(400px) rotateX(0deg)
}
100% {
	-o-transform:perspective(400px) rotateX(-90deg)
}
}@keyframes swingOutX {
	0% {
	transform:perspective(400px) rotateX(0deg)
}
100% {
	transform:perspective(400px) rotateX(-90deg)
}
}.animated.swingOutX {
	-webkit-transform-origin:top;
	-webkit-animation-name:swingOutX;
	-webkit-backface-visibility:visible!important;
	-moz-animation-name:swingOutX;
	-moz-backface-visibility:visible!important;
	-o-animation-name:swingOutX;
	-o-backface-visibility:visible!important;
	animation-name:swingOutX;
	backface-visibility:visible!important
}
@-webkit-keyframes flipInX {
	0% {
	-webkit-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
100% {
	-webkit-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
}@-moz-keyframes flipInX {
	0% {
	-moz-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
100% {
	-moz-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
}@-o-keyframes flipInX {
	0% {
	-o-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
100% {
	-o-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
}@keyframes flipInX {
	0% {
	transform:perspective(400px) rotateX(90deg);
	opacity:0
}
100% {
	transform:perspective(400px) rotateX(0deg);
	opacity:1
}
}.animated.flipInX {
	-webkit-backface-visibility:visible!important;
	-webkit-animation-name:flipInX;
	-moz-backface-visibility:visible!important;
	-moz-animation-name:flipInX;
	-o-backface-visibility:visible!important;
	-o-animation-name:flipInX;
	backface-visibility:visible!important;
	animation-name:flipInX
}
@-webkit-keyframes flipOutX {
	0% {
	-webkit-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
100% {
	-webkit-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
}@-moz-keyframes flipOutX {
	0% {
	-moz-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
100% {
	-moz-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
}@-o-keyframes flipOutX {
	0% {
	-o-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
100% {
	-o-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
}@keyframes flipOutX {
	0% {
	transform:perspective(400px) rotateX(0deg);
	opacity:1
}
100% {
	transform:perspective(400px) rotateX(90deg);
	opacity:0
}
}.animated.flipOutX {
	-webkit-animation-name:flipOutX;
	-webkit-backface-visibility:visible!important;
	-moz-animation-name:flipOutX;
	-moz-backface-visibility:visible!important;
	-o-animation-name:flipOutX;
	-o-backface-visibility:visible!important;
	animation-name:flipOutX;
	backface-visibility:visible!important
}
@-webkit-keyframes bounceInDown {
	0% {
	opacity:0;
	-webkit-transform:translateY(-200px)
}
60% {
	opacity:1;
	-webkit-transform:translateY(30px)
}
80% {
	-webkit-transform:translateY(-10px)
}
100% {
	-webkit-transform:translateY(0)
}
}@-moz-keyframes bounceInDown {
	0% {
	opacity:0;
	-moz-transform:translateY(-200px)
}
60% {
	opacity:1;
	-moz-transform:translateY(30px)
}
80% {
	-moz-transform:translateY(-10px)
}
100% {
	-moz-transform:translateY(0)
}
}@-o-keyframes bounceInDown {
	0% {
	opacity:0;
	-o-transform:translateY(-200px)
}
60% {
	opacity:1;
	-o-transform:translateY(30px)
}
80% {
	-o-transform:translateY(-10px)
}
100% {
	-o-transform:translateY(0)
}
}@keyframes bounceInDown {
	0% {
	opacity:0;
	transform:translateY(-200px)
}
60% {
	opacity:1;
	transform:translateY(30px)
}
80% {
	transform:translateY(-10px)
}
100% {
	transform:translateY(0)
}
}.animated.bounceInDown {
	-webkit-animation-name:bounceInDown;
	-moz-animation-name:bounceInDown;
	-o-animation-name:bounceInDown;
	animation-name:bounceInDown
}
@-webkit-keyframes bounceOutUp {
	0% {
	-webkit-transform:translateY(0)
}
30% {
	opacity:1;
	-webkit-transform:translateY(20px)
}
100% {
	opacity:0;
	-webkit-transform:translateY(-200px)
}
}@-moz-keyframes bounceOutUp {
	0% {
	-moz-transform:translateY(0)
}
30% {
	opacity:1;
	-moz-transform:translateY(20px)
}
100% {
	opacity:0;
	-moz-transform:translateY(-200px)
}
}@-o-keyframes bounceOutUp {
	0% {
	-o-transform:translateY(0)
}
30% {
	opacity:1;
	-o-transform:translateY(20px)
}
100% {
	opacity:0;
	-o-transform:translateY(-200px)
}
}@keyframes bounceOutUp {
	0% {
	transform:translateY(0)
}
30% {
	opacity:1;
	transform:translateY(20px)
}
100% {
	opacity:0;
	transform:translateY(-200px)
}
}.animated.bounceOutUp {
	-webkit-animation-name:bounceOutUp;
	-moz-animation-name:bounceOutUp;
	-o-animation-name:bounceOutUp;
	animation-name:bounceOutUp
}

.headroom--not-top .navbar-wrapper .navbar
{
     background:#292f36;
     color:#fff;
     border-bottom:1px solid #292f36;
     
    }
.headroom--not-top .topbar,.headroom--not-top .topbar a
{
    background:#000;
    border-bottom:1px solid #292f36;
    color:#ccc;
    }
.headroom--not-top .navbar-nav a,.headroom--not-top .navbar-nav .active  a,.headroom--not-top .navbar-nav .open a
{
    background:none!important;
    color:#fff!important;
    }
 .navbar-nav .open .dropdown-menu a
{
    color:#666!important;
    }
.headroom--not-top .navbar-brand {
background: url(images/logo-fff.png) left 28px no-repeat;
width: 265px;
height: 60px;
margin: 10px 0;
}
.headroom--not-top .navbar-nav
{
    padding-top:25px;
    }
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 400px;
  margin-bottom: 10px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 400px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 400px;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
  padding-left: 15px;
  padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  text-align: center;
  margin-bottom: 20px;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-left: 10px;
  margin-right: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 20px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}



/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 0;
padding-left: 15px;}

.navbar-brand
{
    background:url(images/logo.png) left center no-repeat;
    width:265px;
    height:60px;
    margin:10px 0;
    }
  /* Remove the edge padding needed for mobile */
  .marketing {
    padding-left: 0;
    padding-right: 0;
  }
.topbar
  {
      height:30px;
      line-height:30px;
      border-bottom:1px solid #eee;
      color:#666;
      }
.topbar a{ color:#666;}

  .marketing .products-home
  {
      background:#fff;
      text-align:center;
      padding:10px;
      border:1px solid #f2f2f2;
      border-top-width:3px;      
      }

  .marketing  .product-info
  {
       margin:0 20px;
       text-align:left;
       text-indent:24px;
       margin-bottom:10px;
       color:#666;
      }
    .marketing .products-home b
  {
      margin-left:40px;
      display:block;
      font-size:16px;
      text-align:left;
      line-height:1.5;
      font-weight:normal;
      color:#222;
      
      }
  .marketing  .product-link
  {
       text-align:left;
       margin-left:40px;
       margin-top:10px;
      }
  .products-home h2
  {
       font-size:12px;
      }
  .YiDRP-con
  {
      background: #fff; 
      border: 1px solid #f2f2f2; 
      top-border-with: 3px;
       margin-left: 0;
      }
  .YiDRP-icons
  {
      padding-top:15px;
      padding-right:15px;
      }
  .YiDRP-icons .row
  {
      margin-bottom:10px;
      }
  .YiDRP-icon
  {
      height:93px; 
      line-height:93px; 
      font-size:45px; 
      color:#666; 
      background:#f9f9f9; 
      text-align:center;
  }
  .YiDRP-icon:hover
  {
      background:#428bca;
      color:#fff;
      }
   .YiDRP-icon-title
   {
       line-height:2;
       text-align:center;
       }
   .YiDrp-Sign
   {
       height:440px;
       overflow:hidden;
       padding:160px 50px 10px 30px;
       background:url(images/yidrp-home.jpg) left top no-repeat;
       }
 .YiHOST-con
 {
      background :#6a5a8c;
     }
 .YiHOST-col
 {
    
     margin:20px 0;
     }
 .YiHOST-slider
 {
     background: #563d7c; 
     }
 .YiHOST-slider img
 {
     margin:20px 0;
     }
 .YiHOST-text
 {
     color:#fff;
     padding-right:30px;
     padding-top:10px;
     }
  /* Navbar positioning foo */
  .navbar-wrapper {
  }
  .navbar-wrapper .container {
    padding-left:  15px;
    padding-right: 15px;
    
  }
  .navbar-wrapper .navbar {
    padding-left:  0;
    padding-right: 0;
    background: #fff;
   border: none;
   border-radius: 0;
   border-bottom:1px solid #f5f5f5;
  }
  .navbar-nav
  {
      float:right;
      color:#444;
      padding-top:20px;
      }
  .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus
  {
      background:#f5f5f5;
      }
.nav > li > a
{
    min-width:120px;
     text-align:center;
     font-size:16px;
     color:#444!important;
    }
.navbar-nav > .active > a
  {
      background-color:#fff!important;
      color:#444!important;
      font-weight:bold!important;
      }
  /* The navbar becomes detached from the top, so we round the corners
  .navbar-wrapper .navbar {
    border-radius: 4px;
  } */

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

}
/*Footer*/
.Footer-con
{
    background:#eee;
    padding-top:20px;
    }
.Footer-col
{
    padding-bottom:30px;
    }
.HomeContact
{
    margin-top:30px;
    }
.HomeContact strong 
{
font-size: 1.1em;
color: #222;
background: url(images/meetus.png) left center no-repeat;
padding: 5px 0 5px 30px;
}
.HomeContact span {
font-size: 0.9em;
color: #666;
}
.HomeContact b {
display: block;
line-height: 2;
color: #cc5e1e;
font-size: 1.2em;
}
.HomeContact i {
font-size: 0.9em;
color: #666;
font-style: normal;
display: block;
}
.HomeContact .qq {
font-size: 16px;
background: url(images/im.png) -3px center no-repeat;
padding-left: 30px;
}
.Footer-Weixin
{
    padding-top:30px;
    text-align:center;
    line-height:1.5;
    }
 
 /*²úÆ·-YiCPS
---------------------------------------*/
 .YiCPS-Banner
 {
     height: 460px;
     padding: 121px 0 0 0;
     background:url(images/back-pic/bg-pricing-banner.jpg);
     text-align:center;
     
 }
 .YiTRS-Banner
 {
     height: 460px;
     padding: 121px 0 0 0;
     background:url(images/back-pic/bg-features-banner.jpg);
     text-align:center;
     margin-bottom:0;
 }
 .YiTRS-Tipcon
 {
     background:#fff;
     padding:30px 0;
     }
  .YiTRS-Tipcon h3, .YiTRS-Tipcon p,  .YiTRS-Tipcon h2
  {
      text-align:center;
      }
  .YiTRS-Tipcondark
 {
     background:#f9f9f9; 
     }
  .YiTRS-Tipcondark h2,.YiTRS-Tipcondark p
  {
      text-align:center;
      }
 .YiTRS-Banner .container h1 span
 {
     color:#cc5e1e;
     }
 .YiTRS-Tipcon h3
 {
     text-align:center;
     }
.YiTRS-Tips
{
    height:120px;
    line-height:120px;
    font-size:50px;
    text-align:center;
    border:1px solid #f2f2f2;
    background:#f9f9f9;
    }
}
 
 
 
 
@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

@media (max-width: 768px) 
{
    body
    {
        margin-top:50px;
        }
    .navbar-brand
{
    background:url(images/logo-min.png) left center no-repeat;
    width:200px;
    height:35px;
    margin-top:10px;
    }
    
     .topbar
     {
         display:none;
         }
         
    
    }