.banner{ height: 395px; overflow: hidden;}
.banner .swiper-slide{ height: 395px;}
.banner .swiper-pagination-bullet{ background: #fff; opacity: 0.8;}
.banner .swiper-pagination-bullet-active{ background: #007aff; opacity: 1;}
.section{ width: 100%; overflow: hidden;}

/*section_1*/
.section_1{ margin-top: 18px;}
.section_1 .lessonList{ overflow: hidden; margin-right: -24px;}
.section_1 .lessonItem{ float: left; margin-right: 24px;}

/*section_2*/
.section_2{ margin-top: 70px;}
.section_2 .caption{ font-size: 24px; color: #333333; line-height: 24px; position: relative;}
.section_2 .caption:after{ content: ""; display: block; width: 30px; height: 2px; background: #304f91; position: absolute; left: 0; bottom: -13px;}
.section_2 .subCaption{ font-size: 14px; color: #888888; padding-left: 25px;}
.section_2 .contentBox{ margin-top: 36px;}
.section_2 .leftSide{ float: left; width: 282px;}
.section_2 .lessonOnlive{ height: 446px; overflow: hidden;}
.section_2 .lessonOnliveSwiper{ height: 100%;}
.section_2 .lessonSlideDetail{ width: 218px; height: 358px; border: 1px solid #fff; margin: 43px auto 0;}
.section_2 .lessonSlideDetail .liveIcon{ text-align: center; margin-top: 18px;}
.section_2 .lessonSlideDetail .title{ color: #fff; text-align: center; margin-top: 24px;}
.section_2 .lessonSlideDetail .title p{ font-size: 30px; line-height: 50px; font-weight: bold;}
.section_2 .lessonSlideDetail .time{ text-align: center; font-size: 18px; color: #ffffff; margin-top: 26px;}
.section_2 .lessonSlideDetail .time span{}
.section_2 .lessonSlideDetail .btn{ width: 102px; height: 26px; background: #f6202e; margin: 24px auto 0;}
.section_2 .lessonSlideDetail .btn a{ display: block; font-size: 14px; line-height: 26px; text-align: center; color: #fefefe; text-decoration: none;}
.section_2 .lessonOnliveSwiper .swiper-pagination-bullet{ background: #fff; opacity: 1;}
.section_2 .lessonOnliveSwiper .swiper-pagination-bullet-active{ background: #304f91; opacity: 1;}
.section_2 .addvertisement{ margin-top: 35px;}
.section_2 .rightSide{ float: right; width: 892px;}
.section_2 .rightSide .excellentLessons{ width: 100%;}
/*精品课程*/
.section_2 .excellentLessons .title{ font-size: 18px; line-height: 32px; color: #333333;}
.section_2 .excellentLessons .title .more{ font-size: 14px; text-decoration: none; color: #333333; float: right; background: url(../images/icon_more_2.png) right center no-repeat; padding-right: 25px;}
.section_2 .lessonList{ overflow: hidden; margin-top: 10px; margin-right: -26px; padding-top: 2px;}
.section_2 .lessonItem{ float: left; width: 282px; margin-right: 24px; border-bottom: 1px solid #dddddd; cursor: pointer;}
.section_2 .lessonItem .itemImg{ position: relative; width: 100%; max-width: 100%;}
.section_2 .lessonItem .mark{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); z-index: 2; transition:  all 0.3s;}
.section_2 .lessonItem .mark a{ display:block; height:100%; width:100%;}
.section_2 .lessonItem:hover .mark{ opacity: 1; filter: alpha(opacity=100);}
.section_2 .lessonItem .lessonTxt{ position: absolute; width: 100%; left: 0; top: 50%; margin-top: -12px; text-align: center; background: url(../images/line_1.png) center repeat-y; z-index: 3; transition: all 0.3s;}
.section_2 .lessonItem:hover .lessonTxt{ background: rgba(0,0,0,0);}
.section_2 .lessonItem .lessonTxt .inner{ width: 215px; margin: 0 auto; position: relative;}
.section_2 .lessonItem .lessonTxt .inner:before{ content: ""; display: block; width: 16px; height: 16px; position: absolute; border-top: 1px solid #fff; border-left: 1px solid #fff; left: 0; top: -27px; opacity: 0; filter: alpha(opacity=0); transition:  all 0.3s;}
.section_2 .lessonItem .lessonTxt .inner:after{ content: ""; display: block; width: 16px; height: 16px; position: absolute; border-top: 1px solid #fff; border-right: 1px solid #fff; right: 0; top: -27px; opacity: 0; filter: alpha(opacity=0); transition:  all 0.3s;}
.section_2 .lessonItem:hover .lessonTxt .inner:before{ opacity: 1; filter: alpha(opacity=100);}
.section_2 .lessonItem:hover .lessonTxt .inner:after{ opacity: 1; filter: alpha(opacity=100);}
.section_2 .lessonItem .lessonName{ font-size: 16px; color: #fff; height: 24px; line-height: 24px; position: relative;}
.section_2 .lessonItem .lessonName:before{ content: ""; display: block; width: 16px; height: 16px; position: absolute; border-bottom: 1px solid #fff; border-left: 1px solid #fff; left: 0; bottom: -27px; opacity: 0; filter: alpha(opacity=0);}
.section_2 .lessonItem .lessonName:after{ content: ""; display: block; width: 16px; height: 16px; position: absolute; border-bottom: 1px solid #fff; border-right: 1px solid #fff; right: 0; bottom: -27px; opacity: 0; filter: alpha(opacity=0);}
.section_2 .lessonItem:hover .lessonName:before{ opacity: 1; filter: alpha(opacity=100);}
.section_2 .lessonItem:hover .lessonName:after{ opacity: 1; filter: alpha(opacity=100);}
.section_2 .lessonItem .itemInf{ overflow: hidden; margin-top: 20px; margin-bottom: 14px;}
.section_2 .lessonItem .itemInf .duration{ float: left; width: 110px; height: 20px; line-height: 20px; border-radius: 10px; background: #000000; text-align: center; font-size: 12px; color: #fff;}
.section_2 .lessonItem .itemInf a{ float: right; font-size: 14px; line-height: 20px; color: #304f91; text-decoration: none;}
/*试听课程*/
.section_2 .auditionLessons{ margin-top: 12px;}
.section_2 .auditionLessons .title{ font-size: 18px; line-height: 32px; color: #333333;}
.section_2 .auditionLessons .title span{ position: relative;}
.section_2 .auditionLessons .title span.hot:after{ content: ""; display: block; width: 34px; height: 14px; background: url(../images/hot_1.png) center no-repeat; position: absolute; left: 100%; top: 5px;}
.section_2 .auditionLessons .title .more{ font-size: 14px; text-decoration: none; color: #333333; float: right; background: url(../images/icon_more_2.png) right center no-repeat; padding-right: 25px}
.section_2 .lessonItem .part{ position: absolute; width: 40px; height: 38px; background: url(../images/part.png) center no-repeat; font-size: 12px; line-height: 24px; color: #fff; text-align: center; z-index: 4; right: 16px; top: -2px;}
.section_2 .lessonItem .btnGroup{ position: absolute; width: 100%; left:0; top: 50%; margin-top: -30px; z-index: 5; text-align: center; display: none;}
.section_2 .lessonItem .btnGroup a{ font-size: 12px; line-height: 20px; color: #fff; text-decoration: none; text-align: center; display: inline-block; margin: 0 35px;}
.section_2 .lessonItem:hover .btnGroup{ display: block;}
.section_2 .lessonItem .lessonInf{ border: 1px solid #dddddd; border-top: none; overflow: hidden;}
.section_2 .lessonItem .lessonInf h6{ color: #304f91; font-size: 16px; line-height: 16px; margin-top: 9px;}
.section_2 .lessonItem .lessonInf p{ overflow: hidden; line-height: 24px; margin-top: 16px; margin-bottom: 12px; padding: 0 0.5em;}
.section_2 .lessonItem .lessonInf .holder{ font-size: 14px; color: #333333; float: left;}
.section_2 .lessonItem .lessonInf .status{ font-size: 14px; color: #333333; float: right;}

/*section_3*/
.section_3{ margin-top: 70px;}
.section_3 .leftSide{ float: left; width: 894px;}
.section_3 .leftSide .caption{ font-size: 24px; color: #333333; line-height: 24px; position: relative;}
.section_3 .leftSide .caption:after{ content: ""; display: block; width: 30px; height: 2px; background: #304f91; position: absolute; left: 0; bottom: -13px;}
.section_3 .leftSide .switchNav{ overflow: hidden; display: inline;}
.section_3 .leftSide .switchNav span{ font-size: 18px; color: #333333; display: inline-block; line-height: 26px; padding: 0 5px; cursor: pointer; transition: all 0.3s;}
.section_3 .leftSide .switchNav span.active{ background: #304f91; color: #fff;}
.section_3 .leftSide .more{ font-size: 14px; text-decoration: none; color: #333333; float: right; background: url(../images/icon_more_2.png) right center no-repeat; padding-right: 25px}
.section_3 .newsListBox{}
.section_3 .newsItem{ overflow: hidden;}
.section_3 .hotNews{ overflow: hidden; margin-top: 40px;}
.section_3 .hotNews .newsImg{ float: left; width: 390px; height: 220px; margin-right: 24px; overflow: hidden;}
.section_3 .hotNews .newsImg img{ width:390px; height:220px;}
.section_3 .hotNews .newsTxt{ float: left; width: 480px; height: 220px; position: relative;}
.section_3 .hotNews .newsTxt:after{ content: ""; display: block; width: 100%; height: 1px; background: #ddd; position: absolute; bottom: 0; left: 0;}
.section_3 .hotNews .newsTxt h2{ line-height: 36px;}
.section_3 .hotNews .newsTxt h2 a{ font-weight: bold; font-size: 20px; color: #333333; text-decoration: none; padding-left: 40px; background: url(../images/hot_2.png) left center no-repeat;}
.section_3 .hotNews .newsTxt p{ font-size: 14px; line-height: 24px; color: #888888;}
.section_3 .hotNews .newsTxt .extraInf{ overflow: hidden; margin-top: 32px;}
.section_3 .hotNews .newsTxt .tag{ float: left; width: 68px; height: 20px; line-height: 20px; text-align: center; border-radius: 3px; border: 1px solid #dddddd; font-size: 12px; color: #888888;}
.section_3 .hotNews .newsTxt .date{ float: left; font-size: 12px; line-height: 20px; color: #888888; padding-left: 18px; margin-left: 10px; position: relative;}
.section_3 .hotNews .newsTxt .date:before{ content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #dddddd; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.section_3 .latestNewsList{ overflow: hidden; margin-top: 34px;}
.section_3 .latestNewsItem{ float: left; overflow: hidden; width: 414px; margin-bottom: 28px;}
.section_3 .latestNewsItem .newsImg{ float: left; overflow: hidden; width: 139px; height: 79px; margin-right: 18px;}
.section_3 .latestNewsItem .newsImg img{width:100%;}
.section_3 .latestNewsItem .newsTxt{ float: left; width: 220px;}
.section_3 .latestNewsItem .newsTxt h2{ line-height: 20px; max-height: 40px;}
.section_3 .latestNewsItem .newsTxt h2 a{ font-weight: bold; font-size: 12px; color: #555555; text-decoration: none; padding-left: 36px; background: url(../images/new.png) left center no-repeat;}
.section_3 .latestNewsItem .newsTxt .extraInf{ overflow: hidden; margin-top: 15px;}
.section_3 .latestNewsItem .newsTxt .tag{ float: left; width: 68px; height: 20px; line-height: 20px; text-align: center; border-radius: 3px; border: 1px solid #dddddd; font-size: 12px; color: #888888;}
.section_3 .latestNewsItem .newsTxt .date{ float: left; font-size: 12px; line-height: 20px; color: #888888; padding-left: 18px; margin-left: 10px; position: relative;}
.section_3 .latestNewsItem .newsTxt .date:before{ content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #dddddd; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.section_3 .rightSide{ float: right; width: 282px;}
.section_3 .recommend{}
.section_3 .recommend h2{ border-bottom: 1px solid #888888; font-size: 16px; color: #333333; line-height: 24px;}
.section_3 .recommend .articleList{}
.section_3 .recommend .articleItem{ overflow: hidden; margin-top: 16px;}
.section_3 .recommend .articleImg{ float: left; width: 102px; margin-right: 10px;overflow: hidden;
    height: 66px;}
.section_3 .recommend .articleImg img{width:100%;}
.section_3 .recommend .articleTxt{ max-height: 64px;}
.section_3 .recommend .articleTxt h6{}
.section_3 .recommend .articleTxt h6 a{ text-decoration: none; font-size: 12px; line-height: 21px; color: #555555;}
.section_3 .recommend .extraInf{ overflow: hidden; margin-top: 5px;}
.section_3 .recommend .extraInf .tag{ float: left; width: 38px; height: 15px; line-height: 15px; text-align: center; border-radius: 3px; border: 1px solid #dddddd; font-size: 12px; color: #888888;}
.section_3 .recommend .extraInf .date{ float: left; font-size: 12px; line-height: 20px; color: #888888; padding-left: 18px; margin-left: 10px; position: relative;}
.section_3 .recommend .extraInf .date:before{ content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #dddddd; position: absolute; left: 0; top: 50%; margin-top: -3px;}
.section_3 .common{ width: 280px; border: 1px solid #dddddd; margin-top: 24px;}
.section_3 .common h2{ font-size: 16px; line-height: 24px; color: #304f91; background: #fff; margin-top: -12px; width: 82px; margin-left: 12px; text-align: center;}
.section_3 .common .problemList{ margin-top: 10px; padding-bottom: 15px;}
.section_3 .common .problemItem{ line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 15px;    padding-right: 15px;}
.section_3 .common .problemItem a{ font-size: 12px; text-decoration: none; color: #333333; display: block; padding-left: 14px; position: relative;    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.section_3 .common .problemItem a:before{ content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #dddddd; position: absolute; left: 0; top: 50%; margin-top: -3px;}

/*广告位*/
.advertisementDiv{ text-align: center; margin-top: 32px;}

/*section_4*/
.section_4{ background: #f8faff; overflow: hidden; padding-top: 30px;}
.section_4 .caption{ font-size: 24px; color: #333333; line-height: 24px; position: relative;}
.section_4 .caption:after{ content: ""; display: block; width: 30px; height: 2px; background: #304f91; position: absolute; left: 0; bottom: -13px;}
.section_4 .subCaption{ font-size: 14px; color: #888888; padding-left: 25px;}
.section_4 .teacherInforBox{ position: relative; margin-top: 50px;}
.section_4 .teacherView{ overflow: hidden;}
.section_4 .teacherView .photo{ float: left; width: 378px; height: 621px; overflow: hidden;}
.section_4 .teacherInfor{ float: left; width: 755px;}
.section_4 .teacherBasicInf{ position: relative;}
.section_4 .teacherBasicInf:before{ content: ""; display: block; height: 3px; width: 558px; background: #304f91; position: absolute; top: 0; right: 0; z-index: 9;}
.section_4 .teacherBasicInf:after{ content: ""; display: block; width: 3px; background: #304f91; position: absolute; top: 0; right: 0; bottom: 12px; z-index: 9;}
.section_4 .teacherInfor .name{ font-size: 30px; line-height: 30px; color: #304f91;}
.section_4 .advantangeList{ overflow: hidden; margin-top: 20px; width: 450px;}
.section_4 .advantangeList p{ font-size: 16px; line-height: 30px; color: #333333; background: url(../images/checked.png) left center no-repeat; padding-left: 20px; float: left; width: 200px;}
.section_4 .describle{ margin-top: 20px; width: 715px;}
.section_4 .describle p{ font-size: 16px; line-height: 24px; color: #333333; margin-bottom: 30px;}
.section_4 .evaluate{ width: 590px;}
.section_4 .evaluateTitle{ font-size: 16px; line-height: 24px; color: #333333; font-weight: bold;}
.section_4 .evaluate .word{ font-size: 16px; line-height: 24px; color: #333333; text-indent: 5em; margin-top: 10px;}
.section_4 .evaluate .speaker{ font-size: 16px; line-height: 24px; color: #333333; text-align: right; margin-top: 10px; position: relative;}
.section_4 .evaluate .speaker:after{ content: ""; display: block; height: 3px; width: 160px; background: #304f91; position: absolute; top: 50%; margin-top: -3px; right: -163px; z-index: 9;}
.section_4 .teacherView .btn{}
.section_4 .teacherView .btn a{ display: block; line-height: 45px; font-size: 18px; color: #fff; text-decoration: none; text-align: center; width: 153px; height: 45px; background: #fa565a; float: left; margin-right: 20px;}
.section_4 .teacherView .btn a img{ margin-right: 5px; vertical-align: sub;}
.section_4 .preView{ position: absolute; width: 1140px; left: 0; bottom: 12px; padding: 0 30px;}
.section_4 .preView .arrow-left{ width: 54px; height: 32px; line-height: 32px; background: #333333; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -16px; z-index: 9; cursor: pointer; transform: all 0.3s;}
.section_4 .preView .arrow-left:hover{ background: #304f91;}
.section_4 .preView .arrow-right{ width: 54px; height: 32px; line-height: 32px; background: #333333; text-align: center; position: absolute; right: 0; top: 50%; margin-top: -16px; z-index: 9; cursor: pointer; transform: all 0.3s;}
.section_4 .preView .arrow-right:hover{ background: #304f91;}
.section_4 .preView .swiper-slide{ width: 180px; position: relative; background: #304f91;}
.section_4 .preView .simpleInf{ position: absolute; height: 100%; background: #304f91; width: 175px; top: 0; z-index: 9; padding-left: 15px; display: none;}
.section_4 .preView .swiper-slide.left .simpleInf{ left: 180px;}
.section_4 .preView .swiper-slide.right .simpleInf{ right: 180px;}
.section_4 .preView .swiper-slide.active-nav .simpleInf{ display: block;}
.section_4 .preView .swiper-slide.active-nav .photo{ width: 170px; height: 108px; margin:5px;}
.section_4 .preView .swiper-slide.active-nav .photo img{ width: 100%; height: 100%;}
.section_4 .preView .simpleInf .name{ font-weight: bold; color: #fff; font-size: 18px; line-height: 24px; margin-top: 10px;}
.section_4 .preView .simpleInf .call{ font-size: 14px; line-height: 24px; color: #fff; margin-top: 10px;}


/*section_5*/
.section_5{ overflow: hidden; padding-top: 65px;}
.section_5 .caption{ font-size: 24px; color: #333333; line-height: 24px; position: relative;}
.section_5 .caption:after{ content: ""; display: block; width: 30px; height: 2px; background: #304f91; position: absolute; left: 0; bottom: -13px;}
.section_5 .subCaption{ font-size: 14px; color: #888888; padding-left: 25px;}
.section_5 .studentsBox{ margin-top: 100px; margin-left: 35px;}
.section_5 .expericeTxt{ float: left; width: 388px;}
.section_5 .wordsList{ padding-left: 58px; margin-top: 12px;}
.section_5 .wordsItem{}
.section_5 .wordsItem .text{ font-size: 14px; line-height: 24px; color: #333333; text-align: justify;}
.section_5 .wordsItem .btn{ height: 40px; overflow: hidden; margin-top: 36px;}
.section_5 .wordsItem .btn a{ display: block; color: #fff; width: 124px; height: 40px; line-height: 40px; font-size: 18px; text-decoration: none; text-align: center; float: right; background: #fa565a;}
.section_5 .studentListBox{ float: right; width: 690px;}
.section_5 .studentList{}
.section_5 .studentItem{ float: left; width: 204px; height: 204px; overflow: hidden; margin: 0 24px 24px 0; position: relative; cursor: pointer;}
.section_5 .studentItem a{display: block; width: 100%; height: 100%;}
.section_5 .studentItem a:before{  content: ""; transition: all 0.3s; display: block; width: 194px; height: 194px; border: 5px solid #304f91; position: absolute; left: 0; top: 0; opacity: 0;}
.section_5 .studentItem.active a:before{ opacity: 1;}


/*section_6*/
.section_6{ overflow: hidden; padding-top: 65px; padding-bottom: 48px;}
.section_6 .caption{ font-size: 24px; color: #333333; line-height: 24px; position: relative;}
.section_6 .caption:after{ content: ""; display: block; width: 30px; height: 2px; background: #304f91; position: absolute; left: 0; bottom: -13px;}
.section_6 .subCaption{ font-size: 14px; color: #888888; padding-left: 25px;}
.section_6 .honorList{ height: 375px; background: url(../images/map.png) center no-repeat; margin-top: 105px;}
.section_6 .honorItem{ width: 570px; height: 373px; box-shadow: 0 0 10px #ddd; overflow: hidden; background: rgba(255,255,255,0.5);}
.section_6 .honorItem .img{ height: 240px; text-align: center; margin-top: 26px;}
.section_6 .honorItem .txt{ font-size: 18px; line-height: 18px; margin-top: 50px; text-align: center; font-weight: bold; color: #333333;}


/*section_7*/
.section_7{ background: #f8faff; overflow: hidden; padding-top: 18px; padding-bottom: 48px;}
.section_7 .caption{ font-size: 24px; color: #333333; line-height: 24px; position: relative;}
.section_7 .caption:after{ content: ""; display: block; width: 30px; height: 2px; background: #304f91; position: absolute; left: 0; bottom: -13px;}
.section_7 .subCaption{ font-size: 14px; color: #888888; padding-left: 25px;}
.section_7 .employer{ margin-top: 45px;}
.section_7 .employer .swiper-container{ padding: 10px 10px 24px 10px;}
.section_7 .employer .swiper-slide{ box-shadow: 0 0 10px #ddd;}
.section_7 .employer .swiper-slide img{ width: 100%;}
.section_7 .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 0;}