@charset "utf-8";
/* 
-----------------------------------------
*******北京动力节点教育科技有限公司******
-----------------------------------------
 *@项目名称:;
 *@功能:course页css代码;
 *@作者:张越;
 *@创建时间:2017-9-24;
 *@修改人:无;
 *@修改时间:无;
 *@修改位置或名称:无;
 *@修改原因:无;
*/

body{ color: #000; background: #fff; min-width: 1300px; overflow-x: hidden; }

/* head */
header{ box-shadow: 0 5px 16px #E8EAED; position: relative; }
header .up{ width: 100%; height: 40px; background: #333333; color: #fff; line-height: 40px; }
header .logo{ width: 100%; height: 102px; background: #fff; padding-top: 40px; }
header .logo li{ float: left; }
header .logo .word{ width: 262px; height: 62px; border-left: 1px solid #A6A6A6; margin-left: 10px; padding-left: 10px; }
header .logo .word span{ font-size: 16px; }
header .logo .word .big{ font-weight: bold; font-size: 28px; line-height: 38px; }
header .logo .btn{ margin-top: 16px; width: 86px; height: 30px; border: 1px solid #2F84C6; color: #2F84C6; line-height: 30px; text-align: center; font-size: 16px; }
header .logo .btn:hover{ background: #2F84C6; color: #fff; }


/* 课程介绍 */
.know{  width: 100%; height: 410px; background: #F4F7FA; padding-top: 60px; }

.know .pic{ width: 620px; height: 348px; position: relative; overflow: hidden; }
.know .pic .picmain{ width: 100%;}
.know .pic .jright{ position: absolute; top: 120px; left: 265px; z-index: 10; opacity: 1; }
.know .pic .Java{ width: 100%; height: 40px; line-height: 40px; background: rgba(0,0,0,.8); position: absolute; left: 0; bottom: 0; color: #fff; font-size: 20px; }
.know .pic .Java>span{ display: inline-block; width: 82px; height: 40px; background: #296FA4; text-align: center; }
.know .pic:hover .picmain{ width: 116%; margin-left: -8%; transition: .8s; }

.know .word{ width: 530px; height: 313px; padding: 35px 25px 0 25px; background: #fff; }
.know .word .darin{ width: 100%; height: 230px;  }

.know .word .darin h4{ font-size: 18px; line-height: 22px; }
.know .word .darin p{ text-indent: 2em; }
.know .word .darin h3 span{ font-size: 18px !important; }
.know .word .darin h1 span{ font-size: 18px !important; }
.know .word .darin h2 span{ font-size: 18px !important; }
.know .word .darin h4 span{ font-size: 18px !important; }
.know .word .darin h5 span{ font-size: 18px !important; }
.know .word .darin h6 span{ font-size: 18px !important; }

.know .word .stuSign{ width: 450px; height: 30px; line-height: 30px; margin-top: 30px; color: #787878; }
.know .word .stuSign .green{ color: #12966F; margin: 0 20px 0 33px;    }
.know .word .stuSign .sign{ color: #fff; display: inline-block; width: 120px; height: 30px; background: #EC6A1E; border-radius: 15px; text-align: center; margin-right: 20px; }
.know .word .stuSign .sign:hover{ background: #2F84C6; }
.know .word .stuSign .signT{ background: #2F84C6; }
.know .word .stuSign .signT:hover{ background: #EC6A1E; }

/* result学习成果展示 */
.result{ width: 100%; height: 595px; background: #fff; box-shadow: 0 -5px 16px #E8EAED; position: relative; text-align: center; padding-top: 40px; }

.result h2{ font-size: 25px; }
.result p{ font-size: 14px; margin: 10px 0 30px 0; }

.result .center .fl{ width: 620px; height: 360px; background: #000; position: relative; }
.result .center .fl dt{ width: 100%; position: absolute; top: 20px; left: 0; color: #fff; text-align: center; display: none; }
.result .center .fl dt h3{ font-size: 20px; }
.result .center .fl dt span{ display: inline-block; width: 95%; font-size: 12px; text-align: left; text-indent: 2em; margin: 20px; }

.result .center .fl:hover img{ opacity: .5; }
.result .center .fl:hover dt{ display: block; transition: 2s; }


.result .center .fr li{ width: 278px; height: 175px; float: left; margin: 0 0 10px 10px; background: #000; position: relative; }
.result .center .fr dt{ width: 100%; position: absolute; top: 10px; left: 0; color: #fff; text-align: center; display: none; }
.result .center .fr dt h3{ font-size: 20px; }
.result .center .fr dt span{ display: inline-block; width: 92%; font-size: 12px; text-align: left; text-indent: 2em; margin: 15px; }

.result .center .fr li:hover img{ opacity: .5; }
.result .center .fr li:hover dt{ display: block; transition: 2s; }

.result .btn{ width: 210px; height: 46px; line-height: 46px; background: #2F84C6; border-radius: 25px; color: #fff; font-size: 20px; margin: 440px auto; }
.result .btn:hover{ background: #053f67; }


/* plan */
.plan{ width: 100%; padding-bottom: 50px; background: #F4F7FA; padding-top: 50px; text-align: center; }
.plan h2{ font-size: 25px; line-height: 26px; margin-bottom: 40px; }

.plan .form .pTop{ width: 1198px; height: 60px; border: 1px solid #58595B; background: #222428; border-bottom: none; text-align: left; font-size: 20px; color: #fff; }
.plan .form .pTop span{ display: inline-block; width: 240px; height: 60px; line-height: 60px; text-align: center; background: url(../images/plan.png) no-repeat; }

.plan .form .pTop .fr{ background: none; width: 300px; text-align: right; padding-right: 20px;height: 45px; }

.plan .form .pTop .fr a{ display: inline-block; height: 32px; background: #505358; border-radius: 20px; line-height: 32px; font-size: 16px; text-align: center; padding: 0 20px 0 20px; margin-left: 20px; }
.plan .form .pTop .fr .yuyue{ color: #fff; background: #EC6A1E; }
.plan .form .pTop .fr .yuyue:hover{ background: #2F84C6; }

.plan .form .pTop .fr .cha{ background: #2F84C6; color: #fff; cursor: pointer; }
.plan .form .pTop .fr .cha:hover{ background: #EC6A1E; }



table,td{ border: 1px solid #58595B; }

.plan .form table{ width: 100%;  border-collapse: collapse; margin-bottom: 30px; }

.plan .form table .Hfive img{ width: 464px; height: 294px; }

.rowone,.rowthree{ font-size: 16px; }
.rowtwo{ font-size: 12px; }
.rowtwo a{ color: #EC6A1E; text-decoration:underline; }
td{ padding: 10px 20px 10px 20px; }



/* 精品课程 */
.course{ width: 100%; background: #fff; text-align: center; padding: 30px 0 10px 20px; box-shadow: 0 3px 10px #EDEEF1; }
.course .center{ margin-top: 12px; }
.course .study{ width: 222px; height: 306px; background: #fff; margin:26px 20px 0 0; float: left; background-size: 100% auto; position: relative; background: #F5F8FB; }
.course .study:hover{ box-shadow: 0 6px 10px #D8DEE5; }

.course .study li{ color: #8C8D8D; text-align: left; margin-left: 20px; margin-top: 10px; }
.course .study li a{ color: #12966F; }
.course .study .btn{ margin-top: 15px; border-radius: 20px; color: #2F84C6; border: 1px solid #2F84C6; width: 182px; height: 38px; line-height: 38px; text-align: center; font-size: 16px; }
.course .study .btn:hover{ background: #2F84C6; color: #fff; }

.course .study p{ color: #fff; position: absolute; top: -7px; left: -10px; height: 20px; line-height: 20px; border: 2px solid #F2F2F2; border-radius: 15px; text-align: center; padding: 0 15px 0 15px; background: -webkit-linear-gradient(left ,#2950C0 ,#7099E8); background: -moz-linear-gradient(left ,#2950C0 ,#7099E8); background: -o-linear-gradient(left ,#2950C0 ,#7099E8); overflow: hidden; }
.course .study h1{ color: #fff; margin-top: 45px; font-family: "宋体"; }
.course .study span{ color: #fff; margin-top: 16px; display: inline-block; }
.course .study .ring{ width: 64px; height: 64px; margin: 0 auto; border-radius: 35px; margin-top: -32px; border: 4px solid #B2BFF8; position: relative; background: #fff; margin-bottom: 20px; }
.course .study .round{ display: block; width: 62px; height: 62px; line-height: 61px; border: 2px solid #fff; border-radius: 32px; background: -webkit-linear-gradient(top ,#7BA2EB ,#1C57C3); background: -moz-linear-gradient(top ,#7BA2EB ,#1C57C3); background: -o-linear-gradient(top ,#7BA2EB ,#1C57C3); position: absolute; left: -1px; top: -17px; }

.course .last{ margin-right: 0; }


.course .one p{ background: -webkit-linear-gradient(left ,#FF3612 ,#FFA089); background: -moz-linear-gradient(left ,#FF3612 ,#FFA089); background: -o-linear-gradient(left ,#FF3612 ,#FFA089); }
.course .one h1{ color: #23E6E4; margin-top: 45px; }
.course .one span{ color: #fff; margin-top: 16px; display: inline-block; }
.course .one .main_wai{ background: #fff; width: 65px; height: 65px; margin: 0 auto; border-radius: 35px; margin-top: -32px; position: relative; line-height: 65px; color: #fff; background: -webkit-linear-gradient(top ,#F79695 ,#D11D1D); background: -moz-linear-gradient(top ,#F79695 ,#D11D1D); background: -o-linear-gradient(top ,#F79695 ,#D11D1D); border: 4px solid #fff; margin-bottom: 20px; }
.course .one .main_wai .mainechars{ position: absolute; top: -26px; left: -26px; }

.course .add{ width: 416px; height: 80px; background: #2F84C6;  border-radius: 45px; margin: 50px auto; color: #fff; margin-top: 410px; }
.course .add .big{ font-size: 26px; font-weight: bold; line-height: 40px; padding-top: 6px; }
.course .add:hover{ background: #053f67; }




.service{ background: #fff; width: 100%; margin: 40px 0 20px 0; height: 140px; padding-top: 30px; min-width: 1200px;}
.service ul { width: 1200px; margin: 0 auto;}
.service ul li{ width: 300px; float: left; display: block; text-align: center;}
.service ul li span{ background: url(../images/icon2.png) no-repeat; width: 70px; height: 70px; display: block; margin: 0 auto; }
.service ul .srv_1 span{ background-position:2px -364px ;}
.service ul .srv_2 span{ background-position:-63px -364px ;}
.service ul .srv_3 span{ background-position:-128px -364px ;}
.service ul .srv_4 span{ background-position:-197px -364px ;}
.service ul li p{ margin-top: 5px; font-size: 14px;}