@charset "UTF-8";
/* colors 參數 */
:root {
    --blue: hsl(209 83% 50%);
    --blue-40: hsl(209 83% 96%);
    --blue-75: hsl(209 83% 92.5%);
    --blue-560: hsl(209 83% 44%);
    --blue-680: hsl(209 83% 32%);
    --blue-50: hsl(209 83% 95%);
    --blue-100: hsl(209 83% 90%);
    --blue-200: hsl(209 83% 80%);
    --blue-300: hsl(209 83% 70%);
    --blue-350: hsl(209 83% 65%);
    --blue-400: hsl(209 83% 60%);
    --blue-500: hsl(209 83% 50%);
    --blue-600: hsl(209 83% 40%);
    --blue-700: hsl(209 83% 30%);
    --blue-800: hsl(209 83% 20%);
    --blue-900: hsl(209 83% 10%);
    --blue-950: hsl(209 83% 5%);
    --grass: hsl(74 38% 50%);
    --grass-50: hsl(74 38% 95%);
    --grass-100: hsl(74 38% 90%);
    --grass-200: hsl(74 38% 80%);
    --grass-300: hsl(74 38% 70%);
    --grass-400: hsl(74 38% 60%);
    --grass-500: hsl(74 38% 50%);
    --grass-550: hsl(74 38% 45%);
    --grass-600: hsl(74 38% 40%);
    --grass-700: hsl(74 38% 30%);
    --grass-800: hsl(74 38% 20%);
    --grass-900: hsl(74 38% 10%);
    --grass-950: hsl(74 38% 5%);
    --green: hsl(119 62% 50%);
    --green-50: hsl(119 62% 95%);
    --green-100: hsl(119 62% 90%);
    --green-200: hsl(119 62% 80%);
    --green-300: hsl(119 62% 70%);
    --green-400: hsl(119 62% 60%);
    --green-500: hsl(119 62% 50%);
    --green-600: hsl(119 62% 40%);
    --green-625: hsl(119 62% 37.5%);
    --green-700: hsl(119 62% 30%);
    --green-800: hsl(119 62% 20%);
    --green-900: hsl(119 62% 10%);
    --green-950: hsl(119 62% 5%);
    --neutral: hsl(0 0% 50%);
    --neutral-20: hsl(0 0% 98%);
    --neutral-70: hsl(0 0% 93%);
    --neutral-50: hsl(0 0% 95%);
    --neutral-100: hsl(0 0% 90%);
    --neutral-150: hsl(0 0% 85%);
    --neutral-200: hsl(0 0% 80%);
    --neutral-300: hsl(0 0% 70%);
    --neutral-400: hsl(0 0% 60%);
    --neutral-500: hsl(0 0% 50%);
    --neutral-600: hsl(0 0% 40%);
    --neutral-700: hsl(0 0% 30%);
    --neutral-750: hsl(0 0% 25%);
    --neutral-800: hsl(0 0% 20%);
    --neutral-900: hsl(0 0% 10%);
    --neutral-950: hsl(0 0% 5%);
    --orange: hsl(34 100% 50%);
    --orange-75: hsl(34 100% 92.5%);
    --orange-50: hsl(34 100% 95%);
    --orange-100: hsl(34 100% 90%);
    --orange-200: hsl(34 100% 80%);
    --orange-300: hsl(34 100% 70%);
    --orange-400: hsl(34 100% 60%);
    --orange-500: hsl(34 100% 50%);
    --orange-550: hsl(34 100% 45%);
    --orange-600: hsl(34 100% 40%);
    --orange-700: hsl(34 100% 30%);
    --orange-800: hsl(34 100% 20%);
    --orange-900: hsl(34 100% 10%);
    --orange-950: hsl(34 100% 5%);
    --pastelTeal: hsl(184 69% 50%);
    --pastelTeal-50: hsl(184 69% 95%);
    --pastelTeal-100: hsl(184 69% 90%);
    --pastelTeal-200: hsl(184 69% 80%);
    --pastelTeal-300: hsl(184 69% 70%);
    --pastelTeal-400: hsl(184 69% 60%);
    --pastelTeal-500: hsl(184 69% 50%);
    --pastelTeal-600: hsl(184 69% 40%);
    --pastelTeal-700: hsl(184 69% 30%);
    --pastelTeal-800: hsl(184 69% 20%);
    --pastelTeal-900: hsl(184 69% 10%);
    --pastelTeal-950: hsl(184 69% 5%);
    --primary: #d62872;
    --primary-50: hsl(334 69% 95%);
    --primary-100: hsl(334 69% 90%);
    --primary-200: hsl(334 69% 80%);
    --primary-300: hsl(334 69% 70%);
    --primary-400: hsl(334 69% 60%);
    --primary-500: hsl(334 69% 50%);
    --primary-600: hsl(334 69% 40%);
    --primary-700: hsl(334 69% 30%);
    --primary-800: hsl(334 69% 20%);
    --primary-900: hsl(334 69% 10%);
    --primary-950: hsl(334 69% 5%);
    --red: hsl(0 73% 50%);
    --red-30: hsl(0 73% 97%);
    --red-50: hsl(0 73% 95%);
    --red-100: hsl(0 73% 90%);
    --red-200: hsl(0 73% 80%);
    --red-300: hsl(0 73% 70%);
    --red-400: hsl(0 73% 60%);
    --red-500: hsl(0 73% 50%);
    --red-600: hsl(0 73% 40%);
    --red-700: hsl(0 73% 30%);
    --red-800: hsl(0 73% 20%);
    --red-900: hsl(0 73% 10%);
    --red-950: hsl(0 73% 5%);
    --vermilion: hsl(12 77% 50%);
    --vermilion-85: hsl(12 77% 91.5%);
    --vermilion-50: hsl(12 77% 95%);
    --vermilion-100: hsl(12 77% 90%);
    --vermilion-200: hsl(12 77% 80%);
    --vermilion-300: hsl(12 77% 70%);
    --vermilion-400: hsl(12 77% 60%);
    --vermilion-500: hsl(12 77% 50%);
    --vermilion-600: hsl(12 77% 40%);
    --vermilion-700: hsl(12 77% 30%);
    --vermilion-800: hsl(12 77% 20%);
    --vermilion-900: hsl(12 77% 10%);
    --vermilion-950: hsl(12 77% 5%);
    --yellow: hsl(47 100% 50%);
    --yellow-30: hsl(47 100% 97%);
    --yellow-80: hsl(47 100% 92%);
    --yellow-50: hsl(47 100% 95%);
    --yellow-100: hsl(47 100% 90%);
    --yellow-200: hsl(47 100% 80%);
    --yellow-300: hsl(47 100% 70%);
    --yellow-400: hsl(47 100% 60%);
    --yellow-500: hsl(47 100% 50%);
    --yellow-600: hsl(47 100% 40%);
    --yellow-700: hsl(47 100% 30%);
    --yellow-800: hsl(47 100% 20%);
    --yellow-900: hsl(47 100% 10%);
    --yellow-950: hsl(47 100% 5%);
    --brown: hsl(36 83% 50%);
    --brown-50: hsl(36 83% 95%);
    --brown-100: hsl(36 83% 90%);
    --brown-200: hsl(36 83% 80%);
    --brown-300: hsl(36 83% 70%);
    --brown-400: hsl(36 83% 60%);
    --brown-500: hsl(36 83% 50%);
    --brown-560: hsl(36.13 83.04% 43.92%);
    --brown-600: hsl(36 83% 40%);
    --brown-700: hsl(36 83% 30%);
    --brown-800: hsl(36 83% 20%);
    --brown-900: hsl(36 83% 10%);
    --brown-950: hsl(36 83% 5%);
    --blueGray: hsla(228.81 23.89% 48.43%);
    --blueGray-50: hsla(225 23.53% 93.33%);
    --blueGray-100: hsla(228.75 24.24% 87.06%);
    --blueGray-200: hsla(229.57 23.23% 80.59%);
    --blueGray-300: hsla(228 22.73% 74.12%);
    --blueGray-400: hsla(228.65 22.42% 67.65%);
    --blueGray-500: hsla(229.33 22.84% 61.37%);
    --blueGray-600: hsla(228.68 22.94% 54.71%);
    --blueGray-700: hsla(228.81 23.89% 48.43%);
    --blueGray-800: hsla(228.53 32.08% 41.57%);
    --blueGray-900: hsla(228.65 40.66% 35.69%);
}

