@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/NotoSansTC-Regular.ttf') format('truetype');
}

*{box-sizing:border-box;}
body{
  width: 100vw;overflow-x: hidden;
  font-family: 'Noto Sans TC';
}

.header{
  box-shadow: 0px 0px 20px 0px #00000026;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 10;
  background-color: #fff;
}
.container.row{
  max-width: 1280px;
  width: 100%;
  margin: auto;
}

select{
  height: 40px;
  border-radius: 8px;
  border: 1px solid #DEDEDE;
  font-size:16px;
  padding:8px 16px;
}
input{border-radius: 8px;border: 1px solid #DEDEDE;padding-top: 8px;padding-right: 16px;padding-bottom: 8px;padding-left: 16px;font-family: 'Noto Sans TC';font-weight: 400;font-size: 16px;line-height: 22px;letter-spacing: 0.5px;color: #5F6368;width: 100%;display: inline-block;}
label.required::after{
  content: '*';
  display: inline-block;
  color: #DC6161;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding-left: 6px;
}
input.required{border-color: #DC6161;}
h1.orderTitle{font-weight: 700;font-size: 24px;line-height: 100%;letter-spacing: 0.5px;text-align: center;margin-bottom: 32px;}
select.city{
    margin-right: 8px;
}
select.area{
    margin-right: 8px;
}
input.addr{}

.order{}
.orderForm .form-gorup{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 24px;
}.orderForm .form-gorup label
{
    flex: 0 0 100px;
    display: inline-flex;
    align-items: center;
}
.stName{
  font-weight: 500;
  font-size: 22px;
  line-height: 100%;
  letter-spacing: 0.5px;
  margin-right: 24px;
}

.header .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.logo img{
  width: 98px;height: 64px;
}

.main{
  margin-top: 125px;
}

.container{
  max-width: 1280px;
  margin:auto;
  border-radius: 16px;
  padding: 24px;
}

.blockShadow{
  box-shadow: 0px 4px 30px 0px #0000001A;
}

.tools{
  display:flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.tools .tool-block{}
.tools .tool-block label{
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.5px;
}
.tools .tool-block select{
    margin: 0 21px;
}
.order-block{}
.order-block button{
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.price{
  color:#01A2B1;
}

.storeInfo{margin-top: 80px;}

.icon{
  width: 24px;
  height: 24px;
  margin-left: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  display: inline-block;
}

.icon.block{background-image: url('../images/block.svg');}
.icon.block.active{background-image: url('../images/block_active.svg');}
.icon.list{background-image: url('../images/list.svg');}
.icon.list.active{background-image: url('../images/list_active.svg');}
.icon.close{background-image: url('../images/cross.svg');}
.icon.first{background-image: url('../images/first.svg');margin: 0;margin-right: 4px;}
.icon.last{background-image: url('../images/last.svg');margin-left: 4px;}
.icon.less{background-image: url('../images/left.svg');margin: 0;margin-right: 4px;}
.icon.add{background-image: url('../images/right.svg');margin-left: 4px;}

#Loading{
  display:block;width:100vw;height:100vh;opacity:1;position:fixed;top:0px;left: 0;
  z-index:1099;background-color:rgba(0, 0, 0, 0.1);
}
#Loading #Icon{
  width:50px;height:50px;
  margin-top: -25px; /*高度的一半*/
  margin-left: -25px; /*寬度的一半*/
  border-radius: 10px;/*圓角*/

  position: absolute;top: 50vh; /*從上面開始算，下推 50% (一半) 的位置*/
  left: 50vw; /*從左邊開始算，右推 50% (一半) 的位置*/
  background-image:url('../images/Rolling-1s-200px.svg');
  background-size:100%;
  background-color:#f5f5f5;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}


.pop_mask{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;left: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  display: table;
  z-index: 10;
}
.pop_mid{
  text-align: center;
  display: table-cell;
  vertical-align:middle;
}
.pop_content{
  max-height: 70vh;
  padding:15px;
  background: #fff;
  width: calc( 100vw - 40px);
  max-width: 548px;
  margin: auto;
  border-radius: 16px;
  padding: 10px;
  position: relative;
}
.pop_content .alert{
  width: 40px;height: 40px;display: block;
  margin: 26px auto 10px auto;
}
.pop_content p{
  font-weight: 300;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0.5px;
  margin-bottom: 26px;
}
.pop_content .close{
  border: none;
  background-color: transparent;
  position: absolute;
  right: 16px;top:16px;
}
.img_block img{width: 100%;}



.prod{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 8px;
}


.prod .card{width: calc( (100% - 32px) / 5);padding: 16px 20px;text-align: center;}
.prod .card .img_block{
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    padding-top: 100%;
    display: block;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.prod .card .img_block::after{
  content: '查看';
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url('../images/search.svg');
  background-position: 33% 51%;
  background-repeat: no-repeat;
  background-size: 24px;
  background-color: rgb(0 0 0 / 40%);
  opacity: 0;
  transition: opacity .25s ease-out;
}
.prod .card .img_block:hover::after{
    opacity: 1;
}
.prod .card .img_block img{
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0;
}

.prod .card label{
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    padding: 8px 0;
    display: block;
}
.prod .card p{display: none;}
.prod .card .price{
    font-weight: 600;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 0.5px;
    margin-top: 4px;
    display: block;
}
.detail .sum{
    font-weight: 600;
    font-size: 24px;
    line-height: 21px;
    letter-spacing: 0.5px;
    text-align: center;
    color: #01A2B1;
}
.prod.list{}
.prod.list .card{width: 100%;padding: 0;display: flex;text-align: left;margin-bottom: 24px;}
.prod.list .card .img_block{
    width: 201px;
    margin-right: 24px;
    padding-top: 170px;
}
.prod.list .card .card-item{
    width: 70%;
}
.prod.list .card label{
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
}
.prod.list .card p{
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.5px;
}
.prod.list .card .price{
    width: 30%;
    font-weight: 600;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.prodInfo .mTitle{display: none;}
.prodInfo h2{}
.prodmain{
    display: flex;
    justify-content: space-between;
    position: relative;
}
.prodmain .slider{
  width: calc( 50% - 12px);
}
.prodmain .swiper.mySwiper2 .swiper-button-next:after,
.prodmain .swiper.mySwiper2 .swiper-button-prev:after{font-size:28px}
.prodmain .swiper .swiper-slide img{width: 100%;border-radius: 8px;}
.prodmain .detail{
    width: calc( 50% - 12px);
    position: relative;
    padding-bottom: 52px;
}
.prodmain h3{
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0.5px;
  margin-bottom: 32px;
}
.prodmain p:first-child{}
.prodmain p{font-weight: 500;font-size: 16px;line-height: 140%;letter-spacing: 0.5px;}
.prodmain .item{
    margin-top: 32px;
}
.prodmain .detail .item .block{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    min-height: 40px;
}
.prodmain .detail .item .block.checkList{display: flex;align-items: flex-start;margin-bottom: 4px;}
.prodmain .detail .item .block label:not(.radioBlock){
    flex:0 0 140px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.5px;
}
.prodmain .detail .item .block label.radioBlock{
  width: calc( (100% - 12px)/2 );
  font-size: 16px;
  letter-spacing: 0.5px;
}
.prodmain .detail .item .block .radioBlock:nth-child(odd){
	margin-right:12px;
}
.prodmain .detail .item .block.checkList .rules{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.prodmain .detail .item .block select{
    width: 100%;
}
.prodmain .detail .item .block select:disabled{
    background-color:#ccc;
}
.prodmain .detail .item .block .amt{flex: 0 0 104px;padding-left: 16px;font-weight: 400;font-size: 14px;color: #8D8D8D;flex: 0 0 129px;}
.prodmain .detail .item .block .price{
    font-weight: 600;
    font-size: 32px;
    line-height: 21px;
    display: inline-block;
}
.prodmain .detail .item .block .context{

}
.prodmain .detail .send{
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 100%;
}
.prodmain .detail .send button:disabled{background-color: #ccc;}
.prodmain .detail .send button{
    border: none;
    background-color: #01A2B1;
    height: 52px;
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    line-height: 21px;
    letter-spacing: 0.5px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}
.storeInfo{
  position: relative;
  z-index: -1;
}
.storeInfo h3{
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0.5px;
    padding-bottom: 16px;
    border-bottom: 2px solid #EBEBEB;
}
.storeInfo p{
    margin-top: 40px;
    margin-bottom: 55px;
}

.order{
    display: flex;
    flex-wrap: wrap;
}
.order h2{
    flex: 0 0 100%;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}
.orderItem{
    flex: 0 0 calc(50% - 16px);
    margin-right: 32px;
}
.orderItem .img_block{
    flex: 0 0 40%;
    margin-right: 24px;
}
.orderItem img{
    border-radius: 16px;
    overflow: hidden;
}
.orderItem .orderInfo{
  flex:0 0 calc( 60% - 24px );
}
.orderItem .orderInfo .title{
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}
.orderItem .orderInfo .itemType{}
.orderItem .orderInfo .itemType li{
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.5px;
    display: flex;
}
.itemType label{flex: 0 0 100px;color: #6F6F6F;}
.itemType span{
    color: #191919;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.5px;
}
.orderItemInfo{
    display: flex;
}
.orderForm{
    flex: 0 0 calc(50% - 16px);
    display: block;
}
.bottom_btn{
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom_btn a,
.bottom_btn button{
    border: none;
    padding: 16px;
    cursor: pointer;
    font-weight: 400;
    font-size: 20px;
    line-height: 21px;
    letter-spacing: 0.5px;
    text-align: center;
    color: #FFFFFF;
    background-color: #01A2B1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.bottom_btn button.diabled{
  color: #868686;
  background-color: #ccc;
  cursor:not-allowed;
}
.icon.redirect{
  background-image: url('../images/redirect.svg');
  display: block;
  margin-left: 10px;
}
.diabled .icon.redirect{
  background-image: url('../images/redirect_disabled.svg');
}


/* The radioBlock */
.radioBlock {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 8px;
  border: 1px solid #DEDEDE;
  border-radius: 8px;
  padding-left: 42px;
}

.radioBlock.disabled{color: #9F9F9F;background-color: #DEDEDE;}

/* Hide the browser's default radio button */
.radioBlock input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin: 0;
  margin-right: 8px;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 8px;
  left: 8px;
  height: 24px;
  width: 24px;
  /* background-color: #fff; */
  border-radius: 50%;
  border: 2px solid #9F9F9F;
}

/* On mouse-over, add a grey background color */
.radioBlock:hover input ~ .checkmark {
  /* background-color: #ccc; */
}

/* When the radio button is checked, add a blue background */
.radioBlock input:checked ~ .checkmark {
  background-color: #fff;
  border: 2px solid #01A2B1;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioBlock input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioBlock .checkmark:after {
 	top: 3px;
 	left: 3px;
 	width: 14px;
 	height: 14px;
 	border-radius: 50%;
 	background: #01A2B1;
}

.empty{
    text-align: center;
}
.empty img{}
.empty span{display: block;margin-top: 24px;}


.pagination{
  display: flex;
  margin: auto;
  border-radius: .25rem;
  margin-top:2rem;
  justify-content: center;
}
.page-item:first-child .page-link{
margin-left: 0;
border-radius: .25rem;
}
.page-item{margin:0 .25rem;}
.page-link{
  min-width: 33px;
  height: 36px;
  text-align: center;
  line-height:30px;
  position:relative;
  color:#20a8d8;
  background-color:#fff;
  border:1px solid #D9D9D9;
  text-decoration:none;
  border-radius: .25rem;
  color: #6F6F6F;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.page-item.disabled .page-link{
  color:#D9D9D9;
}
.page-item.active .page-link{
  background-color: #01A2B1;
  color: #fff;
}
.is-invalid {
  border: 1px solid red;
}

#version{background-color: transparent;width: 180px;height: 28px;position: fixed;right: 0;bottom: 0;color: #7c7c7c;}