.content { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; }

/* 页面导航 */
.header { height: 84px; background: #FFF;border-top:4px solid #00A0E9;}
.nav-open, .nav-close, #J_nav_mask { display: none; }
.nav-bar > li { float: left; position: relative; width:120px;}
.nav-bar > li > a { display: block; font-size: 1.8em;  color: #707070; text-align: center;border-left: 1px solid #D6D6D6;line-height: 80px;transition: all .5s ease ;position: relative;}
.nav-bar > li > a:after{content: "";width: 3px;height: 10px;background: #00A0E9;position: absolute;top: 50%;margin-top: -5px;left: -2px;}
.nav-bar > li:first-child > a{border: none;}
.nav-bar > li:first-child > a:after{display: none;}
.nav-bar > li:hover > a, .nav-bar > li.selected > a {color: #00A0E9;  }

/* 页脚 */
.footer { text-align: center; line-height:50px; color: #fff; font-size: 1.6em; background: #006881 }
.footer span{padding:0 20px;}

/*视频样式*/
.video { width: 800px; margin: 0 auto; position: relative; background: #FFFFFF; border: 10px solid #f6f6f6; }
.video .jwplayer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000 }
.video .alt { padding-top: 56.25%; height: 0 !important }

.frame-banner { height: 300px; background-size: auto 100%;position: relative; }
.frame-banner .frame-banner-item{background-repeat: no-repeat;background-position: left top;height: 300px;left: 0;}
.frame-banner1{background-image: url(../img/common/frame_banner01.png);}
.frame-banner2{background-image: url(../img/common/frame_banner02.png);}
.frame-banner3{background-image: url(../img/common/frame_banner03.png);}
.frame-banner4{background-image: url(../img/common/frame_banner04.png);}
.frame-banner .course{max-width: 1200px;width: 100%;margin: 0 auto;}
.frame-banner .frame-logo{position: absolute;top: 40px;}
.frame-banner .frame-course-name { position: absolute; right: 25%;top: 40px; }
.frame-img-change{width:100%;}


/* 全局隐藏显示 */
.ware-nav-content{ display: none; }
.float-bar{display: none;}
#J_WareJump{display: none}
.body-cware .course-ware-nav { display: block; }
.body-cware .ware-nav-content{display: block}

/*返回顶部*/
.J_goTop { position: fixed; z-index: 89; right: 10px; bottom: -100px; width: 46px; height: 72px; padding: 5px; font-size: 14px; text-align: center; padding-top: 30px; color: #FFF; border-top-left-radius: 23px; border-top-right-radius: 23px; cursor: pointer; background: #429DFF url('../img/common/top.png') center 10px no-repeat ; -webkit-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; transition: all 0.6s ease-out;  }
.body-home .J_goTop{display: none;}

/*1024 - 1199*/
@media only screen and (max-width:1199px) {
  /*导航*/
  .nav-open { display: block; width: 50px; height: 50px; position: absolute; right: 10px; top:15px; z-index: 91; font-size: 1.8em; background: url('../img/common/btn_open_nav.png') center no-repeat; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-animation: slideInRight .5s ease; -moz-animation: slideInRight .5s ease; -o-animation: slideInRight .5s ease; animation: slideInRight .5s ease; cursor: pointer; }
  .nav-open.opened { position: fixed; background-image: url('../img/common/btn_close_nav.png'); }
  .nav-box { width: 100%; max-width: 376px; height: 100%; position: fixed; top: 0; right: -100%; z-index: 90; -webkit-transition: right .3s ease; -o-transition: right .3s ease; -moz-transition: right .3s ease; transition: right .3s ease; }
  .nav-box.show { right: 0; }
  .nav-box ul.nav-bar { width: 100%; position: absolute; top: 0px; bottom: 0; padding: 80px 0 0 0; overflow-y: auto; background-color: #404042; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
  .nav-box ul.nav-bar > li {width: auto; float: none;}
  .nav-box ul.nav-bar > li > a { display: block; text-align: center; line-height: 60px; border-bottom: 1px solid #2A2A2E; font-size: 2em; color: #8F8F8F; }
  .nav-box ul.nav-bar > li.selected > a, .nav-box ul.nav-bar > li:hover > a { background: #FFD800; color: #fff; }
  .J_goTop{opacity: .8}
}

/*768 - 1023*/
@media only screen and (max-width:1023px) {
  .frame-banner .frame-logo{left: 10px;width: 220px;}
  .frame-banner .frame-logo img{display: block;width: 100%;}
  .frame-banner .frame-course-name {
    max-width: 70%;
    right: 10%;
    top: 70px;
}
  .footer span { display: none; }
}

/*640 - 767*/
@media only screen and (max-width:767px) {


}

/*480 - 639*/
@media only screen and (max-width:639px) {
  .header { height: 60px; }
  .header .logo{top: 10px;}
  .header .logo img { width: 258px; }
  .nav-open{ top: 15px; width: 30px; height: 30px; }
  .nav-box ul.nav-bar{padding-top: 60px;}
  .nav-box ul.nav-bar > li > a{font-size: 1.6em; line-height: 40px;}
  .frame-banner { height: 200px;overflow: hidden; }
  .frame-banner .frame-course-name{ margin: 20px auto 0 auto;max-width: 50%;}
}

/*360 - 479*/
@media only screen and (max-width:479px) {
  .header .logo { overflow: hidden; }
  .nav-box { max-width: 256px; }
  .nav-box ul.nav-bar > li > a { line-height: 48px; border-bottom: 1px solid #2A2A2E; }
}

/*320 - 359*/
@media only screen and (max-width:359px) {
  .frame-banner img { width: 260px; }
}