﻿@import "font.css";
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/*.topBar{
  width: 100%;
}*/
@media (max-width:576px) and (min-width: 320px) {
  .topBar {
    display: none!important;
  }
}


@media (min-width: 768px) {
  .topBar {
    width: 100%;
    display: block;
  }
}

@media (min-width:1200px) and (min-width: 992px) {
  .topBar {
    width: 100%;
    display: block;
  }
}


.banner-module{
  left:0;
  right:0;
  top:200px;
  z-index: 10;
}
@media (max-width:576px) and (min-width: 320px) {
	.banner-module{top:30px!important;}
	.banner-module h1{
		font-size:1.25rem!important;
		}
	}
@media (min-width: 576px) {
  .banner-module {
    left:0;
    right:0;
    top:50px;
    z-index: 10;
  }
  .banner-module h1{
	 font-size:1.5rem;
	  }
}

@media (min-width: 768px) {
  .banner-module {
    left:0;
    right:0;
    top:100px;
    z-index: 10;
  }
    .banner-module h1{
	 font-size:2.5rem;
	  }
}

@media (min-width: 992px) {
  .banner-module {
    left:0;
    right:0;
    top:200px;
    z-index: 10;
  }
    .banner-module h1{
	 font-size:3rem;
	  }

}

@media (min-width: 1200px) {
  .banner-module {
    width: 100%;
    display: block;
  }
}
.screen_02bg{
  background-image: url('/images/join/screen_2_bg.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-background-size: cover;
  background-size: cover;
}
.employees{height: 500px}
.employees .carousel-inner {
/*  width: 845px;
  overflow: hidden;
  top: 120px;
  left: 25%;
  position: absolute;
*/}

.employees .carousel-inner .imgBox {
  width: 350px;
  display: inline;
/*  position: relative;
  left: 10%;*/
  float: left;
  margin-left: 120px;
}

.employees .carousel-inner .text {
  width: 480px;
//  text-align: center;
//  text-indent: 2rem;
  font: 14px/1.8 "Microsoft YaHei", simSun, Arial;
  color: #000;
  display: inline;
  float: right;
  margin-right: 120px;
}
.employees .carousel-inner h4 {
  font-size: 20px;
  font-weight: bold;
  line-height: 26px;
  margin-bottom: 15px;
}

.employees .carousel-inner .tip {
  color: #c1c1c1;
  margin-bottom: 15px;
  line-height: 16px;
  height: 16px;
  overflow: hidden;
}

.employees .carousel-inner .tip span {
  padding: 0 10px;
  border-right: 1px solid #c1c1c1;
  line-height: 16px;
}

.employees .carousel-inner .tip .last {
  border-right: none;
}

.employees .carousel-inner .tabCon .active {
  display: none;
  height: 500px;
}

.employees .carousel-inner .tabCon .active {
  display: block;
}

.employees .carousel-indicators {
  width: 300px;
  height: 45px;
  overflow: hidden;
  position: absolute;
  left: inherit;
  top: 300px;
  right: 120px;
//  display: inherit;
//  text-align: center;
  border-top: 1px dotted #484848;
  *padding-left: 35px;
  *width: 180px;
}

.employees .carousel-indicators li {
  display: inline-block;
  *display: inline;
  *float: left;
  width: 12px;
  height: 12px;
  text-indent: -9999px;
  border: none;
  margin: 25px 3px 0;
  background: url(http://img01.com4loves.com/com4loves/img/images/tab.png?v=20150827) no-repeat 0 -24px;
  _background: url(http://img01.com4loves.com/com4loves/img/images/tab_ie6.png) no-repeat 0 -24px;
  _overflow: hidden;
}

.employees .carousel-indicators li.active, .employees .carousel-indicators a:hover {
  background-position: 0 -36px;
}

.employees .carousel-inner strong {
  font-weight: bold;
  color: #b5101b;
}

@media (max-width: 320px) {
	.employees{height:600px;}
	.employees .carousel-inner .imgBox {
		margin-left:0;
		/*margin:2% auto;*/
		display:inherit;
  		float:none;
	}
	.employees .carousel-inner .text{
		width:99%;
		margin-right:inherit;
		float:inherit;
		}
	.employees .carousel-indicators{
		/*width:auto!important;*/
		top:inherit!important;
		height: 45px;
		right:inherit;
		margin:auto 0;
		}
		.employees .carousel-inner h4{text-align:center}
	}
@media (max-width:735px) and (min-width: 325px) {
	.employees .carousel-inner .imgBox {
		margin-left:inherit;
	margin: auto 30px;
	display:inherit;
	float:none;
	}
	.employees .carousel-inner .text{
	width:99%;
	margin-right:inherit;
	margin-right: 0;
	}
	.employees .carousel-indicators{
		top:inherit;
		right:inherit;
		}
	.employees .carousel-inner h4{text-align:center}
	}	
@media (min-width: 992px) {
  .employees .carousel-inner .imgBox{
	width:340px!important;
  }
  .employees .carousel-inner .text {
    width: 350px!important;
  }
}
@media (min-width: 1200px) {
  .employees .carousel-inner .imgBox{
	width:350px!important;
  }
  .employees .carousel-inner .text {
    width: 480px!important;
  }
}

.carousel-control-prev-icon,.carousel-control-next-icon {
  background-color: red;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  border-radius: 50%;
}

.toppic-bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-v {
  position: relative;
}

.slide-vz {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 50;
  -moz-box-shadow: inset 0 0 200px #212529;
  -webkit-box-shadow: inset 0 0 200px #212529;
  box-shadow: inset 0 0 200px #212529;
  z-index: 2;
  top: 0;
}

/*video*/

video {
  display: inline-block;
  position: static;
}

video#bgvid {
  width: 100%;
  max-width: 100%;
  height: auto;
  z-index: -100;
}

a.tdjl {
  display: block;
  width: 270px;
  line-height: 59px;
  margin: 50px auto 0;
  background: url(http://img01.com4loves.com/com4loves/img/images/td.png) no-repeat 0 -60px;
  left: 0;
  right: 0;
  z-index: 5;
  text-indent: -9999px;
}

a:hover.tdjl {
  background: url(http://img01.com4loves.com/com4loves/img/images/td.png) no-repeat 0 0px;
}
@media (max-width:320px){
	a.tdjl{margin:10px auto 0;}
	}
.add-us {
  padding: 50px 0px 0px 0px;
}

.add-us .row {
  margin-left: 0;
  margin-right: 0;
}

.add-us .row a {
  display: block;
  position: relative;
  overflow: hidden;
  height: 20rem;
}

.add-us .row a:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.add-us .row .img {
  text-align: center;
  height: 100%;
  width: 100%;
}

.add-us .row .img img {
  height: 100%;
  width: auto;
  -webkit-transition: .2s;
  transition: .2s;
}

.add-us .row .text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 15px;
  background: rgba(0, 0, 0, 0.5);
}

.add-us .row .text p {
  font-size: 14px;
  color: #e2e2e2;
}

.add-us .row .col-xs-1,
.add-us .row .col-sm-1,
.add-us .row .col-md-1,
.add-us .row .col-lg-1,
.add-us .row .col-xs-2,
.add-us .row .col-sm-2,
.add-us .row .col-md-2,
.add-us .row .col-lg-2,
.add-us .row .col-xs-3,
.add-us .row .col-sm-3,
.add-us .row .col-md-3,
.add-us .row .col-lg-3,
.add-us .row .col-xs-4,
.add-us .row .col-sm-4,
.add-us .row .col-md-4,
.add-us .row .col-lg-4,
.add-us .row .col-xs-5,
.add-us .row .col-sm-5,
.add-us .row .col-md-5,
.add-us .row .col-lg-5,
.add-us .row .col-xs-6,
.add-us .row .col-sm-6,
.add-us .row .col-md-6,
.add-us .row .col-lg-6,
.add-us .row .col-xs-7,
.add-us .row .col-sm-7,
.add-us .row .col-md-7,
.add-us .row .col-lg-7,
.add-us .row .col-xs-8,
.add-us .row .col-sm-8,
.add-us .row .col-md-8,
.add-us .row .col-lg-8,
.add-us .row .col-xs-9,
.add-us .row .col-sm-9,
.add-us .row .col-md-9,
.add-us .row .col-lg-9,
.add-us .row .col-xs-10,
.add-us .row .col-sm-10,
.add-us .row .col-md-10,
.add-us .row .col-lg-10,
.add-us .row .col-xs-11,
.add-us .row .col-sm-11,
.add-us .row .col-md-11,
.add-us .row .col-lg-11,
.add-us .row .col-xs-12,
.add-us .row .col-sm-12,
.add-us .row .col-md-12,
.add-us .row .col-lg-12 {
  padding: 1px;
}
.featured-thumbnail {
  margin: inherit;
  padding: 1px;
}

/*goTop*/
#goTop {
  height: 53px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  background: #e5e5e5;
}

#goTop a {
  cursor: pointer;
  color: #666;
  font: 16px/53px "Microsoft YaHei", simSun, Arial;
  background: #e5e5e5 url(http://img01.com4loves.com/com4loves/img/images/sprite.jpg) no-repeat left -200px;
  padding-left: 18px;
}

.foot {
  background: url(../images/foot-bg.png) 0px 0px repeat-x;
  display: block;
  height: 65px;
  line-height: 65px;
  margin-top: -9px;
  position: relative;
  z-index: 66;
}

.copy {
  width: 960px;
  text-align: left;
  margin: 0px auto;
  font-size: 12px;
  font-family: "å®‹ä½“";
  line-height: 20px;
}

.copy p {
  line-height: 45px;
  display: block;
  float: left;
  width: 750px;
  color: #d01d3c;
  text-align: right
}
@media (max-width:990px) and (min-width: 320px) {
	.copy p {width:auto;}
	}
@media (min-width: 992px) {
	.copy p {width:750px;}
	}

.copy p a {
  color: #d01d3c;
}

.copy ul {
  display: block;
  width: 190px;
  float: left;
  margin-top: 5px;
  margin-left: 14px;
}
@media (max-width:320px) {
	.copy ul {margin-top:-35px}
	}
.copy ul li {
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
  background: url(//img01.com4loves.com/com4loves/img/images/ico.png) no-repeat;
  float: left;
  margin-right: 8px;
}

.copy ul li:hover {
  background: url(//img01.com4loves.com/com4loves/img/images/ico-red.png) no-repeat;
}

.copy ul li.sina {
  background-position: 0px 0px;
}

.copy ul li.weixin {
  background-position: 0px -30px;
}

.copy ul li.tel {
  background-position: 0px -60px;
}

.copy ul li.feiyu {
  background: url(../images/feiyu.png) no-repeat;
}

.copy ul li.feiyu:hover {
  background: url(../images/feiyu_red.png) no-repeat;
}

.copy ul li span {
  position: absolute;
  top: -130px;
  width: 100px;
  height: 119px;
  left: 50%;
  margin-left: -59px;
  padding: 9px;
  background: url(//img01.com4loves.com/com4loves/img/images/code-bg.png) no-repeat;
  display: none;
  z-index: 9;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.img_mask {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #e4e3e2;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transition: .2s;
  transition: .2s;
  z-index: 1000;
}

.img_mask .glyphicon {
  cursor: pointer;
  position: absolute;
  font-size: 20px;
  right: -8px;
  top: -8px;
  color: #999;
  padding: 10px;
  border-radius: 50%;
  /*background: #fff;*/
}

