/* 漢堡選單 */
.hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible;z-index: 999; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #fff; } button:active,button:focus{outline: none;}
.hamburger-box { width: 30px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 4px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; }

/* Minus */
 .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
 .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
 .hamburger--minus.is-active .hamburger-inner::before { top: 0; }
 .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; }

 ::placeholder { color: #8c8c8c !important; font-size: 1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif; }

/* 一般頁面主按鈕 start */
button.main-button{background-color: var( --link-color);display: block;padding: 5px 20px;width: 30%;border-radius: 0.25rem;text-align: center;margin:40px auto 0;transition: all .3s ease-in;font-size: 1.25rem;color:#fff;}
button.main-button:hover{background-color: var(--link-color-hover);}
button.main-button.full {width: 100%;}
button.white{border:1px solid #fff ;color: #fff;background: transparent;}
button.white:hover{color: rgb(65, 34, 176);background: #fff;}

button.form-button { padding: 10px 20px; }






.main-button{background-color: var( --link-color);display: block;padding: 5px 20px;width: 30%;border-radius: 0.25rem;text-align: center;margin:40px auto 0;transition: all .3s ease-in;font-size: 1.25rem;color:#fff;}
.main-button:hover{background-color: var(--link-color-hover);}
.main-button.full {width: 100%;}
.return .main-button {margin: 60px auto 0;}
.return .main-button i {transition: all .3s ease-in;}
.return .main-button:hover i {transform: translateX(-2px);}


.more_btn {margin:0;display: inline-block;border-radius: 5px;}
.more_btn a{color: var( --link-color);display: inline-block;transition: all .3s ease-in;font-weight: 300;font-size:1rem;}
.more_btn i{font-size: .8rem;transition: all .3s ease-in;}
.more_btn:hover a{color: var(--link-color-hover);}
.more_btn:hover i{transform: translateX(2px);color: var(--link-color-hover);}

.more_btn.more_btn_right {display: flex;justify-content: flex-end;}



.big_btn{background-color: var( --link-color);display: block;padding: 10px 20px;width: 30%;border-radius: 0.25rem;text-align: center;margin:40px auto 0;transition: all .3s ease-in;}
.big_btn:hover{background-color: var(--link-color-hover);}
.big_btn a{color: #fff;display: block;}
.big_btn a h5{margin: 0;padding: 0;}

/* 頁碼 */
.page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25;  background-color: transparent; border: 0px solid #dee2e6; }
ul.pagination {margin: 60px auto 0; }
ul.pagination li a {color:#333;transition: all .2s ease-in;}
ul.pagination li a:hover { color:#555; }
ul.pagination li a.is-active { color: var(--link-color);  background-color: transparent;}
ul.pagination li a:hover:not(.is-active) { background-color: transparent;}


/* ＋-icon */
.quantity-con-all{display: flex; align-items: center;margin:0 0 20px;}
.quantity-block{padding:0 1.5rem 0 3rem;display: flex;}
.quantity-block input{width: 100px; border: 0; border: 1px solid #dfdfdf;color: var(--text-g-color);padding: 5px 15px;}
.quantity-remaining {color: #afafaf;}
.less,.add{display: inline-block; background-color: #fff;color:var(--text-g-color);cursor: pointer;transition: all .1s ease-in;border: 1px solid #dfdfdf;width: 30px;text-align: center;line-height: calc(2.25rem);}
.less:active,.add:active{background-color:#dfdfdf;}
.less.disabled,.add.disabled{display: inline-block; color:#afafaf; background-color: #dfdfdf; }





input, select { caret-color: rgba(0, 0, 0, 0.1); border: 1px solid #dfdfdf; outline: 0px; color: var( --text-g-color); font-weight: 300; line-height: 1.5; outline: none; padding-left: 1rem; font-size: 1rem; height: calc(2.25rem + 2px); }
input {caret-color: rgba(126, 126, 126, 0.6);}


.form-button { background-color: var( --link-color); margin-top: 40px; margin-right: 20px; text-align: center; border-radius: 0.3rem; transition: all 0.2s ease-in; border: 1px solid var( --link-color); font-weight: 400; border: none; cursor: pointer; color: #fff; font-size: 1.1rem; }
.form-button:hover { background-color:  var( --link-color-hover); }
.form-button.gray { background-color: #bdb195; }
.form-button.gray:hover { background-color: #cec4ab; }
.form-button a { color: #fff; display: block; padding: 10px 20px;margin: 0; }
.form-button.big { width: 300px; }
.form-button.solid { background-color: transparent; border: 1px solid  var( --link-color);width: 300px; }
.form-button.solid a { color:  var( --link-color);display: flex;justify-content: center;align-items: center;}
.form-button.solid:hover { background-color:  var( --link-color-hover); }
.form-button.solid:hover a { color: #fff; }
.form-button:nth-child(2) { margin-right: 0px; }

.form-button.solid .icon svg .cart-icon { fill: var(--link-color); transition: all .3s ease-in; }
.form-button.solid a { color: var(--link-color); display: flex; justify-content: center; align-items: center; }
.form-button.solid .icon { width: 25px; margin-right: .5rem; }
.form-button.solid:hover .icon svg .cart-icon { fill: #fff;  }


/* 彈跳視窗 */
.modal .form-button.pay {width: 40%;margin:40px auto 10px;text-align: center;}




.modal .modal-con ul {padding: 0;}
.modal .modal-con ul li p{font-size: 1.2rem;font-weight:400;}
.modal .modal-con ul li span{font-size: 1.8rem;letter-spacing: .2em;color: #3A779E;}
.modal .modal-con .qrimg {width:40%;margin: auto;text-align: center;}
.modal .modal-con .qrimg img{width: 100%;border: 15px solid #cddce6;}

.modal .modal-con .qrimg p {margin: 10px;font-size: 1.2rem;}








select { background: url(../img/select-icon.svg) no-repeat 95% 50%; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -khtml-border-radius: 0; appearance: none; background-color: #fff; border-radius: none; height: 35px; min-width: 80px; padding: 5px; color:#5c5c5c;border: 1px solid #dfdfdf ; }
select:focus {outline: none;}
.quantity-block select {width: 110px;cursor: pointer;}


/* 結帳按鈕 */
.form-button.pay {margin: 0; } 
.form-input-pay input[type='radio'] { width: auto; height: auto;    margin: 10px 5px 15px 15px;}
.form-input-pay input[type='radio'] + label {cursor: pointer;}

.form-input,.form-select {display: flex;justify-content: space-between;margin: 20px 0;}
.form-input input,.form-input.single-column input{margin: 0;}
.form-input input:focus,.form-input.single-column input:focus{box-shadow: 0 0 0 0.05rem #ffaa00;}

.form-input input{width:48%;}
.form-input.single-column input{width:100%;}

.form-select select {width:48%;margin: 0;}

.form-input.single-column .label-control { width: 100%; }
.flex-btn { display: flex; width: 100%; }
.flex-btn .btn { color: #fff; background-color: var(--link-color); transition: all .3s ease-in; border-radius: 0 5px 5px 0; }
.form-input.single-column input { width: 100%; }



.product-content-list-title input[type='checkbox'] + label {cursor: pointer;}



@media (max-width: 1199px) {

}


@media (max-width:991px) {
  button.main-button { width: 50%; }
}

@media (max-width: 767px) {
  .main-button { width: 60%; }

  .form-button.pay {margin: 10px auto;} 






/* 彈跳視窗 */
.modal .form-button.pay {width: 80%;}

.modal .modal-con ul li p{font-size: 1.1rem;font-weight:400;}
.modal .modal-con ul li span{font-size: 1.4rem;letter-spacing: .1em;color: #3A779E;}
.modal .modal-con .qrimg {width:70%;}
.modal .modal-con .qrimg img{width: 100%;border: 15px solid #cddce6;}

.modal .modal-con .qrimg p {margin: 10px;font-size: 1.2rem;}

.modal .modal-lg { max-width:90%; left: 5%;}

}

@media (max-width: 576px) {
  button.main-button{margin: 40px auto 0;}
}