/* border 框線 */
.ec-border{border:var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;}
.ec-border-0{border:0 !important;}
.ec-border-top{border-top:var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;}
.ec-border-top-0{border-top:0 !important;}
.ec-border-end{border-right:var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;}
.ec-border-end-0{border-right:0 !important;}
.ec-border-bottom{border-bottom:var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;}
.ec-border-bottom-0{border-bottom:0 !important;}
.ec-border-start{border-left:var(--ec-border-width) var(--ec-border-style) var(--ec-border-color) !important;}
.ec-border-start-0{border-left:0 !important;}

/* border-color 框線顏色 */
.ec-border-primary{--ec-border-opacity:1;border-color:rgba(var(--primary),var(--ec-border-opacity)) !important;}

/* border-width 框線寬度 */
.ec-border-1{border-width:1px !important;}
.ec-border-2{border-width:2px !important;}
.ec-border-3{border-width:3px !important;}
.ec-border-4{border-width:4px !important;}
.ec-border-5{border-width:5px !important;}

/* border-opacity 框線透明度 */
.ec-border-opacity-10{--ec-border-opacity:0.1;}
.ec-border-opacity-25{--ec-border-opacity:0.25;}
.ec-border-opacity-50{--ec-border-opacity:0.5;}
.ec-border-opacity-75{--ec-border-opacity:0.75;}
.ec-border-opacity-100{--ec-border-opacity:1;}

