/********タイマー********/

:root {
    /* 背景圖修改請至 */
    /* ALL */
    --circleColor: #d31e5e;/* 倒數計時器圓圈背景色 */
    --circleTextColor: #ffffff;/* 倒數計時器文字顏色 */
    --circleTextFamily: Impact, Charcoal;/* 倒數計時器文字字型 */

    /* 秒數版本*/
    --circleSecPadding: 4px;/* 倒數計時器秒數圓圈之間邊距 */
    /* --decorationSecImg:url(../img/timer/timer_decorate.png)* 倒數計時器秒數裝飾圖片 
    --decorationSecImgSize:100%; 倒數計時器秒數裝飾圖片大小 
    --decorationSecTop:-20%; 調整到數計時器裝飾的上下位置(倒數計時器裝飾距離main-content上方的高度) 
    --decorationSecLeft:100%; 調整到數計時器裝飾的左右位置(倒數計時器裝飾距離main-content上方的高度)  */

    /* 天數版本 */
    --titleAlign:end;/* 倒數計時器標題置中:center/置左:start/置右:end */
    /* --decorationDayImg:url(../img/timer/timer_decorate.png); 倒數計時器秒數裝飾圖片 
    --decorationDayImgSize:100%; 倒數計時器秒數裝飾圖片大小 
    --decorationDayTop:-3%; 調整到數計時器裝飾的上下位置(倒數計時器裝飾距離main-content上方的高度) 
    --decorationDayLeft:40%; 調整到數計時器裝飾的左右位置(倒數計時器裝飾距離main-content上方的高度)  */

    /* PC */
    --BGPCImg:url(https://viage-lp.github.io/shopline_lnubhkvb2/lnubhkvb2/images/timer/sp_timmer.png);/* PC版背景,PS輸出大小750*200 */
    --BGPCImgposition: top right;/* 背景位置top:對齊上方/right:對齊右方 */
    --titlePCImg:calc(90%);/* 倒數計時器標題大小,單位需使用% */
    --circlePCFontSize: 2.5rem; /* 圓形數字文字大小 */
    --circleUnitPCFontSize:1rem;/* 單位文字大小 */
    --circlePCitem: 4;/* 若需要調整秒數倒數計時數量,需設置,記得先將html該單位設置為class="timer-box"層級設置為display:none */
    --circlePCWidth: calc(95%);/* 倒數計時器圓圈寬度,目前固定為距離邊距100%,需根據底下版型寬度一同調整(該參數無法設預設值)*/
    --circlePCHeight: 74px;    /* 倒數計時器高度 */
    --circlesPCMargin: -7px; /* 倒數計時器數字與單位之間的距離,負數越多數字與單位越靠近 */
    /* PC天數版本 */
    --circleDayPCPadding:8px;/* 倒數計時器標題與圓圈之間邊距 */

    /* MD */
    --titleMDImg:50vw;/* 倒數計時器標題大小,單位需使用vw */
    --circleMDFontSize:2.5rem;/* 圓形數字文字大小 */
    --circlesMDMargin:-12px;/* 倒數計時器數字與單位之間的距離,負數越多數字與單位越靠近 */
    --circleMDWidth:11vw;/* 倒數計時器圓圈寬度,目前固定為距離邊距100%,需根據底下版型寬度一同調整(該參數無法設預設值)*/
    --circleUnitMDFontSize:0.9rem;/* 單位文字大小 */
    --circlaMDHeight: calc(11vw);/* 倒數計時器高度 */

    /* SP */
    --BGSPImgposition: top right;/* 背景位置top:對齊上方/right:對齊右方 */
    --titleSPImg:55vw;/* 倒數計時器標題大小,單位需使用vw */
    --circleSPFontSize: 2rem;/* 圓形數字文字大小 */
    --circlaSPHeight: calc(12vw);/* 倒數計時器高度 */
    --circlesSPMargin: -3px; /* 倒數計時器數字與單位之間的距離,負數越多數字與單位越靠近 */
    --circleSPWidth:12vw;/* 倒數計時器圓圈寬度,目前固定為距離邊距100%,需根據底下版型寬度一同調整(該參數無法設預設值)*/
    /* SP天數版本 */
    --circleDaySPPadding:8px;/* 倒數計時器標題與圓圈之間邊距*/

}
.cdtimer_box{
    display: flex;
    justify-content: center;
    text-align: center;
}
#cdtimer,
#cdtimer_day {
    display: none;
    font-family: var(--circleTextFamily);
    background-image: var(--BGPCImg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--BGPCImgposition);
    width: 640px;
}

#cdtimer .countdown {
    display: grid;
    justify-content: center;
    justify-items: center;
    padding: 12px;
    grid-gap: 8px;
}

