@charset "utf-8";
body {
  background-color: #F5F7F6;
}
.main-content {
  width: 980px;
  height: 100%;
  position: relative;
  margin: auto;
}
.banner-left {
  background-color: #eeeeee;
  width: 15%;
  float: left;
}
.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.gray1 {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(60%);
  filter: gray;
}
.banner-right {
  position: relative;
  padding: 0px;
  background-image: url('/xviews/xspecialTrain/images/bannerbg.png');
}
#now > img {
  width: 100%;
  height: 100%;
}
#before {
  background-color: antiquewhite;
}
#before > img {
  width: 100%;
  height: 100%;
}
#after > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.next {
  position: absolute;
  z-index: 1;
  bottom: -56px;
  right: 58px;
  width: 180px;
  height: 180px;
  text-align: center;
  line-height: 180px;
}
.next1 {
  position: absolute;
  z-index: 1;
  width: 160px;
  height: 226px;
  bottom: 0px;
  right: 78px;
  background: rgba(0, 0, 0, 0.5);
  line-height: 226px;
}
.next1 > span {
  font-size: 24px;
  margin-top: 101px;
  line-height: 220px;
  padding-left: 29px;
  color: #fff;
}
#name {
  position: absolute;
  z-index: 2;
  top: 38%;
  margin: 0px;
  padding: 0px;
  left: -45px;
}
#name span {
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
}
#apply {
  position: absolute;
  z-index: 2;
  top: 56.6%;
  background-color: white;
  margin-top: 3.92em;
  width: 110px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
#inquire {
  position: absolute;
  z-index: 2;
  top: 56.6%;
  left: 13%;
  border: 1px solid #222222;
  margin-top: 3.92em;
  width: 110px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.container {
  position: relative;
  top: 18.83em;
  width: 61.66%;
}
.title .span1 {
  font-size: 22px;
  color: #000000;
}
.title .span2 {
  font-family: "Arial Regular";
  font-size: 0.7em;
  color: #bcbcbc;
  line-height: 1.898em;
}
.introduction .content {
  cursor: pointer;
  margin-top: 40px;
  padding: 0px;
  font-size: 16px;
  line-height: 30px;
  color: #444444;
}
.moreBtnTotal {
  clear: both;
  line-height: 40px;
  height: 40px;
  margin-top: 40px;
  width: 150px;
  border: 1px solid #bebebe;
  margin-left: 42.2%;
  font-size: 14px;
  color: #bebebe;
}
.curricurum .moreBtn {
  clear: both;
  line-height: 40px;
  height: 40px;
  width: 150px;
  border: 1px solid #bebebe;
  font-size: 14px;
  color: #bebebe;
}
.curricurum {
  margin-top: 58px;
}
.curricurum .left {
  width: 43.3%;
  float: left;
}
.curricurum .content {
  margin-top: 40px;
  font-size: 16px;
  line-height: 36px;
  color: #444444;
  text-align: justify;
}
.curricurum .right {
  width: 43.3%;
  float: right;
  height: 24.445em;
}
.curricurum .right .img {
  width: 100%;
  height: 23em;
  float: right;
}
.dynamic {
  clear: both;
  overflow: hidden;
}
.dynamic .title {
  margin-top: 58px;
}
.dynamic .content {
  margin-top: 40px;
  padding-top: 40px;
  width: 100%;
  background-color: white;
}
.dynamic .content .left {
  width: 31%;
  float: left;
  margin-bottom: 40px;
  margin-left: 60px;
}
.dynamic .content .left .img {
  width: 310px;
}
.dynamic .content .right {
  width: 50%;
  float: right;
  margin-bottom: 40px;
  margin-right: 6.44%;
}
.dynamic .content .right .title1 {
  font-size: 16px;
  color: #222222;
}
.dynamic .content .right .time {
  margin-top: 20px;
  font-size: 14px;
  color: #bcbcbc;
}
.dynamic .content .right .detail {
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
  color: #666666;
  text-align: justify;
}
.dynamic .moreBtn {
  clear: both;
  line-height: 40px;
  height: 40px;
  width: 150px;
  border: 1px solid #bebebe;
  margin-left: 41.6%;
  margin-bottom: 40px;
  font-size: 14px;
  color: #bebebe;
}
.mentor {
  position: relative;
  height: 824px;
  transform: translateY(-66px);
}
.mentor .moreBtn {
  clear: both;
  line-height: 40px;
  height: 40px;
  width: 150px;
  border: 1px solid #bebebe;
  font-size: 14px;
  color: #bebebe;
  position: absolute;
  left: 43.8%;
  top: 776px;
}
.mentor .title {
  position: absolute;
  left: 31.3%;
  top: 11.1em;
  font-size: 14px;
  color: #444444;
  text-align: justify;
}
.mentor .img1 {
  margin: 58px 49.5% 0px;
}
.mentor .img2 {
  position: absolute;
  left: 31.3%;
  top: 215px;
}
.mentor .content3 {
  position: absolute;
  top: 235px;
  left: 15px;
  width: 202px;
  text-align: justify;
}
.mentor .img3 {
  width: 100% ;
}
.mentor .content4 {
  position: absolute;
  top: 305px;
  left: 259.33px;
  width: 202px;
  text-align: justify;
}
.mentor .content4 .img4 {
  width: 100%;
}
.mentor .content5 {
  position: absolute;
  top: 305px;
  left: 518.66px;
  width: 202px;
  text-align: justify;
}
.mentor .img5 {
  width: 100%;
}
.mentor .content6 {
  position: absolute;
  left: 778px;
  top: 235px;
  width: 202px;
  text-align: justify;
}
.mentor .tutor{
  background-color: #222;
  width: 40px;
  height: 140px;
  color: white;
  font-size: 22px;
  margin-top: 124px;
  margin-left: 47.9%;
  line-height: 26px;
  padding: 5px;}
