@charset "utf-8";

.logo{position: absolute; top: 100px; left: 50%; transform: translateX(-50%);}
.logo img{width:700px;}

.botton_box{position: absolute; width: 100%; text-align: center;}
.botton_box .botton_btn{
  display: inline-block;
  background-color: #f6f6f6;
  padding: 20px;
  border-radius: 15px;
  margin: 0 60px;
}
.botton_box .botton_btn a{
  display: block;
}
.botton_box .botton_btn img{
  display: block;
  width: 270px;
}
.botton_box .botton_btn h2{
  font-family: '宋体';
  font-size: 30px;
  font-weight: bold;
  padding-top: 15px;
  color: #0a3c73;
}
.botton_box .botton_btn:hover{
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.botton_box .botton_btn .ewm{width: 270px; height: 178px; line-height:178px; background-color: #fff; overflow: hidden;}
.botton_box .botton_btn .ewm img{display: inline-block; width: 150px; height: 150px; margin-top: 15px;}
.botton_box .botton_btn .t1{color: #666; margin-top: 10px; font-size: 14px;}
.botton_box .botton_btn .t2{color: red; font-weight: bold;}

/*登录框*/
.signin{
  display: none;
  padding: 50px;
}
.signin .input_txt{
  position: relative;
  margin-bottom: 10px;
}
.signin .input_txt input{
  width: 254px;
  height: 46px;
  line-height: 46px;
  color: #666;
  font-size: 16px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #eee;
  margin-left:46px;
}
.signin .input_txt .icon{
  width:46px;
  height: 46px;
  position: absolute;
  background-color: #eee;
  text-align: center;
}
.signin .input_txt .icon .iconfont{
  font-size: 18px;
  line-height: 46px;
}
.signin .input_code{
  font-size: 0;
  overflow: hidden;
}
.signin .input_code input{
  width: 50%;
  height: 46px;
  line-height: 46px;
  display: block;
  float: left;
  color: #666;
  font-size: 16px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #eee;
}
.signin .input_code span{
  font-size: 22px;
  font-weight: bold;
  color: #5c7a95;
}
.signin .input_code img{
  width: 48%;
  display: block;
  float: left;
  margin-left: 5px;
}
.signin .enter{
  margin: 20px 0;
}
.signin .enter button{
  width: 300px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  background-color: #6e8396;
  border: none;
  cursor: pointer;
}
.signin .remember{
  margin-bottom: 20px;
}
.signin .remember label{
  margin-right: 20px;
  font-size: 14px;
}
.signin .register a{
  font-size: 14px;
  color: #6e8396;
}
.signin .register a:hover{
  color: #ac6c50;
}

.appewm{position: fixed; z-index: 999; right: 1%; bottom:2%; background-color: #fff; border: 1px solid #ddd; overflow-y: hidden; font-size: 16px; text-align: center; padding: 10px;}
.appewm img{display: block; width: 150px; height: 150px;}
.appewm .t1{color: #666; margin-top: 10px; font-size: 14px;}
.appewm .t2{color: red; font-weight: bold;}

/*个人中心页*/
.bg_center{
  background: url(../images/bg_center.jpg) top center no-repeat;
  background-attachment: fixed;
}
.container{
  margin: 0 60px;
}
.top_bar{
  height: 100px;
  background-color: #575f86;
  position: fixed;
  top: 60px;
  left: 60px;
  right: 60px;
  transition: .3s;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  z-index: 9;
}
.top_bar.onShow{
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .2)
}
.top_bar .logo_center{
  float: left;
  padding: 10px 0 0 20px;
}
.top_bar .info_box{
  float: right;
  position: relative;
}
.top_bar .info_box .picture{
  position: absolute;
  top: -10px;
  left: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  transition: .3s;
}
.top_bar .info_box .picture.small{
  top: 10px;
  left: 40px;
  width: 80px;
  height: 80px;
}
.top_bar .info_box .picture img{
  display: block;
  width: 100%;
}
.info_box .name{
  float: left;
  margin-left: 150px;
  margin-top: 12px;
  color: #fff;
}
.info_box .name h2{
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.info_box .name a{
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  margin-right: 10px;
  display: inline-block;
}
.info_box .name a:hover{
  color: #ffe064;
}
.info_box .info{
  float: left;
  margin-left: 30px;
  margin-top: 25px;
  width: 46px;
  height: 46px;
  position: relative;
}
.info_box .info a{
  position: absolute;
  display: block;
  width: 46px;
  height: 46px;
  line-height: 46px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #ffe064;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.info_box .info a:hover{
  transition: .3s;
  animation:ishover .3s ease-out 1;
}
@keyframes ishover
{
  0%   {
    width: 46px;
    height: 46px;
  }
  50%  {
    width: 55px;
    height: 55px;
    line-height: 55px;
  }
  100% {
    width: 46px;
    height: 46px;
  }
}
.info_box .info .iconfont{
  font-size: 20px;
  color: #e74736;
}
.info_box .info .tip{
  position: absolute;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  top: -10px;
  right: -10px;
  background-color: #fff;
  font-family: Arial;
  font-size: 12px;
  color: #000;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}
.info_box .state{
  float: left;
  margin-left: 30px;
  margin-top: 18px;
  border: 2px solid #fff;
  padding: 0 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.info_box .state li{
  width: 50px;
  line-height: 22px;
  padding: 8px 0;
  text-align: center;
  float: left;
}
.info_box .state li p{
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}
.info_box .state li .iconfont{
  display: inline-block;
  font-size: 34px;
  color: #fff;
  margin-top: 10px;
}
.info_box .label{
  float: left;
  margin: 18px 30px 0;
}
.info_box .label p{
  font-size: 14px;
  color: #fff;
  line-height: 20px;
}
.info_box .logout{
  float: right;
  margin-right: 20px;
  margin-top: 25px;
}
.info_box .logout a{
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #cda69f;
  font-size: 16px;
  color: #fff;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
}
.info_box .logout a:hover{
  background-color: #fff;
  color: #333;
}

/*内容*/
.lt, .rt{
  background-color: #ffffff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin-top: 220px;
}
.lt{
  width: calc(100% - 900px);
  float: left;
}
.rt{
  width: 880px;
  float: right;
}
.news_list.line{
  border-bottom: 2px solid #ebedf3;
}
.news_list{
  padding: 30px;
}
.news_list dt{
  margin-bottom: 20px;
}
.news_list dt h3{
  font-size: 28px;
  font-weight: bold;
}
.news_list dt h3.color_blue{
  color: #40486c;
}
.news_list dt h3.color_red{
  color: #b84e4c;
}
.news_list dt .more{
  display: inline-block;
  float: right;
  padding: 5px 10px;
  font-size: 14px;
  color: #868daf;
  border: 2px solid #dde3e8;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}
.news_list dt .more:hover{
  background-color: #dde3e8;
  color: #fff;
}
.news_list dd{
  padding: 8px 0;
}
.news_list dd a{
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #6a6774;
  padding-left: 20px;
  transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.news_list dd a:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border: 2px solid #e74736;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.news_list dd a:hover:before{
  width: 10px;
  background-color: #e74736;
}
.news_list dd a:hover{
  color: #e74736;
  padding-left: 25px;
}
.news_list dd i{
  float: right;
  font-size: 14px;
  color: #bbbecd;
}
.news_list dd .state{
  font-size: 14px;
  border: 1px solid #ddd;
  padding: 2px 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.news_list dd .state.wxx{
  color: #eb674c;
  border-color: #eb674c;
}
.news_list dd .state.xxz{
  color: #748bc9;
  border-color: #748bc9;
}
.news_list dd .state.yxw{
  color: #6ab86e;
  border-color: #6ab86e;
}
.news_list dd img{
  vertical-align: bottom;
}

.rt .head_bar{
  padding: 30px;
  clear: both;
  position: relative;
}

.rt_title{
  float: left;
  font-size: 28px;
  color: #40486c;
  font-weight: bold;
  margin-right: 30px;
}

.dropdown {
    position: relative;
    float: left;
}
.dropbtn {
    color: #fff;
    padding: 5px 20px;
    font-size: 20px;
    color: #575f86;
    border: 2px solid #cbcedd;
    cursor: pointer;
    background: none;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #cbcedd;
    color: #000;
}

.jiaofei{
  display: inline-block;
  padding-top: 8px;
}
.jiaofei button{
  padding: 5px 15px;
  background-color: #40486c;
  border: none;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}

/*进度表*/
.progress{
  float: right;
  line-height: 36px;
}
.progress .txt_1{
  float: left;
  font-size: 14px;
  color: #7d84a0;
  padding-right: 15px;
}
.progress .txt_2{
  float: left;
  font-size: 16px;
  color: #e74736;
  font-weight: bold;
}
.progress .progress_bar{
  float: left;
  position: relative;
  margin-top: 12px;
  margin-left: 20px;
  width: 260px;
  height: 10px;
  background-color: #cbcedd;
  overflow: hidden;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.progress .progress_bar .progress_line{
  position: absolute;
  height: 10px;
  background-color: #ee7b6f;
}

/*教程列表*/
.video_list{
  padding: 20px;
}
.video_list li{
  width: 33.3%;
  float: left;
}
.video_list li .content{
  display: block;
  margin: 10px;
  padding: 10px;
  border: 1px solid #eee;
}
.video_list li .content .thumb{
  width: 100%;
  height: 150px;
  background-color: #575f86;
  position: relative;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.video_list li .content .thumb .iconfont{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  z-index: 3;
}
.video_list li .content .thumb .mask{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .7;
  -moz-opacity: .7;
  -webkit-opacity: .7;
}
.video_list li .content .title{
  font-size: 18px;
  font-weight: bold;
  color: #3e3f44;
  padding-top: 10px;
  height: 55px;
}
.video_list li .content:hover{
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}
.video_list li .content:hover .thumb{
  background-size: 120%;
  transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.video_list li .content:hover .thumb .mask{
  display: block;
}
.video_list li .content:hover .title{
  color: #ee7b6f;
}
.video_list li .state{
  padding-bottom: 5px;
  overflow: hidden;
}
.video_list li .state .state_btn{
  float: right;
}
.video_list li .state .state_btn a{
  display: inline-block;
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}
.video_list li .state .state_btn a.wks{
  background-color: #e6e6e6;
}
.video_list li .state .state_btn a.ljks{
  background-color: #e74736;
}
.video_list li .state .state_btn a.tgks{
  background-color: #8cd090;
}
.video_list li .state .state_txt{
  float: left;
  font-size: 14px;
  padding-top: 5px;
}
.video_list li .state .state_txt:before{
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  float: left;
  margin: 6px 5px 0 0;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.video_list li .state .state_txt.xxz{
  color: #575f86;
}
.video_list li .state .state_txt.xxz:before{
  background-color: #575f86;
  border: 2px solid #cccfda;
}
.video_list li .state .state_txt.wxx{
  color: #e74736;
}
.video_list li .state .state_txt.wxx:before{
  background-color: #e74736;
  border: 2px solid #f8cac5;
}
.video_list li .state .state_txt.yxw{
  color: #6ab86e;
}
.video_list li .state .state_txt.yxw:before{
  background-color: #6ab86e;
  border: 2px solid #d2ead3;
}

/*安全管理人员界面按钮*/
.aq_btn{ padding: 30px; overflow: hidden; }
.aq_btn li{ float: left; width: 50%; }
.aq_btn li a{ background-color: #575f86; display: block; width: 90%; padding: 20px 2%; margin: 0 auto; color: #fff; border-radius: 20px; overflow-y: hidden; margin-bottom: 15px; }
.aq_btn li a i{ display: block; font-size: 40px; width: 30%; float: left; text-align: center; }
.aq_btn li a p{float: right; width: 70%; font-size: 22px;}
.aq_btn li a span{ display: block; font-size: 14px; line-height: 150%; padding-top: 10px; }
.aq_btn li.btn_mnks a{ background-color: #575f86; }
.aq_btn li.btn_kssq a{ background-color: #b84e4c; }
.aq_btn li.btn_zxks a{ background-color: #338d33; }
.aq_btn li.btn_mkjl a{ background-color: #009999; }
.aq_btn li.btn_sqks a{ background-color: #FFA500; }
.aq_btn li.btn_sqju a{ background-color: #993399; }
.aq_btn li a:hover{ background-color: #fec683; color: #000; }

/*考试申请*/
.apply_box{ padding: 30px; display: none; }
.apply_box .title{background-color: #ffcc66; border-radius:10px; padding: 0 20px; margin-bottom: 10px;}
.apply_box .title li label{display: block; font-size: 18px; color: #663300; padding-bottom: 5px; font-weight: bold;}
.apply_box .title li i{color: #663300;}
.apply_box ul{ padding-bottom: 20px; }
.apply_box ul li{ padding: 10px 0; }
.apply_box ul li img{ display: block; border-radius: 50%; margin: 0 auto; }
.apply_box ul li label{ display: inline-block; width: 100px; color: #666; }
.apply_box div{ text-align: center; }
.apply_box div a,
.apply_box div button
{ display: inline-block; padding: 10px 30px; margin: 0 10px; border-radius: 5px; font-size: 14px; }
.apply_box div a{ background-color: #eee; color: #333; }
.apply_box div button{ background-color: #b84e4c; color: #fff; border: none; cursor: pointer; }

/*考试申请*/
.apply_box1{ padding: 30px; display: none; }
.apply_box1 .title{background-color: #ffcc66; border-radius:10px; padding: 0 20px; margin-bottom: 10px;}
.apply_box1 .title li label{display: block; font-size: 18px; color: #663300; padding-bottom: 5px; font-weight: bold;}
.apply_box1 .title li i{color: #663300;}
.apply_box1 ul{ padding-bottom: 20px; }
.apply_box1 ul li{ padding: 10px 0; }
.apply_box1 ul li img{ display: block; border-radius: 50%; margin: 0 auto; }
.apply_box1 ul li label{ display: inline-block; width: 100px; color: #666; }
.apply_box1 div{ text-align: center; }
.apply_box1 div a,
.apply_box1 div button
{ display: inline-block; padding: 10px 30px; margin: 0 10px; border-radius: 5px; font-size: 14px; }
.apply_box1 div a{ background-color: #eee; color: #333; }
.apply_box1 div button{ background-color: #b84e4c; color: #fff; border: none; cursor: pointer; }

.footer_nav{
  width: 100%;
  background-color: #ebedf3;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
}
.footer_nav a{
  display: inline-block;
  font-size: 16px;
  color: #575f86;
  padding: 10px 0 10px 30px;
}
.footer_nav a:hover{
  color: #333;
}
.copyright{
  font-size: 14px;
  color: #898ea3;
  padding: 20px 30px;
}
.copyright a{
  color: #898ea3;
}
.copyright a:hover{
  color: #000;
}

/* 1600px */
@media screen and (max-width:1600px) {

  .lt .news_list dd a{
    width: 270px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

}

/* 1440px */
@media screen and (max-width:1440px) {

  .top_bar .logo_center{
    padding: 22px 0 0 20px;
  }

  .top_bar .logo_center img{ width: 320px; }

  .lt .news_list dd a{
    width: 360px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  .lt{
    width: calc(100% - 640px);
  }

  .rt{ width: 620px; }

  .rt_title{ float: none; margin-bottom: 20px; }

  .progress .progress_bar{
    width: 180px;
  }

  .jiaofei{
    position: absolute;
    right: 30px;
    top: 30px;
  }
  .video_list li{
    width: 50%;
  }

}

/* 1366px */
@media screen and (max-width:1366px) {

  .top_bar .logo_center{ display: none; }

  .top_bar .info_box{
    float: none;
    margin-left: 20px;
  }

  .info_box .name{ margin-left: 160px; }

  .lt .news_list dd a{
    width: 260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

}