#cdtimer .main-content {
    display: grid;
    grid-template-columns: repeat(var(--circlePCitem), 80px);
    /* 需要調整倒數計時器寬度時,調整後面的數字*/
    grid-gap: var(--circleSecPadding);
    position: relative;
    justify-items: center;
    align-items: center;
}
/* #cdtimer .main-content::after{
    content:"";
    position: absolute;
    top: var(--decorationSecTop);
    left: var(--decorationSecLeft);
    width: 30px;
    height: 30px;
    background-size: var(--decorationSecImgSize);
    background-image: var(--decorationSecImg);
    background-repeat: no-repeat;
} */

#cdtimer .timer-box,#cdtimer_day .timer-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--circlePCWidth);
    height: var(--circlePCHeight);
    font-size: var(--circlePCFontSize);
    color: var(--circleTextColor);
    border-radius: 50%;
    background: var(--circleColor);
}

#cdtimer .timer-box .number,#cdtimer_day .timer-box .number {
    margin-bottom: var(--circlesPCMargin);
}

#cdtimer .timer-box .name,#cdtimer_day .timer-box .name {
    font-size: var(--circleUnitPCFontSize);
}

#cdtimer_day .countdown {
    display: grid;
    grid-template-columns:3.5fr 1fr;
    grid-gap: var(--circleDayPCPadding);
    align-items: center;
    padding: 12px;
}

#cdtimer_day picture{
    justify-self: var(--titleAlign);
}

#cdtimer_day .main-content {
    display: grid;
    position: relative;
    grid-template-columns: 80px 1fr;
    /* 需要調整倒數計時器寬度時,調整前面的數字*/
}
/* #cdtimer_day .main-content::after{
    content:"";
    position: absolute;
    top: var(--decorationDayTop);
    left: var(--decorationDayLeft);
    width: 30px;
    height: 30px;
    background-size: var(--decorationDayImgSize);
    background-image: var(--decorationDayImg);
    background-repeat: no-repeat;
} */

#cdtimer .timer-title,#cdtimer_day .timer-title {
    width: var(--titlePCImg);
}
/* MD */
@media screen and (max-width: 768px) {
    #cdtimer,#cdtimer_day{
        width: 768px;
    }
    #cdtimer .timer-title,#cdtimer_day .timer-title {
        width: var(--titleMDImg);
    }
    #cdtimer .main-content {
        grid-template-columns: repeat(var(--circlePCitem), 12vw);
    /* 需要調整倒數計時器寬度時,調整後面的數字,MD版本單位須使用vw去適應不同的載具*/
    }
    #cdtimer .timer-box .number,#cdtimer_day .timer-box .number {
        margin-bottom: var(--circlesMDMargin);
    }
    #cdtimer_day .countdown {
        grid-template-columns:2.5fr 1fr;
    }
    #cdtimer_day .main-content {
        grid-template-columns: 14vw 1fr;
    /* 需要調整倒數計時器寬度時,調整前面的數字,MD版本單位須使用vw去適應不同的載具*/
    }
    #cdtimer_day .main-content::after,#cdtimer .main-content::after{
        width: 0px!important;
        height: 0px!important;
    }
    #cdtimer .timer-box,#cdtimer_day .timer-box {
        width: var(--circleMDWidth);
        height: var(--circlaMDHeight);
        font-size: var(--circleMDFontSize);
    }

    #cdtimer .timer-box .name,#cdtimer_day .timer-box .name {
        font-size: var(--circleUnitMDFontSize);
    }
}

/* SP */
@media screen and (max-width: 576px) {
    #cdtimer,#cdtimer_day{
        width: 100%;
        background-position: var(--BGSPImgposition);
    }
    #cdtimer .main-content {
        grid-template-columns: repeat(var(--circlePCitem), 13vw);
    /* 需要調整倒數計時器寬度時,調整後面的數字,SP版本單位須使用vw去適應不同的載具*/
    }
    #cdtimer_day .main-content {
        grid-template-columns: 16vw 1fr;
    /* 需要調整倒數計時器寬度時,調整前面的數字,SP版本單位須使用vw去適應不同的載具*/
    }
    #cdtimer_day .countdown{
        grid-template: 3.5fr 1fr;
        grid-gap:var(--circleDaySPPadding);
    }
    #cdtimer .timer-title, #cdtimer_day .timer-title{
        width: var(--titleSPImg);
    }
    #cdtimer .timer-box,#cdtimer_day .timer-box {
        width: var(--circleSPWidth);
        height: var(--circlaSPHeight);
        font-size: var(--circleSPFontSize);
    }

    #cdtimer .timer-box .number,#cdtimer_day .timer-box .number {
        margin-bottom: var(--circlesSPMargin);
    }
}