@colorPrimay:#5691e2;  //蓝色
@colorDarkGrey:#333333;
@colorGrey:#666666;
@colorLightGray:#999999;
@colorGreen:#00a40f;
.Primay{ color: @colorPrimay; }
.white{ color: white;}
.LightGray{ color: @colorLightGray;}
.green{ color:@colorGreen;}
.red{ color: red;}
.ellipsis{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; display: block;}
.ellipsis-mut(@num){text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: @num; -webkit-line-clamp: @num;-webkit-box-orient: vertical;}
.dis-tab{ display: table;}
.dis-row{ display: table-row;}
.dis-cell{ display: table-cell;}
.layout-flex{
    display: -webkit-box;  display: -webkit-flex;  display: -ms-flex; display: flex; 
    .item{
      display: table-cell;  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;         
      }
    .item-flex2{
         -webkit-box-flex: 2; -webkit-flex: 2; flex: 2;
    }
}
.vertical-flex{       
     text-align: center;        align-items:center;/*垂直居中*/        justify-content: center;/*水平居中*/        display: -webkit-box;        display: -webkit-flex;        display: -ms-flexbox;        display: flex;        -webkit-box-pack: center;        -webkit-justify-content: center;        -ms-flex-pack: center;        justify-content:center;       -webkit-box-sizing: border-box;        box-sizing: border-box;        -webkit-box-align: center;        -webkit-align-items: center;        -ms-flex-align: center;        align-items: center;  
}
.clearfix:before, .clearfix:after{display: table; content: " ";}
.clearfix:after{clear: both;}
body{ font-family: " Hiragino Sans GB","microsoft yahei","arial","helvetica","sans-serif";}
.no-padding{ padding: 0;}

.afterborder-b{ 
    position: relative;
    &:after{
       -webkit-transform-origin: 50% 100%;  transform-origin: 50% 100%;z-index: 0; content: ""; width: 100%; position: absolute;     bottom: 0; left: 0px;   height: 1px;     content: ''; -webkit-transform: scaleY(.33);  transform: scaleY(.33);  background-color: #c4c4c4; background-color: #e0dede;
    }
}
.afterborder-t{ 
    .afterborder-b;
     &:after{ bottom: inherit; top: 0px;}
}
.afterborder-r{ 
    position: relative;
    &:after{    
     content: "";  position: absolute;    right: 0;   bottom: 0;   height: 100%; width: 1px;     content: '';  content: ''; -webkit-transform: scaleX(.33) scaleY(.5);  transform: scaleX(.33) scaleY(.5);    background-color: #c4c4c4;
    }
}