/* width 如有缺少，請手動新增 */
.min-width-120,.ec-reset .min-width-120{min-width:120px;}

/* display 顯示屬性 */
/* 使用我們的快速回應地切換組件等的顯示值。包括對一些更常見值的支持，以及一些用於在列印時控制顯示的附加功能。 */
.d-block,.ec-reset .d-block{display:block;}
.d-nline-block,.ec-reset .d-nline-block{display:inline-block;}
.d-inline,.ec-reset .d-inline{display:inline;}

/* flex */
.d-flex,.ec-reset .d-flex{display:flex;}

/* justify-content */
.justify-content-between,.ec-reset .justify-content-between{justify-content:space-between;}
.justify-content-center,.ec-reset .justify-content-center{justify-content:center;}

/* align-items */
.align-items-end,.ec-reset .align-items-end{align-items:end;}
.align-items-center,.ec-reset .align-items-center{align-items:center;}

/* flex-column */
.flex-column,.ec-reset .flex-column{flex-direction:column !important;}

/* flex-shrink */
.flex-shrink-0,.ec-reset .flex-shrink-0{flex-shrink:0 !important;}
.flex-shrink-1,.ec-reset .flex-shrink-1{flex-shrink:1 !important;}

/* flex-grow */
.flex-grow-0,.ec-reset .flex-grow-0{flex-grow:0 !important;}
.flex-grow-1,.ec-reset .flex-grow-1{flex-grow:1 !important;}

/* position */
.start-100,.ec-reset .start-100{left:100% !important;}
.top-0,.ec-reset .top-0{top:0 !important;}

/* position 位置 */
/* 使用這些可以快速配置元素的位置。 */
.position-absolute,.ec-reset .position-absolute{position:absolute !important;}
.position-relative,.ec-reset .position-relative{position:relative !important;}
.position-sticky,.ec-reset .position-sticky{position:sticky !important;}

/* Overflow 溢出 */
/* 使用這些可以快速配置內容如何溢出元素。 */
.overflow-hidden,.ec-reset .overflow-hidden{overflow:hidden !important;}
.overflow-auto,.ec-reset .overflow-auto{overflow:auto !important;}
.overflow-visible,.ec-reset .overflow-visible{overflow:visible !important;}
.overflow-scroll,.ec-reset .overflow-scroll{overflow:scroll !important;}
.overflow-x-hidden,.ec-reset .overflow-x-hidden{overflow-x:hidden !important;}
.overflow-x-auto,.ec-reset .overflow-x-auto{overflow-x:auto !important;}
.overflow-x-visible,.ec-reset .overflow-x-visible{overflow-x:visible !important;}
.overflow-x-scroll,.ec-reset .overflow-x-scroll{overflow-x:scroll !important;}
.overflow-y-hidden,.ec-reset .overflow-y-hidden{overflow-y:hidden !important;}
.overflow-y-auto,.ec-reset .overflow-y-auto{overflow-y:auto !important;}
.overflow-y-visible,.ec-reset .overflow-y-visible{overflow-y:visible !important;}
.overflow-y-scroll,.ec-reset .overflow-y-scroll{overflow-y:scroll !important;}

/* 截斷文字 */
.line-clamp,.ec-reset .line-clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp.line2,.ec-reset .line-clamp.line2{-webkit-line-clamp:2;}
.line-clamp.line3,.ec-reset .line-clamp.line3{-webkit-line-clamp:3;}
.line-clamp.line4,.ec-reset .line-clamp.line4{-webkit-line-clamp:4;}
.line-clamp.line5,.ec-reset .line-clamp.line5{-webkit-line-clamp:5;}

