@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Noto Sans TC', sans-serif;
}
a {
    text-decoration: none;
}
object {
    width: 100%;
    pointer-events: none;
  }
/* Font Size */
.hl-xl {
    font-size: 120px;
}
.hl-1 {
    font-size: 64px;
}
.hl-2 {
    font-size: 48px;
}
.hl-3 {
    font-size: 36px;
}
.hl-4 {
    font-size: 24px;
}
.hl-5 {
    font-size: 18px;
}
.hl-6 {
    font-size: 16px;
}
.hl-7 {
    font-size: 14px;
}
.hl-8 {
    font-size: 12px;
}

/* Font color */
.font-black {
    color: #222;
}
.font-yellow {
    color: #ffd80a;
}
.font-blue {
    color: #3f90dc;
}
.font-deep-blue {
    color: #2D394B;
}
.font-red {
    color: #e05151;
}
.font-green {
    color: #35AD79;
}
.font-gray-01 {
    color: #666;
}
.font-gray-02 {
    color: #999;
}
.font-gray-03 {
    color: #ccc;
}
.font-gray-04 {
    color: #ebebeb;
}
.font-white {
    color: #fff;
}

/* Theme Background Color */
.theme-black {
    background-color: #222;
}
.theme-yellow {
    background-color: #ffd80a;
}
.theme-blue {
    background-color: #3f90dc;
}
.theme-dark-blue {
    background-color: #2D394B;
}
.theme-red {
    background-color: #e05151;
}
.theme-gray-01 {
    background-color: #666;
}
.theme-gray-02 {
    background-color: #999;
}
.theme-gray-03 {
    background-color: #ccc;
}
.theme-gray-04 {
    background-color: #ebebeb;
}
.theme-gray-05 {
    background-color: #f8f8f8;
}
.theme-white {
    background-color: #fff;
}

/* Grid System */
.container-fluid {
    width: 100%;
}
.container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.grid_01 {
    width: calc(100%/12);
}
.grid_02 {
    width: calc(100%/12 * 2);
}
.grid_03 {
    width: calc(100%/12 * 3);
}
.grid_04 {
    width: calc(100%/12 * 4);
}
.grid_05 {
    width: calc(100%/12 * 5);
}
.grid_06 {
    width: calc(100%/12 * 6 );
}
.grid_07 {
    width: calc(100%/12 * 7);
}
.grid_08 {
    width: calc(100%/12 * 8);
}
.grid_09 {
    width: calc(100%/12 * 9);
}
.grid_10 {
    width: calc(100%/12 * 10);
}
.grid_11 {
    width: calc(100%/12 * 11);
}
.grid_12 {
    width: 100%;
}

/* Taiwan lottery */
.apply-tw-lottery-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: #e05151;
    z-index: 100;
    width: 104px;
    height: auto;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}
.apply-tw-lottery-btn img {
    margin-bottom: 6px;
    max-width: 100%;
}
.apply-tw-lottery-btn:hover {
    color: #666;
    background: #ffd80a;
}

/* Common Components */
.content-sec {
    padding-top: 50px;
    padding-bottom: 50px;
}
.faq-sec {
    min-height: 500px;
}
.sec-headline-m {
    font-size: 20px;
    color: #222222;
    font-weight: 700;
    position: relative;
    margin: 0 auto 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}
.sec-headline-large {
    font-size: 36px;
    color: #222222;
    font-weight: 700;
    position: relative;
    width: 100%;
    margin: 0 auto 34px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec-headline-large.gaming-live-lol {
    color: #fff;
}
.sec-headline-xl {
    font-size: 60px;
    color: #222222;
    font-weight: 700;
    position: relative;
    margin: 0 auto 34px auto;
    display: flex;
    align-items: center;
}
.sec-headline-xl.default {
    font-size: 60px;
    color: #222222;
    font-weight: 700;
    position: relative;
    margin: 0 0 34px 0;
    display: flex;
    align-items: center;
}
.sec-headline-m::before, 
.sec-headline-m::after,
.sec-headline-large::before, 
.sec-headline-large::after, 
.sec-headline-xl::before, 
.sec-headline-xl::after {
    display: block;
    content: '';
    /*position: absolute;*/
    top: 55%;
    width: 100px;
    height: 4px;
    background: #ffd80a;
} 
.sec-headline-m::before, 
.sec-headline-large::before, 
.sec-headline-xl::before {
    /*left: -125px;*/
    margin-right: 10px;
}
.sec-headline-m::after, 
.sec-headline-large::after, 
.sec-headline-xl::after {
    /*right: -125px;*/
    margin-left: 10px;
}
.sec-headline-large.activity::before, 
.sec-headline-large.activity::after {
    display: block;
    content: '';
    top: 55%;
    width: 100px;
    height: 4px;
    background: #e05151;
} 
.sec-headline-large.activity::before {
    margin-right: 10px;
}
.sec-headline-large.activity::after {
    margin-left: 10px;
}
.theme-btn {
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
input:focus {
    outline: none;
}
.hint-tag {
    display: inline-flex;
    justify-content: center;
    width: 12px;
    height: 12px;
    cursor: pointer;
    margin-left: 4px;
    position: relative;
}
.hint-tag::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Free';
    content: '\f059';
    font-size: 12px;
    color: #ccc;
}
.hint-tag::after {
    display: block;
    content: attr(data-hintmsg);
    border-radius: 5px;
    width: 150px;
    padding: 10px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    position: absolute;
    bottom: calc(100% + 16px);
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.hint-tag:hover::after {
    bottom: calc(100% + 8px);
    opacity: 1;
    visibility: visible;
}

/* Header */
.header-area {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-info {
    position: relative;
}
.logo-link {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
}
.logo {
    display: block;
    width: auto;
    height: 46px;
}
.hd-panel {
    position: relative;
    display: flex;
    align-items: center;
    right: 0;
}
.hd-panel .hd-site-notice-ico,
.hd-panel .hd-account-photo {
    display: none;
}
.hd-panel .hd-member-btn {
    display: flex;
}
.hd-panel.login .hd-member-btn {
    display: none;
}
.hd-panel.login .hd-site-notice-ico,
.hd-panel.login .hd-account-photo {
    display: flex;
}
.hd-member-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
}
.hd-member-btn::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    display: flex;
    content: '\f007';
    color: #fff;
    transition: 0.3s;
} 
.hd-member-btn:hover::before {
    color: #ffd80a;
}
.hd-member-btn:hover .hd-member-ul {
    transform: scaleY(1);
}
.hd-member-ul {
    position: absolute;
    width: 150px;
    border-radius: 4px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 40px;
    right: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    transform: scaleY(0);
    transition: 0.3s;
}
.hd-member-list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 5px 0;
}
.hd-member-link {
    color: #ebebeb;
    transition: 0.3s;
}
.hd-member-link:hover {
    color: #ffd80a;
}
.hd-account-photo {
    width: 42px;
    height: 42px;
    margin: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #ebebeb;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.hd-account-photo:hover {
    background: #ffd80a;
}
.hd-account-photo-frame {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.hd-account-photo-frame img {
    width: 100%;
    height: auto;
}
.hd-account-photo:hover .hd-member-login-ul {
    transform: scaleY(1);
}
.hd-member-login-ul {
    position: absolute;
    width: 100px;
    border-radius: 4px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 40px;
    right: 0;
    background: rgba(102,102,102,0.9);
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    transform: scaleY(0);
    transition: 0.3s;
}
.hd-member-login-list {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    padding: 5px 0;
}
.hd-member-login-list {
    border-bottom: 1px solid #ebebeb;
}
.hd-member-login-list:nth-last-child(1) {
    border: 0;
}
.hd-member-login-link {
    color: #ebebeb;
    display: flex;
    transition: 0.3s;
}
.hd-member-login-link:hover {
    color: #ffd80a;
}
.hd-site-notice-ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
}
.hd-site-notice-ico::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    display: flex;
    content: '\f0f3';
    font-size: 20px;
    color: #ebebeb;
    transition: 0.3s;
}
.hd-site-notice-ico:hover::before {
    color: #ffd80a;
}
.hd-site-notice-ico:hover .hd-site-notice-wrap {
    transform: scaleY(1);
}
.hd-site-notice-wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    border-radius: 4px;
    width: 220px;
    top: 40px;
    right: 0;
    padding: 6px 12px;
    background: rgba(102,102,102,0.9);
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    transform: scaleY(0);
    transition: 0.3s;
}
.hd-site-notice-title {
    color: #ffd80a;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 2px solid #ffd80a;
}
.hd-site-notice-title::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    content: '\f0f3';
    font-size: 20px;
    margin-right: 4px;
    transform: translateY(2px);
}
.hd-site-notice-item {
    display: flex;
    flex-direction: column;
    padding: 6px 6px;
    border-bottom: 1px dashed #999;
    background: rgba(34,34,34,0);
    transition: 0.3s;
}
.hd-site-notice-item:hover {
    background: rgba(34,34,34,1);
}
.hd-site-notice-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}
.hd-site-notice-prop, .hd-site-notice-txt {
    font-size: 12px;
    color: #ebebeb;
}
.hd-site-notice-btn {
    display: flex;
    justify-content: center;
    padding: 6px 0;
    font-size: 14px;
    color: #fff;
    transition: 0.3s;
}
.hd-site-notice-btn:hover {
    color: #ffd80a;
}

/* Desktop Navigation */
.m-navi-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 70px;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    visibility: hidden;
}
.m-navi-btn::before {
    display: flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    content: '\f0c9';
    color: #fff;
    transition: 0.3s;
}
.m-navi-btn:hover::before {
    color: #ffd80a;
}
.navi-ul {
    position: relative;
    left: 185px;
    display: flex;
}
.navi-li {
    height: 80px;
    list-style: none;
    position: relative;
}
.navi-li.sub .navi-link::after {
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 12px;
    content: '\f0d7';
    color: #ebebeb;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%,0);
    transition: 0.3s;
}
.navi-li.sub:hover .navi-link::after {
    bottom: 5px;
    color: #ffd80a;
}
.navi-li.sub .navi-link::before {
    display: none;
}
.navi-link {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 24px;
    height: 100%;
    color: #ebebeb;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: 0.3s;
}
.navi-link::before {
    display: block;
    content: '';
    width: 0;
    height: 5px;
    background: #ffd80a;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: 0.3s;
}
.navi-link:hover, .navi-link.current {
    color: #fff;
}
.navi-link:hover::before, .navi-link.current::before {
    left: 0;
    width: 100%;
}
.navi-li.sub:hover .sub-navi-ul {
    top: 100%;
    visibility: visible;
    opacity: 1;
}
.sub-navi-ul {
    padding: 16px;
    background: rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    position: absolute;
    top: -200%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}
.sub-navi-li {
    list-style: none;
    margin-bottom: 6px;
}
.sub-navi-link {
    font-size: 16px;
    white-space: nowrap;
    color: #ebebeb;
    transition: 0.3s;
}
.sub-navi-link:hover {
    color: #ffd80a;
}

/* Main Slider */
.main-slider-frame {
    background: #ccc;
    position: relative;
    overflow: hidden;
}
.main-slider-holder {
    display: flex;
    position: relative;
    width: 100%;
    transition: 0.5s;
}
.main-slider-item {
    position: absolute;
    width: 100%;
    display: block;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
    transition: 0.6s;
}
.main-slider-item.current {
    position: relative;
    opacity: 1;
    z-index: 2;
    animation: flipInX 1s ease 0s 1 both;
}
.main-banner-img {
    display: block;
    position: relative;
    width: 100%;
}
.main-banner-img > img {
    display: block;
    width: 100%;
    transition: none;
}
.main-banner-img.mobile {
    width: 100%;
    display: none;
}
.main-banner-txt-wrap {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.main-banner-title {
    font-size: 64px;
    color: #fff;
    font-style: italic;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.6);
}
.main-banner-txt {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 12px;
}
.main-banner-link {
    font-size: 18px;
    color: #666;
    background: rgba(255,255,255,0.8);
    border: 1px solid #fff;
    padding: 6px 20px;
    display: inline-flex;
    align-items: center;
    transform: skewX(-20deg);
    transition: 0.3s;
}
.main-banner-link:hover {
    border: 1px solid #ffd80a;
    background: #ffd80a;
    color: #222;
}
.main-banner-panel {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 2;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
}
.main-banner-coin {
    display: block;
    width: 8px;
    height: 15px;
    background: #ccc;
    margin: 0 10px;
    cursor: pointer;
    transform: scaleX(1) scaleY(1);
    transition: 0.3s;
}
.main-banner-coin:hover {
    background: #ffd80a;
}
.main-banner-coin.current {
    background: #ffd80a;
    transform: scaleX(1.5) scaleY(2);
}

/* Main banner customized */
.main-slider-item.together88 .main-banner-txt-wrap {
    top: 20%;
    right: 50%;
    align-items: center;
    transform: translate(50%,-50%);
}
.main-slider-item.together88 .main-banner-title {
    color: #ffd80a;
}
.main-slider-item.together88 .main-banner-txt {
    color: #fff;
}
.main-slider-item.together88 .main-banner-txt-wrap .main-banner-link {
    background: rgba(215,30,30,0.7);
    border: 1px solid #d71e1e;
    color: #fff;
    transform: skewX(-20deg) translateY(0%);
}
.main-slider-item.referrer .main-banner-txt-wrap {
    top: 20%;
    right: unset;
    left: 10%;
    transform: translate(0,0);
    align-items: flex-start;
}
.main-slider-item.line-qrcode .main-banner-txt-wrap {
    padding-bottom: 10px;
}
.main-slider-item.line-qrcode .main-banner-title {
    color: #ffd80a;
}
.main-slider-item.line-qrcode .main-banner-txt {
    text-shadow: 0 0 8px rgba(0,105,173,0.8);
    color: #fff;
}
.main-slider-item:nth-child(3) .main-banner-txt {
    text-shadow: 0 0 8px rgba(0,0,0,1);
    color: #fff;
}

/* About iSport */
.about-isport-sec {
    background: #ffd80a;
}
.isport-title-wrap {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    width: 60%;
    position: relative;
    padding-left: 300px;
}
.about-isport-title {
    font-size: 16px;
    color: #666;
    margin: 4px 0 0 0;
    position: relative;
    display: inline-block;
    z-index: 2;
}
.about-isport-title span {
    font-size: 24px;
    color: #e05151;
    display: inline-block;
    margin-right: 4px;
    text-shadow: 2px 2px 0 rgba(255,255,255,0.6);
}
.about-isport-title:nth-child(1) {
    margin-right: 20px;
    animation: bounceInRight 1s ease 0.5s 1 both;
}
.about-isport-title:nth-child(2) {
    animation: bounceInRight 1s ease 1s 1 both;
}
.about-isport-title:nth-child(3) {
    width: 100%;
    animation: bounceInRight 1s ease 1.5s 1 both;
}
.about-isport-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    overflow: hidden;
}
.about-isport-image-wrap {
    position: absolute;
    top: 0;
    right: 20%;
    width: auto;
    height: 100%;
}
.about-isport-image-wrap img {
    width: auto;
    height: 100%;
}

/* Game today sec */
.game-today-container {
    justify-content: center;
    min-height: 510px;
}
.game-today-series-ul {
    width: 100%;
    display: flex;
    justify-content: center;
}
.game-today-series-list {
    width: 60px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    align-items: center;
    color: #999;
    margin: 0 60px;
    cursor: pointer;
    transition: 0.3s;
}
.game-today-series-list:hover, .game-today-series-list.active {
    color: #3f90dc;
}
.game-today-series-list::before {
    font-family: 'Font Awesome 5 Free';
    display: flex;
    font-style: normal;
    font-size: 60px;
} 
.game-today-series-list:nth-child(1):before {
    content: '\f434';
    font-weight: 900;
}
.game-today-series-list:nth-child(2):before {
    content: '\f433';
    font-weight: 900;
}
.game-today-series-list:nth-child(3):before {
    content: '\f1e3';
    font-weight: 400;
}
.game-today-series-list:nth-child(4):before {
    content: '\f111';
    font-weight: 400;
}
.game-today-preview-wrap {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 60px 0 60px 0;
}
.game-today-preview-item {
    width: calc(50% - 10px);
    height: 150px;
    display: flex;
    border-bottom: 1px solid #222;
    position: relative;
    margin-bottom: 20px;
    transition: 0.3s;
}
.game-today-preview-item:hover {
    border-bottom: 1px solid #e05151;
}
.game-today-preview-item:hover .game-today-time-info,
.game-today-preview-item:hover .game-today-time-info::before{
    background: #e05151;
}
.game-today-time-info {
    width: 102px;
    height: 100%;
    background: #222;
    padding: 20px 0 0 20px;
    position: relative;
    transition: 0.3s;
}
.game-today-time-info::before {
    width: 54px;
    height: 100%;
    display: block;
    content: '';
    background: #222;
    transform: skewX(-20deg);
    z-index: 1;
    position: absolute;
    top: 0;
    right: -27px;
    transition: 0.3s;
}
.game-today-date-set {
    position: relative;
    width: 55px;
    height: 60px;
}
.game-today-date-set::before {
    display: block;
    content: '';
    width: 1px;
    height: 52px;
    background: #ffd80a;
    position: absolute;
    left: 50%;
    transform: rotate(30deg) translate(3px,4px);
}
.game-today-month, .game-today-date {
    font-size: 24px;
    color: #ffd80a;
}
.game-today-date {
    position: absolute;
    right: 0;
    bottom: 0;
}
.game-today-day {
    font-size: 14px;
    color: #fff;
    position: absolute;
    display: block;
    top: 56px;
    left: 86px;
    z-index: 2;
    white-space: nowrap;
}
.game-today-time {
    font-size: 14px;
    color: #fff;
    display: block;
    margin-top: 20px;
}
.game-today-league {
    display: flex;
    font-size: 24px;
    color: #222;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
}
.game-today-league::before {
    display: block;
    content: '';
    width: 100px;
    height: 4px;
    background: #3f90dc;
    position: absolute;
    right: 0;
    bottom: -8px;
}
.game-today-team-info {
    width: calc(100% - 102px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
    position: relative;
}
.game-today-team-info::before {
    display: inline-flex;
    content: 'VS';
    font-size: 24px;
    font-weight: bold;
    color: #ffd80a;
    order: 2;
    margin: 0 10px;
}
.game-today-away-team, .game-today-home-team {
    font-size: 18px;
    color: #999;
    max-width: 35%;
    text-align: center;
}
.game-today-away-team {
    order: 1;
}
.game-today-home-team {
    order: 3;
}
.main-sec-more-btn {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    padding: 10px 48px;
    background: #e05151;
    box-shadow: -2px -2px 2px rgba(0,0,0,0.01),
                -2px -2px 4px rgba(0,0,0,0.01),
                2px 2px 4px rgba(0,0,0,0.1),
                2px 2px 8px rgba(0,0,0,0.1),
                inset 2px 2px 4px rgba(0,0,0,0),
                inset -1px -1px 2px rgba(0,0,0,0);
    transition: 0.3s;
}
.main-sec-more-btn:hover {
    background: #e05151;
    box-shadow: -2px -2px 2px rgba(0,0,0,0),
                -2px -2px 4px rgba(0,0,0,0),
                2px 2px 4px rgba(0,0,0,0),
                2px 2px 8px rgba(0,0,0,0),
                inset 2px 2px 4px rgba(0,0,0,0.3),
                inset -1px -1px 2px rgba(0,0,0,0.4);
    color: #fff;
}

/* Live Games section */
.live-games-sec {
    background: #f7f7f7 url(../_images/live_games_sec_bg.png) no-repeat 100% 50%;
    background-attachment: fixed;
    min-height: 620px;
}
.now-live-games-container {
    display: flex;
    flex-direction: column;
}
.now-live-games-wrap {
    position: relative;
    display: none;
    padding-bottom: 45px;
}
.now-live-games-wrap.active {
    display: flex;
}
.now-live-games-item {
    display: flex;
    flex-direction: column;
    width: 330px;
    height: 150px;
    border: 1px solid #e05151;
    border-radius: 4px;
    margin-right: 34px;
    position: relative;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0);
    transition: 0.3s;
}
.now-live-games-item:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.now-live-games-team-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50%;
    padding: 0 108px 0 24px;
}
.now-live-games-team-wrap:nth-child(1) {
    border-bottom: 1px solid #e05151;
}
.now-live-games-item-vs-ico {
    position: absolute;
    top: 50%;
    right: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    background: #e05151;
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    transform: translateY(-50%);
    animation: nowLiveGameBurning 2s ease 0s infinite alternate none;
}
.now-live-games-item-vs-ico::before {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    display: inline-flex;
    content: '\f3ac';
    font-size: 24px;
    margin-right: 2px;
    transform: translateY(2px);
}
.now-live-games-away-team, .now-live-games-home-team {
    font-size: 14px;
    font-weight: normal;
    color: #222;
    margin-right: 10px;
}
.now-live-games-away-team-score, .now-live-games-home-team-score {
    font-size: 24px;
    color: #e05151;
}
.purchase-live-game-btn {
    display: flex;
    font-size: 18px;
    color: #e05151;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
.purchase-live-game-btn::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    display: inline-flex;
    content: '\f054';
    margin-right: 8px;
    transform: translate(0,2px);
    transition: 0.3s;
}
.purchase-live-game-btn:hover {
    color: #3f90dc;
}
.purchase-live-game-btn:hover::before {
    transform: translate(3px,2px);
}
.no-live-games-wrap {
    display: none;
}
.no-live-games-wrap.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Predict Game Section */
.predict-sec {
    /*background: url(../_images/game_predict_sec_bg.jpg) no-repeat 50% 50%;*/
    background-attachment: fixed;
    background-size: cover;
    /*min-height: 550px;*/
    position: relative;
}
.predict-sec::before {
    display: flex;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(255,255,255,0.85);
    top: 0;
    left: 0%;
}
.predict-game-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    padding: 0 40px;
}
.no-predict-games {
    width: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 41.666%;
    background: url(../_images/no_predict_bg.jpg) no-repeat;
    background-size: 100%;
}
.no-predict-games.active {
    display: flex;
}
.no-predict-games-title {
    font-size: 24px;
    color: #e05151;
    position: absolute;
    top: 20%
}
.no-predict-games-subtitle {
    font-size: 16px;
    color: #666;
    position: absolute;
    top: calc(20% + 36px);
}
.predict-game-item {
    position: relative;
    display: inline-flex;
    width: 30%;
    min-height: 350px;
    padding: 20px;
    border: 1px solid #ccc;
    flex-direction: column;
    background: rgba(255,255,255,0.8);
}
.predict-game-team-versus-wrap {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #ebebeb;
    flex-grow: 1;
}
.predict-game-league {
    font-size: 16px;
    color: #3f90dc;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.predict-game-league::after {
    display: block;
    content: '';
    background: #3f90dc;
    width: 60px;
    height: 3px;
    margin-top: 4px;
}
.predict-game-away-team, .predict-game-home-team {
    font-size: 18px;
    color: #666666;
    padding: 20px 0 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
.predict-game-away-team::after, .predict-game-home-team::after {
    display: flex;
    content: '(客)';
    font-size: 12px;
    color: #999;
}
.predict-game-home-team::after {
    content: '(主)';
}
.predict-game-home-team {
    justify-content: center;
    padding: 20px 0 20px 0;
}
.predict-game-versus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: #ffd80a;
    color: #fff;
    border-radius: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
}
.predict-game-versus::before {
    display: flex;
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffd80a;
    position: absolute;
    z-index: -1;
    opacity: 0.9;
    transform: scale(1);
    animation: predictGameEffect 2s ease 0s infinite normal none;
}
.predict-game-date-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}
.predict-game-date, .predict-game-time {
    font-size: 14px;
    color: #666;
    display: inline-flex;
}
.predict-game-time {
    margin-left: 8px;
}
.predict-rule-title {
    display: flex;
    justify-content: center;
    font-size: 24px;
    color: #e05151;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
}
.predict-rule-rate {
    margin-left: 8px;
}
.predict-game-item-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}
.predict-game-go-bet-btn, .predict-game-go-analyze-btn {
    font-size: 14px;
    color: #3f90dc;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.predict-game-go-bet-btn {
    margin-bottom: 10px;
}
.predict-game-go-bet-btn::before, .predict-game-go-analyze-btn::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    content: '\f054';
    margin-right: 6px;
    transform: translate(0,2px);
    transition: 0.3s;
}
.predict-game-go-bet-btn:hover, .predict-game-go-analyze-btn:hover {
    color: #e05151;
}
.predict-game-go-bet-btn:hover::before, .predict-game-go-analyze-btn:hover::before {
    transform: translate(4px,2px);
}

/* Gaming Live - LOL */
.gaming-live-lol-sec {
    background-image: url(../_images/gaming_lol_live_bg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-attachment: fixed;
    position: relative;
}
.gaming-live-title {
    font-size: 16px;
    color: #ffd80a;
    width: 100%;
    margin-bottom: 12px;
}
.gaming-live-lol-play-div {
    width: 100%;
    min-height: 450px;
    display: flex;
    justify-content: center;
    position: relative;
}
.gaming-live-lol-play-div.live-start::before, .gaming-live-lol-play-div.live-start::after {
    display: none;
}
.gaming-live-lol-play-div::before {
    display: block;
    content: '';
    background: url(../_images/gaming_live_cover.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 50%;
    width: 100%;
    height: 100%;
    position: absolute;
}
.gaming-live-lol-play-div::after {
    display: block;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    content: '\f144';
    color: #fff;
    position: absolute;
    z-index: 3;
    font-size: 6em;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
}
.gaming-live-lol-play-div:hover::after {
    color: #ffd80a;
    text-shadow: 0 0 5px rgba(255,255,255,0.4);
}
.gaming-live-lol-play-div #video_embed {
    width: 70%;
}
.gaming-live-lol-play-div #chat_embed {
    width: 30%;
}
.gaming-live-lol-btn-wrap {
    justify-content: center;
}
.gaming-live-lol-btn-wrap > .theme-btn {
    margin: 16px 8px;
    cursor: pointer;
} 
.gaming-agenda {
    margin-bottom: 12px;
}
.gaming-agenda-list {
    font-size: 16px;
    color: #ebebeb;
    list-style: none;
}
.gaming-agenda-list::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
    content: '\f091';
    color: #ffd80a;
    margin-right: 4px;
    text-shadow: 0 0 10px rgba(255,255,255,0.6);
}
.gaming-agenda-notice {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 20px;
}
.gaming-lol-versus-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 20%;
}
.gaming-lol-versus-table-header {
    display: flex;
    width: 100%;
    background: rgba(0,0,0,0.8);
    padding: 4px 8px;
    margin: 0 0 4px 0;
}
.gaming-lol-versus-table-item {
    display: flex;
    width: 100%;
    background: rgba(255,255,255,0.3);
    padding: 4px 8px;
    margin: 0 0 4px 0;
}
.gaming-lol-versus-table-header-column {
    list-style: none;
    color: #ffd80a;
}
.gaming-lol-versus-table-item-column {
    list-style: none;
    color: #fff;
}
.gaming-lol-versus-table-header-column.serial, .gaming-lol-versus-table-item-column.serial {
    width: 10%;
}
.gaming-lol-versus-table-header-column.team-name, .gaming-lol-versus-table-item-column.team-name {
    width: 30%;
}
.gaming-lol-versus-table-header-column.team-en-name, .gaming-lol-versus-table-item-column.team-en-name {
    width: 50%;
}
.gaming-lol-versus-table-header-column.team-nick-name, .gaming-lol-versus-table-item-column.team-nick-name {
    width: 10%;
}

/* Show My bet */
.show-bet-sec {
    background: #fff;
}
.show-bet-container {
    justify-content: center;
}
.show-bet-slider-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 40px;
}
.show-bet-slider-prev-btn, .show-bet-slider-next-btn {
    display: inline-flex;
    position: absolute;
    width: 24px;
    height: 46px;
    cursor: pointer;
}
.show-bet-slider-prev-btn.hide, .show-bet-slider-next-btn.hide {
    display: none;
}
.show-bet-slider-prev-btn {
    left: 0;
}
.show-bet-slider-next-btn {
    right: 0;
}
.show-bet-slider-prev-btn::before, .show-bet-slider-next-btn::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
    color: #ccc;
    transition: 0.3s;
}
.show-bet-slider-prev-btn::before {
    content: '\f053';
}
.show-bet-slider-next-btn::before {
    content: '\f054';
}
.show-bet-slider-frame {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
}
.show-bet-item-full-container {
    width: 100%;
    display: flex;
    position: relative;
    left: 0;
    transition: 0.3s;
}
.show-bet-item.on-index, .show-bet-item.on-index:nth-child(2n), .show-bet-item.on-index:nth-child(3n), .show-bet-item.on-index:nth-child(6n) {
    width: calc(100%/3 - 16px);
    margin: 0 8px 20px 8px;
    flex-shrink: 0;
}

