﻿
/*font-size*/
/* color */
@import url(style.css);
@import url(notosanstc.css);
@import url(notosansscsliced.css);

li {
    list-style-type: none;
}

.w-50 {
    max-width: 100%;
}

.fa-header .branding a, #list-withdraw .step3 .btn-how {
    text-align: left;
    text-indent: -9999px;
    display: block;
    overflow: hidden;
}

.clearfix {
    zoom: 1;
}

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
        height: 0;
        font-size: 0;
        visibility: hidden;
    }

    .clearfix:after {
        clear: both;
    }

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

    nav ul {
        list-style: none;
    }

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

    nav ul {
        list-style: none;
    }

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

address {
    font-style: normal;
}

ul, ol {
    list-style: none;
}

/*font 字型 --------------------*/
/*思源黑體*/
/*_frame 架構 --------------------*/
html, body {
    color: #9b9c99;
    font-family: Verdana, Arial, "Noto Sans SC Sliced", "Noto Sans TC", "Microsoft JhengHei";
    font-size: 14px;
    line-height: 1.6;
}

    body > form {
        height: 100%;
    }

a {
    text-decoration: none;
}

    a:hover {
        cursor: pointer;
    }

ul.btnarea li {
    margin-bottom: 1em;
}

.btnarea {
    text-align: center;
    padding: .5em;
}

.wrap-con {
    width: 1140px;
    margin: 0 auto;
    position: relative;
}

/*structure ------------*/
.fa-wrap {
    position: relative;
}

.fa-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
}

    .fa-header._move {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    }

        .fa-header._move .branding a {
            background-image: url(../image/logo_cgpD.png);
        }

        .fa-header._move .nav a {
            color: #989898;
        }

            .fa-header._move .nav a:hover {
                color: #565656;
            }

            .fa-header._move .nav a.active {
                color: #333333;
            }

        .fa-header._move .btn-menu {
            color: #6d924a;
        }

            .fa-header._move .btn-menu:hover {
                color: #2e5b06;
            }

    .fa-header .page-con {
        position: relative;
    }

    .fa-header .btn-menu {
        position: absolute;
        top: 1em;
        left: 1em;
        display: none;
    }

    .fa-header .branding {
        padding: 1.3em 2em;
    }

        .fa-header .branding a {
            background: url(../image/logo_cgpL.png) no-repeat center center;
            width: 135px;
            height: 35px;
        }

    .fa-header .nav {
        margin: auto;
        position: absolute;
        top: 0;
        right: 2em;
        bottom: 0;
    }

.fa-mobile {
    background-color: #333333;
    z-index: 500;
}

    .fa-mobile .nav > ul {
        flex-wrap: wrap;
        text-align: left;
    }

        .fa-mobile .nav > ul > li, .fa-mobile .nav > ul > li > a > ul > li {
            margin: 0;
            flex-basis: 100%;
            border-bottom: 1px solid #616161;
        }

            .fa-mobile .nav > ul > li > a:hover {
                color: #9dc026;
                font-weight: 500;
            }

                .fa-mobile .nav > ul > li > a:hover:after {
                    display: none;
                }

            .fa-mobile .nav > ul > li > a.active {
                color: #333333;
                font-weight: 500;
                background-color: #9dc026;
            }

           
.panel {
    position: fixed;
    left: -12em;
    /*left or right and the width of your navigation panel*/
    width: 12em;
    /*should match the above value*/
}

/* _forms 表單 --------------------*/
[class^='forms-'] input, [class^='forms-'] select, [class^='forms-'] textarea {
    font-family: Verdana, Arial, "Noto Sans SC Sliced", "Noto Sans TC", "Microsoft JhengHei";
}

.forms-basic input, .forms-basic select, .forms-basic textarea {
    font-size: 14px;
    font-family: Verdana, Arial, "Noto Sans SC Sliced", "Noto Sans TC", "Microsoft JhengHei";
    color: #fff;
    background-color: #0b2048;
    padding: .45em 1em;
    margin: 1px;
    border-radius: 3px;
}

.forms-basic .inp-show {
    display: inline-block;
    padding: .35em .3em;
}

.inp-note {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    padding: .6em .2em;
    margin: 0 .3em;
}

/*_nav 導覽列 -----------------------*/
.nav {
    font-size: 14px;
    letter-spacing: .1em;
    text-align: right;
    white-space: nowrap;
}

    .nav > ul {
        display: flex;
        align-items: center;
        height: 100%;
    }

        .nav > ul > li {
            margin: 0 .1em;
            position: relative;
        }

ul.menuWrapStlye > li {
    margin: 0 .1em;
    position: relative;
    margin-left: ５px;
}

    .nav > ul > li > a, ul.menuWrapStlye > li > a {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 0.8em .9em;
        border-bottom: 2px solid transparent;
    }

    ul.menuWrapStlye > li > a {
        font-size: 12px;
    }

.nav > ul > li > a:hover, .nav > ul > li > a.active {
    color: #9dc026;
}

ul.menuWrapStlye > li > a:hover, ul.menuWrapStlye > li > a:active {
    color: #9dc026;
}

.nav > ul > li > a.active:after {
    content: "";
    background-color: #9dc026;
    width: 1em;
    height: 2px;
    margin-left: -.5em;
    position: absolute;
    bottom: .6em;
    left: 50%;
}

/*_btn 按鈕 --------------------*/
[class^='btn-'] {
    font-family: Verdana, Arial, "Noto Sans SC Sliced", "Noto Sans TC", "Microsoft JhengHei";
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin: 1px auto;
    text-align: center;
    cursor: pointer;
}

    [class^='btn-']:hover {
        text-decoration: none;
    }

/*通用樣式*/
.btn-basic, .btn-active {
    color: #fff;
    padding: .5em 2em;
    border: 2px solid #fff;
    border-radius: 3em;
}

.cover-btn2 .btn-basic, .cover-btn2 .btn-active {
    color: #fff;
    padding: .5em 5em;
    border: 2px solid #9dc026;
    border-radius: 3em;
    margin: 10px;
}

.btn-basic {
    border-color: #fff;
}

    .btn-basic:hover {
        color: #333333;
        background-color: #EDBF00;
        border-color: #EDBF00;
    }

.btn-active {
    background-color: #9dc026;
    border-color: #9dc026;
}

    .btn-active:hover {
        background-color: #77a614;
        border-color: #77a614;
    }

.btn-download {
    color: #fff;
    background-color: #EDBF00;
    text-align: center;
    width: 10.5em;
    padding: .7em .6em;
    border-radius: 10rem;
}

    .btn-download:hover {
        background-color: #d2aa07;
    }

    .btn-download.android {
        background-color: #e19d04;
    }

        .btn-download.android:hover {
            background-color: #d19309;
        }

.btn-downloadOld {
    cursor: pointer;
    color: #333;
    text-align: center;
    width: 11.5em;
    padding: .5em;
    z-index: 999;
    background-color: rgba(255,255,255,.9);
    border-radius: 10rem;
    border: 1px solid rgba(0,0,0,0.1);
}

.btn-block {
    display: block !important;
    margin: 0;
}

/*獨立樣式*/
.btn-menu {
    font-size: 18px;
    color: #fff;
    line-height: 1.8;
    width: 1.6em;
    height: 1.6em;
}

    .btn-menu:hover {
        color: #9dc026;
    }

.btn-service {
    color: #fff;
    font-size: 18px;
    background-color: #9dc026;
    border: 3px solid #9dc026;
    border-radius: 3em;
    padding: .65em 8em;
    position: relative;
}

    .btn-service:after {
        content: "";
        background: url(../image/btn_service.png) no-repeat center center;
        width: 20%;
        padding-top: 26%;
        position: absolute;
        left: 15%;
        bottom: -41%;
    }

    .btn-service:hover {
        color: #333333;
        background-color: #EDBF00;
        border-color: #EDBF00;
    }

.btn-business {
    color: #333333;
    font-size: 18px;
    background-color: #EDBF00;
    border: 3px solid #EDBF00;
    border-radius: 3em;
    padding: .65em 8em;
    position: relative;
}

    .btn-business:hover {
        color: #fff;
        background-color: #d2aa07;
        border-color: #d2aa07;
    }

.btn-business1 {
    padding: .65em 8.7em;
    margin-bottom: 10px;
}

.btn-lightboxClose {
    font-size: 30px;
    color: #666;
}

    .btn-lightboxClose:hover {
        color: #fff;
    }

/*_menu --------------------*/
.menu-tutorial {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #565656;
}

    .menu-tutorial li {
        flex: 0 1 auto;
        margin: 0 .2em;
    }

    .menu-tutorial a {
        color: #bebebe;
        display: block;
        padding: .5em;
        position: relative;
    }

        .menu-tutorial a:after {
            height: 3px;
            background-color: transparent;
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
        }

        .menu-tutorial a:hover:after {
            background-color: #EDBF00;
        }

        .menu-tutorial a.active {
            color: #fff;
            font-weight: bold;
        }

            .menu-tutorial a.active:after {
                background-color: #EDBF00;
            }

