/* 精品课首页 */
body.boutique{ background:#f3f3f3 !important; font:14px "微软雅黑",Arial,sans-serif; padding-bottom:50px;}
body.boutique a{ text-decoration:none;}
body.boutique ul, body.boutique li, body.boutique dl, body.boutique dt, body.boutique dd{ margin:0; padding:0; border:0; list-style:none;}
header.boutique{ height:80px; width:1200px; margin:0 auto; overflow:hidden; position:relative;}
header.boutique .pull-left img{ margin-top:20px;}
header.boutique .pull-right{ height:80px; line-height:80px; color:#48c1df;}
header.boutique .pull-right a{ color:#48c1df; font-size:16px;}
header.boutique .pull-right span{ margin:0 5px; font-size:16px;}
header.boutique .middle{ position:absolute; top:22px; left:320px;}
header.boutique .middle input[type=text]{border:0; outline:none; margin:0; padding:0; width:500px; height:35px; line-height:35px; padding:0 10px; display:block; float:left;}
header.boutique .middle input[type=button]{border:0; outline:none; margin:0; padding:0; width:100px; height:35px; background:#48c1df; display:block; float:left; color:white; font-size:16px;}
header.boutique .middle input[type=button]:hover{ background:#6dc5dc;}
nav.boutique i{ float:left; display:block; width:1100px; height:45px;}
nav.boutique{ width:1200px; height:45px; background:#3fc0e1; position:relative; margin:0 auto; margin-top:10px;}
nav.boutique li{ float:left; height:45px; line-height:45px; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; position:relative;}
nav.boutique span{ float:left; width:72px; height:27px; line-height:25px; text-align:center; border:1px solid white; color:#333333; border-radius:3px; margin-top:9px; cursor:pointer; margin-left:10px;}
nav.boutique li a{ font-size:16px; color:#202020; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; display:block; padding:0 20px;}
nav.boutique li.active, nav.boutique li:hover{ background:#2aa7c8;}
nav.boutique li.active a, nav.boutique li:hover a{ color:white;}
nav.boutique ul{ float:left; display:block;}
/*nav.boutique ul:nth-child(2){ float:left; display:none;}*/
nav.boutique li dl{ position:absolute; top:45px; left:0; display:block; display:block; padding:5px 0; background:#6dc5dc; display:none; z-index:9;}
nav.boutique li dl dd{ white-space:nowrap; width:200px; heihgt:33px; line-height:33px; background:#6dc5dc;}
nav.boutique li dl dd a{ padding-left:20px; padding-right:20px; width:200px; color:#3f3f3f !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
nav.boutique li dl dd:hover{ background:#55bbd6;}
nav.boutique li dl dd:hover a{ color:white !important;}
nav.boutique i{ display:block; width:auto; height:45px; margin:0 auto; position:relative; font-style:normal;}
nav.boutique .form{ z-index:9;}
nav.boutique .form .b{ width:50px; height:29px; line-height:29px; background:url(../images/fd.png) no-repeat 10px 6px; position:absolute; right:0; top:8px; border:0; outline:0;}
nav.boutique .form .b:hover{ background:#3fc0e1 url(../images/fd.png) no-repeat 7px 6px;}
nav.boutique .form i{ width:350px; height:29px; line-height:29px; position:absolute; right:50px; top:8px; display:block; background:#3fc0e1; display:none;}
nav.boutique .form .t{ width:320px; height:29px; line-height:29px; border:0; outline:0; border-radius:0; display:block; text-align:left; float:right;}
.banner.boutique{ width:1200px; height:550px; background:white; margin:0 auto;}
.banner.boutique .pull-left{ background:#3fc0e1; width:270px; height:550px; border:1px solid #4fa4ba;}
.banner.boutique .pull-left ul{ width:230px; height:510px; margin:20px;}
.banner.boutique .pull-left li{ border-bottom:1px dashed white; padding-bottom:15px; margin-bottom:15px;}
.banner.boutique .pull-left li:last-child{ border:none;}
.banner.boutique .pull-left dt, .banner.boutique .pull-left dd{ width:230px; height:32px; line-height:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; cursor:pointer;}
.banner.boutique .pull-left dt:hover{ font-size:18px;}
.banner.boutique .pull-left dd:hover{ font-size:16px;}
.banner.boutique .pull-left dt{ font-size:16px;}
.banner.boutique .pull-left dd{ font-size:14px; padding-left:20px;}
.banner.boutique .pull-right{ height:550px; width:930px;}
.banner.boutique .pull-right .top{-moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; cursor:pointer;}
.banner.boutique .pull-right .top:hover{ opacity:0.8;}
.banner.boutique .pull-right .bottom{ margin-top:10px;}
.banner.boutique .pull-right .bottom li{ float:left; margin:0 0 0 10px; width:300px; height:220px; position:relative; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; cursor:pointer;}
.banner.boutique .pull-right .bottom li:hover{ opacity:0.8;}
.banner.boutique .pull-right .bottom li img{ width:300px; height:220px;}
.banner.boutique .pull-right .bottom li p{ width:250px; height:50px; margin:0; position:absolute; bottom:20px; left:25px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; z-index:1; color:white; font-size:24px;}
article.boutique{ width:1200px; margin:0 auto;}
.boutiqueClassList{ margin-top:20px;}
.boutiqueClassList .top{ width:1200px; height:42px; line-height:42px; background:white; margin-bottom:5px;}
.boutiqueClassList .top .pull-left{ padding:0; margin:0; border-left:10px solid #6dc5dc; padding-left:10px; height:42px; line-height:42px; font-size:16px; font-weight:bold; color:#5c5c5c;}
.boutiqueClassList .top .pull-right a{ margin-right:10px; font-style:italic; color:#a7a7a7; font-size:13px;}
.boutiqueClassList .box{ width:1200px; min-height:236px;}
.boutiqueClassList .box li{ float:left; margin-right:10px; overflow:hidden; position:relative; }
.boutiqueClassList .box li:nth-child(4n){ margin-right:0;}
.boutiqueClassList .box li:nth-child(1n), .boutiqueClassList .box > li:nth-child(3n){ width:293px;}
.boutiqueClassList .box li:nth-child(2n), .boutiqueClassList .box > li:nth-child(4n){ width:292px;}
.boutiqueClassList .box li:nth-child(1n) .img img, .boutiqueClassList .box li:nth-child(3n) .img img{ width:293px; height:236px;}
.boutiqueClassList .box li:nth-child(2n) .img img, .boutiqueClassList .box li:nth-child(4n) .img img{ width:292px; height:236px;}
.boutiqueClassList .box li .img img{-moz-transition:0.5s transform; -ms-transition:0.5s transform; -o-transition:0.5s transform; -webkit-transition:0.5s transform;transition:0.5s transform; -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0);-webkit-transform:translateZ(0); transform:translateZ(0);}
.boutiqueClassList .box li:hover .img img{ -moz-transform:scale(1.5,1.5); -ms-ransform:scale(1.5,1.5); -o-transform:scale(1.5,1.5);	-webkit-transform:scale(1.5,1.5); transform:scale(1.5,1.5);}
.boutiqueClassList .box li cite{ position:absolute; right:10px; top:10px; font-style:normal; color:white; cursor:pointer; z-index:3;}
.boutiqueClassList .box li cite img{ margin-right:3px;}
.boutiqueClassList .box li i{ opacity:0; width:100%; height:236px; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; font-style:normal; color:white; padding:73px 20px; -moz-transition:0.5s all; -ms-transition:0.5s all; -o-transition:0.5s all; -webkit-transition:0.5s all;transition:0.5s all; -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0);-webkit-transform:translateZ(0); transform:translateZ(0);}
.boutiqueClassList .box li:hover i{ opacity:1;}
.boutiqueClassList .box li i p{ margin:0; height:30px; line-height:30px; font-size:16px; width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.boutiqueClassList .box li i p span{ margin-right:5px; padding-right:5px;}
.boutiqueClassList .box li i p span:last-child{ margin-right:0; padding-right:0;}
.boutiqueClassList .box li i p strong{ font-weight:normal; margin-left:5px;}
.boutiqueClassList .box li b{ opacity:1; width:100%; height:56px; line-height:56px; position:absolute; bottom:0; left:0; background:rgba(0,0,0,0.65); color:white; padding:0 20px; font-size:18px; text-align:center; font-weight:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -moz-transition:0.5s all; -ms-transition:0.5s all; -o-transition:0.5s all; -webkit-transition:0.5s all;transition:0.5s all; -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0);-webkit-transform:translateZ(0); transform:translateZ(0);}
.boutiqueClassList .box li:hover b{ opacity:0;}

/* 精品课列表页 */
.boutiqueClassList .list li{ margin-bottom:10px;}
.boutiqueClassList nav .pagination{ float:right;  margin:10px 0 50px 0;}

/* 精品课内容页 */
.jpContentTop{ width:1160px; height:auto; min-height:260px; box-sizing:content-box; background:white; padding:20px; margin-top:20px;}
.jpContentTop .top{ height:40px; line-height:40px;}
.jpContentTop .top b{ font-size:20px; margin-right:20px;}
.jpContentTop .top i{ font-style:normal; width:auto;}
.jpContentTop .top span{ font-size:14px; border-right:1px solid #656565; color:#656565; padding-right:10px; margin-right:10px;}
.jpContentTop .top span:last-child{ border:none;}
.jpContentTop .box{ margin-top:15px;}
.jpContentTop .box .img{ width:360px; height:200px; overflow:hidden; cursor:pointer;}
.jpContentTop .box .img img{ width:360px; height:200px;-moz-transition:0.5s transform; -ms-transition:0.5s transform; -o-transition:0.5s transform; -webkit-transition:0.5s transform;transition:0.5s transform; -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0);-webkit-transform:translateZ(0); transform:translateZ(0);}
.jpContentTop .box .img img:hover{ -moz-transform:scale(1.5,1.5); -ms-ransform:scale(1.5,1.5); -o-transform:scale(1.5,1.5);	-webkit-transform:scale(1.5,1.5); transform:scale(1.5,1.5);}
.jpContentTop .box .text{ width:520px; margin-left:20px;}
.jpContentTop .box h3{ margin:0; margin-bottom:5px; font-size:16px;}
.jpContentTop .box p{ line-height:200%;}
.jpContentTop .box .pull-right{ position:relative; height:200px;}
.jpContentTop .box .pull-right span, .jpContentTop .box .pull-right cite{ display:block; width:120px; height:42px; line-height:42px; text-align:center; font-style:normal; font-size:18px; color:white; margin-bottom:20px; margin-right:30px; cursor:pointer;}
.jpContentTop .box .pull-right span:hover, .jpContentTop .box .pull-right cite:hover{ opacity:0.9;}
.jpContentTop .box .pull-right span{ background:#ffa800;}
.jpContentTop .box .pull-right span.active, .jpContentTop .box .pull-right cite.active{ background:#9d9d9d;}
.jpContentTop .box .pull-right cite{ background:#72d2ce;}
.jpContentTop .box .pull-right b{ font-weight:normal; font-size:14px; color:#72d2ce; cursor:pointer; position:absolute; bottom:10px; right:30px;}
.jpconHide{ clear:both; width:1200px; height:250px; background:white; padding:0 20px 20px 20px; display:none;}
.jpconHide ul{ border-top:1px #ccc dashed !important; width:1160px; height:230px; overflow:hidden;}
.jpconHide li{ display:block; width:385px; margin-top:20px !important; height:230px; border-right:1px dashed #ccc !important; float:left;}
.jpconHide li:nth-child(2){ width:380px;}
.jpconHide li:nth-child(3){ width:390px;}
.jpconHide li h4{ font-size:16px;}
.jpconHide li dd{ line-height:33px; line-height:3px; width:100%; overflow:hidden; cursor:pointer;}
.jpconHide li dd img{ margin-right:4px; float:left; margin-top:5px;}
.jpconHide li dd span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:345px; display:inline-block; float:left; height:33px; line-height:33px;}
.jpconHide li.v{ padding-left:20px; position:relative;}
.no-video{ width:300px; height:154px; position:absolute; left:20px; top:40px;}
.jpconHide li.v .video span{width:300px; height:154px; position:relative; display:none;}
.jpconHide li.v .video span:first-child{ display:block;}
.jpconHide li.v .video span > img{ width:300px; height:154px;}
.jpconHide li.v .video span i{ display:block; content:""; border:8px solid rgba(0,0,0,0.25); position:absolute; left:0; top:0; width:300px; height:154px; background:rgba(0,0,0,0.2); z-index:1;}
.jpconHide li.v .video span i img{ position:absolute; left:110px; top:35px; cursor:pointer; opacity:0.8;}
.jpconHide li.v .video span i img:hover{opacity:1;}
.jpconHide li.v b{ display:block; position:absolute; right:20px; top:40px;}
.jpconHide li.v b cite{ display:block; width:25px; height:25px; background:#eaffff; font-style:normal; margin-bottom:5px; text-align:center; line-height:25px; font-weight:normal;  color:#d0d0d0; cursor:pointer;}
.jpconHide li.v b cite.active, .jpconHide li.v b cite:hover{ color:#3f3f3f; background:#e5faff;}
.jpconHide li.w{ padding-left:20px; border:none !important;}
.jpconHide li.w dd span{ max-width:260px;}
.jpconHide li.w dd .down{ float:left; height:33px !important; line-height:33px !important; margin-left:10px; display:block;}

.jpContent .top{ width:1200px; height:50px; margin-top:20px; overflow:hidden; background:#f3f3f3; position:relative; z-index:1;}
.jpContent .top ul{width:600px; height:50px; overflow:hidden; margin:0 300px; display:block;}
.jpContent .top li{ width:200px; height:50px; line-height:50px; text-align:center; float:left; border:1px dashed #f3f3f3; border-bottom:none !important; border-top-left-radius:10px; border-top-right-radius:10px; background:#f3f3f3; color:#5a5b5b; font-size:16px; font-weight:bolder; cursor:pointer;}
.jpContent .top li:hover, .jpContent .top li.active{border:1px dashed white; background:#acdddd; color:white;}
.jpContent .middle{ width:1200px; padding:20px; background:#acdddd; border:1px dashed white; position:relative; z-index:0; margin-top:-1px; overflow:hidden; display:none;}
.jpContent .middle ul{ margin-left:5px;}
.knowledgeLabel{ height:36px; line-height:36px; background:#e5faff; border:2px dashed #48c1df !important; padding:0 20px !important; margin-right:20px !important; float:left; box-sizing:content-box; margin-bottom:10px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; cursor:pointer;}
.skillLabel{ height:36px; line-height:36px; background:#fdeef5; border:2px dashed #f19ec2 !important; padding:0 20px !important; margin-right:20px !important; float:left; box-sizing:content-box; margin-bottom:10px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; cursor:pointer;}
.jpContent .middle .text{ line-height:200%; color:#5a5b5b;}
.jpContent .box{ width:1200px; height:auto; min-height:500px; background:white; margin-top:20px; border:2px dashed #f3f3f3;}
.w180{ width:180px;}
.w170{ width:170px;}
.w250{ width:250px;}
.w260{ width:260px; padding-top:10px !important;}
.w140{ width:140px;}
.w160{ width:160px;}
.tLeft{ text-align:left;}
.tCenter{ text-align:center;}
.jpContent .box table{ margin:20px;}
.jpContent .box tbody tr:hover{ background:#f9f9f9;}
.jpContent .box td{ padding:5px 10px; line-height:180%; overflow:hidden;}
.jpContent .box thead td{ height:40px; line-height:40px; font-size:16px; color:#323232; border-right:1px solid #ddddd8;}
.jpContent .box thead td:last-child{ border:none;}
.jpContent .box tbody td{ border-right:1px solid #ddddd8; border-top:1px solid #ddddd8; height:130px; overflow:hidden; color:#646464;}
.jpContent .box tbody td:last-child{ border-right:none;}
.jpContent .box tbody td b{ display:block; font-size:16px; color:#313131; font-weight:normal; margin-bottom:5px;}
.jpContent .box tbody td button{ width:64px; height:28px; border:none; background:#ffbd3f; color:white; border-radius:3px; cursor:pointer; box-sizing:content-box; line-height:28px;}
.jpContent .box tbody td button.i{ background:#8cdbd8;}
.jpContent .box tbody td i{ display:block; width:100%; max-height:130px; box-sizing:content-box; font-style:normal; overflow-y:auto; overflow-x:hidden; height:auto;}

.shadowBox{ width:100%; height:100%; background:rgba(0,0,0,0.5); position:fixed; left:0; top:0; z-index:99; display:none;}
.videoBoutique{ padding:10px; background:white; border-radius:10px; min-width:500px; max-width:1000px; position:fixed; left:50%; top:50%; border:1px solid #ccc; -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); box-shadow:0 0 10px #ccc; display:none; z-index:100;}

.boutiqueClassList .pox{ width:1200px; height:auto; background:white; padding:15px 20px 10px 20px; margin-bottom:10px; overflow:hidden; font-size:16px; color:#9e9e9e;}
.boutiqueClassList .pox a{ color:#9e9e9e;}

.boutiqueClassList .pox .q{ overflow:hidden; line-height:30px; min-height:30px; margin-bottom:5px;}
.boutiqueClassList .pox .dt{ float:left; width:100px; font-weight:normal; color:#3dbfe0; line-height:30px;}
.boutiqueClassList .pox .dd{ float:left; overflow:hidden; width:1060px; line-height:30px;}
.boutiqueClassList .pox .dd a{ line-height:30px;}
.boutiqueClassList .pox .dd dd{ margin-right:20px; float:left; line-height:30px; cursor:pointer;}
.boutiqueClassList .pox .padding{ border:1px solid #ccc; line-height:18px !important; margin-top:4px; padding:1px;}
.boutiqueClassList .pox dd:hover, .boutiqueClassList .pox dd:hover a, .boutiqueClassList .pox .active a, .boutiqueClassList .pox .active{ color:#3dbfe0; border-color:#3dbfe0;}
#boutique-class11, #boutique-class22, #boutique-class33{ display:none;}

.web-position{ color:#bbbbbb; margin-top:-10px; margin-bottom:10px;}
.web-position a{color:#bbbbbb;}