//-----------------------------------
.popover-content{ padding: 0;}
.login-bg{ background: center center url(../images/login-bg.jpg); background-size: cover;}
.input-form{width: 100%;margin: 0 auto;padding: 60px 50px 40px 50px; background: white; border-radius: 10px; }
.input-form .icon{ display: inline-block;position: absolute;left: 18px;top: 50%;margin-top: -11px;width: 21px;height: 21px;background: no-repeat top left url(../images/login-icon.png);}
.input-form .weixin{ display: block; text-align: center; padding-top: 30px;
    img,span{ display: block;}
    img{ margin: 0 auto; padding-bottom: 5px;}     
}
.input-form .icon-user{background-position: -21px -0px;}
.input-form h1{font-size: 30px; font-weight: bold; margin-bottom: 28px; text-align: center;}
.input-form .icon-pwd{background-position: -21px -21px;}
.input-form .icon-yzm{background-position: -21px -42px;}
.input-form li{position: relative;margin-bottom: 10px;}
.input-form li:last-child{ border-bottom: none;}
.input-form li input{font-size: 18px;height: 55px;line-height: 25px;padding-top: 13px;padding-bottom: 15px;width: 100%;padding-left: 48px;background: none;box-sizing: border-box;border: 2px solid #f5f5f5; background: #f5f5f5; border-radius: 6px;}
.input-form li input:focus{   background-color:#eff6ff; border-color: @colorPrimay; color:#5691e2;}
.input-form li input:focus + .icon-pwd{ background-position: 0px -21px;}
.input-form li input:focus + .icon-yzm{ background-position: 0px -42px;}
.input-form li input:focus + .icon-user{ background-position: 0px 0px;}
.input-form li input::-webkit-input-placeholder{ color: #c1c1c1;}
.input-form{
    .btn{margin: 20px 0 0px 0;line-height: 55px;height: 100%;display: block;padding: 0 70px;border-radius: 60px;color: white;font-size: 18px;text-align: center;background:#5691e2;box-shadow: 0 5px 10px #c7dfff;}
    .btn:hover{ opacity: 0.85;}
    .btn:active{ opacity: 1;}
    a.forget{ color: #209af4; font-size: 14px;}
    .yzm{position:absolute;z-index:1;right: 8px;display: inline-block;top: 9px;}
    .yzm img{width: 112px;height: 35px;}
}
.login-copyright{
     text-align: center; line-height: 1.7; color: white; position: absolute; box-sizing: border-box; text-align: center; width: 100%; padding: 20px 15px; left: 0;
     span{ display: inline-block;}
}
.login-row{
     background: no-repeat url(../images/login-l.png); background-position: 0 145px;
}
.login-l{    
    .tit{
        img,span{ vertical-align: middle;}
        img{}
        span{ font-size: 33px; color: white; margin-left: 20px;}
    }
}

@media(min-width:768px){
    .login-warp,.input-form{ min-height: 535px; }
    .login-warp{ position: relative; top: 50%;  margin-top: -267px;}
}
@media(max-width:1440px){
}
@media(max-width:1200px){
}
@media(max-width:992px){
    .login-l{ display: none;}
    .login-row{ background: none;}
}
@media(max-width:768px){
     .login-warp{ padding: 0; padding-top:15px;}   
     .input-form .weixin{ display: none;}  
}
@media(max-width:576px){
   .input-form{ padding: 40px 15px 40px 15px;
      h1{ font-size: 25px;}
   }
}

.header{
    .login-l .tit; padding: 40px 0;
    .tit{
        img{ width: 65px;}
        span{ font-size: 24px; margin-left: 20px;}
    }
    .col-md-8{ text-align: right;}
    .menu{
        li{ display: inline-block; padding: 0 30px; font-size: 20px;  line-height: 46px;}
        a{color: white; }
    }
}
.home-bg{ background:  no-repeat  TOP center url(../images/home-bg.png) #42439d;}
.home-main{
     background: white; border-radius: 10px; padding: 40px  40px 70px 40px;   
}
.home-notice{
    background: #ff3131;  color: white; font-size: 16px; padding: 20px; border-radius: 10px;
    text-align: justify; text-justify: inter-ideograph;
}
.home-user{
     align-items: center; padding: 25px 0;
     .item{ padding-left: 20px; font-size: 18px;
        .id-card{ font-size: 16px; color: @colorGrey;}
     }
}
.subject{
    .phone-tit{
         display: none;
    }
    .content{
         text-align: center;
         img{ margin-bottom: 20px;}
         .tit{  font-size: 20px; font-weight: bold;}
         .rate{ font-size: 15px; margin: 8px 0  12px 0;}
         .learn-btn a{ font-size: 20px; display: inline-block; background: @colorPrimay;  min-width: 220px; border-radius: 100px; line-height: 50px; color: white; 
            &:hover{ opacity: 0.9;}
         }
    }
}

.subject-warp .col-md-6:first-child{.afterborder-r;}
.footer{ text-align: center; color: white; font-size: 14px; padding: 40px 0;}
.home-menu{
    padding: 0 0px; background: white; border-radius: 10px; 
/*    display: none;*/
    .item{ 
        .afterborder-r; padding: 20px 0; text-align: center;
        span{ border: 1px solid @colorPrimay; width: 47px; height: 47px; line-height: 47px;  border-radius: 47px; text-align: center; display: inline-block;}
        p{ text-align: center; padding-top: 5px;}
        [class^="icon"]{ margin-top: 10px; width: 25px; height: 25px; display: inline-block; background: url(../images/phone-menu.png); background-size: 25px auto;}
        .icon-class{ background-position-y: -25px;}
        .icon-user{ background-position-y: -49px; height: 24px; margin-top: 9px;}
        a{ display: block;}
    }
    .item:last-child:after{ width: 0;}
}
@media(max-width:1440px){
}
@media(max-width:1200px){
}
@media(max-width:992px){
    .header .menu li{ padding: 0 14px;}
    .subject{ margin-bottom: 60px;}
    .subject-warp .col-md-6:first-child:after{ width: 0;}
}
@media(max-width:768px){
   .header{ display: none;}
   .home-bg{ background: white;} 
   .container .row,.home-main .row{margin-left: 0; margin-right: 0;}   
}
@media(max-width:576px){  
    .home-menu{ display: block;}
    .home-bg{ background: #f5f5f5;}  
    body{background: #f5f5f5; }
    .footer{ display: none;}
    .home-main{ background: none; padding: 15px  0px 0px 0px;}
    .home-notice{ font-size: 14px; padding: 15px; margin-bottom: 10px;}
    .home-user{ display: none;}
    .subject{
        background: white; border-radius: 10px; margin-bottom: 10px;
        .phone-tit{
             .afterborder-b;display: block; line-height: 44px; font-weight: bold; font-size: 16px; padding: 0 15px;
        }
        .content{
             text-align: left; min-height: 114px; position: relative; padding-left: 170px; padding-top: 21px;
             img{ width: 130px; margin-bottom: 00px; position: absolute; left: 20px; top: 15px;}
             .tit{  display: none; font-size: 20px; font-weight: bold;}
             .rate{ font-size: 14px; margin: 0px 0  10px 0; }
             .learn-btn{
                 padding: 0; 
                 a{ font-size: 14px; text-align: center; background: @colorPrimay;  min-width: 100px; border-radius: 100px; line-height: 34px; color: white; }
             }
        }
    }
}
@media(max-width:320px){ 
    .subject{
         .content{
             padding-left: 139px;
             img{ width: 120px;    left: 10px;    top: 18px;}
             .rate,.learn-btn a{ font-size: 12px;}
             .learn-btn{}
         }
    }
}

.video-top{
   margin-bottom: 50px; position: relative;  background: no-repeat  right top  url(../images/video-top-bg.png) #c6eeff; border-radius: 10px; padding: 25px 0;
    h1{ font-size: 26px; font-weight: bold; margin-bottom: 25px;}
    p{ font-size: 18px; margin-bottom: 10px;
        span{ border: 1px solid ; text-align: center; padding: 5px 15px; min-width: 80px; display: inline-block; border-radius: 100px; margin-right: 15px;}
    }
    .col-sm-7{ margin-top: 35px;}
    .col-sm-5{ text-align: center;
        img{ width: 316px; max-width: 100%;}
    }    
    .seal-finish{font-size: 27px;  color: red; border: 3px solid red;    padding: 5px 15px; position: absolute;  right: -20px; font-weight: bold; bottom: 15px;    transform: rotate(-30deg);   -webkit-transform: rotate(-30deg);    opacity: 0.5;}
}
.video-main{ padding: 60px 75px; background: white; border-radius: 10px;}
.video-list{
    border: 1px solid #eaeaea;  border-bottom: none; border-right: none;
    .video-item{
        overflow: hidden; width: 100%; 
        img{ width: 100%; border-radius: 5px; height: 134px;}
        .tit{.ellipsis; font-size: 15px; margin-top: 10px; font-weight: bold;}
        ul{
            padding: 7px 0 12px 0; font-size: 13px; color: @colorLightGray;  line-height: 1.5;
            .red{ color: red;}
            .green{ color: @colorGreen;}
        }
        .video-btn{
            margin-right: -10px;
            .item{ padding-right: 10px; }
            a{ line-height: 35px; text-align: center; display: block; background: @colorPrimay; border-radius: 5px; color: white;}
            a:hover,a:active{ opacity: 0.9;}
        }
    }
    .col-lg-3{
        border-right: 1px solid #eaeaea; border-bottom:1px solid #eaeaea ; padding: 30px;
    }
}
.video-play-lt {
    padding: 0;

    .video-play {
        background: black;
        height: 450px;
        #player-con{ height:100% !important;} 
    }

    .video-tit {
        padding: 40px 0 0px 0;

        h1 {
            font-size: 26px;
            margin-bottom: 15px;
            font-weight: bold;
        }

        ul {
            font-size: 14px;

            li {
                margin-right: 30px;
                display: inline-block;
            }
        }
    }
}
.video-play-rt {
    overflow: hidden;
    padding: 0 0 0 40px;

    .tit {
        .afterborder-b;
        font-size: 22px;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }

    .video-learn-photo {
        margin-right: -10px;

        li {
            width: 33.33%;
            float: left;
            padding-right: 10px;
            text-align: center;

            img {
                height: 160px;
                display: block;
                width: 100%;
                border-radius: 5px;
                margin-bottom: 15px;
            }

            p {
                text-align: center;
            }
        }

        .photo-btn {
            text-align: center;
            padding-top: 10px;

            a {
                display: inline-block;
                background: @colorPrimay;
                padding: 0 15px;
                color: white;
                border-radius: 5px;
                line-height: 35px;
            }
        }
    }

    .photo-btn {
        text-align: left;
        padding-top: 1px;

        a {
            display: inline-block;
            background: @colorPrimay;
            padding: 0 5px;
            color: white;
            border-radius: 5px;
            line-height: 30px;
        }
    }
}

.relogin-btn a {
    font-size: 20px;
    display: inline-block;
    background: @colorPrimay;
    min-width: 220px;
    border-radius: 100px;
    line-height: 50px;
    color: white;
    text-align:center;

    &:hover {
        opacity: 0.9;
    }
}

@media(max-width:1440px){
}
@media(max-width:1200px){
}
@media(max-width:992px){
    .video-list .video-item img{    height: 164px;}
    .video-play-rt{ padding: 40px 0 0 0;} 
}
@media(max-width:768px){
     .video-list .video-item img{    height: 305px;}        
     .video-play-lt .video-tit{ margin: 10px 0;}
     .video-play-lt .video-tit,.video-play-rt{ background: white; border-radius: 10px; padding: 20px 15px;}

}
@media(max-width:576px){
    .video-main{ padding: 15px; background: none;}
    .video-list{
       border: none;
        .video-item{           
           position: relative;padding:5px 0px 5px 130px;min-height: 95px;
            img{ width: 115px;  border-radius: 3px; height: 79px; position: absolute; left: 0; top: 8px;}          
            .tit{ margin-top: 0;}
            ul{               
            }
            .video-btn{
              
            }
        }
        .col-lg-3{
             border: none; padding: 15px; background: white; border-radius: 10px; margin-bottom: 10px;
        }
    }
    .video-play-lt{
         .video-tit{
             h1{   font-size: 16px; font-weight: bold; margin-bottom: 10px;}
             ul  li{ font-size: 12px; margin-right: 10px;}
         }
         .video-play{
             margin: -15px -15px 0 -15px;  height: 280px;
         }
    }
    
    .video-play-rt{
        .tit{
            font-size: 18px; margin-bottom: 15px; padding-bottom: 10px;
        }
        .video-learn-photo   li p{ font-size: 12px;}
    }
}

@media(max-width:360px){
    .video-play-rt .video-learn-photo li img{ height: 145px;}
}
@media(max-width:320px){
   .video-list .video-item img{ width: 90px; height: 60px;}
   .video-list .video-item{ padding-left: 100px;}
}

@media(min-width:1366px){
    .video-list .video-item .video-btn{ }
    .video-list .video-item .video-btn{
        clear: both;
         .item{ width: 50%; display: inline-block; float: left;}
    }
    .home-user{
        clear: both;
        .avatar{ float: left;}
    }
}



@media(max-width:1440px){
}
@media(max-width:1200px){
}
@media(max-width:992px){
}
@media(max-width:768px){
}
@media(max-width:576px){
}