/*_list 列表樣式 ----------------------*/
.list-qr {
    text-align: center;
    display: flex;
}

    .list-qr figure {
        background: no-repeat center center;
        background-size: contain;
        margin: 0 auto;
    }

    .list-qr .qr-qrcode {
        flex: 1 0 auto;
        margin-right: 10px;
    }

        .list-qr .qr-qrcode figure {
            padding-top: 150px;
            width: 150px;
            background-image: url(../image/barcode.png);
        }

        .list-qr .qr-qrcode p {
            color: #fff;
            text-align: center;
            padding: .3em;
            margin: .2em 0;
        }

.qr-btn {
    padding: 1.7em 0;
}

.list-wallet li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3em;
}

    .list-wallet li:nth-of-type(2) .item-txt {
        order: 2;
    }

    .list-wallet li:nth-of-type(1) .item-photo {
        background-image: url(../image/img_star01.png);
        background-position: center bottom;
        padding-top: 30%;
        order: 1;
    }

    .list-wallet li:nth-of-type(2) .item-photo {
        background-image: url(../image/img_star02.png);
        background-position: left bottom;
        padding-top: 30%;
        order: 1;
    }

    .list-wallet li:nth-of-type(3) .item-photo {
        background-image: url(../image/img_star03.png);
        background-position: center bottom;
        padding-top: 30%;
        order: 1;
    }

.wallet2 li:nth-of-type(1) .item-txt {
    order: 2;
}

.wallet2 li:nth-of-type(1) .item-photo {
    background-image: url(../image/img_service01.svg);
    background-position: center center;
    padding-top: 30%;
    order: 1;
}

.wallet2 li:nth-of-type(2) .item-photo {
    background-image: url(../image/img_service02.png);
    background-position: center center;
    padding-top: 30%;
    order: 2;
}

.list-wallet h5 {
    color: #9dc026;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: .6em;
}

.list-wallet .btnarea {
    text-align: left;
    padding: .5em 0;
}

    .list-wallet .btnarea .btn-active {
        margin: 1px 4px 1px 0;
    }

.list-wallet .item-txt {
    flex: 0 1 35%;
    margin: 0 2em;
}

.wallet2 .item-txt {
    flex: 0 1 40%;
    margin: 0 2em;
}

.list-wallet .item-photo {
    background: no-repeat center center;
    background-size: contain;
    flex: 0 1 35%;
    margin: 0 2em;
    padding-top: 42%;
}

.wallet2 .item-photo {
    background: no-repeat center center;
    background-size: contain;
    flex: 0 1 40%;
    margin: 0 2em;
    padding-top: 42%;
}

.list-coin {
    color: #919191;
    display: flex;
}

    .list-coin li {
         flex: 0 1 50%;
        padding: 0 40px;
        position: relative;
    }

    .list-coin li p {
        text-align:center;
    }
    
    /*  .list-coin li:before {
    content: "";
    background: url(../img/bg_coin.png) no-repeat center bottom;
    padding-top: 80%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1; }
*/
        .coinr4 li:nth-of-type(1) figure {
            background-image: url(../image/ico_04.png);
        }

.coinr4 li:nth-of-type(2) figure {
    background-image: url(../image/ico_05.png);
}

.coinr4 li:nth-of-type(3) figure {
    background-image: url(../image/ico_06.png);
}

.list-coin figure {
    background: no-repeat center bottom;
    padding-top: 100%;
    margin-bottom: 2.5em;
    position: relative;
    z-index: 10;
    margin-top: -60%;
}

.list-coin.coinr1 figure {
    margin-top: -65%;
}

.coinr4 h4 {
    color: #333333;
    font-size: 18px;
    text-align: center;
    margin-bottom: 1.2em;
}

.coinr1 h4 {
    color: #868686;
    font-size: 18px;
    text-align: center;
    margin-bottom: 1.2em;
}

.coinr1 li:nth-of-type(1) figure {
    background-image: url(../image/ico_01.png);
}

.coinr1 li:nth-of-type(2) figure {
    background-image: url(../image/ico_02.png);
}

.coinr1 li:nth-of-type(3) figure {
    background-image: url(../image/ico_03.png);
}

.coinr2 li:nth-of-type(1) figure {
    background-image: url(../image/ico_07.png);
}

.coinr2 li:nth-of-type(2) figure {
    background-image: url(../image/ico_08.png);
}

.coinr2 li:nth-of-type(3) figure {
    background-image: url(../image/ico_09.png);
}

.coinr2 h4 {
    color: #9dc026;
    font-size: 18px;
    text-align: center;
    margin-bottom: 1.2em;
}

.list-deposit {
    font-size: 13px;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

    .list-deposit li {
        flex: 0 1 20%;
    }

    .list-deposit._row1, .list-deposit._row3 {
        margin-bottom: 2em;
    }

        .list-deposit._row1 li:nth-of-type(1) figure, .list-deposit._row3 li:nth-of-type(1) figure {
            background-image: url(../image/ill_deposit1.svg);
        }

        .list-deposit._row1 li:nth-of-type(2) figure, .list-deposit._row3 li:nth-of-type(2) figure {
            background-image: url(../image/ill_deposit2.svg);
        }

        .list-deposit._row1 li:nth-of-type(3) figure, .list-deposit._row3 li:nth-of-type(3) figure {
            background-image: url(../image/ill_deposit3.svg);
        }

        .list-deposit._row1 li:nth-of-type(4) figure, .list-deposit._row3 li:nth-of-type(4) figure {
            background-image: url(../image/ill_deposit4.svg);
        }

        .list-deposit._row1 li:nth-of-type(5) figure, .list-deposit._row3 li:nth-of-type(5) figure {
            background-image: url(../image/ill_deposit5.svg);
        }

    .list-deposit._row2 {
        justify-content: center;
    }

        .list-deposit._row2 li {
            display: flex;
            flex-wrap: wrap;
            padding-top: 2.5em;
        }

            .list-deposit._row2 li:nth-of-type(1) figure {
                background-image: url(../image/ill_deposit6.svg);
            }

            .list-deposit._row2 li:nth-of-type(2) figure {
                background-image: url(../image/ill_deposit7.svg);
            }

            .list-deposit._row2 li figure {
                flex: 0 1 100%;
                order: 2;
            }

            .list-deposit._row2 li p {
                flex: 0 1 100%;
                order: 1;
                margin-bottom: -1.5em;
            }

                .list-deposit._row2 li p:after {
                    bottom: auto;
                    top: -1.5em;
                }

    .list-deposit._row3 {
        display: none;
    }

        .list-deposit._row3 li:nth-of-type(3) figure {
            background-image: url(../image/ill_deposit6.svg);
        }

        .list-deposit._row3 li:nth-of-type(4) figure {
            background-image: url(../image/ill_deposit7.svg);
        }

        .list-deposit._row3 li:nth-of-type(5) figure {
            background-image: url(../image/ill_deposit4.svg);
        }

        .list-deposit._row3 li:nth-of-type(6) figure {
            background-image: url(../image/ill_deposit5.svg);
        }

    .list-deposit p {
        color: #c1c1c1;
        display: inline-block;
        padding: .2em .5em;
        margin-bottom: 2.5em;
        position: relative;
    }

        .list-deposit p:after {
            content: "";
            background-color: #c1c1c1;
            width: 14px;
            height: 14px;
            margin-left: -7px;
            border-radius: 1em;
            position: absolute;
            bottom: -1.5em;
            left: 50%;
        }

    .list-deposit figure {
        background: no-repeat center top;
        background-size: contain;
        width: 70%;
        margin: 0 auto;
        padding-top: 70%;
        margin-bottom: 1em;
    }

.list-withdraw {
    font-size: 13px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3em;
    position: relative;
}

    .list-withdraw li {
        flex: 0 1 20%;
    }

        .list-withdraw li:nth-of-type(1) figure {
            background-image: url(../image/ill_withdraw1.svg);
        }

        .list-withdraw li:nth-of-type(2) figure {
            background-image: url(../image/ill_withdraw2.svg);
        }

        .list-withdraw li:nth-of-type(3) figure {
            background-image: url(../image/ill_withdraw3.svg);
        }

        .list-withdraw li:nth-of-type(4) figure {
            background-image: url(../image/ill_withdraw4.svg);
        }

        .list-withdraw li:nth-of-type(5) figure {
            background-image: url(../image/ill_withdraw5.svg);
        }

    .list-withdraw p {
        background-color: #565656;
        color: #fff;
        display: inline-block;
        padding: .2em 1em;
        margin-bottom: 1em;
    }

    .list-withdraw figure {
        background: no-repeat center top;
        background-size: contain;
        width: 70%;
        margin: 0 auto;
        padding-top: 70%;
        margin-bottom: 3em;
        position: relative;
    }

        .list-withdraw figure:before {
            background-color: #c1c1c1;
            content: "";
            height: 2px;
            position: absolute;
            bottom: -1.2em;
            left: -20%;
            right: -20%;
        }

        .list-withdraw figure:after {
            content: "";
            background-color: #c1c1c1;
            width: 14px;
            height: 14px;
            margin-left: -7px;
            border-radius: 1em;
            position: absolute;
            bottom: -1.5em;
            left: 50%;
        }

.list-tutorial img {
    max-width: 100%;
}

.list-tutorial li {
    display: none /*!important*/;
    text-align: center;
}

.list-tutorial .tutorial-intro {
    color: #eee;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 1em;
}

    .list-tutorial .tutorial-intro span {
        color: #EDBF00;
        margin-right: 1em;
    }

.list-tutorial .tutorial-mov {
    position: relative;
    display: inline-block;
    margin: auto;
    /*display: flex;*/
    justify-content: center;
    align-content: center;
}

.list-tutorial .tutorial-light {
    display: inline-block;
    border: 3px solid #fc0c66;
    position: absolute;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}

    .list-tutorial .tutorial-light:hover {
        cursor: pointer;
    }

/*------------------------------加值-------------------------------------*/
#list-deposit .step1 .tutorial-light {
    width: 5.7vw;
    height: 3vw;
    top: 9.5%;
    right: 2.2%;
}

