:root {
    --deepRed: #c14948;
    --orange: #ff6a00;
    --gray: #aaa;
    --red: #F18186;
    --yel: #F1D986;
    --green: #599f8a;
    --blue: #007bff;
    --headbg: #5D7B9D;
    --cardbg: #59A1C9;
    --gift-color: #aa0055;
    --postage-color: #43910F;
    --discal-color: #FA6A01;
    --coblack: #262626; /*對話櫃title,按鈕黑色*/
    --border-color: #dee2e6;
    --fb-color: #3b5998;
    --line-color: #00c300;
}
.fb-color{
    color: var(--fb-color);
}
.line-color{
    color: var(--line-color);

}

.card-color{
    color:var(--cardbg);
}
.cardbg{
    background-color:var(--cardbg);
}
pre{margin:0;}
#copyRightImg{
    text-align:center;

}
#copyRightImg, #copyRightImg a {
    color: #9D9D9D !important;
}
    #copyRightImg a:hover {
        color: #272727 !important;
        text-decoration:none;
    }
    .itNothing {
        /*已售完*/
        color: rgb(102, 102, 102);
    }
[v-cloak] {
     display: none;
}
.btn-line {
    background-color: #01B901 !important;    
}
    .btn-line:hover a {
        color: #9ec29e !important;
    }
    .btn-line ,.btn-line a {
        color: #fff !important;
    }
        .btn-line:hover {
            background-color: #01B901 !important;
            opacity:.7;
        }
        .border-box {
            box-sizing: border-box;
        }
.btn-cancel {
    border-color: #ef9191 !important;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;
}
.coBtn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background-color .5s;
   
}
.coCheckbox,.coCheckbox [type=checkbox],.CheckBox,.CheckBox [type=checkbox]{
    height:20px;width:20px;    
    position:relative;
}
.coCheckbox label{
    /*C#元件*/
    position:relative;
    margin:0;
    top:-5px;
    left:2px;
}
.checkbox {
    transition: transform 0.3s ease; /* 添加一個0.3秒的過渡效果 */
}

    .checkbox.checked {
        transform: scale(1.2); /* 勾選時放大 */
    }
.coCardTitle  {
    background-color: #59A1C9;
    color: #FFF;
}
.coCardTitle-sec, .btn-sec, .swal-button {
    background-color: var(--coblack);
    color: #FFF;
    
}

    .btn-sec:hover, .swal-button:not([disabled]):hover {
        background-color: #262626a0;
        
    }
.btn-sec {
    cursor: pointer;
}
.btn-sec2 {
    /*黑字白底*/
    border: solid 1px var(--coblack) !important;
    color: var(--coblack);
    cursor: pointer;
}
    .btn-sec2:hover{
       background-color:#eee;
    }
    .btn-prev {
        background-color: #d1d1d1;
        color: #FFF;
        cursor: pointer;
    }
.coCardTitle, .coCardTitle-sec,.coCard,.coCardDetail,.coCardTitle-info {
    box-sizing:border-box; /*bootstrap*/
}
.coCardTitle-info {
    background-color: #17a2b8;
    color: #FFF;
}



