
/*课程介绍 轮播*/
.friend{width:80%; height:auto;margin:30px auto 50px auto;}
.mr_frbox{height:auto;padding:0px; position:relative;}
.mr_frBtnL{height:40px; cursor:pointer;display:inline; position:absolute; top:40%; left:10px; z-index:50;}
.mr_frBtnR{height:40px; cursor:pointer; position:absolute; top:40%; right:10px; z-index:50;}
.mr_frUl{width:94%; height:auto; margin:0px auto;}
.mr_frUl ul li{width:266px; display:inline; float:left; margin:0px 10px; background:#f3f5f7; overflow:hidden; border-radius:10px; position:relative;}
.mr_frUl ul li img{width:100%; height:200px; display:block; margin:0px auto; transition:0.6s;}
.mr_frUl ul li:hover img{transform: scale(1.1);}

.friend03{width:100%; height:auto; margin:30px auto 50px auto;}
.mr_frbox03{height:auto;padding:0px; position:relative; margin:0px auto;}
.mr_frBtnL03{width:24px;height:50px; cursor:pointer;display:inline; position:absolute; top:160px; left:0px; z-index:50;}
.mr_frBtnR03{width:24px;height:50px; cursor:pointer; position:absolute; top:160px; right:0px; z-index:50;}
.mr_frUl03{width:1300px; height:auto; margin:0px auto;}
.mr_frUl03 ul li{width:250px; display:inline; float:left; margin:0px 5px; background:#f8f8f8; overflow:hidden; border-radius:10px; position:relative;}
.mr_frUl03 ul li .div01{width:100%; height:275px; overflow:hidden; border:0px #fff solid; margin:0px auto; background:#000;}
.mr_frUl03 ul li h3{line-height:55px; font-size:18px; position:relative; padding:0px 25px;}
.mr_frUl03 ul li h3 span{position:absolute; top:0px; right:20px; font-size:12px; color:#999; font-weight:normal;}
.mr_frUl03 ul li p{min-height:100px; padding:0px 25px 0px 25px; line-height:25px; color:#999;}

.mr_frUl03 ul li img{width:100%; height:auto; min-height:275px; display:block; transition: 0.6s;}
.mr_frUl03 ul li:hover img{transform: scale(1.2); opacity:0.5; filter:alpha(opacity=50);}

.mr_frUl03 ul li .img01{width:20px; height:20px;min-height:20px; display:block;position:absolute; left:45%; top:20%; opacity:0.0; filter:alpha(opacity=0);}
.mr_frUl03 ul li:hover .img01{position:absolute; left:45%; top:30%; opacity:0.7; filter:alpha(opacity=70);}

.friend02{width:100%; height:auto;margin:30px auto 50px auto;}
.mr_frbox02{height:auto;padding:0px; position:relative;}
.mr_frBtnL02{height:40px; cursor:pointer;display:inline; position:absolute; top:30%; left:10px; z-index:50;}
.mr_frBtnR02{height:40px; cursor:pointer; position:absolute; top:30%; right:10px; z-index:50;}
.mr_frUl02{width:94%; height:auto; margin:0px auto; overflow:hidden; background:url(../images/dian06.png) repeat-x 0px 260px;}
.mr_frUl02 ul li{width:266px; display:inline; float:left; margin:0px 25px 0px 0px; overflow:hidden; border-radius:10px; position:relative;}
.mr_frUl02 ul li .div01{height:200px; background:#f8f8f8; text-align:center; border-radius:10px; padding:20px;}
.mr_frUl02 ul li .div01 h2{line-height:50px; font-size:2.6rem; color:#31a87d;}
.mr_frUl02 ul li .div01 p{width:80%; line-height:25px; font-size:14px; padding-top:20px; margin:0px auto;}
.mr_frUl02 ul li .div02{padding-top:15px;}
.mr_frUl02 ul li .div02 span{ width:15px; height:15px; line-height:20px; text-align:center; border-radius:15px; background:#31a87d; color:#FFF; display:block; margin:0px auto;}
.mr_frUl02 ul li .div02 h2{line-height:50px; text-align:center; font-size:2rem; color:#999;}
.mr_frUl02 ul li:hover .div01{background:#31a87d;}
.mr_frUl02 ul li:hover .div01 h2,
.mr_frUl02 ul li:hover .div01 p
{color:#FFF;}




.friend01{width:100%; height:auto; margin:30px auto 50px auto; overflow:hidden;}
.mr_frbox01{height:auto;padding:0px; position:relative; margin:0px auto;}
.mr_frBtnL01{width:24px;height:50px; cursor:pointer;display:inline; position:absolute; top:160px; left:0px; z-index:50;}
.mr_frBtnR01{width:24px;height:50px; cursor:pointer; position:absolute; top:160px; right:0px; z-index:50;}
.mr_frUl01{width:1300px; height:auto; margin:0px auto;}
.mr_frUl01 ul li{width:250px; display:inline; float:left; margin:0px 5px; background:#fff; overflow:hidden; border-radius:10px; position:relative;}
.mr_frUl01 ul li .div01{width:100%; height:180px; overflow:hidden; border:0px #fff solid; margin:0px auto; background:#000;}
.mr_frUl01 ul li .div02{width:100%; height:180px; text-align:center; font-size:14px; margin:0px auto;}
.mr_frUl01 ul li h3{line-height:55px; font-size:18px; position:relative; padding:0px 25px;}
.mr_frUl01 ul li p{min-height:90px; padding:0px 25px 0px 25px; line-height:25px; color:#999;}

.mr_frUl01 ul li img{width:100%; height:auto; min-height:180px; display:block; transition: 0.6s;}
.mr_frUl01 ul li:hover img{transform: scale(1.2); opacity:0.5; filter:alpha(opacity=50);}

.mr_frUl01 ul li .img01{width:20px; height:20px;min-height:20px; display:block;position:absolute; left:45%; top:15%; opacity:0.0; filter:alpha(opacity=0);}
.mr_frUl01 ul li:hover .img01{position:absolute; left:45%; top:30%; opacity:0.7; filter:alpha(opacity=70);}

@keyframes mymove
{
0% {opacity:0.0; filter:alpha(opacity=0);}
1% {top:60%; opacity:0.0; filter:alpha(opacity=0);}
100% {top:40%; opacity:1.0; filter:alpha(opacity=100);}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {opacity:0.0; filter:alpha(opacity=0);}
1% {top:60%; opacity:0.0; filter:alpha(opacity=0);}
100% {top:40%; opacity:1.0; filter:alpha(opacity=100);}
}



.mr_zhe{width:220px;position:absolute;top:0;background:rgba(78, 164, 181, 0.65) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/filter:Alpha(opacity=80);background:#4ea4b5;/*实现IE背景透明*//*height:389px;*/left:0;right:0;}
.mr_zhe_i h1{text-align:center;font-size:182px;height:138px;line-height:138px;margin-top:72px;margin-bottom:64px;font-weight:bold;color:#fff;}
.mr_zhe_p{margin-bottom:60px;}
.mr_zhe_p h3{text-align:center;font-size:15px;font-weight:bold;color:#fff;line-height:30px;}
.mr_zhe_p h3 span{display:block;margin:0 auto;width:260px;font-size:18px;border-bottom:1px solid #f4f4f4;}
.mr_zhe_hover{bottom:-596px;height:200px;position:absolute;width:300px;background:rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/filter:Alpha(opacity=80);background:#0a0a0a;/*实现IE背景透明*/}
.mr_zhe_hover h1{text-align:center;height:40px;line-height:40px;margin:22px 0;color:#fff;}