/*
!*TODO 头部*!
header,.header_app{
    width:100%;
    min-width: 1100px;
    background-color:#000;
}
!**!
.head_nav{
    width:1100px;
    margin:0 auto;
    height:60px;
}
!*TODO logo*!
a.head_logo{
    width:194px;
    height:54px;
    line-height: 54px;
    margin-top:6px;
    margin-left:6px;
    display: inline-block;
    float:left;
    background: url('../images/logo.png') no-repeat 0 0;
    !*background: url('http://static.hdmooc.com/common/images/logo.png') no-repeat 0 0;*!
}
ul.head_text{
    display: inline-block;
    float:left;
    margin: 17px auto 0 32px;
}
ul.head_text li{
    float:left;
    padding-left:10px;
    padding-right:10px;
    margin-right:12px;
    height:30px;
    line-height:30px;
}
ul.head_text li:hover{
    background-color: rgba(51,51,51,.6);
}
ul.head_text li a{
    color:#fff;
    font-size:16px;
    text-decoration: none;
}
ul.head_text li a:hover{
    cursor: pointer;
}
!*TODO 导航栏右侧*!
.head_right{
    height:60px;
    !*line-height: 60px;*!
    float:right;
    position: relative;
}
.head_right>div{
    display: inline-block;
}
.head_right>div.head_search{ display: none; }
!*TODO 搜索框*!
.head_search{
    height:24px;
    line-height: 24px;
    position: relative;
}
.head_search input{
    width:110px;
    height:24px;
    line-height: 24px;
    border-radius:12px;
    background-color: transparent;
    border:1px solid #fff;
    outline: none;
    color:#fff;
    padding:3px 10px;
    float:right;
    -webkit-transition:width linear 250ms;
    -moz-transition:width linear 250ms;
    -o-transition:width linear 250ms;
    transition:width linear 250ms;
    margin: 7px 12px;
    padding-right:10px;
    box-sizing: border-box;
}
.head_search input:focus{
    width:150px;
}
.head_search span{
    width:12px;
    height:12px;
    color:#fff;
    display: inline-block;
    background: url(../images/icon_kongjian.png) no-repeat 0 -22px;
    cursor: pointer;
    position: absolute;
    right:8px;
    top:6px;
}
!*TODO 消息提醒*!
.head_alert{
    width:24px;
    margin-right: 10px;
    position: relative;
    top: 3px;
    left: 10px;
}
.head_alert a{
    text-decoration: none;
}
.head_alert a:hover{
    text-decoration: none;
}
.head_alert .iconfont{
    font-size:24px;
    color:#fff;
}
.head_alert_number{
    width:14px;
    height:14px;
    line-height:14px;
    color:#fff;
    font-size:10px;
    text-align: center;
    background-color: #e0445a;
    border-radius:50%;
    padding:0;
    position: absolute;
    right:-4px;
    top:-2px;
}
.head_right .log{
    font-size: 14px;
    color: #fff;
    line-height: 60px;
    margin-left: 16px;
    float: right;
}
.head_right .log a{
    color:#fff;
    text-decoration: none;
}

!*TODO 用户头像*!
.head_user{
    width:45px;
    height:60px;
    line-height: 60px;
    margin-left:15px;
}
.head_user a{
    color:#333;
    display: inline-block;
}
.head_user a:hover{
    color:rgba(248,155,56,.8);
    text-decoration: none;
}
.head_user img{
    width:30px;
    height:30px;
    vertical-align: middle;
    border-radius:50%;
    cursor: pointer;
    !*alt样式*!
    line-height: 30px; white-space: nowrap; color: #fff;
}
!*头像退出窗口*!
.head_user .hover_exit{
    width:90px;
    !*height:130px;*!
    background-color: #fff;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3);
    -moz-box-shadow: 0 2px 5px  rgba(0,0,0,.3);
    box-shadow: 0 2px 5px  rgba(0,0,0,.3);
    position: absolute;
    top:60px;
    right:-30px;
    z-index: 100;
    display: none;
}
.head_user .hover_exit ul li{
    text-align: center;
    font-size:14px;
    color:#333;
    line-height: 30px;
    height:30px;
    cursor: pointer;
}
.head_user .hover_exit ul li:hover{
    color:#f89b38;
    background-color: rgba(248,155,56,.2);
}
.head_user .hover_exit ul li.user_name{
    width:90px;
    box-sizing: border-box;
    padding: 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #eee !important;
    color: #999;
    cursor: default;
}
!*TODO 底部*!
footer{
    width:100%;
    min-width: 1100px;
    height:72px;
    background-color: #000;
}
.footer_center{
    width:1100px;
    height:72px;
    margin:0 auto;
}
.footer_center span,.footer_center ul li{
    color:#ccc;
    font-size:12px;
    height:72px;
    line-height: 72px;
    float: left;
}
.footer_center ul{
    float: right;
    margin-right:20px;
    margin-bottom:0;
}
.footer_center ul li{
    float: left;
    margin-right:6px;
}
.footer_center ul li a{
    color:#ccc;
}
.footer_center span a{ color:inherit; }
.footer_center span a:hover{ text-decoration: underline !important; }
.footer_center ul.footer_about_us li a:hover{ text-decoration: underline !important; }

!*TODO 进阶式课程6个页面*!
.foot-btn a{
    display: inline-block;
}


!*!***************TODO 个人中心通用样式**************!*!
footer{
    clear: both;
}*/