.coCard {
    background-color: #FFF;
    border-radius: .25rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    margin-bottom: 1rem;
}
.coCardDeep{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.2);
}
.coCardTitle, .coCardTitle-sec, .coCardTitle-info {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    font-size: 1rem;
}
.coCardDetail {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.coCardTab {
    display: flex;
    align-items: center;
    justify-content: center;
}
    .coCardTab > *{
        padding:1rem 2rem;
        border-radius:15px 15px 0 0;
        border:1px solid var(--border-color);
        background-color:#fff;
        cursor:pointer;
    }
        .coCardTab > *:hover {
            opacity:.6;
        }
        .coCardTabCurr {
            background-color: var(--cardbg);
            border: 1px solid var(--cardbg) !important;
            color: #FFF !important;
        }
      

            .coAdTitle {
                padding: .5rem;
            }


.coBtn{
    padding:6px 30px;
    color: #212529;
    background-color: #f8f9fa;    
    border-color: #dee2e6;
    border-radius:6px;
}
.coBtn:hover{    
    background-image:linear-gradient(to bottom,#fff 0,#CCC 100%);
}
.coBtnCancel {
    background-color: #f56868;
    color:#FFF;
}
    .coBtnCancel:hover {
        background-image: unset;
        background-color: #f32525;
    }
.coRdo{
    width:22px;height:22px;
}
.coHover, .coHoverDeep, .coHoverMain > *, .coHoverDeepMain > * {
    transition0: all .25s ease-in;
}
.coHover:hover, .coHoverWeight:hover,.coHoverMain > *:hover {
    background-color: #fafafa;
}
.coHoverDeep:hover, .coHoverDeepMain > *:hover {
    background-color: #eee;
}
.coHoverDeepI:hover, .coHoverDeepMainI > *:hover {
    background-color: #eee !important;
}
.coHoverWeight:hover{
    font-weight:800;
}

.coHoverOpacity:hover, .coHoverOpacityMain > *:hover {
    opacity: .6;    
}

.coHoverOpacityDeepMain > * {
    opacity: .3;
}
.coHoverOpacityDeepMain > *:hover {
    opacity: 1;
}

.disMoney, .dismoney {
    color: var(--deepRed);
}
.postage {
    color: var(--postage-color);
}
.disable {
    color: #a7a7a7;
}
.v-checkbox label{margin-bottom:0;font-size:1rem;}
.coRadio{margin:0 !important;cursor:pointer;}
.coRadio input[type='radio']{
    height: 20px;
    width: 20px;
}
.coRadio .label{
    position: relative;
    top: -5px;
}
.coRwdRadioGroup > div{

}

.itUb
{
	/*預購*/
	color: rgb(102, 102, 102);
}
.clear { clear: both; }

.floatLeftMain:after, .clearFloat:after, .floatRightMain:after { clear: both; content: '.'; display: block; height: 0; overflow: hidden; }
.floatLeftMain, .clearFloat, .floatRightMain { *height:1%;/* IE6 IE7 */}

.leftMain > div,.floatLeftMain > div { float: left; }

.floatRightMain > div { float: right; }
.Tag1 {color: #850505;}
.Tag2 {color: #55AA00;}
.Tag3 {color: #035EA7;}
.gift{color:#800000;}
.offerMessageMain li,.offerMessageRow {
    padding: 6px 0 0 0;
    font-weight: 600;
    
}
 .offerPass{
    color:#aaa;    
  }
.offerActIcon, .offerNoActIcon {
    padding: 3px 5px;
    border: solid 1px;
    border-radius: .25rem;
    margin-right: 5px;
}
.offerActIcon {    
    color: #aaa;        
}
.offerActC2{padding-top:4px;}

.offerNoAct a{
    color:#c66464 !important;
}
.offerNoAct .offerActC2 {
    color: var(--deepRed);
}
.offerNoActIcon {
    color: var(--deepRed);
    border-color: var(--deepRed);
}
.price {
    color: var(--orange);
}
.moneySymbol {
    padding-right: .25rem;
    
}
.mw-100{
    max-width:100%;
}

.fade-in {
    animation: fadeIn ease .25s;
    -webkit-animation: fadeIn ease .25s;
    -moz-animation: fadeIn ease .25s;
    -o-animation: fadeIn ease .25s;
    -ms-animation: fadeIn ease .25s;
}



@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.darkRed {
    color: #850505;
}
.vcenter, .hcenter,.vhcenter {
    display: flex;
}


.vcenteri, .hcenteri, .vhcenteri {
    display: flex !important;
}
.vcenteri, .vhcenteri {
    align-items: center !important;
}

.hcenteri, .vhcenteri {
    justify-content: center !important;
}

.vcenter, .vhcenter {
    align-items: center;
}
.hcenter, .vhcenter {
    justify-content: center;
}
.vend {
    justify-content: flex-end;
}

.flexs{display:flex;}
.flexs > div{flex:1;}
.fontSize06 {
    font-size:.6rem;
}
.fontSize075 {
    font-size:.75rem;
}
.fontSize08 {
    font-size:.8rem;
}
.fontSize1{
    font-size:1rem;
}
.fontSize1i{
    font-size:1rem !important;
}
.fontSize1_1 {
    font-size: 1.1rem;
}
.fontSize1_25 {
    font-size: 1.25rem;
}

.fontSize1_5 {
    font-size: 1.5rem;
}

.fontSize1_75 {
    font-size: 1.75rem;
}

.fontSize2 {
    font-size: 1.75rem;
}
.fw600{
    font-weight:600;
}
.fw800{
    font-weight:800;
}
.fs05{
    font-size:.5rem;
}
.fs07{
    font-size:.7rem;
}
.fs1{
    font-size:1rem;
}
.coInput {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.coMoney, .moneySymbol,spColor {
    color: var(--deepRed);
}



.fullloadingDv {
  position: fixed;
  z-index: 9999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fullloadingDv:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.w100,.w-100{
    width:100%;
}
.spColor {
    color: var(--orange);
    font-weight:800;
}


/*動畫*/
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}

.fade-enter, .fade-leave-to {
    opacity: 0
}
.slide-fade-enter-active,.slide-fade2-enter-active,.slide-enterfade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active,.slide-fade2-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,.slide-fade-leave-to,.slide-fade2-enter,.slide-fade2-leave-to,.slide-enterfade-enter {
    transform: translateY(-10px);
    opacity: 0;
}
.slide-fade2-move {
    transition: transform 0.5s;
    opacity:0;
}





.tagListMain {
    flex-wrap: wrap;
}
.tagListItem {
    font-size: .7rem;
    padding: .25rem .5rem;
    border-radius:0.25rem;
}


.fa-trash-alt {
    color: #f35f5f;
}
.col_item [class*="灰"] {
    color: #6c757d;
}

.col_item [class*="藍"] {
    color: #007bff;
}

.col_item [class*="紅"] {
    color: #dc3545;
}

.col_item [class*="綠"] {
    color: #28a745;
}

.col_item [class*="黃"] {
    color: #ff6a00;
}

.col_item [class*="紫"] {
    color: #a904c2;
}

.col_item [class*="咖"] {
    color: #b7774e;
}

.col_item [class*="膚色"] {
    color: #e1996b;
}


@media (max-width: 576px) {
    /*xs*/
    .coRwdRadioGroup{width:100%;}
    .coRwdRadioGroup > div {
        margin: .25rem .25rem;
        
        border: solid 1px #dee2e6;
        border-radius: 5px;        
    }
    .coRwdRadioGroup label{
        padding: .5rem .25rem .25rem .15rem !important;
    }

    .coCard-xs {
        background-color: #FFF;
        border-radius: .25rem;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
        margin-bottom: 1rem;
    }

    .coCardDeep-xs {
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.2);
    }  
}

@media (min-width: 768px) {
    /*md*/
    .vcenter-md, .hcenter-md, .vhcenter-md {
        display: flex;
    }

    .vcenter-md, .vhcenter-md {
        align-items: center;
    }

    .hcenter-md, .vhcenter-md {
        justify-content: center;
    }

    .vend-md {
        justify-content: flex-end;
    }
}