#list-deposit .step2 .tutorial-light {
    width: 9.6vw;
    height: 3.5vw;
    top: 54.5%;
    right: 81%;
}

#list-deposit .step3 .tutorial-light._1 {
    width: 28vw;
    height: 3.1vw;
    top: 28%;
    right: 31.5%;
}

#list-deposit .step3 .tutorial-light._2 {
    width: 11.8vw;
    height: 3.3vw;
    top: 41%;
    right: 41.5%;
}

#list-deposit .step4 .tutorial-light {
    width: 18.7vw;
    height: 18.3vw;
    top: 29%;
    right: 36%;
}

#list-deposit .step5 .tutorial-light {
    width: 5.9vw;
    height: 3vw;
    top: 4.5%;
    right: 5.2%;
}
/*------------------------------提領-------------------------------------*/
#list-withdraw .step1 .tutorial-light {
    width: 5.7vw;
    height: 2vw;
    top: 15.5%;
    right: 2.2%;
}

#list-withdraw .step2 .tutorial-light {
    width: 5.6vw;
    height: 2.2vw;
    top: 39%;
    right: 87%;
}

#list-withdraw .step3 .tutorial-light._1 {
    width: 7.5vw;
    height: 2.5vw;
    top: 13%;
    right: 16%;
}

#list-withdraw .step3 .tutorial-light._2 {
    width: 10.5vw;
    height: 2vw;
    top: 91%;
    right: 64.5%;
}

#list-withdraw .step3 .tutorial-light._3 {
    width: 8.5vw;
    height: 3vw;
    top: 53%;
    right: 36.7%;
}

#list-withdraw .step3 .btn-how {
    width: 10.5vw;
    height: 3vw;
    position: absolute;
    top: 63%;
    right: 19.7%;
}

#list-withdraw .step4 .tutorial-light._1 {
    width: 38vw;
    height: 2.1vw;
    top: 62%;
    right: 19.5%;
}

#list-withdraw .step4 .tutorial-light._2 {
    width: 5.5vw;
    height: 2vw;
    top: 82.5%;
    right: 58.5%;
}

/*-------------------------------買幣-------------------------------------*/
#list-buy .step1 .tutorial-light {
    width: 3vw;
    height: 3vw;
    top: 50.5%;
    right: 47.3%;
}

#list-buy .step2 .tutorial-light._1 {
    width: 17.8vw;
    height: 8.5vw;
    top: 67%;
    right: 54.8%;
}

#list-buy .step2 .tutorial-light._2 {
    width: 16.3vw;
    height: 2.5vw;
    top: 80%;
    right: 20%;
}

#list-buy .step3 .tutorial-light._1 {
    width: 16.3vw;
    height: 2.5vw;
    top: 61.7%;
    right: 56.5%;
}

#list-buy .step3 .tutorial-light._2 {
    width: 16.5vw;
    height: 2.5vw;
    top: 71.7%;
    right: 19.3%;
}

#list-buy .step4 .tutorial-light._1 {
    width: 3vw;
    height: 3vw;
    top: 50.5%;
    right: 72.7%;
}

#list-buy .step4 .tutorial-light._2 {
    width: 18vw;
    height: 2.8vw;
    top: 19%;
    right: 36.5%;
}

#list-buy .step4 .tutorial-light._3 {
    width: 8.2vw;
    height: 2.3vw;
    top: 60%;
    right: 16%;
}

#list-buy .step5 .tutorial-light._1 {
    width: 2vw;
    height: 2vw;
    top: 6.6%;
    right: 54.5%;
}

#list-buy .step5 .tutorial-light._2 {
    width: 18.5vw;
    height: 5vw;
    top: 12.5%;
    right: 18%;
}
/*-------------------------------賣幣-------------------------------------*/
#list-sell .step1 .tutorial-light._1 {
    width: 3vw;
    height: 3vw;
    top: 59.5%;
    right: 73%;
}

#list-sell .step1 .tutorial-light._2 {
    width: 16.5vw;
    height: 2.2vw;
    top: 80%;
    right: 20.5%;
}

#list-sell .step2 .tutorial-light._1 {
    width: 17.5vw;
    height: 8.3vw;
    top: 18%;
    right: 56%;
}

#list-sell .step2 .tutorial-light._2 {
    width: 17vw;
    height: 2.5vw;
    top: 76.8%;
    right: 56.3%;
}

#list-sell .step2 .tutorial-light._3 {
    width: 17vw;
    height: 2.5vw;
    top: 79.6%;
    right: 18.5%;
}

#list-sell .step3 .tutorial-light._1 {
    width: 3vw;
    height: 3vw;
    top: 59.5%;
    right: 73.7%;
}

#list-sell .step3 .tutorial-light._2 {
    width: 3vw;
    height: 3vw;
    top: 50%;
    right: 56.8%;
}

#list-sell .step4 .tutorial-light._1 {
    width: 17vw;
    height: 2.5vw;
    top: 74.5%;
    right: 55.2%;
}

#list-sell .step4 .tutorial-light._2 {
    width: 16vw;
    height: 6vw;
    top: 70%;
    right: 20%;
}

#list-sell .step5 .tutorial-light._1 {
    width: 2vw;
    height: 2vw;
    top: 7.4%;
    right: 54%;
}

#list-sell .step5 .tutorial-light._2 {
    width: 4vw;
    height: 4vw;
    top: 14%;
    right: 22%;
}

@media (min-width: 1500px) {
    /*    -------------------------------加值-------------------------------------*/
    #list-deposit .step1 .tutorial-light {
        width: 87px;
        height: 45px;
    }

    #list-deposit .step2 .tutorial-light {
        width: 150px;
        height: 60px;
    }

    #list-deposit .step3 .tutorial-light._1 {
        width: 410px;
        height: 45px;
    }

    #list-deposit .step3 .tutorial-light._2 {
        width: 175px;
        height: 49px;
    }

    #list-deposit .step4 .tutorial-light {
        width: 274px;
        height: 264px;
        top: 30%;
        right: 36%;
    }

    #list-deposit .step5 .tutorial-light {
        width: 87px;
        height: 45px;
    }
    /*-------------------------------提領-------------------------------------*/
    #list-withdraw .step1 .tutorial-light {
        width: 90px;
        height: 30px;
    }

    #list-withdraw .step2 .tutorial-light {
        width: 97px;
        height: 37px;
    }

    #list-withdraw .step3 .tutorial-light._1 {
        width: 112px;
        height: 43px;
    }

    #list-withdraw .step3 .tutorial-light._2 {
        width: 156px;
        height: 37px;
    }

    #list-withdraw .step3 .tutorial-light._3 {
        width: 128px;
        height: 57px;
    }

    #list-withdraw .step4 .tutorial-light._1 {
        width: 560px;
        height: 40px;
    }

    #list-withdraw .step4 .tutorial-light._2 {
        width: 85px;
        height: 41px;
    }

    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        width: 47px;
        height: 47px;
        top: 50.5%;
    }

    #list-buy .step2 .tutorial-light._1 {
        width: 260px;
        height: 130px;
        top: 66.5%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 243px;
        height: 41px;
        top: 79.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 250px;
        height: 42px;
        top: 61.4%;
        right: 56%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 242px;
        height: 42px;
        top: 71.5%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 49px;
        height: 50px;
        top: 50.5%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 275px;
        height: 44px;
        top: 19%;
        right: 36%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 119px;
        height: 35px;
        top: 60%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 32px;
        height: 32px;
        top: 6.6%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 270px;
        height: 75px;
        top: 12.5%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        width: 50px;
        height: 50px;
        top: 59.5%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 244px;
        height: 45px;
        top: 79%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 254px;
        height: 120px;
        top: 18%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 250px;
        height: 37px;
        top: 76.9%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 248px;
        height: 40px;
        top: 79.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 50px;
        height: 50px;
        top: 59.5%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 50px;
        height: 50px;
        top: 50%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 250px;
        height: 41px;
        top: 74.3%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 236px;
        height: 90px;
        top: 70%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 30px;
        height: 30px;
        top: 7.4%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 63px;
        height: 66px;
        top: 13.3%;
    }
}

