@charset "UTF-8";
/* bootstrap 客製樣式 | ├── badge標籤 ├── alert注意事項 ├── Button按鈕 ├── form表單 ├── pagination頁數 ├── Table表格 ├── modal跳窗 ├── tab └──
*/
/* grid、row、col */
/* ---------------------------------------------------------------------------------------------------- */
.container { padding-left: 0; padding-right: 0; }

.con-block { position: relative; background-color: #ffffff; border: 1px solid #ececec; border-top: 5px solid #ececec; padding: 20px; }

.con-block.con-inpage { border-top-left-radius: 0; border-top-right-radius: 0; padding: 40px 30px; }

@media (max-width: 767px) { .section01 { padding: 15px 5px; }
  .section02 { padding: 20px 5px; }
  .section01 .container, .section02 .container { padding-right: 10px; padding-left: 10px; }
  .row { margin-right: -10px; margin-left: -10px; }
  .no-gutters { margin-right: 0; margin-left: 0; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { padding-right: 10px; padding-left: 10px; }
  .section-bg02 { background: url("../images/home/conBg_home_m.jpg") top center no-repeat; background-size: cover; }
  .wrap { min-height: auto; }
  .con-block { position: relative; background-color: #ffffff; padding: 20px; }
  .con-block.con-inpage { border-top-left-radius: 0; border-top-right-radius: 0; padding: 15px 10px; } }
/* alert注意事項 */
/* ---------------------------------------------------------------------------------------------------- */
.alert { font-size: 14px; text-align: left; padding: 0.75rem 1.25rem; margin: 0; }

.alert-danger { background-color: #FFF5F7; color: #A53953; border: 1px solid #FFE2E8; }

.alert-secondary { background-color: #F5F5F5; color: #3F4560; border: 1px solid #dddddd; }

@media (max-width: 767px) { .alert { padding: 0.5rem 0.75rem; } }
/* badge標籤 */
/* ---------------------------------------------------------------------------------------------------- */
.badge-type.badge { padding: 0.5rem 0.375rem; }

.badge-type.badge-warning { color: #fff; background-color: #EE825A; }

.badge-type.badge-danger { color: #fff; background-color: #E8698C; }

.badge-type.badge-primary { color: #fff; background-color: #3E9DE5; }

.badge-type.badge-info { color: #fff; background-color: #2FAFB7; }

.btn, .btn-group > .btn { padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.5; border-radius: 3px; }

.btn-lg, .btn-group-lg > .btn { padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.75; border-radius: 3px; }

.btn-sm, .btn-group-sm > .btn { padding: 0.2rem 0.5rem; }

.form-control { padding: 0.5rem 0.75rem; height: calc(1.5em + 1rem + 2px); font-size: 0.875rem; line-height: 1.5; border-radius: 3px; }

.form-control-lg { padding: 0.75rem 1rem; height: calc(1.75em + 1.5rem + 2px); font-size: 0.875rem; line-height: 1.75; border-radius: 3px; }

.form-control-sm { padding: 0.2rem 0.5rem; }

.btn-dark, .btn-black, .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #fff; background-color: #171616; border-color: #171616; }

.btn-dark:hover, .btn-black:hover { color: #fff; background-color: #312f2f; border-color: #312f2f; }

.btn-outline-dark, .btn-outline-black { border-color: #171616; }
.btn-outline-dark:hover, .btn-outline-black:hover { color: #fff; background-color: #312f2f; border-color: #312f2f; }

.btn-white, .btn-white:hover { color: #171616; background: #fff; border-color: #fff; }

/* 放在舊header的樣式 */
/*黑按鈕*/
.btn-banana { background: #171616; color: #fff; border-color: #171616; }

.btn-banana:hover { background: #312f2f; color: #fff; border-color: #312f2f; }

.btn-banana:not(:disabled):not(.disabled):active, .btn-banana:not(:disabled):not(.disabled).active, .show > .btn-banana.dropdown-toggle { background: #312f2f; color: #fff; border-color: #312f2f; }

/* END of 放在舊header的樣式 */
/* form表單 */
/* ---------------------------------------------------------------------------------------------------- */
input[type=checkbox], input[type=radio] { width: 1em; height: 1em; vertical-align: middle; }

.con-form { width: 100%; margin: 0 auto 1.875rem auto; }

/*webkit瀏覽器專用*/
.con-form ::-webkit-input-placeholder { color: #BBBBBB; font-size: 14px; }

/*Firefox 4-18瀏覽器專用*/
.con-form input::-moz-placeholder { color: #BBBBBB; font-size: 14px; }

/*Firefox 19+瀏覽器專用*/
.con-form input::-moz-placeholder { color: #BBBBBB; font-size: 14px; }

/*IE10瀏覽器專用*/
.con-form:-ms-input-placeholder { color: #cccccc; font-size: 14px; }

.con-form .form-group { margin-bottom: 1rem; }

/* .con-form .row { margin-right: -10px; margin-left: -10px;
} */
/* .con-form .col-md-3,
.con-form .col-md-4,
.con-form .col-md-8,
.con-form .col-md-9,
.con-form .col-3,
.con-form .col-4,
.con-form .col-8,
.con-form .col-9 { padding-right: 10px; padding-left: 10px;
} */
.con-form label { text-align: right; line-height: 20px; }

.con-form .user-avatar { display: flex; align-items: center; flex-direction: column; margin-bottom: 1.25rem; }

.con-form .avatar { width: 80px; border-radius: 80px; overflow: hidden; border: 3px solid #E5C370; margin-bottom: 0.75rem; }

.con-form .form-control { background: #ffffff; border: 1px solid #d8d8d8; color: #1d1d1d; border-radius: 0px; padding: 0.375rem 0.75rem; }

.con-form .form-control:focus { outline: 0; border: 1px solid #1d1d1d; box-shadow: 0px 0px 4px 0px transparent; }

.con-form .form-control:disabled, .con-form .form-control[readonly] { background: rgba(0, 0, 0, 0.05); color: #414655; opacity: 1; }

.con-form .text-muted { color: #767676 !important; }

.con-form .form-control-plaintext { color: #ffffff; }

.con-form .note-text { font-size: 14px; display: block; margin-top: 5px; }

.con-form .form-title { font-size: 20px; color: #0ebf7a; border-left: 3px solid #0ebf7a; margin-bottom: 20px; padding-left: 10px; }

.form-btn { width: 240px; }

.form-btn-group { width: 60%; display: flex; justify-content: space-between; margin: 1.2em auto 0; }

.form-btn-group .btn { width: 48%; }

.coin-text { font-size: 18px; color: #FFE600; font-weight: bold; padding: 3px; margin: 0; }

.con-form label { font-size: 14px; padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5; }

.con-form .custom-control-label { font-size: 14px; }

.con-form .custom-control-label::before { position: absolute; top: 0; left: -1.5rem; display: block; width: 1.2rem; height: 1.2rem; pointer-events: none; content: ""; background: #0ebf7a; border: #0ebf7a solid 1px; border-radius: 2px; }

.con-form .custom-control-label::after { position: absolute; top: 0; left: -1.5rem; display: block; width: 1.2rem; height: 1.2rem; content: ""; background: #005e2f; border-radius: 2px; border: #0ebf7a solid 1px; }

a.select-bank { position: relative; border-bottom: 5px solid #cccccc; display: inline-block; margin-right: 5px; }

a.select-bank:last-child { margin-right: 0; }

a.select-bank.active { color: #f5c719; border-bottom: 5px solid #f5c719; }

a.select-bank.active:after { content: ""; border-bottom: 0.5em solid; border-right: 0.5em solid transparent; border-top: 0; border-left: 0.5em solid transparent; position: absolute; bottom: -18px; left: 50%; margin-left: -8px; }

/*日期*/
.form-group.form-range-date .form-control, .form-group.form-range-date .input-group-text { border-radius: 0; border: 0; }

.form-group.form-range-date .input-group { border: 1px solid #d8d8d8; border-radius: 0; overflow: hidden; }

@media (max-width: 767px) { .con-form label { text-align: left; }
  .con-form { width: 100%; margin: 0 auto 1.25rem auto; }
  .form-btn-group { width: 100%; margin: 1.2em auto 0; }
  .con-form .user-avatar { margin-bottom: 1rem; }
  .con-form .avatar { width: 70px; }
  .con-form .form-control { padding: 0.375rem; }
  .con-form .form-group { margin-bottom: 0.625rem; } }
/* pagination頁數 */
/* ---------------------------------------------------------------------------------------------------- */
.pagination { font-size: 0.875rem; color: #888; }

.page-link { padding: 0.5em 0.75em; background: none; border: none; color: inherit; }
.page-link::after { content: ""; display: block; margin-top: 0.25em; border-top: 2px solid transparent; }
.page-link:hover { background: none; color: #b89864; }

.page-item.active .page-link { font-weight: bold; background: none; border: none; color: #b89864; }
.page-item.active .page-link::after { border-color: initial; }

@media (min-width: 768px) { .page-link { padding: 0.25em 1.25em 0; } }
/* Table表格 */
/* ---------------------------------------------------------------------------------------------------- */
.con-table .table { font-size: 14px; text-align: center; table-layout: fixed; word-break: break-all; background: #ffffff; color: #1d1d1d; }

.con-table .table tr { border: 1px solid #ececec; }

.con-table .table tr:nth-child(2n+2) { background: #ffffff; }

.con-table .table tr.bg-style01 { background: #ececec; }

.con-table .table th, .con-table .table td { vertical-align: middle; border: 0; }

.con-table .table th { background: #8E8E8E; color: #ffffff; font-weight: bold; font-size: 16px; border: 0; padding: 0.5rem; }

.con-table .table p { margin-bottom: 5px; }

.con-table .btn { white-space: nowrap; }

/* 放在舊header的樣式(購物車使用?) */
.con-table .table .bg-gift.bg-gift { background: #f7f7f7; }

.con-table .table .bg-rg.bg-rg { background: #fee; }

/* END of 放在舊header的樣式 */
@media (max-width: 768px) { .con-table .table th { font-size: 14px; }
  .con-table .table td { padding: 0.75rem 0.5rem; } }
/* modal彈窗 */
/* ---------------------------------------------------------------------------------------------------- */
.popup-style { color: #ffffff; }

.popup-style .modal-content { background: #EBEEF7; border-radius: 10px; overflow: hidden; }

.popup-style .modal-header { background: #5aa6ff; /* Old browsers */ background: -moz-linear-gradient(top, #888888 0%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #888888 0%, #000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #888888 0%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* IE6-9 */ border-bottom: 0; padding: 0.75rem 1rem; }

.popup-style .modal-header h5 { font-size: 18px; }

.popup-style .modal-body { font-size: 16px; padding: 0; }

.popup-style .modal-sm .modal-body { padding: 30px 20px; }

.modal-header .close { color: #ffffff; opacity: 1; }

@media (max-width: 767px) { .popup-style .modal-header h5 { font-size: 16px; } }
/* tabs切換 */
/* ---------------------------------------------------------------------------------------------------- */
.tabs-style01 .nav { align-items: stretch; justify-content: center; border-bottom: 1px solid #E5C370; }

.tabs-style01 .nav-pills .nav-link { width: 50%; color: #FFDD00; font-weight: bold; background-color: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0); border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; }

.tabs-style01 .nav-pills .nav-link:first-child { margin-left: 0; }

.tabs-style01 .nav-pills .nav-link.active, .tabs-style01 .nav-pills .show > .nav-link { color: #3B2A07; background: #cda035; /* Old browsers */ background: -moz-linear-gradient(left, #cda035 0%, #b57e10 10%, #f9df7b 31%, #fff3a6 51%, #f9df7b 68%, #b57e10 90%, #cda035 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #cda035 0%, #b57e10 10%, #f9df7b 31%, #fff3a6 51%, #f9df7b 68%, #b57e10 90%, #cda035 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #cda035 0%, #b57e10 10%, #f9df7b 31%, #fff3a6 51%, #f9df7b 68%, #b57e10 90%, #cda035 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* IE6-9 */ }

.tabs-style01 .nav-pills .nav-link img { margin-right: 0.375rem; }

.tabs-style01 .nav-pills .nav-link.active img.icon-on, .tabs-style01 .nav-pills .show > .nav-link img.icon-on { display: block; }

.tabs-style01 .nav-pills .nav-link img.icon-on, .tabs-style01 .nav-pills .nav-link.active img.icon-off, .tabs-style01 .nav-pills .show > .nav-link img.icon-off { display: none; }

.tabs-style01 .nav-pills .nav-link span { margin-top: 3px; }

.tabs-style02 .nav { align-items: stretch; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2); font-size: 18px; }

.tabs-style02 .nav-pills .nav-link { color: #767676; font-weight: bold; background-color: rgba(255, 255, 255, 0); border-bottom: 3px solid rgba(255, 255, 255, 0); border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }

.tabs-style02 .nav-pills .nav-link:first-child { margin-left: 0; }

.tabs-style02 .nav-pills .nav-link.active, .tabs-style02 .nav-pills .show > .nav-link { color: #1d1d1d; border-bottom: 3px solid #000000; }

.tabs-style02 .nav-pills .nav-link img { margin-right: 0.375rem; }

.tabs-style02 .nav-pills .nav-link.active img.icon-on, .tabs-style02 .nav-pills .show > .nav-link img.icon-on { display: block; }

.tabs-style02 .nav-pills .nav-link img.icon-on, .tabs-style02 .nav-pills .nav-link.active img.icon-off, .tabs-style02 .nav-pills .show > .nav-link img.icon-off { display: none; }

.tabs-style02 .nav-pills .nav-link span { margin-top: 3px; }

.tabs-style02 + .tab-content { padding: 1.875rem 1rem; }

@media (max-width: 767px) { .tabs-style01 .nav-pills .nav-link { width: 50%; color: #FFD671; font-size: 16px; font-weight: bold; background-color: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0); border-radius: 0; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
  .tabs-style01 .nav-pills .nav-link img { width: 24px; } }
/*仿tab*/
.tabs-style03-block { width: 60%; border-radius: 100px; overflow: hidden; border: 2px solid #E5C370; margin: 1.25rem auto 1.875rem auto; }

.tabs-style03-block .row { margin-left: -10px; margin-right: -10px; }

.tabs-style03-block .col-3, .tabs-style03-block .col-6 { padding: 0; }

.tabs-style03-block .btn { position: relative; color: #FFDD00; border-radius: 0; }

.tabs-style03-block .btn.active { background: #cda035; background: -moz-linear-gradient(top, #cda035 0%, #f9df7b 10%, #fff3a6 30%, #f9df7b 50%, #cda035 80%); background: -webkit-linear-gradient(top, #cda035 0%, #f9df7b 10%, #fff3a6 30%, #f9df7b 50%, #cda035 80%); background: linear-gradient(to bottom, #cda035 0%, #f9df7b 10%, #fff3a6 30%, #f9df7b 50%, #cda035 80%); border: 1px solid transparent; color: #3B2A07; }

@media (max-width: 767px) { .tabs-style03-block { width: 100%; margin: 0.75rem auto 1.25rem auto; }
  .tabs-style03-block .btn { font-size: 16px; padding: 0.375rem; } }

/*# sourceMappingURL=bootstrap-custom.css.map */