.length-l{ width:100%; }
.length-m{ width:100%; }
@media (min-width:800px) {
.length-l{ width:100%!important; }
.length-m{ width:65%; }
.length-s{ width:33%!important; }
}
/* member center*/
.member-center { width: 96%; margin:5% auto; padding: 2rem 0px 5rem 0px; display: flex; flex-wrap: wrap;  }
.member-left { width: 100%; margin:1% auto;  display: flex; flex-wrap: wrap; flex-direction: column; }
.member-left li { width: 80%; margin: 2% auto; color: #3a3935; line-height: 24px; display: flex; justify-content: center; }
.member-left li.member-logo { width:186px; height:50px; margin: 2% auto; background: url(../images/logo.svg) no-repeat center top; background-size:auto; text-indent: -9999px; }
.member-left li.name { font-size: 24px; line-height: 36px; }
.member-left li.name strong { margin: 0 0 0 10px; text-decoration: underline; font-style: normal }
.member-right { width: 100%; margin:1% auto;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: row; }
.member-right li {flex: 0 0 45%; min-height: 130px; margin:8% auto; list-style: none; font-weight: 400;  }
.member-right li a {display: flex; justify-content: center; padding: 110px 0 0 0; height: 20px;   line-height: 20px;  font-size: 1rem; color: #3a3935; }
.member-right li.profile a { background: url(../images/icon/profile@2x.png) no-repeat center top; background-size: 96px 280px }
.member-right li.order a { background: url(../images/icon/order@2x.png) no-repeat center top; background-size: 96px 280px }
 .member-right li.password a { background: url(../images/icon/password@2x.png) no-repeat center top; background-size: 96px 280px }
 .member-right li.coupons a { background: url( ../images/icon/coupons.png) no-repeat center top; background-size: 96px 280px }
/*.member-right li.recommended a { background: url(../images/icon/recommended.png) no-repeat center top; background-size: 96px 280px }
.member-right li.feedback a { background: url( ../images/icon/feedback.png) no-repeat center top; background-size: 96px 280px }
.member-right li.collection a { background: url( ../images/icons/collection.png) no-repeat center top; background-size: 96px 280px }*/
.member-right li a:hover { background-position: center -184px; color:#c74060; }
.member-promo { width: 55%; display: inline-block; }
.member-promo ul { display: block; width: 280px; margin: 65px auto; overflow: hidden }
.member-promo ul li { display: block; width: 100%; color: #E6E6E6; line-height: 24px; float: left }
.member-promo ul li.member-center-logo { height: 150px; margin: 0 0 30px 0; text-indent: -9999px; }
.member-promo ul li.join a { display: block; width: 80px; height: 80px; line-height: 80px; font-size: 19px; color: #FFF; overflow: hidden; border-radius: 40px; text-align: center; margin: 30px auto 0 auto; text-decoration: none; font-weight: normal; background: rgba(0,109,69,1); }
.member-promo ul li.join a span { display: block; width: 100%; height: 22px; line-height: 22px }
.member-promo ul li.join a span:first-child { margin-top: 17px }
.member-promo ul li.join a:hover { background: rgba(0,109,69,.8); }
.member-promo ul li.promoad { display: block; height: 150px; overflow: hidden; border: 1px solid #0F0 }
.member-promo ul li.promo-ad img { display: block; margin: 0 auto; width: 100%; height: auto }

 @media (min-width:800px) {
.member-left,.member-right{ flex: 0 0 45%; margin:4% auto; }
.member-right li { flex: 1 1 45%; min-height: 130px; margin:5% auto;}
	 
}

/* member forget password*/
.password-form { width: 90%;  margin:5% auto;   padding:0px; background:rgba(219, 220, 232,.3);   border: solid 1px #ddd;}
.password-form ul { width: 100%; margin: 30px auto auto auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;}
.password-form ul li { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row;  height: auto; margin: 0 0 5px 0; padding:5px 0; line-height:1.5rem;   }
.password-form ul li.title { margin: 0 0 10px 0; padding-bottom: 10px; font-size: 18px; height: 35px;  border-bottom: 2px solid #000; width: 100%;  }
.password-form ul li span { display:flex; justify-content: center;  align-items: center; flex-direction: column;  margin-bottom: 2px; font-size:0.938rem; }
.password-form ul li span .remark { width:100%;  justify-content: flex-end; line-height: 21px; font-size: 11px; color: #999;  }
.password-form ul li input { width:90%;  padding:10px 5px;margin: auto;   }
.password-form ul li span:first-child { width:100%;text-align: left; }
.password-form ul li span:first-child+span { width: 100%; text-align: left; color:#ff144e;  }
.password-form .birthday select { width: 90px; border: 1px solid #CCC; height: 26px; line-height: 26px; padding: 0; margin: 0 10px 0 0 }
.g-recaptcha{margin:2% auto;  }
.password-form  ul.submit-btn li {  width: 100%!important;}
.password-form span.remark{width: 80%;margin: auto; display: flex; flex-wrap: wrap; text-align: center; font-size: 0.875rem; color:#62142D; font-weight: 400;  }
 @media (min-width:800px) {
/* forget password*/
.password-form { width: 60%;  }
.password-form ul { width: 70%; margin:10px auto 20px auto;flex-direction: row;}
.password-form ul li span { flex-direction: row; padding:0px 5px;  }
.password-form ul li span .remark { width:60%;  justify-content:flex-start; }
.password-form ul li span:first-child { flex: 0 0 20%; justify-content:flex-end;  }
.password-form ul li span:first-child+span { flex: 0 0 80%;  justify-content:flex-start;  }
.password-form ul li input {display:flex; width:70%; justify-content: center; padding:10px 5px;margin: auto;   }
	 
}
/* forget password*/
.forget { width: 90%;  margin:10% auto;   padding: 2rem 0px; background:rgba(219, 220, 232,.3);  border: solid 1px #ddd;}
.forget ul { width: 100%; margin: 30px auto auto auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;}
.forget ul li { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row;  justify-content: center; height: auto; margin: 0 auto 15px auto; padding:5px 0; line-height:1.5rem;    }
.forget ul li span { display:flex; justify-content: center;  align-items: center; font-size:0.938rem;color: #50585c; }
.forget ul li input {display:flex; width:90%; justify-content: center; padding:10px 5px;margin: auto; border: 1px solid #e0e0e0;   }
.forget ul li span:first-child { width:100%;text-align: left; }
.forget ul li span:first-child+span { width: 100%; text-align: left; }
.forget span.remark{width: 100%;margin: auto; display: flex; flex-wrap: wrap; text-align: center; font-size:0.875rem;   font-weight: 400;  color:#8590a6;  }
 @media (min-width:800px) {
.forget { width: 60%;  margin:1% auto ;}
.forget ul { width: 70% }
.forget ul li span .remark { width:60%;   }
.forget ul li span:first-child { width: 15%;   }
.forget ul li input { width:80%; }
.forget ul li span {  justify-content: flex-end;  }
}

/**------member-join----*/
.form-medium { width:100%; max-width:800px;  padding:20px;  margin:5% auto 2% auto;background-color:rgba(219, 220, 232,.3);  border: solid 1px rgba(219, 220, 232,.6);}
.form-medium ul { width: 100%;   margin:auto; display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; align-items: flex-start;     }
.form-medium ul li { display: flex; flex-direction: column;  width: 100%; margin: 0 0 15px 0; padding: 0px; }
.form-medium ul li.title { font-size: 18px; height: 35px; line-height: 35px; border-bottom: 2px solid #000; width: 100%; font-weight: bold; margin: 0 0 10px 0; padding-bottom: 10px }
.form-medium ul li span { display:flex;  font-size:0.875rem; }
.form-medium ul li span:first-child { width:100%; color: #3a3935; padding: 10px 0px; align-items: flex-start; justify-content: flex-start; }
.form-medium ul li span:first-child+span { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start;   }
.form-medium ul li span .remark { width: 100%; display: flex;   justify-content: flex-start; line-height: 1.8em; font-size: 12px; color:#ff174e; }

.form-medium ul li span.red:before { content: '*'; padding-right: 8px; color: #ec6666;  }


/*.form-medium .birthday select { margin: 0 10px 0 0; width: 90px; }
.form-medium .select-city select { margin: 0 0px 10px 0; width: 100%; }
*/
.form-medium ul li.rule { width: 100%; margin:1% 0; display: flex; flex-wrap: wrap; flex-direction: row;   }
.form-medium ul li.rule span:first-child { width:auto; margin:0;   justify-content: flex-end; align-items: flex-start; }
.form-medium ul li.rule span:first-child+span { display: flex; flex:0 0 85%;  padding-top:5px; line-height: 24px; color: #666;  }
.form-medium ul li.rule span:first-child+span a { line-height:2rem;  }
.form-medium p { display: block; width: 100%; margin: 0 auto; font-size: 15px; text-align: center;   line-height: 26px; min-height: 35px; }
.form-medium p strong { font-weight: bold; margin: 0 10px; }
.form-medium ul li input{width: auto; height: 36px; margin:0px; padding:0px 5px; background-color: #fff;  justify-content: flex-start;   color:#959595; }
.form-medium select {  height: 36px; margin:5px 0px;  padding:5px;   color:#959595; border-radius:0px;  }
.form-medium ul li select:focus { color: #555; }
.form-medium ul li select:focus option { color: #555; padding: 5px; }
.form-medium ul li textarea:focus, .form-medium  ul li input:focus { border: solid 1px #f9be14; color: #000; background: #fff; }
.form-medium ul li a{color:#c74060;}
.form-medium ul li span:first-child+span.lab-gender{display: flex; flex-wrap: wrap; flex-direction: row; } 


.form-medium ul li.phone span:first-child+span { display: flex; flex-wrap: wrap; flex-direction: row; min-height: 36px; }
.form-medium ul li.phone span:first-child+span > span {line-height: 36px;}
 .form-medium ul li.phone span:first-child+span input.length-s{ width:10% !important; min-height: 36px; margin-right:5px;  }
.form-medium ul li.phone span:first-child+span input.length-m{width:40%!important; min-height: 36px; margin-left:5px;margin-right:5px; }

@media only screen and (max-width:600px){
  .form-medium ul li.phone span:first-child+span input.length-s{width: 50px !important; }
}
@media only screen and (max-width:470px){
  .form-medium ul li.phone span:first-child+span input.length-m{width: 150px !important; }
}

@media (min-width:768px) {
.form-medium ul { width: 80%; margin:5% auto;  }
.form-medium ul li { flex-direction: row;  }	
.form-medium ul li span:first-child { width:18%;margin:0px 2% 0 0; padding:5px 0px 0px 0px; justify-content: flex-end; align-items:flex-start; align-content: center;  }
.form-medium ul li span:first-child+span { width: 80%; flex-direction: row; align-items: center;  }
.form-medium .select-city select {width:35%; }
.form-medium .select-city select { margin: 0 20px 10px 0;}
.lab-gender input[type="radio"]+label{ width: auto;   }
.form-medium ul li.phone span input.length-s{ flex:0 0 10%!important; }
.form-medium ul li.phone span input.length-m{flex:0 0 35%!important;  }
.form-medium ul li.rule span:first-child { flex:0 0 20%;margin:0;  line-height: 24px; text-align:left;}
.form-medium ul li.rule span:first-child+span { flex:0 0 80%; }

}

.center-info { width: 80%; margin:10% auto; display: block; text-align: center; }
.center-info h2 { font-size: 26px; display: block; width: 100%; margin: 30px 0; text-align: center; font-weight: 400 }
.center-info p { font-size: 15px; display: block; text-align: center; width: 100%; margin: 30px 0; line-height: 26px; font-weight: 400}
.center-info p.info-more { font-size: 14px; display: block; text-align: center; width: 100%; margin: 30px 0; line-height: 26px; }
.center-info p strong { font-weight: bold; color: #C9163A; margin: 0 0 0 10px; }
.border { height: 2px; overflow: hidden; display: block; color: #aeb8bd; background-color: #aeb8bd; width: 100%; clear: both; }
/*-------Common elements----*/
ul.cart-remark { width: 100%; margin: 4% auto; display: block; padding: 0 0 0 22px; }
ul.cart-remark li { width: 90%; padding: 2px 0px 0px 15px; display: block; line-height: 24px; font-size: .9em; text-align: left; background: url(../images/icon/arrow-right.svg) no-repeat left 5px; color: #333; list-style-position: inside; }


/* @media (min-width:800px) {
.member-center { padding: 5rem 0px 8rem 0px; }
.member-left { width: 35%; margin-left: 5%; margin-top:0; display: inline-block; }
.member-right { width: 50%; margin-left: 8%; display: inline-block; }
.member-left li.member-logo { width: 100%; height: 120px; background-size: 80% auto; }
.member-left li { text-align: center; }
.member-left li.name{ width: 70%; }

.form-medium { width:80%; display: block; margin: 8% auto 3% auto ; }
.form-medium ul li span { display: inline-block;}
.form-medium ul li span:first-child { width:15%; margin-right: 4%; text-align:right;}
.form-medium ul li span:first-child+span { width: 65%; }
.form-medium select{ width:auto; display: block;}
.form-medium .select-city select {  width:35%; margin-bottom: 10px; }

.form-medium ul li input{ max-idth:100%;}
.form-medium ul li.rule span:first-child { width:5%; margin:0; display: inline-block;  text-align:left;}
.form-medium ul li.rule span:first-child+span { width: 70%;}
}
*/