div {
    /* border: dotted #2af12a9f 1px; */
}
/* ------------------------------------------------- */



body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-image: url(../../assets/images/bg.svg);
    background-position: center top;
    background-size: contain;
    background-repeat: repeat-x;
    background-color: #761214;
    
    color: white !important;
}

.bg-cloud {
    background-image: url(../../assets/images/bg-cloud.svg);
    background-position: center center;
}


.form-check-danger.custom-option.checked {
    border: 1px solid #f42929 !important;
  }

/* ------------------------------------------------- animate */

.hover-zoom {
    transition:  0.1s ease-in-out;
}
.hover-zoom:hover {
    transform: scale(1.06) translateY(0px);
}

/* Intro dagon */
.scale-up-center{-webkit-animation:scale-up-center 1.1s cubic-bezier(.445,.05,.55,.95) infinite alternate both;animation:scale-up-center 1.5s cubic-bezier(.445,.05,.55,.95) infinite alternate both}
@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}

/* Form max card */
.puff-in-center{animation:puff-in-center 0.7s cubic-bezier(.47,0.000,.745,.715) 1s both}
    @keyframes puff-in-center{0%{transform:scale(2);filter:blur(4px);opacity:0}100%{transform:scale(1);filter:blur(0);opacity:1}}

/* cloud */
.shake-horizontal{-webkit-animation:shake-horizontal 16s infinite both;animation:shake-horizontal 16s cubic-bezier(.455,.03,.515,.955) infinite both}
@-webkit-keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}@keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}

/* Lamp */
.rotate-top-1{animation:rotate-top-1 1.4s infinite alternate ease-in-out}
@keyframes rotate-top-1{0%{transform:rotate(-2deg);transform-origin:top}100%{transform:rotate(2deg);transform-origin:top}}
.rotate-top-2{animation:rotate-top-2 1.4s infinite alternate ease-in-out}
@keyframes rotate-top-2{0%{transform:rotate(2deg);transform-origin:top}100%{transform:rotate(-2deg);transform-origin:top}}

/* spin */
    /* in */
    .scale-in-center{animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
    @keyframes scale-in-center{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:1}}

    .swirl-in-fwd{animation:swirl-in-fwd 1s cubic-bezier(.455,.03,.515,.955) both}
    @keyframes swirl-in-fwd{0%{transform:rotate(-540deg) scale(0);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
    
.rotate-center{-webkit-animation:rotate-center 0.8s linear infinite both;animation:rotate-center 0.8s linear infinite 0s both}
.fadeout{
    animation:fadeout 1s 0.5s ease-out forwards;
    }
.fadeout-03s{
    animation:fadeout .3s 0.5s ease-out forwards;
    }
@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

@-webkit-keyframes rotate-end{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes rotate-end{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

@keyframes fadeout {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}


/* btn spain */
.bounce-in-bck{animation:bounce-in-bck 1.1s .8s both}
@keyframes bounce-in-bck{0%{transform:scale(7);animation-timing-function:ease-in;opacity:0}38%{transform:scale(1);animation-timing-function:ease-out;opacity:1}55%{transform:scale(1.5);animation-timing-function:ease-in}72%{transform:scale(1);animation-timing-function:ease-out}81%{transform:scale(1.24);animation-timing-function:ease-in}89%{transform:scale(1);animation-timing-function:ease-out}95%{transform:scale(1.04);animation-timing-function:ease-in}100%{transform:scale(1);animation-timing-function:ease-out}}

/* pack */
.slide-in-elliptic-bottom-fwd-close{
    animation:slide-in-elliptic-bottom-fwd-close .9s cubic-bezier(.25,.46,.45,.94) both
}
@keyframes slide-in-elliptic-bottom-fwd-close{
    0%{transform:translateY(600px) rotateX(30deg) scale(0);transform-origin:50% 100%;opacity:0}
    100%{transform:translateY(0) rotateX(0) scale(1);transform-origin:50% -1400px;opacity:1}
}


.slide-in-elliptic-bottom-fwd-open{
    animation:slide-in-elliptic-bottom-fwd-open .9s cubic-bezier(.25,.46,.45,.94) .5s both
}
@keyframes slide-in-elliptic-bottom-fwd-open{
    0%{transform:translateY(600px) rotateX(30deg) scale(0);transform-origin:50% 100%;opacity:0}
    80%{transform:translateY(0) rotateX(0) scale(1);transform-origin:50% -1400px;opacity:0}
    100%{transform:translateY(0) rotateX(0) scale(1);transform-origin:50% -1400px;opacity:1}
}


/* coupon */
.swirl-in-fwd{animation:swirl-in-fwd .6s ease-out both}
@keyframes swirl-in-fwd{0%{transform:rotate(-540deg) scale(0);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}


/* ภาพรางวัล */
.slide-in-elliptic-bottom-fwd-prize{
    animation:slide-in-elliptic-bottom-fwd-prize .7s cubic-bezier(.25,.46,.45,.94) 1.5s both}
@keyframes slide-in-elliptic-bottom-fwd-prize{
    0%{transform:translateY(600px) rotateX(30deg) scale(0);transform-origin:50% 100%;opacity:0}100%{transform:translateY(0) rotateX(0) scale(1);transform-origin:50% -1400px;opacity:1}}

/* เงื่อนไข */
.puff-in-center-tx-prize{animation:puff-in-center-tx-prize 0.7s cubic-bezier(.47,0.000,.745,.715) 1.8s both}
@keyframes puff-in-center-tx-prize{0%{transform:scale(2);filter:blur(4px);opacity:0}100%{transform:scale(1);filter:blur(0);opacity:1}}

.fade-in-fwd{-webkit-animation:fade-in-fwd .6s cubic-bezier(.39,.575,.565,1.000) 3s both;animation:fade-in-fwd .6s cubic-bezier(.39,.575,.565,1.000) 3s both}
@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}