﻿

.content {
    width: 1200px;
    margin: 0 auto;
}


.yewuwai{box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); height:515px; margin-top:40px;}
.lesson { padding-top:60px; padding-bottom: 100px; height:620px;}
.lesson .top20 { margin-top:5px;}
.lesson_nav {float:left; width:280px; }
.lesson_nav li { width: 100%; height: 111px; border-bottom:1px solid rgba(255,255,255,.2);background-color:#104c9f; }
.lesson_nav li a { padding:0 40px; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 30px; position: relative; z-index: 2; text-decoration:none; }
.lesson_nav li i { width: 70px; height: 52px; display: block; position: relative; overflow: hidden; margin: 0 10px 0 12px; float: left }
.lesson_nav li i img { width: 70px; position: absolute; top: 0; -o-transition: all .3s ease; transition: all .3s ease }
.lesson_nav li strong { display: block; font-size:20px; line-height: 28px; color:#fff;  }
 .lesson_nav li span{display: block;font-size:13px;color:rgba(255,255,255,.5);}
.lesson_nav li strong { margin-top:3px }


.lesson_nav li.on, .lesson_nav li:hover { border-color: transparent;  color:#FFF;background: url(../images/line2.jpg) no-repeat bottom #FF9900; }


.lesson_nav li.on i img, .lesson_nav li:hover i img { top: -52px }
.lesson_nav li.on strong, 
.lesson_nav li:hover strong{ color: #FFF }
.lesson_nav li.on span{color:rgba(255,255,255,.5);}
 .lesson_nav li:hover span {color:rgba(255,255,255,.5);}


.lesson_nav li.on:before, .lesson_nav li:hover:before { /*bottom: -1px*/ }
.lesson_nav li.on:after, .lesson_nav li:hover:after { /*bottom: -1px*/ border-color: transparent #FFF transparent transparent;}

.lesson_con { /*position: relative*/ float:right; width:920px; overflow:hidden; }
.lessons { width: 880px; height: 500px; background: #fff; padding: 30px 20px; float: left; }
.lessons p{ font-size:16px; line-height:30px; height:330px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:10;
    -webkit-box-orient: vertical; color:#4b4b4b;}
.lessons img { width:95%; height:500px;}
.lessons .title { font-size:31px; height:55px; margin-bottom:5px; }
.lessons .title span {border-bottom: #CA0303 solid 1px; padding-bottom:8px; color:#333;}
.lessons .title span strong{ color:#333;}
.lessons .title1{ font-size:14px; color:#999; margin-bottom:5px;}
.lessons li a{ height: 50px; line-height: 50px; border: #313131 solid 1px; float: left; width: 180px; text-align: center; padding-left:15px; margin-right:10px; display:block; font-size:18px; }
.top20{ margin:0 20px;}
.top21{ margin-top:25px;}
.top21 li{ float:left;}
.top21 li:first-child a{background: url(../images/le_icon1.png) 20px center no-repeat;}
.top21 li:last-child a{background: url(../images/le_icon3.png) 20px center no-repeat #f27130; color:#fff; border:1px solid #f27130; margin-right:0;}

.lesson_switch div { position: absolute; width: 55px; height: 55px; opacity: .7; border-radius: 50%; top: 302px; cursor: pointer; -o-transition: all .3s ease; transition: all .3s ease }
.lesson_switch div:hover { opacity: 1 }
.lesson_switch .lesson_prev { left: 105px }
.lesson_switch .lesson_next { right: 105px }



/*产品介绍*/
.proDetailsIntro {
  width: 100%;



}
.proDetailsIntro .conL {
  width:50%;
  float: left;
  position: relative;
  height: 100%;
  border-right: 1px solid #e4e4e4;
}

.proDetailsIntro .conL i {
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  z-index: 9;
  cursor: pointer;
  overflow: hidden;
  top: 50%;
  margin-top: -22px;
}
.proDetailsIntro .conL i.prev {
  left: -1px;
}
.proDetailsIntro .conL i.next {
  right: -1px;
}
.proDetailsIntro .conL .btnList {
  width: 100%;
  height: 10px;
  text-align: center;
  position: absolute;
  bottom: 18px;
}
.proDetailsIntro .conL .btnList span {
  display: inline-block;
  width: 9px;
  height: 9px;
  overflow: hidden;
  position: relative;
 
  background-color: #fff;
 border-radius:50%;
  margin-left: 14px;
  cursor: pointer;
}
.proDetailsIntro .conL .btnList span.cur {
  background-color: #df1f29;
}
.proDetailsIntro .conL .btnList span:first-child {
  margin-left: 0;
}
.proDetailsIntro .conL .conBox { border:1px solid #eee; border-right:none;
  width: 100%;
  height: 520px;
  position: relative;
  overflow: hidden;
}
.proDetailsIntro .conL .conBox ul {
  position: relative;
  top: 0;
  left: 0;
}
.proDetailsIntro .conL .conBox li {
  float: left;
  width: 100%;
}
.proDetailsIntro .conL .conBox li img {
  display: block;
  width:70%; margin:0 auto;
  height: auto;
}
.proDetailsIntro .conR {
  float: right;
  width: 42%;
  height: 100%;
  position: relative;
  margin-right: 5%;
}
.proDetailsIntro .conR h3 {
  font-size: 30px;
  color: #333333;
  font-weight: bold;
  height:40px;
  padding-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proDetailsIntro .conR>i {
  display: block;
  height: 1px;
  margin: 15px 0 18px 0;
  background: #e4e4e4;
}
.proDetailsIntro .conR p {
  font-size: 16px; line-height:28px;
  color: #666666;
 
  overflow:hidden;
}
.proDetailsIntro .conR .box {
  width: 100%;
  position: absolute;
  bottom: 30px;
  left: 0;
}
.proDetailsIntro .conR .box .zx {
  display: block;
  width: 172px;
  height: 53px;
  float: left;
  font-size: 20px;
  color: #fff;
  line-height: 53px;
  /*background: url(../images/proDetailsIntroBg01.png) no-repeat center;*/
  background-color: #df1f29;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
}
.proDetailsIntro1200 { width: 1200px; margin: 0 auto;}
.proDetailsIntro1200 .conR .box .zx { width: 197px; height: 60px; line-height: 60px; /*background: url(../images/proDetailsIntroBg011.png) no-repeat center;*/ background-color: #0061cf; border-radius: 30px; }

.proDetailsIntro .conR .box .zx img {
  position: relative;
  top: 4px;
  margin-left: 12px;
}
.proDetailsIntro .conR .box .phone {
  float: left;
  padding-left: 42px;
  background: url(../images/proDetailsIntro_phone.png) no-repeat left center;
  margin-left: 6%;
  margin-top: 6px;
}
.proDetailsIntro1200 .conR .box .phone { padding-left: 56px; background: none; position: relative;}

.proDetailsIntro1200 .conR .box .phone>i { display: block; width: 44px; height: 44px; background-color:#0061cf; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: 9;  }
.proDetailsIntro1200 .conR .box .phone>i:before { content: ''; display: block; width: 100%; height: 100%; background: url(../images/proListClassify_phone.png) no-repeat; position: absolute; left: 0; top: 0; z-index: 99; border-radius: 50%;}

.proDetailsIntro .conR .box .phone span {
  display: block;
  font-size: 13px;
  color: #666666;
}
.proDetailsIntro .conR .box .phone em {
  display: block;
  font-size: 24px;
  color: #0061cf;
  font-family: arial;
}