/*@media (min-width:1778px) {
    #list-buy .step1 .tutorial-light {
        width: 2.5vw;
        height: 2.5vw;
        top: 50.5%;*/
/*right: 48%;*/
/*}

    #list-buy .step2 .tutorial-light._1 {
        width: 14.5vw;
        height: 7.5vw;
        top: 66.5%;*/
/* right: 53.8%;*/
/*}

    #list-buy .step2 .tutorial-light._2 {
        width: 13vw;
        height: 2.5vw;
        top: 79%;*/
/* right: 26%;*/
/*}

    #list-buy .step3 .tutorial-light._1 {
        width: 13vw;
        height: 2.5vw;
        top: 61%;*/
/*  right: 55%;*/
/*}

    #list-buy .step3 .tutorial-light._2 {
        width: 13.5vw;
        height: 2.2vw;
        top: 71.5%;*/
/* right: 25%;*/
/*}

    #list-buy .step4 .tutorial-light._1 {
        width: 2.5vw;
        height: 2.5vw;
        top: 50.5%;*/
/*right: 68.5%;*/
/*}

    #list-buy .step4 .tutorial-light._2 {
        width: 14.3vw;
        height: 2.3vw;
        top: 19%;*/
/* right: 39.5%;*/
/*}

    #list-buy .step4 .tutorial-light._3 {
        width: 6.3vw;
        height: 2vw;
        top: 60%;*/
/*right: 22.5%;*/
/*}

    #list-buy .step5 .tutorial-light._1 {
        width: 1.5vw;
        height: 1.5vw;
        top: 6.6%;*/
/* right: 53.8%;*/
/*}

    #list-buy .step5 .tutorial-light._2 {
        width: 14.2vw;
        height: 4vw;
        top: 12.5%;*/
/* right: 24.8%;*/
/*}

    #list-sell .step1 .tutorial-light._1 {
        width: 2.5vw;
        height: 2.5vw;
        top: 59.5%;*/
/*  right: 69.8%;*/
/*}

    #list-sell .step1 .tutorial-light._2 {
        width: 13vw;
        height: 2.2vw;
        top: 79%;*/
/*   right: 27.5%;*/
/*}

    #list-sell .step2 .tutorial-light._1 {
        height: 6vw;
        top: 20%;
        right: 54%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 14vw;
        height: 2vw;
        top: 76.9%;
        right: 55%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 13vw;
        height: 2vw;
        top: 79.5%;*/
/* right: 25.1%;*/
/*}

    #list-sell .step3 .tutorial-light._1 {
        width: 2.5vw;
        height: 2.5vw;
        top: 59.5%;*/
/*right: 69.5%;*/
/*}

    #list-sell .step3 .tutorial-light._2 {
        width: 2.5vw;
        height: 2.5vw;
        top: 50%;*/
/* right: 55.6%;*/
/*}

    #list-sell .step4 .tutorial-light._1 {
        width: 12.8vw;
        height: 2vw;
        top: 74.5%;
        right: 55.5%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 12.6vw;
        height: 4vw;
        top: 70%;
        right: 21%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 1.5vw;
        height: 1.5vw;
        top: 7.4%;*/
/*  right: 53.3%;*/
/*}

    #list-sell .step5 .tutorial-light._2 {
        width: 3.5vw;
        height: 3.5vw;
        top: 13%;*/
/*right: 27.5%;*/
/*}
}

@media (min-width: 1875px) {*/
/*-----------------------------買幣---------------------------------------*/

/*#list-buy .step1 .tutorial-light {
        width: 2.5vw;
        height: 2.5vw;
        top: 50.5%;
        right: 47.5%;
    }

    #list-buy .step2 .tutorial-light._1 {
        width: 13.5vw;
        height: 6.5vw;
        top: 66.5%;
        right: 54.8%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 13vw;
        height: 2.5vw;
        top: 79%;
        right: 19.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 13vw;
        height: 2.5vw;
        top: 61%;
        right: 56%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 13vw;
        height: 2.2vw;
        top: 71.5%;
        right: 19%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 2.5vw;
        height: 2.5vw;
        top: 50.5%;
        right: 72.5%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 14.3vw;
        height: 2.3vw;
        top: 19%;
        right: 36%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 6.3vw;
        height: 2vw;
        top: 60%;
        right: 16%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 1.5vw;
        height: 1.5vw;
        top: 6.6%;
        right: 54.5%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 14.2vw;
        height: 4vw;
        top: 12.5%;
        right: 17.8%;
    }*/

/*  -------------------------------賣幣-------------------------------------*/
/*#list-sell .step1 .tutorial-light._1 {
        width: 2.5vw;
        height: 2.5vw;
        top: 59.5%;
        right: 73%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 13vw;
        height: 2.2vw;
        top: 79%;
        right: 20.5%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 13.5vw;
        height: 6.3vw;
        top: 18%;
        right: 56%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 13vw;
        height: 2vw;
        top: 76.9%;
        right: 56.3%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 13vw;
        height: 2vw;
        top: 79.5%;
        right: 18.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 2.5vw;
        height: 2.5vw;
        top: 59.5%;
        right: 65.5%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 2.5vw;
        height: 2.5vw;
        top: 50%;
        right: 57%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 12.8vw;
        height: 2vw;
        top: 74.5%;
        right: 55.3%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 12.6vw;
        height: 4vw;
        top: 70%;
        right: 20%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 1.5vw;
        height: 1.5vw;
        top: 7.4%;
        right: 54%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 3.5vw;
        height: 3.5vw;
        top: 13%;
        right: 21.5%;
    }

    #list-deposit .step5 .tutorial-light {
        width: 4.8vw;
        height: 2.6vw;
    }

    #list-deposit .step4 .tutorial-light {
        width: 14.7vw;
        height: 14vw;
        top: 29%;
        right: 36%;
    }

    #list-deposit .step3 .tutorial-light._1 {
        width: 22vw;
    }

    #list-deposit .step1 .tutorial-light {
        width: 4.7vw;
        height: 2.4vw;
    }
}*/

/* sm 平板 */
@media (max-width: 768px) {
    .list-qr figure {
        padding-top: 80px;
    }
}

/* xs 手機 */
@media (max-width: 480px) {
    .list-qr {
        flex-wrap: wrap;
        text-align: left;
    }

    .w-50 li {
        flex: 1 1 100%;
    }

    .qr-qrcode {
        display: none;
    }
}

/*_page ----------------------*/
.page-tit {
    color: #333333;
    font-size: 34px;
    font-weight: 500;
    text-align: center;
    margin-bottom: .3em;
}

    .page-tit em {
        color: #bebebe;
        font-size: 18px;
        font-style: normal;
        display: inline-block;
        padding-bottom: .55em;
        margin-bottom: .6em;
        position: relative;
    }

        .page-tit em:after {
            content: "";
            background: url(../image/bg_pagetit.png) no-repeat 0 0;
            width: 16px;
            height: 8px;
            margin-left: -8px;
            position: absolute;
            left: 50%;
            bottom: 0;
        }

    .page-tit span {
        display: block;
    }

