:root{
    --headerLightColor:#fff; /*header 背景漸層淺色*/
    --headerDarkColor:#e9f0fa; /*header 背景漸層深色*/
    --btnLightColor:#f3c89a;/* 下載按鈕漸層淺色 */
    --btnDarkColor:#c59866;/* 下載按鈕漸層深色 */

    --loginBgLight:#FDFDFD; /*登入區背景上淺色*/
    --loginBgDark:#F7F7F7; /*登入區背景中間顏色*/
    --loginBgLight2:#EFEFEF; /*登入區背景下方顏色*/
    --loginIconLight: #feeece; /*登入區Icon漸層淺色*/
    --loginIconDark:#cda873; /*登入區Icon漸層深色*/
    
    --loginBtnColorA:#a77a48; /*註冊按鈕顏色*/
    --loginBtnColorB:#c59866; /*登入按鈕顏色*/
    --loginBtnColorC:#afa293; /*客服按鈕顏色*/
    --loginBtnColorD:#afa293; /*先去逛逛按鈕顏色*/

    --GameImgColor: #811089; /* 遊戲圖線框+背景色 */

    --playBtnColor:#daaf7f;/* 遊戲平台 playNow 主色 */
    --playBtnColorLight:#f1dbc2;/* 遊戲平台 playNow 上下淺色 */
    --promoTextBg:#fff;/*優惠活動文字背景色*/
    
    --footerLightColor:#fff; /*footer 背景漸層淺色*/
    --footerDarkColor:#e9f0fa; /*footer 背景漸層深色*/


}
body.blue{
    --headerLightColor:#fff; /*header 背景漸層淺色*/
    --headerDarkColor:#d6e7ff; /*header 背景漸層深色*/
    --btnLightColor:#6f93e2;/* 下載按鈕漸層淺色 */
    --btnDarkColor:#1d4397;/* 下載按鈕漸層深色 */

    --loginIconLight: #cee1fe; /*登入區Icon漸層淺色*/
    --loginIconDark:#1d4397; /*登入區Icon漸層深色*/
    --loginBgLight:#FDFDFD; /*登入區背景上淺色*/
    --loginBgDark:#f0f2ff; /*登入區背景色*/
    --loginBgLight2:#f6f7ff; /*登入區背景下淺色*/
    
    --loginBtnColorA:#4065b7; /*註冊按鈕顏色*/
    --loginBtnColorB:#1d4397; /*登入按鈕顏色*/
    --loginBtnColorC:#99a2b5; /*客服按鈕顏色*/
    --loginBtnColorD:#99a2b5; /*先去逛逛按鈕顏色*/

    --GameImgColor: #1d4397; /* 遊戲圖線框+背景色 */
    
    --playBtnColor:#1d4397;/* 遊戲平台 playNow 主色 */
    --playBtnColorLight:#6f93e2;/* 遊戲平台 playNow 上下淺色 */
    --promoTextBg:#dcf3ff;/*優惠活動文字背景色*/

    --footerLightColor:#fff; /*footer 背景漸層淺色*/
    --footerDarkColor:#d6e7ff; /*footer 背景漸層深色*/
}
body.red{
    --headerLightColor:#fff; /*header 背景漸層淺色*/
    --headerDarkColor:#ffeaea; /*header 背景漸層深色*/
    --btnLightColor:#ffa4a4;/* 下載按鈕漸層淺色 */
    --btnDarkColor:#c83434;/* 下載按鈕漸層深色 */

    --loginIconLight: #ffd6d6; /*登入區Icon漸層淺色*/
    --loginIconDark:#c83434; /*登入區Icon漸層深色*/
    --loginBgLight:#FDFDFD; /*登入區背景上淺色*/
    --loginBgDark:#ffd1d1; /*登入區背景色*/
    --loginBgLight2:#fff7f7; /*登入區背景下淺色*/
    
    --loginBtnColorA:#df5858; /*註冊按鈕顏色*/
    --loginBtnColorB:#c83434; /*登入按鈕顏色*/
    --loginBtnColorC:#ad8a8a; /*客服按鈕顏色*/
    --loginBtnColorD:#ad8a8a; /*先去逛逛按鈕顏色*/
    
    --GameImgColor: #c83434; /* 遊戲圖線框+背景色 */
    
    --playBtnColor:#c83434;/* 遊戲平台 playNow 主色 */
    --playBtnColorLight:#e88a8a;/* 遊戲平台 playNow 上下淺色 */
    --promoTextBg:#ffcccc;/*優惠活動文字背景色*/

    --footerLightColor:#fff; /*footer 背景漸層淺色*/
    --footerDarkColor:#ffeaea; /*footer 背景漸層深色*/
}
body.green{
    --headerLightColor:#fff; /*header 背景漸層淺色*/
    --headerDarkColor:#dcfff4; /*header 背景漸層深色*/
    --btnLightColor:#45ad97;/* 下載按鈕漸層淺色 */
    --btnDarkColor:#004531;/* 下載按鈕漸層深色 */

    --loginBtn: #004531;/*登入按鈕顏色*/
    --loginIconLight: #cee1fe; /*登入區Icon漸層淺色*/
    --loginIconDark:#004531; /*登入區Icon漸層深色*/
    --loginBgLight:#FDFDFD; /*登入區背景上淺色*/
    --loginBgDark:#b7e3d6; /*登入區背景色*/
    --loginBgLight2:#edfdf8; /*登入區背景下淺色*/

    --loginBtnColorA:#0c6d51; /*註冊按鈕顏色*/
    --loginBtnColorB:#004531; /*登入按鈕顏色*/
    --loginBtnColorC:#7fada0; /*客服按鈕顏色*/
    --loginBtnColorD:#7fada0; /*先去逛逛按鈕顏色*/
    
    --GameImgColor: #004531; /* 遊戲圖線框+背景色 */

    --playBtnColor:#004531;/* 遊戲平台 playNow 主色 */
    --playBtnColorLight:#5ebb9d;/* 遊戲平台 playNow 上下淺色 */
    --promoTextBg:#dcf8ef;/*優惠活動文字背景色*/

    --footerLightColor:#fff; /*footer 背景漸層淺色*/
    --footerDarkColor:#dcfff4; /*footer 背景漸層深色*/
}

