@charset "utf-8";

select,
select option,
button{
  color: #000 !important;
}

/* 資訊相關頁外觀 */
body.info-page{
  padding-left: 0;
}
body.info-page header .top .logo{
  left: 80px;
}
body.info-page #mobi_btn{
  display: block;
  border-right: 1px solid #ccc;
}
body.info-page #nav{
  display: none;
}

/* 表單 */
input,select{
  border: 1px solid #ccc;
}

/* 靜態頁面 */
.static-page .container{
  min-height: 300px;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0;
}
.static-page .container .title{
  font-size: 18px;
  font-weight: 400;
}
.static-page .container .editor{
  margin-top: 30px;
}
.static-page .container .editor img{
  max-width: 100%;
  height: auto;
  display: inline-block;
}
.static-page .container .editor p{
  font-size: 14px;
  line-height: 24px;
  margin: 10px 0;
}


/* 商品頁 */
.produc-collection{
  padding-top: 45px;
}
.produc-collection .tag{
  width: 45px;
  height: 20px;
  background: #ed5a5a;
  color: #000;
  font-size: 12px;
  letter-spacing: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.img{
  position: relative;
}
.img img{
  width: 100%;
  height: auto;
}
/* 商品列表 */
.product-list{
  display: flex;
  flex-wrap: wrap;
}
.product-list li{
  width: calc(100% / 3);
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: -1px;
}
.product-list li:nth-child(3n){
  border-right-color: rgba(0, 0, 0, 0);
}
.product-list li .img{
  width: 100%;
  padding-top: 100%;
  display: block;
}
.product-list li .img img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  object-fit: cover;
  z-index: 1;
}
.product-list li .add-to-cart{
  height: 50px;
  background: url('../images/icon-1.svg') center / 15px 15px no-repeat;
  text-indent: -9999px;
  display: block;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: -2.5px;
}
.product-list li .info{
  min-height: 155px;
  padding: 10px 15px;
  box-sizing: border-box;
}
.product-list li .info p{
  font-size: 14px;
  line-height: 20px;
  margin: 5px 0;
}

/* 商品頁 */
.product .top{
  display: flex;
}
.product .top .img{
  width: 50%;
}
.product .top .img .pd-slide{
  position: relative;
}
.product .top .img .pd-slide .owl-dots{
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 5px;
}
.product .top .img .pd-slide .owl-dots button{
  width: 20px;
  height: 20px;
  background: none;
  text-align: center;
  border: none;
  opacity: .5;
}
.product .top .img .pd-slide .owl-dots button.active{
  opacity: 1;
}
.product .top .img .pd-slide .owl-dots button span{
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
}
.product .top .info{
  width: 50%;
  padding: 0 20px;
  box-sizing: border-box;
  border-left: 1px solid #ccc;
}
.product .top .info li{
  font-size: 14px;
  margin: 30px 0;
}
.product .top .info .title{
  font-size: 18px;
  font-weight: 600;
}
.product .top .info .price{
  font-size: 14px;
  font-weight: 400;
}
.product .top .info .item-group{
  display: flex;
  flex-direction: column;
}
.product .top .info .item-group .label{
  font-weight: 500;
  margin-bottom: 10px;
}
.product .top .info .item-group .finger,
.product .top .info .item-group .amount,
.product .top .info .item-group .edit-group{
  width: 100%;
}
.product .top .info .item-group .finger select,
.product .top .info .item-group .edit-group select{
  width: 100%;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}