.page-subtit {
    color: #616161;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.5em;
}

    .page-subtit span {
        padding-bottom: .3em;
        position: relative;
    }

        .page-subtit span:after {
            content: "";
            background-color: #f4d23e;
            height: 3px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

.page-intro {
    color: #9dc026;
    text-align: center;
    margin-bottom: 1em;
}

.page-ill {
    background: url(/img/ill_index_gift.png) no-repeat center top;
    height: 345px;
    margin: 30px 0;
}

.page-btn {
    margin: 40px 0;
}

.page-cover, .page-start, .page-coin, .page-r1, .page-start1, .page-r2, .page-r5, .page-deposit, .page-withdraw {
    background: no-repeat center top;
    background-size: cover;
    padding: 60px 0 50px 0;
}

.page-start1 {
    background: url(../image/bg_indexR2.png) no-repeat top center;
}

.page-cover {
    background: url(../image/bg_cover.png) no-repeat center top;
    background-size: 100% 100%;
    padding: 0;
    position: relative;
    height: 520px;
    margin-bottom: 7em;
}

    .page-cover .wrap-con {
        height: 540px;
    }

    .page-cover .page-intro {
        margin-bottom: 3em;
    }

    .page-cover .cover-txt {
        width: 45.5%;
        position: absolute;
        top: 18%;
        left: 16.5%;
    }

        .page-cover .cover-txt h2 {
            color: #fff;
            font-size: 40px;
            font-weight: 500;
        }

    .page-cover .cover-intro {
        color: #eeff70;
        font-size: 20px;
        font-weight: 300;
        position: relative;
    }

    .page-cover .cover-btn {
        padding-top: 2.5em;
        margin-bottom: 2em;
    }

    .page-cover .cover-btn3 .btn-basic, .page-cover .cover-btn3 .btn-active {
        margin: .3em .2em;
    }

    .page-cover .cover-qrcode {
        display: flex;
        align-items: center;
        width: 60%;
        position: absolute;
        left: 16.5%;
        bottom: -30px;
    }

        .page-cover .cover-qrcode .qrcode-photo {
            background: url(../image/ill_qrcode.png) no-repeat center center;
            background-size: contain;
            flex: 0 0 100px;
            padding-top: 100px;
            margin-right: 1.5em;
        }

    .page-cover .cover-main {
        background: url(../image/ill_coverPhone1.png) no-repeat center top;
        background-size: cover;
        width: 215px;
        padding-top: 430px;
        position: absolute;
        bottom: 0;
        left: 62%;
    }

.page-start .page-tit {
    margin-bottom: 1.6em;
}

.page-r2 .r2Contant {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3em;
}

.page-r2 {
    background: url(../image/bg_customerR2.png) no-repeat center top;
    background-size: cover;
}

/*.r2Contant .item-photo {
    background-image: url(../image/logo_cpgBIG.png);
    background-position: center center;
    padding-top: 30%;
    background: no-repeat center center;
    background-size: contain;
    flex: 0 1 35%;
    margin: 0 2em;
}*/
.r2Content {
    display: flex;
    justify-content: center;
}

.r2-LogoRange {
    width: 50%;
}

    .r2-LogoRange figure {
        background: url(../image/logo_cpgBIG.png) no-repeat center center;
        width: 100%;
        height: 210px;
        transform: scale(0.8);
    }

.r2-ContentRange {
    /*flex: 0 1 60%;*/
    margin: 0 2em;
    width: 60%;
    padding: 1.5em 0;
}

.r2Title {
    color: #9dc026;
    font-size: 40px;
    font-weight: bold;
}

.r2Txt {
    color: #353535;
    font-size: 18px;
    font-weight: bold;
}

.r2LiFlex {
    /*    display: flex;
*/ justify-content: flex-start;
    font-size: 16px;
    color: #000;
    line-height: 45px;
}

     /* .r2LiFlex figure {
                  background: url(../img/ico_checkBox.png) no-repeat center center;
            width: 33px;
            height: 25px;
            vertical-align: middle;
            margin: 10px;
            margin-left: 0;

    }*/

.page-coin {
    background: url(../image/bg_coinbg.jpg) no-repeat center top;
    background-size: cover;
}

.page-how {
    text-align: center;
}

    .page-how figure {
        background: url(../image/bg_how.jpg) no-repeat center top;
        background-size: contain;
        padding-top: 63%;
    }

.page-deposit {
    background-image: url(../image/bg_deposit.jpg);
}

    .page-deposit h4 {
        color: #9dc026;
        font-size: 18px;
        font-weight: bold;
        margin: 1em 0 .5em 0;
        text-align: center;
        display: none;
    }

    .page-deposit .page-tit {
        color: #fff;
    }

    .page-deposit .page-intro {
        color: #eeff70;
    }

    .page-deposit .deposit-con {
        background: url(../image/bg_depositLine.png) no-repeat center 54%;
        background-size: 80% 17%;
    }

.page-withdraw {
    background-image: url(../image/bg_withdraw.jpg);
}

    .page-withdraw .page-intro {
        color: #7fae21;
    }

/*_lightbox ----------------------*/
.lightbox {
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
}

    .lightbox img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
    }

    .lightbox .btn-lightboxClose {
        position: absolute;
        top: .3em;
        right: .5em;
    }

    .lightbox .box-con {
        width: 70%;
        margin: 2em auto;
    }

    .lightbox .box-mov iframe {
        width: 80%;
        height: 45vw;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .lightbox .box-mov video {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

#lightbox-how h4 {
    color: #fff;
    font-size: 28px;
    font-weight: normal;
    text-align: center;
    margin: 2em 0 .5em 0;
}

#lightbox-how .how-get {
    position: relative;
}

#lightbox-how .tutorial-light {
    border: 3px solid #fc0c66;
    position: absolute;
    border-radius: 5px;
}

    #lightbox-how .tutorial-light._1 {
        width: 4.7vw;
        height: 4.8vw;
        top: 61%;
        right: 58%;
    }

    #lightbox-how .tutorial-light._2 {
        width: 16.8vw;
        height: 22.5vw;
        top: 15.5%;
        right: 16.8%;
        /*width: 3.2vw;
                height: 3vw;
                top: 89.5%;
                right: 14.8%;*/
    }

    #lightbox-how .tutorial-light._3 {
        width: 21vw;
        height: 3.9vw;
        top: 34.5%;
        right: 13.2%;
    }

.lightboxBtn {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    z-index: 999;
    margin-top: -25px;
}

    .lightboxBtn div {
        flex: 0 1 auto;
        margin: 0 2em;
    }

    .lightboxBtn a {
        position: relative;
        display: block;
        color: #bebebe;
        padding: .5em;
    }

        .lightboxBtn a:hover {
            color: #EDBF00;
            font-weight: bold;
        }

    .lightboxBtn i {
        margin: 10px;
    }

    .lightboxBtn a:hover > i {
        animation: ihover infinite 0.8s linear;
    }

@keyframes ihover {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }
}

.r5-container {
    clear: left;
    position: relative;
    padding-top: 15px;
    /*padding-bottom: 30px;*/
    /*margin-bottom: 20px;*/
}

ul.tabTitle {
    width: 70%;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 105px;
}

    ul.tabTitle li {
        cursor: pointer;
        width: 300px;
        height: 30px;
        margin: 0 10px;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        border-bottom: 5px solid #868686;
    }

        ul.tabTitle li:hover {
            border-bottom: 5px solid #EDBF00;
            background-color: #EDBF00;
            border-radius: 5px;
            filter: brightness(1.1);
            transition: 0.3s;
        }

        ul.tabTitle li.active {
            border-bottom: 5px solid #9dc026;
        }

            ul.tabTitle li.active:hover {
                background-color: transparent;
                border-radius: 0px;
                filter: brightness(1);
            }

        ul.tabTitle li a {
            color: #868686;
        }

.tabContent {
    clear: left;
    width: 70%;
    position: relative;
    margin: 60px auto;
    margin-bottom: 80px;
}

.tabContentTitle {
    font-size: 20px;
    color: #5f8802;
    text-align: left;
    font-weight: 500;
    margin-bottom: 20px;
}

    .tabContentTitle span {
        color: #868686;
        font-size: 14px;
    }

.tabContentTxt {
    position: relative;
    padding-top: 40px;
    padding-left: 13px;
    color: #868686;
    font-size: 14px;
    font-weight: 400;
    width: 280px;
    height: 378px;
}

    .tabContentTxt ul {
        padding-left: 20px;
    }

        .tabContentTxt ul li {
            margin-bottom: 50px;
        }

            .tabContentTxt ul li span {
                color: #5f8802;
                font-size: 18px;
            }

    .tabContentTxt .depositHr {
        position: absolute;
        width: 1px;
        height: 184px;
        top: 40px;
        left: 4.5px;
        border-left: 5px dashed #aaa9a9;
    }

    .tabContentTxt .registrationHr {
        position: absolute;
        width: 1px;
        height: 280px;
        top: 75px;
        left: 4.5px;
        border-left: 5px dashed #aaa9a9;
    }

.depositSpan {
    margin-top: -22px;
}

    .depositSpan li {
        height: 50px;
    }

.r5-position {
    position: relative;
    padding-left: 50px;
}

.carousel {
    background: url(../image/img_phone.png) no-repeat top right;
    width: 284px;
    height: 562px;
    position: absolute;
    z-index: 499;
}

.carousel01 {
    width: 50%;
}

    .carousel01 div {
        width: 244px;
        height: 528px;
        right: -20.8px;
        top: 6.5px;
        background-size: cover;
    }

.img1-1 {
    background: url(../image/img_registration01.jpg) no-repeat top center;
}

.img1-2 {
    background: url(../image/img_registration02.jpg) no-repeat top center;
}

.img1-3 {
    background: url(../image/img_registration03.jpg) no-repeat top center;
}

.img1-4 {
    background: url(../image/img_registration04.jpg) no-repeat top center;
}

.carousel02 div {
    width: 244px;
    height: 535px;
    right: -20.8px;
    top: 6.5px;
    background-size: contain;
}

