@charset "UTF-8";
@tailwind base;
@tailwind components;
@tailwind utilities;

@view-transition { navigation: auto; }
:root { --color-black: #393939; --color-primary: #ad7dd3;}
:root[data-theme="light"] { --text: #100916; --background: #f3edf7; --primary: #ad7ed3; --secondary: #f8f0ff; --accent: #964078; }
:root[data-theme="dark"] { --text: #f0e9f6; --background: #0e0812; --primary: #5b2c81; --secondary: #08000f; --accent: #bf69a1; }

* { box-sizing: border-box; outline: none; border: 0 solid; }
body{ color:#1f242a; padding: 0; margin: 0; font-size: 15px;line-height: 1.5em; font-family: 'Microsoft JhengHei', Arial , Helvetica, sans-serif; background: url('../images/body_bg.jpg');}
p{ margin: 0 0 10px;}
a{ text-decoration: none; color:#1f242a;}
a:hover{ color:#9fa09a; text-decoration: none;}
img{ max-width: 100%; height: auto;}
button{background: none; border: 0; padding: 0; cursor: pointer;}
button[disabled]{cursor:not-allowed; }
header,main,footer{
    max-width: 769px;
    margin: 0 auto;
}
.font-container{
    border-radius: 3px;
    border:1px solid #e1e0e5;
    background-color: #fff;
    height: 30px;
    width: 100%;
}
.input_group{ margin-bottom: 10px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.input_group label{ width: 30%; text-align: right;}
.input_group input,.input_group select{ width: 70%;}
.input_group .input_group_add input{ width: 100%; margin-top: 10px;}

iframe { border:none;border-radius:5px}

.btn_yellow{ background-color: #ffea3e; margin: 0; width: 100%; display: flex; align-items: center; justify-content: center; height: 45px; font-size: 16px;}
.btn_yellow:hover{ opacity: 0.8;}

.close_btn{ margin-right: 5px;}

/*文字*/
.font_pink{ color: #fb3d7b;}
.font_orange{color: #ff8100;}
.font_red{ color:#cf1717}
.font_blue{ color: #417cce; font-weight: bold;}
.font_brown{ color:brown;}

/*標題區*/
.memberNum { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; flex-wrap:wrap; height:58px;}
.memberNum h4{ display: flex; align-items: center; justify-content: flex-start; padding: 0px; margin: 12px 0; font-size: 1em; font-weight: normal; }
.memberNum h4 img{ width: 16px; height: 16px; margin-right: 5px;}
.memberNum span{ display: block; height: 1px; background-color: #dfdde2; flex: 1 1 auto;}
.memberNum span:first-child{ flex: 0 0 auto; width:0px;}
.memberNum button{/* border-radius: 5px; background-color: #ad7dd3; color: #fff; text-align: center; padding: 7px 12px; line-height: 1em; margin-right: 10px;*/}

.member-menu { background-color: #fff; box-shadow: 0px 6px 28px -7px #4d4d4d36; position: sticky; top: 0; z-index: 3; transform: translateY(-58px); transition: 0.5s; }
.show-menu .member-menu { transform: translateY(0%); }
.member-menu.device-type-PC { }

.search_box { display: flex; justify-content: flex-end; margin: 10px 0; }
.searchBar{ position: relative;}
.search_box input{ border: 1px solid #9fa09a; width: 180px; border-radius: 25px; box-shadow: 2px 2px 0 #9fa09a; height: 27px; padding: 0 40px 0 10px;}
.searchBar button{ width: 20px; height: 20px; position: absolute; top: 4px; right: 12px;}
.searchBar button img{ width: 100%; vertical-align: unset;}

.bannerBox{ display: flex; align-items: center; justify-content: center; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: 100%;}
/*.bannerBox{ display: flex; align-items: center; justify-content: center; min-height: 190px; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: 100%;}*/

.bannerBox .item{ max-height: 400px; overflow: hidden;}
.bannerBox.owl-carousel .owl-item img{ width: auto; height: 100%; max-width: none;}

.banner_layout{ position: relative;}
.banner_layout .logoBox { position: absolute; top: 10px; right: 10px; z-index: 2; max-width: 25%; }
.banner_layout .logoBox img { height: auto !important; }

ul.navBox.nav-menu { list-style: none; padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; /*background-color: #fff; */ margin-bottom: 10px; /* border: 1px solid rgba(227, 227, 227, .7);*/ border-bottom: 4px solid rgba(227, 227, 227, .7); display: flex; align-items: center; justify-content: flex-start; }
ul.navBox.nav-menu li { font-size: 16px; padding: 10px; margin-right: 5px; cursor: pointer; position: relative; }
ul.navBox.nav-menu li.active { border-color: #666; color: #666; }
ul.navBox.nav-menu li:hover::before, ul.navBox.nav-menu li.active::before { content: ''; height: 4px; width: 100%; position: absolute; z-index: 1; left: 0; bottom: 0px; display: block; background-color: #ad7dd3; }
ul.navBox.nav-menu li.active a, ul.navBox.nav-menu li:hover a { color: #ad7dd3; }{ color: #ad7dd3;}

.skyBlueBg{background-color: #dab6f6; padding:11px;}
.whiteBg{ background-color: #fff !important;}

.memberInfo,.memModify{ background-color: #fff;}
.memberName{ display: flex; align-items: center; justify-content: flex-start; padding: 15px 15px 0;}
.memberName img{ border-radius: 50%; width: 35px; height: 35px;}
.memberName span{ padding-left:10px;}

.memberName .haveTo{ font-size: 12px;}

.mainInfo,.minorInfo{ list-style: none; padding: 0; margin: 0; overflow: hidden; margin:0 15px; padding: 15px 0;}
.mainInfo{ border-bottom: 1px dashed #dfdde2;}
.mainInfo li,.minorInfo li{ padding: 3px 0; display: flex; align-items: center;}
.mainInfo li::before{ content: ''; background: url('../images/icon_star.png'); width: 14px; height: 14px; display: block;}
.minorInfo li::before{ content: ''; background: url('../images/icon_arrow.png'); width: 14px; height: 10px; display: block;}
.mainInfo li span,.minorInfo li span{ display: inline-block; padding: 0 10px; border-right: 1px solid #dfdde2; margin-right: 10px; min-width: 81px; line-height: 1em;}

/*--修改會員資料--*/
.memModify .formBox{ margin: 20px 40px 20px 20px;}
.formBox label{ padding-right: 20px;}

.date_style{ display: flex; justify-content: space-between; flex:1; align-items: center;}
.date_style span{ padding: 0 5px;}

.input_group_add{ flex:1;}
.add_style>label{ align-self: flex-start; margin-top: 2px;}

/*瀏覽商品*/
.browseProductBox{ background-color: #fff; margin-bottom: 11px;}
.browseProductBox:last-child{ margin-bottom: 0;}
.ProGroup .add_timer{ position: relative;}
/*.ProGroup .add_timer .timer{ position: absolute; right: 0; top: 0; z-index: 2; padding: 12px 10px; text-align: right;}
.ProGroup .add_timer .timer span{ font-weight: bold; background-color: rgba(255, 255, 255, .85); line-height: 1em; padding: 3px 5px;}*/

.ProGroup dl,.ProGroup dt,.ProGroup dd{margin: 0; padding: 0; display: flex; align-content: center; justify-content: flex-start; flex-wrap: wrap;}
.ProGroup dl { align-content: center; padding: 15px; flex-wrap: nowrap; }
.ProGroup dl dt { display: flex; align-items: center; justify-content: center; width: 51px; height: 51px; margin-right: 10px; }
.ProGroup dl dt img { max-width: 100%; max-height: 100%; }
.ProGroup dl dd p{ margin: 0; width: 100%; font-size: 16px; color: #a0a0a0;}
.ProGroup dl dd p:first-child{ font-size: 17px; color:#14243d; margin-bottom: 3px;}
.ProGroup dl dd p span{ margin-right: 6px;}

.owl_box img{ border: 1px solid #fff; }
.text_box{ min-height: 120px; padding: 10px;}
.text_box button{ color: #62758f;}

.buy_box{ background-color: #f5f6f8; display: flex; align-content: center;justify-content: space-between; height: 48px; border-bottom:1px solid #dfe1e7;}
.buy_box img{ width: 20px; height: 20px; transform:scaleX(-1); margin-right: 5px;}
.buy_box p{ padding: 10px; margin:0; cursor: pointer; display: flex; align-items: center;}
.buy_box button{ width:110px; background-color: #ffea3e; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.ordererInfo{ padding: 10px 20px; display: flex; align-content: center; justify-content: space-between; background-color: #f5f6f8; border-bottom:1px solid #dfe1e7;}
.orderMain>p{ margin: 5px 0 0; font-size: 13px; color: #868686;}
.orderMain h3{ margin: 0 0 3px; line-height: 1.5em; font-size: 15px; font-weight: bold; color:#656565;}
.systemMain{padding:5px 0;}
.systemMain p{ margin-bottom: 0; font-size: 13px; color: #868686; line-height: 1.3em;}

.orderStatus{ display: flex; align-items: center; justify-content: center; color: #656565;}
.orderStatus img{ width: 25px; height: 25px; margin-right: 10px;}

/*--彈窗--*/
.mask_box{ background-color: rgba(0, 0, 0, .7); position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100vw; height: 100vh; z-index: 4;}

.bottom_modal{ position: fixed; display:flex;flex-wrap:wrap; background-color: #fff; max-height:400px; left: 0; z-index: 5; width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; overflow: auto;}
.bottom_modal header.title{ color: #7348BC; width:100%;background-color: #f8f0ff; margin: 0; display: flex; align-items: center; justify-content: space-between; max-width: none;}
.bottom_modal header.title h2{ font-size: 16px; padding-left: 10px; margin-bottom: 0;}
.bottom_modal header button{ width: 45px; height: 45px; color:#fff; display: flex; align-items: center; justify-content: center;}
.bottom_modal header button img{ width: 20px; height: 20px;}

.bottom_modal .proInfo{ background-color: #eef2f5; border:1px solid #dfe1e7; margin: 15px; display: flex; align-items: center; justify-content: flex-start; width:100%;}
.bottom_modal .proInfo img{ width: 110px; height: 110px; margin: 5px;}
.bottom_modal .proInfo ul{ list-style: none; margin: 0; padding: 0;}
.bottom_modal .proInfo ul li{padding: 0 15px; font-size: 14px;}

.proOrder_Box{ padding: 15px; overflow-y: auto; height: 45vh;width:100%;}

table.proOrder{ width: 100%;  border-collapse: collapse;}
table.proOrder tr th{ color:#ff4181; border-bottom: 1px solid #afafaf; padding:5px; text-align: left;}
table.proOrder tbody tr:nth-child(even){ background: #eef2f5;}
table.proOrder tr td{ padding: 8px 5px; }


.buyNum{ display: flex; align-content: center; }
.buyNum span{ height: 25px; border:1px solid #dfe1e7; display: flex; align-items: center; justify-content:center; flex:2; font-size: 13px; background-color: #fff;}
.buyNum span:first-child{ border-right: 0;  border-top-left-radius: 5px; border-bottom-left-radius: 5px; flex:1.5; }
.buyNum span:first-child:hover{ background-color: #eef2f5; cursor: pointer;}
.buyNum span:last-child{ border-left: 0;  border-top-right-radius: 5px; border-bottom-right-radius: 5px; flex:1.5;}
.buyNum span:last-child:hover{ background-color: #eef2f5; cursor: pointer;}

.bottom_modal>button{ display: flex; width: 100%; height: 45px; align-items: center; justify-content: center; background-color: #ad7dd3; color: #fff; font-size: 15px;}

/*--訂單成立--*/
.orderEstablish{position: fixed; background-color: #fff; left: 0; bottom: 0; z-index: 2; width: 100%; border-top-right-radius: 10px; border-top-left-radius: 10px; overflow: hidden;}
.orderEstablish header.title{ color:#7348BC; background-color: #f8f0ff; margin: 0; display: flex; align-items: center; justify-content: space-between; max-width: none;}
.orderEstablish header.title h2{ font-size: 16px; padding-left: 10px; margin-bottom: 0;}
.orderEstablish header button{ width: 45px; height: 45px; color:#fff;}
.orderEstablish header button img{ width: 20px; height: 20px; }

.orderEstablish>button{ display: flex; width: 100%; height: 45px; align-items: center; justify-content: center; background-color: #ad7dd3; color: #fff; font-size: 15px;}

.order_main{ padding: 20px; font-weight: bold;}
.order_main>h4{ color:#14243d; font-size: 17px; margin:0 0 15px 0;}
.order_main .order_info{ height: 130px; overflow-y: auto; padding-left: 10px;}
.order_main .order_info p{ margin: 0; line-height: 1.6em; color:#cf1717;}
.order_main>p{ color:#14243d; font-size: 17px; text-align: right;}
.order_main>p span{ font-size: 25px;}

.orderRecord{ }

/*訂購紀錄*/
.orderRecord ul,.orderRecord li{ list-style: none; margin: 0; padding: 0;}
.orderRecord ul.tab_list{ display: flex; justify-content: space-between; background-color: #fff; border: 1px solid rgba(227, 227, 227, .7);}
.orderRecord ul.tab_list li{ flex: 1; border-right: 0; color: #000; border-bottom:4px solid rgba(227, 227, 227, .7);}
.orderRecord ul.tab_list li a{ display: flex; flex-direction: column; height: 100%; width: 100%; align-items: center; justify-content: center; cursor:pointer; color:#000; flex-wrap: wrap; padding:25px 10px 10px;}
.orderRecord ul.tab_list li a p{ margin-bottom: 0;}

.orderRecord ul.tab_list li a .img_box{position: relative;}
.orderRecord ul.tab_list li a .img_box span{ border-radius: 50%; background-color: #ce151b; color:#fff; display: flex; align-items: center; justify-content: center; line-height: 1em; width: 28px; height: 28px; position: absolute; right: -14px; top: -14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}

/* .orderRecord ul.tab_list .owl-item:first-child a span{ display: block; width: 100%; height: 42px; background: url(../images/icon_card.png) no-repeat center center;}
.orderRecord ul.tab_list .owl-item:nth-child(2) a span{ display: block; width: 100%; height: 42px; background: url(../images/icon_car.png) no-repeat center center;}
.orderRecord ul.tab_list .owl-item:nth-child(3) a span{ display: block; width: 100%; height: 42px; background: url(../images/icon_box.png) no-repeat center center;}
.orderRecord ul.tab_list .owl-item:nth-child(4) a span{ display: block; width: 100%; height: 42px; background: url(../images/icon_list.png) no-repeat center center;}
.orderRecord ul.tab_list .owl-item:nth-child(5) a span{ display: block; width: 100%; height: 42px; background: url(../images/icon_close.png) no-repeat center center;} */
 
.orderRecord ul.tab_list li:last-child{}
.orderRecord ul.tab_list li.active{ border-color: #ad7dd3;}

.orderListGroup{ padding:10px; background-color: #dab6f6; margin-top: 10px;}
.orderListGroup>ul>li{ border: 1px solid #dfe1e7; margin-bottom: 10px; background-color: #fff;}
.orderListGroup h2{ margin: 5px 0; color: #000; font-weight: bold; font-size: 17px;}
.orderDetail{ font-size: 15px;}
.orderDetail span{ font-weight: bold;}
.orderDetail span.price{ font-size: 1.2rem;}

.orderSummary{ padding: 15px;}
.orderSummary img{ width: 90px; height: 90px;}
.top_group{ display: flex; margin-bottom: 12px;}
.group_main{ padding:0 10px;}
.group_main h4{ margin: 0; display: inline-block; padding:0 10px; font-size: 13px;}
.group_main h4.groupOrder{ background-color:#ad7dd3; color:#fff;border-radius: 5px;}
.group_main h4.shopOrder{ background-color:#ff8100; color:#fff;border-radius: 5px;}

.group_main .itemBox{ color:#919191;}

.orderDetail{ font-size: 13px;}
.orderDetail h4{ margin: 0; font-size: 15px;}

.no_info{ display: flex; align-items: center; justify-content: center; height: 240px;}

.moreOrder{ background-color:rgba(227, 227, 227, .7); width: 100%; display: block; padding: 10px; margin: 5px 0;}
.moreOrder:hover{ background-color: #dab6f6; color: #fff;}
.top_main_list{ padding: 5px;}

#bindNotifyImg { display: block; width: 90%; margin: auto; }
/*owl*/
.owl_box.owl-theme .owl-nav.disabled + .owl-dots { margin-top: 0; position: absolute; width: 100%; bottom: 0; margin-bottom: 10px; }
.owl_box.owl-theme .owl-dots .owl-dot span{
    background: #fff;
}
.owl_box.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background:  #656565;
}

.bannerBox{ margin-bottom: 10px;}

.bannerBox.owl-theme .owl-nav.disabled + .owl-dots{ margin-top: 0; position:absolute; bottom: 0; width: 100%;}
.bannerBox.owl-theme .owl-dots .owl-dot span { width: 20px; height: 5px; margin: .2rem .3rem; background: #ebebeb; }
.bannerBox.owl-theme .owl-dots .owl-dot.active span, .bannerBox.owl-theme .owl-dots .owl-dot:hover span{ background-color: #ad7dd3;}

footer p{ text-align: center; margin: 10px 0; font-size: 12px; color: #666;}

/*modal title icon*/
h4.modal-icon-warning.modal-title::before { content: '\f071'; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right: 0.5rem; padding-left: 0.5rem; color: #ffd945; filter: drop-shadow(1px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px 1px 0px black); }
h4.modal-icon-success.modal-title::before { content: '\f00c'; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right: 0.5rem; padding-left: 0.5rem; color: #5bdc7d; filter: drop-shadow(1px 1px 0px #1f6f34) drop-shadow(-1px -1px 0px #1f6f34) drop-shadow(1px -1px 0px #1f6f34) drop-shadow(-1px 1px 0px #1f6f34); }
h4.modal-icon-error.modal-title::before { content: '\f00d'; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right: 0.5rem; padding-left: 0.5rem; color: #f02c23; filter: drop-shadow(1px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px 1px 0px black); }

/* header PC toggle Merchanr dropdown select */
ul.dropdown-ul-select { margin: 0; padding: 0.2rem 0rem; list-style: none; }
li.dropdown-li-select { margin: 0; padding: 0.2rem 0.5rem; cursor: pointer; }
li.dropdown-li-select:hover { background: #d6bfe9ad; }
li.dropdown-li-select.selected { background: #ad7dd3; color: white; }

.only-square img {
    width:100%;
    height:100%;
    object-fit: scale-down;
    object-position: 50% 50%;
}

.only-square .square-according-h img {
    width:auto;
    height:100%;
}

.tag-black { background: var(--color-black) !important; color: white; border-radius: 5px; font-size: 0.75rem; padding:2px 4px;}
/*.head-img-hover { transform: scale(0.9); outline: 6px solid #0000002b; cursor: pointer; }*/
.head-img-hover { 
    @apply hover:scale-75;
}
/* 第一次登入 Notify bind Modal */
#firstLogModal .modal-dialog { max-width: 60%; }

.pending_el { border-radius: 6px; }
@media (min-width:996px) { .bottom_modal { width: 50%; left: 50%; transform: translateX(-50%); overflow: hidden; max-height:unset; }
    
}
@media (max-width:995px) {
    #firstLogModal .modal-dialog { max-width: 90%; margin: auto; }
}