/*.wrap { height: auto; min-height: 100%; margin: 0 auto -238px; padding: 0 0 238px;}*/
/*.wrap > .container { width: 1200px !important; max-width: none !important; padding: 20px 0; }*/

/*head*/
.head-nav{ width: 100%; height:70px; background-color: rgba(255,255,255,1); border-bottom: 1px solid rgba(136, 136, 136, .2); }
.head-nav .contain{ position: relative; width: 1200px; height: 100%; text-align: center; margin: 0 auto; }
.head-nav .head-logo{ position: absolute; top: 0; left:0; width: 146px; height: 100%; padding-top: 16px; text-align: left; }
.head-nav .head-logo img{ width: auto; }

.head-nav .head-right{ position: absolute; top: 0; right:0; height: 100%; line-height: 70px; }
.head-nav .head-right .log,.head-nav .head-right .log a{ color: #999; }
.head-nav .head-right .log a:hover{ color: #f89b38; }

.head-nav .head-text{ display: inline-block; }
.head-nav .head-text .nav-btn{ margin:0 10px; line-height: 70px; }
.head-nav .head-text .nav-btn a:hover,.head-nav .head-text .nav-btn.active a{ color: #f89b38; }

.head_alert{ width:24px; height: 100%; margin-right: 10px; position: relative; top: 0; left: 10px; }
.head_alert a{ text-decoration: none; }
.head_alert a:hover{ text-decoration: none; }
.head_alert .iconfont{ font-size:24px; color:#333; }
.head_alert a:hover .iconfont{ color:#f89b38; }
.head_alert_number{ width:14px; height:14px; line-height:14px; color:#fff; font-size:10px; text-align: center; background-color: #e0445a; border-radius:50%; padding:0; position: absolute; right:-4px; top:24px; }

.head_user{ position: relative; width:45px; height:70px; line-height: 70px; margin-left:15px; }
.head_user a{ color:#333; display: inline-block; }
.head_user a:hover{ color:rgba(248,155,56,.8);  text-decoration: none;  }
.head_user img{ width:30px; height:30px; vertical-align: middle; border-radius:50%; cursor: pointer; line-height: 30px; white-space: nowrap; color: #fff; }

.head_user .hover_exit{ width:90px;position: absolute; top:70px; right:-30px; z-index: 100; height: 0; overflow: hidden; background-color: #fff;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3);
    -moz-box-shadow: 0 2px 5px  rgba(0,0,0,.3);
    box-shadow: 0 2px 5px  rgba(0,0,0,.3);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
.head_user:hover .hover_exit{ height: auto; }
.head_user .hover_exit ul li{ text-align: center; font-size:14px; color:#333; line-height: 30px; height:30px; cursor: pointer; }
.head_user .hover_exit ul li:hover{ color:#f89b38; background-color: rgba(248,155,56,.2); }
.head_user .hover_exit ul li.user_name{ width:90px; box-sizing: border-box; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; background-color: #eee ; color: #999; cursor: default; }

/*foot*/
footer{ width: 100%; height: auto; background-color: #3a3a3a; padding: 30px 0; }
footer .footer-logo-box{ margin-bottom: 20px; }
footer .hd-intro{ font-size: 14px; line-height: 1; color: #ccc; margin-bottom: 20px; }
footer .info-box{ font-size: 14px; line-height: 30px; color: #ccc; margin-bottom: 20px; }
footer .footer_about_us li{ float: left; }
footer .footer_about_us li a{ color: #ccc; padding: 0 10px; }
footer .footer_about_us li a:hover{ color: #f89b38; }
footer .footer_about_us li:first-child a{ padding-left: 0; }
footer .footer_about_us li:last-child a{ padding-right: 0; }
footer .info-box .tel{ margin-left: 60px; }
footer .info-box .app{ width: 300px; height: 30px; margin-left: 10px; }
footer .info-box .app .iphone-pic{ display: inline-block; width: 84px; height: 30px; background: url("../images/iphone-pic.png") no-repeat; margin-left: 12px; }
footer .info-box .app .android-pic{ display: inline-block; width: 90px; height: 30px; background: url("../images/android-pic.png") no-repeat; margin-left: 12px; }
footer .copyright{ font-size: 14px; line-height: 1; color: #999; margin-bottom: 20px; }
footer .copyright a{ color: #999; }
footer .copyright a:hover{ text-decoration: underline; }
footer .contain { width: 1200px; margin:0 auto; }