.img2-1 {
    background: url(../image/img_deposit01.png) no-repeat top center;
}

.img2-2 {
    background: url(../image/img_deposit02.png) no-repeat top center;
}

.img2-3 {
    background: url(../image/img_deposit03.png) no-repeat top center;
}

.img3-1 {
    background: url(../image/img_deposit01.png) no-repeat top center;
}

.img3-2 {
    background: url(../image/img_withdraw02.png) no-repeat top center;
}

.img3-3 {
    background: url(../image/img_withdraw03.png) no-repeat top center;
}

.btn-sever {
    width: 100%;
}

/*--------------------------------輪播器修改-----------------------------------*/
ul.slick-dots {
    position: absolute;
    top: 109px;
    left: -355px;
}

    ul.slick-dots li {
        height: 40px;
        margin-bottom: 60px;
    }

.slick-dots li {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

    .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 20px;
        height: 20px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
        z-index: 999;
    }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

            .slick-dots li button:hover:before,
            .slick-dots li button:focus:before {
                opacity: 1;
            }

        .slick-dots li button:before {
            font-family: 'slick';
            font-size: 80px;
            line-height: 15px;
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            content: '•';
            text-align: center;
            opacity: .8;
            color: #aaa9a9;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

    .slick-dots li.slick-active button:before {
        opacity: .75;
        color: #EDBF00;
    }

.fa-header:before, .fa-mobile-phone:before, .fa-mobile:before {
    content: "";
}
/*_media 裝置切換 --------------------------*/
/* lg>1200 md<1200 sm<768 xs<480 */
/* lg 大螢幕 */
@media (min-width: 1200px) {
    .lg-show {
        display: block;
    }

        .lg-show._inline {
            display: inline-block;
        }

    .lg-hide {
        display: none;
    }
}

/* md 電腦 */
@media (max-width: 1366px) {
    .page-cover {
        background-size: auto 100%;
    }
}

@media (max-width: 1200px) {
    .md-show {
        display: block;
    }

        .md-show._inline {
            display: inline-block;
        }

    .md-hide {
        display: none;
    }
}

@media (max-width: 1180px) {
    .wrap-con {
        width: 100%;
        padding-bottom: 50px;
    }
    /*_page -----------*/
    .page-cover .cover-txt {
        width: 92%;
        left: 8%;
        z-index: 30;
    }

    .page-cover .cover-main {
        left: 65%;
    }

    .page-cover .cover-qrcode {
        left: 8%;
        bottom:0;
    }
    /*_list*/
    .list-coin {
        margin: 0 2em;
    }

        .list-coin h4 {
            font-size: 16px;
        }

        .list-coin li:before {
            padding-top: 100%;
        }

        .list-coin figure {
            padding-top: 120%;
        }

    .list-deposit {
        margin: 0 2em 4em 2em;
    }

    .list-withdraw {
        margin: 0 2em 4em 2em;
    }

    .r2-ContentRange {
        width: 100%;
        text-align: center;
    }

    .r2-LogoRange {
        width: 100%;
    }

        .r2-LogoRange figure {
            transform: none;
        }

    .r2Content {
        flex-wrap: wrap;
    }

    .page-r2 {
        background: url(../image/bg_customerR2.png) no-repeat right top;
        background-size: cover
    }

    .page-cover .cover-qrcode .qr-qrcode figure {
        padding-top: 120px;
        width: 120px;
    }
}

/* sm 平板 */
@media (max-width: 768px) {
    /*.qr-btn.oldsty {
        padding-top: 0;
    }*/

    .sm-show {
        display: block;
    }

        .sm-show._inline {
            display: inline-block;
        }

    .sm-hide {
        display: none;
    }
    /*_frame*/
    .fa-header .branding a {
        margin: 0 auto;
    }

    .fa-header .nav {
        display: none;
    }

    .fa-header .btn-menu {
        display: block;
    }
    /*_page -----------*/
    .page-cover .wrap-con {
        overflow-x: hidden;
        height: 541px;
    }

    /*  .page-cover .cover-txt {
        top: 10.5%;
    }*/

    .page-cover .cover-main {
        width: 213px;
        padding-top: 455px;
        left: 72%;
    }

    .page-cover .cover-qrcode .qr-qrcode {
        margin-right: 0px;
    }



    /*_list*/
    .list-coin {
        flex-wrap: wrap;
    }

        .list-coin li {
           /* flex-basis: 33%;*/
            padding: 0;
            margin-bottom: 0;
        }

            .list-coin li:before {
                padding-top: 55%;
                background-size: 60% auto;
                background-position: center top;
            }

        .list-coin p {
            margin: 0 2em;
        }

        .list-coin figure {
            padding-top: 80%;
            width: 100%;
            margin: 0 auto 2em auto;
        }

    .list-deposit._row2 li p {
        margin-bottom: 0;
    }

    .list-withdraw p {
        margin: 0 .5em 1em .5em;
    }

    .list-coin.coinr1 figure {
        margin-top: 0;
    }

    .page-cover .cover-btn {
        padding-top: 4.5em;
    }

    .page-r2 {
        background: url(../image/bg_customerR2.png) no-repeat right top;
        background-size: cover
    }

    .btn-basic, .btn-active {
        padding: .5em 1.4em;
    }

    .list-tutorial .tutorial-intro {
        font-size: 14px;
    }

    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        width: 3vw;
        height: 3vw;
        top: 50.5%;
        right: 47.3%;
    }

    #list-buy .step2 .tutorial-light._1 {
        width: 17.5vw;
        height: 8.5vw;
        top: 66.5%;
        right: 54.8%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 16.5vw;
        height: 2vw;
        top: 80%;
        right: 20%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 16.4vw;
        height: 2.5vw;
        top: 61.3%;
        right: 56.3%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 16vw;
        height: 2.2vw;
        top: 71.8%;
        right: 19.5%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 3vw;
        height: 3vw;
        top: 50.5%;
        right: 72.7%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 18.7vw;
        height: 2.3vw;
        top: 19%;
        right: 36%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 8vw;
        height: 2vw;
        top: 60%;
        right: 16%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 1.8vw;
        height: 1.8vw;
        top: 6.6%;
        right: 54.5%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 18vw;
        height: 5vw;
        top: 12.5%;
        right: 18.2%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        width: 3vw;
        height: 3vw;
        top: 59.5%;
        right: 73%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 17vw;
        height: 2.2vw;
        top: 79.5%;
        right: 20.2%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 17.5vw;
        height: 8.3vw;
        top: 18%;
        right: 56%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 17vw;
        height: 2vw;
        top: 76.9%;
        right: 56.3%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 16.5vw;
        height: 2vw;
        top: 79.5%;
        right: 18.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 3vw;
        height: 3vw;
        top: 59.5%;
        right: 73.7%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 3vw;
        height: 3vw;
        top: 50%;
        right: 56.8%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 16.5vw;
        height: 2vw;
        top: 74.5%;
        right: 55.4%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 16vw;
        height: 6vw;
        top: 70%;
        right: 20%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 2vw;
        height: 2vw;
        top: 7.4%;
        right: 54%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 4.5vw;
        height: 4.5vw;
        top: 13%;
        right: 21.5%;
    }
}

@media (max-width: 767px) {
    #list-deposit .step3 .tutorial-light._2 {
        height: 2.5vw;
    }

    .tabContentTxt .registrationHr, .tabContentTxt .depositHr, .r5-position {
        display: none;
    }

    .tabContentTxt {
        padding-top: 0;
        padding-left: 0;
    }

        .tabContentTxt ul {
            padding-left: 0;
            padding-top: 30px;
        }

    .btn-basic, .btn-active {
        padding: .5em 2em;
    }

        .btn-basic, .btn-active.oldsty {
            padding: .5em 1.4em;
        }

    .marginTop {
        margin-top: 10px;
    }

    /*    .page-cover .cover-qrcode li.oldsty {
        margin-bottom: 1.5em;
    }*/

    .page-cover .cover-txt h2 {
        font-size: 36px;
    }

    .page-cover .cover-qrcode {
        display: none;
    }
}