/* Bet versus index sec */
.bet-versus-sec {
    background: #fff;
}
.bet-versus-container {
    justify-content: center;
}
.bet-versus-slider-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 40px;
}
.bet-versus-slider-prev-btn, .bet-versus-slider-next-btn {
    display: inline-flex;
    position: absolute;
    width: 24px;
    height: 46px;
    cursor: pointer;
}
.bet-versus-slider-prev-btn.hide, .bet-versus-slider-next-btn.hide {
    display: none;
}
.bet-versus-slider-prev-btn {
    left: 0;
}
.bet-versus-slider-next-btn {
    right: 0;
}
.bet-versus-slider-prev-btn::before, .bet-versus-slider-next-btn::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
    color: #ccc;
    transition: 0.3s;
}
.bet-versus-slider-prev-btn::before {
    content: '\f053';
}
.bet-versus-slider-next-btn::before {
    content: '\f054';
}
.bet-versus-slider-frame {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 350px;
    overflow: hidden;
}
.bet-versus-item-full-container {
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: nowrap;
    left: 0;
    transition: 0.3s;
}
.bet-versus-item.on-index, .bet-versus-item.on-index:nth-child(2n), .bet-versus-item.on-index:nth-child(3n), .bet-versus-item.on-index:nth-child(6n) {
    width: calc(100%/3 - 16px);
    margin: 0 8px 20px 8px;
    flex-shrink: 0;
}

/* Game result  section */
.game-result-sec {
    padding-bottom: 0;
}
.game-result-container {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 50px;
    min-height: 700px;
}
.game-result-filter-ul {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 74px;
}
.game-result-filter-list {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    padding: 6px 0;
    margin: 0 40px;
    list-style: none;
    font-size: 14px;
    color: #999;
    cursor: pointer;
}
.game-result-filter-list.current {
    border-bottom: 4px solid #3f90dc;
    color: #3f90dc;
}
.game-result-filter-list:hover {
    color: #3f90dc;
}
.game-result-filter-list::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    display: inline-flex;
    margin-right: 4px;
    font-size: 60px;
}
.game-result-filter-list:nth-child(1):before {
    content: '\f434';
}
.game-result-filter-list:nth-child(2):before {
    content: '\f433';
}
.game-result-filter-list:nth-child(3):before {
    content: '\f1e3';
}
.game-result-filter-list:nth-child(4):before {
    content: '\f111';
    font-weight: 400;
}
.game-result-item-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}
.game-result-item {
    width: calc(50% - 10px);
    position: relative;
    background: #f7f7f7;
}
.game-result-item-info {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
    padding: 0 24px;
}
.game-result-item-info-list {
    color: #ffd80a;
    font-size: 14px;
    list-style: none;
}
.game-result-item-info-time {
    display: inline-flex;
    margin-left: 4px;
    color: #ebebeb;
}
.game-result-team-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.game-result-away-team-block, .game-result-home-team-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    position: relative;
    padding-top: 40px;
}
.game-result-away-team-block.winned::before, .game-result-home-team-block.winned::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    content: '\f2eb';
    color: #ffd80a;
    display: flex;
    position: absolute;
    top: 10px;
}
.game-result-away-team-name, .game-result-home-team-name {
    font-size: 18px;
    color: #222;
    margin-bottom: 10px;
}
.game-result-away-team-score, .game-result-home-team-score {
    font-size: 30px;
    font-weight: bold;
    color: #e05151;
}
.game-result-home-team-score {
    color: #3f90dc;
}
.game-result-score-table-wrap {
    display: flex;
    justify-content: center;
}

/* Hot news section */
.hot-news-container {
    justify-content: center;
}
.hot-news-slider-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 40px;
}
.hot-news-slider-prev-btn, .hot-news-slider-next-btn {
    display: inline-flex;
    position: absolute;
    width: 24px;
    height: 46px;
    cursor: pointer;
}
.hot-news-slider-prev-btn.hide, .hot-news-slider-next-btn.hide {
    display: none;
}
.hot-news-slider-prev-btn {
    left: 0;
}
.hot-news-slider-next-btn {
    right: 0;
}
.hot-news-slider-prev-btn::before, .hot-news-slider-next-btn::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
    color: #ccc;
    transition: 0.3s;
}
.hot-news-slider-prev-btn::before {
    content: '\f053';
}
.hot-news-slider-next-btn::before {
    content: '\f054';
}
.hot-news-slider-prev-btn:hover::before, .hot-news-slider-next-btn:hover::before {
    color: #e05151;
}
.hot-news-slider-frame {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 220px;
    overflow: hidden;
    margin-bottom: 20px;
}
.hot-news-item-full-container {
    width: 100%;
    position: relative;
    white-space: nowrap;
    left: 0;
    display: flex;
    transition: 0.3s;
}
.hot-news-item {
    display: inline-flex;
    flex-shrink: 0;
    width: calc(100%/3 - 16px); /* calc(100% / n - 20px) */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    margin: 0 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    transition: 0.3s;
}
.hot-news-item-image-frame {
    width: 100%;
    padding-bottom: 65%;
    position: relative;
    overflow: hidden;
}
.hot-news-item-image-frame img {
    height: 300px;
    display: block;
    position: absolute;
    object-fit: scale-down;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%,-50%);
    transition: 0.3s;
}
.hot-news-item-info {
    padding: 28px 20px 14px 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0) 100%);
    transition: 0.3s;
}
.hot-news-item-title {
    font-size: 16px;
    color: #ebebeb;
    transition: 0.3s;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-news-item-date {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    margin: 0 10px 12px 0;
}
.hot-news-item-date::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    content: '\f017';
    margin-right: 4px;
    transform: translateY(2px);
}
.hot-news-item-origin {
    font-size: 14px;
    color: #fff;
    display: flex;
}
.hot-news-item:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.hot-news-item:hover .hot-news-item-info {
    background: linear-gradient(0deg, rgba(5,71,106,1) 0%, rgba(0,105,173,0.5) 80%, rgba(0,105,173,0.2) 90%, rgba(0,0,0,0) 100%);;
}
.hot-news-item:hover .hot-news-item-image-frame img {
    transform: scale(1.1) translate(-50%,-50%);
}
.hot-news-item:hover .hot-news-item-title {
    color: #fff;
}

/* Formal question section */
.novice-wrap, .faq-wrap {
    width: calc(50% - 10px);
    position: relative;
    overflow: hidden;
}
.novice-wrap::before, .faq-wrap::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}
.novice-wrap img, .faq-wrap img {
    width: 100%;
    display: block;
    transform: scale(1);
    transition: 0.3s;
}
.novice-wrap:hover img, .faq-wrap:hover img {
    transform: scale(1.2);
}
.in-faq {
    color: #fff;
    position: absolute;
    top: 40%;
    z-index: 3;
}
.faq-btn {
    color: #fff;
    background: rgba(255,255,255,0);
    border: 1px solid #fff;
    font-size: 18px;
    width: 180px;
    height: 40px;
    position: absolute;
    z-index: 3;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.3s;
}
.faq-btn:hover {
    color: #222;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.6);
}

/* Novice guide area */
.novice-guide-area {
    min-height: 400px;
    display: flex;
    align-items: center;
    background-image: url(../_images/novice_guide_bg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    position: relative;
}
.novice-guide-area::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.in-nga {
    color: #fff;
    text-shadow: 0 0 5px #000;
}
.nga-ul {
    width: 100%;
    display: flex;
    justify-content: center;
}
.nga-list {
    font-size: 18px;
    list-style: none;
    display: flex;
    padding: 6px 20px;
}
.nga-link {
    color: #ebebeb;
    text-shadow: 0 0 10px #000;
    transition: 0.3s;
}
.nga-link:hover {
    color: #ffd80a;
}

/* AD banner section */
.ad-bnr-container {
    flex-direction: column;
    align-items: center;
}
.banner-wide-wrap {
    width: 970px;
    height: 90px;
    background: #ccc;
    margin-bottom: 35px;
}
.banner-sub-wrap {
    display: flex;
    justify-content: space-between;
    width: 970px;
}
.banner-sub-item {
    width: 300px;
    height: 250px;
    background: #ccc;
}

/* Marquee */
.mrq-area {
    margin-bottom: 14px;
}
.mrq-info {
    position: relative;
    height: 42px;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
}
.mrq-ul {
    width: 100%;
    position: absolute;
    top: 0;
    transition: 0.3s;
}
.mrq-list {
    list-style: none;
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #e05151;
}
.mrq-panel {
    position: absolute;
    top: 0;
    right: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    z-index: 5;
}
.mrq-prev-btn, .mrq-next-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 32px;
    height: 20px;
    cursor: pointer;
}
.mrq-prev-btn::before, .mrq-next-btn::before {
    font-family: 'Font Awesome 5 Free';
    color: #ccc;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    transition: 0.3s;
}
.mrq-prev-btn::before {
    content: '\f0d8';
}
.mrq-next-btn::before {
    content: '\f0d7';
}
.mrq-prev-btn:hover::before, .mrq-next-btn:hover::before {
    color: #e05151;
}

/* Crumb path */
.crumb-area {
    margin: 15px 0;
}
.crumb {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    position: relative;
}
.crumb-ul {
    position: relative;
    display: flex;
}
.crumb-list {
    list-style: none;
    font-size: 14px;
    margin-right: 42px;
    position: relative;
    display: flex;
    align-items: center;
}
.crumb-list::before {
    display: block;
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    content: '\f054';
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    top: 50%;
    right: -24px;
    color: #9b9b9b;
    transform: translateY(-50%);
}
.crumb-list:last-child::before {
    display: none;
}
.crumb-link {
    display: block;
    text-decoration: none;
    color: #9b9b9b;
    transition: 0.3s;
}
.crumb-link:hover {
    color: #e05151;
}

/* Footer */
.footer-area {
    position: relative;
    padding: 50px 0;
}
.footer_grid:nth-child(1) {
    width: 45%;
    padding-right: 82px;
}
.footer_grid:nth-child(2) {
    width: 35%;
    padding-top: 61px;
    display: flex;
}
.footer_grid:nth-child(3) {
    width: 20%;
    padding-top: 61px;
}
.footer-line-at-frame {
    width: 80px;
    position: relative;
}
.footer-line-at-frame a {
    display: block;
    font-size: 14px;
    color: #e1e1e1;
    white-space: nowrap;
    transition: 0.3s;
}
.footer-line-at-frame a:hover {
    color: #ffd80a;
}
.footer-line-at-frame a img {
    display: block;
    max-width: 100%;
    margin-bottom: 6px;
}
.footer-logo {
    display: flex;
    align-items: flex-end;
    margin-bottom: 15px;
}
.ft-logo-title {
    font-weight: normal;
}
.footer-txt {
    margin-bottom: 20px;
}
.footer-link {
    display: block;
    color: #e1e1e1;
    font-size: 14px;
    text-decoration: none;
    float: left;
    margin-right: 24px;
    transition: 0.3s;
}
.footer-link:hover {
    color: #ffd80a;
}
.footer-alert-paragraph {
    margin: 0 30px 0 80px;
}
.footer-alert-ico {
    display: block;
    position: relative;
}
.footer-alert-ico::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f071';
    display: block;
    color: #666666;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    position: absolute;
    top: 10px;
    left: -20px;
}
.footer-alert-ico svg {
    transform: scale(5) translate(0, 68%);
    color: #666;
}
.footer-alert-title {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    margin-bottom: 4px;
}
.footer-alert-li {
    list-style: none;
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}
.m-quick-link-area {
    display: none;
}
.copyright-area {
    font-size: 12px;
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

/* Form */
.member-form-container {
    padding: 12px 0;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.member-register-form {
    width: 100%;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
}
.member-welcome-form {
    width: 100%;
    border-bottom: 1px solid #ebebeb;
}
.form-item-wrap-type01 {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.form-item-wrap-type02 {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.form-label-type01 {
    font-size: 18px;
    color: #666666;
    margin-right: 10px;
} 
.form-label-type02 {
    font-size: 18px;
    color: #666666;
    width: 100%;
    margin-bottom: 4px;
} 
.form-item-wrap-type02 > #referrer {
    color: #e05151;
}
.input-error-txt {
    position: absolute;
    font-size: 12px;
    color: #e05151;
    right: 0;
    bottom: -16px;
    visibility: hidden;
}
.input-error-txt.active {
    visibility: visible;
}
.show-pwd-btn, .show-pwd-btn-for-basic-info {
    width: 14px;
    height: 14px;
    display: flex;
    position: absolute;
    right: 14px;
    bottom: 12px;
    cursor: pointer;
}
.show-pwd-btn-for-basic-info {
    right: 60%;
}
.show-pwd-btn::before, .show-pwd-btn-for-basic-info::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f06e';
    display: block;
    color: #666666;
    font-style: normal;
    font-weight: 400;
} 
.show-pwd-btn.clicked::before, .show-pwd-btn-for-basic-info.clicked::before {
    content: '\f070';
}
.form-label-note {
    font-size: 12px;
    color: #666;
    display: block;
    width: 100%;
    margin-bottom: 8px;
}
input[name='account'] {
    -moz-appearance: textfield;
}
input[name='account']::-webkit-inner-spin-button {
    display: none;
}
input[name='account']::-webkit-outer-spin-button,
input[name='account']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-input-s {
    width: 52.5%;
    height: 36px;
    border: 1px solid #ccc;
    color: #222;
    border-radius: 4px;
    line-height: 36px;
    padding: 0 10px;
    flex-grow: 1;
}
.form-input-m {
    width: 100%;
    height: 36px;
    border: 1px solid #ccc;
    color: #222;
    border-radius: 4px;
    line-height: 36px;
    padding: 0 10px;
}
.login-btn {
    width: 100%;
    height: 36px;
    background: #3f90dc;
    color: rgba(255,255,255,0.7);
    box-shadow: 0 2px 3px rgba(63,144,220,0.3),
                inset 1px 1px 4px rgba(0,0,0,0);
    margin: 40px 0 10px 0;
    cursor: pointer;
    transition: 0.3s;
}
.login-btn:hover {
    background: #3f90dc;
    box-shadow: 0 2px 3px rgba(63,144,220,0),
                inset 1px 1px 4px rgba(0,0,0,0.5);
    color: #fff;
}
.forget-info-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 34px 0;
}
.forget-info-link {
    display: block;
    width: 50%;
    position: relative;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    color: #3f90dc;
    margin: 0 16px;
    transition: 0.3s;
}
.forget-info-link::before {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    content: '\f054';
    margin-right: 4px;
}
.forget-info-link:hover {
    color: #e05151;
}
.separate-line {
    display: block;
    width: 1px;
    height: 28px;
    background: #3f90dc;
}
.for-oldmember-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 46px;
}
.form-final-btn {
    width: 100%;
    height: 36px;
    color: rgba(255,255,255,0.7);
    margin: 20px auto 0 auto;
    cursor: pointer;
    background: #e05151;
    box-shadow: 0 2px 3px rgba(224,81,81,0.3),
                inset 1px 1px 4px rgba(0,0,0,0);
    transition: 0.3s;
}
.form-final-btn:hover {
    color: #fff;
    box-shadow: 0 2px 3px rgba(224,81,81,0.3),
                inset 1px 1px 4px rgba(0,0,0,0.5);
}
.agree-btn {
    display: block;
    width: 100%;
    padding: 6px 8px 6px 28px;
    margin-bottom: 34px;
    font-size: 12px;
    color: #999;
    background: #ebebeb;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}
.agree-btn::before {
    display: inline-flex;
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    content: '\f0c8';
    margin-right: 8px;
    font-size: 14px;
    transform: translateY(3px);
    top: 6px;
    left: 8px;
}
.agree-btn a {
    display: inline-block;
    margin: 0 2px;
    color: #3f90dc;
    text-decoration: underline;
    transition: 0.3s;
}
.agree-btn.checked {
    color: #fff;
    background: #999;
}
.agree-btn.checked::before {
    content: '\f14a';
}
.agree-btn.checked a {
    color: #ffd80a;
}
.member-forget-form {
    width: 100%;
    min-height: 500px;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
}
.member-forget-form .form-final-btn {
    margin-top: 60px;
}
.edit-data-module {
    display: flex;
    align-items: center;
}
.edit-input {
    display: none;
}
.dissmiss-edit-data-module {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #ebebeb;
    box-shadow: 0 0 5px rgba(0,0,0,0);
    cursor: pointer;
    transition: 0.3s;
}
.dissmiss-edit-data-module::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Free';
    content: '\f00d';
    color: #666;
    position: relative;
    top: 1px;
    font-weight: 900;
}
.dissmiss-edit-data-module:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.edit-data-module.active .dissmiss-edit-data-module {
    display: inline-flex;
}
.edit-data-module.active .edit-input {
    display: inline-flex;
}
.edit-data-module.active .account-basic-edit-btn {
    display: none;
}

/* SMS verify */
.sms-verify-container {
    padding: 12px 0;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.sending-sms-ico {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sending-sms-ico::before {
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    content: '\f7cd';
    color: #ebebeb;
    font-size: 120px;
}
.sms-animation-dot {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ebebeb;
    transition: 0.3s;
    margin: 0 10px;
}
.sms-animation-dot:nth-child(1) {
    animation: smsSending 0.3s ease 0s infinite alternate none;
}
.sms-animation-dot:nth-child(2) {
    animation: smsSending 0.3s ease 0.5s infinite alternate none;
}
.sms-animation-dot:nth-child(3) {
    animation: smsSending 0.3s ease 0.1s infinite alternate none;
}
.hint-msg {
    font-weight: normal;
    text-align: center;
    margin: 30px 0 12px 0;
}
.sms-target-phone {
    font-weight: normal;
    text-align: center;
    margin-bottom: 40px;
}
.verify-sms-form {
    margin-bottom: 34px;
}
.sms-form-title {
    text-align: center;
    font-weight: normal;
    margin-bottom: 15px;
}
.verify-code-set {
    display: flex;
    width: 100%;
    justify-content: center;
}
.verify-code-set-2 {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
    align-items: center;
}
.verify-code-input {
    display: inline-flex;
    width: 42px;
    height: 42px;
    margin: 0 6px;
    border: 1px solid #3f90dc;
    justify-content: center;
    font-size: 24px;
    color: #666;
}
.verify-code-input-2 {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border: 1px solid #3f90dc;
    justify-content: center;
    font-size: 24px;
    color: #666;
    margin-right: 10px;
}
.verify-sms-notetxt {
    font-size: 14px;
    margin: 0 17.6%;
    color: #999; 
    text-align: center;
}
.verify-sms-notetxt-2 {
    font-size: 14px;
    color: #999; 
    width: 60%;
}
.sms-countdown {
    color: #3f90dc;
    padding: 0 4px;
}
.sms-resend {
    color: #e05151;
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
}
.deny-msg {
    color: #e05151;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    width: 100%;
    margin-top: 44px;
    visibility: hidden;
}
.deny-msg.active, .deny-msg-login.active {
    visibility: visible;
}
.deny-msg-login {
    color: #e05151;
    font-size: 20px;
    font-weight: normal;
    width: 100%;
    margin: 30px 0;
    text-align: center;
    visibility: hidden;
}

/* Account info */
.account-info-side-wrap {
    width: calc(100%/12 * 3 - 10px);
    padding-right: 90px;
    position: relative;
}
.acc-side-panel-ul {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}
.acc-side-panel-list {
    list-style: none;
}
.acc-side-panel-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    font-size: 18px;
    color: #999;
    text-decoration: none;
    background: #ebebeb;
    padding-left: 18px;
    margin-bottom: 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    transition: 0.3s;
}
.acc-side-panel-link:hover, .acc-side-panel-link.current {
    color: #fff;
    background: #3f90dc;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.account-info-main-wrap {
    width: calc(100%/12 * 9 - 10px);
    position: relative;
}
.account-data-sec {
    width: 100%;
    position: relative;
    display: flex;
    background: #fcfcfc;
    padding: 16px;
    margin-bottom: 42px;
}
.acc-data-sec-left {
    width: 26.25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.acc-data-sec-right {
    width: 73.75%;
}
.account-photo {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}
.edit-photo-btn {
    display: flex;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
}
.edit-photo-btn::before {
    display: block;
    font-family: 'Font Awesome 5 Free';
    content: '\f303';
    color: #999;
    font-style: normal;
    font-weight: 900;
    transition: 0.3s;
    transform: rotate(90deg);
}
.edit-photo-btn:hover::before {
    color: #e05151;
}
.account-photo-frame {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.account-photo-frame img {
    width: 100%;
    display: block;
}
.nickname {
    font-weight: normal;
    font-size: 16px;
    color: #222;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}
.realname {
    font-weight: normal;
    font-size: 14px;
    color: #999;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
}
.account-primary {
    border-bottom: 1px solid #ebebeb;
    display: flex;
    padding-bottom: 20px;
    position: relative;
}
.account-money-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.account-data-item-m {
    position: relative;
}
.account-data-item-m::before {
    display: block;
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    font-size: 16px;
    color: #3f90dc;
    top: 2px;
    left: 0;
}
.account-data-item-m:nth-child(1) {
    width: 50%;
    margin-bottom: 20px;
}
.account-data-item-m:nth-child(1)::before {
    content: '\f555';
    font-style: normal;
    font-weight: 900;
}
.account-data-item-m:nth-child(2), .account-data-item-m:nth-child(3) {
    width: 50%;
}
.account-data-item-m:nth-child(2)::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f657';
    font-style: normal;
    font-weight: 300;
}
.account-data-item-m:nth-child(3)::before {
    content: '\f51e';
    font-style: normal;
    font-weight: 900;
}
.account-get-bonus {
    display: inline-block;
    font-size: 14px;
    color: rgba(255, 255, 255);
    background: #e05151;
    padding: 4px 10px;
    margin: 0 0 0 8px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0);
    transform: translateY(-4px);
    transition: 0.3s;
}
.account-get-bonus:hover {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
    color: #fff;
}
.account-data-item-s {
    position: relative;
    padding-left: 64px;
    margin-bottom: 20px;
    width: 100%;
}
.account-data-item-s:nth-child(1) {
    display: none;
}
.account-data-item-s::before {
    display: block;
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    color: #999;
    opacity: 0.5;
    top: 2px;
    left: 0;
}
.account-data-item-s:nth-child(1)::before {
    content: '\f521';
}
.account-data-item-s:nth-child(2)::before {
    content: '\f080';
}
.account-data-item-s:nth-child(3)::before {
    content: '\f201';
}
.account-data-name {
    font-weight: normal;
    font-size: 14px;
    color: #3f90dc;
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 24px;
}
.account-data-name::before, .account-data-name::after {
    display: inline-block;
    content: '';
    width: 3px;
    height: 1px;
    background: #3f90dc;
}
.account-data-name::before {
    margin-right: 4px;
}
.account-data-name::after {
    margin-left: 4px;
}
.account-data-name-2 {
    font-weight: normal;
    font-size: 12px;
    color: #3f90dc;
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 28px;
}
.account-data-money {
    font-weight: normal;
    font-size: 48px;
    color: #222;
    position: relative;
}
.account-data-money::before {
    display: inline-block;
    content: '$';
    color: #999;
    font-size: 12px;
    margin-right: 8px;
}
.account-data-gift-point {
    font-weight: normal;
    font-size: 48px;
    color: #222;
    position: relative;
}
.account-data-gift-point::before {
    display: inline-block;
    content: 'P';
    color: #999;
    font-size: 12px;
    margin-right: 8px;
}
.account-rank-wrap {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 44%;
    position: relative;
}
.account-data-rank {
    font-weight: normal;
    font-size: 24px;
    color: #222;
}
.account-data-null {
    font-size: 12px;
    color: #222;
}
.account-secondary {
    display: flex;
    padding: 18px 0 0 0;
    position: relative;
}
.account-invite-code {
    font-weight: normal;
    font-size: 18px;
    color: #e05151;
    margin-right: 26px;
}
.invite-code-panel {
    display: flex;
    flex-wrap: wrap;
}
.invite-ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #999;
    cursor: pointer;
    margin-right: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0);
    transition: 0.2s;
}
.invite-ico::before {
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    position: absolute;
    font-size: 16px;
    color: #fff;
}
.invite-ico:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.invite-ico.invite-to-line {
    background: #3ACE01;
}
.invite-ico.invite-to-fb {
    background: #4267b2;
}
.invite-ico.invite-to-qrcode {
    background: #e05151;
}
.invite-ico.invite-copy {
    background: #3f90dc;
}
.invite-ico.invite-to-line::before {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    content: '\f3c0';
}
.invite-ico.invite-to-fb::before {
    font-family: 'Font Awesome 5 Brands';
    font-weight: 400;
    content: '\f39e';
}
.invite-ico.invite-to-qrcode::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\f029';
}
.invite-ico.invite-copy::before {
    content: '\f0c5';
}
.go-recommend-bonus {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #222;
    color: #ffd80a;
    padding: 6px 12px;
    margin-right: 10px;
    border-radius: 8px;
    font-size: 12px;
}
.invite-line-at-btn {
    display: flex;
    justify-content: center;
    font-size: 12px;
    line-height: 24px;
    color: #fff;
    background: #3ACE01;
    width: 98px;
    height: 28px;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0);
    transition: 0.3s;
}
.invite-line-at-btn:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Account Basic */
.account-basic-sec {
    padding-bottom: 42px;
    margin-bottom: 42px;
    border-bottom: 1px solid #ebebeb;
}
.account-basic-sec-title {
    font-weight: normal;
    font-size: 24px;
    color: #222;
    margin-bottom: 40px;
}
.account-basic-item {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
}
.account-info-extend {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #e05151;
    cursor: pointer;
    background: #f8f8f8;
    padding: 4px 0;
    border-radius: 8px;
    transition: 0.3s;
}
.account-info-extend::after {
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    content: '\f0dd';
    transition: 0.3s;
}
.change-pwd {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
}
.account-basic-item.change-pwd.active {
    max-height: 400px;
}
.account-basic-label {
    font-size: 18px;
    color: #3f90dc;
    width: 36.5%;
    height: 40px;
    padding-left: 18px;
    border-left: 5px solid #3f90dc;
    display: inline-flex;
    align-items: center;
    position: relative;
}
.account-basic-note {
    display: flex;
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: -8px;
}
.account-basic-column-note {
    display: flex;
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: -18px;
}
.info-note {
    display: flex;
    font-size: 12px;
    color: #999;
    width: 52%;
    margin-bottom: 36px;
}
.note-star {
    color: #e05151;
    display: inline-block;
    margin-right: 4px;
}
.account-basic-radio-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
}
.account-basic-radio-wrap label {
    font-size: 14px;
    color: #999;
    margin-left: 6px;
}
.account-basic-column {
    width: 63.5%;
    display: inline-flex;
    position: relative;
    align-items: center;
}
.account-basic-column-2 {
    width: 63.5%;
    display: flex;
    position: relative;
    flex-direction: column;
}
.account-basic-only-read {
    font-weight: normal;
    font-size: 18px;
    color: #999;
    display: flex;
    align-items: center;
    margin-right: 14px;
}
.account-basic-edit-btn {
    display: inline-flex;
    justify-content: center;
    font-size: 12px;
    color: #999;
    width: 64px;
    height: 24px;
    line-height: 22px;
    background: #ebebeb;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    transition: 0.3s;
}
.account-basic-edit-btn:hover {
    color: #fff;
    background: #e05151;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.drop-down-menu {
    width: 80px;
    height: 30px;
    text-align: center;
    border: 0;
    border-bottom: 1px solid #707070;
    position: relative;
    margin-right: 20px;
}
.edit-basic-btn {
    width: 28.54%;
    height: 36px;
    background: #3f90dc;
    color: rgba(255,255,255,0.7);
    box-shadow: 0 2px 3px rgba(63,144,220,0.3), 
                inset 1px 1px 4px rgba(0,0,0,0);
    margin: 40px auto 0 auto;
    cursor: pointer;
    transition: 0.3s;
}
.edit-basic-btn:hover {
    color: #fff;
    box-shadow: 0 2px 3px rgba(63,144,220,0), 
                inset 1px 1px 4px rgba(0,0,0,0.5);
}
.form-input-basic-s {
    width: 42.5%;
    height: 36px;
    border: 1px solid #ccc;
    color: #222;
    border-radius: 4px;
    line-height: 36px;
    padding: 0 10px;
    margin-right: 12px;
}
.form-input-basic-m {
    width: 300px;
    height: 36px;
    border: 1px solid #ccc;
    color: #222;
    border-radius: 4px;
    line-height: 36px;
    padding: 0 10px;
    margin-right: 12px;
}
.change-verify-form {
    width: 100%;
}
.upload-item-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.license-box {
    display: flex;
    width: 240px;
    height: 140px;
    padding: 8px;
    font-size: 14px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    margin-right: 26px;
    border: 1px solid #ccc;
}
.license-box.verified {
    background: #3f90dc;
}
.license-blank {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 1px dashed #999;
    color: #999;
    box-shadow: 0 0 10px rgba(0,0,0,0.0);
    transition: 0.3s;
}
.license-blank.verifying, .bank-acc-blank.verifying,
.license-blank.verifying:hover, .bank-acc-blank.verifying:hover {
    border: 1px solid #ebebeb;
    cursor: unset;
}
.license-blank.verifying::before, .bank-acc-blank.verifying::before {
    display: none;
}
.license-verify-status {
    font-size: 16px;
    margin-bottom: 12px;
}
.license-verify-status.verify-failed {
    color: #e05151;
}
.license-verify-status.verifying {
    color: #3f90dc;
}
.license-verify-status-msg {
    color: #999;
    font-size: 14px;
}
.license-verify-status-msg.completed {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.license-verify-btn {
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
}
.bank-acc-box {
    display: flex;
    width: 240px;
    height: 140px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin: 0 26px 26px 0;
}
.bank-acc-blank {
    cursor: pointer;
    border: 1px dashed #999;
    color: #999;
    box-shadow: 0 0 10px rgba(0,0,0,0.0);
    transition: 0.3s;
}
.bank-acc-blank::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0fe';
    display: block;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 10px;
}
.bank-acc-verify-status {
    position: absolute;
    display: block;
    padding: 4px;
    top: 0;
    right: 0;
    color: #fff;
}
.bank-acc-verify-status.verifying {
    background: #3f90dc;
}
.bank-acc-verify-status.verify-failed {
    background: #e05151;
}
.license-blank:hover, .bank-acc-blank:hover {
    color: #3f90dc;
    border: 1px dashed #3f90dc;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.bank-acc-blank img {
    width: 100%;
    height: auto;
    display: block;
}
.bank-acc-true {
    background: #fff;
    border: 1px solid #707070;
    align-items: flex-start;
    padding-left: 10px;
    font-size: 16px;
    color: #666;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    transition: 0.3s;
}
.bank-acc-true:hover {
    background: #3f90dc;
    color: #fff;
    border: 1px solid #3f90dc;
}
.bank-acc-true.chosen {
    background: #3f90dc;
    color: #fff;
    border: 1px solid #3f90dc;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.bank-acc-true.chosen::after {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    content: '\f00c';
    color: #fff;
    position: absolute;
    transform: scale(4);
    right: 30px;
    bottom: 20px;
    opacity: 0.4;
}
.bank-acc-info {
    font-size: 14px;
    margin-bottom: 10px;
}
.blank-info-setting-frame {
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%,-50%);
    display: none;
}
.blank-info-setting-frame.active {
    display: flex;
    justify-content: center;
    align-items: center;
}
.blank-info-setting-wrap {
    width: 400px;
    padding: 15px 25px;
    border-radius: 10px;
    position: relative;
    display: flex;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
.id-basic-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}
.id-basic-column {
    display: flex;
    flex-direction: column;
    width: 50%;
}
.id-drop-down-menu {
    width: auto;
    height: 30px;
    border: 0;
    border-bottom: 1px solid #707070;
    position: relative;
    margin-right: 20px;
}
.id-basic-label {
    width: 50%;
    display: inline-flex;
    margin-bottom: 10px;
    padding-left: 6px;
    color: #3f90dc;
    border-left: 3px solid #3f90dc;
    position: relative;
}
.id-basic-label.must-fill::after {
    display: inline-block;
    content: '*';
    color: #e05151;
    margin-left: 2px;
}
.form-notice-msg {
    font-size: 12px;
    color: #666;
    text-align: right;
    width: 100%;
    position: absolute;
    right: 18px;
}
.form-notice-msg > span {
    display: inline-block;
    color: #e05151;
    margin: 0 2px;
}
.id-basic-note {
    display: flex;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}
