@charset "utf-8";
/* CSS Document */
*{padding:0; margin:0;}
body{font-family:"微软雅黑"; letter-spacing:0.005rem}
html{}
ul,ol,li{ list-style:none;}
img{border:none; vertical-align:middle;}
h1, h2, h3, h4, h5, h6, hr, blockquote, form, ul, ol, li, p, pre, dl, dt, dd, fieldset, legend, button, input, textarea{margin:0; padding:0; font-weight:normal;}
a:link{color:#333; text-decoration:none;}
a:visited{color:#333; text-decoration:none;}
a:hover{color:#333; text-decoration:none;}
b{font-weight: normal;}
.clear{clear:both; font-size:0; font-family:"sans-serif"; height:0; line-height:0;}
.clear_fix:after{content: ""; clear: both; height: 0; overflow: hidden; display: block; visibility: hidden;}
.fl{float:left}
.fr{float:right;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.pos-r{position: relative;}
.pos-a{position: absolute;}

.c-nav .show{display: flex; }
.c-nav .hiden{display:none}
.c-nav{width:100%; position: relative; z-index: 9999;}
.c-nav .navFlex{display:flex; display:-webkit-flex; align-items:center; -webkit-align-content:center;color:#fff; 
    justify-content:space-between; -webkit-justify-content:space-between;}
.c-nav .logo{width: 20%;}
.c-nav .logo img{width: 100%;}
.c-nav ul{display: flex; }
.c-nav ul li{line-height:0.9rem; font-size:0.18rem; margin: 0 0.3rem;}
.c-nav ul li a{display: block; color:#333;text-decoration:none;width:100%}
.c-nav ul li.active{ border-bottom: 2px solid #009ce0;}
.c-nav ul li.active a{color: #009ce0;}
.c-nav ul li:hover{ border-bottom: 2px solid #009ce0;}
.c-nav ul li:hover a{ color: #009ce0;}
.c-nav .btnImg{height:20px;width:25px;padding:8px 8px 3px 8px;box-sizing:content-box;margin-right:5px;}
.circular{display: flex;}
.circular a{display: block; width: 100%; height: 100%;}
#wechat-btn{width: 0.42rem; height: 0.9rem; margin: 0 0.1rem; background: url(../images/wechat-btn1.png) no-repeat center; background-size: contain;}
#EN{width: 0.42rem; height: 0.9rem; margin: 0 0.1rem; background: url(../images/EN.png) no-repeat center; background-size: contain; }
#Complex{width: 0.42rem; height: 0.9rem; margin: 0 0.1rem; background: url(../images/Complex.png) no-repeat center; background-size: contain; }
#wechat-btn:hover{cursor: pointer;}
#wechat-box{width: 0; height: 150px; position: absolute; right: 0%; bottom: -1.5rem; z-index: 99999; transition: all 0.3s; 
  overflow: hidden; }
#wechat-close{width: 40px; height: 50px; box-sizing: border-box; float: left;  background:  url(../images/close.png) no-repeat center; cursor: pointer; background-size: 70%;}


.hamburger {
    display: none;
  }
  
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #333;
}


@media screen and (max-width: 1420px) and (min-width:1200px){
}
@media screen and (max-width: 1238px) and (min-width:1200px){
}
@media screen and (max-width:1200px){
}
@media screen and (max-width:992px){
}
@media screen and (max-width:768px){
}
@media screen and (max-width:576px){
.c-nav{opacity:.9; margin: 0; box-sizing: border-box;}
.c-nav .container{padding: 0;}
.c-nav .navFlex{font-size:0.2rem; justify-content:space-between;flex-wrap:wrap; }
.c-nav .logo{margin: 0.2rem; width: 35%;}
.c-nav .logo img{height: 100%;}
.c-nav ul{display: flex; flex-direction: column;}
.c-nav ul li{padding-top:0;margin-left:0;display:block;line-height:0.7rem;background:#000; border-bottom: none; margin-right: 0;
font-size: 0.25rem;}
.c-nav ul li a{color:#fff;width:100%;display:block}
.c-nav .hiden{display:block; position: absolute; right: 0; top: 0.2rem}
.c-nav .show{width:100%;font-size:14px;text-align:center;display:none}
.c-nav #wechat-btn{display: none;}
.circular{display: none;}

.hamburger {
    display: block;
    cursor: pointer;
  }
  
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
  }
  
  .hamburger.active .bar:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
  }
}


/*登录*/
.Login{width: 100%; height: 8.55rem; background: url(../images/Login-banner.jpg) no-repeat center; position: relative;}

.Login-tit{font-size: 0.24rem; text-align: center; color: #fff; padding-top: 1rem;}

.Login-popup{width: 5rem; height: 5rem; background: #fff; position: absolute; inset: 0; margin: auto; 
box-sizing: border-box; padding: 0.5rem; border-radius: 0.1rem; top: 10%;}


.login-member{width: 100%; }
.login-member-tab{display: flex;}
.login-member-tab li{font-size: 0.3rem; color: #666; margin-bottom: 0.2rem; font-weight: normal; color: #009ce0; font-weight: bold;
border-bottom: 3px solid #fff; padding-bottom: 0.14rem;}
.login-member-tab li:hover{cursor: pointer;}
.login-member-tab li.current{color: #009ce0; border-bottom: 3px solid #009ce0; font-weight: bold;}
.login-member-content{}
.login-member-content-li{display: none;}
.login-member-inp{}
.login-member-verification{display: flex; justify-content: space-between;}
.login-member-inp .text2,
.login-member-verification .text2{width: 100%; height: 0.5rem; line-height: 0.5rem; padding-left: 0.15rem; outline-color: #009ce0;
border:0.01rem solid #bbb; box-sizing: border-box; font-size: 0.16rem; color: #999; margin-bottom: 0.1rem; border-radius: 0.05rem;}
.login-member-verification .text2{width: 67%;}
.login-member-verification img{width: auto; max-width: 30%; height: 0.5rem;}
.login-member-btn{width: 100%; background: #009ce0; height: 0.5rem; line-height: 0.5rem; font-size: 0.18rem; color: #fff; text-align: center;
border-radius: 0.1rem; margin: 0.1rem 0 0.2rem;}
.login-member-btn a{color: #fff; display: block;}
.login-member-b{display: flex; justify-content: space-between; flex-wrap: wrap;}
.login-member-b .btn{width: 30%; height: 0.4rem; line-height: 0.4rem; text-align: center; background: rgba(204, 204, 204, 0.3); 
  font-size: 0.16rem; color: #333; border-radius: 0.1rem;}
.login-member-b .btn a{color: #333; display: block;}

.Login-copy{line-height: 0.6rem; font-size: 0.16rem; text-align: center; padding: 0 0.2rem; background: #009ce0;
color: #fff;}

@media screen and (max-width:576px){

  .Login{width: 100%; height: 10rem; background: url(../images/Login-banner.jpg) no-repeat center; position: relative;}

  
  .Login-tit{font-size: 0.24rem; text-align: center; color: #fff; padding-top: 0.5rem;}

  .Login-popup{width: 90%; height: auto; background: #fff; position: absolute; inset:inherit; left: 5%; top: 15%; margin: auto; 
  box-sizing: border-box; padding: 0.4rem;}
  
  
  .login-member{width: 100%; }
  .login-member-tab{display: flex;}
  .login-member-tab li{font-size: 0.3rem; color: #666; margin-bottom: 0.25rem; font-weight: normal; margin-right: 0.3rem;
  border-bottom: 3px solid #fff; padding-bottom: 0.14rem;}
  .login-member-tab li:hover{cursor: pointer;}
  .login-member-tab li.current{color: #009ce0; border-bottom: 3px solid #009ce0; font-weight: bold;}
  .login-member-content{}
  .login-member-content-li{display: none;}
  .login-member-inp{}
  .login-member-verification{display: flex; justify-content: space-between;}
  .login-member-inp .text2,
  .login-member-verification .text2{width: 100%; height: 0.7rem; line-height: 0.7rem; padding-left: 0.18rem; outline-color: #009ce0;
  border:0.01rem solid #bbb; box-sizing: border-box; font-size: 0.22rem; color: #999; margin-bottom: 0.2rem;}
  .login-member-verification .text2{width: 70%;}
  .login-member-verification img{width: auto; max-width: 30%; height: 0.7rem;}
  .login-member-btn{width: 100%; background: #009ce0; height: 0.7rem; line-height: 0.7rem; font-size: 0.25rem; color: #fff; text-align: center;
  border-radius: 0.1rem; margin: 0.1rem 0 0.2rem;}
  .login-member-btn a{color: #fff; display: block;}
  .login-member-b{display: flex; justify-content: space-between; flex-wrap: wrap;}
  .login-member-b .btn{width: 30%; height: 0.6rem; line-height: 0.6rem; text-align: center; background: rgba(204, 204, 204, 0.3); 
    font-size: 0.22rem; color: #333; border-radius: 0.1rem;}
  .login-member-b .btn a{color: #333; display: block;}
  
.Login-copy{line-height: 0.8rem; font-size: 0.22rem; text-align: center;}

}
/*登录*/


/*注册*/
.register{height: 5.8rem;}
.register-top{display: flex; justify-content: space-between; align-items: baseline;}
.register-tit{font-size: 0.3rem; color: #666; margin-bottom: 0.2rem; font-weight: normal; color: #009ce0; font-weight: bold;
border-bottom: 3px solid #fff; padding-bottom: 0.14rem;}
.register-login{font-size: 0.18rem; text-decoration: underline; text-underline-offset: 0.08rem; text-decoration-color: #009ce0;}
.register-login a{color: #009ce0;}

@media screen and (max-width:576px){

  .register{height: auto;}
  .register-top{display: flex; justify-content: space-between; align-items: baseline;}
  .register-tit{font-size: 0.3rem; color: #666; margin-bottom: 0.2rem; font-weight: normal; color: #009ce0; font-weight: bold;
  border-bottom: 3px solid #fff; padding-bottom: 0.14rem;}
  .register-login{font-size: 0.22rem; text-decoration: underline; text-underline-offset: 0.08rem; text-decoration-color: #009ce0;}
  .register-login a{color: #009ce0;}

}
/*注册*/

/*个人信息*/
.personal-header{line-height: 0.6rem; background: #009ce0; text-align: right; color: #fff; font-size: 0.16rem;}
.personal-header a{font-size: 0.16rem; text-decoration: underline; text-underline-offset: 0.05rem; text-decoration-color: #fff; 
  color: #fff; margin-left: 0.1rem;}


  .responsive-ban{position: relative;}
  .pc-ban{display: block;}
  .mobile-ban{display: none;}
  .responsive-banner-info{position: absolute; left: 15px; right: 0; margin: 0 auto; top: 35%;}
  .responsive-banner-tit{ font-size: 0.4rem; color: #fff;}
  .responsive-banner-tit span{font-size: 0.4rem; color: #fff; padding: 0.4rem 0; border-top: 1px solid #fff;
    border-bottom: 1px solid #fff; font-family: NotoSansHans-Medium;}
  
  @media screen and (max-width:576px){

    
.personal-header{line-height: 0.6rem; background: #009ce0; text-align: right; color: #fff; font-size: 0.22rem;}
.personal-header a{font-size: 0.22rem; text-decoration: underline; text-underline-offset: 0.05rem; text-decoration-color: #fff; 
  color: #fff; margin-left: 0.1rem;}
  
    .responsive-ban{position: relative;}
    .pc-ban{display: none;}
    .mobile-ban{display: block;}
    .responsive-banner-info{position: absolute; left: 0; right: 0; margin: 0 auto; top: 35%;}
    .responsive-banner-tit{ text-align: center;}
    .responsive-banner-tit span{font-size: 0.25rem; color: #fff; padding: 0.3rem 0; border-top: 1px solid #fff;
      border-bottom: 1px solid #fff; font-family: NotoSansHans-Medium;}
  }
  

/*个人信息*/

/*视频教学*/
.video{display: flex;}
.video-tab{width: 12%; padding: 0.4rem; box-sizing: border-box; border-right: 1px solid #dedede;}
.video-tab-tit{font-size: 0.24rem; color: #009ce0; margin-bottom: 0.2rem;}
.video-tab ul li{font-size: 0.18rem; color: #333; line-height: 0.6rem; border-bottom: 1px solid #dedede;
background: url(../images/video-tab-icon1.png) no-repeat center right;}
.video-tab ul li.active{color: #009ce0; background: url(../images/video-tab-icon2.png) no-repeat center right;}
.video-tab ul li.active a{color: #009ce0;}

.video-content{width: 88%; box-sizing: border-box; padding: 0.4rem;}
.video-content ul{display: flex; flex-wrap: wrap;}
.video-content ul li{width: 23.5%; margin-right: 2%; margin-bottom: 0.3rem;}
.video-content ul li:nth-child(4n){margin-right: 0;}
.video-content ul li .video-content-tit{font-size: 0.18rem; color: #333; margin: 0.15rem 0; font-weight: bold;}
.video-content ul li .video-content-info{display: flex; align-items: center; justify-content: space-between;}
.video-content ul li .video-content-txt{font-size: 0.16rem; color: #666; line-height: 1.8;}
.yema{text-align: center; margin: 0.3rem 0;}

@media screen and (max-width:576px){


  .video{display: flex; flex-wrap: wrap;}
  .video-tab{width: 100%; padding: 0.4rem; box-sizing: border-box; border-right: none;}
  .video-tab-tit{font-size: 0.28rem; color: #009ce0; margin-bottom: 0.2rem;}
  .video-tab ul li{font-size: 0.25rem; color: #333; line-height: 0.8rem; border-bottom: 1px solid #dedede;
  background: url(../images/video-tab-icon1.png) no-repeat center right;}
  .video-tab ul li.active{color: #009ce0; background: url(../images/video-tab-icon2.png) no-repeat center right;}
  .video-tab ul li.active a{color: #009ce0;}
  
  .video-content{width: 100%; box-sizing: border-box; padding: 0.4rem; padding-top: 0;}
  .video-content ul{display: flex; flex-wrap: wrap;}
  .video-content ul li{width: 100%; margin-right: 0%; margin-bottom: 0.5rem;}
  .video-content ul li:nth-child(4n){margin-right: 0;}
  .video-content ul li .video-content-tit{font-size: 0.28rem; color: #333; margin: 0.15rem 0; font-weight: bold;}
  .video-content ul li .video-content-info{display: flex; align-items: center; justify-content: space-between;}
  .video-content ul li .video-content-txt{font-size: 0.25rem; color: #666; line-height: 1.8;}
  .video-content ul li .video-content-btn{width: 8%;}
  .video-content ul li .video-content-btn img{width: 100%;}
  .yema{text-align: center; margin: 0.3rem 0;}
  
}
/*视频教学*/


/*视频教学 详细*/
.videoview{width: 90%; margin: 0.45rem auto; display: flex; justify-content: space-between;}
.videoview-content{width: 73%;}
.videoview-content-tab{margin-bottom: 0.3rem;}
.videoview-content-tab ul{display: flex;}
.videoview-content-tab ul li{font-size: 0.18rem; color: #333; padding-bottom: 0.15rem; margin-right: 0.3rem;}
.videoview-content-tab ul li.active{border-bottom: 4px solid #009ce0;}
.videoview-content-tab ul li.active a{color: #009ce0;}
.videoview-video{margin-bottom: 0.3rem; position: relative;}
.videoview-video-tit{font-size: 0.3rem; color: #333; margin-bottom: 0.2rem;}
.videoview-video-txt{font-size: 0.18rem; color: #666;}
.videoview-video-txt span{margin-right: 0.3rem;}
.videoview-video-btn{position: absolute; inset: 0; margin: auto; width: 0.8rem; height: 0.8rem;}

.videoview-relevant{width: 24%;}
.videoview-relevant-tit{font-size: 0.24rem; color: #009ce0; margin-bottom: 0.3rem;}
.videoview-relevant-list{display: flex; margin-bottom: 0.2rem;}
.videoview-relevant-list-pic{width: 50%;}
.videoview-relevant-list-pic img{width: 100%;}
.videoview-relevant-list-info{width: 50%; padding-left: 0.12rem; display: flex; flex-direction: column; 
  justify-content:space-between}
.videoview-relevant-list-info-tit{font-size: 0.16rem; color: #333;}
.videoview-relevant-list-info-txt{font-size: 0.14rem; color: #666; line-height: 1.6;}

@media screen and (max-width:576px){


  .videoview{width: 90%; margin: 0.45rem auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
  .videoview-content{width: 100%; margin-bottom: 0.3rem;}
  .videoview-content-tab{margin-bottom: 0.3rem;}
  .videoview-content-tab ul{display: flex;}
  .videoview-content-tab ul li{font-size: 0.25rem; color: #333; padding-bottom: 0.15rem; margin-right: 0.4rem;}
  .videoview-content-tab ul li.active{border-bottom: 4px solid #009ce0;}
  .videoview-content-tab ul li.active a{color: #009ce0;}
  .videoview-video{margin-bottom: 0.2rem; position: relative;}
  .videoview-video-tit{font-size: 0.3rem; color: #333; margin-bottom: 0.2rem;}
  .videoview-video-txt{font-size: 0.22rem; color: #666;}
  .videoview-video-txt span{margin-right: 0.3rem;}
  .videoview-video-btn{position: absolute; inset: 0; margin: auto; width: 0.8rem; height: 0.8rem;}
  
  .videoview-relevant{width: 100%;}
  .videoview-relevant-tit{font-size: 0.3rem; color: #009ce0; margin-bottom: 0.3rem;}
  .videoview-relevant-list{display: flex; margin-bottom: 0.3rem;}
  .videoview-relevant-list-pic{width: 40%;}
  .videoview-relevant-list-pic img{width: 100%;}
  .videoview-relevant-list-info{width: 60%; padding-left: 0.2rem; display: flex; flex-direction: column; 
    justify-content:space-between}
  .videoview-relevant-list-info-tit{font-size: 0.28rem; color: #333;}
  .videoview-relevant-list-info-txt{font-size: 0.22rem; color: #666; line-height: 1.6;}
  

}
/*视频教学 详细*/

/*物流订单查看*/
.logistics{width: 84%; margin: 0 auto;}
.logistics-top{display: flex; margin: 0.3rem 0;}
.logistics-tit{font-size: 0.24rem; color: #009ce0; margin-right: 0.3rem;}
.logistics-k{line-height: 0.35rem; background: #009ce0; color: #fff; font-size: 0.16rem; padding: 0 0.3rem;
border-radius: 0.2rem;}
.logistics-k span{margin-right: 0.3rem;}

table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto 1rem;
}

table tr {
  padding: 5px;
}


table th,
table td {
  border: 1px solid #ddd;
  text-align: center;
  font-size: 0.14rem;
  color: #333;
  line-height: 1.6; 
}

    table th {
        text-transform: uppercase;
        background: #009ce0;
        color: #fff;
        font-size: 0.14rem;
        font-weight: normal;
        height: 0.6rem;
        letter-spacing: 1px;
       
    }

table td {
  padding: 0.2rem;

}

@media screen and (max-width:576px){
 
.logistics{width: 84%; margin: 0 auto;}
.logistics-top{display: flex; margin: 0.3rem 0; align-items: center;}
.logistics-tit{font-size: 0.28rem; color: #009ce0; margin-right: 0.3rem;}
.logistics-k{line-height: 0.5rem; background: #009ce0; color: #fff; font-size: 0.22rem; padding: 0 0.3rem;
border-radius: 0.3rem;}
.logistics-k span{margin-right: 0.3rem;}


  table {
    border: 0;
  }

  table thead {
    display: none;
  }

  table tr {
    margin-bottom: 0.2rem;
    display: block;
    padding: 0;
    border: 1px solid #dedede;
  }

  table td {
    display: block;
    text-align: right;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.22rem;
    border: none;
    padding: 0.1rem 0.2rem;
    border-bottom: 1px solid #dedede;
  }

  table td:last-child {
    border-bottom: none;
  }

  table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
}






/*物流订单查看*/

/*个人信息*/
.personal{width: 12rem; margin: 0.3rem auto;}
.personal-tit{font-size: 0.24rem; color: #009ce0;}
.personal-inp{width: 5rem; margin: 0.3rem auto;}
.personal-list{display: flex; margin-bottom: 0.15rem;}
.personal-list-l{width: 20%; font-size: 0.16rem; color: #333; line-height: 0.5rem; padding-right: 3%; box-sizing: border-box;
text-align: right;}
.personal-list-r{width: 80%;}
.personal-list-r input{width: 100%; height: 0.5rem; line-height: 0.5rem; border: 1px solid #bbbbbb; border-radius: 0.1rem;
  outline: none; padding-left: 0.15rem; font-size: 0.16rem; color: #333; box-sizing: border-box;}
.code input{width: 65%;}
.password-k{border: 1px solid #dedede; border-radius: 0.1rem;}
.password-k input{width: 90%; border: none;}
.password-k span{cursor: pointer;}
.personal-btn{width: 100%; background: #009ce0; line-height: 0.5rem; text-align: center; border-radius: 0.1rem; color: #fff;
margin-top: 0.2rem; font-size: 0.18rem;}
.personal-btn a{color: #fff; display: block;}

@media screen and (max-width:576px){

  .personal{width: 90%; margin: 0.3rem auto;}
  .personal-tit{font-size: 0.28rem; color: #009ce0;}
  .personal-inp{width: 100%; margin: 0.3rem auto;}
  .personal-list{display: flex; margin-bottom: 0.2rem;}
  .personal-list-l{width: 20%; font-size: 0.22rem; color: #333; line-height: 0.65rem; padding-right: 3%; box-sizing: border-box;
  text-align: right;}
  .personal-list-r{width: 80%;}
  .personal-list-r input{width: 100%; height: 0.65rem; line-height: 0.65rem; border: 1px solid #bbbbbb; border-radius: 0.1rem;
    outline: none; padding-left: 0.15rem; font-size: 0.22rem; color: #333; box-sizing: border-box;}
  .code input{width: 60%;}
  .code img{height: 0.65rem;}
  .password-k{border: 1px solid #dedede; border-radius: 0.1rem;}
  .password-k input{width: 90%; border: none;}
  .password-k span{cursor: pointer;}
  .personal-btn{width: 100%; background: #009ce0; line-height: 0.65rem; text-align: center; border-radius: 0.1rem; color: #fff;
  margin-top: 0.2rem; font-size: 0.25rem;}
  .personal-btn a{color: #fff; display: block;}
  

}

/*个人信息*/

.pages{width:100%; margin:0 auto; text-align:center;margin-top:0px; margin-bottom:30px;margin-top:15px; padding-top:15px;}

.paginator { font: 18px "微软雅黑"; margin:0 auto; font-size:18px }
.paginator a {border:solid 1px #f2f2f2;color:#000;cursor:pointer;text-decoration:none; background-color:#f2f2f2;}
/*.paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}*/
.paginator .cpb {border:1px solid #009ce0;color:#FFF;background-color:#009ce0; font-family:"微软雅黑"}
.paginator a:hover {border:solid 1px #009ce0;color:#fff;text-decoration:none; background:#009ce0; display:block}
.paginator a,.paginator a:visited,.paginator .cpb,.paginator a:hover  
{/*height:20px;line-height:20px;min-width:20px;_width:10px;*/margin-right:5px;text-align:center;
 white-space:nowrap;font-size:18px;font-family:微软雅黑;padding:5px 10px; display:inline-block;}