@media (max-width: 540px) {
    .tabflex {
        flex-wrap: wrap;
    }

    .list-coin li {
        flex-basis: 50%;
    }

    .lightboxBtn {
        margin-top: 13em;
    }

    .lightbox img.imgsetting {
        /*max-width: 100%;
        max-height: 100%;*/
        width: 100%;
        height: 100%;
        transform: scale(1.8) translateY(3.5em);
    }

    .lightbox img.imgMaxwidth {
        max-width: 100%;
        max-height: 100%;
        transform: scale(1.3) translateY(3.5em);
    }
    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        width: 2em;
        height: 2em;
        top: 92%;
        right: 45%;
    }

    #list-buy .step2 .tutorial-light._1 {
        width: 32vw;
        height: 14.5vw;
        top: 117.5%;
        right: 58.8%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 29vw;
        height: 5vw;
        top: 139.5%;
        right: -3.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 32vw;
        height: 4.8vw;
        top: 106.8%;
        right: 60%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 32vw;
        height: 5vw;
        top: 125%;
        right: -7%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 4vw;
        height: 4vw;
        top: 77%;
        right: 79.7%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 24vw;
        height: 3.5vw;
        top: 35.5%;
        right: 31.7%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 11vw;
        height: 3vw;
        top: 89%;
        right: 6%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 9%;
        right: 58.3%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 33vw;
        height: 8.5vw;
        top: 19.6%;
        right: -7.2%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        width: 5.5vw;
        height: 5.5vw;
        top: 104%;
        right: 92%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 139.5%;
        right: -2.8%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 31.5vw;
        height: 14.3vw;
        top: 30%;
        right: 61%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 135%;
        right: 61.3%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 33vw;
        height: 4.5vw;
        top: 30%;
        right: -8.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 6vw;
        height: 6vw;
        top: 102%;
        right: 92.3%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 6vw;
        height: 6vw;
        top: 86.3%;
        right: 62.5%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 31.5vw;
        height: 3.8vw;
        top: 131.6%;
        right: 59%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 30vw;
        height: 11vw;
        top: 122%;
        right: -5%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 10.5%;
        right: 56.8%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 8vw;
        height: 8vw;
        top: 20.5%;
        right: -0.5%;
    }
}

/* xs 手機 */
@media (max-width: 480px) {
    .btn-business1 {
        margin-bottom: 0;
    }

    .w-50 {
        margin-bottom: 15px;
    }

    .xs-show {
        display: block;
    }

        .xs-show._inline {
            display: inline-block;
        }

    .xs-hide {
        display: none;
    }
    /*_basic -----------*/
    .btn-service {
        padding: .65em .5em;
        display: block;
    }

        .btn-service:after {
            bottom: -20%;
            left: 10%;
        }

    .btn-business, btn-business1 {
        padding: .65em .5em;
        display: block;
    }
    /*_page ----------------------*/
    .page-tit {
        font-size: 28px;
    }

    /*.page-cover, .page-start, .page-coin, .page-how, .page-deposit, .page-withdraw {
         padding: 40px 0 0 0;
    }*/

        .page-cover .wrap-con {
            height: 600px;
            overflow-x: hidden;
        }

        .page-cover .cover-txt {
            width: 60%;
        }

        .page-cover .cover-main {
            z-index: 5;
            bottom: 2em;
        }

        .page-cover .cover-qrcode {
            bottom: 0;
            z-index: 10;
        }

        .page-deposit h4 {
            display: block;
        }

        .page-deposit .deposit-con {
            background: none;
        }
    /*_list ---------------------*/
    .list-wallet h5 {
        text-align: center;
    }

    .list-wallet li {
        display: block;
        margin-bottom: 7em;
    }

        .list-wallet li:nth-of-type(2) .item-photo {
            background-position: center bottom;
            padding-top: 65%;
        }

    .list-wallet .item-txt {
        margin-bottom: 20px;
    }

    .list-wallet .item-photo {
        padding-top: 100%;
        margin-bottom: 3em;
    }

    .list-coin li {
        flex-basis: 100%;
    }

    .list-deposit {
        margin: 1em 0;
        display: block;
    }

        .list-deposit._row2 {
            display: none;
        }

        .list-deposit._row3 {
            display: block;
        }

        .list-deposit li {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .list-deposit figure {
            flex: 0 1 30%;
            padding-top: 30%;
            margin-left: 20%;
            margin-right: 5%;
        }

        .list-deposit p {
            text-align: left;
            flex: 1 1 auto;
            margin-bottom: 0;
        }

            .list-deposit p:after {
                margin-left: -1em;
                bottom: .4em;
                left: 0;
            }

    .list-withdraw {
        flex-wrap: wrap;
    }

        .list-withdraw li {
            flex: 1 1 90%;
        }

        .list-withdraw figure {
            padding-top: 50%;
        }

    .wallet2 li:nth-of-type(1) .item-photo {
        padding-top: 65%;
    }

    ul.tabTitle {
        width: 90%;
    }

    .list-wallet li:nth-of-type(1) .item-photo, .list-wallet li:nth-of-type(3) .item-photo {
        padding-top: 65%;
    }

    .list-coin figure {
        padding-top: 60%;
    }

    .page-cover .cover-btn {
        padding-top: 5em;
    }

    .page-r1 {
        padding: 0 0 50px 0;
    }

    .r2-LogoRange figure {
        width: 100%;
        transform: scale(0.8);
        background-size: contain;
    }

    .tabflex {
        flex-wrap: wrap;
    }

    .carousel {
        background: url(../image/img_phone.png) no-repeat top center;
        width: 100%;
    }

    .r5-position {
        padding-left: 0px;
        width: 100%;
    }

    .txtmarginBottom {
        margin-bottom: 20px;
    }

    #registration ul.slick-dots {
        top: -403px;
        left: 48.5px;
    }

    #deposit ul.slick-dots, #withdraw ul.slick-dots {
        top: -314px;
        left: 48.5px;
    }

    .tabContentTxt {
        height: auto;
    }

    .tabContent {
        width: 100%;
    }

    .carousel01 div {
        right: -41.5%;
    }

    .r2LiFlex {
        display: block;
    }

    .tabContentTxt .registrationHr, .tabContentTxt .depositHr, .r5-position {
        display: none;
    }

    /*   .tabContentTxt {
        padding-top: 0;
        padding-left: 0;
    }

        .tabContentTxt ul {
            padding-left: 0;
            padding-top: 30px;
        }*/

    .tabContent {
        margin-bottom: 0px;
    }

    .btn-sever {
        transform: scale(0.9);
    }

    .page-cover .cover-intro {
        font-size: 14px;
    }

    .menu-tutorial a {
        font-size: 6px;
    }

    .lightboxBtn div {
        margin: 0 .5em;
    }

    .lightboxBtn a {
        padding: 0px;
    }

    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        width: 1.5em;
        height: 1.5em;
        top: 93%;
        right: 46%;
    }

    #list-buy .step2 .tutorial-light._1 {
        width: 32vw;
        height: 14.5vw;
        top: 123.5%;
        right: 58.8%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 29vw;
        height: 4vw;
        top: 145.5%;
        right: -4.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 32vw;
        height: 4.8vw;
        top: 111.5%;
        right: 60%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 32vw;
        height: 5vw;
        top: 129%;
        right: -7%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 4vw;
        height: 4vw;
        top: 81%;
        right: 79.7%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 24vw;
        height: 3.5vw;
        top: 39.5%;
        right: 31.7%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 11vw;
        height: 3vw;
        top: 93%;
        right: 6%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 13%;
        right: 58.3%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 33vw;
        height: 8.5vw;
        top: 24%;
        right: -7.5%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        width: 5.5vw;
        height: 5.5vw;
        top: 108%;
        right: 92%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 143.5%;
        right: -2.8%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 31.5vw;
        height: 14.3vw;
        top: 34%;
        right: 61%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 140%;
        right: 61.5%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 33vw;
        height: 4.5vw;
        top: 35%;
        right: -8.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 6vw;
        height: 6vw;
        top: 107%;
        right: 92.3%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 6vw;
        height: 6vw;
        top: 90.3%;
        right: 62.5%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 31.5vw;
        height: 3.8vw;
        top: 135.6%;
        right: 59%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 30vw;
        height: 11vw;
        top: 126%;
        right: -5%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 14.5%;
        right: 56.8%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 8vw;
        height: 8vw;
        top: 24.5%;
        right: -0.5%;
    }
}

@media (max-width: 460px) {
    .page-cover .cover-txt h2 {
        font-size: 26px;
    }
}

@media (max-width: 414px) {
    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        width: 1.5em;
        height: 1.5em;
        top: 98%;
        right: 45.5%;
    }

    #list-buy .step2 .tutorial-light._1 {
        width: 32vw;
        height: 14.5vw;
        top: 127.5%;
        right: 58.8%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 29vw;
        height: 5vw;
        top: 150.5%;
        right: -3.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 32vw;
        height: 4.8vw;
        top: 117.8%;
        right: 60%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 32vw;
        height: 5vw;
        top: 136%;
        right: -7%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 4vw;
        height: 4vw;
        top: 84%;
        right: 78.7%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 24vw;
        height: 3.5vw;
        top: 43.5%;
        right: 31.7%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 11vw;
        height: 3vw;
        top: 97%;
        right: 6%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 19%;
        right: 58.3%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 33vw;
        height: 8.5vw;
        top: 30.6%;
        right: -7.2%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        width: 5.5vw;
        height: 5.5vw;
        top: 115%;
        right: 91%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 150%;
        right: -3.5%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 31.5vw;
        height: 14.3vw;
        top: 40%;
        right: 61%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 145.5%;
        right: 61.5%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 33vw;
        height: 4.5vw;
        top: 40%;
        right: -8.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 6vw;
        height: 6vw;
        top: 113%;
        right: 92%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 6vw;
        height: 6vw;
        top: 97.3%;
        right: 61.5%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 31.5vw;
        height: 3.8vw;
        top: 143%;
        right: 59%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 30vw;
        height: 11vw;
        top: 133%;
        right: -5%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 20.5%;
        right: 56.8%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 8vw;
        height: 8vw;
        top: 31.5%;
        right: -1.5%;
    }

    .page-cover .cover-txt h2 {
        font-size: 36px;
    }
}