.id-input-basic {
    height: 36px;
    border: 1px solid #ccc;
    color: #222;
    border-radius: 4px;
    line-height: 36px;
    padding: 0 10px;
    margin-right: 12px;
}
.upload-btn {
    display: inline-flex;
    padding: 6px 10px;
    justify-content: center;
    align-items: center;
    background: #ebebeb;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}
.upload-btn:hover {
    background: #3f90dc;
    color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.uploaded-image-preview {
    width: 200px;
    position: relative;
    display: none;
}
.uploaded-image-preview.active {
    display: block;
}
.uploaded-image-preview img {
    width: 100%;
    height: auto;
}
.condition-true, .condition-none {
    display: none;
}
.condition-none.active {
    display: block;
}
.condition-true.step-active {
    display: block;
    margin-bottom: 20px;
}
.add-money-info-wrap {
    display: inline-flex;
    flex-direction: column;
    padding: 10px 16px;
    background: #f8f8f8;
    position: relative;
    margin: 0 20px 30px 0;
}
.add-money-info {
    color: #666;
    font-size: 16px;
}
.add-money-value {
    color: #e05151;
}
.add-money-time {
    font-size: 12px;
    color: #999;
    margin-top: 16px;
}
.add-money-notice {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}
.delete-money-request-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 1;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    position: absolute;
    top: -15px;
    right: -15px;
    cursor: pointer;
}
.delete-money-request-btn::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    content: '\f00d';
    font-size: 18px;
    color: #e05151;
    transform: rotate(0) translate(0px, 1px);
    transition: 0.3s;
}
.delete-money-request-btn:hover::before {
    transform: rotate(90deg) translate(0px, 1px);
}
.withdraw-money-mount {
    color: #666;
    font-size: 16px;
    margin-top: 16px;
}
.withdraw-money-number {
    color: #e05151;
}
.check-btn-set {
    position: relative;
    width: 75%;
    display: flex;
    flex-wrap: wrap;
}
.checkbtn-s, .checkbtn-m, .checkbtn-l {
    display: inline-flex;
    padding-left: 18px;
    margin: 0 12px 12px 0;
    background: #ebebeb;
    color: #999;
    position: relative;
    font-size: 14px;
    border-radius: 19px;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    transition: 0.3s;
}
.checkbtn-s {
    width: auto;
    height: 38px;
    padding: 0 18px;
}
.checkbtn-m {
    min-width: 194px;
    min-height: 38px;
}
.checkbtn-l {
    min-width: 400px;
    min-height: 38px;
}
.checkbtn-s::before, .checkbtn-m::before, .checkbtn-l::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0c8';
    display: inline-flex;
    margin-right: 9px;
    position: relative;
    transform: translateY(2px);
}
.checkbtn-s:hover, .checkbtn-m:hover, .checkbtn-l:hover {
    color: #222;
}
.checkbtn-s.checked, .checkbtn-m.checked, .checkbtn-l.checked {
    color: #fff;
    background: #e05151;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.checkbtn-s.checked::before, .checkbtn-m.checked::before, .checkbtn-l.checked::before {
    content: '\f14a';
}

/* Financial */
.financial-panel {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 30px;
}
.financial-list {
    list-style: none;
    display: flex;
    position: relative;
    flex-wrap: wrap;
}
.financial-link {
    color: #888;
    margin: 10px 30px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}
.financial-link::before {
    font-family: 'Font Awesome 5 Free';
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    margin-right: 13px;
    display: inline-flex;    
}
.financial-list:nth-child(1) .financial-link::before {
    content: '\f662';
}
.financial-list:nth-child(2) .financial-link::before {
    content: '\f4c0';
}
.financial-list:nth-child(3) .financial-link::before {
    content: '\f571';
}
.financial-list:nth-child(4) .financial-link::before {
    content: '\f3ff';
}
.financial-link:hover {
    color: #3f90dc;
}
.financial-list.current .financial-link {
    color: #3f90dc;
}
.financial-list.current::after {
    display: block;
    content: '';
    width: 100%;
    height: 2px;
    background: #3f90dc;
}
.financial-tab-set {
    position: relative;
}
.financial-tab-cnt-wrap {
    position: relative;
    display: none;
}
.financial-tab-cnt-wrap.current {
    display: block;
}
.financial-tab-content {
    position: relative;
}
.step-title {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    margin-bottom: 16px;
}
.bank-info {
    margin-bottom: 20px;
}
.bank-name, .bank-code {
    font-size: 14px;
    display: inline-block;
}
.bank-name {
    margin-right: 20px;
}
.bank-acc-code {
    display: block;
    margin-bottom: 18px;
}
.bank-holder {
    font-weight: normal;
}
.money-btn {
    width: 124px;
    height: 36px;
    background: #3f90dc;
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin-top: 28px;
    box-shadow: 0 2px 3px rgba(63,144,220,0.3), 
                inset 1px 1px 4px rgba(0,0,0,0);
    cursor: pointer;
    transition: 0.3s;
}
.money-btn:hover {
    color: #fff;
    box-shadow: 0 2px 3px rgba(63,144,220,0), 
                inset 1px 1px 4px rgba(0,0,0,0.5);
}
.table-switch-wrap {
    width: 100%;
    margin-bottom: 16px;
}
.table-switch-ul {
    position: relative;
    background: #ebebeb;
    display: inline-flex;
    border-radius: 15px;
}
.table-switch-status-btn {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    width: 33%;
    height: 100%;
    background: #35AD79;
    border-radius: 15px;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}
.table-switch-li {
    width: 120px;
    height: 30px;
    color: #ccc;
    border-radius: 15px;
    list-style: none;
    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}
.table-switch-li.current {
    color: #fff;
}

/* Account Table */
.money-details-table {
    width: 100%;
    position: relative;
    display: none;
}
.money-details-table.current {
    width: 100%;
    position: relative;
    display: block;
}
.money-details-table-head {
    display: flex;
    background: #3f90dc;
    padding-left: 15px;
    position: relative;
    width: 100%;
}
.money-details-table-head-col {
    display: inline-flex;
    align-items: center;
    list-style: none;
    font-size: 12px;
    color: #fff;
    height: 32px;
}
.money-details-table-head-col:nth-child(1),
.money-details-table-list:nth-child(1) {
    width: 9.2%;
}
.money-details-table-head-col:nth-child(2),
.money-details-table-list:nth-child(2) {
    width: 18.8%;
}
.money-details-table-head-col:nth-child(3),
.money-details-table-list:nth-child(3) {
    width: 12.45%;
}
.money-details-table-head-col:nth-child(4),
.money-details-table-list:nth-child(4) {
    width: 12.45%;
}
.money-details-table-head-col:nth-child(5),
.money-details-table-list:nth-child(5) {
    width: 16%;
}
.money-details-table-ul {
    display: flex;
    padding-left: 15px;
    position: relative;
    width: 100%;
    background: #ebebeb;
}
.money-details-table-ul:nth-child(even) {
    background: #fff;
}
.money-details-table-list {
    display: inline-flex;
    align-items: center;
    list-style: none;
    font-size: 12px;
    color: #666;
    height: 32px;
}
.table-time {
    display: inline-block;
    margin-left: 10px;
}

