html, body {
    height: 100%;
}
html.cathay_smart.smart_bg,
body.cathay_smart.smart_bg {
    background-color: #Fff;
}


html.cathay_smart,
body.cathay_smart {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    min-height: 100%;
    overflow: hidden;
}

.wrap {
    background-repeat: no-repeat;
    background-size: cover;
    /*overflow: hidden;*/
    /*min-height: 100%;*/
    height: calc(100% - 120px);
    /* background-color: red; */


}

.d-flex {
    display: flex !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.no-wrap {
    white-space: nowrap !important;
}



/* header */
.header {
    border-bottom: 3px solid #E5E5E5;
}

.wrap .header {
    height: 50px;
    color: #fff;
    text-align: center;
    display: table;
    width: 100%;
    top: 0;
    z-index: 999;
    background-color: #27AE58;
    position: fixed;
    background: #fff;
    border-bottom: 3px solid #E5E5E5;

}

.header .txt {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    height: 60px;
    color: #434c5d;
    font-weight: bold;
}

.logo {
    width: 27px;
    height: 24px;
    background: url(../images/logo.png);
    display: inline-block;
    vertical-align: middle;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .logo {
        background: url(../images/logo@2x.png);
        background-size: 27px 24px;
        display: inline-block;
        vertical-align: middle;
    }
}

.heder_back {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 14px;
    left: 11px;
    cursor: pointer;
    display: none;
}

.heder_service {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 10px;
    right: 11px;
    cursor: pointer;
}

.header_content {
    display: table;
    margin: 0px auto;
}

.header_service ul {
    list-style: none;
}

.header_service {
    display: none;
}

.header_service li {
    text-align: left;
    padding: 10px 20px;

}

.header_service li a {

    color: #fff;

}

.header_service li a:hover {

    text-decoration: none;
}

.header_service i {
    width: 24px;
    height: 24px;
    display: table;
    float: left;
}

.header_service img {
    margin: -2px -5px;
}

.header_service ul {
    padding: 0px 15px;
    background-color: #585455;
    margin: 0;
}


.sat_content p a {
    text-decoration: underline;
}

.sat_content p {
    padding: 0px 10px;
}

.sat_content span {
    color: #1AAF54;
}

.remind {
    position: absolute;
    z-index: 999;
    right: 20px;
    background-color: #fff;
    padding: 5px;
    top: 55px;
    opacity: 0.6;
    border-radius: 5px;
    font-size: 12px;
    color: #666666;
}

.noheader .header {
    display: none;
}

.wrap.noheader .content {
    margin-top: 0px;
    height: calc(100% - 60px);
}

/* header end */


/* content */
.wrap .content {
    /*margin-top: 65px;*/
    padding-top: 15px;
    box-sizing: border-box;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    /*margin-bottom: 60px;*/
    transition: all .1s;
}

/* IOS 時的高度 */
/* .wrap .content {
    margin-top: 50px;
    padding-top: 15px;
    box-sizing: border-box;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 180px);
    margin-bottom: 60px;
} */


.robot {
    width: 100%;
    position: relative;
}



.robot .dialog-box {
    padding-left: 42px;
    color: #3D3D3D;
    font-size: 16px;
    padding-right: 20px;
}

.robot .dialog-box .message {
    display: inline-block;
    padding: 12px 26px;
    background-color: #F3F3F3;
    border-radius: 0px 5px 5px 5px;
    margin-bottom: 10px;
    color: #1C1E21;
    margin-left: 10px;
    z-index: 1;
    font-size: 15px;
    font-weight: 400;
    -webkit-border-radius: 0px 5px 5px 5px;
    -moz-border-radius: 0px 5px 5px 5px;
    -ms-border-radius: 0px 5px 5px 5px;
    -o-border-radius: 0px 5px 5px 5px;
}

.robot .dialog-box .message::before {
    content: "";
    position: absolute;
    width: 39px;
    height: 23px;
    /* background-image: url(../images/robot.png); */
    background-repeat: no-repeat;
    top: 5px;
    left: -9px;
    z-index: -1;

}


.robot .dialog-box .message.dotpadding {
    padding: 14px 10px 8px 10px;
}

.robot .dialog-box .select-card {

    /*white-space: nowrap;*/
    overflow-x: auto;
    padding-left: 20px;

}

.segment {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    background-color: #FFF;
    border-radius: 0 18px 18px 18px;
    box-shadow: 0px 8px 10px 0px #DDE8DD;
    -moz-box-shadow: 0px 8px 10px 0px #DDE8DD;
    /* 此為 Firefox 專用語法 */
    -webkit-box-shadow: 0px 8px 10px 0px #DDE8DD;
    /* 此為 Safari 和 Chrome 專用語法 */
    box-shadow: 0px 8px 10px 0px #DDE8DD;
    /* 此為 Opera 10.5 + 專用語法 */
    width: 250px;
    word-break: break-all;

}

.segment.quick {
    width: auto;
    background-color: #434c5d;
    border-radius: 5px;
    box-shadow: initial;
    -moz-box-shadow: initial;
    /*此為Firefox專用語法*/
    -webkit-box-shadow: initial;
    /*此為Safari和Chrome專用語法*/
    box-shadow: initial;
    /*此為Opera10.5+專用語法*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    min-width: 112px;
    margin-top: 10px;
    overflow: hidden;
}

.segment.quick a {
    color: #fff;
    padding: 11px 10px;
}

.segment.quick a:hover,
.segment.quick a:focus {
    text-decoration: none;
    outline: none;
    background-color: #DC510B;
}

.segment.secard {
    width: 200px;
}

.quick-box .slick-prev,
.quick-box .slick-next {
    margin-top: 8px;
}

.segment .txt {
    padding: 16px 20px;
    position: relative;
    background-color: #F4F4F4;
    border-top: 1px solid #fff;
}

.robot .dialog-box .segment .txt .title,
.slider .segment .txt .title,
.robot .dialog-box .secard .txt .title {
    font-size: 15px;
    font-weight: bold;
    color: #3D3D3D;
}

.robot .dialog-box .segment .txt .desc {
    font-size: 15px;
    color: #3D3D3D;
    font-weight: 300;
}

.bill-number {
    padding: 16px;

}

.robot .dialog-box .segment .bill-number {
    font-weight: 500;
    font-size: 16px;
    color: #3d3d3d;
    margin-bottom: 5px;
}

.robot.bill-number {
    color: #FF8500;
    text-align: right;
}

.num {
    color: #37474F;
    text-align: right;
    font-weight: 400;
}

.title {
    font-weight: bold;
    font-size: 16px;
    color: #3d3d3d;
    margin-bottom: 5px;
    text-align: left;
}

.title:last-child {
    margin-bottom: 0px;

}

.robot .dialog-box .segment .bill-number .desc {
    font-size: 16px;
    color: #676767;
    text-align: left;
    font-weight: lighter;
}

.btn-bottom {
    border-top: 1px solid #fff;
    padding: 10px;
}

.robot .dialog-box .segment .btn-bottom a,
.slider .segment .btn-bottom a,
.robot .dialog-box .secard a {
    text-align: center;
    color: #3A3A3A;
    display: block;
    padding: 5px;
    text-decoration: none;
    font-weight: 400;
    background-color: #D9DBDF;
    margin-bottom: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-size: 14px;
}

.robot .dialog-box .segment .btn-bottom a:last-child,
.slider .segment .btn-bottom a:last-child,
.robot .dialog-box .secard a:last-child {
    margin-bottom: 0px;
}

/* .robot .dialog-box .segment .btn-bottom a:last-child,
.slider .segment .btn-bottom a:last-child {
    border-radius: 0 0px 18px 18px;
} */

/* .robot .dialog-box .segment .btn-bottom a:last-child,
.slider .segment .btn-bottom a:last-child {
    border-radius: 0 0px 5px 5px;
    -webkit-border-radius: 0 0px 5px 5px;
    -moz-border-radius: 0 0px 5px 5px;
    -ms-border-radius: 0 0px 5px 5px;
    -o-border-radius: 0 0px 5px 5px;
} */

.robot .dialog-box .segment .btn-bottom a:hover,
.slider .segment .btn-bottom a:hover {
    background-color: #434C5D;
    outline: none;
    color: #fff;
}

.robot .dialog-box .segment .btn-bottom a:focus,
.slider .segment .btn-bottom a:focus {
    outline: none;
    background-color: #434C5D;
    color: #fff;
}

.robot .dialog-box .segment-map {
    min-width: 100%;
    padding: 0;
    background-color: #fff;
    border: 1px solid #ABCABB;
    border-radius: 0 18px 18px 18px;
    margin-right: 6px;
    margin-bottom: 7px;
    overflow: hidden;
}

.robot .dialog-box .segment-map .map {
    width: 100%;
    height: 180px;
    background: #eee;
    position: relative;
    border-radius: 0 18px 0 0;
}

.robot .dialog-box .segment-map .desc {
    padding: 20px 14px;
    background: #FFFFFA;
}

.robot .dialog-box .weather-box {
    display: table;
    margin: -7px -14px;
    border-radius: 0 18px 18px 18px;
    overflow: hidden;
}

.robot .dialog-box .weather-box .tip {
    display: table-cell;
    vertical-align: middle;
    padding: 7px 14px;
    width: calc(100% - 113px);
}

.robot .dialog-box .weather-box .weather {
    display: table-cell;
    vertical-align: middle;
    background-color: #FFF5EB;
    color: #FF8500;
    width: 113px;
    padding: 7px 14px;
    white-space: nowrap;


}

.robot .dialog-box .weather-box .weather span {
    vertical-align: middle;
}

.icon-border {
    border: 1px dashed #ccc;
    border-radius: 4px;
    display: inline-block;
    width: 42px;
    height: 42px;
    text-align: center;
    vertical-align: middle;
}

.icon-weather-rain {
    background: url(../images/icon_weather_rain@2x.png);
    background-repeat: no-repeat;
    width: 33px;
    height: 37px;
    background-size: 33px 37px;
    display: inline-block;
    vertical-align: middle;
}

.img-creditcard {
    width: 200px;
    position: relative;
    padding: 10px 0px;
}


.img-creditcard img,
.img-credbank img {
    border-radius: 0 5px 0px 0px;
    -webkit-border-radius: 0 5px 0px 0px;
    -moz-border-radius: 0 5px 0px 0px;
    -ms-border-radius: 0 5px 0px 0px;
    -o-border-radius: 0 5px 0px 0px;
}

.card_img img {
    border-radius: 0 0px 0px 0px;
}

.img-creditcard.card_img {
    background-image: url(../images/task05_bg.jpg);
    background-repeat: no-repeat;
    padding-left: 30px;
    padding-top: 23px;
    width: 200px;
    height: 130px;
    overflow: hidden;
}

.img-creditcard.card_img2 {
    background-image: url(../images/task05_bg02.jpg);
    background-repeat: no-repeat;
    padding-left: 30px;
    padding-top: 23px;
    width: 200px;
    height: 130px;
    overflow: hidden;
}

.img-creditcard.card_img img {
    width: 140px;

}

.img-outurldiv {
    width: 225px;
    height: 140px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
    border-radius: 0 18px 0px 0px;
    margin: 0 auto;
    position: relative;
    transform: translateY(10%);
}


.img-credbank {
    width: 250px;
    height: auto;
    border-radius: 0 18px 0px 0px;

}

.img-credbank01 {
    width: 250px;
    height: 165px;
    background: url(../images/card14.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank01.cre-card {
    width: 200px;
    height: 130px;
    background: url(../images/card14.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 130px;
    border-radius: 0 18px 0px 0px;

}

.cre-card p {
    margin: 0 0 0px;
}

.img-credbank05 {
    width: 250px;
    height: 165px;
    background: url(../images/card07.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
    border-radius: 0 18px 0px 0px;


}

.img-credbank06 {
    width: 250px;
    height: 100px;
    background: url(../images/card13-1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    border-radius: 0 18px 0px 0px;


}

.img-credbank06 p {
    height: 100px;
    color: #37474F;
    width: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
}



.img-credbank07 {
    width: 250px;
    height: 165px;
    background: url(../images/card22.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    border-radius: 0 18px 0px 0px;


}

.img-credbank07 p {
    font-weight: 500;
    text-align: center;
    color: #37474F;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    width: 250px;
    height: 125px;
    padding: 0px 30px;
}

.img-credbank00.flag01 {
    width: 250px;
    height: 165px;
    background: url(../images/flag01.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
}

.img-credbank00.flag02 {
    width: 250px;
    height: 165px;
    background: url(../images/flag02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
}

.img-credbank00.flag03 {
    width: 250px;
    height: 165px;
    background: url(../images/flag03.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
}

.img-credbank00.flag04 {
    width: 250px;
    height: 165px;
    background: url(../images/flag04.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
}

.img-credbank00.flag05 {
    width: 250px;
    height: 165px;
    background: url(../images/flag05.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
}

.img-credbank00.generic {
    width: 250px;
    height: 118px;
    background: url(../images/card24.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 118px;
    border-radius: 0 18px 0px 0px;
}

.img-credbank10 {
    width: 250px;
    height: 165px;
    background: url(../images/card34.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank10.sec_box {
    border-radius: 0 18px 18px 18px;
    cursor: pointer;

}

.img-credbank11 {
    width: 250px;
    height: 165px;
    background: url(../images/card35.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
    border-radius: 0 18px 0px 0px;

}

.sec_img {
    width: 80px;
    position: absolute;
    right: 18px;
    top: 10px;

}


.img-credbank20.card01 {
    width: 200px;
    height: 130px;
    background: url(../images/card36-01.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 130px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank20.card02 {
    width: 200px;
    height: 130px;
    background: url(../images/card36-02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 130px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank20.card03 {
    width: 200px;
    height: 130px;
    background: url(../images/card36-03.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 130px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank20.card04 {
    width: 200px;
    height: 130px;
    background: url(../images/card36-04.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 130px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank20.card05 {
    width: 200px;
    height: 130px;
    background: url(../images/card36-05.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px 130px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank20 p {
    font-weight: 500;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    width: 200px;
    height: 140px;
    padding: 0px 30px;
}



@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .img-credbank01 {
        width: 250px;
        height: 165px;
        background: url(../images/card14@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
        border-radius: 0 18px 0px 0px;
    }

    .img-credbank01.cre-card {
        width: 200px;
        height: 130px;
        background: url(../images/card14@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 200px 130px;
        border-radius: 0 18px 0px 0px;
    }

    .img-credbank02 {
        width: 250px;
        height: 165px;
        background: url(../images/card15@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
        border-radius: 0 18px 0px 0px;

    }

    .img-credbank05 {
        width: 250px;
        height: 165px;
        background: url(../images/card07@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
        border-radius: 0 18px 0px 0px;


    }

    .img-credbank06 {
        width: 250px;
        height: 100px;
        background: url(../images/card13-1@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 100px;
        border-radius: 0 18px 0px 0px;


    }

    .img-creditcard.card_img {
        background-image: url(../images/task05_bg@2x.jpg);
        background-repeat: no-repeat;
        background-size: 200px 130px;
    }

    .img-credbank07 {
        width: 250px;
        height: 165px;
        background: url(../images/card22@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;


    }

    .img-credbank00.flag01 {
        width: 250px;
        height: 165px;
        background: url(../images/flag01@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
    }

    .img-credbank00.flag02 {
        width: 250px;
        height: 165px;
        background: url(../images/flag02@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
    }

    .img-credbank00.flag03 {
        width: 250px;
        height: 165px;
        background: url(../images/flag03@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
    }

    .img-credbank00.flag04 {
        width: 250px;
        height: 165px;
        background: url(../images/flag04@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
    }

    .img-credbank00.flag05 {
        width: 250px;
        height: 165px;
        background: url(../images/flag05@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;
    }

    .img-credbank00.generic {
        width: 250px;
        height: 118px;
        background: url(../images/card24@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 118px;
        border-radius: 0 18px 0px 0px;
    }

    .img-credbank10 {
        width: 250px;
        height: 165px;
        background: url(../images/card34@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;


    }

    .img-credbank11 {
        width: 250px;
        height: 165px;
        background: url(../images/card35@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 250px 165px;


    }

    .img-credbank20.card01 {
        width: 200px;
        height: 130px;
        background: url(../images/card36-01@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 200px 130px;


    }

    .img-credbank20.card02 {
        width: 200px;
        height: 130px;
        background: url(../images/card36-02@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 200px 130px;


    }


    .img-credbank20.card03 {
        width: 200px;
        height: 130px;
        background: url(../images/card36-03@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 200px 130px;


    }

    .img-credbank20.card04 {
        width: 200px;
        height: 130px;
        background: url(../images/card36-04@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 200px 130px;


    }

    .img-credbank20.card05 {
        width: 200px;
        height: 130px;
        background: url(../images/card36-05@2x.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 200px 130px;


    }

}



.img-credbank02 {
    width: 250px;
    height: 165px;
    background: url(../images/card15.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px 165px;
    border-radius: 0 18px 0px 0px;

}

.img-credbank03 {
    width: 250px;
    background-color: #FFD600;
    border-radius: 0 18px 0px 0px;

}

.img-credbank04 {
    width: 250px;
    background-color: #D7DADC;
    border-radius: 0 18px 0px 0px;

}

.img-credbank03.segment-round {
    border-radius: 0px 18px 18px 18px;
}

.img-credbank05 p {
    font-weight: 500;
    text-align: center;
    color: #37474F;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    width: 250px;
    height: 175px;
    padding: 0px 30px;
}





.img-creditcard07 {
    width: 310px;
    height: 181px;
    background: url(../images/img_creditcard07@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 320px 181px;
}

.img-creditcard08 {
    width: 220px;
    height: 120px;
    background: url(../images/img_creditcard08@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 220px 120px;
}


.robot .dialog-box .time {
    font-size: 10px;
    color: #1C1E21;
    margin: 0px 0 20px 10px;
}

.user {
    width: 100%;
    position: relative;
}

.user .dialog-box {
    text-align: right;
    color: #fff;
    font-size: 16px;
    padding-left: 20px;
}

.user .dialog-box .message {
    display: inline-block;
    position: relative;
    padding: 12px 26px;
    border-radius: 5px 0px 5px 5px;
    margin-bottom: 7px;
    background: #E1E9F7;
    position: relative;
    z-index: 1;
    font-size: 15px;
    /*font-weight: 300;*/
    color: #1C1E21;
    text-align: left;
    -webkit-border-radius: 5px 0px 5px 5px;
    -moz-border-radius: 5px 0px 5px 5px;
    -ms-border-radius: 5px 0px 5px 5px;
    -o-border-radius: 5px 0px 5px 5px;
}

/* .user .dialog-box .message::before { */
/*     content: ""; */
/*     position: absolute; */
/*     width: 34px; */
/*     height: 24px; */
/*     background-image: url(../images/robot_user.png); */
/*     background-repeat: no-repeat; */
/*     top: 5px; */
/*     right: -9px; */
/*     z-index: -1; */

/* } */


.user .dialog-box .time {
    right: 10px;
    font-size: 10px;
    color: #1C1E21;
    margin: 0 0px 20px 0;
}



/* user */


.user .avatar {
    width: 44px;
    height: 44px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}



.hr-dashed {
    border-top: 1px dashed #ABCABB;
}

.robot a {
    font-weight: 500;
    text-decoration: underline;
}

/* content end */
/* ui-blackCover */
.ui-blackCover {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999;
}

.ui-contextop iframe {
    border-radius: 30px 30px 0px 0px;
    width: 100vw;
    overflow: hidden;
}

.ui-contextop {
    position: fixed;
    z-index: 9999999;
    left: 0;
    width: 100vw;
    bottom: -300%;
}

.ui-contextop i.cancel {
    width: 24px;
    height: 24px;
    display: table;
    position: absolute;
    right: 15px;
    top: 14px;
    cursor: pointer;
    z-index: 99999999;
}

.ui-all {
    position: relative;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
    background-color: #fff;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -ms-border-radius: 5px 5px 0px 0px;
    -o-border-radius: 5px 5px 0px 0px;

}

/* ui-blackCover end */
/* card */

.txt_yellow h5 {
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 2px;
}

.txt_bank h5,
.txt_safe h5 {
    font-size: 15px;
    font-weight: bold;
    margin: 0px;
    margin-bottom: 4px;
}

.txt_bank p,
.txt_safe p {
    font-size: 15px;
    font-weight: 300;
}

.txt_safe p:last-child {

    margin-bottom: 0px;
}

.txt_bank {
    padding: 38px 40px 20px 38px;
    position: relative;
}


.txt_safe {
    padding: 28px 20px 24px 20px;
    position: relative;
}

.txt_yellow {

    padding: 20px;
}

.txt_sec {
    padding: 22px 20px 15px 20px;
    position: relative;
    height: 165px;
}

.txt_sec p {
    position: absolute;
    bottom: 11px;
    left: 53px;
    font-size: 18px;
    color: #27AE58;
    font-weight: 400;
}

.img-credbank03 .txt_safe span {
    border-radius: 15px 15px 15px 15px;
    background-color: #fff;
    min-width: 65px;
    height: 24px;
    color: #27AE58;
    padding: 4px 10px;
    position: absolute;
    right: 10px;
    text-align: center;
    font-size: 12px;
    top: 10px;
}

.img-credbank04 .txt_safe span {
    border-radius: 15px 15px 15px 15px;
    background-color: #879195;
    width: 44px;
    height: 24px;
    color: #D7DADC;
    padding: 4px 0px;
    position: absolute;
    right: 10px;
    text-align: center;
    font-size: 12px;
    top: 10px;
}

.img-credbank00 {
    width: 250px;
    background-color: #FFD600;
    border-radius: 0 18px 0px 0px;

}

.img-credbank00 .txt_safe span {
    border-radius: 15px 15px 15px 15px;
    background-color: #e65100;
    width: 65px;
    height: 24px;
    color: #fff;
    padding: 4px 0px;
    position: absolute;
    right: 10px;
    text-align: center;
    font-size: 12px;
    top: 10px;
}



.txt_Infor {
    display: table;
    width: 100%;
    padding: 6px 0px;

}

.infor_left {
    float: left;
    font-size: 15px;
    font-weight: bold;
}

.infor_right {
    float: right;
    font-size: 15px;
    font-weight: 300;

}

.txt_Inforbox {
    padding: 10px 20px;
    position: relative;
    border-top: 1px solid #fff;

}

.txt_Inforbox hr {
    border-top: dashed #879195 1px;
}

.failure {
    position: absolute;
    background-color: #FDF1EB;
    border-radius: 20px 20px 20px 20px;
    color: #E65100;
    padding: 2px 30px 2px 36px;
    top: -13px;
    font-size: 13px;
}

.failure span {
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    margin-right: 3px;
    margin-top: 2px;
}



.chargeback {
    display: inline-block;
    padding: 12px 22px;
    background-color: #fff;
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0px 8px 10px 0px #DDE8DD;
    -moz-box-shadow: 0px 8px 10px 0px #DDE8DD;
    /* 此為 Firefox 專用語法 */
    -webkit-box-shadow: 0px 8px 10px 0px #DDE8DD;
    /* 此為 Safari 和 Chrome 專用語法 */
    box-shadow: 0px 8px 10px 0px #DDE8DD;
    /* 此為 Opera 10.5 + 專用語法 */
}

.cback_right {
    float: left;
    width: 76px;
    height: 80px;
    background: url(../images/cardday00.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 76px 80px;
    border-radius: 0 18px 0px 0px;
}

.cback_left {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    height: 86px;
    font-size: 15px;
}

.cback_right h5 {
    text-align: center;
    color: #fff;
    margin-bottom: 6px;
}

.cback_right h1 {
    text-align: center;
    margin: 0px;
}

.cback_day {

    width: 165px;
    height: 146px;
    border-radius: 0 18px 0px 0px;

}

.cback_day.dayok {
    background: url(../images/cardday01.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 165px 120px;
    color: #37474F;
    font-size: 15px;

}

.cback_day.dayno {
    background: url(../images/cardday02.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 165px 120px;
    color: #37474F;
    font-size: 15px;

}

.cback_boxno {
    width: 126px;
    height: 130px;
    color: #fff;
    font-size: 46px;
}

.cback_boxno p {

    text-align: center;
    padding-top: 31px;
}

.cback_day h1 {
    font-size: 72px;
    margin-bottom: 0px;
    margin-top: 10px;
    text-align: center;
}

.cback_day h5 {
    font-size: 18px;
    margin: 0px;
    text-align: center;
}

.cback_box {
    width: 126px;
}

.cathynote {
    color: #5F6C72;
    font-size: 14px;
    padding: 10px 0px 10px 30px;
}

.cathynote p {
    max-width: 266px;
    padding-left: 32px;
    padding-top: 10px;
    margin: 0;
    text-align: justify;
}

.cathynote i {
    display: block;
    width: 24px;
    height: 24px;
    float: left;
}

.cathynote i.icon {

    background: url(../images/icon_down.png);
    background-size: 100%;
}

.cathynote i.open {
    background: url(../images/icon_up.png);
    background-size: 100%;
    display: block;
    width: 24px;
    height: 24px;
    float: left;
}

.cathynote i img {
    width: 100%;
}

.cathynote h5 {
    float: left;
    padding: 0px 0px 0px 8px;
    margin: 0px;
    line-height: 23px;
}

.cathynote .txt {
    display: table;
}

.cathynote_line {
    display: table;
    border-bottom: dashed #879195 1px;
}

i.icon_down,
i.icon_up {

    cursor: pointer;
}

.cathynote ol {
    padding-left: 50px;
    padding-top: 10px;
    max-width: 266px;
}

.cathynote_content {
    display: none;

}


.segment.one-width {
    width: 200px;
    word-break: break-all;
}

.segment.two-width {
    max-width: 250px;
}

.box_left {
    float: left;
}

.box_center {
    width: 88%;
    float: left;
}

.box_right {
    float: right;
}


@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {

    .cback_right {
        float: left;
        width: 76px;
        height: 80px;
        background: url(../images/cardday00@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 76px 80px;
        border-radius: 0 18px 0px 0px;
    }

    .cback_day.dayok {
        background: url(../images/cardday01@2x.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 165px 120px;
        color: #37474F;
        font-size: 15px;

    }

    .cback_day.dayno {
        background: url(../images/cardday02@2x.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 165px 120px;
        color: #37474F;
        font-size: 15px;

    }

    .cathynote i.icon {

        background: url(../images/icon_down@2x.png);
        background-size: 100%;
    }

    .cathynote i.open {
        background: url(../images/icon_up@2x.png);
        background-size: 100%;
        display: block;
        width: 24px;
        height: 24px;
        float: left;
    }
}

.small-tit {
    border-radius: 15px 15px 15px 15px;
    background-color: #fff;
    width: auto;
    color: #3d3d3d;
    padding: 4px 6px 3px;
    font-size: 12px;
    background-color: #ffd600;
    display: inline-block;
    font-weight: bold;
    position: absolute;
    right: 12px;
    top: 12px;
}


.smart_note p {
    background-color: #dde8dd;
    padding: 10px 12px;
    font-size: 12px;
    color: #37474f;
    border-radius: 5px;
}

.smart_note {
    padding: 20px;
    text-align: center;
}

.subview_inner .collapse p,
.subview_inner .collapsing p {
    padding: 10px;
}

.collapse .smart_note,
.collapsing .smart_note {
    margin: 3px 0 10px;
    padding: 0;
    text-align: left;
}

/* card end  */

/* subview  */
.subview_all {
    overflow: hidden;
}

.subview_inner {
    padding: 10px 16px 20px;
    margin: 0px auto;
    position: relative;
    overflow-x: hidden;
    max-height: 500px;
    max-width: 400px;
    overflow-y: auto;
}

.sub_button a {
    float: left;
    text-align: center;
    width: 100%;
    font-size: 15px;
}

.subview_head {
    text-align: center;
    font-size: 16px;
    color: #434C5D;
    padding: 11px 0px;
    /*font-weight: 400;*/
    font-weight: bold;
}

.subview_all hr {
    border-top: 1px solid #D7DADC;
    margin: 0;
}


.desc {
    font-size: 15px;
    word-break: break-all;
}




.sub_code a {
    color: #1AAF54;
    text-decoration: none;
    border-bottom: 1px solid #1AAF54;
}

.sub_code {
    color: #879195;
    font-size: 12px;
    padding-top: 10px;
    display: inline-block;
}

.subview_inner p {
    color: #37474F;
    margin-bottom: 7px;
}

.sub_unmber {
    float: left;
    padding-top: 30px;
}

.subview_box {
    margin: 12px 0px 0px;
    font-weight: 500;
    font-size: 15px;
    color: #37474f;
}

.subview_box .Localphone {
    display: inline-block;
}

.subview_box .Localphone div {
    float: left;
}

.subview_box .Localphone div input {
    margin: 0px;
}

.subview_box .Localphone div:first-child {
    width: 40%;
    padding-right: 10px;
}

.subview_box .Localphone div:last-child {
    width: 60%;
}

.pleased {
    color: #424242;
    font-weight: 400;
}

.pleased span {
    color: #d85221;
}

.subview_box input,
.subview_box button {
    margin-top: 7px;
    height: 45px;
    font-size: 15px;
    color: #37474f;
}

.code_img {
    width: 131px;
    height: 51px;
    display: table;
}

.sub_button .tag {
    /*border: 1px solid #434C5D;*/
    background: #434C5D;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-weight: bold;
}

.sub_button .tag.spacing {
    letter-spacing: 20px;
    padding-left: 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.sub_button .tag.tag_active {
    background: #DC510B;
    border: 1px solid #DC510B;
}

.sub_button .tag.satisfaction-tag {
    padding: 12px;
    margin-right: 8px;
    background: #f5f5f5;
    color: #939CA0;
    font-size: 15px;
    border: 1px solid #f5f5f5;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}

.sub_button .tag.satisfaction-tag:hover,
.sub_button .tag.satisfaction-tag:active,
.sub_button .tag.satisfaction-tag:focus {
    padding: 12px;
    margin-right: 8px;
    background: #ffffff;
    color: #E65100;
    font-size: 15px;
    border: 1px solid #E65100;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}

.card-spacing {
    letter-spacing: 15px;
}

.sub_button .tag:hover {
    /*border: 1px solid #DC510B;*/
    background-color: #DC510B;
}

.sub_button p {
    text-align: center;
    color: #27AE58;
    font-size: 16px;
    font-weight: 500;
    display: table;
    padding: 10px 0px;
    margin: 0px auto;
}


.sub_button .error {
    z-index: 100;
    /*display: none;*/
    margin: 5px auto;
    border: 1.5px solid #D7DADC;
    background: #D7DADC;
    padding: 12px 10px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;

}

.sub_button .error:hover {
    text-decoration: none;

}

.sub_code .again {
    color: #879195;
}

.sub_code .time {
    color: #1AAF54;
}

.subview_box .icon_phone {
    width: 24px;
    height: 24px;
    display: inline-table;
}

.subview_box .phone {
    font-size: 20px;
    padding-left: 4px;
}

.subview_box .icon_phone img {
    margin: -6px 0px 0px;
    width: 100%;
}

/* 2018-04-11 add */
.sub_code .send {
    white-space: nowrap;
    padding-right: 10px;
}

.subview_box.mail .dp-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.subview_box.mail .icon_mail {
    width: 24px;
    height: 24px;
    display: table-cell;
}

.subview_box.mail .mail {
    font-size: 20px;
    padding-left: 8px;
    display: table-cell;
    word-break: break-all;
}

.subview_box.mail .icon_mail img {
    margin: -6px 0px 0px;
    width: 100%;
}

/* end 2018-04-11 */
.has-success input.form-control {
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    border: 1.5px solid #27AE58;

}

.has-success input.form-control:focus {
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    border: 1.5px solid #27AE58;

}


.has-error input.form-control {
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    border: 1.5px solid #E65100;
    margin-bottom: 7px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.has-error input.form-control:focus {
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
    border: 1.5px solid #E65100;

}

.sub_input input::-ms-clear {
    display: none;
}

.sub_input input::-ms-reveal {
    display: none;
}





input.form-control i {
    position: absolute;
}

i.sub_ok,
i.sub_error {
    width: 24px;
    height: 24px;
    display: table;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.has-success .subview_bg,
.has-error .subview_bg {
    position: absolute;
    background-color: #fff;
    width: 35px;
    height: 35px;
    right: 2px;
    top: 5px;
    z-index: 1;
    display: block;
}

.sub_input.has-error span {
    color: #E65100;
    font-size: 12px;
    font-weight: 400;
}

.sub_input {
    position: relative;
}

.phone_code {
    display: inline-block;
    width: 80%;
    padding-left: 5px;
}

.card_code {
    display: inline-block;
    width: 20%;

}

.card_back {
    display: inline-block;
    width: 89%;
    padding-left: 5px;

}

.qa {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 11px;
    cursor: pointer;
    color: #27AE58;
    margin-top: 7px;
    float: right;
}

.qa:hover {
    color: #00994E;
    background-color: #f9f9f9;
}

.qa_img {
    width: 200px;
    display: none;
    position: absolute;
    top: 0px;
    right: -100px;
    float: right;
}


.ver_qa {
    position: relative;
}

.subview_box.ver_qa {

    font-weight: 400;
}

.sub_table input[type=radio]:not(old),
input[type=radio]:not(old),
.sub_table input[type=checkbox]:not(old),
input[type=checkbox]:not(old) {
    width: 29px;
    height: 29px;
    margin: 0 auto;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    z-index: 99;
}

.agree input[type=radio]:not(old),
input[type=radio]:not(old),
.sub_table input[type=checkbox]:not(old),
input[type=checkbox]:not(old) {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;


}

.sub_table input[type=radio]:not(old)+label,
.sub_table input[type=checkbox]:not(old)+label {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: url(../images/icon_select02.png) no-repeat 0 0px;
    font-size: 14px;
    position: absolute;
    width: 29px;
    height: 29px;
}


.sub_table input[type=radio]:not(old):checked+label,
.sub_table input[type=checkbox]:not(old):checked+label {
    background: url(../images/icon_select01.png) no-repeat 0 0px;
    width: 29px;
    height: 29px;
    margin: 0;
    padding: 0;
    position: absolute;
}

.agree input[type=radio]:not(old)+label,
.agree input[type=checkbox]:not(old)+label {
    display: inline-block;
    border: 2px solid #26af57;
    width: 24px;
    height: 24px;

}

.agree input[type=radio]:not(old):checked+label,
.agree input[type=checkbox]:not(old):checked+label {
    background: url(../images/icon_ok.png) no-repeat -1px -2px;
}

.agree h5 {
    display: inline-block;
    margin: 5px 10px;
    float: left;
}

.agree_left {
    display: inline-block;
    float: left;
}

.agree {
    display: inline-block;
    padding-top: 10px;
}

.agree label {
    margin-bottom: 0px;
}

.note {
    margin: 0px 20px 10px;
    font-size: 15px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {

    .sub_table input[type=radio]:not(old)+label,
    .sub_table input[type=checkbox]:not(old)+label {
        background: url(../images/icon_select02@2x.png) no-repeat 0 0px;
        background-size: 29px 29px;
    }


    .sub_table input[type=radio]:not(old):checked+label,
    .sub_table input[type=checkbox]:not(old):checked+label {
        display: inline-block;
        padding: 0px;
        margin: 0px;
        background: url(../images/icon_select01@2x.png) no-repeat 0 0px;
        font-size: 14px;
        background-size: 29px 29px;

    }




    .agree input[type=radio]:not(old):checked+label,
    .agree input[type=checkbox]:not(old):checked+label {
        background: url(../images/icon_ok@2x.png) no-repeat -1px -2px;
        background-size: 24px 24px;


    }





}



.table_left {
    width: 29px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    height: 29px;
}

.sub_table p {
    color: #000000;
    margin-bottom: 0px;
    padding-top: 0px;
    font-size: 15px;
}

.sub_table span {
    color: #27AE58;
    font-size: 12px;
}


.sub_table tr {
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
}

.sub_table tr:last-child {
    border-bottom: none;
}



.sub_table tr:first-child {
    height: auto;
    border-bottom: initial;
}

.css_td.dropdown a {
    color: #5F6C72;
}

.nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
}

.sub_table tr:first-child {
    background-color: #F5F6F6;
}

.table_right {
    padding: 10px 0px;
}

.sub_button {
    text-align: center;
    max-width: 368px;
    margin: 0px auto;
}

hr.otp_line {

    margin-bottom: 0px;
}

/* subview end  */
/* subviewtable end  */
.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
    width: 100%;
}

.sub_height {
    overflow-x: hidden;
    max-height: 300px;
    overflow-y: auto;
    padding-top: 10px;

}

.subview_tit h2 {
    font-size: 16px;
    text-align: center;
    font-weight: 300;
}

p.bill_p {
    text-align: center;
    margin: 10px 15px;
}

.dropdown-menu {
    box-shadow: 0px 8px 30px 3px #c8dac857;
    border: 1px solid #efefef;

}

.dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: #fff;
    content: '';

}

.dropdown-menu:after {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #efefef transparent;
    line-height: 0px;
    _border-color: #ffffff #ffffff #000000 #ffffff;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
    position: absolute;
    top: -10px;
    left: 6px;
    content: '';
    z-index: -1;

}

.css_table {
    display: table;
    width: 100%;
    padding-top: 10px;
}

.css_tr {
    display: table-row;
}

.css_td {
    display: table-cell;
    vertical-align: middle;

}

.sub_table th:first-child {
    padding-left: 15px;
}

.nav>li {
    float: left;
}

.td_line .css_td {
    border-bottom: 1px solid #e6e6e6;
}

.icon_dropdown {
    width: 15px;
    height: 15px;
    display: table;
    float: left;
    margin-top: 5px;
    margin-left: 3px;
}

.icon_dropdown img {
    width: 100%;
}

.sub_table h6 {
    float: left;
    font-size: 13px;
    color: #5F6C72;
}

th.table_01 {
    width: 20%;
}

/* subviewtable end  */

/* totalbill */

.sub_table.totalbill .total_card {
    background-color: #e3f3e3;
    height: 40px;
    color: #27AE58;
}

.sub_table.totalbill .total_tit {
    background-color: #F5F6F6;
    height: auto;
}

.sub_table.totalbill th {
    padding-left: 5px;
}

.sub_table.totalbill th:first-child {
    padding-left: 15px;
}

.sub_table.totalbill td:first-child {
    padding-left: 15px;
}

.total_all.subview_all {
    padding-bottom: 0px;

}


/* totalbill end  */

/* control-bar */

.control-bar {
    position: fixed;
    -webkit-backface-visibility: hidden;
    width: 100%;
    bottom: 0;
    z-index: 99;
    -webkit-touch-callout:none;  /*系統預設選單被禁用*/
    -webkit-user-select:none; /*webkit瀏覽器*/
    -khtml-user-select:none; /*早期瀏覽器*/
    -moz-user-select:none;/*火狐*/
    -ms-user-select:none; /*IE10*/
    user-select:none;
}

.select-tag {
    padding: 0px 20px;
    overflow-x: auto;
    white-space: nowrap;
    background-color: rgba(232, 247, 236, 60);
}

.select-box {
    width: 100%;
    background-color: #fff;
    box-shadow: 0px -4px 10px 0px #fff;
    border-top: 1px solid #d7dadc;
}

.select-box.now {
    position: relative;
    z-index: 1000;
}

.select-box ul {
    width: 100%;
    margin: 0px;
    padding: 0px 10px 0px;
    overflow: hidden;
    border-bottom: 5px solid #fff;

}

.realService {
    position: absolute;
    display: none;
    top: -46px;
    left: 12px;

}

a.showService .realService {
    display: block;
}

.rsInner {
    position: absolute;
    padding: 12px 26px;
    background-color: #fff;
    border-radius: 45px 45px 45px 45px;
    color: #27AE58;
    box-shadow: 0px 8px 10px 0px #DDE8DD;
    -moz-box-shadow: 0px 8px 10px 0px #DDE8DD;
    -webkit-box-shadow: 0px 8px 10px 0px #DDE8DD;
    box-shadow: 0px 8px 10px 0px #DDE8DD;

}

.rsInner::before {
    content: "";
    position: absolute;
    /* background-image: url(../images/robot.png); */
    background-repeat: no-repeat;
    bottom: -11px;
    left: 13px;
    z-index: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    border-width: 15px 7.5px 0 7.5px;
}

.select-tag .tag:hover,
.tag:hover {
    background: #DC510B;
    color: #fff;
}

.select-box a {
    float: left;
    text-align: center;
    width: 100%;
    font-size: 15px;
}

.select-tag01 li {
    width: 50%;
    list-style: none;
    float: left;
    padding: 0px 5px;
}

.select-tag02 li {
    width: 33.3%;
    list-style: none;
    float: left;
    padding: 0px 5px;
}

.select-tag02.quick-many li {
    width: auto;
    min-width: 118px;
    list-style: none;
    padding: 0px 5px;
}


.select-tag03 li {
    width: 50%;
    list-style: none;
    float: left;
    padding: 0px 5px;
}

.select-tag04 li {
    width: 100%;
    list-style: none;
    float: left;
    padding: 3px;
}



.select-tag .tag,
.tag {
    z-index: 100;
    margin: 10px auto;
    background: #434c5d;
    padding: 10px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.select-tag .tag:hover,
.tag:hover {
    text-decoration: none;
    outline: none;
    background-color: #DC510B;
}

.select-tag .tag:focus,
.tag:focus {
    text-decoration: none;
    color: #ffffff;
    background: #DC510B;
}

.select-tag .tag,
.search_in {
    z-index: 100;
    /*display: none;*/
    margin: 5px auto;
    background: #ffffff;
    padding: 12px 10px;
    border-radius: 30px;
    color: #27AE58;
    font-size: 15px;
    font-weight: 400;
}

ul.select-tag04.search_all {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 282px;
    padding: 0px;
}

ul.select-tag04.search_all {
    border-top: 5px solid #ecf2ed;
}

ul.select-tag04.search_all .tag {
    margin: 0;
    text-align: left;
    padding: 8px 20px;
}

.select-menu {
    background-color: #fff;
    border-top: 5px solid #f5f5f5;
    display: block;
    width: 100%;
}

.footer-menu {
    position: initial;
    width: 100%;
    z-index: 9999;
    bottom: 58px;
    left: 0;
}

.select-menu li {
    list-style: none;
    float: left;
    width: 33.3%;
    text-align: center;
    border-right: 1px solid #eaeaea;

}

ul.select-line li {
    border-right: none;

    margin: 0px;
}


ul.select-line hr {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

.select-menu li:last-child {
    border-right: none;

}

.select-menu ul {
    padding: 0;
    margin: 0;
}

.select-menu li a {
    color: #434C5D;
    font-size: 16px;
    display: inline-block;
    padding: 14px 0px;
}

.select-menu li a:hover,
.select-menu li a:focus {
    text-decoration: none;

}

.select-menu li img {
    width: 60px;
    height: 60px;
    margin: 0px auto;

}


.select-tag .tag.animate {
    -webkit-animation: jumpchoice 1s linear;
    -moz-animation: jumpchoice 1s linear;
    animation: jumpchoice 0.5s linear;
    display: inline-block;
}

@keyframes jumpchoice {
    0% {
        transform: translateY(100px);
    }

    30% {
        transform: initial;
    }

    60% {
        transform: translateY(-10px);
    }

    100% {
        transform: initial;

    }
}

.control-bar .box {
    display: table;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    background-color: #fff;
    box-shadow: 0px -1px 2px 0px #D7DADC;
    -moz-box-shadow: 0px -1px 2px 0px #D7DADC;
    -webkit-box-shadow: 0px -1px 2px 0px #D7DADC;
    box-shadow: 0px -1px 2px 0px #D7DADC;
    padding: 0px 6px 0px 10px;
}

.control-bar .box a {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    width: 36px;
    height: 60px;
}

.btn-collapse img{
    width: 36px;
    height: 36px;
    margin-right: 10px;
}

.microphone {
    background-color: #fff;
    text-align: center;
    padding-bottom: 10px;
}

.micro-box {
    display: inline-block;
    position: relative;
}

.micro-box img {
    width: 190px;
    height: 190px;
    pointer-events:none;
}

.micro-tit {
    position: absolute;
    left: 0px;
    right: 0;
    top: 160px;
    color: #939ca0;
    cursor: pointer;
    margin: 0px auto;
}

.smart_top {
    position: absolute;
    right: 20px;
    bottom: 100px;
    width: 32px;
    height: 32px;
    background-color: #e65100;
    border-radius: 40px;
    text-align: center;
    padding-top: 9px;
    padding-left: 9px;
    cursor: pointer;
    display: none;
    z-index: 999;

}




.flipy {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
}

.smart_top:hover {
    background-color: #e65100;
}

.smart_top img {
    width: 14px;
}

.control-bar .box a.btn-mic {
    width: 60px;
    height: 60px;
}



span.btn-search i.icon-arrow img {
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    top: 7px;
    left: 18px;
}

.control-bar .box a.btn-horn {
    width: 36px;
    height: 60px;
    padding-right: 6px;
    padding-left: 5px;
}

.control-bar .box a.btn-horn:hover {
    text-decoration:none;
}

span.btn-search {
    display: block;
    width: 50px;
    height: 28px;
    border-radius: 5px;
    margin: 15px auto;
    position: relative;
    z-index: 999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

span.btn-search.disable_right {

    background-color: #D7DADC;

}

span.btn-search.disable_right:hover {

    background-color: #D7DADC;

}



.control-bar .box .input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 34px;
    padding: 4px 13px;
    margin-left: 6px;
    color: #1C1E21;
    background-color: #F5F5F5;
    font-size: 15px;
    line-height: 32px;
    border: 0px solid #E4E4E4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

input.input.msg.disable_in {
    border: 1px solid #D7DADC;
    background-color: #D7DADC;
}

.subview_inner .input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 30px;
    display: block;
    width: 100%;
    height: 42px;
    padding: 4px 13px 6px 44px;
    margin: 2px 0;
    color: #879195;
    font-size: 16px;
    line-height: 32px;
    border: none;
    background-color: #F5F6F6;
}

ul.subview_rule {
    margin: 0px;
    padding: 15px 0px 0px;
    list-style: none;
}

.subview_rule li {
    color: #879195;
    font-size: 12px;
    padding: 2px 0px;
}

.subview_rule img {
    display: inline-block;
    vertical-align: top;
    padding-top: 2px;
    padding-right: 5px;
}

.subview_rule .rule_tit {
    display: inline-block;
    width: 90%;
}

.rule-top p {
    padding-top: 15px;
}

.rule-top .top-tit {
    margin: 20px 0px 0px;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu.inner>li>a {
    padding: 8px 20px;
}

.dropdown-menu>li {
    border-bottom: 1px solid #dedede;
}

.dropdown-menu>li:last-child {
    border-bottom: none;
}

.control-bar .box input,
.subview_inner .input {
    outline: none
}

.control-bar .box input.input::-webkit-input-placeholder {
    color: #fff;
}

.control-bar .box input.input::-moz-placeholder {
    color: #B3B3B3;
}

.control-bar .box input.input:-ms-input-placeholder {
    color: #B3B3B3;
}

.control-bar .box input.input:-moz-placeholder {
    color: #B3B3B3;
}



.btn-add {
    background: url(../images/icon-menu.png);
    background-repeat: no-repeat;
    background-position: center center;
}

/* .btn-add:active {
    background: url(../images/icon_add02.png);
    background-repeat: no-repeat;
    background-position: center center;
} */


.btn-add.disable_left {
    background: url(../images/icon_add03.png);
    background-repeat: no-repeat;
    background-position: center center;
}


@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .btn-add {
        background: url(../images/icon-menu@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 40px 40px;
    }

    /*
    .btn-add:active {
        background: url(../images/icon_add02@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 40px 40px;

    } */

    .btn-add.disable_left {
        background: url(../images/icon_add03@2x.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 40px 40px;
    }
}


i.icon_search {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 40px;
    top: 12px;
}

/* control-bar end */

.robot .avatar {
    width: 44px;
    height: 46px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}


.line_img {
    max-width: 150px;
    margin-bottom: 10px;
    margin-left: 16px;
}

.robot .avatar01 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar01@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar02 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar02@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar03 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar03@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar04 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar04@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar05 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar05@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar06 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar06@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar07 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar07@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar08 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar08@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .avatar09 {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/avatar09@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38px 38px;
}

.robot .tree {
    width: 144px;
    height: 175.2px;

    background: url(../images/tree_icon@2x.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 144px 175.2px;
}

.robot .tree01 {
    width: 166px;
    height: 156px;
    margin: 15px;
    background: url(../images/tree_icon01@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 166px 156px;
}

.robot .tree02 {
    width: 180px;
    height: 170px;
    margin: 15px;
    background: url(../images/tree_icon02@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 166px 156px;
}

.robot .dialog-box .message .more {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #33AC71;
    display: inline-block;
}

.robot .dialog-box .message .more1 {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #48C159;
    display: inline-block;
}

.robot .dialog-box .message .more2 {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #78C93D;
    display: inline-block;
}

/* control-bar end */



/* alert */

.payment .paymentcode {
    width: 359px;
    height: 627px;
    background: url(../images/payment@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 359px 627px;
    position: relative;
}

.payment .paymentcode .paymenticon {
    width: 50px;
    height: 56px;
    background: url(../images/paymenticon@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px 56px;
    position: absolute;
    right: -13px;
    top: -25px;
}

.img-creditcard09 {
    width: 220px;
    height: 120px;
    background: url(../images/img_creditcard09@2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 220px 120px;
}

/* slider */

.slider {
    width: 100%;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
}

.slick-slide {
    margin: 0px 1px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
    margin: 0px 0px;
}

.card-shiftPs {
    font-size: 12px;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    color: #879195;
    padding-bottom: 5px;
    min-height: 40px;
}

.card-shift table {
    width: 100%;
}

.card-shift {
    padding: 8px 10px 0px 6px;
    font-weight: bold;
}

.card-shift tr {
    height: 22px;
}

.card-shift td:last-child {
    text-align: right;
    font-size: 12px;
    font-weight: 400;
}

.card-shift .card-trips {
    font-size: 12px;
    padding-left: 7px;
}

.card-shift .card-trips i img {
    width: 30px;
    display: inline-block;
    margin-left: 5px;
}

.card-shift .card-time {
    font-size: 12px;
    text-align: center;
}

.card-shift .card-goto {
    text-align: center;
}

.card-shiftTime {
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.card-shiftTime img.icon-arrowright {
    display: inline-block;
    margin-left: 6px;
    margin-right: 5px;
    margin-bottom: 4px;
}

.card-shiftTime table {
    width: 100%;
}

.card-shiftTime table thead {
    border-bottom: 1px solid #979797;
}

.card-shiftTime table tr {
    height: 32px;
}

.card-shiftTime table thead tr td {
    padding-bottom: 6px;
}

.card-shiftTime table thead tr:first-child td {
    padding-top: 0px;
}

.card-shiftTime table tr:first-child td {
    padding-top: 10px;
}

.card-shiftTime table span {
    font-size: 14px;
    font-weight: bold;
}

.card-price {
    font-weight: bold;
}

/* .card-shift td:first-child{
   font-weight: bold;
    } */

img.icon-arrowright {
    width: 6px;
    margin-left: 2px;
}

/*.slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }*/

.slider .segment {
    padding: 0;
    background-color: #FFF;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0px 0px 6px 1px #D7DADC;
    -moz-box-shadow: 0px 0px 6px 1px #D7DADC;
    -webkit-box-shadow: 0px 0px 6px 1px #D7DADC;
    -webkit-border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -ms-border-radius: 0 5px 5px 5px;
    -o-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
}



.slider .segment {
    color: #37474F;
    font-size: 15px;
    font-weight: 300;
    border-top: 4px solid #E97925;
    background-color: #F4F4F4;
}


.desc ul {
    padding: 0px 0px 0px 21px;
    margin: 0px;

}


.img-banner.segment-round img {
    border-radius: 0px 18px 18px 18px;
}

.robot .tree {
    width: 144px;
    height: 175.2px;

    background: url(../images/tree_icon@2x.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 144px 175.2px;
}


/* service */

.sat_all p {
    text-align: center;
    font-size: 15px;
    padding: 0px 10px;
}

.sat_all {
    box-shadow: 0px 0px 10px 5px #DDE8DD;
    -moz-box-shadow: 0px 0px 10px 5px #DDE8DD;
    -webkit-box-shadow: 0px 0px 10px 5px #DDE8DD;
    box-shadow: 0px 0px 10px 5px #DDE8DD;
    border-radius: 10px;
    padding: 20px 0px 30px;
    margin: 100px 0px 10px;
    position: relative;


}

.sat_all ul {
    display: table;
    margin: 0px auto;
    padding: 0px;
}

.sat_all li {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0px 10px;
    cursor: pointer;
}

li.icon_star {
    background-image: url(../images/icon_star.png);
    width: 40px;
    height: 40px;
    background-size: 96px 33px;
    list-style: none;
    background-position: -60px 4px;
    background-repeat: no-repeat;
}

li.icon_star.open {
    background-image: url(../images/icon_star.png);
    width: 40px;
    height: 40px;
    background-size: 96px 33px;
    list-style: none;
    background-position: 0px 4px;
    background-repeat: no-repeat;
}

.sat_content {
    max-width: 350px;
    margin: 0px auto;
    font-size: 15px;
    padding: 0px 10px;
}

.sat_content_sat {
    max-width: 350px;
    margin: 0px auto;
    font-size: 15px;
    padding: 0px 10px;
}

.sat_img,
.peo_img {
    width: 100%;
    position: absolute;
    top: -83px;
}

.sat_img img {
    text-align: center;
    width: 153px;
    margin: 0px auto;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    li.icon_star {
        background-image: url(../images/icon_star@2x.png);
        width: 40px;
        height: 40px;
        background-size: 96px 33px;
        list-style: none;
        background-position: -60px 4px;
        background-repeat: no-repeat;
    }

    li.icon_star.open {
        background-image: url(../images/icon_star@2x.png);
        width: 40px;
        height: 40px;
        background-size: 96px 33px;
        list-style: none;
        background-position: 0px 4px;
        background-repeat: no-repeat;
    }
}

.smart_message {
    margin: 20px 0px;
}

.smart_message p {
    font-size: 15px;
}

textarea#message {
    font-size: 15px;
}

.sat_all .mes_p {
    padding: 20px 0px 0px;
}




.peo_img img {
    width: 70px;
    height: 70px;
    border-radius: 50px;
    margin: 0px auto;
    box-shadow: 0px 8px 10px 0px #DDE8DD;
    -moz-box-shadow: 0px 8px 10px 0px #DDE8DD;
    -webkit-box-shadow: 0px 8px 10px 0px #DDE8DD;
    box-shadow: 0px 8px 10px 0px #DDE8DD;
}

.otp_shock {
    display: table;
    margin: 40px auto 0px;
    text-align: center;
    font-size: 15px;
}

.otp_shock img {
    width: 24px;
    height: 24px;
    margin: 15px auto;
}

.otp_share img {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.otp_share ul {
    display: table;
    padding: 0;
    margin: 0px auto;
}

.otp_share li {
    display: inline-block;
    text-align: center;
    padding: 30px 25px 58px;
}

.otp_share a p {
    margin: 0px;
    padding-top: 2px;
    color: #37474F;
    font-size: 12px;
}

.otp_share a:hover,
.otp_share a:focus {
    text-decoration: none;
}

/*  service  end*/
.cathay_smart_open {
    background-color: #fff;
    bottom: 100%;
}

/*  index*/

.smart_all {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;

}

.index_bg {

    background-image: url(../images/index.png);
    background-position: top center;
    width: 100%;
    height: 1080px;
    background-repeat: no-repeat;
}

.smart_up {
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    margin-left: 42px;
    cursor: pointer;
    display: none;
}

.smart_alpha {
    width: 110px;
    height: 130px;
    cursor: pointer;
    background-image: url(../images/smart_alpha.png);
    background-size: 100%;
    background-position: 0px 14px;
    z-index: 5;
    margin-bottom: -20px;

}

.smart_alpha.end {
    background-image: url(../images/smart_alpha02.png);
    background-size: 100%;
    background-position: 0px 14px;
}

.smart_alpha.shut {
    background-image: url(../images/smart_alpha03.png);
    background-size: 100%;
    background-position: 0px 14px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {

    .smart_alpha {
        background-image: url(../images/smart_alpha@2x.png);
        background-size: 100%;
        background-position: 0px 14px;

    }

    .smart_alpha.end {
        background-image: url(../images/smart_alpha02@2x.png);
        background-size: 100%;
        background-position: 0px 14px;
    }

    .smart_alpha.shut {
        background-image: url(../images/smart_alpha03@2x.png);
        background-size: 100%;
        background-position: 0px 14px;
    }

}

.bankcode .search img {
    width: 20px;
}


.bankcode {
    position: relative;
    background-color: #fff;
    box-shadow: 0px 8px 30px 3px #c8dac857;
    border: 1px solid #efefef;
}

.bankselect {
    height: 392px;
    overflow-y: auto;
}

.bankcode .search {
    left: 10px;
    top: 14px;
    position: absolute;
}

.bankcode input {
    padding: 0px 34px;
    border: 0px;
    box-shadow: initial;
    background-color: #fff;
    margin: 0px 0px;
}

.banksearch {
    border-bottom: 1px solid #dedede;
}

ul.bankselect {
    margin: 0;
    list-style: none;
    padding: 0px;
}


.bankselect li {
    padding: 8px 20px;
    border-bottom: 1px solid #dedede;
    cursor: pointer;
}

.bankselect li:hover {
    color: #fff;
    background-color: #1baf54;
}

.bank_select {
    color: #37474f;
    position: relative;
}

.bank_select .bs-caret {
    position: absolute;
    right: 10px;
    top: 13px;
    padding: 2px 5px 2px 3px;
    margin-top: -2px;
    border-radius: 5px;
    color: #fff;
    background-color: #1baf54;
}

.bank_select .caret {
    border-top: 8px dashed;
    border-top: 8px solid \9;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}


input.form-control.bank_input::-webkit-input-placeholder {
    /* WebKit browsers */
    font-size: 15px;
    font-weight: 400;
    color: #37474f !important;
}

input.form-control.bank_input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: 15px;
    font-weight: 400;
    color: #37474f !important;
}

input.form-control.bank_input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 15px;
    font-weight: 400;
    color: #37474f !important;
}

input.form-control.bank_input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: 15px;
    font-weight: 400;
    color: #37474f !important;
}

.bankselect option:last-child {
    border-bottom: 0px;
}


.ui-contextop .bankcode i.bank_cancel {
    right: 12px;
    top: 11px;
    z-index: 1;
    width: 24px;
    height: 24px;
    display: table;
    position: absolute;
    cursor: pointer;
}

.btn-group.bootstrap-select.bankrow.open>.dropdown-menu {
    margin-top: 44px;
    border-top: 1px solid #dedede;
}

.smart_say .say {
    right: 20px;
    background-color: #fff;
    border-radius: 40px 40px 40px 40px;
    padding: 10px 20px;
    position: relative;
    box-shadow: 0px 8px 20px 0px #a7a7a7;
    -moz-box-shadow: 0px 8px 20px 0px #a7a7a7;
    -webkit-box-shadow: 0px 8px 20px 0px #a7a7a7;
    box-shadow: 0px 8px 20px 0px #a7a7a7;
    font-size: 14px;
    line-height: 1.4;
}

.smart_say .say::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 18px;
    background-image: url(../images/robot_index.png);
    background-repeat: no-repeat;
    bottom: -12px;
    right: 15px;
    z-index: 2;

}

.smart_say p {
    margin: 0;
}

.smart_box {
    margin-right: 10px;
    margin-bottom: -14px;
    border-radius: 10px;
    box-shadow: 0px 8px 20px 0px #a7a7a7;
    -moz-box-shadow: 0px 8px 20px 0px #a7a7a7;
    -webkit-box-shadow: 0px 8px 20px 0px #a7a7a7;
    box-shadow: 0px 8px 20px 0px #a7a7a7;
    overflow: hidden;
    height: 500px;
    z-index: 3;
    display: none;
}

.smart_box iframe {
    width: 450px;
    height: 500px;

}

.smart_icon {
    float: right;
}

/*  index  end*/
/*  otp4 */
.panel .sub_code {

    display: inline-block;
}

a.sub_left {
    float: left;
    width: 50px;
    margin-right: 10px;

}

.sub_right {
    float: right;
    width: 250px;
}

.cathay_smart .panel {


    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;

}

.panel .subview_box:first-child {
    margin: 0px 0px;

}

.cathay_smart .nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #27AE58;
    cursor: default;
    background-color: #fff;
    border-bottom: 2px solid #27AE58;
    border: none;


}

.cathay_smart .nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: none;
    border-radius: 4px 4px 0 0;
    font-size: 15px;
    color: #879195;
    background-color: #fff;
}

.cathay_smart .nav-tabs>li>a:hover {
    border-bottom: 2px solid #27AE58;
    color: #27AE58;
}

.cathay_smart .nav>li {
    width: 50%;
    text-align: center;

}

.cathay_smart .nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    background-color: #fff;
    border-bottom: 2px solid #27AE58;
    border-bottom-color: none;
}

/* fixed bill */
.sub_table.fixed_table tbody tr:first-child {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: middle;
    padding: 10px 0px;
    height: auto;
}

.sub_table.fixed_table th:first-child {
    padding-left: 8em;
}

.fixed_table table {
    width: 100%;
}

.sub_table.fixed_table tr {
    height: auto;
    vertical-align: middle;
    padding: 10px 0px;
    display: inline-flex;
    width: 100%;
}

.fixed_table tbody {
    height: 200px;
    overflow-y: auto;
    width: 100%;
}

/* 捲軸隱藏又可以捲動 */
.fixed_table tbody::-webkit-scrollbar {
    display: none;
}

.fixed_table tbody {
    -ms-overflow-style: none;
}

.fixed_table {
    height: 100%;
    width: calc(100vw + 18px);
    /*瀏覽器滾動條的長度大約是 18px*/
    overflow: auto;
}

/* 捲軸隱藏又可以捲動 end*/

.fixed_table thead,
.fixed_table tbody,
.fixed_table tr,
.fixed_table td,
.fixed_table th {
    display: block;
}

.fixed_table tbody td {
    display: flex;
    word-wrap: break-word;
    word-break: break-all;
    -ms-flex-align: center;
    align-items: center;
}

.fixed_table thead tr th {
    display: inline-block;
}

.shift table {
    width: 100%;
}

.shift_box {
    padding: 0px;
    max-width: initial;
}

.shift_bg {
    background-color: #F5F5F5;
}

.shift {
    padding: 20px;
    max-width: 400px;
    margin: 0px auto;
}

.shift a {
    color: #3A3A3A;
}

.shift a:hover {
    color: #3A3A3A;
    text-decoration: none;
}

.county {
    display: inline-block;
    font-size: 20px;
    padding-left: 20px;
}

a .county {
    padding-left: 0px;
}

a .gray {
    color: #879195;
    font-size: 12px;
}

a .trips {
    color: #DC510B;
    font-size: 16px;
    padding-left: 10px;
    font-weight: 400;
}

.station-time {
    font-size: 20px;
}

.station-time img {
    width: 10px;
    height: 12px;
}

.stop-station {
    font-size: 12px;
    height: 30px;
}

.schedule {
    font-size: 16px;
}

.schedule-circle {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: inline-block;
    background-color: #434C5D;
}

.schedule-circle-light {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    display: inline-block;
    background-color: #D9DBDF;
}

.scheduleline {
    background-image: url(../images/scheduleline.png);
    background-repeat: repeat-y;
    background-size: 2px 2px;
    background-position: 6.6px;
}

.schedule td {
    padding: 0px 0px 4px;
}

.calendar {
    font-size: 16px;
}

.calendar span {
    font-weight: bold;
    color: #DC510B;
}

.calendar-interval {
    background-color: #E1E9F7;
    cursor: pointer;
    text-align: center;
    height: 44px;
    line-height: 44px;
    margin: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.calendar-interval:hover,
.calendar-time:hover {
    background-color: #434C5D;
    color: #fff;
}

.calendar-interval:focus,
.calendar-time:focus {
    background-color: #434C5D;
    color: #fff;
}

.calendar-interval.active,
.calendar-time.active {
    background-color: #434C5D;
    color: #fff;
}

.calendar-time {
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    height: 44px;
    line-height: 44px;
    margin: 5px;
    border: 1px solid #3A3A3A;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.calendar-time.null {
    opacity: .4;
    cursor: inherit;
}

.calendar-time.null:hover {
    background-color: inherit;
    color: inherit;
}

.car {
    font-size: 15px;
    text-align: center;
}

.car td {
    height: 40px;
}

.trips {
    color: #DC510B;
    font-size: 16px;
    padding-left: 10px;
    font-weight: 400;
}

.trips-tit {
    font-size: 12px;
}

img.price-right {
    width: 11px;
    height: 18px;
}

.trips-time {
    border-bottom: 1px solid #D7DADC;
}

.shift .time {
    height: 30px;
}

.county img {
    width: 10px;
    height: 12px;
    margin: 0px 29px;
}

.county-time {
    display: inline-block;
    font-size: 20px;
}

.ui-contextop .goback {
    /*width: 24px;*/
    height: 24px;
    display: table;
    position: absolute;
    left: 15px;
    top: 10px;
    cursor: pointer;
    z-index: 99999999;
}

.ui-all .goback img {
    width: 18px;
    height: 18px;
}

.ui-all .cancel img {
    width: 16px;
    height: 16px;
}

.ticket-price {
    display: inline-block;
    text-align: center;
    background-color: #434C5D;
    color: #fff;
    padding: 9px 10px;
    font-size: 12px;
    line-height: 12px;
    cursor: pointer;
}

.select_need {
    padding: 11px 10px;
    text-align: left;
    background-color: #f5f5f5;
    color: #434C5D;
    cursor: pointer;
    font-weight: 400;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.select_need:hover,
.select_need:focus {
    background-color: #D9DBDF;
    font-weight: bold;
    outline: 0px;
}

.select_need.active {
    background-color: #D9DBDF;
    font-weight: bold;
    outline: 0px;
}

.button_two {
    width: 47%;
    display: inline-block;
    margin: 0px 2px;
}

.button_three {
    width: 31%;
    display: inline-block;
    margin: 0px 2px;
}

.update_time {
    color: #879195;
    font-size: 15px;
}

.update_time span {
    color: #E65100;
}

.prompt {
    color: #434c5d;
    font-size: 12px;
    padding-top: 20px;
}

span.btn-search i.icon-mic img {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: -6px;
    left: 10px;
}

.btn-horn img{
    width: 36px;
    height: 36px;
}

.day-calendar img {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
}

.day-calendar input {
    padding-left: 44px;
}

/* calendar */
table.calendar-table {
    text-align: center;
    font-size: 16px;
    background-color: #F5F5F5;
    margin: 10px 0px;
}

.calendar-table thead {
    border-top: 1px solid #979797;
    border-bottom: 1px solid #979797;
}

.calendar-table td {
    height: 40px;
    width: 40px;
}

.calendar-table .day {
    cursor: pointer;
}

.calendar-table .day:hover {
    background-color: #434C5D;
    color: #fff;
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}

.calendar-table .day:focus {
    background-color: #434C5D;
    color: #fff;
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    outline: 0px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}

.calendar-table .day.active {
    background-color: #434C5D;
    color: #fff;
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    outline: 0px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label .icon-satisfaction {
    margin: 0 8px;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url(../images/icon_Satisfaction@2x.png) left center no-repeat;
    background-size: cover;
    cursor: pointer;
}

input[type="checkbox"]:checked+label .icon-satisfaction {
    background: url(../images/icon_Satisfaction@2x.png) -30px center no-repeat;
    background-size: cover;
}

.sub_input.textarea {
    padding: 12px;
    width: 100%;
    height: 155px;
    background: #f5f5f5;
    border: 0px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    line-height: 2;
}

@media (max-width: 1200px) {
    .sub_table.fixed_table th:first-child {
        padding-left: 5em;
    }
}

/*  otp4 end*/
@media (max-width: 768px) {


    .select-tag .tag,
    .tag,
    .robot .dialog-box,
    .user .dialog-box,
    .control-bar .box .input,
    .subview_box,
    .sub_button p {
        font-size: 14px;
    }

    .table_small .dropdown-menu {
        margin: 0px 0px 0px 0px;
        min-width: 72px;
    }

    .sub_table.fixed_table th:first-child {
        padding-left: 4em;
    }

}




@media (max-width: 520px) {

    th.table_01 {
        width: 23%;
    }

    .table_left {
        width: 29px;
        margin-left: 10px;
    }

    .sub_table td {
        padding: 0px 5px;
    }

    .sub_height {
        max-height: 310px;
    }

    .table_small .dropdown-menu {
        margin: 0px 0px 0px -32px;
        min-width: 72px;
    }

    .table_small .dropdown-menu:before {
        left: 46px;
    }

    .table_small .dropdown-menu:after {

        top: -10px;
        left: 43px;

    }

    .qa_img {
        width: 200px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .sub_table.fixed_table th:first-child {
        padding-left: 15px;
        width: 30%;
    }
}

@media (max-width: 412px) {
    .sub_height {
        max-height: 230px;
    }

    .select-tag02 li {
        padding: 0px 2px;

    }

    .select-box a {
        font-size: 13px;
    }

}

@media (max-width: 750px) {
    .sub_height {
        max-height: 347px;
    }
}

@media (max-width: 360px) {
    .sub_height {
        max-height: 280px;
    }

    .sub_button {
        margin: 0px 10px;
    }

    .sub_button .tag.spacing {
        letter-spacing: 12px;
        padding-left: 28px;
    }

    .county img {
        margin: 0px 10px;
    }

    .sub_button a {
        font-size: 12px;
    }


}

@media (max-width: 320px) {


    .sub_height {
        max-height: 210px;
    }

    .fixed_table tbody {
        height: 150px;
    }

}

.target img,
.target .time {
    visibility: hidden;
}

.robot .tree {
    width: 144px;
    height: 175.2px;

    background: url(../images/tree_icon@2x.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 144px 175.2px;
}




.new_msg_alert p {
    border-radius: 50px;
    width: 25%;
    background: #33333333;
    color: #333333b8;
    padding: 10px;
    margin: 10px auto;
    font-size: 12px;
    text-align: center;
}


.touch .heder_back {
    display: block;
}


.header_service,
.select-menu {
    overflow: hidden;
}

.message {
    word-break: break-all;
}

input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #909090 !important;
    font-weight: 300;
    font-size: 15px;
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #909090 !important;
    font-weight: 300;
    font-size: 15px;
}


input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #909090 !important;
    font-weight: 300;
    font-size: 15px;
}

input.placeholder {
    /* Internet Explorer 8 & 9*/
    color: #909090 !important;
    font-weight: 300;
    font-size: 15px;
}

input.placeholder {
    /* Internet Explorer 8 & 9*/
    color: #909090 !important;
    font-weight: 300;
    font-size: 15px;
}

.sub_input input::-webkit-input-placeholder {
    font-weight: 300;
}

.sub_input input::-webkit-input-placeholder {
    font-weight: 300;
}

.sub_input input:-moz-placeholder {
    font-weight: 300;
}

.sub_input input:-ms-input-placeholder {
    font-weight: 300;
}

.sub_input input.placeholder {
    font-weight: 300;
}



input[type="text"] {
    -webkit-appearance: none;
}

input.disable_in::-webkit-input-placeholder {
    color: #fff !important;
    font-weight: 300;
    font-size: 15px;

}

input.disable_in::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff !important;
    font-weight: 300;
    font-size: 15px;
}

input.disable_in:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff !important;
    font-weight: 300;
    font-size: 15px;
}

input.disable_in::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff !important;
    font-weight: 300;
    font-size: 15px;
}

input.disable_in:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff !important;
    font-weight: 300;
    font-size: 15px;
}


.control-bar .box.focus {
    padding: 5px 0 0 0;
    margin: 0 0 30px 0;
}

/* for chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* for mozilla */
input[type=number] {
    -moz-appearance: textfield;
}

.cathay_smart input {
    outline: none;
    background-color: #f5f5f5;
    border:0px;
}





@media screen and (max-height: 600px) {
    .sub_height {
        max-height: 250px;
    }


    .sat_content {
        height: 450px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media screen and (max-height: 550px) {
    .sub_height {
        max-height: 200px;
    }

    .sat_content {
        height: 300px;
    }
}

@media screen and (max-height: 500px) {
    .sub_height {
        max-height: 150px;
    }

    .fixed_table tbody {
        height: 150px;
    }

    .subview_inner p {
        padding-top: 10px;
    }

    .sub_button {
        margin-top: 0px;
    }

    .sat_all {
        padding: 15px 0px 14px;
    }

    textarea#message {
        height: 65px;
    }

    .subview_inner {
        max-height: 200px;
        overflow: auto;
    }

    .sat_content {
        height: 200px;
    }

    .subview_inner.bank_inner {
        max-height: 500px;
        overflow: auto;
    }

}

.bootstrap-select .dropdown-menu>li>a:hover,
.bootstrap-select .dropdown-menu>li>a:focus {

    color: #fff;
    text-decoration: none;
    background-color: #1baf54;

}

.bootstrap-select .caret {
    border-top: 8px dashed;
    border-top: 8px solid \9;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}


.bootstrap-select .bs-caret {
    position: absolute;
    right: 10px;
    padding: 2px 5px;
    margin-top: -2px;
    border-radius: 5px;
    color: #fff;
    background-color: #1baf54;
}

.sing_lightbox {
    display: inline-block;
    width: 100%;
}

.sing_font p {
    padding: 0px;
}

.sing_font h5 a {
    color: #1AAF54;
    text-decoration: none;
    border-bottom: 1px solid #1AAF54;
}

.brand_new_all .subview_box {
    margin: 15px 0px 0px;
}

.brand_new_all .code_img {
    width: 100%;
    margin: 0px auto;
    max-width: 335px;
}

.bank_agree a {
    color: #1AAF54;
    text-decoration: none;
    border-bottom: 1px solid #1AAF54;
    line-height: 25px;
}

.agree.bank_agree {
    width: 100%;
    padding-top: 15px;
}

.agree.bank_agree p {
    color: #37474F;
    text-align: center;
    margin: 0px;
    padding: 10px 0px 0px;
    font-size: 15px;
}

.has-million {
    position: relative;
}

i.sub_million {
    width: 24px;
    height: 24px;
    display: table;
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 2;
    background-color: #fff;
    font-style: normal;
}

@media screen and (min-height: 640px) {
    .subview_inner.bank_height {
        max-height: 560px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.sign_new .panel-body {
    padding: 0px 15px;
}

.sign-otp .subview_box {
    margin: 15px 0px 0px;
}

.acc_number {
    color: #879195;
    font-size: 16px;
    padding: 0px 0px 15px;
    cursor: pointer;
}

.sing_remarks {
    padding-left: 32px;
}

.sing_link a {
    color: #1AAF54;
    text-decoration: none;
    border-bottom: 1px solid #1AAF54;
}

.sing_link {
    padding: 10px 0px;
    margin: 10px auto;
    display: table;
}

.sign_new_inner {
    padding: 0px 26px;
    max-width: 400px;
    margin: 0px auto;
    position: relative;
}

.card-station {
    position: absolute;
    bottom: 28px;
    left: 28px;
    color: #fff;
    font-weight: bold;
}

.card-service {
    position: absolute;
    top: 48px;
    right: 53px;
    font-weight: bold;
    font-size: 14px;
}

.card-service.lead-service {
    right: 34px;
}

.card-loss {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    width: 200px;
    text-align: center;
    height: 130px;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.card-center img {
    width: 32px;
    margin: 0px auto;
}

.card-center p {
    text-align: center;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    padding-top: 7px;
}

.card-center.small-txt p {
    font-size: 12px;
}

.card-lost {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    width: 200px;
    text-align: center;
    height: 130px;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.card-search {
    position: absolute;
    top: 39px;
    right: 38px;
    font-weight: bold;
    font-size: 12px;
}

.card-member {
    position: absolute;
    bottom: 25px;
    left: 33px;
    font-weight: bold;
    font-size: 14px;
}

.txt-search {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

.ths_Infor .infor_left {
    float: inherit;
}

.ths_Infor .infor_right {
    float: inherit;
    text-align: left;
    max-width: inherit;
}

.btn-bottom p {
    color: #879195;
    margin: 0;
    font-size: 12px;
}


/*-- 200608 切換動畫 */
.control-bar .box {
    display: flex;
    align-items: center;
}

.control-bar .box .input {
    margin-top: 0px;
}

.control-bar .box a.btn-mic {
    text-align: center;
}

span.btn-search i.icon-mic img {
    left: 5px;
}

.box__btn {
    width: 40px;
    height: auto;
    transition: .2s;
    cursor: pointer;
}

.btn-horn {
    width: 36px;
    margin-right: 5px;
}

.control-bar .box .box__btn.w-0 {
    width: 0px;
}

/* voice-open
voice-closes
btn-add
btn-collapse */