@media (max-width: 390px) {
    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        top: 102%;
        right: 44.5%;
    }

    #list-buy .step2 .tutorial-light._1 {
        top: 132.5%;
    }

    #list-buy .step2 .tutorial-light._2 {
        top: 154.5%;
        height: 4vw;
    }

    #list-buy .step3 .tutorial-light._1 {
        top: 121%;
    }

    #list-buy .step3 .tutorial-light._2 {
        top: 139%;
    }

    #list-buy .step4 .tutorial-light._1 {
        top: 87%;
    }

    #list-buy .step4 .tutorial-light._2 {
        top: 45.5%;
        right: 31.7%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 10vw;
        top: 99%;
    }

    #list-buy .step5 .tutorial-light._1 {
        top: 22%;
        right: 58.3%;
    }

    #list-buy .step5 .tutorial-light._2 {
        top: 34.6%;
        right: -8.2%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        top: 118%;
    }

    #list-sell .step1 .tutorial-light._2 {
        top: 154%;
    }

    #list-sell .step2 .tutorial-light._1 {
        top: 43%;
    }

    #list-sell .step2 .tutorial-light._2 {
        top: 149.5%;
    }

    #list-sell .step2 .tutorial-light._3 {
        top: 44%;
        right: -9.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        top: 117%;
    }

    #list-sell .step3 .tutorial-light._2 {
        top: 101.3%;
    }

    #list-sell .step4 .tutorial-light._1 {
        top: 145%;
    }

    #list-sell .step4 .tutorial-light._2 {
        top: 137%;
    }

    #list-sell .step5 .tutorial-light._1 {
        top: 23.5%;
    }

    #list-sell .step5 .tutorial-light._2 {
        top: 34.5%;
    }

    .w-50 {
        margin-bottom: -26px;
    }
}

@media (max-width: 375px) {
    #list-deposit .step3 .tutorial-light._2 {
        height: 2vw;
    }

    .w-50 {
        margin-bottom: 25px;
    }

    #registration ul.slick-dots {
        top: -403px;
        left: 29.5px;
    }

    #deposit ul.slick-dots, #withdraw ul.slick-dots {
        top: -314px;
        left: -27.5px;
    }

    .carousel01 div {
        right: -37.5%;
    }

    .marginTop {
        margin-top: 1px;
    }

    /*-------------------------------買幣-------------------------------------*/
    /*   #list-buy .step1 .tutorial-light {
            width: 2em;
            height: 2em;
            top: 103%;
            right: 43.5%;
        }*/

    #list-buy .step2 .tutorial-light._1 {
        width: 32vw;
        height: 14.5vw;
        top: 132.5%;
        right: 58.8%;
    }

    #list-buy .step2 .tutorial-light._2 {
        width: 29vw;
        height: 5vw;
        top: 155.5%;
        right: -3.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        width: 32vw;
        height: 4.8vw;
        top: 122.8%;
        right: 60%;
    }

    #list-buy .step3 .tutorial-light._2 {
        width: 32vw;
        height: 5vw;
        top: 141%;
        right: -7%;
    }

    #list-buy .step4 .tutorial-light._1 {
        width: 4vw;
        height: 4vw;
        top: 88%;
        right: 78.7%;
    }

    #list-buy .step4 .tutorial-light._2 {
        width: 24vw;
        height: 3.5vw;
        top: 47.5%;
        right: 31.7%;
    }

    #list-buy .step4 .tutorial-light._3 {
        width: 11vw;
        height: 3vw;
        top: 101%;
        right: 6%;
    }

    #list-buy .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 24%;
        right: 58.3%;
    }

    #list-buy .step5 .tutorial-light._2 {
        width: 33vw;
        height: 8.5vw;
        top: 35.6%;
        right: -7.2%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        width: 5.5vw;
        height: 5.5vw;
        top: 120%;
        right: 91%;
    }

    #list-sell .step1 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 155%;
        right: -3.5%;
    }

    #list-sell .step2 .tutorial-light._1 {
        width: 31.5vw;
        height: 14.3vw;
        top: 45%;
        right: 61%;
    }

    #list-sell .step2 .tutorial-light._2 {
        width: 30vw;
        height: 4.5vw;
        top: 150.5%;
        right: 61.5%;
    }

    #list-sell .step2 .tutorial-light._3 {
        width: 33vw;
        height: 4.5vw;
        top: 45%;
        right: -9.5%;
    }

    #list-sell .step3 .tutorial-light._1 {
        width: 6vw;
        height: 6vw;
        top: 118%;
        right: 92%;
    }

    #list-sell .step3 .tutorial-light._2 {
        width: 6vw;
        height: 6vw;
        top: 102.3%;
        right: 61.5%;
    }

    #list-sell .step4 .tutorial-light._1 {
        width: 31.5vw;
        height: 3.8vw;
        top: 148%;
        right: 59%;
    }

    #list-sell .step4 .tutorial-light._2 {
        width: 30vw;
        height: 11vw;
        top: 138%;
        right: -5%;
    }

    #list-sell .step5 .tutorial-light._1 {
        width: 3.5vw;
        height: 3.5vw;
        top: 25.5%;
        right: 56.8%;
    }

    #list-sell .step5 .tutorial-light._2 {
        width: 8vw;
        height: 8vw;
        top: 36.5%;
        right: -1.5%;
    }
}

@media (max-width: 360px) {
    .page-cover .cover-txt h2 {
        font-size: 28px;
    }

    #registration ul.slick-dots {
        top: -403px;
        left: 21.5px;
    }

    #deposit ul.slick-dots, #withdraw ul.slick-dots {
        top: -314px;
        left: -27.5px;
    }

    .carousel01 div {
        right: -32.5%;
    }

    /*-------------------------------買幣-------------------------------------*/
    #list-buy .step1 .tutorial-light {
        top: 105%;
    }

    #list-buy .step2 .tutorial-light._1 {
        top: 134.5%;
    }

    #list-buy .step2 .tutorial-light._2 {
        top: 157.5%;
    }

    #list-buy .step3 .tutorial-light._1 {
        top: 124.8%;
    }

    #list-buy .step3 .tutorial-light._2 {
        top: 143%;
    }

    #list-buy .step5 .tutorial-light._1 {
        top: 26%;
    }

    #list-buy .step5 .tutorial-light._2 {
        top: 37.6%;
    }

    /*-------------------------------賣幣-------------------------------------*/
    #list-sell .step1 .tutorial-light._1 {
        top: 121%;
    }

    #list-sell .step1 .tutorial-light._2 {
        top: 157%;
    }

    #list-sell .step2 .tutorial-light._1 {
        top: 48%;
    }

    #list-sell .step2 .tutorial-light._2 {
        top: 152.5%;
    }

    #list-sell .step2 .tutorial-light._3 {
        top: 47%;
    }

    #list-sell .step3 .tutorial-light._1 {
        top: 120%;
    }

    #list-sell .step3 .tutorial-light._2 {
        top: 104.3%;
    }

    /*   #list-sell .step4 .tutorial-light._1 {
            top: 145%;
        }*/

    #list-sell .step4 .tutorial-light._2 {
        top: 140%;
    }

    #list-sell .step5 .tutorial-light._1 {
        top: 27.5%;
    }

    #list-sell .step5 .tutorial-light._2 {
        top: 38.5%;
    }
}

@media (max-width: 338px) {
    .btn-basic, .btn-active.oldsty {
        padding: .5em 1.1em;
    }
}

@media (max-width: 320px) {
    .tabContentTxt .registrationHr, .tabContentTxt .depositHr, .r5-position {
        display: none;
    }

    .tabContentTxt {
        padding-top: 0;
        padding-left: 0;
    }

        .tabContentTxt ul {
            padding-left: 0;
            padding-top: 30px;
        }

    .tabContent {
        margin-bottom: 0px;
    }

    .page-cover .cover-intro {
        font-size: 12px;
    }
}

@media screen and (min-width: 376px) and (max-width: 394px) {
    /*.page-cover .cover-qrcode {
        bottom: 8%;
    }*/
}

@media screen and (min-width:541px) and (max-width: 650px) {
    .list-coin.coinr1 figure {
        padding-bottom: 30px;
    }
}
