/*公共样式*/
.colorGary {color: rgba(136, 136, 136, 0.8) !important;}
.vcenter {text-align: center;}
.vleft {text-align: left;}
.vright {text-align: right;}
.vhidden {visibility: hidden;}
.mt10 {margin-top: 10px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt90 {margin-top: 90px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb90 {margin-bottom: 90px !important;}
.mr17 {margin-right: 17.5px;}
.mr40 {margin-right: 39px;}
.mr60 {margin-right: 60px;}
.mr80 {margin-right: 80px;}
.mr81 {margin-right: 81px;}
.mr91 {margin-right: 91px;}
.pl8 {padding-left: 8px;}
.pb40 {padding-bottom: 40px;}
.pb70 {padding-bottom: 70px;}
.pb90 {padding-bottom: 90px;}
.fontwhite {color: white;}
.tindent15 {text-indent: 15px;}
.ft20 {font-size: 20px;}
.fw100 {font-weight: 100;}
h1,h2 {font-size: 46px;}
em { font-style: normal; }
/*公共样式*/

body { padding-top: 60px; font-family: "Microsoft YaHei","微软雅黑"; }

/*主导航样式*/
.h5online-top {height: 60px; background: #333d49; text-align: center; width: 100%;position:fixed; top: 0px; z-index:100;}
.h5online-top ul {float: left; margin-left: 15px; height: 60px;}
.h5online-top ul li {float: left; font-size: 16px; background: url(../img/nav_list_left.png) left 0 no-repeat; padding-left: 16px;}
.h5online-top ul li a {
  color: #fff;
  height: 60px;
  display: block;
  padding: 0 20px;
  line-height: 60px;
  padding-right: 36px;
  background: url(../img/nav_list_right.png) right 0 no-repeat #ffffff;
}
.hot {
  width: 28px; height: 17px; display: block; position: relative; top: 20px;
  background: url(/Public/Apps/topic/ui/img/hot_1.png);
  animation: nav_hot_blink steps(2) 1s infinite;
}
.h5_blink {
  width: 79px; height: 23px; display: block; position: relative; top: 20px;
  background: url(/Public/Apps/topic/ui/img/h5_1.png) no-repeat;
  animation: nav_h5_blink steps(2) 1s infinite;
}
.home-link {
  color: #fff;
  float: right;
  font-size: 15px;
  line-height: 60px;
  padding-left: 30px;
  background: url(../img/icon_home.png) left 18px no-repeat;
}
.h5online-wrap-content {
  width: 1120px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
.h5online-top .h6online-wrap-content a {font-size: 18px;}
h1.com-logo {
  float: left;
  width: 172px;
  height: 60px;
  color: #e34f27;
  font-size: 0px;
  text-indent: -10000px;
  background: url(../img/logo.png) 0 center no-repeat;
}
.Study {
  float: left;
  color: #ffffff;
  font-size: 18px;
  line-height: 60px;
  padding-left: 40px;
}
/*主导航样式*/

/*公共样式*/
.container { width: 1170px !important; }
.grayBg { background: #eee; }
.h2_red { font-size: 40px; text-align: center; color: #ef5453; font-weight: bolder; }
.last { margin-right: 0px !important; }
/*公共样式*/

/*全屏轮播样式*/
#banner { height: 600px; position: relative; }
#banner .swiper-container { width: 100%; min-width: 1200px; height: 600px; overflow: hidden; margin-left: 0; }
#banner li { height: 600px; background-position: center center;background-size: cover;background-repeat: no-repeat; position: relative;}
#banner li a { position: absolute; left: 50%; cursor: pointer; }
#banner .pic1 { background-image: url(../images/banner_1.jpg); }
#banner .pic2 { background-image: url(../images/banner2.jpg); }
#banner .pic3 { background-image: url(../images/banner_3.jpg); }
#banner .pic1 a { position: absolute; width: 400px; height: 80px; left: 50%; margin-left: -220px; bottom: 70px; cursor: pointer; }
#banner .pic3 a { position: absolute; width: 400px; height: 80px; left: 50%; margin-left: -220px; bottom: 70px; cursor: pointer; }
#banner .pic2 a.btn1 { width: 220px; height: 70px; margin-left: -270px; bottom: 120px; }
#banner .pic2 a.btn2 { width: 220px; height: 70px; margin-left: 60px; bottom: 120px; }
/*全屏轮播样式*/

/*所有版块下方发光按钮样式*/
.bigData_btn,.student_btn,.look_more,.talk2Teachers,.getCourses,.more_questions,.getForm { width: 362px; height: 126px; margin: 0 auto 20px; }
.bigData_btn a,.student_btn a,.look_more a,.talk2Teachers a,.getCourses a,.more_questions a,.getForm a { display: block; width: 100%; height: 100%; cursor: pointer; }
.bigData_btn { background: url(../img/bigData_btn.png) no-repeat;}
.student_btn { background: url(../img/student_btn.png) no-repeat;}
.look_more { background: url(../img/look_more_btn.png) no-repeat;}
.talk2Teachers { background: url(../img/talk2Teachers.png) no-repeat; }
.getCourses { background: url(../img/getCourses.png) no-repeat; }
.more_questions { background: url(../img/more_questions.png) no-repeat; }
.getForm { background: url(../img/getForm.png) no-repeat; }
/*所有版块下方发光按钮样式*/

/*零基础学习 / 设计师转行*/
.levels h2 { margin: 40px 0 20px 0px; }
.levels p { font-size: 16px; color: #666; line-height: 24px; font-weight: 350; text-align: center; font-family: STHeiTi; }
.levels ul { padding-top: 20px; }
.levels li { float: left; }
.levels li.middle { margin: 0 30px; }
.levels li a { display: block; width: 370px; height: 102px; text-indent: -9999px; }
.levels li a.level_1 { background: url(../img/levels_icon1.png) no-repeat center; }
.levels li a.level_2 { background: url(../img/levels_icon2.png) no-repeat center; }
.levels li a.level_3 { background: url(../img/levels_icon3.png) no-repeat center; }
/*零基础学习 / 设计师转行*/

/*权威平台发布行业大数据，力证UI/UE设计就业势不可挡*/
.bigData h2 { margin: 40px 0; }
.bigData ul { margin-bottom: 40px; }
.bigData li { float: left; width: 370px; height: 434px; border: 1px solid #efefef; box-shadow: 0 5px 10px rgba(0,0,0,.2); }
.bigData li.middle { margin: 0 30px; }
/*权威平台发布行业大数据，力证UI/UE设计就业势不可挡*/

/*所有版块的标题和描述文字样式*/
.info { margin-bottom: 20px; }
.info .left_icon { float: left; width: 170px; height: 156px; position: relative; }
.info .left_icon div { position: relative; z-index: 2; }
.info .left_icon .bg { width: 306px; height: 235px; position: absolute; z-index: 1; left: -135px; top: -40px; margin-top: -1px; }
.info .left_icon .bg_gray { background: url(../img/bg_gray.png) no-repeat left top; }
.info .left_icon .bg_white { background: url(../img/bg_white.png) no-repeat left top; }
.info .right_text { float: right; width: 970px;}
.info .right_text h2 { height: 60px; text-indent: -9999px; border-bottom: 1px solid #ccc; margin-bottom: 10px; }
.info .right_text p { font-size: 16px; font-family: STHeiTi; line-height: 26px; color: #666; }
.info .right_text strong { font-weight: bolder; color: #333; font-family: 'Microsoft YaHei','微软雅黑'; }
/*所有版块的标题和描述文字样式*/

.partners, .works_show, .teachers, .courses,.questions { padding-top: 40px; }

/*加入蓝鸥*先行迦美，名企Boss邀你来上班！*/
.partners_icon { width: 117px; height: 117px; background: url(../img/partners_icon.png) no-repeat; }
.partners h2 { background: url(../img/partners_title.png) no-repeat left top; }
.partner_list a { float: left; width: 170px; height: 120px; overflow: hidden; margin-right: 30px; margin-bottom: 30px; }
.partner_list img { display: block; }
/*加入蓝鸥*先行迦美，名企Boss邀你来上班！*/

/*蓝鸥 * 先行迦美学员就业实力就这么牛*/
.employment h2 { margin: 20px 0 40px; }
.employment .list_header { height: 48px; background: linear-gradient(to right, #8a49d3, #f67e81); }
.employment .list_header span,.employment .list_table td { color: #fff; font-size: 18px; display: table-cell; line-height: 48px; text-align: center; }
.employment .list_table { padding-bottom: 25px; position: relative; max-height: 350px; overflow: hidden; margin-bottom: 30px; }
.employment .list_table table { transform: translate3d(0,0,0);  }
.employment .list_table td { color: #666; font-size: 14px; border-bottom: 1px solid #ccc; }
.employment .name { width: 185px; }
.employment .education { width: 165px; }
/*.employment .specialty { width: 200px; }*/
.employment .salary { width: 215px; }
.employment .company { width: 340px; }
.employment .position { width: 265px; }
.employment .student_mask { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; background: url(../img/students_mask.png) no-repeat center top #fff; }
.employment .no-data { height: 50px; line-height: 50px; text-align: center; font-size: 18px; color: #ccc; }
.employment .marquee { animation: loop_marquee linear 5s infinite; }
.employment .marquee:hover { animation-play-state: paused; }
/*蓝鸥 * 先行迦美学员就业实力就这么牛*/

/*作品是就业实力的最好证明，有实力更自信*/
.works_show_icon { width: 117px; height: 117px; background: url(../img/works_show_icon.png) no-repeat; }
.works_show h2 { background: url(../img/works_show_title.png) no-repeat left top; }
.works_show .works_list { margin-top: -20px; }
.works_show .pic { width: 270px; height: 190px; overflow: hidden; margin-bottom: 20px; position: relative; }
.works_show .pic img { vertical-align: top; width: 100%; height: 100%; }
.works_show .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/zoom.png) no-repeat center rgba(0,0,0,1); opacity: 0; }
.works_show .mask:hover { animation: imgFadeInOut 2s infinite; }
.works_show .works_list li { float: left; margin-right: 29px; margin-bottom: 20px; }
.works_show .works_list p { font-size: 16px; color: #666; font-family: STHeiTi; }
/*作品是就业实力的最好证明，有实力更自信*/

/*十五年设计经验大咖亲授，少走弯路，轻松起飞*/
.teachers_icon { width: 117px; height: 117px; background: url(../img/teachers_icon.png) no-repeat; }
.teachers h2 { background: url(../img/teachers_title.png) no-repeat left top; }
.teacher_list { margin-top: -20px; }
.teacher_list li { float: left; width: 270px; height: 380px; margin-right: 30px; margin-bottom: 40px; padding-bottom: 20px; }
.teacher_list .box-3d { width: 100%; height: 100%; background: #fff; position: relative; transform-style: preserve-3d; transition: .3s; }
.teacher_list li:hover .box-3d,.teacher_list li.active .box-3d { transform: rotateX(0deg) rotateY(180deg); }
.teacher_list .avatars { margin-bottom: 20px; width: 270px; height: 180px; overflow: hidden; }
.teacher_list .avatars img { width: 100%; height: 100%; transition: .8s;}
/*.teacher_list .avatars img:hover { transform: scale(1.5); }*/
.teacher_list .frontface,.teacher_list .backface { position: absolute; left: 0; top: 0; width: 270px; height: 380px; background: #fff; backface-visibility: hidden; }
.teacher_list .frontface { transform: rotateY(0deg) translateZ(1px); }
.teacher_list .backface { background: linear-gradient(to top, #8a49d4, #f47d83); transform: rotateY(180deg) translateZ(1px); padding: 15px 10px; }
.teacher_list .frontface h3 { color: #666; font-size: 24px; line-height: 1.5; text-align: center; }
.teacher_list .frontface h4 { color: #666; font-size: 16px; line-height: 1.5; text-align: center; }
.teacher_list .frontface .line { width: 240px; height: 0; font-size: 0; overflow: hidden; margin: 10px auto; border-bottom: 1px solid #cbcbcb; }
.teacher_list .frontface p { height: 30px; line-height: 30px; padding-left: 65px; background: url(../img/dot.gif) no-repeat 50px 15px;}
.teacher_list .frontface em { font-size: 20px; padding: 0 3px; }
.teacher_list .backface .line { width: 100px; height: 5px; background: #fff; border-radius: 20px; margin: 30px auto 20px; }
.teacher_list .backface p { color: #fff; text-indent: 2em; }
.teacher_list .backface h3 { color: #fff; text-align: center; font-size: 24px; height: 36px; line-height: 36px; }
.teacher_list .backface h4 { color: #fff; text-align: center; font-size: 16px; height: 26px; line-height: 26px; }

/*十五年设计经验大咖亲授，少走弯路，轻松起飞*/

/*课程体系行业领先，八大模块，梯次教学，易学实用*/
.courses_icon { width: 117px; height: 117px; background: url(../img/courses_icon.png) no-repeat; }
.courses h2 { background: url(../img/courses_title.png) no-repeat left top; }
.courses_list { margin-top: -20px; }
.courses_list li { float: left; width: 270px; height: 348px; position: relative; margin-right: 30px; margin-bottom: 80px; }
.courses_list .courses_header { height: 60px; position: relative;}
.courses_list .courses_wrapper {height: 60px; border-radius: 40px 40px 0 0; position: relative; z-index: 2;}
.courses_list .courses_title { position: absolute; left:0; top: 0; width: 100%; height: 300px; border-radius: 40px 40px 0 0; transition: .3s; padding-top: 20px; }
.courses_list li:hover .courses_title { transform: translateY(-30px); }
.courses_list .courses_title em { display: block; width: 36px; height: 36px; margin: 0 auto; text-indent: -999px; background: url(../img/nums.png) no-repeat; overflow: hidden; }
.courses_list .courses_title span { display: block; color: #fff; text-align: center; font-size: 18px; line-height: 2; }
.courses_list .list { position: absolute; bottom: 0; left: 0; width: 100%; height: 240px; padding-top: 30px; background: #fff; box-shadow: 0 8px 10px rgba(0,0,0,.2); border-radius: 0 0 40px 40px; z-index: 10;}
.courses_list .shadow_layer { position: absolute; width: 100%; height: 50px; background: url(../img/shadow.png) no-repeat; z-index: 5; box-shadow: 0 8px 10px rgba(0,0,0,.2); }
.courses_list .list p { line-height: 1.75; padding: 0 15px; font-size: 16px; color: #666; }
.courses_list .courses_title .num1 { background-position: 0 0; }
.courses_list .courses_title .num2 { background-position: 0 -44px; }
.courses_list .courses_title .num3 { background-position: 0 -90px; }
.courses_list .courses_title .num4 { background-position: 0 -135px; }
.courses_list .courses_title .num5 { background-position: 0 -180px; }
.courses_list .courses_title .num6 { background-position: 0 -226px; }
.courses_list .courses_title .num7 { background-position: 0 -270px; }
.courses_list .courses_title .num8 { background-position: 0 -315px; }
.courses_list .c1 { background: #f0564a; }
.courses_list .c2 { background: #feaa23; }
.courses_list .c3 { background: #6cbab3; }
.courses_list .c4 { background: #608bc7; }
.courses_list .c5 { background: #89ca95; }
.courses_list .c6 { background: #de99bf; }
.courses_list .c7 { background: #af8bbc; }
.courses_list .c8 { background: #ba9b6f; }
/*课程体系行业领先，八大模块，梯次教学，易学实用*/

/*三大职能部门 帮你轻松学习 高薪就业*/
.job_security { width: 1176px; height: 460px; margin: 0 auto; background: url(../img/job_security.png) no-repeat center bottom; }
/*三大职能部门 帮你轻松学习 高薪就业*/

/*课程模块多，学习时间紧，学不会怎么办？*/
.questions .q_body { width: 1030px; margin: 0 auto 20px; background: url(../img/question_bg.png) no-repeat center 40px; padding-top: 40px; }
.questions .q_body h3 { font-weight: bolder; font-size: 18px; color: #666; height: 50px; line-height: 50px; }
.questions .q_body li { border: 1px solid #ccc; border-width: 1px 0; margin-top: -1px; position: relative;}
.questions .q_body p { color: #888; }
.questions .q_body .q_left { width: 430px; float: left; padding-top: 2px; }
.questions .q_body .q_left li { padding: 6px 0 20px 100px; }
.questions .q_body .q_right { width: 430px; float: right; }
.questions .q_body .q_right li { padding: 6px 100px 20px 0; }
.questions .q_body .q_answer { border: none; height: 100px; }
.questions .q_body .q_answer p { color: #188cb2; }
.questions .q_body .q_icon { width: 56px; height: 36px; background: url(../img/question_nums.png) no-repeat; position: absolute; top: 50%; margin-top: -17px; }
.questions .q_body .q_num1 {  left: 0; background-position: 0 0; }
.questions .q_body .q_num3 {  left: 0; background-position: 0 -55px; }
.questions .q_body .q_num5 {  left: 0; background-position: 0 -110px; }
.questions .q_body .q_num2 {  right: 0; background-position: 0 -164px; }
.questions .q_body .q_num4 {  right: 0; background-position: 0 -213px; }
/*课程模块多，学习时间紧，学不会怎么办？*/

/*轻松的环境，优良的学习氛围，全程一站式求学*/
.environment .pic_show { padding-top: 40px; }
.environment .pic_show li { float: left; width: 370px; height: 270px; overflow: hidden; margin-right: 30px; margin-bottom: 24px; }
/*.environment .pic_show img { width: 100%; height: 100%; transition: .5s; }*/
/*.environment .pic_show li:hover img { transform: scale(1.5); }*/
/*轻松的环境，优良的学习氛围，全程一站式求学*/

/*超500+ 名企，万+高薪岗位，诚邀你加入！*/
.footer_banner { height: 372px; background: url(../img/footer_bg.jpg) center; padding-top: 50px; }
.footer_banner .footer_logo { width: 420px; height: 78px; margin: 0 auto; background: url(../img/footer_logo.png); }
.footer_banner .slogan { color: #fff; font-size: 54px; text-align: center; margin: 30px 0 0; }
/*超500+ 名企，万+高薪岗位，诚邀你加入！*/

/*学员作品全屏弹出层*/
.popWin { display: none; z-index: 1000; width: 60%; height: 50%; min-width: 400px; min-height: 300px; position: fixed; left:0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #fff; border-radius: 10px; background-position: center center; background-repeat: no-repeat; }
.popMask { display: none; z-index: 999; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; left: 0; top: 0; }
.popWin .close { background: url(../img/thepop_close.png) 0 0 no-repeat; width: 60px; height: 54px; position: absolute; right: -21px; top: -21px; cursor: pointer; }
/*学员作品全屏弹出层*/


/*左侧悬浮*/
.ni_left{ position:fixed; left:0;top:50%; height:580px; padding-left:0;margin-top:-278px; z-index:101;-webkit-box-shadow:0.7px 0.7px 27px 0 rgba(39, 40, 42, 0.15); -moz-box-shadow: 0.7px 0.7px 27px 0 rgba(39, 40, 42, 0.15); box-shadow:0.7px 0.7px 27px 0 rgba(39, 40, 42, 0.15);}
.ni_left li{  background:#ffffff; font-size:13px; color:#4f5362;}
.ni_left li a{width:79px; height:83px; display:block; overflow:hidden;}
.ni_left li i{ font-size:24px; color:#00abf7; margin:18px auto 0; display:block; width:24px;}
.ni_left li p{ line-height:24px; text-align:center; font-size:12px;margin:0;}
.ni_left li:hover{ background:#00abf7}
.ni_left li:hover i{color:#ffffff;}
.ni_left li:hover a{color:#ffffff;}
.ni_left li:hover p{color:#ffffff;}
.ni_left li.active{ background:#00abf7}
.ni_left li.active i{color:#ffffff;}
.ni_left li.active a{color:#ffffff;}
.ni_left li.active p{color:#ffffff;}

@media screen and (max-width: 1366px) 
{
.ni_left{ position:fixed; left:0;top:50%; height:475px; margin-top:-227px; z-index:101;-webkit-box-shadow:0.7px 0.7px 27px 0 rgba(39, 40, 42, 0.15); -moz-box-shadow: 0.7px 0.7px 27px 0 rgba(39, 40, 42, 0.15); box-shadow:0.7px 0.7px 27px 0 rgba(39, 40, 42, 0.15);}
.ni_left li{  background:#ffffff; font-size:10px; color:#4f5362;}
.ni_left li a{width:65px; height:68px; display:block; overflow:hidden;}
.ni_left li i{ font-size:20px; color:#00abf7; margin:20px auto 0; display:block; width:20px;}
.ni_left li p{ line-height:23px; text-align:center;font-size:10px;margin:0;}
.ni_left li:hover{ background:#00abf7}
.ni_left li:hover i{color:#ffffff;}
.ni_left li:hover a{color:#ffffff;}
.ni_left li:hover p{color:#ffffff;}
.ni_left li.active{ background:#00abf7}
.ni_left li.active i{color:#ffffff;}
.ni_left li.active i.i01{&#xe604}
.ni_left li.active a{color:#ffffff;}
.ni_left li.active p{color:#ffffff;}
}