.mentor .img6 {
  width: 100%;
}
.mentor .name {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}
.mentor .title1 {
  margin-top: 10px;
  font-size: 14px;
  color: #000000;
  text-align: justify;
}
.mentor .title2 {
  margin-top: 20px;
  font-size: 14px;
  color: #000000;
  text-align: justify;
}
.story {
  background-color: white;
  width: 100%;
  height: 1245px;
  overflow: hidden;
}
.story .title {
  margin-top: 40px;
}
.story .content {
  position: relative;
  margin: auto;
  width: 87.1%;
  text-align: justify;
}
.story .content .logo {
  position: absolute;
  left: 61.2%;
  top: 4.6em;
}
.story .moreBtnTotal {
  clear: both;
  line-height: 40px;
  height: 40px;
  margin-top: 1065px;
  width: 150px;
  border: 1px solid #bebebe;
  /* margin-left: 42.2%; */
  margin-right: 0px;
  font-size: 14px;
  color: #bebebe;
}
.story .content .detail1 {
  position: absolute;
  z-index: 1;
  top: 53px;
  background-color: #F5F7F6;
  height: 21.68em;
  width: 100%;
}
.story .img1 {
  position: absolute;
  z-index: 2;
  width: 170px;
  left: 87px;
  top: 38px;
  box-shadow: 34px 20px 15px 2px #d1d7d1;
}
.story .span3 {
  position: absolute;
  left: 40%;
  top: 32px;
  width: 55%;
  font-size: 18px;
  color: #000000;
}
.story .span4 {
  position: absolute;
  left: 40%;
  top: 120px;
  width: 55%;
  font-size: 14px;
  color: #000000;
  text-align: justify;
}
.story .img2 {
  position: absolute;
  z-index: 1;
  top: 395px;
  width: 236px;
}
.story .content .detail2 .titl1 {
  position: absolute;
  z-index: 2;
  left: 52px;
  top: 393px;
  width: 15px;
  margin: 0 auto;
  line-height: 20px;
  font-size: 14px;
  color: #858585;
}
.story .content .detail2 .name {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 655px;
  font-weight: bold;
  font-size: 16px;
  color: #444444;
}
.story .content .detail2 .positon {
  position: absolute;
  z-index: 2;
  left: 2.55em;
  top: 41em;
  font-weight: bold;
  font-size: 1em;
  color: #ffffff;
}
.story .img3 {
  position: absolute;
  z-index: 1;
  top: 436px;
  left: 69%;
  width: 160px;
}
.story .content .detail3 .titl {
  position: absolute;
  z-index: 2;
  left: 65%;
  top: 436px;
  width: 13px;
  font-size: 14px;
  color: #858585;
}
.story .content .detail3 .name {
  position: absolute;
  z-index: 2;
  left: 81%;
  top: 664px;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
.story .content .detail3 .positon {
  position: absolute;
  z-index: 2;
  left: 69%;
  top: 66em;
  font-size: 0.9em;
  color: #858585;
}
.story .img4 {
  position: absolute;
  z-index: 1;
  top: 713px;
  left: 7%;
  width: 160px;
}
.story .content .detail4 .titl {
  position: absolute;
  z-index: 2;
  left: 3%;
  top: 712px;
  width: 15px;
  margin: 0 auto;
  line-height: 20px;
  font-size: 14px;
  color: #858585;
}
.story .content .detail4 .name {
  position: absolute;
  z-index: 2;
  left: 18%;
  top: 944px;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
.story .content .detail4 .positon {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 92.3em;
  font-size: 0.9em;
  color: #858585;
}
.story .img5 {
  position: absolute;
  z-index: 1;
  top: 733px;
  left: 69%;
  width: 160px;
}
.story .content .detail5 .titl {
  position: absolute;
  z-index: 2;
  left: 65%;
  width: 15px;
  top: 736px;
  font-size: 14px;
  color: #858585;
}
.story .content .detail5 .name {
  position: absolute;
  z-index: 2;
  left: 81%;
  top: 1006px;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
.story .content .detail5 .positon {
  position: absolute;
  z-index: 2;
  left: 69%;
  top: 104.8em;
  font-size: 0.9em;
  color: #858585;
}
.story .shadow {
  position: absolute;
  z-index: 0;
  top: 512px;
  left: 48.4%;
  background-color: #F5F7F6;
  height: 29.8em;
  width: 31.1em;
}
.testimonials {
  position: relative;
  background: white;
  height: 783px;
  overflow: hidden;
  margin-bottom: 58px;
}
.testimonials .headline {
  position: absolute;
  left: 26.89%;
  background-color: #f5f7f6;
  width: 46.22%;
  height: 7.5em;
  overflow: hidden;
}
.testimonials .headline .span1 {
  /*font-size: 22px;*/
  /*font-weight: bold;*/
  /*color: #000000;*/
  /*padding-top: 22em;*/
}
.testimonials .headline .span2 {
  font-family: "Arial Regular";
  font-size: 0.7em;
  color: #bcbcbc;
  line-height: 1.898em;
}
.testimonials .img1 {
  position: absolute;
  top: 146px;
  width: 170px;
}
.testimonials .content1 .name {
  position: absolute;
  z-index: 2;
  top: 426px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.testimonials .content1 .titl {
  position: absolute;
  z-index: 2;
  top: 453px;
  width: 16.2%;
  font-size: 14px;
  color: #888888;
}
.testimonials .img2 {
  position: absolute;
  top: 146px;
  width: 353px;
  left: 17.2%;
}
.testimonials .content2 .name {
  position: absolute;
  z-index: 2;
  top: 549px;
  left: 27.5%;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
.testimonials .content2 .titl {
  position: absolute;
  z-index: 2;
  top: 575px;
  left: 27.5%;
  width: 22%;
  font-size: 14px;
  color: #888888;
}
.testimonials .img3 {
  position: absolute;
  z-index: 1;
  top: 204px;
  width: 19.3%;
  left: 627px;
  box-shadow: -58px 42px #f5f7f6;
}
.testimonials .content3 .name {
  position: absolute;
  z-index: 2;
  top: 144px;
  left: 660px;
  margin: 0 auto;
  line-height: 20px;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
.testimonials .content3 .titl {
  position: absolute;
  z-index: 2;
  top: 169px;
  width: 19.8%;
  left: 660px;
  font-size: 14px;
  color: #888888;
}
.testimonials .img4 {
  position: absolute;
  z-index: 2;
  top: 262px;
  right: 50px;
  width: 19.333%;
}
.testimonials .content4 .name {
  position: absolute;
  z-index: 2;
  top: 575px;
  left: 739px;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
.testimonials .content4 .titl {
  position: absolute;
  z-index: 2;
  top: 610px;
  width: 19.8%;
  left: 75.7%;
  font-size: 14px;
  color: #888888;
}
.testimonials .logo {
  position: absolute;
  top: 17.8em;
  left: 79.5%;
  height: 3.212em;
}
.testimonials .moreBtnTotal {
  clear: both;
  line-height: 40px;
  height: 40px;
  width: 150px;
  border: 1px solid #bebebe;
  font-size: 14px;
  color: #bebebe;
  position: absolute;
  top: 662px;
}
.footer {
  position: relative;
  margin-top: 243px;
}
.storySpan {
  font-family: "Arial Regular";
  color: #222222;
  font-size: 20px;
  width: 10px;
}
.col-title {
  color: #222;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 14px;
  border-bottom: 2px solid #5DBDA1;
}
.col-title:hover{
  color:#5DBDA1;
}