:root { --primary-color: #019dff;
}
@media screen and (min-width: 320px) and (max-width: 1024px){
    * { margin: 0; padding: 0; list-style: none; }
    img, a, input { border: 0; }
    a { color: currentColor; text-decoration: none; }
    button { border: none; }
    input, button, select, textarea { outline: none; cursor: pointer; }
    select { border: none; cursor: pointer; }

    .clearfix:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }
    .clearfix { zoom: 1; } 

    .header{ width: 100%; position: fixed; top:0; left: 0;}
    .logo{height: 1rem ; line-height: 1rem; text-align: center; 
    background: var(--primary-color); }
    .logo img{display: none;}
    .logo h1{font-size: .36rem!important; font-weight: 500; color: #fff;}
    .nav li{float: left;}
    .nav {
        height:.8rem;
        line-height:.8rem; text-align: center; display: flex; display: -webkit-flex; width: 100%; flex-wrap: wrap; -webkit-flex-wrap: wrap; background-color: #fff; border-bottom: solid 1px #f2f2f2; }
        .nav li {flex: 1; box-sizing: border-box;cursor:pointer; }
        .nav li.cur { border-bottom: solid 2px var(--primary-color); color:var(--primary-color); }

   .screenmain{ margin-top: 1.8rem; padding: .2rem;}
   .screenmain h2{ font-size: .28rem; font-weight: normal; margin-bottom: .2rem;}
   .procedure ul{display: flex; justify-content: space-between; align-items: center;}
   .procedure li.cur{ border:2px solid var(--primary-color); color: var(--primary-color); 
   padding:.2rem;  font-weight: bold; letter-spacing: 3px; 
   border-radius: 9px;
   height:1.6rem;
   width: 1rem;
   }
   
   .procedure span::before{
   
        content: "——";
        color: var(--primary-color); 
       
        font-size:.4rem;
       }
       
       .procedure  span::after{
       
       content: ">";
       font-size:.4rem;
       color: var(--primary-color); 
       }
   .ecsmain{padding: 0;}
   .ecsmain li{    background: #fff;
    margin-bottom: 0.2rem;
    border-radius: 0px;
    padding: 0.25rem;
    border: rgba(0,0,0,.1) solid 1px;}
    .ecsmain .col{padding: .1rem 0;}
   .ecsmain li .imgcon{float: left; padding: .12rem;  margin-right: .15rem;}
   .ecsmain .imgcon img{width: 1rem; height: 1rem;}
   .ecsmain .con{display: block;}
   .ecsmain .con span{display: block;font-size: 12px; color: #666;line-height: .4rem;}
   .ecsmain .con h3{display: inline-block;font-size: 16px; margin-right: .1rem; line-height: 28px;}
   .ecsmain .con hr{border: 0.5px solid #f2f2f2;margin-block-start: 0.5em;
    margin-block-end: 0.5em;}
   .ecsmain li p{margin-top: .16rem; color: #666;font-size: 14px;line-height: 24px;display: block; height: 42px;overflow: hidden;} 
   .ecsmain .active p{height: auto;}

.originalprice{ margin-right: 24px;}
.pricemain{ margin-bottom: .2rem;margin-top: .2rem;}
.price{display: inline-block;  }
.pricetag{

    display: inline-block;
    background: #ff6a00;
    font-size: .24rem;
    color: #fff;
    font-weight: 500;
    padding: 0 .12rem;
    border-radius: 3px;
	line-height: 20px;
    height: 20px;
    
    

}
.pricecon{ margin-top: .1rem; color: #ff6a00;}


.price-integer{
    font-size: .4rem;
}
.originalprice .pricetag{
    background: #396;
   
}
.originalprice .pricecon{color:#396!important}
.ecsmain .action{
    flex: 1;
    display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.ecsmain .action a{
    flex-wrap: inherit;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
}
.action{

    border: none;
    text-align: center;
    
}

.action a{  
    
    width: 100%;
    height: .6rem; line-height:.6rem; color: #fff;
    background-color:  var(--primary-color); 
    border-color: var(--primary-color); 
    text-decoration: none;
   
}
.ecsmain .actiona{
 display: none;
}

   .footer{display: none;}
    .site{display: none;}
    .ad{margin-top: 1.88rem;}
    .ad img{width: 100%; }
  .screenmain1{margin-top: 0!important; background: #fff;}
  .screencon ul {margin-bottom: 18px!important;}

.screencon li {
    display: block;
    float: left;
    padding:.1rem .3rem;
    border-radius: .1rem;
    border: 1px solid #ddd;
    
    text-decoration: none;
    
    color: #666;
    margin-right:.2rem;
    margin-bottom:.2rem;
    /* transition: all .2s; */
    cursor: pointer;
}

.screencon li.cur {
    color: var(--primary-color); 
    border-color: var(--primary-color); 
}
.toleft{
    position: fixed;
    left: 0;
    
}
.toleft span{
    font-size: .5rem;
    font-family: "SimSun";
    color: #fff;
    width:.8rem;
    display: inline-block;
}
.listsmain{ padding: .2rem;}
.listsmain hr{display: none;}
.listcon{ margin-bottom: .2rem; border-radius: 1rem; }
.listsmain .til img{width: .56rem; height: .56rem; margin-right: .1rem;;}
.listcon .til{ 
    height: .56rem; 
    padding: .2rem;
    font-size: .3rem;
    background: #fff;
    border-bottom: 1px solid #f4f4f4;
    display: flex; justify-content: space-between; align-items: center;  }

.tilleft,.tilright{ display: flex; align-items: center;}
.g-container {
   
    width:50%;
    height: .28rem;
    border-radius:.2rem;
    background: #eee;
}
.g-progress {
    width: 30%;
    height: inherit;
    border-radius: .2rem 0 0 .2rem;
    background: var(--primary-color);
}
.listsmain li{
    padding: .2rem;
    background: #fff; border-bottom: 1px solid #f4f4f4;}
.listsmain li img{display: none;}
.listsmain  .desc{ font-size: .3rem; width: 80%;}
.listsmain .action{ float: right;
   
}
.listsmain .action a{
    display: block;
    width: 1.2rem;
    text-align: center;
    height:.56rem!important;
    line-height:.56rem;
    border-radius: .3rem;
}


}


@media only screen and (min-width: 1029px){
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, input { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
input,button,select,textarea{outline:none;}
fieldset, img { border: 0; }
input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em { font-style: normal; }
/* bass css */
html, body { height: 100%; min-width: 1200px; }
body { font: 14px/1.5 '\5FAE\8F6F\96C5\9ED1', '\5b8b\4f53', Arial, Helvetica, sans-serif; color: #444; background: #fff; }
.wrap { max-width: 1280px; margin: 0 auto; }
.clearfix:after { content: ""; height: 0; visibility: hidden; display: block; clear: both; }
.clearfix { zoom: 1; }
.pr { position: relative; }
.dib { display: inline-block; }
.hdn { display: none; }
.ofh { overflow: hidden; _zoom: 1; }
.hid { display: block; height: 0; overflow: hidden; }
.vm { vertical-align: middle; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-left { text-align: left; }
.fl { float: left; }
.fr { float: right; }
.h-center { margin: 0 auto; }
.fwn { font-weight: normal; }
.mb1 { margin-bottom: 5px; }
.mb2 { margin-bottom: 20px; }
.mb3 { margin-bottom: 12px; }
.mb5 { margin-bottom: 50px!important; }
.mr1 { margin-right: 10px; }
.mt1 { margin-top: 12px; }
.mt2 { margin-top: 20px!important; }
.mt3 { margin-top: 0px!important; }
.mt5 { margin-top: 5px!important; }
.mt5 { margin-top: 50px; }
.ml2{ margin-left:20px;}
.ml3{ margin-left:30px;}


 input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance:none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
/* link css */
a { color: #576077; text-decoration: none; }

/* color css */
.c-txt1 { color: var(--primary-color)!important; }
.c-txt2 { color: #aa66cc; }
/* font css */
.fs-1 { font-size: 14px; }
.fs-2 { font-size: 16px; }
.fs-3 { font-size: 20px; }
.fs-4 { font-size: 12px; }
.fs-5 { font-size: 18px; }
.fs-6 { font-size: 28px; }
.fs-7 { font-size: 22px; }
.fs-8 { font-size: 24px; font-weight: normal; }
.fs-9 { font-size: 26px; }
/* btn css */
.btn { height: 32px; text-align: center; line-height: 32px; width: 70px; border-radius: 3px; background-color: var(--primary-color); border: none; color: #fff; }
.btn:hover { cursor: pointer; background-color: #396; }
/* icon css */


/******************************
		   header
******************************/
.header { height: 76px; line-height: 76px;  box-shadow: 0 4px 4px rgba(0,0,0,.2); }
.logo {  float: left; margin-top: 20px; display: inline-block; width: 120px; height: 40px; }

.logo h1{ display: none!important;}
.logo img{ height:40px;}
.nav { float: right; display: inline-block; padding-top: 3px; margin-top:20px; }
.nav li {float: left; display: inline-block;  height: 38px; line-height: 38px; font-size: 18px; color: #3f3f4d; padding: 0 28px; margin: 0 10px; text-decoration: none; border-radius: 19px; }
.nav li.cur,.nav li:hover { background-color: var(--primary-color); }
.nav li.cur a, .nav li:hover a{ color: #fff!important;}

/******************************
		   screen
******************************/
.screenmain{background: #f7f7f7; padding:12px 24px ; margin :24px 0 ; height: auto;    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
    border: 1px solid #eee;}
.screenmain h2 {
    color: #3d3e3e;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    margin: 22px 0;
}
.screencon ul {margin-bottom: 18px!important;}

.screencon li {
    display: block;
    float: left;
    padding: 2px 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 14px;
    text-decoration: none;
    line-height: 24px;
    color: #666;
    margin-right: 12px;
    margin-bottom: 5px;
    /* transition: all .2s; */
    cursor: pointer;
}

.screencon .til{float: left; margin-right: 12px;}
.screencon li.cur {
    color:  var(--primary-color); 
    border-color: var(--primary-color); 
}
.procedure ul{display: flex; justify-content: space-between; align-items: center;}
.procedure li.cur{ border:2px solid var(--primary-color); color: var(--primary-color); 
padding:48px 12px; font-size: 16px; font-weight: bold; letter-spacing: 3px; width: 200px;
border-radius: 9px;
}

.procedure span::before{

     content: "——";
     color: var(--primary-color); 
    
     font-size: 50px;
    }
    
    .procedure  span::after{
    
    content: ">";
    font-size: 50px;
    color: var(--primary-color); 
    }


/******************************
		   ecsmain
******************************/
.ecsmain{ height: auto;}
.ecsmain h3{font-size: 18px; display: inline-block; margin-right: 5px;}
.ecsmain hr{border: 0.5px solid #f2f2f2;margin-block-start: 0.5em;
    margin-block-end: 0.5em;}
.ecsmain .active p{height: auto;}
.ecsmain li p{display: block; color: #555; font-size: 14px;height: 42px;
    overflow: hidden;}
.ecsmain li
{
    position: relative;
    margin-bottom: 10px;
    line-height:24px;
    box-sizing: content-box;
}
  
.ecsmain li .col{    
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 15px 0px; 
    border: rgba(0,0,0,.1) solid 1px;
   /*  transition: all 200ms linear;  */
}
.ecsmain li:hover .col {
    border: 1px solid var(--primary-color);
    cursor: pointer;
}
    .ecsmain .imgcon{ /* flex: 1; */ margin-right: 16px;  }
    .ecsmain img{width: 80px; height: 80px; }
    .ecsmain .con{ flex: 5;}
.pricemain{ flex: 1.6;
    display: flex;
    justify-content: center;
}
.originalprice{ margin-right: 24px;}
.price{display: inline-block; }
.pricetag{

    display: inline-block;
    background: #ff6a00;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    padding: 0 8px;
    border-radius: 3px;
    height: 20px;
    line-height: 20px;
    margin: 10px;

}
.pricecon{ color: #ff6a00;}
.price-symbol{
     font-size: 14px;
    letter-spacing: 1.2px;
}

.price-integer{
    font-size: 22px;
}
.originalprice .pricetag{
    background: #396;
   
}
.originalprice .pricecon{color:#396!important}
.ecsmain .action{
    display: none;
}
.ecsmain .actiona{
    flex: 1;
    display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.ecsmain .actiona a{
    flex-wrap: inherit;
}
.actiona{
    border: none;
    font-size: 14px;
    text-align: center;  
}

.actiona a{  
    
    display: inline-block;
    width: 90px; height: 35px; line-height: 35px; color: #fff;
    background-color:  var(--primary-color); 
    border-color:  var(--primary-color); 
    text-decoration: none;
    border-radius:3px;
    font-weight: bold;
}
/******************************
		   listsmain
******************************/
.listcon .til img{ width: 40px; height: 40px; margin-right: 8px;}
.listcon .til{ display: flex; font-size: 16px; height: 40px; margin: 12px 0;}
.tilleft{ margin-right: 12px;}
.tilright{ margin-left: 12px;}
.tilleft , .tilright{ display: flex;
align-items: center;
justify-content: center;
}
.g-container {
   
    width:1080px;

    height: 12px;
    margin-top: 14px;
    border-radius: 25px;

    background: #eee;

}

.g-progress {

    width: 30%;

    height: inherit;

    border-radius: 25px 0 0 25px;

    background: var(--primary-color);

}
.listcon { margin-bottom: 24px;}
.listcon hr{border: 0.5px solid #f2f2f2;}
.listcon ul { margin-left: 80px; margin-top: 12px;}
.listcon li{
   height: 48px;
   display: flex;
   border: 1px solid #eee;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   padding: 12px;
   margin-bottom: 12px;
}
.listcon li:hover{
    background: #f7f7f7;
}
.listcon li img{
    width: 32px;
    height:32px;
    margin-right: 12px;
  
    display: inline-block;
}
.listcon li .desc{
    font-size: 16px;
    margin-right: 12px;
    flex:5;
   
}
.listcon li .price{
    
  
    flex: 1; text-align: right;
}
.listcon li .price-integer{
    
  font-size: 26px;
}
.listcon li .action{
    flex: 1; text-align: right;
}
.listcon li .action a{ width: 80px; text-align: center; height:32px!important; line-height: 32px;}
/******************************
		   footer
******************************/

.footer {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    border-top: 1px solid #f2f2f2;
    font-size: 14px;
    background-color: #f8f8f8;
    color: #666;
    width: 100%;
}

.footer_con {
    padding: 30px 0;
}

.footer-col1 {
    width: 738px;
    margin: 0 auto 8px;
    padding-bottom: 14px;
}

.footer-col1 li {
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}

.footer-col1 li span {
    margin-left: 16px;
}

.footer a:hover {
    text-decoration: underline;
}

.footer p a {
    margin: 0 8px;
}



.site {
    text-align:left;
    height: 40px;
    line-height: 40px;
    margin: 12px 0;
   
}

.site a:hover {
   
    text-decoration: underline;
}
.ad{ width: 100%;}
.ad img{width: 100%; height: 300px;}
.toleft{ display: none;}

}
img.conimg {width: 0.2rem; height: 0.2rem;margin-bottom: 5px;}
.pn20{padding: 30px 0;}