.warp{ margin:0 auto; max-width: 750px; min-width: 320px; width: 100%;}

.banner{ width: 100%;}
.banner img{ width: 100%; height: auto;}

.section .caption{ font-size: 0.32rem; line-height: 0.36rem; color: #333; border-left: 0.06rem #D5A822 solid; padding-left: 0.22rem;}

.navList{ border-bottom: 1px solid #c8c8c8; overflow: hidden;}
.navList .navItem{ float: left; box-sizing: border-box; width: 25%; border-right: 1px solid #c8c8c8; padding: 0.2rem 0;}
.navList .navItem a{ display: block; text-decoration: none;}
.navList .navItem:last-child{ border-right: none;}
.navList .navItem .icon{ width: 1.25rem; height: 1.25rem; margin: 0 auto; background-image: url(../images/icon.png); background-repeat: no-repeat; background-size: 5rem 5rem;}
.navList .navItem .icon1{ background-position: 0 0;}
.navList .navItem .icon2{ background-position: -1.25rem 0;}
.navList .navItem .icon3{ background-position: -2.5rem 0;}
.navList .navItem .icon4{ background-position: -3.75rem 0;}
.navList .navItem .text{ text-align: center; font-size: 0.32rem; line-height: 0.36rem; color: #333;}

.section2{ padding: 0.4rem 0.2rem 0;}
.section2 .courseList{ margin-top: 0.4rem; overflow: hidden;}
.section2 .courseList ul{ overflow:hidden;}
.section2 .courseList .courseListTitle{ width:65px; padding:0 5px; margin-bottom: 10px; line-height:26px; color:##333; border:1px solid #D5A822; text-align:center; font-size:15px; line-height:26px;}
.section2 .courseItem{ float: left; width: 30%; margin-right: 5%; margin-bottom: 5%;}
.section2 .courseItem:nth-child(3n){ margin-right: 0;}
.section2 .courseItem .img{ width: 100%;}
.section2 .courseItem .img img{ width: 100%; height: auto;}
.section2 .courseItem .txt{ text-align: center; font-size: 0.32rem; line-height: 0.36rem; color: #333;}
.section2 .courseItem .txt span{ display: inline-block; padding: 0.18rem 0.12rem 0.14rem; border-bottom: 1px solid #D5A822;}

.section3{ padding: 0.3rem 0 0;}
.section3 .caption{ margin: 0 0.2rem;}
.section3 .teacherBox{ margin-top: 0.55rem;}
.section3 .teacherInfor{ overflow: hidden; padding: 0 0.2rem;}
.section3 .teacherPhoto{ float: left; width: 25%; margin-left: 5%;}
.section3 .teacherPhoto img{ width: 100%;}
.section3 .teacherText{ float: left; width: 60%; margin-left: 5%;}
.section3 .teacherText .name{ font-size: 0.32rem; line-height: 0.36rem; color: #D5A822; font-weight: bold; margin-top: 0.4rem;}
.section3 .teacherText .job{ font-size: 0.28rem; line-height: 0.36rem; color: #D5A822; margin-top: 0.2rem;}
.section3 .teacherText .expr{ margin-top: 0.2rem;}
.section3 .teacherText .expr p{ font-size: 0.26rem; line-height: 0.32rem; color: #333; text-align: justify;}
.section3 .teacherText .videoLink{ float: right; margin-top: 0.2rem; position: relative; padding-left: 0.4rem;}
.section3 .teacherText .videoLink:before{ content: ""; display: block; width: 0.32rem; height: 0.32rem; background: url(../images/play.png) center no-repeat; background-size: 100% 100%; position: absolute; left: 0; top: 0;}
.section3 .teacherText .videoLink a{ font-size: 0.28rem; color: #D5A822; line-height: 0.32rem; text-decoration: none;}
.section3 .teacherThumb{ overflow: hidden; background: #c8c8c8;}
.section3 .teacherThumb .thumbList{ overflow: hidden; padding: 0.25rem 0.2rem;}
.section3 .teacherThumb .thumbItem{ float: left; width: 15%; height: auto; margin-right: 2%; position: relative;}
.section3 .teacherThumb .thumbItem.active:after{ content: ""; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #D5A822; position: absolute; left: 0; top: 0;}
.section3 .teacherThumb .thumbItem:last-child{ margin-right: 0;}
.section3 .teacherThumb .thumbItem img{ width: 100%; height: 100%;}

.section4{ padding: 0.54rem 0.2rem 0;}
.section4 .synopsis{ margin-top: 0.2rem;}
.section4 .synopsis p{ font-size: 0.26rem; color: #333333; line-height: 0.36rem; padding-left: 0.28rem;}
.section4 .videoBox{ width: 7.07rem; height: 3.28rem; margin: 0.27rem auto 0;}
.section4 .videoBox img{ width: 100%; height: 100%;}

.section5{ padding: 0.55rem 0 0;}
.section5 .caption{ margin: 0 0.2rem;}
.section5 .studentList{ margin-top: 0.12rem;}
.section5 .studentItem{ padding: 0.2rem; border-bottom: 0.03rem solid #c8c8c8; display: flex; display: -webkit-flex; justify-content: space-between; align-items: center; position: relative;}
.section5 .studentItem .studentImg{ width: 24%;}
.section5 .studentItem .studentImg img{ width: 100%; height: auto;}
.section5 .studentItem .studentTxt{ width: 65%; margin-right: 7%;}
.section5 .studentItem .studentTxt .name{ font-size: 0.32rem; line-height: 0.36rem; color: #D5A822;}
.section5 .studentItem .studentTxt .gain{ font-size: 0.28rem; line-height: 0.36rem; color: #333333; margin-top: 0.1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.section5 .studentItem .studentTxt .expr{ font-size: 0.26rem; line-height: 0.36rem; color: #333333; margin-top: 0.1rem;}
.section5 .studentItem .videoBtn{ width: 0.74rem; height: 0.74rem; position: absolute; right: 0.2rem; top: 50%; margin-top: -0.37rem;}
.section5 .studentItem .videoBtn img{ width: 100%; height: 100%;}

.footer{ width: 100%; position: relative;}
.footer .bj{ width: 100%; height: auto;}
.footer p{ font-size: 0.32rem; text-align: center; line-height: 0.5rem; position: absolute; width: 100%; top: 50%; margin-top: -0.75rem; color: #fff;}


/*内页样式*/
.top{ position: relative; padding: 0.2rem 0; border-bottom: 1px solid #cccccc;}
.top .back{ position: absolute; width: 0.5rem; height: 0.5rem; left: 2%; top: 50%; margin-top: -0.25rem;}
.top .back img{ width: 100%; height: auto;}
.top .logo{ text-align: center;}
.top .logo img{ width: 40%; text-align: center;}

.mediaBox{ width: 100%; height: 4rem; margin-top: 0.1rem;}

/*模态框*/
.modal{ position: fixed; background: #000; opacity: 0.5; width: 100%; height: 100%; left: 0; top: 0; z-index: 9; display: none;}
.videoBox{ position: fixed; width:86% !important; height:200px !important; margin:0 !important; transform:translate(-50%,-50%); background: #fff; left: 50%; top:50%; z-index: 10; display: none;}
.videoBox .close{ position: absolute; right: 10px; top: 10px; font-size: 20px; color: red; cursor: pointer;}
.videoBox .videoList{ width: 100%; height: 100%;}
.videoBox .videoItem{ width: 100%; height: 100%; display: none;}