.bg-f1 {
    background-color: #f1f1f1;
    border-radius: 8px;
    padding: 12px 12px;
}
.bg-f7 {
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 12px 12px;
    margin: 16px 16px;
}
.bg-764 {
    background-color: #764c9e;
    border-radius: 8px;
    padding: 12px 12px;
    margin: 16px 16px;
}
.top-16 {
    margin-top: 16px;
}
.top-24 {
    margin-top: 24px;
}
.top-32 {
    margin-top: 32px;
}
.top-64 {
    margin-top: 64px;
}
.botm-16 {
    margin-bottom: 16px;
}
.botm-24 {
    margin-bottom: 24px;
}
.botm-32 {
    margin-bottom: 32px;
}
.rd-8 {
    border-radius: 8px;
}
.rd-10 {
    border-radius: 10px;
}
.rd-16 {
    border-radius: 16px;
}
.center {
    text-align: center;
}
.s-mail {
    background-color: #764c9e;
    text-align: center;
    padding: 10px 6px 14px 6px;
    color: #FFF;
    border-radius: 8px;
    font-size: 18px;
}
.s-mail-1 {
    background-color: #764c9e;
    padding: 4px;
    border-radius: 8px;
    margin-top: 12px;
}
.fnt-18 {
    font-size: 18px;
}
.fnt-24 {
    font-size: 24px;
}
.bg-board {
    border: solid 1px #764c9e;
}
.bg-name {
    border-radius: 50px;
    /*background: rgb(229,18,255);
    background: radial-gradient(circle, rgba(229,18,255,1) 0%, rgba(113,16,153,1) 100%);*/
    background-color: #764c9e;
    padding: 8px 4px;
    color: #FFF;
    /*border: solid 1px #512472;*/
}
.link-hove {
    color: #6699ff;
    background-color: #FFF;
}
.link-hove:hover {
    color: #FFF;
    /*background-color: indigo;*/
    background-color: dodgerblue;
}

.bnr-small {
    box-shadow: 0px 0px 0px 2px #e1e1e1;
}
.bnr-small:hover {
    box-shadow: 0px 0px 0px 2px #764c9e;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
    .blinking-text {
    animation: blink 1.5s infinite; /* 2s คือความเร็วของการกระพริบ */
}