@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

.cloud_bonus{
    min-height: 1000px;
    position: relative;
    background: #ffe2da; /* Old browsers */
    background: -moz-linear-gradient(top, #ffe2da 0%, #ffffff 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffe2da 0%,#ffffff 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffe2da 0%,#ffffff 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    overflow: hidden;
}

.cloud_bonus:after{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 200px 200px 0 0;
    border-color: #ccb5ae transparent transparent transparent;
}
.cloud_bonus:before{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #F44336 transparent transparent;
}

.cloud_bonus_main{
    width: 95%;
    margin: 120px auto 100px;
    position: relative;
    z-index: 99;
}
.cloud_bonus_form{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.cloud_bonus_box{
    width: 100%;
    margin: 0 auto;
}
.cloud_bonus_box h1{
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: normal;
    letter-spacing: 5px;
    box-sizing: border-box;
    font-size: 1.5rem;
    padding: 10px 0 10px 5px;
    position: relative;
    background-color: #e98a60;
}
.cloud_bonus_box > h1:after, .cloud_bonus_box > h1:before{
    position: absolute;
    content: '';
    bottom: -20px;
    width: 5%;
    height: 20px;
    background-color: #795548;
}
.cloud_bonus_box > h1:after{
    left: 0;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.cloud_bonus_box > h1:before{
    right: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cloud_bonus_content{
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffe5dd;
}
/* 可使用點數 */
    .cloud_bonus_total{
        width: 100%;
        margin-bottom: 10px;
    }
    .cloud_bonus_total > p{
        text-align: right;
        padding: 2.5px 10px;
        box-sizing: border-box;
        font-weight: bold;
    }
    .cloud_bonus_total > p span{
        color: #FE0000;
        letter-spacing: .5px;
        font-size: 1.15rem;
        display: inline-block;
        margin: 0 5px;
    }

.cloud_bonus_searchMain{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
/* 關鍵字 */
    .cloud_bonus_search{
        width: 49%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
    }
    .cloud_bonus_search > input{
        background: none;
        padding: 10px;
        font-size: 1.25rem;
        color: #795548;
    }
    .cloud_bonus_search > input[type="text"]{
        width: 99%;
        margin-right: 1%;
        border: 1px solid #795548;
        box-sizing: border-box;
    }
    .cloud_bonus_search > input[type="button"]{
        border: 1px solid #795548;
        box-sizing: border-box;
        cursor: pointer;
        transition: all .3s;
        max-width: 100px;
        text-align: center;
    }
    .cloud_bonus_search > input[type="button"]:hover{
        background-color: #795548;
        color: #fff;
    }
/* 日期 */
    .cloud_bonus_date{
        width: 49%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
    }
    .cloud_bonus_date > input{
        width: 45%;
        background: none;
        padding: 10px;
        font-size: 1.25rem;
        color: #795548;
        border: 1px solid #795548;
        box-sizing: border-box;
    }
    .cloud_bonus_date > span{
        width: 5%;
        margin: 0 2.5%;
        display: inline-block;
        text-align: center;
    }
/* 篩選 */
    .cloud_bonus_filter{
        width: 100%;
        margin: 20px auto 0;
        display: flex;
        justify-content: flex-end;
        align-items: initial;
    }
    .cloud_bonus_filter > h4{
        color: #fff;
        font-weight: normal;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background-color: #795548;
    }
    .cloud_bonus_filter > select{
        background: none;
        font-size: 1rem;
        border: 1px solid #795548;
        box-sizing: border-box;
    }

/* 狀態nav */
    .cloud_bonus_nav{
        width: 100%;
        margin: 20px 0;
    }
    .cloud_bonus_nav ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        background-color: #fff;
    }
    .cloud_bonus_nav ul li{
        width: 50%;
    }
    .cloud_bonus_nav ul li a{
        display: block;
        padding: 5px 0;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        transition: all .3s;
        position: relative;
    }
    .cloud_bonus_nav ul li a span{
        display: block;
        padding: 5px;
        border-right: 1px solid #f1a993;
        box-sizing: border-box;
        font-size: 1.25rem;
    }
    .cloud_bonus_nav ul li .cloud_bonus_nav_last span{
        border-right: none;
    }
    .cloud_bonus_nav ul li a:hover{
        background-color: #f44336;
    }
    .cloud_bonus_nav ul li a:hover span{
        color: #fff;
    }
    .cloud_bonus_nav ul li .cloud_bonus_nav_click{ background-color: #f44336; color: #fff;}
    .cloud_bonus_nav_click:before{
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, 0) scale(1);
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 20px 0 20px;
        border-color: #f44336 transparent transparent transparent;
        transition: all .3s;
    }
    .cloud_bonus_nav_click:hover:before{
        transform: translate(-50%, 0) scale(1);
    }

/* 訂單商品列表 */
    .cloud_bonus_prodsellMain{
        width: 100%;
        margin: 20px auto;
    }
    .cloud_bonus_prodsell{
        position: relative;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
    }
    /*.cloud_bonus_searchbox .cloud_bonus_prodsellMain:nth-child(2){ display: none; }*/
    .cloud_bonus_get{
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
    }
    .cloud_bonus_get > span{
        display: inline-block;
        padding: 5px;
        box-sizing: border-box;
        color: #fff;
    }

    /* 獲得紀錄視窗 */
    .cloud_bonus_getMain{
        position: absolute;
        top: 32px;
        right: 0;
        padding: 10px;
        background-color: #ffffff;
        border: 2px solid rgba(0,0,0,.2);
        box-sizing: border-box;
        -webkit-box-shadow: 5px 5px rgb(0 0 0 / 20%);
        -moz-box-shadow: 5px 5px rgba(0,0,0,.2);
        box-shadow: 5px 5px rgb(0 0 0 / 20%);
        z-index: 1;
        height: 90%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        display: none;
    }
    .cloud_bonus_getlist{
        border-bottom: 2px dashed #ccc;
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    .cloud_bonus_getlistbox{
        margin-bottom: 5px;
    }
    .cloud_bonus_getlist .cloud_bonus_getlistbox:nth-child(2){ font-size: 0.9rem; }
    .cloud_bonus_getlistbox span{ display: inline-block; }

    /*捲軸底色*/
    .cloud_bonus_getMain::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #ccb5ae;
    }
    /*捲軸寬度*/
    .cloud_bonus_getMain::-webkit-scrollbar {
        width: 4px;
        background-color: black;
    }
    /*捲軸滾動軸顏色*/
    .cloud_bonus_getMain::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.5);
    }

    .cloud_bonus_prodsell h3{
        border-left: 5px solid #444;
        padding: 5px 80px 5px 5px;
        box-sizing: border-box;
        font-weight: normal;
        font-size: 1.15rem;
        margin-bottom: 15px;
    }
    .cloud_bonus_prodsell > p{
        margin-bottom: 10px;
    }
    .cloud_bonus_prodsell > p > span{
        display: inline-block;
        margin-right: 10px;
    }
    .cloud_bonus_prodsellbox{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        margin: 40px auto;
    }
    .cloud_bonus_prodsellbox_img{
        width: 49%;
        margin-right: 1%;
        position: relative;
    }
    .cloud_bonus_prodsellbox_detail{
        width: 49%;
        margin-left: 1%;
    }
    .cloud_bonus_prodsellbox_img,
    .cloud_bonus_prodsellbox_detail{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .cloud_bonus_prodsellbox_detail > div > p{
        width: 100%;
        color: #888;
        font-size: 1.25rem;
    }
    .cloud_bonus_prodsellbox_point{
        width: 80%;
        max-width: 250px;
        text-align: center;
        padding: 10px;
        box-sizing: border-box;
        color: #fff;
        position: relative;
    }
    .cloud_bonus_prodsellbox_pointN{
        font-size: 3rem;
        font-style: normal;
    }
    .cloud_bonus_prodsellbox_pointT{
        font-style: normal;
    }
    .cloud_bonus_prodsellbox_imgB{
        display: block;
        width: 20%;
        box-sizing: border-box;
        cursor: pointer;
        transition: all .3s;
        text-align: center;
    }
    .cloud_bonus_prodsellbox_imgB > span{
        display: none;
        padding: 5px 10px;
        box-sizing: border-box;
        font-size: 1.25rem;
        color: #444;
    }
    .cloud_bonus_prodsellbox_imgB > div{
        width: 50px;
        margin: 0 auto;
        height: 80px;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: all .3s;
    }

    .cloud_bonus_prodsellbox_list{
        width: 100%;
        margin: 20px auto;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        display: none;
        position: relative;
    }
    .cloud_bonus_prodsellbox_list:before{
        position: absolute;
        content: '';
        top: -20px;
        right: 50%;
        transform: translate(50%, 0);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 20px 20px 20px;
    }

    .cloud_bonus_prodsellbox_listBox{
        width: 100%;
        background-color: #EAEAEA;
        padding: 10px;
        box-sizing: border-box;
        margin: 20px 0;
        position: relative;
    }
    .cloud_bonus_prodsellbox_listBox > span{
        position: absolute;
        width: 30px;
        top: -10px;
        right: 0;
        background-color: #000;
        color: #fff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    /* 可使用 */
    .cloud_bonus_prodsell.used .cloud_bonus_get > span{ background-color: #00bcd4; }
    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_pointmark{ color: #00bcd4; }
    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_point{ background-color: #00bcd4; }

    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB{ border: 2px solid #00bcd4; }

    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB > div{ background-image: url(/view/cloud/img/file-b.png); }
    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB:hover{
        background-color: #00bcd4;
    }

    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_list{ border: 2px solid #00bcd4; }
    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_list:before{ border-color: transparent transparent #00bcd4 transparent; }


   .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB:hover > div{
        background-image: url(/view/cloud/img/file-w.png);
    }
/* table */
    .dividend_bonus_box table{
        width: 100%;
        margin: 0 auto;
        border-collapse: collapse;
    }
    .dividend_bonus_box table tr th{
        padding: 10px 5px;
        box-sizing: border-box;
        background-color: #795548;
        color: #ffffff;
        white-space: nowrap;
        border: 1px solid #dedede;
    }
    .dividend_bonus_box table tr td{
        padding: 10px 5px;
        box-sizing: border-box;
        border: 1px solid #DEDEDE;
        text-align: center;
        position: relative;
    }
/* 來源table */
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr th{
        background-color: #9E9E9E;
    }
    .dividend_bonus_tb_Store_box{
        position: absolute;
        z-index: 999;
        width: 200%;
        max-width: 500px;
        left: 50%;
        top: 90%;
        transform: translate(-50%, 0);
        background-color: #ffffff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        display: none;
    }
/* 按鈕們 */
    .cloud_bonus_prodsell_btn{
        width: 48%;
        margin-right: 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    .cloud_bonus_prodsell_btn a{
        width: 48%;
        margin-bottom: 5px;
        cursor: pointer;
        border: 0;
        display: block;
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
        font-weight: normal;
        border-radius: 10px;
        color: #fff;
        -webkit-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        transition: all ease 0.3s;
    }
    .cloud_bonus_prodsell_btnDetail{ background-color: #ff9800; }
    .cloud_bonus_prodsell_btnPay{ background-color: #00bcd4; }
    .cloud_bonus_prodsell_btnTransport{ background-color: #795548; }
    .cloud_bonus_prodsell_btnCancel{ background-color: #999; }
    .cloud_bonus_prodsell_btn a:hover{ background-color: rgba(0,0,0,.8); }
.cloud_bonus_link{
    position: fixed;
    top: calc(20% + 150px);
    right: 0;
    z-index: 99;
}
.cloud_bonus_link ul li a{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: all .5s;
    font-size: 1.25rem;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background-color: #F44336;
    margin: 10px;
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    transition: all .5s;
}
.cloud_bonus_link ul li .cloud_bonus_linkALL{
    background-color: #2196F3;
}
@media all and (max-width: 1020px){
    .cloud_bonus_link{
        position: fixed;
        top: calc(40% + 150px);
    }
}
@media all and (max-width: 768px){
    .dividend_bonus_box table tr th{ display: none; }
    .dividend_bonus_box table tr{
        width: 100%;
        margin: 0 0 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        position: relative;
    }

    .dividend_bonus_box table tr .dividend_bonus_tb_No{ border-right: none; border-bottom: none;}
    .dividend_bonus_box table tr .dividend_bonus_tb_Sort{ border-bottom: none;}


    .dividend_bonus_box table tr .dividend_bonus_tb_Point div,
    .dividend_bonus_box table tr .dividend_bonus_tb_Store div,
    .dividend_bonus_box table tr .dividend_bonus_tb_MeePoint div,
    .dividend_bonus_box table tr .dividend_bonus_tb_Detail div,
    .dividend_bonus_box table tr .dividend_bonus_tb_AcquiredDate div,
    .dividend_bonus_box table tr .dividend_bonus_tb_EffectiveDate div,
	.dividend_bonus_box table tr .dividend_bonus_tb_Note div,
    .dividend_bonus_box table tr .dividend_bonus_tb_ExpiryDate div{
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }


    .dividend_bonus_box table tr .dividend_bonus_tb_No{ width: 15%; }
    .dividend_bonus_box table tr .dividend_bonus_tb_Sort{ width: 85%; }

    .dividend_bonus_box table tr .dividend_bonus_tb_Name{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: baseline;
        border-bottom: none;
    }

    .dividend_bonus_box table tr .dividend_bonus_tb_Point,
    .dividend_bonus_box table tr .dividend_bonus_tb_Store,
    .dividend_bonus_box table tr .dividend_bonus_tb_MeePoint,
    .dividend_bonus_box table tr .dividend_bonus_tb_AcquiredDate,
    .dividend_bonus_box table tr .dividend_bonus_tb_EffectiveDate,
	.dividend_bonus_box table tr .dividend_bonus_tb_Note,
    .dividend_bonus_box table tr .dividend_bonus_tb_ExpiryDate,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_Point,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_MeePoint,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_ExpiryDate{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
        border-bottom: none;
    }
    .dividend_bonus_box table tr .dividend_bonus_tb_ExpiryDate,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_ExpiryDate{ border-bottom: 1px solid #DEDEDE; }

    .dividend_bonus_box table tr .dividend_bonus_tb_Point:before,
    .dividend_bonus_box table tr .dividend_bonus_tb_Store:before,
    .dividend_bonus_box table tr .dividend_bonus_tb_MeePoint:before,
    .dividend_bonus_box table tr .dividend_bonus_tb_AcquiredDate:before,
    .dividend_bonus_box table tr .dividend_bonus_tb_EffectiveDate:before,
	.dividend_bonus_box table tr .dividend_bonus_tb_Note:before,
    .dividend_bonus_box table tr .dividend_bonus_tb_ExpiryDate:before,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_Point:before,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_MeePoint:before,
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_ExpiryDate:before{
        color: #7F7F7F;
        width: 15%;
        max-width: 100px;
        min-width: 100px;
        padding: 0.5rem;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #EAEAEA;
    }

    .dividend_bonus_box table tr .dividend_bonus_tb_Point:before{ content: "點數"; }
    .dividend_bonus_box table tr .dividend_bonus_tb_Store:before{ content: "來源"; }
    .dividend_bonus_box table tr .dividend_bonus_tb_MeePoint:before{ content: "紅蜜"; }
    .dividend_bonus_box table tr .dividend_bonus_tb_AcquiredDate:before{ content: "產生"; }
	.dividend_bonus_box table tr .dividend_bonus_tb_Note:before{ content: "備註說明"; }
    .dividend_bonus_box table tr .dividend_bonus_tb_EffectiveDate:before{ content: ""; }
    .dividend_bonus_box table tr .dividend_bonus_tb_ExpiryDate:before{ content: "效期"; }
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_Point:before{ content: "點數"; }
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_MeePoint:before{ content: "紅蜜"; }
    .dividend_bonus_box .dividend_bonus_tb_Store_boxMain table tr .dividend_bonus_tb_Store_box_td_ExpiryDate:before{ content: "效期"; }
    .dividend_bonus_box table tr .dividend_bonus_tb_Store .dividend_bonus_tb_Store_box{
        display: none;
    }

}
@media all and (max-width: 690px){

    .cloud_bonus_search,
    .cloud_bonus_date{
        width: 100%;
        margin-bottom: 10px;
    }


    .cloud_bonus_prodsell h3{
        padding: 5px 0 5px 5px;
        margin-top: 20px;
    }
    .cloud_bonus_prodsellbox_img{
        width: 100%;
        margin-right: 0;
    }
    .cloud_bonus_prodsellbox_point{ max-width: 100%; }
    .cloud_bonus_prodsellbox_detail{ width: 100%; margin-left: 0; margin-top: 20px;}
}
@media all and (max-width: 480px){
    .cloud_bonus_link{
        position: fixed;
        top: calc(40% + 120px);
    }
    .cloud_bonus_link ul li a{
        width: 50px;
        height: 50px;
        font-size: 1rem;
        padding: 5px;
        line-height: 20px;
    }
}
@media all and (max-width: 425px){


    .cloud_bonus_prodsellbox_point,
    .cloud_bonus_prodsellbox_imgB{ width: 100%; }

    .cloud_bonus_prodsellbox_imgB > span{ display: block; }

    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB:hover{ background-color: #fff; }

    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB > div{
        display: none;
    }

    .cloud_bonus_prodsell.used .cloud_bonus_prodsellbox_imgB:hover > div{
        display: none;
    }
}