*{
    box-sizing: border-box;
}
body {
    padding: 0;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(252, 253, 255, 0) -13.35%, #fcfdff 31.99%);
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}
button{
    border: 0;
}
img{
    max-width: 100%;
    max-height: 100%;
}
a{
    text-decoration:none;
}

/* 箭頭Icon */
.icon-arrow{
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 3px;
    border-radius: 50px;
    border: 1px solid #fff;
    background:linear-gradient(to bottom,  var(--btnLightColor), var(--btnDarkColor));
    position: relative;
}
.icon-arrow::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJhcnJvdyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE2IDIyLjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDIyLjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCQk8cG9seWdvbiBwb2ludHM9IjAuMiwwIDE2LDExLjEgMCwyMi4zIDUuMiwxMS4xIi8+Cjwvc3ZnPg==);
    mask-size: 65% 65%;
    mask-repeat: no-repeat;
    mask-position: center center;
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: arrow .3s ease-in infinite alternate;
}
@keyframes arrow{
    0%{
        left: 0;
    }
    100%{
        left: 7%;
    }
}
/* 標籤顏色 */
.lgOrange{
    background-image: linear-gradient(45deg, #fb700e, #e2190f);
}

.lgGreen{
    background-image: linear-gradient(45deg, #10da63, #0db86f);
}

.lgBlue{
    background-image: linear-gradient(45deg, #23a1ec, #1576e3);
}

.lgYellow{
    background-image: linear-gradient(45deg, #fcc40e, #fbb40c);
}

/* order */
.order_1{
    order: 1;
}
.order_2{
    order: 2;
}
.order_3{
    order: 3;
}
.order_4{
    order: 4;
}

/**/
header{
    padding: 0 20px 0 15px;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    background: linear-gradient(180deg, var(--headerLightColor) 0%, var(--headerDarkColor) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
header .left{
    height: 100%;
    padding: 7px 0;
    box-sizing: border-box;
}
header .right{
    display: flex;
    align-items: center;
    justify-content: center;
}
header .downLoadBtn{
    min-width: 88px;
    height: 26px;
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background:linear-gradient(to bottom, var(--btnLightColor), var(--btnDarkColor));
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 5px 10px;
    cursor: pointer;
}
header .downLoadBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
    transform: skewX(-30deg);
    animation: shine 2.5s infinite;
}
@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}
header .closetopbtn {
    width: 10px;
    /*height: 10px;*/
    margin-bottom: -2px;
}
main{
    position: relative;
}
main .main_box{
    display: flex;
    flex-direction: column;
}
main .jackpot{
    background: url(../images/jackpot_bg.png?v2) no-repeat center bottom;
    display: flex;
    max-width: 100%;
    aspect-ratio: 600 / 201;
    margin: 15px 10px;
    background-size: contain;
}
main .jackpot .jackpotNum{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    font-weight: 900;
    font-family: sans-serif;
    width: 100%;
}
main .jackpot .jackpotNum p{
    margin: 0;
    margin-top: 56px;
    color: transparent;
    background-image: linear-gradient(to bottom,#e6a00c 0%,#faca00 11%,#e6a00c 28%,#faed22 50%,#faca00 50%,#faca00 71%,#faed22 100%);
    background-clip: text;
    font-size: 33px;
    filter: drop-shadow(2px 2px 8px black);
}
main .registerBox {
    width: 90.667%;
    /* min-height: 300px; */
    margin: 0px auto;
    /* padding: 15px 0 20px; Kun */
    padding: 10px 0 15px;
    border-radius: 10px;
    border: 1px solid #FFF;
    background: linear-gradient(180deg, var(--loginBgLight) 0%, var(--loginBgDark) 38%, var(--loginBgLight2) 100%);
    box-shadow: 0px 0px 8px 0px #FFF inset, 0px 0px 8px 0px #FFF inset, 0px 0px 10px 0px #bac2ca;
}
main .web_name{
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #7a4502;
}
main .registerBox .tab_list ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-radius: 50px;
    height: 36px;
    width: 100%;
    /* margin: 0 auto 15px; Kun*/
    margin: 0 auto 8px;
    /*border: 2px solid #fff;
    background: #fafdff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15) inset;*/
    list-style: none;
    padding: 0;
}
main .registerBox .tab_list ul li{
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;    
    /* cursor: pointer; */
    font-size: 20px;
}
main .tab_con .item {
    width: 282px;
    margin: 0 auto;
    position: relative;
}
main .tab_con .item .input_box {
    width: 100%;
    height: 30px;
    border-radius: 18px;
    background: #fff;
    border: none;
    padding-left: 10px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    margin-bottom: 12px;    
}
.loginIcon::after{
    content: '';
    display: block;
    width: 1px;
    height: 15px;
    background-image: linear-gradient(to bottom,rgba(255,255,255,1) 0%, #d0d0d0 50%, rgba(255,255,255,1) 100%);
    position: absolute;
    right: -6px;
    top: 3px;
}

.icon-lock,
.icon-user,
.icon-mobile,
.icon-service{
    width: 17px;
    height: 17px;
    position: relative;
    margin: 0 5px;
    display: block;
}
.icon-lock::before,
.icon-user::before,
.icon-mobile::before,
.icon-service::before{ 
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center center;
    background-image: linear-gradient(to right bottom, var(--loginIconLight), var(--loginIconDark));
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}
.icon-lock::before{
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+CjxzdmcgZmlsbD0iIzAwMDAwMCIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iNjMwIDc5NiAyMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDYzMCA3OTYgMjAwIDIwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNNzg3LjExNiw4NzIuMjU1aC00LjI4NHYtMjMuNDI0Qzc4Mi44MzIsODE5LjY5OSw3NTkuMTMzLDc5Niw3MzAsNzk2Yy0yOS4xMywwLTUyLjgzLDIzLjY5OS01Mi44Myw1Mi44MzF2MjMuNDI0aC00LjI4Nw0KCWMtMTEuMTMzLDAtMjAuMTU5LDkuMDI1LTIwLjE1OSwyMC4xNTl2NjIuNTg5YzAsMjIuNjQyLDE4LjM1NCw0MC45OTcsNDAuOTk2LDQwLjk5N2g3Mi41NTljMjIuNjQyLDAsNDAuOTk2LTE4LjM1NSw0MC45OTYtNDAuOTk3DQoJdi02Mi41ODlDODA3LjI3NSw4ODEuMjgsNzk4LjI1LDg3Mi4yNTUsNzg3LjExNiw4NzIuMjU1eiBNNzM3LjUwNiw5MzQuNTQ1djI1LjQ2MmMwLDQuMTQ1LTMuMzYxLDcuNTA2LTcuNTA2LDcuNTA2DQoJcy03LjUwNi0zLjM2MS03LjUwNi03LjUwNnYtMjUuNDYyYy01LjcxOC0yLjc4OC05LjY2Ny04LjYzOS05LjY2Ny0xNS40MjhjMC05LjQ4NCw3LjY4OS0xNy4xNzQsMTcuMTczLTE3LjE3NA0KCWM5LjQ4NSwwLDE3LjE3NCw3LjY4OSwxNy4xNzQsMTcuMTc0Qzc0Ny4xNzQsOTI1LjkwNiw3NDMuMjIzLDkzMS43NTgsNzM3LjUwNiw5MzQuNTQ1eiBNNzYzLjcyNiw4NzIuMjU1aC02Ny40NDh2LTIzLjQyNA0KCWMwLTE4LjU5NiwxNS4xMjgtMzMuNzI1LDMzLjcyMy0zMy43MjVjMTguNTk3LDAsMzMuNzI1LDE1LjEyOSwzMy43MjUsMzMuNzI1Vjg3Mi4yNTV6Ii8+DQo8L3N2Zz4=);
}
.icon-user::before{
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5ZyW5bGkXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODAwIDgwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAwIDgwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGNpcmNsZSBjeD0iNDAwIiBjeT0iMjAwLjQiIHI9IjE5OS42Ii8+DQo8cGF0aCBkPSJNNjcuNSw2NjUuNWMzMy0xMzkuNCwxNzEuNC0yMTUuNiwzMTQuNi0yMTUuNmgzNS43YzE0My4zLDAsMjgxLjYsNzYuMiwzMTQuNiwyMTUuNmM2LjQsMjcsMTEuNSw1NS4yLDE0LjMsODMuOQ0KCWMyLjcsMjcuNC0xOS44LDQ5LjgtNDcuNCw0OS44SDEwMC42Yy0yNy42LDAtNTAuMS0yMi40LTQ3LjQtNDkuOEM1Ni4xLDcyMC43LDYxLjIsNjkyLjUsNjcuNSw2NjUuNXoiLz4NCjwvc3ZnPg0K);
}
.icon-mobile::before{
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgZmlsbD0iIzAwMDAwMCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB2aWV3Qm94PSIwIDAgMjcuNDQyIDI3LjQ0MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNMTkuNDk0LDBINy45NDhDNi44NDMsMCw1Ljk1MSwwLjg5Niw1Ljk1MSwxLjk5OXYyMy40NDZjMCwxLjEwMiwwLjg5MiwxLjk5NywxLjk5NywxLjk5N2gxMS41NDYNCgkJYzEuMTAzLDAsMS45OTctMC44OTUsMS45OTctMS45OTdWMS45OTlDMjEuNDkxLDAuODk2LDIwLjU5NywwLDE5LjQ5NCwweiBNMTAuODcyLDEuMjE0aDUuN2MwLjE0NCwwLDAuMjYxLDAuMjE1LDAuMjYxLDAuNDgxDQoJCXMtMC4xMTcsMC40ODItMC4yNjEsMC40ODJoLTUuN2MtMC4xNDUsMC0wLjI2LTAuMjE2LTAuMjYtMC40ODJDMTAuNjEyLDEuNDI5LDEwLjcyNywxLjIxNCwxMC44NzIsMS4yMTR6IE0xMy43MjIsMjUuNDY5DQoJCWMtMC43MDMsMC0xLjI3NS0wLjU3Mi0xLjI3NS0xLjI3NnMwLjU3Mi0xLjI3NCwxLjI3NS0xLjI3NGMwLjcwMSwwLDEuMjczLDAuNTcsMS4yNzMsMS4yNzRTMTQuNDIzLDI1LjQ2OSwxMy43MjIsMjUuNDY5eg0KCQkgTTE5Ljk5NSwyMS4xSDcuNDQ4VjMuMzczaDEyLjU0N1YyMS4xeiIvPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KPC9nPg0KPC9zdmc+);
}
.icon-service::before{
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5ZyW5bGkXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODAgODAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwIDgwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNMzkuNiw4MGMtMC42LDAtMS4yLDAtMS44LDBjLTAuMy0wLjEtMC41LTAuMi0wLjgtMC4zYy0zLjYtMS4xLTUuMi01LjEtMy4xLTguMWMyLjQtMy41LDcuOC0zLjIsOS45LDAuNQ0KCQljMC4yLDAuMywwLjMsMC41LDAuNywwLjVjMy44LTAuNCw3LjUtMS4yLDExLTIuNmM3LjEtMywxMi41LTcuNiwxNS40LTE0LjhjMC41LTEuMiwwLjgtMi40LDEuMi0zLjZjLTEuOC0wLjQtMy4xLTEuMy00LjItMi42DQoJCWMtMC4xLDAuMS0wLjEsMC4xLTAuMSwwLjFjLTAuMSwwLjEtMC4xLDAuMi0wLjEsMC40Yy0xLjgsNS00LjgsOS4zLTkuMSwxMi43Yy0xLjUsMS4yLTMuMiwyLjItNC44LDMuMmMtMC4yLDAuMS0wLjUsMC0wLjgsMA0KCQljMC0wLjIsMC0wLjUsMC4xLTAuN2MwLjEtMC4yLDAuMy0wLjMsMC40LTAuNGMzLTIuNyw1LTYsNS43LTEwYzAuNS0zLjIsMC40LTYuNCwwLTkuNmMtMC40LTQuMy0yLTguMy00LjEtMTIuMQ0KCQljLTAuOC0xLjUtMS44LTMtMi44LTQuNGMtMC4yLTAuMy0wLjgtMC42LTEuMi0wLjZjLTAuNSwwLTAuNSwwLjUtMC42LDAuOWMtMC4xLDAuNC0wLjEsMC44LTAuMiwxLjNjLTAuOCw0LjUtMy44LDcuNS04LjIsOC40DQoJCWMtNS41LDEuMS0xMSwyLjEtMTYuNSwzLjFjLTQuMSwwLjgtNi45LDQuNy02LjMsOC42YzAuNiwzLjQsMS44LDYuNiwzLjYsOS41YzEuNCwyLjQsMy4xLDQuNSw1LjIsNi40Yy0wLjMsMC4zLTAuNSwwLjYtMC43LDAuOA0KCQljLTMuNy0xLjYtNi45LTMuOC05LjctNi42Yy0yLjgtMi44LTQuOS02LTYuNC05LjhjLTAuMiwwLjMtMC4zLDAuNC0wLjQsMC41QzcuNyw1My44LDIuNiw1Mi45LDAuNiw0OWMtMC4zLTAuNi0wLjQtMS4yLTAuNi0xLjgNCgkJYzAtNC43LDAtOS40LDAtMTQuMWMwLTAuMSwwLjEtMC4zLDAuMS0wLjRjMC42LTIuNSwyLjItNC4yLDQuNy00LjljMC4yLTAuMSwwLjUtMC4zLDAuNi0wLjZjMC42LTEuOSwxLjEtNCwxLjktNS45DQoJCUMxMi43LDkuMSwyMi4yLDIsMzUuOSwwLjJjMC42LTAuMSwxLjItMC4xLDEuOS0wLjJjMSwwLDIuMSwwLDMuMSwwYzAuMywwLDAuNiwwLjEsMC44LDAuMWM2LjksMC41LDEzLjEsMi43LDE4LjUsNi44DQoJCUM2Ni44LDExLjcsNzEsMTgsNzMuMSwyNS43YzAuMSwwLjQsMC4zLDAuNiwwLjgsMC42YzIuMiwwLjIsMy45LDEuMSw1LjEsMi45YzAuNSwwLjgsMC43LDEuNywxLjEsMi41YzAsNC45LDAsOS43LDAsMTQuNg0KCQljLTAuMSwwLjItMC4xLDAuNC0wLjIsMC41Yy0wLjUsMS44LTEuNiwzLjItMy4zLDRjLTAuNSwwLjItMC43LDAuNi0wLjgsMS4xYy0wLjUsMi40LTEuMyw0LjctMi40LDYuOUM2OS45LDY1LjQsNjQuNSw3MCw1Ny43LDczDQoJCWMtNC4xLDEuOC04LjUsMi44LTEzLDMuMmMtMC40LDAtMC42LDAuMS0wLjcsMC41Yy0wLjUsMS4xLTEuMiwyLTIuMywyLjZDNDEsNzkuNSw0MC4zLDc5LjcsMzkuNiw4MHogTTExLjQsMjkuNw0KCQlDMTYuOSwxNy45LDI2LDExLjEsMzkuNCwxMS4xYzEzLjUsMCwyMi42LDYuOSwyOCwxOC43YzAuNi0wLjgsMC42LTAuOCwwLjQtMS44Yy0xLjYtNi45LTUuMy0xMi43LTExLjItMTYuOQ0KCQljLTguNC02LTE3LjctNy4zLTI3LjQtMy44Yy0xMCwzLjctMTYsMTAuOS0xOC40LDIxQzEwLjcsMjksMTAuOSwyOS40LDExLjQsMjkuN3oiLz4NCgk8cGF0aCBkPSJNMzkuOSw2My4xYy0zLjEtMC4xLTYtMS42LTgtNC40Yy0wLjEtMC4xLTAuMi0wLjMtMC4yLTAuNGMwLTAuMiwwLTAuNSwwLjEtMC42YzAuMS0wLjEsMC41LTAuMiwwLjYtMC4xDQoJCWMzLjcsMi4yLDcuNiwxLjgsMTEuNSwwLjljMS40LTAuMywyLjgtMC44LDQtMS43YzAuNC0wLjMsMC44LTAuNywxLjItMS4xYzAuMi0wLjIsMC41LTAuMiwwLjgtMC4zYzAuMSwwLjMsMC4zLDAuNiwwLjIsMC44DQoJCUM0OC45LDYwLjMsNDQuOCw2My4xLDM5LjksNjMuMXoiLz4NCjwvZz4NCjwvc3ZnPg0K);
}

/* 客服浮動視窗 */
.service_box{
    position: fixed;
    top: 25vh;
    background: linear-gradient(to bottom, var(--btnLightColor), var(--btnDarkColor));
    min-width: 45px;
    min-height: 45px;
    z-index: 99;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border: 1px solid #b7b7b7;
    border-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0;
}
.service_box p{
    margin: 0;
    color: #fff;
    font-size: 13px;
    margin-top: 5px;
}
.service_box .icon-service{
    width: 25px;
    height: 25px;
}
.service_box .icon-service::before{
    background: #fff;
}

main .tab_con .item input{
    border: 0;
    outline: none;
    padding: 0 10px;
    height: 100%;
}
/* main .input-tips {
    color: #f84141;
    font-family: "PingFang SC";
    font-size: 11px;
    line-height: 20px;
    height: 20px;
    padding-left: 16px;
} */
main .btn-group{
    max-width: 282px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 38px;
    gap: 7px;
    margin: 0 auto;
}
/* EN */
.lang_en main .btn-group{
    /* grid-template-columns: 1fr; */
    grid-auto-rows: 33px;
}
main .warp-btn{
    /* min-height: 38px; */
    height: 100%;
    width: 100%;
    background-color: var(--loginBtn);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    padding: 8px;
    text-align: center;
}
main .warp-btn.colorA{
    background-color: var(--loginBtnColorA);
}
main .warp-btn.colorB{
    background-color: var(--loginBtnColorB);
}
/* main .warp-btn.colorC{
    background-color: var(--loginBtnColorC);
} */
main .warp-btn.colorD{
    background-color: var(--loginBtnColorD);
}
main .warp-btn.colorD.grid-2{
    /* grid-column: span 2; */
}
.lang_en main .warp-btn.colorD.grid-2{
    grid-column: span 1;
}
main .warp-btn.colorE{
    background-color: #03b901;
    line-height: 1.3em;
}
main .warp-btn span{
    font-size: 18px;
    color: #fff;
    line-height: 0;
    /* animation: grow-shrink 0.5s infinite alternate; */
}
.lang_en main .warp-btn span{
    line-height: 1.5em;
    font-size: 16px;
}
main .box1{
    background-repeat: no-repeat;
    background-size: 101% 100%;
    background-position: center; 
    max-width: 500px;
    margin: 0 auto;
}
main .bannerNew{
    /* background: url(../images/bannerNewBg.png) no-repeat center center;
    background-size: 100%; */
    margin-bottom: 15px;
}
main .bannerNew .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    /* aspect-ratio: 750 / 600; */
}
main .box2 .title,
main .box3 .title{
    width: 100%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.8em;
}
main .box2 .title{
    display: flex;
    align-items: center;
    flex-direction: column;
}
main .box2 .title .tip{
    color: #cf9f6d;
    margin: 8px 0 5px;
    line-height: 1;
    border:1px solid #dcac7a;
    padding: 5px 15px;
    border-radius: 50px;
}
main .box2 .title img{
    max-height: 100%;
}
main .box2 .con .gameline1{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 10px;
}
main .box2 .con .gameline1 a{
    max-width: 125px;
}
main .box2 .con .gameline2{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    flex-wrap: wrap;
    margin: 0 auto 6px;
    padding: 0 3%;
    gap: 10px;
}
main .box2 .con .gameline2 a{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--GameImgColor);
    background: var(--GameImgColor);
    box-shadow: 2px 2px 8px 0px rgba(150, 150, 150, 0.5);
    overflow: hidden;
    position: relative;
}
main .box2 .con .gameline2 a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.7);
    filter: blur(6px);
    clip-path: inset(calc(100% - 20px) 0 0 0);
    z-index: 1;
}
main .box2 .con .gameline2 a img{
    width: 100%;
}
main .box2 .gameline2 a .bottom_line{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}
main .box2 .gameline2 a .bottom_line > p {
    color: #fff;
    text-align: center;
    font-family: "PingFang HK";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 66%;
    margin: 0;
}
main .box2 .gameline2 a .bottom_line > span {
    width: 15px;
    height: 15px;
    margin-left: 3px;
    border-radius: 50px;
    border: 1px solid #fff;
    background:linear-gradient(to bottom,  var(--btnLightColor), var(--btnDarkColor));;
    position: relative;
}
main .box4 .gameline3{
    display: flex;
    flex-direction: column;
}
main .box4 .gameline3 a{
    position: relative;
    display: block;
    width: 95%;
    margin: 0 auto 1rem;
    border-radius: 15px;
    border: 1px solid #fff;
    overflow: hidden;
    box-shadow: 0 5px 6px rgba(67, 67, 67, 0.3);
    color: #fff;
}
main .box4 .gameline3 a img{
    display: block;
}
main .box4 .gameline3 a .fishbtn{
    /* width: 100px; 
    height: 32.5px;*/
    position: absolute;
    bottom: 25px;
    left: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to bottom, var(--playBtnColorLight), var(--playBtnColor), var(--playBtnColorLight));
    border-radius: 45px;
    padding: 1px 2px 1px 15px;
    font-size: 15px;
    line-height: 2em;
    box-shadow: 0px 2px 5px #999;
}
main .box4 .gameline3 a .fishbtn .icon-arrow{
    margin-left: 10px;
    width: 25px;
    height: 25px;
}