.product .top .info .item-group .amount{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.product .top .info .item-group .amount button{
  width: calc(100% / 3);
  height: 40px;
  background: none;
  font-size: 20px;
  border: none;
}
.product .top .info .item-group .amount button:first-child{
  border-right: 1px solid #ccc;
}
.product .top .info .item-group .amount button:last-child{
  border-left: 1px solid #ccc;
}
.product .top .info .item-group .amount input{
  width: calc(100% / 3);
  height: 38px;
  text-align: center;
  border: none;
  padding: 0;
}
.product .top .info .add-to-cart{
  width: 100%;
  height: 40px;
  background: #000;
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.product .top .info .more-info .editor{
  padding-top: 10px;
}
.product .top .info .more-info p{
  font-size: 14px;
  line-height: 20px;
  margin: 5px 0;
}

/* 登入 */
.login-page{
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-page .box{
  max-width: 400px;
  width: 90%;
  letter-spacing: 1px;
  padding: 30px;
  box-sizing: border-box;
}
.login-page .box p{
  font-size: 14px;
  margin-bottom: 10px;
}
.login-page .box input{
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.login-page .box .btn{
  color: #000;
  font-size: 14px;
  text-align: center;
  display: block;
  padding: 15px 0;
  border: 1px solid #ccc;
}
.login-page .box .form-list li{
  margin-top: 20px;
}
.login-page .box .form-list .group{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.login-page .box .form-list .group .apply{
  color: #000;
  font-size: 14px;
  font-weight: 500;
}
.login-page .box .form-list .group .forget{
  color: #888;
  font-size: 14px;
}

/* 會員相關 */
.member-page .menu{
  display: flex;
  border-bottom: 1px solid #ccc;
}
.member-page .menu a{
  width: calc(100% / 3);
  color: #000;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
  border-left: 1px solid #ccc;
  padding: 15px 0;
  display: block;
  box-sizing: border-box;
}
.member-page .menu a:first-child{
  border-left: none;
}
.member-page .menu a.active{
  background: #d8e8ef;
}
.member-page h3{
  font-size: 18px;
  font-weight: 400;
  margin-top: 30px;
}
.member-page .btn{
  min-width: 150px;
  height: 40px;
  background: #fff;
  color: #000;
  font-size: 14px;
  border: 1px solid #ccc;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
/* 會員資訊 */
.member-info{
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 30px;
}
.member-info .info li{
  margin-top: 20px;
}
.member-info .info li p{
  font-size: 14px;
  margin-bottom: 5px;
}
.member-info .info li input,
.member-info .info li select{
  width: 100%;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}
.member-info .info li .group{
  display: flex;
  justify-content: space-between;
}
.member-info .info li .group select{
  width: 33%;
}
.member-info .box .add-list{
  margin-top: 10px;
  border: 1px solid #ccc;
}
.member-info .box .add-list li{
  padding: 15px;
  border-bottom: 1px solid #ccc;
}
.member-info .box .add-list li:last-child{
  border: none;
}
.member-info .box .add-list li p{
  font-size: 14px;
  line-height: 18px;
  margin: 5px 0;
}
.member-info .box .add-list li .edit{
  color: #ed5a5a;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  display: inline-block;
}
.member-info .btn-group{
  display: flex;
  justify-content: space-between;
}
.member-info .btn-group .btn{
  width: 49.5%;
}
.member-info .logout{
  width: 100%;
}
/* 新增送貨地址 */
.edit-add{
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
}
.edit-add.open{
  display: flex;
}
.edit-add h3{
  margin-top: 0;
}
.edit-add .edit{
  max-width: 500px;
  background: #fff;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
}
.edit-add .edit .info li .group input{
  width: 33%;
}
.edit-add .edit .info li .more{
  margin-top: 10px;
}
.edit-add .edit .btn-group{
  margin-top: 20px;
}
.edit-add .edit .close-btn{
  width: 40px;
  height: 40px;
  background: url('../images/icon-close.svg') center / 10px 10px no-repeat;
  text-indent: -9999px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;  
}


/* 指甲尺寸 */
.nail-size{
  max-width: 600px;
  width: 90%;
  padding-bottom: 30px;
  margin: 0 auto;
}
.nail-size .size-list{
  margin-top: 20px;
}
.nail-size .size-list p{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.nail-size .size-list p::after{
  content: "(mm)";
  font-size: 12px;
  float: right;
}
.nail-size .size-list p .edit{
  color: #ed5a5a;
  font-size: 14px;
  margin-left: 5px;
}
.nail-size .size-list .box table{
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.nail-size .size-list .box table tr td{
  width: 20%;
  border: 1px solid #ddd;
  font-size: 14px;
  padding: 15px 0;
}
/* 新增/修改尺寸 */
.pop-bg{
  width: 100vw;
  height: calc(100vh - 60px);
  background: #fff;
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 60px;
  z-index: 1;
}
.pop-bg.active{
  display: flex;
}
.pop-bg .pop{
  max-width: 500px;
  width: 90%;
  padding: 20px 20px 0 20px;
  border: 1px solid #000;
  box-sizing: border-box;
  position: relative;
}
.pop-bg .pop .close{
  width: 40px;
  height: 40px;
  background: url('../images/icon-close.svg') center / 10px 10px no-repeat;
  text-indent: -9999px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;  
}
.pop-bg .pop .box{
  margin-bottom: 20px;
}
.pop-bg .pop .box p{
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.pop-bg .pop .box input{
  width: 100%;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
}
.pop-bg .pop .box table{
  width: 100%;
  text-align: center;

}
.pop-bg .pop .box table tr td{
  width: 20%;
  border: 1px solid #ddd;
  font-size: 14px;
  padding: 15px 0;
}
.pop-bg .pop .box table tr td select{
  height: auto;
  text-align: center;
  border: none;
  padding: 0;
}
.pop-bg .pop .btn-group{
  display: flex;
  justify-content: space-between;
}
.pop-bg .pop .edit-group select{
  width: 100%;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.pop-bg .pop .edit-group .btn{
  width: 100%;
  height: 40px;
  background: #fff;
  color: #000;
  font-size: 14px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.pop-bg .pop .btn-group .btn{
  width: 49.5%;
  height: 45px;
  color: #000;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.pop-bg .pop .delete{
  color: #000;
  font-size: 14px;
  text-align: center;
  display: block;
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

/* 訂單紀錄 */
.order-history{
  max-width: 1200px;
  min-height: 300px;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0;
}
.order-history .empty{
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.order-history .empty p{
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 20px;
  letter-spacing: 1px;
  margin-top: 30px;
}
.order-history .empty p span{
  color: #999;
  font-size: 14px;
  display: block;
  margin-top: 10px;
}
.order-history .order-list{
  width: 100%;
  font-size: 14px;
  line-height: 18px;
}
.order-history .order-list li{
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
}
.order-history .order-list li p{
  width: 25%;
  padding: 20px 5px;
  box-sizing: border-box;
}
.order-history .order-list li .order-number a{
  color: #000;
  display: inline-flex;
  align-items: center;
}
.order-history .order-list li .order-number a::after{
  content: "";
  width: 14px;
  height: 14px;
  background: url('../images/arrow.svg') center / 90% auto no-repeat;
  display: block;
  margin-left: 5px;
}
.order-history .order-list li .pd-list{
  display: none;
  width: 100%;
  background: #e8f3f6;
}
.order-history .order-list li .pd-list tr td{
  width: 25%;
  padding: 10px 15px;
  box-sizing: border-box;
}
.order-history .order-list li .pd-list tr.list-title td{
  color: #999;
}

/* 訂單 */
.order{
  font-size: 14px;
  padding-bottom: 30px;
}
.order h3{
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin: 30px 0;
}
.order h4{
  font-size: 14px;
  font-weight: 400;
}
.order .wrap{
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
}
/* 組合 */
.nail-set-list .list-item{
  border-top: 1px solid #ccc;
  padding: 0 2.5%;
}
.nail-set-list .list-item .top{
  color: #000;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 20px 0 20px 15px;
}
.nail-set-list .list-item .top::before{
  content: "";
  width: 10px;
  height: 10px;
  background: url('../images/icon-4.svg') center / 100% auto no-repeat;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
}
.nail-set-list .list-item .pd{
  display: flex;
  justify-content: space-between;

}
.nail-set-list .list-item .pd .box{
  width: 49%;
  background: #fff;
  display: flex;
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
  padding: 40px 10px 0 10px;
  margin-bottom: 20px;
}
.nail-set-list .list-item .pd .box h4{
  width: 100%;
  text-align: center;
  padding: 10px 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px solid #ccc;
}
.nail-set-list .list-item .pd .box .pd-list{
  width: 20%;
  padding: 10px;
  box-sizing: border-box;
}
.nail-set-list .list-item .pd .box .pd-list li{
  position: relative;
  margin-bottom: 5px;
}
.nail-set-list .list-item .pd .box .pd-list li a{
  width: 20px;
  height: 20px;
  background: #000 url('../images/icon-2.svg') center / 85% auto no-repeat;
  text-indent: -9999px;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.nail-set-list .list-item .pd .box .pd-list li .pic{
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
}
.nail-set-list .list-item .pd .box .pd-list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.nail-set-list .list-item .pd .box .pd-list::before{
  font-size: 12px;
  color: #000;
  text-align: center;
  display: block;
  padding-bottom: 5px;
}
.nail-set-list .list-item .pd .box .right1::before,
.nail-set-list .list-item .pd .box .left1::before{
  content: "大拇指";
}
.nail-set-list .list-item .pd .box .right2::before,
.nail-set-list .list-item .pd .box .left2::before{
  content: "食指";
}
.nail-set-list .list-item .pd .box .right3::before,
.nail-set-list .list-item .pd .box .left3::before{
  content: "中指";
}
.nail-set-list .list-item .pd .box .right4::before,
.nail-set-list .list-item .pd .box .left4::before{
  content: "無名指";
}
.nail-set-list .list-item .pd .box .right5::before,
.nail-set-list .list-item .pd .box .left5::before{
  content: "小拇指";
}

.nail-set-list .list-item.active{
  background: #e8f3f6;
}
.nail-set-list .list-item.active .top::before{
  background-image: url('../images/icon-3.svg');
}
/* 套用的尺寸 */
.nail-set-list .list-item .size-select{
  display: flex;
  justify-content: right;
  align-items: center;
}
.nail-set-list .list-item .size-select select{
  height: 40px;
  min-width: 250px;
  margin-left: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 997;
}
/* 組合明細 */
.nail-set-list .list-item .list-detail{
  border-top: 1px solid #ccc;
  margin-top: 30px;
  padding: 20px 0;
}
.nail-set-list .list-item .list-detail .wrap{
  width: 100%;
  display: flex;
  margin-top: 20px;
}
.nail-set-list .list-item .list-detail .box{
  width: 50%;

  box-sizing: border-box;
}
.nail-set-list .list-item .list-detail .left{
  padding-right: 20px;
  border-right: 1px solid #ccc;
}
.nail-set-list .list-item .list-detail .right{
  padding-left: 20px;
}
.nail-set-list .list-item .list-detail .box li{
  display: flex;
  padding-right: 30px;
  align-items: flex-start;
  position: relative;
}
.nail-set-list .list-item .list-detail .box li .delete {
  width: 30px;
  height: 30px;
  background: url(../images/icon-delete.svg) center / 40% auto no-repeat;
  text-indent: -9999px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
}
.nail-set-list .list-item .list-detail .box li .pic{
  width: 80px;
  height: 80px;
  position: relative;
  margin-right: 10px;
}
.nail-set-list .list-item .list-detail .box li .pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.nail-set-list .list-item .list-detail .box li .text{
  width: calc(100% - 90px);
}
.nail-set-list .list-item .list-detail .box li .text p{
  line-height: 20px;
  margin-bottom: 10px;
}
.nail-set-list .list-item .list-detail .box li .text select{
  max-width: 200px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.nail-set-list .list-item .more{
  display: none;
}
.order .btn-group{
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 20px 0;
}
.order .btn-group .btn{
  width: 150px;
  height: 40px;
  background: #fff;
  color: #000;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  margin-left: 10px;
}
/* 其他商品明細 */
.more-pd{
  background: #e8f3f6;
  padding: 20px 2.5%;
}
.more-pd h3{
  text-align: left;
  margin-top: 0;
}
.more-pd .pd-list li{
  display: flex;
  margin-bottom: 10px;
  padding-right: 40px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.checkout .more-pd .pd-list li{
  padding-right: 0;
}
.more-pd .pd-list li .delete{
  width: 30px;
  height: 30px;
  background: url('../images/icon-delete.svg') center / 40% auto no-repeat;
  text-indent: -9999px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
}
.more-pd .pd-list li .pic{
  width: 80px;
  padding-top: 80px;
  position: relative;
}
.more-pd .pd-list li .pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.more-pd .pd-list li .text{
  width: calc(100% - 80px);
  display: flex;
  align-items: center;
  padding-left: 15px;
  box-sizing: border-box;
}
.more-pd .pd-list li .text .title{
  width: 50%;
  line-height: 20px;
}
.more-pd .pd-list li .text .price,
.more-pd .pd-list li .text .amount{
  width: 25%;
  padding-left: 10px;
  box-sizing: border-box;
}
.more-pd .pd-list li .text .amount{
  display: flex;
}
.more-pd .pd-list li .text .amount button{
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid #ccc;
}
.more-pd .pd-list li .text .amount input{
  width: calc(100% - 80px);
  height: 40px;
  background: none;
  text-align: center;
  box-sizing: border-box;
  border-right: none;
  border-left: none;
}
.more-pd .total-amount{
  text-align: right;
  margin-top: 40px;
}
/* 明細 */
.info-list .form{
  background: #e8f3f6;
  padding: 20px 2.5%;
}
.info-list .form li p{
  line-height: 24px;
}
.info-list .form li select,
.info-list .form li input{
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 10px 0;
}
.info-list .form li .phone-number{
  background: #fff;
  height: 40px;
  display: flex;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin: 10px 0;
}
.info-list .form li .phone-number select,
.info-list .form li .phone-number input{
  height: 100%;
  border: none;
  margin: 0;
}
.info-list .form li .phone-number select{
  width: 120px;
}
.info-list .form li .phone-number input{
  width: calc(100% - 120px);
}
.info-list .form li .birth{
  display: flex;
  justify-content: space-between;
}
.info-list .form li .birth select{
  width: 33%;
}
.info-list .form li .checkbox label{
  display: flex;
  align-items: center;
}
.info-list .form li .checkbox label p{
  line-height: 18px;
}
.info-list .form li .checkbox label input{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.info-list .sum{
  background: #e8f3f6;
  padding: 10px 2.5%;
}
.info-list .sum li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0;
}
.info-list .sum li:first-child{
  border-top: 1px solid #ccc;
  padding-top: 15px;
}
.info-list .sum li input{
  min-width: 120px;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}
.info-list .sum li span{
  margin-left: 10px;
}
.info-list .sum li .group{
  display: flex;
}
.info-list .sum li .group .btn{
  width: 60px;
  height: 40px;
  background: #fff;
  color: #000;
  font-size: 12px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: -1px;
}


@media screen and (max-width:768px) {
  body.info-page header .top .logo{
    left: 50%;
  }
  .product-list,
  .product-list li{
    padding: 0;
  }
  .product-list li .info{
    padding: 5px 10px;
  }
  .product-list li{
    width: 50%;
  }
  .product-list li:nth-child(3n){
    border-right-color: #ccc;
  }
  .product-list li:nth-child(even){
    border-right-color: rgba(0, 0, 0, 0);
  }
  .product .top{
    flex-wrap: wrap;
  }
  .product .top .img,
  .product .top .info{
    width: 100%;
  }
  .nail-set-list .list-item .pd{
    flex-wrap: wrap;
  }
  .nail-set-list .list-item .pd .box{
    width: 100%;
  }
}
@media screen and (max-width:640px) {
  .order .wrap{
    width: 100%;
  }
  .nail-set-list .list-item .size-select select{
    width: calc(100% - 80px);
  }
  .order .btn-group{
    justify-content: space-around;
  }
  .order .btn-group.bottom{
    margin: 20px 0;
  }
  .order .btn-group .btn{
    width: calc(50% - 10px);
    margin: 0;
  }
  .nail-set-list .list-item .list-detail .wrap,
  .more-pd .pd-list li .text{
    flex-wrap: wrap;
  }
  .nail-set-list .list-item .list-detail .box{
    width: 100%;
    padding: 0;
    border: none;
  }
  .nail-set-list .list-item .list-detail .left{
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .more-pd .pd-list li{
    align-items: flex-start;
  }
  .more-pd .pd-list li .text .title,
  .more-pd .pd-list li .text .price{
    width: 100%;
    padding: 0 0 10px 0;
  }
  .more-pd .pd-list li .text .amount{
    width: 180px;
    padding: 5px 0;
  }
}
@media screen and (max-width:480px){
  .member-page .btn{
    width: 100%;
  }
  .edit-add .edit{
    padding: 20px;
  }
  .member-info .info li .group{
    flex-wrap: wrap;
  }
  .edit-add .edit .info li .group input{
    width: 100%;
  }
  .edit-add .edit .info li .group select{
    width: 100%;
    margin-top: 10px;
  }
  .edit-add .edit .btn-group .btn{
    min-width: auto;
  }
  .pop-bg{
    height: calc(100vh - 40px);
    top: 40px;
  }
  .nail-set-list .list-item{
    padding: 0 5%;
  }
  .more-pd,
  .info-list .form,
  .info-list .sum{
    padding: 20px 5%;
  }
  .order-history .order-list::before{
    content: "訂單紀錄";
    font-size: 16px;
    margin-bottom: 20px;
    display: block;
  }
  .order-history .order-list li:first-child{
    display: none;
  }
  .order-history .order-list li{
    border-bottom: none;
    border-top: 1px solid #ccc;
  }
  .order-history .order-list li p{
    width: 100%;
    display: flex;
    padding: 0;
    margin: 15px 0;
    justify-content: space-between;
  }
  .order-history .order-list li p::before,
  .order-history .order-list li .pd-list tr td::before{
    width: 60px;
    color: #999;
  }
  .order-history .order-list li p:nth-child(1)::before{
    content: "訂單號碼";
  }
  .order-history .order-list li p:nth-child(2)::before{
    content: "下單日期";
  }
  .order-history .order-list li p:nth-child(3)::before{
    content: "下單金額";
  }
  .order-history .order-list li p:nth-child(4)::before{
    content: "訂單狀態";
  }
  .order-history .order-list li .pd-list tr.list-title{
    display: none;
  }
  .order-history .order-list li .pd-list{
    margin-bottom: 10px;
  }
  .order-history .order-list li .pd-list tr{
    border-bottom: 1px solid #ccc;
    padding: 5px 15px;
    display: block;
  }
  .order-history .order-list li .pd-list tr:last-child{
    border: none;
  }
  .order-history .order-list li .pd-list tr td{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .order-history .order-list li .pd-list tr td:nth-child(1)::before{
    content: "訂單號碼";
  }
  .order-history .order-list li .pd-list tr td:nth-child(2)::before{
    content: "下單日期";
  }
  .order-history .order-list li .pd-list tr td:nth-child(3)::before{
    content: "下單金額";
  }
  .order-history .order-list li .pd-list tr td:nth-child(4)::before{
    content: "訂單狀態";
  }
}