/*  阿發Style開始  */
/* PC */

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

.smart_icon {
    float: right;
}

.smart_alpha {
    width: 56px;
    height: 56px;
    cursor: pointer;
    background-image: url(../images/smart_alpha.png);
    background-size: 100%;
    z-index: 5;
    margin: 16px;
}

.smart_alpha.shut {
    background-image: url(../images/smart_alpha03.png);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
}

.smart_say .say {
    right: 16px;
    float: left;
    background-color: #fff;
    border-radius: 40px 40px 40px 40px;
    padding: 8px 16px;
    position: relative;
    -webkit-box-shadow: 0px 6px 14px 0px rgba(68, 68, 68, 25%);
    box-shadow: 0px 6px 14px 0px rgba(68, 68, 68, 25%);
    font-size: 14px !important;
    line-height: 1.4;
    margin-bottom: 4px;
    max-height: 56px;
    max-width: 260px;
    display: table;
}

.smart_say .say::before {
    content: "";
    position: absolute;
    width: 11px;
    height: 10px;
    background-image: url(../images/robot_index.png);
    background-repeat: no-repeat;
    bottom: -7px;
    right: 30px;
    z-index: 2;
}

.smart_say p {
    margin: 0;

           font-size: 14px;
           color:#3A3A3A;
line-height: 22px;
    letter-spacing: 1px;
    
}

.smart_box {
    margin-right: 16px;
    margin-bottom: 0px;
    border-radius: 12px;
    box-shadow: 0px 6px 14px 0px rgba(68, 68, 68, 25%);
    -moz-box-shadow: 0px 6px 14px 0px rgba(68, 68, 68, 25%);
    -webkit-box-shadow: 0px 6px 14px 0px rgba(68, 68, 68, 25%);
    overflow: hidden;
    max-height: 600px;
    height: calc(100vh - 150px);
    z-index: 3;
    display: none;
}

    /* .smart_box {
  display: none; } */

.smart_box.on {
    display: block;
}

.smart_box iframe {
    width: 450px;
    height: 100%;
}

/* mobile */
@media (max-width: 767px) {
    body.alpha {
        overflow-y: hidden;
        position: fixed;
    }

    .smart_all {
        position: static;
        top: 0;
        width: 100%;
        /*height: 100%;*/
    }

    .smart_icon {
        position: absolute;
        z-index: 102;
        cursor: pointer;
        display: inline-block;
        top: -4px;
        right: -4px;
        position: fixed;
    }

    .smart_alpha {
        min-width: 30px;
        min-height: 30px;
        width:calc((45rem / 18));
        height: calc((45rem / 18));
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-image: url(../images/alpha-mobile.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: 16px 16px;
    }
}

@media screen and (max-width: 767px), screen and (max-height: 649px) {

    .smart_alpha.shut {
        width: 40px;
        height: 40px;
        /* background: url(../images/m_close.png); */
        background-size: 40px 40px;
        border: none;
        position: fixed;
        cursor: pointer;
        display: inline-block;
        top: -0.6rem;
        right: 0px;
        z-index: 999;
    }

    .smart_say {
        display: none;
    }

    .smart_box_bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        position: fixed;
        z-index: 100;
        display: none;
        bottom: 0px;
        left: 0px;
    }

    .smart_box_bg.on {
        display: block;
    }

    .smart_box.on {
        display: block;
        position: fixed;
        z-index: 101;
        bottom: 0px;
        width: 100%;
        margin: 0;
        left: 0%;
        height: 100%;
        padding-top: 50px;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-name: box_lightbox;
        animation-name: box_lightbox;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .smart_box {
        width: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: none;
        position: fixed;
        z-index: 101;
    }


    @-webkit-keyframes box_lightbox {
        0% {
            -webkit-transform: translateY(85%);
            transform: translateY(85%);
        }

        100% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
        }
    }

    @keyframes box_lightbox {
        0% {
            -webkit-transform: translateY(85%);
            transform: translateY(85%);
        }

        100% {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
        }
    }

    .smart_box iframe {
        display: block;
        position: fixed;
        z-index: 101;
        bottom: 0px;
        width: 100%;
        margin: 0;
        left: 0%;
        height: 100%;
        padding-top: 50px;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-animation-name: box_lightbox;
        animation-name: box_lightbox;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

div.smart_all .say > p > span {
    color: #26A862;
}