/* 元素添加游標互動 pointer */
[role='button'],.ec-reset [role='button']{cursor:pointer;}
.rounded-0,.ec-reset .rounded-0{border-radius:0 !important;}
.rounded-pill,.ec-reset .rounded-pill{border-radius:50rem !important;}

/* Clearfix (清除浮動) */
.clearfix::after,.ec-reset .clearfix::after{display:block;clear:both;content:'';}

/* ec-button 按鈕元件 */
.ec-btn {
    --ec-body-color: #404040;
    --ec-border-width: 1px;
    --ec-border-radius: 0.25em;
    --ec-btn-padding-x: 0.75rem;
    --ec-btn-padding-y: 0.375rem;
    --ec-btn-font-size: 1rem;
    --ec-btn-font-weight: 700;
    --ec-btn-line-height: 1.5;
    --ec-btn-color: var(--ec-body-color);
    --ec-btn-bg: transparent;
    --ec-btn-border-width: var(--ec-border-width);
    --ec-btn-border-color: transparent;
    --ec-btn-border-radius: var(--ec-border-radius);
    --ec-btn-hover-border-color: transparent;
    --ec-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --ec-btn-disabled-opacity: 0.65;
    --ec-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--ec-btn-focus-shadow-rgb), 0.5);
    display: inline-block;
    box-sizing: border-box;
    padding: var(--ec-btn-padding-y) var(--ec-btn-padding-x);
    font-family: var(--primary-font-family);
    font-size: var(--ec-btn-font-size);
    font-weight: var(--ec-btn-font-weight);
    line-height: var(--ec-btn-line-height);
    color: var(--ec-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--ec-btn-border-width) solid var(--ec-btn-border-color);
    border-radius: var(--ec-btn-border-radius);
    background-color: var(--ec-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ec-btn:disabled {
    color: var(--ec-btn-disabled-color);
    background-color: var(--ec-btn-disabled-bg);
    border-color: var(--ec-btn-disabled-border-color);
}
.ec-btn-primary {
    --ec-btn-color: #fff;
    --ec-btn-bg: #d62872;
    --ec-btn-border-color: #d62872;
    --ec-btn-hover-color: #fff;
    --ec-btn-hover-bg: #c01e65;
    --ec-btn-hover-border-color: #c01e65;
    --ec-btn-focus-shadow-rgb: 49, 132, 253;
    --ec-btn-active-color: #fff;
    --ec-btn-active-bg: #d40b62;
    --ec-btn-active-border-color: #d40b62;
    --ec-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ec-btn-disabled-color: #fff;
    --ec-btn-disabled-bg: #9c4d6f;
    --ec-btn-disabled-border-color: #9c4d6f;
}
.ec-btn-gray {
    --ec-btn-color: #454545;
    --ec-btn-bg: #ededed;
    --ec-btn-border-color: #ededed;
    --ec-btn-hover-color: #fff;
    --ec-btn-hover-bg: #ededed;
    --ec-btn-hover-border-color: #ededed;
    --ec-btn-focus-shadow-rgb: 49, 132, 253;
    --ec-btn-active-color: #fff;
    --ec-btn-active-bg: #ededed;
    --ec-btn-active-border-color: #ededed;
    --ec-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ec-btn-disabled-color: #fff;
    --ec-btn-disabled-bg: #ededed;
    --ec-btn-disabled-border-color: #ededed;
}
.ec-btn-gray.active {
    --ec-btn-color: #fff;
    --ec-btn-bg: #d62872;
    --ec-btn-border-color: #d62872;
    --ec-btn-hover-color: #fff;
    --ec-btn-hover-bg: #c01e65;
    --ec-btn-hover-border-color: #c01e65;
    --ec-btn-focus-shadow-rgb: 49, 132, 253;
    --ec-btn-active-color: #fff;
    --ec-btn-active-bg: #d40b62;
    --ec-btn-active-border-color: #d40b62;
    --ec-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ec-btn-disabled-color: #fff;
    --ec-btn-disabled-bg: #9c4d6f;
    --ec-btn-disabled-border-color: #9c4d6f;
}
.ec-tab-pill-btn {
    --ec-border-width: 0;
    --ec-btn-font-size: 17px;
    --ec-btn-line-height: 24px;
    --ec-btn-padding-x: 17px;
    --ec-btn-padding-y: 6px;
}
.ec-tab-underline-btn {
    --ec-border-radius: 0;
    --ec-btn-font-size: 17px;
    --ec-btn-line-height: 24px;
    --ec-btn-padding-x: 0;
    --ec-btn-padding-y: 6px;
    --ec-btn-border-width: 0;
    --ec-tab-underline-btn-border-bottom-width: 2px;
    --ec-tab-underline-btn-border-style: solid;
    --ec-tab-underline-btn-border-color: transparent;
    margin-bottom: -1px;
    /*修正底線按鈕沒有疊放下緣的細節*/
    border-bottom: var(--ec-tab-underline-btn-border-bottom-width) var(--ec-tab-underline-btn-border-style) var(--ec-tab-underline-btn-border-color);
}
.ec-btn-blue {
    --ec-btn-color: #fff;
    --ec-btn-bg: #1a6ebc;
    --ec-btn-border-color: #1a6ebc;
    --ec-btn-hover-color: #fff;
    --ec-btn-hover-bg: #1169bb;
    --ec-btn-hover-border-color: #1169bb;
    --ec-btn-focus-shadow-rgb: 49, 132, 253;
    --ec-btn-active-color: #fff;
    --ec-btn-active-bg: #1169bb;
    --ec-btn-active-border-color: #1169bb;
    --ec-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ec-btn-disabled-color: #ccc;
    --ec-btn-disabled-bg: #f2f2f2;
    --ec-btn-disabled-border-color: #f2f2f2;
}
.ec-btn-outlined {
  color: var(--ec-btn-color);
  background-color: #fff;
  border-color: var(--ec-btn-border-color);
}
.ec-btn-outlined:disabled {
  --ec-btn-disabled-color: #b3b3b3;
  --ec-btn-disabled-bg: #fff;
  --ec-btn-disabled-border-color: #ededed;
}
.ec-btn-primary-line {
    --ec-btn-color: #d62872;
    --ec-btn-bg: #fff;
    --ec-btn-border-color: #d62872;
    --ec-btn-hover-color: #fff;
    --ec-btn-hover-bg: #c01e65;
    --ec-btn-hover-border-color: #c01e65;
    --ec-btn-focus-shadow-rgb: 49, 132, 253;
    --ec-btn-active-color: #fff;
    --ec-btn-active-bg: #d40b62;
    --ec-btn-active-border-color: #d40b62;
    --ec-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ec-btn-disabled-color: #9c4d6f;
    --ec-btn-disabled-bg: #fff;
    --ec-btn-disabled-border-color: #9c4d6f;
}

/* check type button */
.btn-check{border:1px solid #aaa;box-sizing:border-box;color:#333;cursor:pointer;display:inline-block;padding:0 10px;position:relative;font-family:var(--primary-font-family);font-size:13px;line-height:30px;}
.btn-check.selected{color:#D62872;}
.btn-check.selected::before{border:1px solid #D62872;bottom:0;box-sizing:border-box;content:"";display:inline-block;height:100%;outline:1px solid #D62872;position:absolute;right:0;width:100%;}
.btn-check.selected::after{display:inline-block;height:12px;width:12px;position:absolute;bottom:1px;right:0px;content:'';background:url(/ecm/img/ec-images/common/png/prdSelect.png)no-repeat scroll 0 0;}
.btn-check.disabled{border:1px solid #e1e1e1;color:#ccc;}

/* icon-大網用 店＋&預購 */
.icon-group,span.icon-group {display:inline-flex !important;align-items:baseline;gap:4px;float:none!important;margin:0 8px 0 0!important;padding:0!important;vertical-align:text-bottom;width:auto!important;height:auto!important;}
.icon-group img,span.icon-group img {border-radius:2px !important;display:inline-block;max-width:100%;width:auto !important;height:18px !important;margin-top: 0!important;}
.icon-group > span {padding:0 !important;margin-top: 0!important;}
.icon-store {border-radius:2px;display:inline;float:left;overflow:hidden;width:24px !important;height:18px !important; background-color:#5e6999;}
.icon-store > img {width:24px !important;}
.icon-preorder {border-radius:2px;display:inline;float:left;overflow:hidden;width:18px !important;height:18px !important;background-color: #ff960A;}

/* 截斷文字 */
.line-clamp, .ec-reset .line-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp.line2, .ec-reset .line-clamp.line2 { -webkit-line-clamp: 2; }
.line-clamp.line3, .ec-reset .line-clamp.line3 { -webkit-line-clamp: 3; }
.line-clamp.line4, .ec-reset .line-clamp.line4 { -webkit-line-clamp: 4; }
.line-clamp.line5, .ec-reset .line-clamp.line5 { -webkit-line-clamp: 5; }