*{
    margin: 0px;
    padding: 0px;
}

a{
    transition: .3s;
    cursor: pointer;
    color: #303030;
}

p{
    margin-bottom: 0.375rem;
}

button{
    cursor: pointer;
}

a:hover{
    text-decoration: none;
}

hr{
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}


li{
    list-style: none;
}


body{
    font-family: '微軟正黑體';
    background-color: #e0e0e0;
    font-size: 18px;
    color: #303030;
    position: relative;
}

.gift_icon::after{
    position: absolute;
    content: '';
    background: url(../img/gift.png) no-repeat bottom /contain;
    width: 180px;
    height: 250px;
    bottom: 0px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
} 
.lunch_icon::after{
    position: absolute;
    content: '';
    background: url(../img/lunch.png) no-repeat bottom /contain;
    width: 180px;
    height: 250px;
    bottom: 0px;
    left: 0;
    z-index: -1;
    opacity: 0.3;
} 

h1{
    font-size: 3rem;
    line-height: 1.5;
}


.row{
    margin-left: 0;
    margin-right: 0;
}

.btn{
    padding: 1rem 0.75rem;
}

.fz-13{
    font-size: 13px !important;
}
.fz-14{
    font-size: 14px !important;
}
.fz-18{
    font-size: 18px !important;
}
.fz-20{
    font-size: 20px !important;
}
.fz-22{
    font-size: 22px !important;
}
.fz-24{
    font-size: 24px !important;
}
.fz-26{
    font-size: 26px !important;
}
.fz-30{
    font-size: 30px !important;
}

.fw-600{
    font-weight: 600;
}

.w-45{
    width: 45%;
}

.ls-2{
    letter-spacing: 2px;
}

.lh-165{
    line-height: 1.65;
}

.mb-10{
    margin-bottom: 10rem;
}

.w-50{
    width: 50% !important;
}
.w-80{
    width: 80% !important;
}

.table td{
    vertical-align: middle;
}


.jcsa{
    justify-content: space-around;
}



.btn-sm{
    padding: 0.25rem 0.5rem;
    font-size: 18px;
    font-weight: 600;
    vertical-align: bottom;
}



.bg_pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: -1;
}

.Paper_v2 {
    background-image:
    repeating-linear-gradient(to bottom,
        transparent 25px,
        rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
        transparent 27px,  transparent 51px, 
        rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
        transparent 53px,  transparent 77px, 
        rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
        transparent 79px,  transparent 103px, 
        rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
        transparent 105px,  transparent 129px, 
        rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),
  
    repeating-linear-gradient(to right,
        transparent 25px,
        rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
        transparent 27px,  transparent 51px, 
        rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
        transparent 53px,  transparent 77px, 
        rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
        transparent 79px,  transparent 103px, 
        rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
        transparent 105px,  transparent 129px, 
        rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}


/*登出按鈕*/
.log-out{
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 18px;
    padding: 10px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff !important;
    border-radius: 10px;
    border: 0px;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #a4a4a4;
    background-image: linear-gradient(45deg, #666666 0%, #a4a4a4  51%, #666666  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.log-out:hover, .btn-previous:hover{
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}


.btn-previous{
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 18px;
    padding: 10px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff !important;
    border-radius: 10px;
    border: 0px;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #a4a4a4;
    background-image: linear-gradient(45deg, #666666 0%, #a4a4a4  51%, #666666  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/*登入*/
.login-wrap{
    width: 80%;
    padding: 40px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 5px;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


.center-flex{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-main {
    min-width: 200px;
    max-width: 200px;
    font-size: 18px;
    margin: 10px;
    padding: 15px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff !important;
    border-radius: 10px;
    border: 0px;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #fb6ba5;
    background-image: linear-gradient(45deg, #ff2f74 0%, #fb6ba5  51%, #ff2f74  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.btn-main:hover, .btn-gift:hover, .btn-lunch:hover{
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.btn-main:active, .btn-gift:active , .btn-lunch:active{
    transform: scale(0.95);
}



.btn-gift{
    border-radius: 10px;
    min-width: 200px;
    max-width: 200px;
    font-size: 18px;
    margin: 10px;
    padding: 15px 20px;
    font-weight: 700;
    color: #fff !important;
    border: 0px;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: 0px 0px 14px -7px #ebb630  ;
    background-image: linear-gradient(45deg, #e67b00 0%, #ebb630  51%, #e67b00  100%);
}

.btn-lunch{
    border-radius: 10px;
    min-width: 200px;
    max-width: 200px;
    font-size: 18px;
    margin: 10px;
    padding: 15px 20px;
    font-weight: 700;
    color: #fff !important;
    border: 0px;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: 0px 0px 14px -7px #3b94d8  ;
    background-image: linear-gradient(45deg, #093fab 0%, #3b94d8  51%, #093fab  100%);
}




.index-wrap{
    padding: 40px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 5px;
    border: 2px solid #eee;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/*RWD*/