main .box3 .gameline1 {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(180px, auto);
    padding: 10px;
}
main .box3 .gameline1 a{
    position: relative;
    border-radius: 15px;
    border: 1px solid #FFF;
    box-shadow: 0 5px 6px rgba(67, 67, 67, 0.3);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #fff url(../images/ac1_bg.png?v1) no-repeat center center;
    background-size: cover;
}
main .box3 .gameline1 a .tip{
    display: flex;
    width: auto;
    height: 26px;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-bottom-right-radius: 12px;
    font-size: 15px;
    padding: 0 10px;
}
main .box3 .gameline1 a .textContent{
    background-color: var(--promoTextBg);
    width: 100%;
    height: 65px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
main .box3 .gameline1 a .textContent>span{
    max-height: 100%;
}
main .box3 .gameline1 a .textContent span.icon-arrow{
    width: 24px;
    height: 24px;
    position: absolute;
    right: 5%;
    top: calc(50% - 12px);
}

main .box3 .gameline1 a .box3gif {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 16px;
}

/* 最下方遊戲平台 */
main .iconline {
    margin: 0 auto;
    padding: 10px 0;
}

/* 文字內容區域 */
main .textArea{
    padding: 10px;
    font-size: 14px;
    color: #858585;
    line-height: 1.5em;
    text-align:justify;
}

.warp-footer {
    display: none;

    background: linear-gradient(180deg, var(--footerLightColor) 0%, var(--footerDarkColor) 100%);
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 999;
    margin: 0 auto;
}
.warp-footer > .con {
    max-width: 500px;
    display: block;
    margin: 0 auto;
    position: relative;
}
.warp-footer .con .num888gif {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-top: 7.2%;
    padding-left: 38.5%;
    padding-right: 3%;
}
.warp-footer .download_link{
    box-shadow: 0px -4px 10px 0px #ccd7e3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: content-box;
}
.warp-footer .con .btngif {
    min-width: 120px;
    padding: 0 10px;
    height: 40px;
    position: absolute;
    right: .8em;
    bottom: 28%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:linear-gradient(to bottom,  var(--btnLightColor), var(--btnDarkColor));;
    color: #fff;
    border-radius: 20px;
    animation: grow-shrink 0.5s infinite alternate;
    font-size: 16px;
    cursor: pointer;
}
@keyframes grow-shrink {
	0% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}