/* Coupon */
.red_point_production_item-pack {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.red_point_production_item {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: 0.3s;
}
.red_point_production_item.expired::before {
    display: flex;
    content: '已逾期';
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 80px;
    height: 73px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    right: 20px;
    bottom: 20px;
    z-index: 3;
}
.red_point_production_item:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.red_point_production_item-main {
    display: flex;
    flex-direction: column;
}
.red_point_production_item-image-frame {
    width: 100%;
    padding-bottom: 36.34%;
    position: relative;
    overflow: hidden;
}
.red_point_production_item-image-frame img {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.red_point_production_item-info {
    position: relative;
    width: 100%;
    height: 118px;
    background: #f8f8f8;
    padding: 10px 15px;
}
.red_point_production_item-name {
    font-weight: normal;
    font-size: 14px;
    color: #666;
    width: 75%;
}
.red_point_production_item-price {
    font-weight: normal;
    font-size: 14px;
    color: #999;
    position: absolute;
    bottom: 35px;
}
.red_point_production_item-number {
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    color: #e05151;
}
.red_point_production_item-valid-date {
    font-weight: normal;
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: 10px;
}
.use-red_point_production_item-btn {
    display: flex;
    width: 80px;
    height: 73px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    background: #ff8534;
    position: absolute;
    right: 20px;
    bottom: 20px;
    border: 1px dashed #999;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 10px;
}
.use-red_point_production_item-btn:hover {
    background: #e05151;
    border: 0;
    color: #fff;
    border-radius: 20px;
}

/* Lottery Details Table */
.lottery-details-table {
    width: 100%;
    position: relative;
}
.lottery-details-table-head {
    display: flex;
    background: #3f90dc;
    padding-left: 15px;
    margin-bottom: 5px;
    position: relative;
    width: 100%;
}
.lottery-details-table-head-col {
    display: inline-flex;
    align-items: center;
    list-style: none;
    font-size: 12px;
    color: #fff;
    height: 32px;
    position: relative;
}
.lottery-details-table-head-col::after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 100%;
    background: #fff;
    position: absolute;
    right: 5px;
}
.lottery-details-table-head-col:nth-child(1),
.lottery-details-table-col:nth-child(1) {
    width: 14.93%;
}
.lottery-details-table-head-col:nth-child(2),
.lottery-details-table-col:nth-child(2) {
    width: 7.7%;
}
.lottery-details-table-head-col:nth-child(3),
.lottery-details-table-col:nth-child(3) {
    width: 13.58%;
}
.lottery-details-table-head-col:nth-child(4),
.lottery-details-table-col:nth-child(4) {
    width: 7.81%;
}
.lottery-details-table-head-col:nth-child(5),
.lottery-details-table-col:nth-child(5) {
    width: 8.38%;
}
.lottery-details-table-head-col:nth-child(6),
.lottery-details-table-col:nth-child(6) {
    width: 8.38%;
}
.lottery-details-table-head-col:nth-child(7),
.lottery-details-table-col:nth-child(7) {
    width: 25%;
    position: relative;
}
.lottery-details-table-col:nth-child(7) span {
    display: inline-block;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lottery-details-table-col:nth-child(8) {
    width: 9.2%;
}
.cancel-order-btn, .re-order-btn {
    display: inline-block;
    color: #35AD79;
    text-decoration: underline;
    transition: 0.3s;
}
.cancel-order-btn:hover, .re-order-btn:hover {
    color: #e05151;
}
.lottery-details-table-item-ul {
    display: flex;
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    background: #ebebeb;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    cursor: pointer;
    transition: 0.3s;
}
.lottery-details-table-item-ul:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.lottery-details-table-item-ul::before {
    font-family: 'Font Awesome 5 Free';
    display: inline-flex;
    content: '\f0fe';
    color: #999;
    font-size: 12px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.lottery-details-table-item-ul.current {
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 2;
}
.lottery-details-table-item-ul.current::before {
    content: '\f146';
}
.lottery-details-table-col {
    display: inline-flex;
    align-items: center;
    height: 32px;
    list-style: none;
    font-size: 12px;
    color: #666;
}
.lottery-details-table-col:nth-child(3) span {
    display: inline-block;
}
.lottery-purchased-number {
    margin-right: 3px;
    width: 56px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.copy-lottery-purchased-number {
    position: relative;
    display: inline-flex;
    margin-right: 10px;
}
.copy-lottery-purchased-number::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Free';
    content: '\f0c5';
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    transform: translateY(1px);
    transition: 0.3s;
}
.copy-lottery-purchased-number:hover::before {
    color: #3f90dc;
}
.query-lottery-status {
    display: inline-flex;
    color: #35AD79;
}
.calculate-lottery-money {
    display: inline-flex;
    color: #35AD79;
}
.lottery-order-bill-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
    display: none;
}
.lottery-order-bill-wrapper.current {
    display: block;
}
.lottery-order-bill-wrapper::before {
    display: inline-block;
    content: '';
    width: 17px;
    height: 27px;
    border-bottom: 1px solid #222;
    border-left: 1px solid #222;
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 8px;
}
.lottery-order-bill {
    width: 97.1%;
    position: relative;
    padding: 8px 14px;
    margin: 8px 0 8px 2.9%;
    background: #222;
}
.bill-main-info {
    width: 100%;
    position: relative;
    display: flex;
    padding-bottom: 8px;
    border-bottom: 1px solid #ccc;
}
.bill-main-info-list {
    font-size: 12px;
    color: #999;
    list-style: none;
}
.bill-number, .bill-cost {
    display: inline-flex;
    margin-left: 5px;
}
.bill-main-info-list:nth-child(1) {
    width: 102px;
    border-right: 1px solid #ccc;
}
.bill-main-info-list:nth-child(2) {
    width: 100px;
    padding-left: 12px;
    border-right: 1px solid #ccc;
}
.bill-main-info-list:nth-child(3) {
    padding-left: 12px;
}
.bill-info-header {
    width: 100%;
    display: flex;
    position: relative;
}
.bill-info-header-col {
    font-size: 12px;
    color: #ffd80a;
    list-style: none;
    height: 36px;
    display: inline-flex;
    align-items: center;
}
.bill-info-header-col:nth-child(1),
.bill-betted-result-col:nth-child(1) {
    width: 8%;
}
.bill-info-header-col:nth-child(2),
.bill-betted-result-col:nth-child(2) {
    width: 25%;
}
.bill-info-header-col:nth-child(3),
.bill-betted-result-col:nth-child(3) {
    width: 30%;
}
.bill-info-header-col:nth-child(4),
.bill-betted-result-col:nth-child(4) {
    width: 12%;
}
.bill-info-header-col:nth-child(5),
.bill-betted-result-col:nth-child(5) {
    width: 8%;
}
.bill-info-header-col:nth-child(6),
.bill-betted-result-col:nth-child(6) {
    width: 9%;
}
.bill-info-header-col:nth-child(7),
.bill-betted-result-col:nth-child(7) {
    width: 8%;
}
.bill-betted-result-item {
    width: 100%;
    display: flex;
    position: relative;
    border-bottom: 1px solid #666;
}
.bill-betted-result-col {
    font-size: 12px;
    color: #ebebeb;
    list-style: none;
    height: auto;
    display: inline-flex;
    align-items: flex-start;
    padding: 4px 0;
}
.site-notice-table-wrap {
    width: 100%;
    position: relative;
}
.site-notice-table-head {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding-left: 13px;
    color: #fff;
    font-weight: normal;
    background: #3f90dc;
}
.site-notice-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding-left: 13px;
    font-size: 14px;
    color: #666;
    background: #fff;
}
.site-notice-item:nth-child(odd) {
    background: #ebebeb;
}
.notice-title-property {
    position: relative;
    display: inline-flex;
    width: 11%;
}
.notice-title-property::before, .notice-title-property::after {
    display: inline-flex;
}
.notice-title-property::before {
    content: '【';
}
.notice-title-property::after {
    content: '】';
}
.notice-title-txt {
    width: 64.26%;
    font-weight: normal;
}
.notice-annouced-date, .notice-annouced-time {
    font-weight: lighter;
}
.notice-annouced-date {
    margin-right: 8px;
}

/* Recommand report */
.recommend-report-table-wrap {
    width: 100%;
    position: relative;
} 
.recommend-report-header {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}
.recommend-report-header > img {
    display: none;
    width: 105px;
    height: auto;
    margin-right: 8%;
}
.recommend-report-title {
    font-size: 20px;
    color: #2D394B;
    margin-right: 6%;
}
.recommend-report-date {
    font-size: 16px;
    color: #2D394B;
    font-weight: normal;
}
.recommend-report-download {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 13px;
    font-size: 12px;
    color: #fff;
    background: #e05151;
    width: 75px;
    height: 25px;
    position: absolute;
    right: 0;
}
.recommend-report-cnt {
    padding: 26px 20px;
}
.recommend-report-period {
    font-size: 16px;
    margin-bottom: 14px;
}
.recommend-report-period > span {
    color: #666;
}
.recommend-report-parag {
    font-size: 14px;
    margin-bottom: 50px;
    color: #999;
}
.recommend-report-details-title {
    font-size: 24px;
    color: #2D394B;
    margin-bottom: 20px;
}
.recommend-report-details-table {
    width: 100%;
    position: relative;
}
.rr-table-friends-header, .rr-table-bonus-header {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    background: #35AD79;
    position: relative;
}
.rr-table-friends-column {
    list-style: none;
    font-size: 14px;
    color: #fff;
}
.rr-table-friends-column:nth-child(1), .rr-table-friends-item-column.idx {
    width: 10%;
}
.rr-table-friends-column:nth-child(2), .rr-table-friends-item-column.name {
    width: 55%;
}
.rr-table-friends-item {
    width: 100%;
    display: flex;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.rr-table-friends-item-column {
    list-style: none;
    font-size: 14px;
    color: #666;
}
.table-final-msg {
    font-size: 16px;
    color: #2D394B;
    margin: 16px 0 24px 0;
}
.table-final-msg > span {
    color: #e05151;
}
.rr-table-bonus-column {
    list-style: none;
    font-size: 14px;
    color: #fff;
}
.rr-table-bonus-column:nth-child(1) {
    width: 40%;
}
.recommend-report-parag.notice {
    font-size: 14px;
    margin-bottom: 50px;
    color: #999;
    margin-bottom: 16px;
}
.recommend-report-parag.notice::before {
    display: inline-block;
    content: '*';
    color: #e05151;
    margin-right: 4px;
}
.rr-table-bonus-item {
    width: 100%;
    display: flex;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.rr-table-bonus-item-column {
    list-style: none;
    font-size: 14px;
    color: #666;
}
.rr-table-bonus-item-column.name {
    width: 40%;
}
.rr-table-bonus-item-column.sum {
    color: #e05151;
}
.rr-table-bonus-statistics-wrap {
    background: #ccc;
    padding: 1px 14px 14px 14px;
}
.table-bonus-final-msg {
    font-size: 14px;
    color: #2D394B;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 16px;
    width: 100%;
    display: flex;
    background: rgba(255,255,255,0.7);
}
.table-bonus-final-msg > span {
    display: inline-block;
    color: #e05151;
}
.recommend-report-msg {
    font-size: 16px;
    color: #666;
    margin: 8px 0 8px 14px;
}
.recommend-report-msg.money > span {
    display: inline-block;
    color: #e05151;
    margin-left: 6px;
}
.recommend-report-msg.get-date > span {
    display: inline-block;
    color: #35AD79;
    margin-left: 6px;
}
.recommend-report-regard {
    font-size: 18px;
    color: #222;
    margin: 12px 0 12px 14px;
}
.recommend-report-regard > span {
    font-weight: normal;
    display: inline-block;
    margin-left: 6px;
}

/* recommend bonus */
.bonus-step-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #2D394B;
    padding: 76px 60px 8px 60px;
    margin-bottom: 8px;
    border-radius: 10px;
}
.bonus-step-goal {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    color: rgba(255,255,255,1);
    align-items: center;
    position: absolute;
    opacity: 0.5;
    top: 8px;
}
.bonus-step-goal.step01 {
    left: 60px;
    transform: translate(-50%,12px);
}
.bonus-step-goal.step02 {
    transform: translate(0,12px);
}
.bonus-step-goal.step03 {
    right: 60px;
    transform: translate(50%,12px);
}
.bonus-step-goal.fulfill {
    opacity: 1;
}
.bonus-step-goal span {
    font-size: 12px;
    color: #ffd80a;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bonus-step-goal::after {
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    content: '\f0dd';
    transform: translateY(-4px);
}
.bonus-step-bar {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 2px;
    position: relative;
    margin: 0 0 8px 0;
}
.bonus-step-bar-current {
    display: flex;
    align-items: center;
    position: relative;
    background: #ffd80a;
    width: 0%;
    height: 100%;
    border-radius: 6px;
    transition: 0.4s;
}
.bonus-step-bar-current > i {
    position: absolute;
    right: -12px;
    animation: ballRound 3s linear 0s infinite normal none;
    border-radius: 50%;
    transform-origin: center;
    box-shadow: 0 0 15px rgba(255,255,255,0.3),
                0 0 5px rgba(255,255,255,0.3);
}
.bonus-step-bar-current > i::before {
    font-size: 26px;
    color: #222;
}
.bonus-step-bar-current > i::after {
    font-size: 26px;
    color: #fff;
    opacity: 1;
}
.bonus-step-current-money-wrap {
    width: 100%;
    position: relative;
}
.bonus-step-current-money {
    font-size: 14px;
    color: #ebebeb;
    font-weight: normal;
    position: relative;
    display: inline-flex;
    justify-content: center;
    transform: translateX(-50%);
    left: 0%;
}
.bonus-step-current-money.left {
    transform: translateX(0%);
}
.bonus-step-current-money.right {
    transform: translateX(-100%);
}
.bonus-step-current-money > span {
    color: #ffd80a;
}
.bonus-step-current-money > span::after {
    display: inline-block;
    content: '元';
    margin-left: 2px;
}
.rb-table-query-header {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    background: #35AD79;
    position: relative;
}
.rb-table-query-column {
    list-style: none;
    font-size: 14px;
    color: #fff;
}
.rb-table-query-column.idx, .rb-table-query-item-column.idx {
    width: 15%;
}
.rb-table-query-column.friend, .rb-table-query-item-column.friend {
    width: 40%;
}
.rb-table-query-column.sum-money, .rb-table-query-item-column.sum-money {
    width: 45%;
}
.rb-table-query-item {
    width: 100%;
    display: flex;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.rb-table-query-item-column {
    list-style: none;
    font-size: 14px;
    color: #666;
}
.rb-table-bonus-statistics-wrap {
    padding: 0 0 14px 0;
    width: 100%;
}
.rb-table-hint {
    font-size: 18px;
    margin: 10px 0;
    color: #2D394B;
}
.hint-money {
    display: inline-block;
    color: #e05151;
    margin: 0 4px;
}
.bonus-history-record-wrap {
    width: 100%;
    position: relative;
}
.bonus-history-record-title {
    font-size: 16px;
    margin-bottom: 8px;
}
.bonus-history-record-item {
    width: 100%;
    display: flex;
    border-radius: 10px;
    background: #f8f8f8;
    padding: 8px 14px;
    border: 1px solid #ccc;
    margin-bottom: 4px;
}
.bhr-item-serial {
    display: inline-block;
    font-size: 14px;
    color: #666;
    width: 40%;
    flex-grow: 1;
}
.bhr-item-bonus {
    font-size: 14px;
    color: #666;
    width: 30%;
    flex-grow: 1;
}
.bhr-item-bonus > span {
    color: #e05151;
    font-weight: bold;
}
.bhr-item-bonus > span::before {
    display: inline-block;
    content: '$';
    margin-right: 2px;
}
.bhr-item-details-btn {
    display: inline-block;
    font-size: 12px;
    color: #35AD79;
    text-decoration: underline;
    transition: 0.3s;
}
.bhr-item-details-btn:hover {
    color: #e05151;
}
.bhr-item-download-btn {
    display: inline-block;
    font-size: 12px;
    color: #3f90dc;
    margin-left: 12px;
    text-decoration: underline;
    transition: 0.3s;
}
.bhr-item-download-btn:hover {
    color: #e05151;
}

/* Bet Game Page */
.bet-game-page {
    align-items: flex-start;
}
.bet-game-sec {
    display: flex;
    flex-wrap: wrap;
    width: 63.3333%;
    position: relative;
}
.bet-game-series-switch-panel {
    width: 100%;
    position: relative;
    padding: 8px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}
.mb-cart-call-btn {
    visibility: hidden;
}
.bet-game-series-switch-ul {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.bet-game-series-switch-list {
    display: inline-flex;
    padding: 4px 12px;
    font-size: 24px;
    list-style: none;
    color: #ebebeb;
    background: #2D394B;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0,0,0,0.4);
    transition: 0.3s;
}
.bet-game-series-switch-list:hover, .bet-game-series-switch-list.current {
    color: #fff;
    background: #e05151;
    box-shadow: 0 2px 3px rgba(0,0,0,0), 
                inset 2px 2px 3px rgba(0,0,0,0.1), 
                inset -1px -1px 10px rgba(0,0,0,0.6);
}
.bet-game-series-switch-list:nth-child(1) {
    margin-right: 10px;
}
.game-view-mode {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 8px;
}
.game-view-option {
    list-style: none;
    display: inline-flex;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #ccc;
}
.game-view-option.current, .game-view-option:hover {
    color: #e05151;
}
.game-view-option::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    transition: 0.3s;
}
.game-view-option:nth-child(1) {
    margin-right: 8px;
}
.game-view-option:nth-child(1):before {
    content: '\f03a';
}
.game-view-option:nth-child(2):before {
    content: '\f009';
}
.bet-game-series-wrap {
    position: relative;
    width: 100%;
    display: none;
}
.bet-game-series-wrap.active {
    display: flex;
    flex-wrap: wrap;
}
.live-game-null-block {
    width: 100%;
    display: none;
    border: 1px solid #ebebeb;
    margin-bottom: 30px;
    padding: 20px 0;
}
.live-game-null-block.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 24px;
}
.live-game-null-block-title {
    margin-bottom: 12px;
}
.live-game-null-block-title.on-index {
    font-size: 24px;
    color: #666;
}
.live-game-ready-msg {
    font-size: 14px;
    font-weight: normal;
    color: #999;
    margin-bottom: 16px;
}
.live-game-ready-msg.on-index {
    font-size: 24px;
}
.live-game-ready-hour, .live-game-ready-minute {
    font-size: 24px;
    font-weight: bold;
    color: #e05151;
    display: inline-flex;
    align-items: baseline;
    margin: 0 6px;
}
.live-game-ready-hour.on-index, .live-game-ready-minute.on-index {
    font-size: 48px;
    margin: 0 12px;
}
.live-game-ready-hour::after {
    display: inline-flex;
    content: '小時';
    font-size: 14px;
    font-weight: normal;
    color: #999;
    margin-left: 6px;
}
.live-game-ready-minute::after {
    display: inline-flex;
    content: '分';
    font-size: 14px;
    font-weight: normal;
    color: #999;
    margin-left: 6px;
}
.live-game-ready-hour.on-index::after, .live-game-ready-minute.on-index::after {
    font-size: 24px;
}
.live-game-type-ico {
    display: inline-flex;
    white-space: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    font-size: 14px;
    margin-bottom: 4px;
    color: #3f90dc;
}
.live-game-type-ico::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    content: '\f111';
    font-size: 40px;
}
.live-game-next-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    align-items: center;
}
.live-game-next-wrap.on-index {
    margin-top: 24px;
    margin-bottom: 24px;
}
.live-game-next-serial {
    font-size: 14px;
    color: #e05151;
    margin-bottom: 10px;
}
.live-game-next-serial.on-index {
    font-size: 24px;
}
.live-game-next-info {
    display: inline-flex;
    background: #3f90dc;
    padding: 6px 10px;
    align-items: center;
    border-radius: 8px;
}
.live-game-next-away-team, .live-game-next-home-team {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
}
.live-game-next-versus {
    font-size: 18px;
    font-weight: bold;
    color: #ffd80a;
    margin: 0 8px;
}
.live-game-next-versus::before {
    font-family: 'Font Awesome 5 Brands';
    font-size: 18px;
    font-style: normal;
    content: '\f3ac';
}
.live-game-list-btn {
    font-size: 14px;
    color: #999;
    transition: 0.3s;
}
.live-game-list-btn.on-index {
    font-size: 18px;
}
.live-game-list-btn::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    content: '\f054';
    font-size: 14px;
    margin-right: 4px;
}
.live-game-list-btn.on-index::before {
    font-size: 18px;
}
.live-game-list-btn:hover {
    color: #e05151;
}
.game-item-wrap {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 30px;
}
.game-info-head {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.game-info-head-part-left {
    width: 50%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    position: relative;
    background: #222;
}
.game-info-head-part-left::after {
    display: block;
    content: '';
    width: 30px;
    height: 100%;
    background: #222;
    position: absolute;
    right: -15px;
    transform: skewX(-20deg);
    z-index: 3;
}
.game-info-head h4 {
    font-weight: normal;
}
.game-league {
    width: 45%;
    font-size: 14px;
    color: #ffd80a;
}
.game-serial-number {
    width: 18%;
    font-size: 20px;
    color: #ffd80a;
}
.game-date {
    display: inline-flex;
    width: 35%;
    font-size: 14px;
    color: #ccc;
    justify-content: flex-start;
    align-items: center;
}
.game-day {
    display: inline-flex;
    color: #ccc;
}
.live-game-status {
    font-size: 14px;
    color: #222;
}
.game-item-time {
    font-size: 14px;
    color: #ccc;
    margin-left: 6px;
}
.game-info-head-part-right {
    width: 50%;
    padding: 4 8px;
    display: flex;
    align-items: center;
    position: relative;
    background: #ebebeb;
}
.away-team-name-wrapper, .home-team-name-wrapper {
    width: 48%;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
.away-team-name-wrapper::before, .home-team-name-wrapper::before {
    display: block;
    content: attr(data-hintmsg);
    border-radius: 5px;
    width: 110px;
    padding: 10px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    position: absolute;
    bottom: calc(100% + 16px);
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.away-team-name-wrapper:hover::before, .home-team-name-wrapper:hover::before {
    bottom: calc(100% + 8px);
    opacity: 1;
    visibility: visible;
}
.away-team, .home-team {
    width: 81.11%;
    font-size: 14px;
    color: #666;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    order: 2;
}
.away-team-name-wrapper::after {
    display: inline-flex;
    content: '-客-';
    color: #3f90dc;
    margin-left: 4px;
    font-size: 14px;
    order: 1;
}
.home-team-name-wrapper::after {
    display: inline-flex;
    content: '-主-';
    color: #3f90dc;
    margin-left: 4px;
    font-size: 14px;
    order: 1;
}
.team-name-link {
    color: #222;
    text-decoration: underline;
    transition: 0.2s;
}
.team-name-link:hover {
    color: #e05151;
}
.bet-game-cart-sec {
    position: sticky;
    top: 80px;
    width: 35.83333%;
    height: 85vh;
    overflow-y: scroll;
    padding: 16px 24px;
    margin-top: 40px;
    border: 1px solid #ebebeb;
}
.mb-bet-game-cart-close-btn {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 31px;
    height: 31px;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.mb-bet-game-cart-close-btn::before,
.mb-bet-game-cart-close-btn::after {
    display: block;
    content: '';
    width: 27px;
    height: 1px;
    background: #e05151;
    position: absolute;
}
.mb-bet-game-cart-close-btn::before {
    transform: rotate(-45deg);
}
.mb-bet-game-cart-close-btn::after {
    transform: rotate(45deg);
}
/*.bet-game-cart-sec.sticky {
    position: sticky;
    top: 0;
    width: calc(1200px * 0.3583333);
    right: calc(calc(100% - 1200px) / 2);
}
.bet-game-cart-sec.btm-sticky {
    position: absolute;
    width: calc(1200px * 0.3583333);
    bottom: 50px;
    right: calc(calc(100% - 1200px) / 2);
}*/
.bet-game-cart-sec.unlogin .cart-account-info,
.bet-game-cart-sec.unlogin .cart-submit-btn,
.bet-game-cart-sec.unlogin .bet-cart-notice-wrap {
    display: none;
}
.cart-game-info {
    width: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}
.cart-game-serial-number {
    font-size: 14px;
    color: #666;
}
.cart-game-awayteam-name, 
.cart-game-hometeam-name {
    width: 80px;
    font-size: 14px;
    font-weight: normal;
    color: #666;
    display: flex;
    align-items: flex-start;
}
.cart-game-awayteam-name-wrap,
.cart-game-hometeam-name-wrap {
    display: inline-flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.cart-game-awayteam-name-wrap::after,
.cart-game-hometeam-name-wrap::after {
    display: inline-flex;
    color: #35AD79;
    font-size: 14px;
    margin-left: 4px;
}
.cart-game-awayteam-name-wrap::after {
    content: '客';
}
.cart-game-hometeam-name-wrap::after {
    content: '主';
}
.cart-versus {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #e05151;
}
.cart-versus::before, .cart-versus::after {
    display: inline-flex;
    content: '-';
    transform: translateY(-2px);
}
.live-game-score-board-preview {
    display: flex;
    position: relative;
    width: calc(100% - 16px);
    background: #f8f8f8;
    padding: 6px 10px;
    margin: 8px 0 4px 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*cursor: pointer;*/
    box-shadow: 0 0 5px rgba(0,0,0,0);
}
.live-game-score-table {
    width: 100%;
}
.live-score-versus {
    font-size: 24px;
    color: #e05151;
}
.live-game-status {
    color: #666;
    margin-bottom: 10px;
}
.live-game-score-table-header, .live-score-away-wrap, .live-score-home-wrap {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 10px 6px 70px;
}
.live-game-score-table-header {
    margin-bottom: 6px;
    border-bottom: 1px solid #666;
}
.live-game-score-table-header::before {
    content: '局數';
    font-size: 14px;
    display: inline-flex;
    position: absolute;
    left: 6px;
}
.live-game-score-no, .away-live-score, .home-live-score {
    list-style: none;
    font-size: 14px;
    display: inline-flex;
    justify-content: center;
    min-width: 5%;
}
.live-game-score-no {
    color: #222;
}
.away-live-score {
    color: #e05151;
}
.home-live-score {
    color: #3f90dc;
}
.live-game-score-no:nth-last-child(1), .away-live-score:nth-last-child(1), .home-live-score:nth-last-child(1) {
    width: 50px;
}
.live-score-away-wrap {
    background: #fff;
    margin-bottom: 6px;
}
.live-score-home-wrap {
    background: #ebebeb;
}
.live-score-away-wrap::before, .live-score-home-wrap::before {
    content: '客';
    font-size: 14px;
    display: inline-flex;
    position: absolute;
    left: 6px;
    color: #e05151;
}
.live-score-home-wrap::before {
    content: '主';
    color: #3f90dc;
}
/*.live-game-score-board-preview:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}*/
.game-item-rules-wrap {
    width: 100%;
    position: relative;
    border: 1px solid #ebebeb;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
}
.main-series-rule-sec {
    width: calc(100% - 16px);
    margin-top: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.main-series-rule-title-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}
.main-series-rule-title {
    display: inline-flex;
    font-size: 16px;
    font-weight: normal;
    color: #3f90dc;
    width: 110px;
    height: 30px;
    border-bottom: 3px solid #3f90dc;
}
.bet-rule-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.sub-rule-name {
    padding: 0 8px;
    min-width: 157px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    background: #e05151;
}
.sub-rule-pass {
    width: 26px;
    height: 26px;
    margin: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    color: #ffd80a;
    background: #222;
    border-radius: 4px;
    font-size: 14px;
}
.bet-btn-set-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-grow: 1;
    position: relative;
    width: calc(100% - 130px - 42px);
}
.bet-btn {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 12px;
    padding: 0 8px;
    margin-bottom: 8px;
    width: calc(50% - 4px);
    height: 26px;
    border-radius: 4px;
    background: #f8f8f8;
    cursor: pointer;
    box-shadow: -1px -1px 2px rgba(0,0,0,0.05),
                -2px -2px 2px rgba(0,0,0,0.02),
                1px 1px 2px rgba(0,0,0,0.1),
                2px 2px 4px rgba(0,0,0,0.1),
                inset 1px 1px 3px rgba(0,0,0,0);
    transition: 0.3s;
}
.bet-btn:hover {
    box-shadow: -1px -1px 2px rgba(255,255,255,1),
                -1px -1px 1px rgba(0,0,0,0),
                1px 1px 2px rgba(0,0,0,0),
                2px 2px 4px rgba(0,0,0,0),
                inset 1px 1px 3px rgba(0,0,0,0.2);
    background: #ebebeb;
}
.bet-btn.chosen {
    background: #3f90dc;
    box-shadow: -1px -1px 2px rgba(255,255,255,1),
                -1px -1px 1px rgba(0,0,0,0),
                1px 1px 2px rgba(255,255,255,1),
                2px 2px 4px rgba(0,0,0,0),
                inset 1px 1px 3px rgba(0,0,0,0.5);
}
.bet-btn.chosen .team-prop,
.bet-btn.chosen .bet-condition,
.bet-btn.chosen .bet-odds {
    color: #fff;
}
.bet-btn.disable {
    cursor: not-allowed;
    background: #ebebeb;
    box-shadow: 0 0 5px rgba(0,0,0,0);
    border: 1px solid #ebebeb;
}
.bet-btn.disable .team-prop,
.bet-btn.disable .bet-condition,
.bet-btn.disable .bet-odds {
    color: #999;
}
.team-prop {
    max-width: 75%;
    font-weight: normal;
    margin-right: 4px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bet-condition {
    display: inline-flex;
    color: #666;
}
.bet-odds {
    color: #e05151;
    display: inline-flex;
    position: absolute;
    right: 8px;
}
.game-item-panel {
    display: flex;
    position: absolute;
    align-items: center;
    right: 90px;
    bottom: -20px;
}
.game-item-panel-for-block-mode {
    display: none;
    position: absolute;
    align-items: center;
    right: 90px;
    bottom: -20px;
}
.add-favor-btn, .tv-show-btn {
    display: inline-flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    margin-right: 14px;
}
.add-favor-btn::before {
    display: block;
    content: '\f004';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    transition: 0.3s;
}
.add-favor-btn:hover::before {
    color: #e05151;
}
.add-favor-btn.added::before {
    font-weight: 900;
    color: #e05151;
}
.tv-show-btn::before {
    display: block;
    content: '\f26c';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: 0.3s;
}
.tv-show-btn::after {
    display: block;
    content: attr(data-hintmsg);
    border-radius: 5px;
    width: 110px;
    padding: 10px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    position: absolute;
    bottom: calc(100% + 16px);
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.tv-show-btn:hover::after {
    visibility: visible;
    opacity: 1;
    bottom: calc(100% + 8px);
}
.tv-show-btn:hover::before {
    color: #3f90dc;
}
.game-secret-info, .game-team-info {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    margin-right: 14px;
    text-decoration: none;
    transition: 0.3s;
}
.game-team-info {
    margin-right: 0;
}
.game-secret-info:hover, .game-team-info:hover {
    color: #3f90dc;
}
.more-bet-rules-btn, .mb-more-bet-rules-btn {
    display: inline-flex;
    align-items: center;
    color: #3f90dc;
    font-size: 14px;
    position: absolute;
    right: 0;
    bottom: -20px;
    cursor: pointer;
}
.mb-more-bet-rules-btn {
    display: none;
}
.more-bet-rules-btn::before, .mb-more-bet-rules-btn::before {
    display: inline-flex;
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    transform: translate(0,2px);
    margin-left: 4px;
    animation: getMoreRulesBtn 1s ease 0s infinite alternate none;
}
.more-bet-rules-btn:hover, .mb-more-bet-rules-btn:hover {
    color: #e05151;
}
.normal-game-series-filter-wrap {
    display: flex;
    align-items: center;
    position: sticky;
    top: 80px;
    width: 100%;
    padding: 0 56px;
    margin-bottom: 32px;
    z-index: 102;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.game-series-filter-prev-btn, .game-series-filter-next-btn {
    display: inline-flex;
    position: absolute;
    width: 18px;
    height: 30px;
    color: #ccc;
    cursor: pointer;
    transition: 0.3s;
}
.game-series-filter-prev-btn {
    left: 20px;
}
.game-series-filter-next-btn {
    right: 20px;
}
.game-series-filter-prev-btn.hide {
    visibility: hidden;
}
.game-series-filter-next-btn.hide {
    visibility: hidden;
}
.game-series-filter-prev-btn::before, 
.game-series-filter-next-btn::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    color: #ccc;
    transition: 0.3s;
}
.game-series-filter-prev-btn:hover::before, 
.game-series-filter-next-btn:hover::before {
    color: #e05151;
}
.game-series-filter-prev-btn::before {
    content: '\f053';
}
.game-series-filter-next-btn::before {
    content: '\f054';
}
.normal-game-series-filter-frame {
    display: flex;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.normal-game-series-filter {
    display: flex;
    position: relative;
    width: 100%;
    left: 0;
    transition: 0.3s;
}
.game-series-filter-item {
    display: inline-flex;
    width: calc(100%/5 - 10px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
    list-style: none;
    font-size: 14px;
    color: #9b9b9b;
    position: relative;
    padding-top: 48px;
    margin: 12px 5px;
    cursor: pointer;
    transition: 0.3s;
}
.game-series-filter-item::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    content: '\f111';
    font-size: 40px;
    position: absolute;
    top: 0px;
    line-height: 40px;
}
.game-series-filter-item:hover, .game-series-filter-item.active {
    color: #3f90dc;
}
.normal-game-sub-filter-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sub-filter-item-wrap {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 5px;
    background: #c0e0ff;
    box-shadow: 0 2px 3px rgba(63,144,220,0.3);
}
.sub-filter-item-wrap:nth-child(1) {
    width: calc(50% - 20px);
    height: 40px;
    padding: 0 10px;
}
.sub-filter-item-wrap:nth-child(2) {
    width: 35%;
    display: none;
}
.sub-filter-item-wrap:nth-child(3) {
    width: calc(50% - 20px);
}
.sub-filter-item-title {
    font-size: 18px;
    font-weight: normal;
    color: #3f90dc;
    margin-right: 10px;
    display: none;
}
.sub-filter-item-wrap:nth-child(1) .sub-filter-dropdown {
    flex-grow: 1;
    width: 100%;
    background: transparent;
    color: #3f90dc;
}
.sub-filter-dropdown {
    font-size: 14px;
    color: #999;
    border: 0;
}
.sub-filter-search-input {
    height: 40px;
    color: #3f90dc;
    border-radius: 5px;
    width: 100%;
    border: 0;
    padding: 0 13px;
    background: rgba(255,255,255,0);
}
.sub-filter-search-submit {
    display: inline-flex;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 13px;
    cursor: pointer;
    transition: 0.3s;
}
.sub-filter-search-submit::before {
    display: inline-flex;
    content: '\f002';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    color: #3f90dc;
    transition: 0.3s;
}
.sub-filter-search-submit:hover::before {
    color: #e05151;
}

/* Lightbox */
.lightbox-effect {
    display: none;
}
.lightbox-effect.active {
    position: fixed;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lightbox-frame {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 320px);
    height: 90%;
    padding: 36px 32px;
    background: #fff;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
.lightbox-dismiss-btn, .score-board-dismiss-btn {
    display: flex;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -30px;
    right: -30px;
    color: #fff;
    cursor: pointer;
}
.lightbox-dismiss-btn::before, .score-board-dismiss-btn::before {
    display: inline-flex;
    content: '\f057';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
}
.lightbox-game-item-full-rules-wrap, .lightbox-game-cart-wrap {
    width: calc(50% - 5px);
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}
.lightbox-game-item-full-rules-wrap {
    width: calc(60% - 5px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lightbox-game-item-full-rules-wrap::-webkit-scrollbar {
    width: 0px !important
}
.game-item-wrap-in-lightbox {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox-game-cart-wrap {
    width: calc(40% - 5px);
    padding-right: 10px;
}
.lightbox-game-cart-wrap .cart-member-wrap {
    display: none;
}
.lightbox-game-cart-wrap.unlogin .cart-member-wrap {
    display: block;
}
.lightbox-game-cart-wrap.unlogin .cart-account-info,
.lightbox-game-cart-wrap.unlogin .cart-submit-btn,
.lightbox-game-cart-wrap.unlogin .bet-cart-notice-wrap {
    display: none;
}
/* error popup */
.error-pop-up {
    position: fixed;
    z-index: 1060;
    background: rgba(0,0,0,0);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    transition: 0.1s;
}
.error-pop-up.active {
    display: flex;
    background: rgba(0,0,0,0.8);
}
.pop-up-frame {
    width: 400px;
    height: auto;
    border-radius: 10px;
    padding: 20px;
    background: #fff;
    position: absolute;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.pop-up-title {
    font-size: 24px;
    text-align: center;
    color: #222;
    margin-bottom: 10px;
}
.pop-up-btn {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 8px;
    background: #3f90dc;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}
.pop-up-btn:hover {
    background: #e05151;
}

/* Cart */
.bet-game-cart-item {
    border-bottom: 1px solid #666;
    position: relative;
    margin-bottom: 20px;
}
.cart-game-betted-info {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 8px;
}
.sub-rule-pass.in-cart {
    margin: 0 6px 0 0;
}
.sub-rule-name.in-cart {
    min-width: 104px;
    margin-right: 6px;
}
.bet-btn.in-cart, .bet-btn.in-cart:hover {
    width: auto;
    margin-bottom: 0;
    flex-grow: 1;
    cursor: unset;
    background: #ebebeb;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.game-date.in-cart {
    padding-left: 10px;
    color: #666;
    font-weight: normal;
    width: auto;
}
.game-day.in-cart {
    color: #999;
    margin-left: 4px;
}
.game-item-time-in-cart {
    font-size: 14px;
    color: #666;
    display: inline-flex;
    margin-left: 4px;
}
.delete-cart-item-btn {
    display: flex;
    justify-content: center;
    width: 17px;
    height: 17px;
    color: #666;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}
.delete-cart-item-btn::before {
    display: flex;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    content: '\f2ed';
    transition: 0.3s;
}
.delete-cart-item-btn:hover::before {
    color: #e05151;
}
.cart-member-wrap {
    display: none;
}
.bet-game-cart-sec.unlogin .cart-member-wrap {
    display: block;
}
.cart-account-info {
    padding: 22px 18px;
    margin-bottom: 16px;
    background: #fcfcfc;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
}
.cart-account-photo-frame {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 24px 20px 0;
    border-radius: 50%;
    overflow: hidden;
}
.cart-account-photo-frame img {
    display: block;
    width: 100%;
    height: 100%;
}
.cart-acc-money-info {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
}
.cart-money-item {
    font-size: 16px;
    font-weight: normal;
    color: #222;
    position: relative;
}
.cash-mount {
    position: absolute;
    display: inline-flex;
    color: #e05151;
    left: 90px;
}
.trail-money-mount {
    position: absolute;
    display: inline-flex;
    color: #35AD79;
    left: 90px;
}
.cash-mount::after, .trail-money-mount::after {
    display: inline-block;
    content: '元';
    margin-left: 6px;
    color: #222;
}
.enter-cash-wrap {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
}
.enter-cash-wrap:nth-last-child(1) {
    margin-bottom: 0;
}
.enter-cash, .enter-trail-money {
    min-width: 120px;
    font-size: 18px;
    color: #666;
}
.enter-cash-input, .enter-trail-input {
    display: inline-flex;
    height: 26px;
    min-width: 200px;
    flex-grow: 1;
    border-radius: 4px;
    padding: 0 8px;
}
.enter-cash-input {
    border: 1px solid #3f90dc;
    color: #3f90dc;
}
.enter-trail-input {
    border: 1px solid #35AD79;
    color: #35AD79;
}
.total-bet-money {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    position: relative;
}
.bet-cash-mount {
    font-size: 24px;
    color: #e05151;
    display: inline-flex;
    align-items: baseline;
    position: absolute;
    bottom: -3px;
    left: 120px;
}
.bet-cash-mount::after {
    display: inline-flex;
    content: '元';
    font-size: 14px;
    color: #666;
    margin-left: 4px;
}
.game-pass-check-btn-set {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.bet-bonus-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.bet-bonus-title {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    position: relative;
}
.bet-bonus-mount {
    display: inline-flex;
    font-size: 24px;
    color: #e05151;
    align-items: baseline;
    position: absolute;
    bottom: -3px;
    left: 120px;
}
.bet-bonus-mount::after {
    display: inline-flex;
    content: '元';
    color: #666;
    font-size: 14px;
    margin-left: 4px;
}
.cart-submit-btn {
    height: 40px;
    border: 1px solid #e05151;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.7);
    background: #e05151;
    box-shadow: 0 2px 3px rgba(224,81,81,0.3), 
                inset 1px 1px 4px rgba(0,0,0,0);
    cursor: pointer;
    transition: 0.3s;
}
.cart-submit-btn:hover {
    color: #fff;
    box-shadow: 0 2px 3px rgba(224,81,81,0.3), 
                inset 1px 1px 4px rgba(0,0,0,0.5);
}
.bet-cart-notice-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 20px 18px;
    background: #e05151;
}
.bet-cart-msg:nth-child(1)::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    content: '\f06a';
    color: #ffd80a;
    font-size: 18px;
    margin-right: 4px;
    transform: translateY(2px);
}
.bet-cart-msg:nth-child(1) {
    margin-bottom: 8px;
    color: #ffd80a;
}
.bet-cart-msg {
    display: inline-flex;
    color: #fff;
    font-size: 14px;
}
.for-live-game-notice-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
    padding: 10px 10px;
    background: #e05151;
}
.for-live-game-notice-wrap::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    content: '\f06a';
    color: #fff;
    font-size: 24px;
    margin-right: 12px;
    transform: translateY(4px);
}
.for-live-game-notice-msg {
    display: inline-flex;
    color: #fff;
    font-size: 14px;
}

/* Game item  for block view mode */
.game-item-wrap.block-mode {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
}
.game-item-wrap.block-mode .game-info-head {
    width: 38%;
    height: 300px;
    position: relative;
    padding: 16px 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background: #222;
}
.game-item-wrap.block-mode .game-info-head::after {
    display: block;
    content: '';
    position: absolute;
    top: 0px;
    right: -16px;
    border-top: 16px solid #222;
    border-right: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid transparent;
    z-index: 3;
}
.game-item-wrap.block-mode .game-info-head-part-left {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
}
.game-item-wrap.block-mode .game-item-rules-wrap {
    width: 62%;
}
.game-item-wrap.block-mode .live-game-score-board-preview {
    width: calc(100% - 36px);
    margin: 18px 0;
}
.game-item-wrap.block-mode .game-info-head-part-left::after {
    display: none;
}
.game-item-wrap.block-mode .game-info-head-part-right {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30px;
    background: rgba(0,0,0,0);
}
.game-item-wrap.block-mode .game-league {
    font-size: 18px;
    width: 100%;
    position: relative;
    order: 1;
}
.game-item-wrap.block-mode .game-league::before {
    display: block;
    content: '';
    width: 100px;
    height: 4px;
    background: #3f90dc;
    position: absolute;
    bottom: -10px;
}
.game-item-wrap.block-mode .game-serial-number {
    font-size: 14px;
    color: #999;
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
}
.game-item-wrap.block-mode .game-date {
    font-size: 16px;
    min-width: 120px;
    margin-top: 28px;
    justify-content: flex-start;
    order: 2;
}
.game-item-wrap.block-mode .game-day {
    margin-left: 10px;
}
.game-item-wrap.block-mode .game-item-time {
    font-size: 16px;
}
.game-item-wrap.block-mode .live-game-status {
    font-size: 16px;
}
.game-item-wrap.block-mode .away-team-name-wrapper,
.game-item-wrap.block-mode .home-team-name-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    margin-bottom: 14px;
}
.game-item-wrap.block-mode .away-team-name-wrapper::after,
.game-item-wrap.block-mode .home-team-name-wrapper::after {
    color: #999;
}
.game-item-wrap.block-mode .home-team-name-wrapper {
    margin-bottom: 70px;
}
.game-item-wrap.block-mode .away-team,
.game-item-wrap.block-mode .home-team {
    width: auto;
    font-size: 16px;
    order: 1;
    color: #fff;
}
.game-item-wrap.block-mode .main-series-rule-sec {
    width: calc(100% - 36px);
}
.game-item-wrap.block-mode .bet-rule-wrap {
    flex-wrap: wrap;
}
.game-item-wrap.block-mode .sub-rule-name{
    min-width: unset;
    width: 100%;
    margin-bottom: 8px;
}
.game-item-wrap.block-mode .sub-rule-pass {
    margin: 0 8px 0 0;
}
.game-item-wrap.block-mode .game-item-panel {
    display: none;
}
.game-item-wrap.block-mode .game-item-panel-for-block-mode {
    display: flex;
    right: 0;
    bottom: 0;
    position: relative;
}
.game-item-wrap.block-mode .more-bet-rules-btn {
    right: calc(50% - 36px);
}

/* Game item in cart */
.game-item-wrap-in-lightbox .game-info-head {
    width: 100%;
    height: 253px;
    background: #222;
    position: relative;
    padding: 18px 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}
.game-item-wrap-in-lightbox .game-info-head::after {
    display: block;
    content: '';
    width: 30px;
    height: 30px;
    background: #222;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}
.game-item-wrap-in-lightbox .game-info-head-part-left {
    width: 100%;
    flex-direction: column;
}
.game-item-wrap-in-lightbox .game-info-head-part-left::after {
    display: none;
}
.game-item-wrap-in-lightbox .game-league {
    font-size: 18px;
    color: #ffd80a;
    width: 100%;
    position: relative;
    order: 1;
    margin-bottom: 26px;
}
.game-item-wrap-in-lightbox .game-league::before {
    display: block;
    content: '';
    width: 100px;
    height: 4px;
    background: #3f90dc;
    position: absolute;
    bottom: -10px;
}
.game-item-wrap-in-lightbox .game-serial-number {
    font-size: 14px;
    color: #999;
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
}
.game-item-wrap-in-lightbox .game-serial-number::before {
    display: inline-flex;
    content: '賽事編號：';
}
.game-item-wrap-in-lightbox .game-date {
    font-size: 16px;
    width: 100%;
    color: #ffd80a;
    display: inline-flex;
    justify-content: flex-start;
    order: 2;
}
.game-item-wrap-in-lightbox .game-day {
    margin-left: 10px;
}
.game-item-wrap-in-lightbox .live-game-status {
    font-size: 16px;
    color: #666;
}
.game-item-wrap-in-lightbox .game-info-head-part-right {
    width: 100%;
    flex-direction: column;
    background: rgba(0,0,0,0);
}
.game-item-wrap-in-lightbox .away-team-name-wrapper,
.game-item-wrap-in-lightbox .home-team-name-wrapper {
    width: 100%;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
}
.game-item-wrap-in-lightbox .away-team-name-wrapper::after,
.game-item-wrap-in-lightbox .home-team-name-wrapper::after {
    order: 2;
    color: #999;
    font-size: 16px;
    margin-left: 4px;
}
.game-item-wrap-in-lightbox .home-team-name-wrapper {
    transform: translateY(0);
    margin-top: 12px;
}
.game-item-wrap-in-lightbox .away-team,
.game-item-wrap-in-lightbox .home-team {
    width: auto;
    font-size: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    order: 1;
}

.game-item-wrap-in-lightbox .bet-rule-wrap {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.game-item-wrap-in-lightbox .sub-rule-name{
    width: 100%;
    height: 26px;
    padding: 0 8px;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    background: #e05151;
}
.game-item-wrap-in-lightbox .sub-rule-pass {
    width: 26px;
    height: 26px;
    margin: 0 8px 0 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    color: #ffd80a;
    background: #222;
}
.game-item-wrap-in-lightbox .game-item-panel {
    display: flex;
    align-items: center;
    position: absolute;
    top: -286px;
    right: 12px;
    bottom: unset;
}

/* Block Control */
.extension_10 {
    width: 100%;
}
.extension_4 {
    width: 40%;
}

/* Agreement items */
.agreement-wrap {
    margin: 0 auto 36px auto;
}
.agreement-title {
    font-size: 24px;
    color: #222;
    margin: 0 0 18px 0;
}
.agreement-paragraph {
    font-size: 14px;
    color: #999999;
    position: relative;
    margin: 12px 0 0 0;
}
.agreement-ol {
    padding-left: 48px;
}
.agreement-order-list {
    color: #999;
    font-size: 14px;
    margin: 0 0 12px 0;
}

/* About */
.content-sec.about-intro {
    margin-bottom: 20px;
}
.container.about-block-wrap {
    margin-bottom: 20px;
    overflow-x: hidden;
}
.about-block {
    width: 25%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
    color: #666;
    z-index: 2;
}
.about-block:nth-child(1) {
    animation: bounceInRight 1s ease 0s 1 both;
}
.about-block:nth-child(2) {
    animation: bounceInRight 1s ease 1s 1 both;
}
.about-block:nth-child(3) {
    animation: bounceInRight 1s ease 2s 1 both;
}
.about-block img {
    width: 100%;
    height: auto;
}
.about-block::after {
    width: 100%;
    height: 5px;
    display: block;
    content: '';
    background: #ffd80a;
    position: absolute;
    top: 45%;
    left: 80%;
    transform: translateY(-50%);
    z-index: -1;
}
.about-block:nth-child(3)::after {
    display: none;
}
.about-paragraph {
    font-size: 14px;
    color: #666;
    position: relative;
    margin: 12px 0 0 0;
}
.about-title {
    font-size: 36px;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 20px 0;
}
.map-window {
    height: 500px;
}
.about-info-item {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    font-size: 14px;
}
.about-info-cnt {
    color: #666;
}

/* News List Page */
.news-list-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.news-item {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 32%;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    margin: 0 2% 20px 0;
    transition: 0.3s;
}
.news-item:nth-child(3n) {
    margin: 0 0 20px 0;
}
.news-img-frame {
    width: 100%;
    padding-bottom: 62%;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.news-img-frame img {
    width: 400px;
    height: 300px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    object-fit: cover;
    transition: 0.3s;
}
.news-info {
    width: 100%;
    padding: 40px 25px 12px 25px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-wrap: wrap;
    transition: 0.3s;
}
.news-title {
    font-size: 16px;
    color: #ccc;
    transition: 0.3s;
}
.news-annouced-date {
    display: inline-flex;
    font-weight: normal;
    font-size: 14px;
    color: #efefef;
    align-items: center;
    margin: 0 10px 12px 0;
}
.news-annouced-date::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    content: '\f017';
    font-size: 14px;
    display: inline-flex;
    margin-right: 6px;
    transform: translateY(1px);
}
.news-origin {
    font-weight: normal;
    font-size: 14px;
    color: #efefef;
}
.news-item:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.news-item:hover .news-img-frame img {
    transform: translate(-50%, -50%) scale(1.1);
}
.news-item:hover .news-title {
    color: #fff;
}
.news-item:hover .news-info {
    background: linear-gradient(0deg, rgba(5,71,106,1) 0%, rgba(0,105,173,0.5) 80%, rgba(0,105,173,0.2) 90%, rgba(0,0,0,0) 100%);
}
.news-panel-wrap {
    padding: 10px;
    position: relative;
}
.news-filter-title {
    color: #222;
    font-size: 24px;
    margin-bottom: 20px;
}
.news-filter-btn-set {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ad-for-news-wrap {
    position: relative;
}

/* Game Result Page */
.game-result-filter-title {
    color: #222;
    font-size: 24px;
    margin-bottom: 20px;
}
.game-result-filter-btn-set {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    min-height: 50px;
}
.game-result-date-ul {
    width: 100%;
    background: #3f90dc;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.game-result-date {
    height: 60px;
    position: relative;
    list-style: none;
    font-size: 20px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    opacity: 0.5;
    cursor: pointer;
    transition: 0.3s;
}
.game-result-date::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    content: '\f073';
    font-size: 20px;
    margin-right: 4px;
    transform: translateY(2px);
}
.game-result-date::after {
    display: block;
    content: '';
    background: #fff;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    transition: 0.3s;
}
.game-result-day {
    font-size: 12px;
    display: flex;
}
.game-result-date:hover, .game-result-date.active {
    opacity: 1;
}
.game-result-date.active::after {
    bottom: -9px;
}
.game-result-table-wrap {
    padding: 16px 26px;
    position: relative;
    display: none;
}
.game-result-table-wrap.active {
    display: block;
}
.game-resault-table-set {
    width: 100%;
    position: relative;
    margin-bottom: 45px;
}
.game-result-series {
    font-size: 18;
    color: #ccc;
    font-weight: normal;
    display: flex;
    margin-bottom: 18px;
}
.game-result-series::before {
    display: inline-flex;
    content: '\f111';
    font-family: 'Font Awesome 5 Free';
    font-size: 30px;
    font-weight: 900;
    margin-right: 8px;
}
.game-result-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}
.gr-table-header-block {
    height: 26px;
    display: flex;
    align-items: center;
    position: relative;
}
.gr-table-header-block.gr-gameinfo {
    width: 40.25%;
    padding-left: 6px;
    position: relative;
}
.gr-table-header-block.gr-rounds-board {
    width: 49.9%;
    position: relative;
    justify-content: space-between;
}
.gr-table-header-block.gr-final-result {
    width: 78px;
    justify-content: center;
}
.gr-table-header-label, .gr-table-header-round, .gr-table-header-extended-round, .gr-table-header-final-score {
    font-size: 14px;
    color: #222;
    font-weight: bold;
}
.gr-table-header-label:nth-child(1) {
    width: 18%;
}
.gr-table-header-label:nth-child(2) {
    width: 33%;
}
.gr-table-header-block.gr-rounds-board.for-baseball .gr-table-header-round:nth-child(5) {
    border-right: 1px solid #ebebeb;
}
.gr-table-header-round {
    flex-grow: 1;
    display: inline-flex;
    justify-content: center;
}
.gr-table-header-extended-round {
    width: 13.64%;
    display: flex;
    justify-content: center;
    border-left: 1px solid #ebebeb;
}
.gr-table-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gr-table-item:nth-child(even) {
    background: rgba(63,144,220,0.05);
}
.gr-table-item-block {
    height: 96px;
    display: flex;
    align-items: center;
    position: relative;
}
.gr-table-item-block.gr-gameinfo {
    width: 40.25%;
    padding-left: 6px;
    position: relative;
}
.gr-table-item-block.gr-rounds-board {
    width: 49.9%;
    position: relative;
    justify-content: space-between;
}
.gr-table-item-block.gr-final-result {
    width: 78px;
    justify-content: center;
}
.gr-table-game-serial-no {
    width: 18%;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    display: flex;
    flex-direction: column;
}
.gr-table-game-time {
    display: flex;
    font-weight: normal;
    color: #999;
    margin-top: 8px;
}
.gr-table-game-league {
    width: 33%;
    font-size: 14px;
    font-weight: normal;
    color: #3f90dc;
    padding-right: 20px;
}
.gr-table-game-team {
    display: inline-flex;
    justify-content: space-between;
    flex-direction: column;
}
.gr-table-game-away-team, .gr-table-game-home-team {
    font-size: 14px;
    font-weight: normal;
    color: #666;
    position: relative;
    display: flex;
    order: 1;
}
.gr-table-game-away-team {
    margin-bottom: 26px;
}
.gr-table-game-away-team::before {
    display: inline-flex;
    content: '-客-';
    color: #ccc;
    order: 2;
    margin-left: 4px;
}
.gr-table-game-home-team::before {
    display: inline-flex;
    content: '-主-';
    color: #ccc;
    order: 2;
    margin-left: 4px;
}
.gr-table-game-away-team.winned::after, .gr-table-game-home-team.winned::after {
    display: inline-flex;
    content: '勝';
    font-size: 14px;
    color: #fff;
    background: #e05151;
    width: 22px;
    height: 22px;
    justify-content: center;
    align-items: center;
    order: 3;
    margin-left: 4px;
}
.gr-table-item-block.gr-rounds-board {
    width: 49.9%;
    position: relative;
    justify-content: space-between;
    align-items: stretch;
    padding: 10px 0;
}
.gr-table-item-block.gr-rounds-board.for-baseball .gr-table-item-round:nth-child(5) {
    border-right: 1px solid #ebebeb;
}
.gr-table-item-round {
    flex-grow: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}
.gr-table-item-round-away-score {
    margin-bottom: 26px;
    top: 4px;
}
.gr-table-item-round-home-score {
    bottom: 4px;
}
.gr-table-item-round-away-score, .gr-table-item-round-home-score {
    font-size: 14px;
    color: #999;
    position: absolute;
}
.gr-table-item-extended-round {
    width: 13.64%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ebebeb;
    position: relative;
}
.gr-table-item-block.gr-final-result {
    width: 78px;
    justify-content: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.gr-table-item-away-final-score, .gr-table-item-home-final-score {
    font-size: 14px;
    color: #222;
}
.gr-table-item-away-final-score {
    margin-bottom: 26px;
}

/* Game Prediction */
.prediction-switch-panel {
    width: 100%;
    position: relative;
    padding: 8px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #ebebeb;
}
.prediction-switch-ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.prediction-switch-list {
    display: inline-flex;
    padding: 4px 12px;
    font-size: 24px;
    list-style: none;
    background: #2d394b;
    color: #ebebeb;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0,0,0,0.4);
    transition: 0.3s;
}
.prediction-switch-list:hover, .prediction-switch-list.current {
    color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,0),
                inset 2px 2px 3px rgba(0,0,0,0.1),
                inset -1px -1px 10px rgba(0,0,0,0.6);
    background: #e05151;
}
.prediction-switch-list:nth-child(1) {
    margin-right: 10px;
}
.section-intro-parag {
    width: 100%;
    text-align: center;
    color: #3f90dc;
    font-size: 14px;
    margin-bottom: 14px;
}
.section-note-parag {
    width: 100%;
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-bottom: 14px;
}
.section-note-parag::before {
    display: inline-flex;
    content: '*';
    color: #e05151;
    margin-right: 4px;
}
.show-bet-items-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}
.show-bet-item {
    width: 30%;
    min-height: 394px;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 10px;
    position: relative;
    transition: 0.3s;
    margin: 0 calc(10%/2) 20px 0;
    border: 1px solid #ebebeb;
}
.show-bet-item:nth-child(3n) {
    margin: 0 0 20px 0;
}
.show-bet-item:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    border: 1px solid transparent;
}
.sb-member-info {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.sb-account-photo-frame {
    width: 60px;
    height: 60px;
    margin-right: 3px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.sb-account-photo-frame img {
    width: 100%;
    height: auto;
}
.sb-member-name {
    font-size: 14px;
    color: #666;
    font-weight: normal;
}
.sb-item-info-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 14px 0;
    border-radius: 10px;
}
.sb-item-info-line {
    display: inline-flex;
    align-items: center;
    padding: 2px 12px;
    margin: 0 0 10px 0;
    border-radius: 15px;
    color: #e05151;
}
.sb-item-info-pass, .sb-item-info-cost, .sb-item-info-bonus {
    font-size: 14px;
    color: #2D394B;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
}
.sb-item-info-pass-unit {
    display: inline-flex;
    color: #e05151;
}
.sb-item-info-pass-unit::after {
    display: inline-flex;
    content: '、';
}
.sb-item-info-pass-unit:nth-last-child(1)::after {
    display: none;
}
.sb-item-info-money-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.sb-item-info-money-wrap .sb-item-info-line {
    margin-right: 10px;
}
.sb-item-info-cost::after, .sb-item-info-bonus::after {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    content: '\f155';
    color: #e05151;
    transform: translateY(2px);
    margin-right: 2px;
}
.sb-single-game {
    width: 100%;
    padding: 0 0 12px 22px;
    margin-bottom: 14px;
    position: relative;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
}
.sb-single-game::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    content: '\f111';
    color: #2D394B;
    position: absolute;
    top: 5px;
    left: 0;
}
.sb-single-game::after {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
}
.sb-single-game.winned::after {
    content: '\f058';
    color: #35AD79;
}
.sb-single-game.lost::after {
    content: '\f057';
    color: #e05151;
}
.sb-single-game-line {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin: 0 10px 5px 0;
    border-radius: 15px;
}
.sb-single-game-condition .sb-single-game-line:nth-child(1) {
    background: #e05151;
}
.sb-game-serial {
    font-size: 12px;
    font-weight: bold;
    color: #ffd80a;
    margin-right: 10px;
}
.sb-game-date {
    font-size: 12px;
    margin-right: 10px;
    color: #ffd80a;
}
.sb-game-time {
    font-size: 12px;
    color: #ffd80a;
}
.sb-single-game-teams {
    margin: 0 0 10px 0;
    display: inline-flex;
    width: 100%;
}
.sb-single-game-teams::before {
    display: inline-flex;
    content: 'vs';
    color: #2D394B;
    font-size: 14px;
    font-weight: bold;
    order: 2;
    margin: 0 6px;
}
.sb-single-game-away-team, .sb-single-game-home-team {
    font-size: 14px;
    color: #2D394B;
}
.sb-single-game-away-team {
    order: 1;
}
.sb-single-game-home-team {
    order: 3;
}
.sb-single-game-rule-name, .sb-single-game-rule-team, .sb-single-game-bet-condition {
    font-size: 12px;
    color: #ebebeb;
    display: inline-flex;
}
.sb-single-game-rule-team {
    margin: 0 4px;
}
.sb-single-game-bet-odds {
    font-size: 12px;
    color: #666;
}
.sb-extend-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 3;
    transition: 0.3s;
}
.sb-extend-btn::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    content: '\f142';
    font-size: 18px;
    color: rgba(45,57,75,0.5);
    transition: 0.3s;
}
.sb-extend-btn:hover {
    background: rgba(45,57,75,1);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.sb-extend-btn:hover::before {
    color: #ebebeb;
}
.show-bet-items-status {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.show-bet-items-status-final-msg {
    font-size: 14px;
    color: #e05151;
    display: none;
    margin: 24px 0;
}
.show-bet-items-status-final-msg.toFade {
    animation: fadeOut 1s ease 2s 1 both;
}
/* if show bet winned... */
.show-bet-item.big-check {
    background: #35AD79;
    border: 0;
}
.show-bet-item.big-check::after {
    display: block;
    content: 'V';
    font-size: 15em;
    font-weight: bold;
    color: #222;
    opacity: 0.5;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}
.show-bet-item.big-check .sb-member-name {
    color: #fff;
}
.show-bet-item.big-check .sb-single-game::before {
    color: #ebebeb;
}
.show-bet-item.big-check .sb-single-game-line.theme-dark-blue {
    background: #ebebeb;
}
.show-bet-item.big-check .sb-game-serial, .show-bet-item.big-check .sb-game-date, .show-bet-item.big-check .sb-game-time {
    color: #2D394B;
}
.show-bet-item.big-check .sb-single-game-away-team, .show-bet-item.big-check .sb-single-game-home-team {
    color: #ffffff;
}
.show-bet-item.big-check .sb-single-game-teams::before {
    color: #ffffff;
}
.show-bet-item.big-check .sb-single-game-rule-name, .show-bet-item.big-check .sb-single-game-rule-team, .show-bet-item.big-check .sb-single-game-bet-condition {
    color: #2D394B;
}
.show-bet-item.big-check .sb-single-game.winned::after, .show-bet-item.big-check .sb-single-game.lost::after {
    color: rgba(255,255,255,0.5);
}
.show-bet-item.big-check .sb-extend-btn::before {
    color: #ebebeb;
}
.needLoginToSeeMore {
    width: 100%;
    height: 50px;
    background: #3f90dc;
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    display: none;
}
.needLoginToSeeMore:hover {
    color: #fff;
}
.needLoginToSeeMore::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    display: inline-flex;
    content: '\f054';
    transform: translate(-6px, 2px);
    transition: 0.3s;
}
.needLoginToSeeMore:hover::before {
    transform: translate(-3px, 2px);
}

/* Betting versus data */
.bv-star {
    display: inline-flex;
    margin: 0 8px;
    align-items: center;
}
.bv-star > i {
    color: #ffd80a;
}
.bet-versus-items-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}
.bet-versus-item {
    width: 30%;
    padding: 16px 55px 24px 55px;
    margin: 0 calc(10%/2) 30px 0;
    position: relative;
    background: #2D394B;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
}
.bet-versus-item:nth-child(3n) {
    margin: 0 0 30px 0;
}
.bet-versus-item:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.bv-item-league {
    font-size: 14px;
    color: #ebebeb;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}
.bv-item-league::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    display: flex;
}
.bv-item-info-wrap {
    width: 100%;
    position: relative;
    padding: 10px 0;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    background: rgba(34,34,34,0.3);
}
.bv-item-info-wrap span {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ccc;
    font-size: 12px;
    width: calc(100%/3);
}
.bv-item-info-wrap span::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    display: flex;
}
.bv-item-info-serial::before {
    content: '\f05a';
}
.bv-item-info-time::before {
    content: '\f017';
}
.bv-item-info-date::before {
    content: '\f073';
}
.bv-item-team-wrap {
    display: flex;
    min-height: 52px;
    width: 100%;
    margin: 14px 0;
}
.bv-item-team-wrap span {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 50%;
    font-size: 14px;
    color: #ffd80a;
    padding: 0 8px;
}
.bv-item-away-team {
    border-right: 1px solid #ccc;
}
.bv-item-away-team::before {
    display: flex;
    content: '客';
    color: #ccc;
    font-size: 12px;
}
.bv-item-home-team::before {
    display: flex;
    content: '主';
    color: #ccc;
    font-size: 12px;
}
.bv-item-versus-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.bv-item-rule-name {
    font-size: 14px;
    color: #ffd80a;
    margin-bottom: 6px;
}
.bv-item-versus-bar {
    width: 100%;
    height: 30px;
    border-radius: 15px;
    background: #666;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
    overflow: hidden;
}
.bv-item-versus-bar::after {
    display: block;
    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 15px;
    background: transparent;
}
.bet-versus-item.unlogin .bv-item-versus-bar {
    background: #666;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bet-versus-item.unlogin .bv-item-versus-bar::before {
    display: block;
    content: '?';
    color: #fff;
}
.bv-item-versus-bar span {
    display: inline-flex;
    color: #fff;
    font-size: 12px;
    align-items: center;
    height: 30px;
    transition: 0.3s;
}
.bet-versus-item.unlogin .bv-item-versus-bar > span {
    display: none;
}
.bv-item-away-team-percent {
    background: #e05151;
    min-width: 18%;
    padding-left: 14px;
}
.bv-item-draw-percent {
    min-width: 10px;
    background: rgb(255, 216, 10, 0.8);
    justify-content: center;
}
.bv-item-home-team-percent {
    background: rgba(53,173,121,0.5);
    right: -2px;
    min-width: 18%;
    width: 65%;
    justify-content: flex-end;
    padding-right: 14px;
}
.bv-item-versus-ex {
    display: flex;
    width: 100%;
    margin-bottom: 14px;
    justify-content: space-around;
}
.bv-item-versus-ex-sq {
    list-style: none;
    color: #ebebeb;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.bv-item-versus-ex-sq::before {
    display: inline-flex;
    border-radius: 4px;
    width: 14px;
    height: 14px;
    content: '';
    margin-right: 3px;
}
.bv-item-versus-ex-sq:nth-child(1)::before {
    background: #e05151;
}
.bv-item-versus-ex-sq:nth-child(2)::before {
    background: #ffd80a;
}
.bv-item-versus-ex-sq:nth-child(3)::before {
    background: #35AD79;
}
.bet-versus-item.unlogin .bv-item-versus-ex {
    display: none;
}
.bv-item-total-money {
    color: #fff;
    margin-bottom: 12px;
}
.bet-versus-item.unlogin .bv-item-total-money {
    display: none;
}
.bv-item-panel {
    width: 100%;
    display: flex;
    justify-content: center;
}
.bet-versus-item.unlogin .bv-item-panel {
    display: none;
}
.bv-item-panel-btn {
    display: inline-flex;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(255,255,255,0.5);
    color: rgba(45,57,75,0.8);
    font-size: 12px;
    width: 30%;
    padding: 10px;
    margin-right: calc(10%/2);
    cursor: pointer;
    transition: 0.3s;
}
.bv-item-panel-btn:nth-last-child(1) {
    margin-right: 0;
}
.bv-item-panel-btn::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    display: block;
    font-size: 12px;
}
.bv-item-panel-btn.duel-analytic::before{
    content: '\f201';
}
.bv-item-panel-btn.follow-bet::before{
    content: '\f3ff';
}
.bv-item-panel-btn.bookmark::before{
    content: '\f005';
}
.bv-item-panel-btn:hover {
    background: rgba(255,255,255,1);
    color: #2D394B;
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}
.bv-item-login-btn {
    display: none;
    font-size: 14px;
    color: #fff;
    background: rgba(224,81,81,0.8);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}
.bet-versus-item.unlogin .bv-item-login-btn {
    display: flex;
}
.bv-item-login-btn::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    display: inline-block;
    font-size: 14px;
    content: '\f054';
    transform: translate(-6px, 2px);
    transition: 0.3s;
}
.bv-item-login-btn:hover {
    background: rgba(224,81,81,1);
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}
.bv-item-login-btn:hover::before {
    transform: translate(-3px, 2px);
}
/* login for more bet versus items... */


/* Featured games */
.featured-game-table-set {
    padding-bottom: 10px;
    margin-bottom: 26px;
    border-bottom: 1px solid #ebebeb;
}
.featured-game-table-date {
    font-size: 18px;
    color: #222;
    margin-bottom: 10px;
}
.featured-game-table-wrap {
    width: 100%;
    position: relative;
}
.featured-game-table-header {
    width: 100%;
    height: 26px;
    display: flex;
    background: #ffd80a;
    align-items: center;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    padding-left: 20px;
    margin-bottom: 10px;
}
.featured-game-table-header-item {
    list-style: none;
    font-size: 14px;
    color: #222;
    font-weight: bold;
    display: inline-flex;
}
.featured-game-table-header-item:nth-child(1) {
    width: 5.67%;
}
.featured-game-table-header-item:nth-child(2) {
    width: 11.17%;
}
.featured-game-table-header-item:nth-child(3) {
    width: 16%;
}
.featured-game-table-header-item:nth-child(4) {
    width: 17.33%;
}
.featured-game-table-header-item:nth-child(4)::after {
    content: '-客-';
    display: inline-flex;
    color: #999;
    margin-left: 4px;
    font-weight: normal;
}
.featured-game-table-header-item:nth-child(5) {
    width: 17.33%;
}
.featured-game-table-header-item:nth-child(5)::after {
    content: '-主-';
    display: inline-flex;
    color: #999;
    margin-left: 4px;
    font-weight: normal;
}
.featured-game-table-header-item:nth-child(6) {
    width: 12.17%;
}
.featured-game-table-item {
    display: flex;
    padding-left: 20px;
    width: 100%;
    height: 36px;
    align-items: center;
    font-size: 14px;
    color: #999;
}
.featured-game-table-item:nth-child(odd) {
    background: rgba(63,144,220,0.05);
}
.featured-game-table-time {
    width: 5.67%;
}
.featured-game-table-series {
    width: 11.17%;
}
.featured-game-table-league {
    width: 16%;
}
.featured-game-table-away-team, .featured-game-table-home-team {
    width: 17.33%;
    color: #999;
    display: inline-flex;
    align-items: center;
    cursor: unset;
}
.featured-game-table-away-team.with-data, .featured-game-table-home-team.with-data {
    cursor: pointer;
    transition: 0.3s;
}
.featured-game-table-away-team.with-data:hover, .featured-game-table-home-team.with-data:hover {
    color: #e05151;
}
.featured-game-table-away-team.with-data::after, .featured-game-table-home-team.with-data::after {
    font-family: 'Font Awesome 5 Pro';
    font-size: 14px;
    content: '\f201';
    font-weight: 300;
    font-style: normal;
    display: inline-flex;
    margin-left: 4px;
    transform: translateY(2px);
}
.featured-game-table-broadcast {
    width: 12.17%;
}
.featured-game-table-rule-type {
    width: 9.5%;
}
.featured-game-table-panel {
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: #3f90dc;
    
}
.featured-game-table-panel::before {
    font-family: 'Font Awesome 5 Pro';
    font-size: 14px;
    content: '\f324';
    font-weight: 300;
    font-style: normal;
    transform: rotate(0deg);
    transition: 0.3s;
}
.featured-game-table-panel:hover::before {
    transform: rotate(90deg);
}
.featured-game-panel-ul {
    width: 80px;
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    justify-content: center;
    padding: 14px;
    z-index: 2;
    top: 18px;
    left: 0px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    transform: scale(0);
    transition: 0.3s;
}
.featured-game-table-panel:hover .featured-game-panel-ul {
    transform: scale(1);
}
.featured-game-panel-list {
    list-style: none;
    white-space: nowrap;
}
.featured-game-panel-list:nth-child(1) {
    margin-bottom: 10px;
}
.featured-game-panel-link {
    color: #3f90dc;
    transition: 0.3s;
}
.featured-game-panel-link:hover {
    color: #e05151;
}

/* Novice guide*/
.novive-guide-item-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.novive-guide-item {
    display: flex;
    align-items: center;
    width: calc(50% - 10px);
    height: 178px;
    background: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0 74px;
    margin: 0 0 20px 0;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.novive-guide-item:hover {
    background: #3f90dc;
    border: 1px solid #3f90dc;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.novice-guide-item-title {
    font-size: 36px;
    color: #666;
    transition: 0.3s;
}
.novive-guide-item:hover .novice-guide-item-title {
    color: #fff;
}
.novice-guide-item-ico::before {
    display: inline-flex;
    position: absolute;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 120px;
    color: #3f90dc;
    opacity: 0.3;
    top: 50%;
    right: 74px;
    transform: translate(0,-45%) scale(1) rotate(0);
    transition: 0.5s;
}
.novive-guide-item:hover .novice-guide-item-ico::before {
    color: rgba(255,255,255,0.5);
    transform: translate(0,-50%) scale(1.3) rotate(-10deg);
}
.novice-guide-item-ico.guide-about::before {
    content: '\f2bb';
}
.novice-guide-item-ico.guide-trial-money::before {
    content: '\f85c';
    font-weight: 900;
}
.novice-guide-item-ico.guide-rights::before {
    content: '\f15c';
    font-weight: 900;
}
.novice-guide-item-ico.guide-how-play::before {
    content: '\f733';
}
.novice-guide-item-ico.guide-faq::before {
    content: '\f059';
}

/* Member rights */
.member-rights-ul {
    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
    margin-bottom: 20px;
}
.member-rights-list {
    font-size: 18px;
    list-style: none;
    color: #ccc;
    padding: 18px 26px;
    display: flex;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}
.member-rights-list::after {
    display: flex;
    content: '';
    width: 0;
    height: 3px;
    background: #3f90dc;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: 0.3s;
}
.member-rights-list:hover, .member-rights-list.current {
    color: #3f90dc;
}
.member-rights-list.current::after {
    width: 100%;
    left: 0;
}
.member-rights-block {
    width: 100%;
    position: relative;
    display: none;
}
.member-rights-block.current {
    display: block;
}
.trial-money-sec {
    padding: 40px 0;
    min-height: 450px;
    position: relative;
    display: flex;
    align-items: center;
}
.trial-money-sec.sec02 {
    min-height: 650px;
}
.trial-money-sec.sec03 {
    min-height: 650px;
}
.trial-money-sec.sec04 {
    min-height: 1200px;
}
.trial-money-intro {
    width: 40%;
    margin-left: 60%;
}
.trial-money-legend {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
}
.trial-money-legend:nth-last-child(1) {
    border: 0;
}
.trial-money-intro.put-center {
    margin: 0 auto;
}
.trial-money-ex-img {
    width: 35%;
    position: absolute;
}
.trial-money-legend-img {
    width: 80%;
}
.ex-img-01 {
    left: 10%;
}
.ex-img-03 {
    bottom: 0;
    left: 15%;
}
.trial-money-intro-title {
    font-size: 36px;
    margin-bottom: 24px;
}
.trial-money-intro-parag {
    font-size: 14px;
    color: #999;
    margin-bottom: 24px;
}
.trial-money-legend-parag {
    font-size: 14px;
    line-height: 24px;
    text-indent: -18px;
    color: #ccc;
    padding: 10px 10px 10px 28px;
    background: #222;
    width: 25%;
    position: relative;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.trial-money-intro-parag.dark {
    font-size: 14px;
    color: #fff;
    opacity: 0.5;
    margin-bottom: 24px;
}
.trial-money-intro-parag.align-c {
    text-align: center;
}
.trial-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.trial-notice::before {
    display: flex;
    content: '\f06a';
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 120px;
    color: #ffd80a;
}
.trial-money-article-link {
    display: flex;
    color: #ffd80a;
    transition: 0.3s;
}
.trial-money-article-link::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 300;
    display: inline-flex;
    content: '\f054';
    transform: translate(0,4px);
    margin-right: 8px;
    transition: 0.3s;
}
.trial-money-article-link:hover {
    color: #222;
}
.trial-money-article-link:hover::before {
    transform: translate(4px,4px);
}
.member-rights-ul.type {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    border-bottom: 1px solid #3f90dc;
    margin-bottom: 28px;
}
.member-rights-ul.type > .member-rights-list {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 8px 16px;
    margin: 0 2px 0 0;
    font-size: 18px;
    color: #fff;
    background: #add4f9;
    cursor: pointer;
}
.member-rights-ul.type > .member-rights-list::after {
    display: none;
}
.member-rights-ul.type > .member-rights-list.current {
    background: #3f90dc;
}

/* FAQ */
.faq-series-ul {
    display: flex;
    width: 100%;
    position: relative;
    justify-content: flex-start;
    margin-bottom: 20px;
}
.faq-series-list {
    font-size: 16px;
    list-style: none;
    color: #ccc;
    padding: 14px 18px;
    display: flex;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}
.faq-series_list:hover, .faq-series-list.current {
    color: #3f90dc;
}
.faq-series-list::after {
    display: flex;
    content: '';
    width: 0;
    height: 3px;
    background: #3f90dc;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: 0.3s;
}
.faq-series-list.current::after {
    width: 100%;
    left: 0;
}
.faq-series-filter-wrap {
    width: 400px;
    height: 40px;
    padding: 0 10px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 5px;
    background: #c0e0ff;
    box-shadow: 0 2px 3px rgba(63,144,220,0.3);
}
.faq-series-filter-dropdown {
    flex-grow: 1;
    width: 100%;
    color: #3f90dc;
    background: transparent;
    border: 0;
}
.faq-series-sec {
    width: 100%;
    display: none;
}
.faq-series-sec.current {
    display: block;
}
.question-item-wrap {
    width: 100%;
    padding: 10px 0;
    margin-bottom: 10px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    background: #f8f8f8;
}
.question-item-wrap.active {
    background: #fff;
}
.question-title {
    width: 100%;
    position: relative;
    font-size: 16px;
    font-weight: normal;
    color: #666;
    padding: 0 0 0 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
}
.question-title:hover {
    color: #e05151;
}
.question-item-wrap.active .question-title {
    color: #e05151;
}
.question-title::before {
    display: inline-flex;
    content: '\f059';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(calc(-50% + 2px));
    transition: 0.3s;
}
.question-item-wrap.active .question-title::before {
    content: '\f672';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    position: absolute;
    transform: translateY(calc(-50% + 2px)) rotateY(180deg);
    transition: 0.3s;
}
.solve-wrap {
    padding: 0 28px 0 28px;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.3s;
    height: 0;
    opacity: 0;
}
.qna-img-s {
    max-width: 30%;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}
.question-item-wrap.active .solve-wrap {
    padding: 10px 28px 0 28px;
    transform: scaleY(1);
    height: unset;
    opacity: 1;
}
.question-title-s {
    font-size: 16px;
}
.question-parag {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
}
.question-emphasis {
    color: #222;
}
.faq-flow-wrap {
    display: flex;
    flex-direction: column;
    width: 60%;
}
.faq-flow-wrap img {
    max-width: 100%;
    height: auto;
}

/* Team Analytic */
.team-data-sec {
    position: relative;
    overflow: hidden;
}
.team-data-dailogue-box {
    width: 52%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 20px;
    background: rgba(0,0,0,0.8);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 3;
}
.team-data-ball {
    position: absolute;
    z-index: 2;
    transform: translate(-15%,40%);
}
.team-data-ball > img {
    max-width: 100%;
}
.team-data-bg {
    position: absolute;
    z-index: 1;
    transform: translate(45%,-30%) scale(0.75);
}
.team-data-bg > img {
    max-width: 100%;
}
.team-data-sec-parag {
    font-size: 18px;
    text-align: center;
    color: #ebebeb;
    margin-bottom: 48px;
}
.team-data-sec-btn {
    display: inline-flex;
    background: #e05151;
    padding: 10px 48px;
    font-size: 16px;
    box-shadow: -2px -2px 2px rgba(0,0,0,0.01), 
                -2px -2px 4px rgba(0,0,0,0.01), 
                2px 2px 4px rgba(0,0,0,0.1), 
                2px 2px 8px rgba(0,0,0,0.1), 
                inset 2px 2px 4px rgba(0,0,0,0), 
                inset -1px -1px 2px rgba(0,0,0,0);
    color: #fff;
    margin-bottom: 24px;
    width: 200px;
    transition: 0.3s;
}
.team-data-sec-btn:hover {
    box-shadow: -2px -2px 2px rgba(0,0,0,0), 
                -2px -2px 4px rgba(0,0,0,0), 
                2px 2px 4px rgba(0,0,0,0), 
                2px 2px 8px rgba(0,0,0,0), 
                inset 2px 2px 4px rgba(0,0,0,0.3), 
                inset -1px -1px 2px rgba(0,0,0,0.4);
    color: #fff;
}
.team-data-dailogue-subtitle {
    font-size: 24px;
    color: #ffd80a;
}
.team-analytic-series-ul {
    display: flex;
    align-items: flex-end;
    width: 100%;
    border-bottom: 1px solid #3f90dc;
    margin-bottom: 28px;
}
.team-analytic-series-list {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    width: 142px;
    height: 50px;
    font-size: 18px;
    color: #fff;
    background: #add4f9;
    margin: 0 2px 0 0;
    cursor: pointer;
}
.team-analytic-series-list.current {
    height: 56px;
    color: #fff;
    background: #3f90dc;
    border-top: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-bottom: 1px solid #3f90dc;
    transform: translateY(1px);
}
.team-analytic-series-list::before {
    font-family: 'Font Awesome 5 Free';
    display: block;
    font-weight: 900;
    font-size: 30px;
    margin-right: 12px;
}
.team-analytic-filter-wrap {
    width: 100%;
    position: relative;
    display: flex;
    margin-bottom: 28px;
}
.team-analytic-filter-box {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 5px;
    padding: 0 10px 0 30px;
    margin: 0 0 10px 0;
    background: #ffd80a;
    box-shadow: 0 2px 3px rgba(255,216,10,0.3);
}
.team-analytic-filter-box::before {
    display: block;
    content: '\f324';
    position: absolute;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    left: 10px;
    color: rgba(0,0,0,0.7);
    animation: getMoreRulesBtn 1s ease 0s infinite alternate none;
}
.team-analytic-filter-box.date {
    margin: 0 16px 10px 0 ;
}
.ta-filter-dropdown {
    flex-grow: 1;
    width: 100%;
    background: transparent;
    color: rgba(0,0,0,0.7);
    border: 0;
    font-size: 16px;
    cursor: pointer;
}
.team-analytic-data-wrap {
    width: 100%;
}
.team-analytic-data-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 53px;
    background: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0 28px;
    margin-bottom: 20px;
    transition: 0.3s;
}
.team-analytic-data-item:hover {
    background: #3f90dc;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.team-analytic-data-item:hover .ta-data-team-name, .team-analytic-data-item:hover > span {
    color: #fff;
}
.team-analytic-data-item:hover .team-data-link {
    background: #2D394B;
    color: #ccc;
}
.team-analytic-data-item:hover .team-data-link:hover {
    color: #ffd80a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.team-analytic-data-item.with-versus-info .now-versus-label {
    display: inline-flex;
}
.ta-data-team-name {
    width: 25%;
    font-size: 18px;
    font-weight: 700;
    color: #666;
}
.ta-data-team-name > .team-name-link {
    color: #666;
    transition: 0.3s;
}
.team-analytic-data-item:hover .ta-data-team-name > .team-name-link {
    color: #ffd80a;
    transition: 0.3s;
}
.team-analytic-data-item:hover .ta-data-team-name > .team-name-link:hover {
    color: #fff;
}
.team-analytic-data-item > span {
    display: inline-flex;
    color: #666;
    font-size: 18px;
}
.ta-data-participated {
    width: 10%;
}
.ta-data-participated::before {
    display: inline-flex;
    content: '已賽：';
}
.ta-data-winned {
    width: 10%;
}
.ta-data-winned::before {
    display: inline-flex;
    content: '勝：';
}
.ta-data-draw {
    width: 10%;
}
.ta-data-draw::before {
    display: inline-flex;
    content: '和：';
}
.ta-data-losed {
    width: 10%;
}
.ta-data-losed::before {
    display: inline-flex;
    content: '負：';
}
.ta-data-victory-rate {
    font-size: 18px;
    width: 10%;
    flex-grow: 1;
}
.ta-data-victory-rate::before {
    display: inline-flex;
    content: '勝率：';
}
.team-data-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    margin: 0 16px 0 0;
    border-radius: 10px;
    font-size: 14px;
    color: rgba(0,0,0,0.3);
    background: #ffd80a;
    transition: 0.3s;
}
.team-data-link::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    content: '\f201';
    margin-right: 4px;
}
.team-analytic-data-item > .now-versus-label {
    font-size: 14px;
    visibility: hidden;
    align-items: center;
    color: #e05151;
    right: 28px;
}
.now-versus-label::before {
    display: inline-flex;
    font-family: 'Font Awesome 5 Brands';
    font-weight: 300;
    content: '\f3ac';
    margin-right: 1px;
}
.team-data-versus-filter-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* Team Data Baseball */
.team-data-headline {
    width: 100%;
    display: flex;
    margin-bottom: 24px;
}
.team-data-league {
    display: inline-flex;
    font-size: 24px;
    color: #2D394B;
    font-weight: 400;
    align-items: center;
    margin-right: 20px;
}
.team-data-league::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 80%;
    background: #2D394B;
    margin-right: 10px;
}
.team-data-versus-content {
    display: flex;
    flex-wrap: wrap;
}
.team-data-name {
    display: inline-flex;
    font-size: 24px;
    font-weight: 700;
    color: #e05151;
}
.team-data-panel-wrap {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 90px;
    z-index: 100;
    margin: 0 auto 20px auto;
}
.team-data-panel-mask {
    width: 100%;
    overflow: hidden;
}
.team-data-panel-frame {
    display: flex;
    position: relative;
    height: 42px;
    align-items: center;
}
/*.team-data-panel-frame:before {
    display: inline-flex;
    content: '\f550';
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    color: rgba(255,255,255,0.5);
    margin-right: 12px;
}*/
.team-data-panel-btn-box {
    display: flex;
    justify-content: center;
    width: 50%;
}
.team-data-panel-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #ffd80a;
    height: 36px;
    width: auto;
    padding: 4px 16px;
    border-radius: 18px;
    background: #222;
    margin-right: 12px;
    cursor: pointer;
    box-shadow: -1px -1px 2px rgba(0,0,0,0.05), 
                -2px -2px 2px rgba(0,0,0,0.02), 
                1px 1px 2px rgba(0,0,0,0.1), 
                2px 2px 4px rgba(0,0,0,0.1), 
                inset 1px 1px 3px rgba(0,0,0,0);
    transition: 0.3s;
}
.team-data-panel-btn:hover {
    background: #35AD79;
    box-shadow: -1px -1px 2px rgba(255,255,255,1), 
                -1px -1px 1px rgba(0,0,0,0), 
                1px 1px 2px rgba(0,0,0,0), 
                2px 2px 4px rgba(0,0,0,0), 
                inset 1px 1px 3px rgba(0,0,0,0.2);
}
.team-data-panel-btn.go-back {
    background: #35AD79;
    color: #fff;
}
.team-data-panel-btn.go-back::before {
    display: inline-block;
    content: '\f149';
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    transform: rotate(180deg);
    margin-right: 4px;
}
.team-data-panel-btn.go-team-data {
    background: #e05151;
    color: #fff;
}
.team-data-panel-btn.go-team-data::before {
    display: inline-block;
    content: '\f149';
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    transform: rotate(180deg);
    margin-right: 4px;
}
.swiper-button-next, .swiper-button-prev {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #35AD79;
}
.swiper-button-next {
    right: 0;
}
.swiper-button-next[aria-disabled="true"] {
    opacity: 0;
}
.swiper-button-prev {
    left: 0;
}
.swiper-button-prev[aria-disabled="true"] {
    opacity: 0;
}
.swiper-button-next::before, .swiper-button-prev::before {
    display: flex;
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    font-size: 20px;
}
.swiper-button-next::before {
    content: '\f138';
    right: -2px;
}
.swiper-button-prev::before {
    content: '\f137';
}
.team-data-versus-wrap {
    margin-bottom: 30px;
}
.team-data-versus-wrap.half {
    width: calc(50% - 10px);
}
.team-data-ads-wrap {
    width: calc(50% - 10px);
    position: relative;
}
.team-data-ads-box {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
}
.team-data-ads-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.team-data-ads-item > img {
    max-width: 100%;
    transform: scale(1);
    transition: 0.3s;
}
.team-data-ads-item:hover > img {
    transform: scale(1.1);
}
.team-data-versus-box {
    width: 100%;
    position: relative;
    padding: 25px;
    margin-bottom: 20px;
    background: #ebebeb;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}
.team-data-versus-title {
    width: 100%;
    color: #e05151;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.team-data-versus-title::before {
    display: inline-block;
    content: '\f3ac';
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    margin-right: 2px;
}
.team-data-versus-info-board {
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #2D394B;
}
.team-data-versus-info-sub {
    display: flex;
    align-items: center;
    padding: 0 4px 6px 4px;
    border-bottom: 1px solid #fff;
}
.team-data-versus-league {
    color: #ebebeb;
    font-size: 18px;
    font-weight: 700;
    flex-grow: 1;
}
.team-data-versus-date, .team-data-versus-time {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #ffd80a;
}
.team-data-versus-date {
    margin-right: 4px;
}
.team-data-versus-info-main {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.team-data-versus-sphere {
    display: flex;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffd80a;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    line-height: 46px;
    position: relative;
    z-index: 2;
}
.team-data-versus-sphere::before {
    display: flex;
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffd80a;
    position: absolute;
    z-index: -1;
    opacity: 0.9;
    transform: scale(1);
    animation: predictGameEffect 1.5s ease 0s infinite normal none;
}
.team-data-versus-away-team, .team-data-versus-home-team {
    width: calc(50% - 25px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 24px;
    color: #fff;
}
.team-data-versus-away-team > .team-name-link, .team-data-versus-home-team > .team-name-link {
    color: #fff;
    transition: 0.3s;
}
.team-data-versus-away-team > .team-name-link:hover, .team-data-versus-home-team > .team-name-link:hover {
    color: #ffd80a;
    transition: 0.3s;
}
.team-data-versus-away-team .pitcher, .team-data-versus-home-team .pitcher {
    font-size: 14px;
    font-weight: 300;
    color: #ccc;
    margin-top: 10px;
}
.team-data-item-header {
    width: 100%;
    height: 40px;
    background: #2D394B;
    display: flex;
    align-items: center;
    margin: 20px 0 10px 0;
}
.team-data-item-header.spare-first {
    padding-left: 22%;
}
.team-data-item-header-prop {
    list-style: none;
    font-size: 14px;
    color: #ffd80a;
    padding: 0 14px;
    flex-grow: 1;
    text-align: center;
}
.team-data-item-header-prop.first {
    width: 22%;
    text-align: left;
    flex-grow: 0;
}
.team-data-item {
    width: 100%;
    min-height: 40px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    padding: 6px 0;
    margin-bottom: 5px;
}
.team-data-item-column {
    list-style: none;
    font-size: 14px;
    color: #222;
    padding: 0 14px;
    flex-grow: 1;
    width: 50%;
}
.team-data-item-column:nth-child(1) {
    justify-content: flex-start;
}
.team-data-item-column:nth-child(2) {
    justify-content: flex-end;
}
.team-data-item-player-pos {
    display: inline-block;
    margin-right: 4px;
    color: #3f90dc;
}
.team-data-item-player-name {
    display: inline-block;
    margin-right: 2px;
    color: #222222;
}
.team-data-item-player-sco {
    display: inline-block;
    color: #d71e1e;
}
.team-data-item-column.option-name {
    width: 22%;
    font-weight: 700;
    color: #3f90dc;
    flex-grow: 0;
    text-align: left;
}
.team-data-gobet-btn {
    font-size: 12px;
    color: #fff;
    background: #3f90dc;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    margin: 16px auto 0 auto;
    transition: 0.3s;
}
.team-data-gobet-btn::before {
    display: inline-block;
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    margin-right: 4px;
}
.team-data-gobet-btn:hover {
    background: #e05151;
    color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.team-basic-data-wrap {
    width: 100%;
    padding: 30px 25px;
    margin: 0 0 30px 0;
    background: #f8f8f8;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    border-radius: 10px;
}
.team-basic-data-headline {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.team-basic-data-title {
    font-size: 18px;
    font-weight: 700;
    color: #666;
    margin: 0 24px 12px 0;
}
.team-basic-data-title::before {
    display: inline-block;
    content: '\f200';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    margin-right: 4px;
}
.team-basic-data-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 12px;
}
.team-basic-data-item:nth-child(even) {
    background: rgba(63,144,220,0.05);
}
.team-basic-data-item-column {
    font-size: 18px;
    font-weight: 100;
    color: #222;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    position: relative;
}
.team-basic-data-item-column.prop {
    color: #3f90dc;
    font-weight: 700;
    width: 200px;
    flex-grow: 0;
}
.team-basic-data-item-column .team-basic-data-winned {
    color: #e05151;
    width: 50px;
    margin-right: 5%;
    display: inline-flex;
}
.team-basic-data-item-column .team-basic-data-draw{
    color: #bb8822;
    width: 50px;
    margin-right: 5%;
    display: inline-flex;
}
.team-basic-data-item-column .team-basic-data-winned::before {
    display: inline-block;
    content: '勝：';
}
.team-basic-data-item-column .team-basic-data-losed {
    color: #35AD79;
    display: inline-flex;
}
.team-basic-data-item-column .team-basic-data-losed::before {
    display: inline-block;
    content: '負：';
}
.team-date-rate-btn-ul {
    width: 100%;
    background: #3f90dc;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.team-date-rate-btn {
    height: 60px;
    position: relative;
    list-style: none;
    font-size: 20px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    opacity: 0.5;
    cursor: pointer;
    transition: 0.3s;
}
.team-date-rate-btn::after {
    display: block;
    content: '';
    background: #fff;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    transition: 0.3s;
}
.team-date-rate-btn:hover, .team-date-rate-btn.active {
    opacity: 1;
}
.team-date-rate-btn.active::after {
    bottom: -9px;
}
.side-floating-box {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 100;
    width: 104px;
    height: auto;
}
.fortune-pgrs-bar {
    display: none;
    width: 104px;
    height: 16px;
    position: relative;
    border: 3px solid #f2f2f2;
    background: #f2f2f2;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255,215,17,0),
                inset 0 0 5px rgba(0,0,0,0.3);
    margin-bottom: 10px;
}
.fortune-pgrs-bar.active {
    display: block;
}
.fortune-now-bar {
    display: block;
    width: 90%;
    max-width: 100%;
    height: 100%;
    background: linear-gradient(#FF8E8E, #CE0000);
    border-radius: 8px;
}
.fortune-god {
    margin-bottom: 10px;
    width: 104px;
    height: 112px;
    cursor: pointer;
}
.fortune-credit-wrap {
    display: none;
    justify-content: flex-end;
    align-items: baseline;
    background: rgba(0,0,0,0.7);
    padding: 4px;
    margin-bottom: 6px;
}
/* .fortune-credit-wrap::before {
    display: block;
    content: '$';
    font-size: 10px;
    margin-right: 2px;
    color: #999;
} */
activity_progress {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
activity_lottery {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.fortune-credit-wrap.active {
    display: flex;
    flex-wrap: wrap;
}
.fortune-credit-type {
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #ffd80a;
    width: 100%;
}
.fortune-credit-now {
    font-size: 16px;
    color: #fff;
    margin-bottom: 4px;
}
.fortune-credit-achievement {
    font-size: 16px;
    color: #aaa;
}
.fortune-credit-achievement::before {
    display: inline-block;
    content: '/';
    margin: 0 3px;
}
.fortune-game-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.goto-luckydraw-btn {
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 66px;
    height: 55px;
    border-radius: 10px 0 10px 0;
    font-size: 16px;
    line-height: 20px;
    background: #D2BF74;
    margin: 0 0 10px 38px;
    color: #fff;
    box-shadow: 0 0 10px rgba(255,215,17,0.7);
    animation: gotoLuckyDrawEffect 0.4s ease 0s infinite normal none;
}
.goto-luckydraw-btn.active {
    display: flex;
}
.luckydraw-times {
    display: flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background: #ebebeb;
    font-size: 10px;
    color: #E05151;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    position: absolute;
    top: -10px;
    right: -10px;
}

.specila-act-ico-wrap {
    display: none;
}

/* Activities */
.activities-item-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
isexpired {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.activities-item {
    display: flex;
    align-items: center;
    width: calc(50% - 10px);
    border-radius: 10px;
    margin: 0 0 20px 0;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.activities-item img {
    max-width: 100%;
    transform: scale(1) rotate(0deg);
    transition: 0.3s;
}
.activities-item:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.activities-item:hover img {
    transform: scale(1.1) rotate(-2deg);
}
.activities-item.expired::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: '活動已截止';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 3;
    position: absolute;
    font-size: 24px;
    color: #ebebeb;
}

/* Point Gift */
.gift-point-info-sec {
    background: #ffd80a;
    min-height: 42px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 16px;
}
.my-gift-point-info {
    display: flex;
    align-items: center;
    min-height: 42px;
    font-size: 18px;
    color: #fff;
    background: #222;
    padding: 0 20px;
    font-weight: 400;
    position: relative;
}
.my-gift-point-info::after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 21px 0 21px 21px;
    border-color: transparent transparent transparent #222;
    position: absolute;
    left: 100%;
}
.gift-point-notice {
    display: flex;
    align-items: center;
    color: #35AD79;
    margin-right: 20px;
    position: relative;
}
.gift-point-notice::before {
    display: inline-block;
    content: '\f101';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
    left: -20px;
    position: absolute;
}
.gift-point-notice:hover {
    text-decoration: underline;
}
.my-gp-credit {
    color: #ffd80a;
    display: inline-block;
    margin: 0 4px;
}
.act-note-parag {
    font-size: 14px;
    color: #e05151;
    margin-bottom: 40px;
    justify-content: flex-start;
}
.act-note-parag::before {
    display: inline-block;
    content: '*';
    margin-right: 4px;
}
.gift-all-wrap {
    flex-direction: column;
    align-items: flex-start;
    min-height: calc(100vh - 600px);
}
.gift-point-range {
    font-size: 24px;
    color: #e05151;
    padding: 0 18px 4px 0;
    border-bottom: 4px solid #e05151;
    margin-bottom: 20px;
}

.gift-items-cnt {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    /* width: 100%; */
    /* margin-bottom: 40px; */
    column-gap: 50px;
    row-gap: 30px;
    /* margin: auto; */
    justify-content: center;
    flex-direction: row;
}

.product-card {
    position: relative;
    width: 350px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #f9f8f3;
  }
  
  .product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  }
  
  .product-image {
    position: relative;
    width: 100%;
    /* height: 250px; */    
    height: 133px;
    overflow: hidden;
    background: no-repeat center center / cover;
  }
  
  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .product-card:hover .product-image img {
    transform: scale(1.1);
  }
  
  .badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff3e3e;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 20px;
  }
  
  .quick-view {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .quick-view:hover {
    background: #000;
  }
  
  .product-content {
    padding: 20px;
  }
  
  .product-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 10px;
    color: #333;
  }
  
  .product-rating {
    display: flex;
    align-items: center;
    margin: 10px 0;
    color: #f4c150;
    font-size: 16px;
  }
  
  .product-rating span {
    color: #777;
    font-size: 14px;
    margin-left: 5px;
  }
  
  .product-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
    min-height:80px;
  }
  
  .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .product-price {
    font-size: 22px;
    font-weight: bold;
    color: #d62c1f;
  }
  
  .product-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background: #27ae60;
    color: #fff;
    font-weight: bold;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s ease;
  }
  
  .product-button:hover {
    background: #219150;
  }

/* Loading Animation */
.loading-animate {
    position: absolute;
    z-index: 9999;
    background: rgba(255,255,255,0.95);
    top: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1750.98px){
    
}
/*=========================================================== Media Query 1490.98px ===================================================*/
@media (max-width: 1490.98px){
    .trial-money-intro {
        margin-left: 55%;
    }
}
/*=========================================================== Media Query 1219.98px ===================================================*/
@media (max-width: 1219.98px){
    .container {
        width: calc(100% - 40px);
    }
    .account-money-wrap {
        width: 90%;
    }
    .main-banner-title {
        font-size: 48px;
    }
    .main-banner-txt {
        font-size: 16px;
    }
    .main-banner-link {
        font-size: 14px;
    }
    .header-info {
        height: 80px;
    }
    .hd-member-ul {
        top: 60px;
    }
    .m-navi-btn {
        visibility: visible;
        right: 0;
    }
    .m-navi-btn.active::before {
        content: '\f060';
        transform: rotate(-90deg);
    }
    .navi-ul {
        display: flex;
        flex-direction: column;
        height: 0;
        transition: 0.3s;
        border-radius: 4px;
        left: calc(100% - 180px);
        padding: 0;
        top: 80px;
        overflow: hidden;
        transform: scaleY(0);
        transform-origin: top;
    }
    .navi-li {
        height: auto;
    }
    .navi-link {
        height: auto;
        justify-content: flex-start;
        background: rgba(255,255,255,0.4);
        padding: 10px 24px;
        margin: 8px 0;
        border-radius: 8px;
        overflow: hidden;
    }
    .navi-link:hover {
        box-shadow: 0 0 10px rgba(255,216,10,0.8);
        background: rgba(255,216,10,0.9);
        color: #2D394B;
    }
    .navi-link:hover::before {
        display: none;
    }
    .navi-li.sub .navi-link::after, .navi-li.sub:hover .navi-link::after {
        top: 50%;
        right: 16px;
        bottom: unset;
        left: unset;
        transform: translate(0,-50%) rotate(-90deg);
        color: #222;
    }
    .navi-li.sub:hover .navi-link::after {
        transform: translate(0,-50%) rotate(0deg);
    }
    .sub-navi-ul, .navi-li.sub:hover .sub-navi-ul {
        position: relative;
        padding: 0 0 0 16px;
        opacity: 1;
        top: 0;
        transform: translate(-50%,0) scaleY(0);
        transform-origin: top;
        background: rgba(0,0,0,0);
        box-shadow: 0 0 0;
        height: 0;
        overflow: hidden;
    }
    .navi-li.sub:hover .sub-navi-ul {
        transform: translate(-50%,0) scaleY(1);
        overflow: unset;
        height: auto;
    }
    .sub-navi-li {
        border-radius: 8px;
        background: #2D394B;
    }
    .sub-navi-link {
        color: #ffd80a;
        padding: 8px 16px;
        display: block;
        width: 100%;
        height: 100%;
    }
    .navi-ul.m-active {
        padding: 10px 20px;
        background: rgba(0,0,0,0.9);
        box-shadow: 0 0 15px rgba(0,0,0,0.3);
        height: auto;
        transform: scaleY(100%);
        z-index: 102;
    }
    .hd-panel {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
    }
    .notice-title-property {
        width: 13%;
    }
    .game-view-mode {
        display: none;
    }
    .bet-game-sec {
        width: 100%;
    }
    .bet-game-cart-sec {
        display: none;
        padding: 50px 20px 16px 20px;
        width: 100%;
        height: 100vh;
    }
    .bet-game-cart-sec.m-active {
        display: block;
        position: fixed;
        top: -40px;
        left: 0;
        z-index: 1000;
        background: #fff;
    }
    .lightbox-effect.active {
        z-index: 1000;
    }
    .lightbox-frame {
        width: calc(100% - 320px);
    }
    .game-item-wrap-in-lightbox {
        display: none;
    }
    .lightbox-game-item-full-rules-wrap {
        display: none;
    }
    .lightbox-game-cart-wrap {
        width: 100%;
    }
    .mb-cart-call-btn {
        visibility: visible;
        position: fixed;
        z-index: 999;
        display: inline-flex;
        font-size: 14px;
        color: #fff;
        right: 20px;
        bottom: 80px;
        padding: 10px 14px;
        cursor: pointer;
        background: #e05151;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.3);
    }
    .mb-cart-call-btn::before {
        display: inline-flex;
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 300;
        content: '\f70e';
        margin-right: 4px;
        transform: translateY(4px);
    }
    .cart-items-mount {
        display: flex;
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        top: -8px;
        right: -8px;
        background: #ebebeb;
        font-size: 10px;
        color: #e05151;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }
    .more-bet-rules-btn {
        display: none;
    }
    .mb-more-bet-rules-btn {
        display: inline-flex;
    }
    .mb-bet-game-cart-close-btn {
        display: flex;
    }
    .preview-order-show.m-active {
        display: block;
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 1030;
        top: 0;
        left: 0;
        background: #fff;
    }
    .preview_frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .preview_dismiss {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 31px;
        height: 31px;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }
    .preview_dismiss::before, .preview_dismiss::after {
        display: block;
        content: '';
        width: 27px;
        height: 1px;
        background: #e05151;
        position: absolute;
    }
    .preview_dismiss::before {
        transform: rotate(-45deg);
    }
    .preview_dismiss::after {
        transform: rotate(45deg);
    }
    .live-games-sec {
        background-size: 40%;
    }
    .trial-money-sec {
        min-height: 400px;
    }
    .trial-money-ex-img {
        width: 45%;
    }
    .ex-img-01 {
        left: 5%;
    }
    .ex-img-03 {
        left: 5%;
    }
    .ex-img-04 {
        left: 5%;
    }
    .trial-money-sec.sec04 {
        min-height: 1000px;
    }
    .apply-tw-lottery-btn {
        display: none;
    }
    .show-bet-item {
        width: 32%;
        margin: 0 calc(4%/2) 20px 0;
    }
    .bet-versus-item {
        width: 32%;
        margin: 0 calc(4%/2) 30px 0;
    }
    .isport-title-wrap {
        padding-left: 10%;
    }
}
/*=========================================================== Media Query 1019.98px ===================================================*/
@media (max-width: 1019.98px){
    .team-data-sec {
        padding-bottom: 250px;
    }
    .team-data-bg {
        transform: translate(36%,20%);
    }
    .team-data-ball {
        transform: translate(-28%,100%) scale(0.8);
    }
    .team-data-container {
        justify-content: center;
    }
    .team-data-dailogue-box {
        width: 70%;
    }
    .banner-wide-wrap {
        width: 100%;
    }
    .banner-sub-wrap {
        width: 100%;
    }
    .banner-sub-item {
        width: calc(100%/3 - 10px);
    }
    .account-data-money {
        font-size: 28px;
    }
    .account-data-gift-point {
        font-size: 28px;
    }
    .account-data-item-m:nth-child(1) {
        margin-bottom: 60px;
    }
    .live-games-sec {
        background-position: 100% 100%;
    }
    .novive-guide-item {
        padding: 0 48px;
        background: #3f90dc;
        border: 1px solid #3f90dc;
        box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    }
    .novice-guide-item-title {
        color: #fff;
    }
    .novice-guide-item-ico::before {
        color: rgba(255,255,255,0.5);
        transform: translate(0,-50%) scale(1.3) rotate(-10deg);
    }
    .hot-news-item {
        width: calc(100%/2 - 16px);
    }
    .show-bet-item.on-index, .show-bet-item.on-index:nth-child(2n), .show-bet-item.on-index:nth-child(3n), .show-bet-item.on-index:nth-child(6n) {
        width: calc(100% - 16px);
    }
    .bet-versus-item.on-index, .bet-versus-item.on-index:nth-child(2n), .bet-versus-item.on-index:nth-child(3n), .bet-versus-item.on-index:nth-child(6n) {
        width: calc(100% - 16px);
    }
    .team-data-versus-wrap.half {
        width: calc(60% - 10px);
    }
    .team-data-ads-wrap {
        width: calc(40% - 10px);
    }
}
/*============================================================= Media Query 991.98px ======================================================*/
@media (max-width: 991.98px){
    .member-form-container {
        width: 50%;
    }
    .sms-verify-container {
        width: 80%;
    }
    .footer_grid:nth-child(1) {
        width: 100%;
        padding-right: 152px;
    }
    .footer_grid:nth-child(2) {
        width: 60%;
        padding-left: 20px;
    }
    .footer_grid:nth-child(3) {
        width: 40%;
    }
    .checkbtn-s, .checkbtn-m, .checkbtn-l {
        padding: 8px 16px;
    }
    .checkbtn-l {
        width: auto;
        min-width: unset;
        min-height: unset;
    }
    .account-info-side-wrap {
        width: 100%;
        padding-right: 0;
        position: sticky;
        z-index: 5;
    }
    .account-info-main-wrap {
        width: 100%;
    }
    .account-money-wrap {
        width: 90%;
    }
    .acc-side-panel-ul {
        flex-direction: row;
        justify-content: space-between;
    }
    .acc-side-panel-list {
        width: calc(25% - 10px);
    }
    .acc-data-sec-left {
        width: 35%;
    }
    .account-basic-column {
        flex-wrap: wrap;
    }
    .edit-data-module.active {
        margin-top: 10px;
        width: 100%;
    }
    .form-input-basic-s {
        width: 80%;
    }
    .show-pwd-btn-for-basic-info {
        right: 23%;
    }
    .info-note {
        width: 80%;
    }
    .game-today-container {
        min-height: 500px;
    }
    .game-today-preview-item {
        width: 100%;
        flex-direction: column;
        height: auto;
        margin-bottom: 40px;
    }
    .game-today-preview-item:nth-last-child(1) {
        margin-bottom: 0;
    }
    .game-today-time-info {
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 0 0 20px;
    }
    .game-today-date {
        right: 2px;
    }
    .game-today-date-set::before {
        height: 22px;
        transform: rotate(30deg) translate(3px,8px);
    }
    .game-today-date-set {
        width: 75px;
        height: auto;
    }
    .game-today-day {
        position: static;
        margin: 0 8px;
        transform: translateY(4px);
    }
    .game-today-time {
        margin-top: unset;
        position: relative;
        transform: translateY(4px);
        z-index: 3;
    }
    .game-today-team-info {
        margin: 12px 0;
        justify-content: flex-start;
        padding: 0 20px;
    }
    .game-result-container {
        min-height: 1000px;
    }
    .game-result-item-wrap {
        flex-wrap: wrap;
    }
    .game-result-item {
        width: 100%;
        margin-bottom: 40px;
    }
    .game-result-item-info {
        padding: 12px 24px;
        height: auto;
        flex-direction: column;
    }
    .game-result-item-info-list:nth-child(2) {
        font-size: 16px;
    }
    .main-slider-holder {
        padding-bottom: 0;
    }
    .main-slider-item.together88 .main-banner-txt-wrap {
        right: 0;
        transform: translate(-50%,-40%);
    }
    .main-slider-item.referrer img {
        right: 0;
        left: -100%;
    }
    .main-slider-item.referrer .main-banner-txt-wrap {
        left: 10px;
        transform: translate(0,130%);
        align-items: center;
        background: rgba(0,0,0,0.7);
        padding-bottom: 10px;
    }
    .m-quick-link-area {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 101;
        box-shadow: 0 -3px 15px rgba(0,0,0,0.2);
    }
    #chatra.chatra--side-bottom {
        bottom: 120px !important;
    }
    .m-quick-panel-wrap {
        display: flex;
        position: relative;
    }
    .m-quick-panel-link {
        width: 25%;
        height: 100px;
        padding: 10px 0;
        font-size: 14px;
        color: #ccc;
        background: #222;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: relative;
        transition: 0.3s;
    }
    .m-quick-panel-link:hover {
        color: #3f90dc;
    }
    .m-quick-panel-link::before {
        display: block;
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 300;
        font-size: 36px;
        height: 40px;
    }
    .m-quick-panel-link:nth-child(1)::before {
        content: '\f145';
    }
    .m-quick-panel-link:nth-child(2)::before {
        content: '\f733';
    }
    .m-quick-panel-link:nth-child(3)::before {
        content: '\f0ca';
    }
    .m-quick-panel-link:nth-child(4)::before {
        font-family: 'Font Awesome 5 Brands';
        content: '\f3ac';
        animation: fireBurning 2s ease 0s infinite alternate none;
        transform: scale(1.1);
    }
    .lottery-details-table-head {
        display: none;
    }
    .lottery-details-table-item-ul {
        flex-direction: column;
        padding: 0 0 40px 15px;
    }
    .lottery-details-table-item-ul::before {
        z-index: 2;
        font-size: 24px;
        top: unset;
        bottom: 0;
    }
    .lottery-details-table-col:nth-child(1),
    .lottery-details-table-col:nth-child(2),
    .lottery-details-table-col:nth-child(3),
    .lottery-details-table-col:nth-child(4),
    .lottery-details-table-col:nth-child(5),
    .lottery-details-table-col:nth-child(6) {
        width: 100%;
    }
    .lottery-details-table-col:nth-child(7),
    .lottery-details-table-col:nth-child(8) {
        width: auto;
        position: absolute;
        z-index: 2;
        font-size: 18px;
    }
    .lottery-details-table-col:nth-child(7) {
        /* right: 80px; */
        bottom: 12px;
    }
    .lottery-details-table-col:nth-child(8) {
        right: 200px;
        bottom: 12px;
    }
    .lottery-details-table-col::before {
        display: inline-flex;
        content: attr(data-title);
        width: 80px;
        color: #3f90dc;
    }
    .bill-main-info {
        flex-direction: column;
    } 
    .bill-main-info-list:nth-child(1),
    .bill-main-info-list:nth-child(2),
    .bill-main-info-list:nth-child(3) {
        width: 100%;
        padding: 4px 0 4px 0;
        border-right: 0;
    }
    .bill-info-header {
        display: none;
    }
    .bill-betted-result-item {
        flex-direction: column;
        padding: 10px 0;
    }
    .bill-betted-result-col:nth-child(1),
    .bill-betted-result-col:nth-child(2),
    .bill-betted-result-col:nth-child(3),
    .bill-betted-result-col:nth-child(4),
    .bill-betted-result-col:nth-child(5),
    .bill-betted-result-col:nth-child(6),
    .bill-betted-result-col:nth-child(7),
    .bill-betted-result-col:nth-child(8) {
        width: 100%;
    }
    .bill-betted-result-col::before {
        display: inline-flex;
        content: attr(data-title);
        color: #ffd80a;
        width: 80px;
    }
    .mb-cart-call-btn {
        bottom: 180px;
    }
    .lightbox-frame {
        width: calc(100% - 200px);
    }
    .game-result-series {
        justify-content: center;
    }
    .game-result-table-header {
        display: none;
    }
    .game-result-date {
        flex-direction: column;
        font-size: 14px;
        height: 80px;
        padding: 18px 0 0 0;
    }
    .game-result-date::before {
        display: none;
    }
    .gr-table-item {
        flex-wrap: wrap;
        justify-content: center;
        background: #f8f8f8;
        margin-bottom: 10px;
    }
    .gr-table-item:nth-child(2n) {
        background: #f8f8f8;
    }
    .gr-table-item-block.gr-gameinfo {
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 0;
    }
    .gr-table-game-serial-no {
        color: #ebebeb;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        background: #666;
        padding: 4px 0;
    }
    .gr-table-game-time {
        margin: 0 0 0 8px;
        color: #ebebeb;
    }
    .gr-table-game-league {
        width: 100%;
        display: flex;
        color: #fff;
        justify-content: center;
        font-size: 16px;
        padding: 6px 0;
        background: #35AD79;
    }
    .gr-table-game-team {
        flex-direction: row;
        width: 100%;
        align-items: center;
        padding: 36px 8px 6px 8px;
    }
    .gr-table-game-team::before {
        display: inline-flex;
        content: 'VS';
        font-size: 14px;
        font-weight: bold;
        color: #e05151;
        margin: 0 10px;
        order: 2;
    }
    .gr-table-game-away-team, .gr-table-game-home-team {
        flex-direction: column;
        width: 50%;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
    }
    .gr-table-game-away-team {
        margin: 0;
        order: 1;
    }
    .gr-table-game-home-team {
        order: 3;
    }
    .gr-table-game-away-team.winned::after, .gr-table-game-home-team.winned::after {
        position: absolute;
        bottom: 100%;
        font-family: 'Font Awesome 5 Pro';
        font-style: normal;
        font-weight: 900;
        display: flex;
        content: '\f2eb';
        color: #ffd80a;
        background: rgba(255,255,255,0);
    }
    .gr-table-item-block.gr-rounds-board {
        width: calc(100% - 94px);
        border-top: 1px solid #ebebeb;
        padding-left: 20px;
        margin: 50px 0 0 0;
    }
    .gr-table-item-block.gr-rounds-board::before, .gr-table-item-block.gr-rounds-board::after {
        display: inline-flex;
        font-size: 14px;
        color: #ccc;
        position: absolute;
        left: 0;
    }
    .gr-table-item-block.gr-rounds-board::before {
        content: '客';
        top: 13px;
    }
    .gr-table-item-block.gr-rounds-board::after {
        content: '主';
        bottom: 13px;
    }
    .gr-table-item-round::before {
        display: flex;
        content: attr(data-tag);
        position: absolute;
        top: -40px;
        font-size: 12px;
        color: #666;
    }
    .gr-table-item-extended-round::before {
        display: flex;
        position: absolute;
        top: -40px;
        content: '延長';
        font-size: 12px;
        color: #666;
    }
    .gr-table-item-block.gr-final-result {
        position: relative;
        border-top: 1px solid #ebebeb;
        margin: 50px 0 0 0;
    }
    .gr-table-item-block.gr-final-result::before {
        display: flex;
        position: absolute;
        top: -30px;
        content: '結果';
        font-size: 12px;
        color: #666;
    }
    .featured-game-table-header {
        display: none;
    }
    .featured-game-table-item {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 14px 0 0 14px;
    }
    .featured-game-table-item span, .featured-game-table-item a {
        width: 100%;
        display: flex;
    }
    .featured-game-table-item span::before, .featured-game-table-item a::before {
        display: inline-flex;
        width: 80px;
        color: #222;
    }
    .featured-game-table-time::before {
        content: '時間';
    }
    .featured-game-table-series::before {
        content: '種類';
    }
    .featured-game-table-league::before {
        content: '聯盟';
    }
    .featured-game-table-away-team.with-data, .featured-game-table-home-team.with-data {
        color: #e05151;
    }
    .featured-game-table-away-team::before {
        content: '客隊';
        text-decoration: none;
    }
    .featured-game-table-home-team::before {
        content: '主隊';
        text-decoration: none;
    }
    .featured-game-table-broadcast::before {
        content: '電視轉播';
    }
    .featured-game-table-rule-type::before {
        content: '場次';
    }
    .featured-game-table-panel {
        height: auto;
        justify-content: flex-end;
    }
    .featured-game-table-panel::before {
        content: '';
    }
    .featured-game-panel-ul {
        transform: scale(1);
        position: static;
        display: flex;
        flex-direction: row;
        background: none;
        box-shadow: 0 0 0;
        width: auto;
        padding: 14px 14px 14px 0;
    }
    .featured-game-panel-list:nth-child(1) {
        margin: 0 40px 0 0;
    }
    .featured-game-panel-list {
        display: flex;
        font-size: 14px;
        align-items: center;
    }
    .featured-game-panel-list::before {
        display: inline-flex;
        font-family: 'Font Awesome 5 Pro';
        font-weight: 300;
        font-style: normal;
        font-size: 14px;
        content: '\f324';
        margin-right: 4px;
        transform: translateY(0px);
    }
    .preview_frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .member-rights-list {
        font-size: 14px;
        padding: 12px 18px;
    }
    .trial-money-sec.sec03 {
        min-height: unset;
    }
    .trial-money-sec.sec04 {
        min-height: 700px;
    }
    .trial-money-intro-title {
        font-size: 24px;
    }
    .trial-money-intro-parag {
        font-size: 12px;
    }
    .trial-money-intro-parag.dark {
        font-size: 12px;
    }
    .trial-money-article-link {
        font-size: 14px;
    }
    .novive-guide-item {
        width: 100%;
        height: 120px;
    }
    .novice-guide-item-title {
        font-size: 24px;
    }
    .novice-guide-item-ico::before {
        font-size: 96px;
    }
    .trial-money-legend {
        flex-direction: column;
    }
    .trial-money-legend-img {
        width: 100%;
    }
    .trial-money-legend-parag {
        width: calc(100% - 200px);
        margin-bottom: 16px;
    }
    .activities-item-wrap {
        flex-direction: column;
    }
    .activities-item {
        width: 100%;
    }
    .blank-info-setting-wrap {
        height: calc(100% - 280px);
        justify-content: flex-start;
        overflow-y: scroll;
    }
    .news-item {
        width: 49%;
        margin-right: 2%;
    }
    .news-item:nth-child(3n) {
        margin: 0 2% 20px 0;
    }
    .news-item:nth-child(2n), .news-item:nth-child(6n) {
        margin: 0 0 20px 0;
    }
    .news-annouced-date {
        font-size: 12px;
    }
    .news-origin {
        font-size: 12px;
    }
    .show-bet-item {
        width: 48%;
        margin: 0 4% 20px 0;
    }
    .show-bet-item:nth-child(2n) {
        margin: 0 0 20px 0;
    }
    .show-bet-item:nth-child(3n) {
        margin: 0 4% 20px 0;
    }
    .show-bet-item:nth-child(6n) {
        margin: 0 0 20px 0;
    }
    .bet-versus-item {
        width: 48%;
        margin: 0 4% 30px 0;
    }
    .bet-versus-item:nth-child(2n) {
        margin: 0 0 30px 0;
    }
    .bet-versus-item:nth-child(3n) {
        margin: 0 4% 30px 0;
    }
    .bet-versus-item:nth-child(6n) {
        margin: 0 0 30px 0;
    }
    .about-block {
        font-size: 18px;
    }
    .about-isport-sec {
        padding: 10px 0;
    }
    .about-isport-wrap {
        height: auto;
        flex-direction: row;
    }
    .isport-title-wrap {
        width: 50%;
        padding-left: 20px;
        align-items: center;
    }
    .about-isport-title:nth-child(1) {
        width: 100%;
    }
    .about-isport-image-wrap {
        position: static;
        width: 50%;
        height: auto;
        padding-left: 20px;
    }
    .gaming-lol-versus-wrap {
        padding: 0 10%;
    }
    .ta-data-team-name {
        font-size: 14;
    }
    .team-analytic-data-item > span {
        font-size: 14px;
    }
    .team-date-rate-btn {
        font-size: 16px;
    }
    .side-floating-box {
        bottom: 160px;
    }
    .gift-item {
        width: 47%;
        margin-right: 3%;
    }
    .gift-item:nth-child(2n) {
        margin-right: 0;
    }
    .gift-item:nth-child(4n) {
        margin-right: unset;
    }
}
/*=========================================================== Media Query 775.98px ===================================================*/
@media (max-width: 775.98px){
    .main-banner-img {
        display: none;
        width: 100%;
        transition: none;
    }
    .main-banner-img.mobile {
        display: block;
    }
    .content-sec {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .mrq-list {
        justify-content: flex-start;
    }
    .mrq-panel {
        right: 0;
    }
    .member-form-container {
        width: 100%;
    }
    .footer_grid:nth-child(1), .footer_grid:nth-child(2) {
        width: 100%;
        padding-right: 0;
    }
    .footer_grid:nth-child(2) {
        width: 70%;
        padding-left: 20px;
    }
    .footer_grid:nth-child(3) {
        width: 30%;
    }
    .team-data-dailogue-box {
        width: 100%;
    }
    .team-data-sec {
        padding-bottom: 220px;
    }
    .team-data-sec-parag {
        font-size: 16px;
    }
    .team-data-dailogue-subtitle {
        font-size: 24px;
        text-align: center;
    }
    .acc-side-panel-link {
        padding-left: 0;
        justify-content: center;
    }
    .account-data-sec {
        flex-wrap: wrap;
        padding: 10px;
        margin-bottom: 12px;
    }
    .acc-data-sec-left {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        border-bottom: 1px solid #ebebeb;
    }
    .invite-line-at-btn {
        position: absolute;
        right: 0;
    }
    .account-photo {
        margin: 0 0 10px 0;
    }
    .account-photo-frame {
        width: 80px;
        height: 80px;
    }
    .edit-photo-btn {
        right: unset;
        left: calc(50% + 50px);
    }
    .edit-photo-btn::before {
        font-size: 14px;
    }
    .nickname {
        width: calc(100% - 120px);
        position: absolute;
        text-align: left;
        top: 10px;
        left: 140px;
        font-size: 16px;
    }
    .realname {
        width: calc(100% - 120px);
        position: absolute;
        text-align: left;
        top: 40px;
        left: 140px;
    }
    .account-primary {
        padding: 0 0 20px 0;
    }
    .acc-data-sec-right {
        width: 100%;
    }
    .account-money-wrap {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }
    .account-data-item-m, .account-data-item-m:nth-child(1), .account-data-item-m:nth-child(2), .account-data-item-m:nth-child(3) {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0 0 16px;
        width: auto;
    }
    .account-data-item-m::before {
        display: none;
    }
    .account-rank-wrap {
        width: 50%;
        flex-direction: row;
        justify-content: space-around;
    }
    .account-data-item-s {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .account-data-item-s::before {
        display: none;
    }
    .account-data-rank {
        font-size: 20px;
    }
    .account-data-money {
        font-size: 20px;
    }
    .account-data-gift-point {
        font-size: 20px;
    }
    .financial-list {
        width: 25%;
        justify-content: center;
    }
    .financial-link {
        flex-direction: column;
        justify-content: center;
    }
    .financial-link::before {
        margin-right: 0;
    }
    .red_point_production_item {
        width: 100%;
    }
    .sec-headline-xl.default {
        font-size: 48px;
    }
    .now-live-games-wrap {
        flex-direction: column;
        width: 100%;
    }
    .now-live-games-item {
        margin-bottom: 24px;
    }
    .predict-game-wrap {
        flex-direction: column;
    }
    .predict-game-item {
        width: 100%;
        margin-bottom: 20px;
    }
    .novice-wrap, .faq-wrap {
        width: 100%;
    }
    .novice-wrap {
        margin-bottom: 20px;
    }
    .money-details-table-head {
        display: none;
    }
    .money-details-table-ul {
        flex-direction: column;
        border-bottom: 1px solid #ebebeb;
    }
    .money-details-table-ul:nth-child(even) {
        background: #f8f8f8;
    }
    .money-details-table-list:nth-child(1),
    .money-details-table-list:nth-child(2),
    .money-details-table-list:nth-child(3),
    .money-details-table-list:nth-child(4),
    .money-details-table-list:nth-child(5) {
        width: 100%;
    }
    .money-details-table-list::before {
        display: inline-flex;
        content: attr(data-title);
        color: #3f90dc;
        width: 100px;
    }
    .m-navi-btn::before {
        font-size: 20px;
    }
    .hd-member-btn::before {
        font-size: 20px;
    }
    .navi-ul {
        width: 100vw;
        left: 0;
    }
    .site-notice-table-head {
        display: none;
    }
    .site-notice-item {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        padding: 10px 0 40px 0;
        position: relative;
    }
    .notice-title-property {
        width: auto;
    }
    .notice-title-txt {
        margin-left: 10px;
        width: calc(100% - 20px);
    }
    .notice-annouced-date {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
    .notice-annouced-time {
        position: absolute;
        bottom: 10px;
        left: 80px;
    }
    .lottery-details-table-col:nth-child(7),
    .lottery-details-table-col:nth-child(8) {
        font-size: 16px;
    }
    .game-today-series-list {
        width: 40px;
        margin: 0 50px;
    }
    .game-today-series-list::before {
        font-size: 48px;
    }
    .game-result-filter-list::before {
        font-size: 48px;
    }
    .game-result-filter-list {
        width: 80px;
        margin: 0 30px;
    }
    .normal-game-sub-filter-wrap {
        flex-direction: column;
        align-items: center;
    }
    .sub-filter-item-title {
        font-size: 14px;
    }
    .sub-filter-item-wrap {
        margin: 12px 0;
        width: calc(50% - 20px);
        height: 40px;
    }
    /*.sub-filter-item-wrap:nth-child(1) .sub-filter-dropdown,
    .sub-filter-item-wrap:nth-child(2) .sub-filter-dropdown {
        max-width: 40%;
        width: auto;
    }*/
    .normal-game-series-filter-wrap {
        margin-bottom: 0;
    }
    .m-quick-panel-link {
        height: 60px;
        font-size: 12px;
    }
    .m-quick-panel-link::before {
        font-size: 24px;
        height: 28px;
    }
    #chatra.chatra--side-bottom {
        bottom: 80px !important;
    }
    .mb-cart-call-btn {
        bottom: 140px;
    }
    .account-secondary {
        flex-wrap: wrap;
        justify-content: center;
    }
    .invite-code-panel {
        width: 100%;
        justify-content: center;
        margin-top: 20px;
    }
    .account-data-name-2 {
        margin-right: 10px;
    }
    .invite-line-at-btn {
        margin-left: 0;
    }
    .featured-game-table-date {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .featured-game-table-date::after {
        display: flex;
        content: '';
        width: 80px;
        height: 3px;
        background: #3f90dc;
        margin-top: 6px;
    }
    .table-switch-ul {
        width: 100%;
    }
    .table-switch-li {
        width: 25%;
        font-size: 14px;
    }
    .preview_frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .game-today-preview-wrap {
        margin: 20px 0 20px 0;
    }
    .main-sec-more-btn {
        font-size: 14px;
        padding: 4px 40px;
        background: #e05151;
        color: #fff;
        border: 1px solid #e05151
    }
    .game-result-filter-ul {
        margin-bottom: 20px;
    }
    .game-result-item-wrap {
        margin-bottom: 0;
    }
    .bet-btn:hover {
        box-shadow: -1px -1px 2px rgba(0,0,0,0.05),
                -2px -2px 2px rgba(0,0,0,0.02),
                1px 1px 2px rgba(0,0,0,0.1),
                2px 2px 4px rgba(0,0,0,0.1),
                inset 1px 1px 3px rgba(0,0,0,0);
        background: #f8f8f8;
    }
    .bet-btn.chosen:hover {
        background: #3f90dc;
        box-shadow: -1px -1px 2px rgba(255,255,255,1),
                    -1px -1px 1px rgba(0,0,0,0),
                    1px 1px 2px rgba(255,255,255,1),
                    2px 2px 4px rgba(0,0,0,0),
                    inset 1px 1px 3px rgba(0,0,0,0.5);
    }
    .bet-btn.chosen:hover .team-prop,
    .bet-btn.chosen:hover .bet-condition,
    .bet-btn.chosen:hover .bet-odds {
        color: #fff;
    }
    .live-games-sec {
        background-attachment: unset;
        background-position: 100% 100%;
        background-size: 50%;
        min-height: 500px;
    }
    /*.hint-tag::after {
        display: none;
    }*/
    .trial-money-sec {
        flex-direction: column;
        min-height: unset;
    }
    .trial-money-sec.sec02 {
        min-height: unset;
    }
    .trial-money-ex-img {
        position: static;
        width: 60%;
    }
    .trial-money-intro {
        width: 100%;
        padding: 0 100px;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .trial-money-intro-parag {
        text-align: center;
    }
    .crumb-list {
        font-size: 12px;
        margin-right: 28px;
    }
    .crumb-list::before {
        font-size: 12px;
        right: -18px;
    }
    .sub-filter-item-wrap:nth-child(3) {
        display: none;
    }
    .no-predict-games {
        padding-bottom: 60%;
        background-size: 150%;
        background-position: 100% 100%;
        align-items: flex-start;
    }
    .hot-news-item {
        width: calc(100% - 16px);
    }
    .hot-news-item-image-frame img {
        height: auto;
    }
    .content-sec.about-intro {
        display: flex;
        flex-wrap: wrap;
    }
    .container.about-block-wrap {
        flex-direction: column;
        width: 100%;
        margin: 0 0 20px 0;
    }
    .about-block {
        width: 100%;
        flex-direction: column;
        margin-bottom: 40px;
        font-size: 14px;
    }
    .about-block::after {
        width: 5px;
        height: 50px;
        top: 99%;
        left: calc(50% - 5px);
    }
    .about-block img {
        width: 50%;
    }
    .game-series-filter-item {
        width: calc(100%/4 - 10px);
    }
    .sec-headline-large.gaming-live-lol {
        font-size: 24px;
    }
    .sec-headline-large.activity {
        font-size: 24px;
    }
    .gaming-lol-versus-wrap {
        padding: 0;
    }
    .gaming-live-lol-btn-wrap {
        margin: 10px 0;
        width: 100%;
    }
    .team-data-versus-box {
        width: 100%;
    }
    .team-data-panel-mask {
        overflow: hidden;
    }
    /*.team-data-panel-wrap::before, .team-data-panel-wrap::after {
        display: inline-block;
        content: '';
        width: 40px;
        height: 100%;
        position: absolute;
    }*/
    .team-data-panel-btn {
        flex-shrink: 0;
    }
    .team-data-panel-btn.go-back {
        margin-right: 50px;
    }
    .team-analytic-data-item {
        flex-wrap: wrap;
        height: auto;
        padding: 14px;
    }
    .ta-data-team-name {
        width: 100%;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 2px;
        margin-bottom: 10px;
    }
    .ta-data-participated {
        width: auto;
        margin-right: 10px;
    }
    .team-analytic-data-item > span {
        margin-bottom: 8px;
    }
    .ta-data-winned {
        width: auto;
        margin-right: 10px;
    }
    .ta-data-draw {
        width: auto;
        margin-right: 10px;
    }
    .ta-data-losed {
        width: auto;
    }
    .team-data-item-column.option-name {
        width: 40%;
    }
    .ta-data-victory-rate {
        width: 100%;
    }
    .team-data-versus-wrap.half {
        width: 100%;
    }
    .team-data-ads-wrap {
        display: none;
    }
    .team-data-panel-btn-box {
        width: 100%;
    }
    .side-floating-box {
        bottom: 120px;
    }
}
/*=========================================================== Media Query 697.98px ===================================================*/
@media (max-width: 697.98px){
    .account-primary {
        flex-direction: column;
    }
    .account-money-wrap {
        width: 100%;
    }
    .account-rank-wrap {
        width: 100%;
    }
    .account-basic-item {
        flex-wrap: wrap;
        border-left: 5px solid #3f90dc;
    }
    .account-basic-label {
        width: 100%;
        height: auto;
        border-left: 0;
        display: inline-flex;
        margin-bottom: 10px;
    }
    .account-basic-note {
        position: static;
        display: inline-flex;
        margin-left: 8px;
    }
    .account-basic-column {
        padding-left: 18px;
        width: 100%;
    }
    .change-verify-form {
        margin-left: 18px;
    }
    .verify-sms-notetxt-2 {
        margin-left: 18px;
    }
    .edit-basic-btn {
        width: 40%;
    }
    .main-slider-item img {
        left: -50%;
    }
    .main-banner-txt-wrap {
        align-items: center;
        width: calc(100% - 20px);
        right: unset;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .main-banner-title {
        font-size: 36px;
    }
    #chatra.chatra--side-bottom {
        bottom: 80px !important;
    }
    .game-today-series-list {
        width: 40px;
        margin: 0 40px;
    }
    .game-today-series-list::before {
        font-size: 48px;
    }
    .sec-headline-xl.default {
        font-size: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .game-today-team-info {
        width: 100%;
    }
    .game-today-away-team, .game-today-home-team {
        max-width: calc(50% - 10px);
    }
    .live-game-list-btn.on-index {
        font-size: 14px;
    }
    .live-game-list-btn.on-index::before {
        font-size: 14px;
    }
    .live-game-next-info {
        flex-direction: column;
        padding: 12px 16px;
    }
    .live-game-next-versus {
        margin: 12px 0;
    }
    .game-info-head {
        flex-direction: column;
        height: auto;
    }
    .game-info-head-part-left {
        width: 100%;
    }
    .game-info-head-part-left::after {
        display: none;
    }
    .game-info-head-part-right {
        width: 100%;
    }
    .bet-rule-wrap {
        flex-wrap: wrap;
    }
    .sub-rule-name {
        width: calc(100% - 34px);
        margin-bottom: 8px;
    }
    .sub-rule-pass {
        margin: 0 0 8px 8px;
    }
    .team-prop {
        max-width: 50%;
    }
    .normal-game-series-filter-frame {
        padding-bottom: 5px;
    }
    .game-series-filter-item {
        font-size: 14px;
        padding-top: 40px;
    }
    .game-series-filter-item::before {
        font-size: 36px;
        line-height: 36px;
    }
    .lightbox-frame {
        width: calc(100% - 80px);
    }
    .sub-rule-name.in-cart {
        width: auto;
        margin-bottom: 0;
    }
    .lightbox-dismiss-btn::before {
        font-size: 18px;
    }
    .lightbox-dismiss-btn, .score-board-dismiss-btn {
        width: 20px;
        height: 20px;
        top: -20px;
        right: -20px;
    }
    .mb-cart-call-btn {
        bottom: 140px;
    }
    .game-result-date {
        font-size: 12px;
        height: 60px;
        padding: 8px 0 0 0;
    }
    .game-result-date::before {
        font-size: 16px;
    }
    .gr-table-game-away-team, .gr-table-game-home-team {
        width: 100%;
        justify-content: center;
    }
    .gr-table-item-block.gr-rounds-board {
        margin: 80px 0 0 0;
    }
    .gr-table-item-block.gr-final-result {
        margin: 80px 0 0 0;
    }
    .preview_frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .live-game-null-block-title.on-index {
        font-size: 20px;
    }
    .live-game-ready-msg.on-index {
        font-size: 20px;
    }
    .live-game-ready-hour.on-index, .live-game-ready-minute.on-index {
        font-size: 36px;
    }
    .trial-money-legend-parag {
        width: 100%;
        background: #fff;
        color: #666;
        box-shadow: 0 0 0;
    }
    .no-predict-games-title {
        font-size: 18px;
    }
    .no-predict-games-subtitle {
        font-size: 14px;
    }
    .nga-ul {
        flex-direction: column;
        align-items: center;
    }
    .nga-list {
        padding: 20px 20px;
    }
    .qna-img-s {
        max-width: 50%;
    }
    .news-title {
        font-size: 14px;
    }
    .faq-flow-wrap {
        width: 100%;
    }
    .show-bet-item, .show-bet-item:nth-child(3n) {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .bet-versus-item, .bet-versus-item:nth-child(3n) {
        width: 100%;
        margin: 0 0 30px 0;
    }
    .bet-versus-item.on-index, .bet-versus-item.on-index:nth-child(2n), .bet-versus-item.on-index:nth-child(3n), .bet-versus-item.on-index:nth-child(6n) {
        padding: 16px 20px;
    }
    .sub-filter-item-wrap, .sub-filter-item-wrap:nth-child(1) {
        width: 100%;
    }
    .about-isport-wrap {
        flex-direction: column;
    }
    .isport-title-wrap {
        width: 100%;
        margin-bottom: 10px;
    }
    .about-isport-image-wrap {
        width: 70%;
    }
    .bonus-step-goal {
        font-size: 12px;
    }
    .bonus-step-wrap {
        padding: 68px 20px 8px 20px;
    }
    .bonus-step-goal.step01 {
        left: 20px;
        transform: translateX(0);
        align-items: flex-start;
    }
    .bonus-step-goal.step02 {
        transform: translate(0,0);
    }
    .bonus-step-goal.step03 {
        right: 20px;
        transform: translateX(0);
        align-items: flex-end;
    }
    .recommend-report-title {
        font-size: 16px;
    }
    .recommend-report-date {
        font-size: 14px;
    }
    .gaming-lol-versus-table-header {
        display: none;
    }
    .gaming-lol-versus-table-item {
        flex-wrap: wrap;
        background: rgba(0,0,0,0.75);
    }
    .gaming-lol-versus-table-item-column::before {
        display: inline-flex;
        content: attr(data-hdr);
        color: #ffd80a;
        margin-right: 4px;
    }
    .gaming-lol-versus-table-header-column.serial, .gaming-lol-versus-table-item-column.serial {
        width: 100%;
    }
    .gaming-lol-versus-table-header-column.team-name, .gaming-lol-versus-table-item-column.team-name {
        width: 100%;
    }
    .gaming-lol-versus-table-header-column.team-en-name, .gaming-lol-versus-table-item-column.team-en-name {
        width: 100%;
    }
    .gaming-lol-versus-table-header-column.team-nick-name, .gaming-lol-versus-table-item-column.team-nick-name {
        width: 100%;
    }
    .gaming-live-lol-play-div {
        align-items: unset;
    }
    .gaming-live-lol-play-div::after {
        top: 50%;
        transform: translateY(-50%);
    }
    .gaming-live-lol-play-div {
        min-height: 250px;
    }
    .gaming-live-lol-play-div iframe {
        width: 100%;
        height: auto;
    }
    .gaming-live-lol-play-div #video_embed {
        width: 100%;
    }
    .gaming-live-lol-play-div #chat_embed {
        display: none;
    }
    .team-data-versus-league {
        font-size: 14px;
    }
    .team-data-versus-date, .team-data-versus-time {
        font-size: 14px;
    }
    .team-data-versus-info-main {
        flex-direction: column;
    }
    .team-data-versus-sphere {
        margin: 24px 0;
    }
    .team-data-item-column.visit {
        display: flex;
        flex-direction: column;
        width: 50%;
    }
    .team-data-item-column.home {
        display: flex;
        flex-direction: column;
        width: 50%;
    }
    .team-basic-data-item-column {
        font-size: 14px;
    }
    .team-basic-data-item-column.prop {
        width: 60%;
    }
    .team-data-item {
        align-items: flex-start;
    }
    .team-data-ball {
        transform: translate(-28%,100%) scale(0.5)
    }
    .team-data-bg {
        transform: translate(36%,60%) scale(0.9)
    }
}
/*=========================================================== Media Query 539.98px ===================================================*/
@media (max-width: 539.98px){
    .grid_01 {
        width: 100%;
    }
    .grid_02 {
        width: 100%;
    }
    .grid_03 {
        width: 100%;
    }
    .grid_04 {
        width: 100%;
    }
    .grid_05 {
        width: 100%;
    }
    .grid_06 {
        width: 100%;
    }
    .grid_07 {
        width: 100%;
    }
    .grid_08 {
        width: 100%;
    }
    .grid_09 {
        width: 100%;
    }
    .grid_10 {
        width: 100%;
    }
    .grid_11 {
        width: 100%;
    }
    .grid_12 {
        width: 100%;
    }
    .account-secondary {
        flex-wrap: wrap;
        padding: 20px 0;
    }
    .invite-code-panel {
        margin-top: 20px;
    }
    .acc-side-panel-link {
        font-size: 14px;
    }
    .hot-news-slider-frame {
        min-height: 200px;
    }
    .banner-sub-wrap {
        flex-direction: column;
    }
    .banner-sub-item {
        width: 100%;
        margin-bottom: 20px;
    }
    #chatra.chatra--side-bottom {
        bottom: 80px !important;
    }
    .m-quick-panel-link {
        font-size: 12px;
        height: 60px;
    }
    .m-quick-panel-link::before {
        font-size: 20px;
        height: 28px;
    }
    .lottery-details-table-col:nth-child(7),
    .lottery-details-table-col:nth-child(8) {
        font-size: 14px;
        white-space: nowrap;
    }
    .game-today-series-list {
        width: 40px;
        margin: 0 30px;
    }
    .game-today-series-list::before {
        font-size: 36px;
    }
    .game-result-filter-list::before {
        font-size: 36px;
    }
    .sec-headline-xl.default {
        font-size: 32px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .predict-game-wrap {
        padding: 0;
    }
    .game-result-filter-list {
        width: 60px;
        margin: 0 20px;
    }
    .game-today-time-info {
        width: 160px;
        padding: 0 0 0 14px;
    }
    .game-today-date-set {
        width: 60px;
    }
    .game-today-date-set::before {
        height: 18px;
        transform: rotate(30deg) translate(2px,5px);
    }
    .game-today-month, .game-today-date {
        font-size: 18px;
    }
    .game-today-day {
        transform: translateY(2px);
    }
    .game-today-time {
        transform: translateY(2px);
    }
    .game-today-league {
        font-size: 16px;
        max-width: unset;
        text-align: right;
        position: relative;
        padding-left: 20px;
        margin: 14px 0;
    }
    .game-today-league::before {
        right: unset;
        left: 20px;
    }
    .game-today-away-team, .game-today-home-team {
        font-size: 14px;
    }
    .game-today-team-info::before {
        font-size: 14px;
    }
    .in-faq {
        top: 32%;
    }
    .mb-cart-call-btn {
        bottom: 140px;
    }
    .normal-game-series-filter-wrap {
        padding: 0 28px;
    }
    .game-series-filter-item {
        padding-top: 28px;
        width: calc(100%/3 - 10px);
        font-size: 12px;
    }
    .game-series-filter-prev-btn {
        left: 0;
    }
    .game-series-filter-next-btn {
        right: 0;
    }
    .game-series-filter-item::before {
        font-size: 32px;
        line-height: 20px;
    }
    .game-serial-number {
        font-size: 14px;
    }
    .sec-headline-m::before, .sec-headline-m::after {
        width: 60px;
    }
    .lightbox-frame {
        width: calc(100% - 60px);
    }
    .cart-game-info {
        justify-content: flex-start;
    }
    .cart-game-serial-number {
        font-size: 12px;
        margin-right: 4px;
    }
    .cart-game-awayteam-name, .cart-game-hometeam-name {
        font-size: 12px;
        width: auto;
    }
    .cart-game-awayteam-name-wrap, .cart-game-hometeam-name-wrap {
        margin-right: 4px;
    }
    .cart-versus {
        font-size: 12px;
        margin-right: 4px;
    }
    .cart-game-awayteam-name-wrap::after, .cart-game-hometeam-name-wrap::after {
        font-size: 12px;
    }
    .cart-game-betted-info {
        flex-wrap: wrap;
    }
    .sub-rule-name.in-cart {
        width: calc(50% - 32px);
        margin: 0 6px 6px 0;
        flex-grow: 1;
    }
    .sub-rule-pass.in-cart {
        margin: 0 6px 6px 0;
    }
    .bet-btn.in-cart {
        width: calc(50% - 38px);
        margin-bottom: 6px;
    }
    .game-date.in-cart, .game-item-time-in-cart {
        font-size: 12px;
    }
    .enter-cash, .enter-trail-money {
        font-size: 14px;
        margin-bottom: 6px;
    }
    .enter-cash-wrap {
        /*flex-direction: column;*/
        margin-bottom: 10px;
    }
    .enter-cash-input, .enter-trail-input {
        min-width: unset;
    }
    .total-bet-money {
        font-size: 14px;
        display: flex;
        /*flex-direction: column;*/
        align-items: baseline;
    }
    .bet-cash-mount {
        position: static;
    }
    .bet-bonus-title {
        font-size: 14px;
        display: flex;
        /*flex-direction: column;*/
        align-items: baseline;
    }
    .bet-bonus-mount {
        position: static;
    }
    .game-result-date {
        font-size: 10px;
    }
    .game-result-table-wrap {
        padding: 16px 0;
    }
    .gr-table-item-block {
        height: 80px;
    }
    .gr-table-item-block.gr-rounds-board {
        width: calc(100% - 66px);
    }
    .gr-table-item-round::before {
        font-size: 10px;
    }
    .gr-table-item-extended-round::before {
        font-size: 12px;
    }
    .gr-table-item-block.gr-final-result {
        width: 54px;
    }
    .gr-table-item-block.gr-final-result::before {
        font-size: 12px;
    }
    .gr-table-item-round-away-score, .gr-table-item-round-home-score {
        font-size: 12px;
    }
    .gr-table-item-away-final-score, .gr-table-item-home-final-score {
        font-size: 12px;
    }
    .gr-table-item-block.gr-rounds-board {
        margin: 40px 0 0 0;
    }
    .gr-table-item-block.gr-final-result {
        margin: 40px 0 0 0;
    }
    .gr-table-item-away-final-score {
        margin-bottom: 18px;
    }
    .financial-link {
        font-size: 12px;
        margin: 8px 0;
    }
    .financial-link::before {
        font-size: 24px;
    }
    .table-switch-li {
        font-size: 12px;
    }
    .hint-tag::after {
        width: 100px;
    }
    .preview_frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .live-game-null-block-title.on-index {
        font-size: 16px;
    }
    .live-game-ready-msg.on-index {
        font-size: 16px;
    }
    .live-game-ready-hour.on-index, .live-game-ready-minute.on-index {
        font-size: 28px;
        margin: 0 8px;
    }
    .game-result-away-team-block.winned::before, .game-result-home-team-block.winned::before {
        font-size: 28px;
    }
    .game-result-away-team-block.winned::before, .game-result-home-team-block.winned::before {
        font-size: 20px;
    }
    .game-result-away-team-name, .game-result-home-team-name {
        font-size: 14px;
    }
    .game-result-away-team-score, .game-result-home-team-score {
        font-size: 24px;
    }
    .trial-money-intro {
        padding: 0 40px;
    }
    .novive-guide-item {
        padding: 0 36px;
    }
    .novice-guide-item-ico::before {
        right: 36px;
    }
    .faq-series-list {
        font-size: 12px;
    }
    .question-title-s {
        font-size: 14px;
    }
    .question-title {
        font-size: 14px;
    }
    .question-parag {
        font-size: 12px;
    }
    .agreement-wrap {
        padding: 0 20px;
    }
    .about-info-item {
        margin: 0 0 20px 20px;
    }
    .no-predict-games-subtitle {
        font-size: 12px;
    }
    .main-slider-item img {
        left: -100%;
    }
    .main-slider-item:nth-child(3) img {
        left: -10%;
    }
    .qna-img-s {
        max-width: 80%;
    }
    .blank-info-setting-wrap {
        width: calc(100% - 40px);
        height: calc(100% - 200px);
    }
    .id-basic-column {
        width: 100%;
    }
    .footer_grid:nth-child(2), .footer_grid:nth-child(3) {
        width: 100%;
    }
    .news-item {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .news-item:nth-child(3n) {
        margin: 0 0 20px 0;
    }
    .pop-up-frame {
        width: 90vw;
    }
    .nickname {
        top: 0;
        left: 120px;
    }
    .realname {
        top: 30px;
        left: 120px;
    }
    .invite-line-at-btn {
        bottom: 10px;
    }
    .account-data-item-m, .account-data-item-m:nth-child(1), .account-data-item-m:nth-child(2), .account-data-item-m:nth-child(3) {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        padding: 0;
        margin: 0 0 16px 0;
        width: 100%;
    }
    .account-data-name {
        margin-left: 0;
    }
    .account-data-money {
        transform: translateY(2px);
        margin-left: 8px;
    }
    .account-data-money::before {
        margin-right: 4px;
    }
    .account-data-gift-point {
        transform: translateY(2px);
        margin-left: 8px;
    }
    .account-data-gift-point::before {
        margin-right: 4px;
    }
    .invite-ico {
        margin: 0 10px 10px 0;
    }
    .go-recommend-bonus {
        width: 100%;
        margin: 4px 0;
    }
    .bonus-history-record-item {
        flex-wrap: wrap;
    }
    .bhr-item-serial {
        width: 100%;
    }
    .rb-table-query-header.my-partner {
        display: none;
    }
    .rb-table-query-item.my-partner {
        flex-wrap: wrap;
        border: 0;
        background: rgba(53,173,121,0.1);
        border-radius: 10px;
        margin-bottom: 6px;
    }
    .rb-table-query-item.my-partner > .rb-table-query-item-column.idx {
        width: 60px;
    }
    .rb-table-query-item.my-partner > .rb-table-query-item-column.sum-money {
        width: 100%;
    }
    .rb-table-query-item.my-partner > .rb-table-query-item-column::before {
        display: inline-block;
        content: attr(data-label);
        color: #35AD79;
        margin-right: 4px;
    }
    .rb-table-query-item.my-partner > .rb-table-query-item-column.friend::before {
        display: none;
    }
    .sec-headline-large.gaming-live-lol {
        text-align: center;
    }
    .sec-headline-large.activity {
        text-align: center;
    }
    .gaming-live-lol-btn-wrap > .theme-btn {
        margin: 8px;
    }
    .gaming-agenda-list {
        display: flex;
        align-items: baseline;
        margin-bottom: 10px;
    }
    .team-data-versus-away-team, .team-data-versus-home-team {
        width: 100%;
        font-size: 18px;
    }
    .team-analytic-filter-box {
        width: 100%;
    }
    .team-analytic-filter-box.date {
        margin: 0 0 10px 0;
    }
    .team-basic-data-item-column .team-basic-data-winned {
        width: 50%;
    }
    .team-data-ball {
        transform: translate(-40%,150%) scale(0.3);
    }
    .team-data-bg {
        transform: translate(30%,140%) scale(1);
    }
    .team-data-dailogue-subtitle {
        font-size: 20px;
    }
    .team-date-rate-btn {
        font-size: 14px;
    }
    .specila-act-ico-wrap {
        display: none;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 150px;
        transform: translateY(-50%);
    }
    .specila-act-ico-wrap > .fortune-god {
        order: 1;
        width: 47px;
        height: 50px;
    }
    .specila-act-ico-wrap > .fortune-game-panel {
        order: 2;
    }
    .specila-act-ico-wrap > .fortune-credit-wrap {
        color: #ffd80a;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }
    .specila-act-ico-wrap > .fortune-credit-wrap::before {
        display: none;
    }
    .fortune-credit-difference {
        color: #e05151;
    }
    .specila-act-ico-wrap .fortune-pgrs-bar {
        margin: 0;
        width: 54px;
        height: 8px;
        border: 1px solid #f2f2f2;
    }
    .specila-act-ico-wrap > .fortune-game-panel.active > .goto-luckydraw-btn {
        margin: 0 0 0 10px;
    }
    .fortune-game-panel.active > .fortune-credit-wrap-mobile {
        display: none;
    }
    .fortune-credit-wrap-mobile {
        font-size: 12px;
        color: #ffd80a;
        line-height: 14px;
        margin-bottom: 4px;
        text-align: right;
    }
    .fortune-credit-wrap-mobile > .fortune-credit-difference {
        margin: 0 0 0 2px;
    }
    .side-floating-customize.activityLottery {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .fortune-god {
        width: 60%;
        height: auto;
    }
    .fortune-game-panel {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .goto-luckydraw-btn {
        font-size: 12px;
        line-height: 16px;
        width: auto;
        height: auto;
        padding: 6px;
    }
    .fortune-credit-now {
        font-size: 12px;
    }
    .fortune-credit-achievement {
        font-size: 12px;
    }
    .fortune-pgrs-bar {
        width: 60px;
        height: 8px;
        border: 1px solid #f2f2f2;
    }
    .gift-item {
        width: 100%;
        margin-right: 0;
    }
    .gift-item:nth-child(2n) {
        margin-right: unset;
    }
    .gift-item:nth-child(4n) {
        margin-right: unset;
    }
    .gift-point-info-sec {
        margin-bottom: 36px;
    }
    .gift-point-notice {
        position: absolute;
        top: calc(100% + 12px);
        left: 20px;
    }
}
/*=========================================================== Media Query 421.98px ===================================================*/
@media (max-width: 421.98px){
    .sec-headline-large {
        font-size: 24px;
        margin: 0 auto 20px auto;
    }
    .sec-headline-m::before, 
    .sec-headline-m::after,
    .sec-headline-large::before, 
    .sec-headline-large::after, 
    .sec-headline-xl::before, 
    .sec-headline-xl::after {
        width: 50px;
    }
    .sec-headline-large.activity {
        font-size: 24px;
        margin: 0 auto 20px auto;
    }
    .sec-headline-large.activity::before, 
    .sec-headline-large.activity::after {
        width: 50px;
    }
    .edit-basic-btn {
        width: 50%;
    }
    .form-input-basic-s {
        width: 60%;
    }
    .show-pwd-btn-for-basic-info {
        right: 43%;
    }
    .account-basic-column-2 {
        width: 100%;
    }
    .hot-news-slider-frame {
        min-height: 250px;
    }
    .main-banner-txt-wrap {
        align-items: center;
    }
    .main-banner-title {
        font-size: 36px;
    }
    .game-today-series-list {
        width: 32px;
        margin: 0 30px;
    }
    .game-today-series-list::before {
        font-size: 32px;
    }
    .game-result-filter-list::before {
        font-size: 32px;
    }
    .game-result-filter-list {
        width: 60px;
        margin: 0 20px;
    }
    .game-result-filter-list {
        flex-direction: column;
    }
    .game-result-filter-list::before {
        transform: translateY(0);
        margin-right: 0;
    }
    .m-quick-panel-link {
        font-size: 10px;
    }
    .cart-money-item {
        display: flex;
        /*flex-direction: column;*/
        font-size: 14px;
    }
    .cart-money-item:nth-child(1) {
        margin-bottom: 6px;
    }
    .cash-mount, .trail-money-mount {
        position: static;
        font-size: 14px;
    }
    .cash-mount::after, .trail-money-mount::after {
        font-size: 10px;
        transform: translateY(3px);
    }
    .cart-account-photo-frame {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px auto;
    }
    .cart-acc-money-info {
        width: 100%;
    }
    .preview_frame {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .main-slider-item img {
        left: -100%;
    }
    .qna-img-s {
        max-width: 100%;
    }
    .hot-news-slider-frame {
        min-height: 100px;
    }
    .about-isport-image-wrap {
        width: 90%;
    }
    .id-basic-label {
        width: 100%;
    }
    .specila-act-ico-wrap > .fortune-game-panel.active > .goto-luckydraw-btn {
        font-size: 14px;
        width: 50px;
        height: 50px;
        margin: 0 0 0 4px;
    }
}
/*=========================================================== Media Query 351.98px ===================================================*/
@media (max-width: 351.98px){
    
}

/* Animation */
@keyframes smsSending {
    0% {transform: scale(0.4);}
    100% {transform: scale(1);}
}
@keyframes nowLiveGameBurning {
    0% {box-shadow: 0 0 14px rgba(224,81,81,0.3);}
    50% {box-shadow: 0 0 25px rgba(224,81,81,0.7);}
    100% {box-shadow: 0 0 14px rgba(224,81,81,0.3);}
}
@keyframes predictGameEffect {
    0% {transform: scale(1); opacity: 0.9;}
    100% {transform: scale(1.8); opacity: 0;}
}
@keyframes getMoreRulesBtn {
    0% {transform: translate(-2px,2px);}
    70% {transform: translate(0px,2px);}
    100% {transform: translate(-2px,2px);}
}
@keyframes fireBurning {
    0% {color: #ffd80a; text-shadow: 0 0 3px rgba(255,216,10,0.1);}
    50% {color: #e05151; text-shadow: 0 0 12px rgba(255,216,10,0.5);}
    100% {color: #ffd80a; text-shadow: 0 0 3px rgba(255,216,10,0.1);}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes ballRound {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes gotoLuckyDrawEffect {
    0% {box-shadow: 0 0 10px rgba(255,215,17,0.7);}
    50% {box-shadow: 0 0 25px rgba(255,216,10,0.5);}
    100% {box-shadow: 0 0 10px rgba(255,215,17,0.7);}
}

/* Soprt ico */
.fa-futbol::before {
    content: '\f1e3';
}
.fa-football-ball::before {
    content: '\f44e';
}
.fa-basketball-ball::before {
    content: '\f434';
}
.fa-baseball-ball::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\f433';
}
.fa-volleyball-ball::before {
    content: '\f45f';
}
.fa-golf-ball::before {
    content: '\f450';
}
.fa-hockey-sticks::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f454';
}
.fa-flag-checkered::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\f11e';
}
.fa-paint-brush::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\f2f8';
}
.fa-motorcycle::before {
    font-weight: 900;
    content: '\f21c';
}
.fa-shuttlecock::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f45b';
}
.fa-gamepad::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\e003';
    transform: translateY(-3px);
}
.fa-hand-rock::before {
    font-weight: 300;
    content: '\f255';
}
.fa-tennis::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    content: '\f45e';
}
.fa-table-tennis::before {
    font-weight: 900;
    content: '\f45d';
}
.fa-crosshairs::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\f05b';
}
.fa-question-circle::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: '\f111';
}

.event-info {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-top: 20px; /* 與其他元素的距離增加 */
    text-align: center; /* 文字置中 */
  }
  
  .event-info p {
    margin: 0 0 10px 0; /* 與上下的間距 */
  }
  
  .qrcode-link {
    text-decoration: none;
    color: #35AD79;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    padding: 10px 15px; /* 增加內距，讓區塊更明顯 */
    border: 2px solid #35AD79; /* 加上綠色邊框 */
    border-radius: 8px; /* 圓角邊框 */
    background-color: #f9fff9; /* 淡綠背景色 */
    transition: all 0.3s ease;
    margin:15px auto 20px auto;
  }
  
  .qrcode-link:hover {
    color: #2C8A63;
    border-color: #2C8A63;
    background-color: #e6f7e6; /* hover 時背景顏色加深 */
  }
  
  .qrcode-link i {
    margin-right: 8px; /* 圖示與文字間距 */
    font-size: 20px; /* 圖示大小 */
  }


  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
  
  /* 彈窗內容 */
  .modal-content {
    height: 500px; 
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    max-width: 600px;
    margin: 3% auto;
    padding: 20px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  
  /* 關閉按鈕 */
  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
  }
  
  /* 標題 */
  .modal-content h2 {
    color: #35AD79;
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* 指引文字 */
  .modal-text p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  /* 上傳區塊 */
  .upload-section {
    margin: 20px 0;
    text-align: left;
  }
  
  .upload-label {
    display: inline-block;
    background: #35AD79;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
    margin: 10px auto;
    display: block;
    text-align: center;
    width: 100%;
  }
  
  .upload-label:hover {
    background: #2c8a63;
  }
  
  .upload-input {
    display: none;
  }
  
  /* 投注金額區塊 */
  .amount-section {
    margin: 20px 0;
    text-align: left;
  }
  
  .amount-label {
    font-size: 16px;
    font-weight: bold;
    color: #555;
  }
  
  .amount-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 16px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .amount-input:focus {
    border-color: #35AD79;
    outline: none;
    box-shadow: 0 0 5px rgba(53, 173, 121, 0.5);
  }
  
  /* 送出按鈕 */
  .submit-button {
    background: #35AD79;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 15px auto 0 auto;
    display: block;
  }
  
  .submit-button:hover {
    background: #2c8a63;
  }

  .preview-container {
    margin-top: 10px;
    border: 1px solid #ccc;
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
    border: none;
}

.preview-image {
    max-width: 100%;
    max-height: 150px;
    cursor: pointer;
    border-radius: 8px;
}