.iconfont.icon-normal:before {
    width: 45px;
    height: 45px;
    font-size: 40px;
    text-align: center
}

.iconfont.icon-big:before {
    width: 63px;
    height: 63px;
    font-size: 60px;
    text-align: center
}

.iconfont.icon-blue:before {
    color: #3ca7f5
}

.iconfont.icon-white:before {
    color: #fff
}


.dm-banner {
    width: 100%;
    height: 650px;
    background: #3c3fff;
}

.dm-banner .banner-content {
    padding-top:200px ;
    width: 1200px;
    margin: 0 auto;
}

.dm-banner .banner-content .banner-slogan {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: #fff;
    position: absolute;

}

.dm-banner .banner-content .banner-slogan .slogan-title {
    font-size: 54px;
    text-align: left;
    margin-bottom: 20px;


}

.dm-Mbanner .dm-banner .banner-content .banner-slogan .slogan-title{
    margin-top: 100px;
}



.dm-banner .banner-content .banner-slogan .other-slogan-tip {
    margin-bottom: 30px
}

.dm-banner .banner-content .banner-slogan .slogan-btn {
    font-size:16px;
    display: block;
    height: 42px;
    border: 1px solid #fff;
    color: #fff;
    line-height: 42px;
    webkit-transition: color 218ms cubic-bezier(.42,0,.58,1);
    -o-transition: color 218ms cubic-bezier(.42,0,.58,1);
    transition: color 218ms cubic-bezier(.42,0,.58,1);

}

.dm-banner .banner-content .banner-slogan .slogan-btn.free-experience {
    webkit-transition: color 218ms cubic-bezier(.42,0,.58,1);
    -o-transition: color 218ms cubic-bezier(.42,0,.58,1);
    transition: color 218ms cubic-bezier(.42,0,.58,1);
    padding: 0 10px;
    width: 150px;
    background: url("../img/banner-b-bj.png")/*tpa=http://www.dianhuarobot.com/public/static/home/by/img/banner-b-bj.png*/;
    text-align: center;
}

.dm-banner .banner-content .banner-slogan .slogan-btn:hover {
    border-color: #fff;
    background-color: #fff;
    color: #34aff3;

}

.dm-banner .banner-content .banner-figure {
    margin-right: 100px;
    float: right;
}

.inWarp{
    background: #fff;
    overflow: hidden;
}

.dm-module {
    height: auto;
    width: 100%
}

.dm-module.gray {
    background-color: #f9fbfd
}

.dm-module.yellow{
    background: url("../img/in-fx2.png")/*tpa=http://www.dianhuarobot.com/public/static/home/by/img/in-fx2.png*/ no-repeat center;
    margin-bottom: 30px;
} 

.dm-module.background {
    background-color: #00c1de
}

.dm-module .pc-hide {
    display: none !important
}

.dm-module .module-content {
    width: 1200px;
    margin: 0 auto;
    padding: 80px 0
}

.dm-module .module-content .module-title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: rgb(247, 4, 4);
    margin-bottom: 80px;
    padding-top: 50px;
}

.dm-module .module-content .module-title.m-b-30 {
    margin-bottom: 30px
}

.dm-module .module-content .module-tip {
    font-size: 18px;
    color: rgba(0, 0, 0, .43);
    text-align: center;
    margin-bottom: 80px
}

.dm-module .module-content .module-items .title-two {
    font-size: 26px;
    color: #000;
    text-align: center
}

.dm-module .module-content .module-items .tip-two {
    font-size: 14px;
    color: rgba(0, 0, 0, .43);
    text-align: center;
    margin: 30px 0;
    margin-left: 80px;
    margin-right: 80px
}

.dm-module .module-content.content-sence {
    border: 1px solid #e0e0e0;
    background-color: #f7f7f7
}

.dm-module .module-content.content-sence.m-b-60 {
    margin-bottom: 60px
}

.dm-module .module-btn {
    background:#75d1ff url("../img/but-bj.png")/*tpa=http://www.dianhuarobot.com/public/static/home/by/img/but-bj.png*/ center;
    height: 60px;
    width: 200px;
    margin: 0 auto;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s ;
    -o-transition: all 0.5s ;
    transition: all 0.5s;
}

.dm-module .module-btn i{
    margin-left: 10px;
}

.dm-module .module-btn .iconfont {
    margin-left: 5px;
    font-size: 18px
}

.dm-module .module-btn.free-experience {
    width: 190px
}

@media screen and (max-width: 767px) {
    .in-Mform{
        width: 100% !important;
    }
    .in-Mform .inputBox input{
        width: 40% !important;
    }

    .in-Mform .inputBox span{
        padding: 0 10px !important;
    }
    .in-Mform .inputBox{
        width: 90%;
        margin-bottom: 20px !important;
    }
    .in-title h2 {
        font-size: 30px!important;
        color: #464646!important;
        line-height: 30px!important;
    }
    .in-Mform .free-experience{
        clear: both !important ;
        margin: 0 auto !important;
    }
    .in-title span{
        display: none !important;
    }
    .in-Mform .inputBox input{
        width: 70% !important;
    }
    #recorde .module-items {
        overflow: hidden;
        width: 100% !important;
    }

    .audioList{
        width: 50%;
        float: left;
        overflow: hidden;
    }
    .audioplayer {
        height: 176px!important;
        width: 100% !important;
        margin-right: 0!important;
        background: url("../img/audioplayer-bj.png")/*tpa=http://www.dianhuarobot.com/public/static/home/by/img/audioplayer-bj.png*/ no-repeat top center;
        background-size: 85% !important;
        padding-bottom: 20px;
    }


    .audioList audio{
        float: left;
    }
    #recorde .textBox{
        display: none;
    }
    .slogan-title{
        margin-top: 80px;
    }


    .in-title {
        padding: 0 0 20px 0!important;
    }

    .shouji{
        display: block !important;
        width: 100%;
    }

    #recorde h3.text{
        width: 100% !important;
        padding-bottom: 30px !important;
    }
    #recorde h3.text span{
        width: 80% !important;
    }
    .site-header.mobile-header .navbar-header .navbar-brand {
        width: 80px !important
    }
    .in-phone{
        display: block;
    }
    .in-phone a{
        display: block;
        height: 32px;
        width: 32px;
        background:url("../img/shoujip.png")/*tpa=http://www.dianhuarobot.com/public/static/home/by/img/shoujip.png*/ no-repeat center 1px;
        margin: 0 15px 0 0;

    }


.shoujiduan{
    display: none;
}


.youShi dl{
    width: 50% !important;
}

    .youShi dl dd{
        width: 80% !important;
    }
    .in-ysTab{
        padding-bottom: 50px !important;
    }


    .progressList{
        width: 50% !important;
    }
    .site-header.mobile-header .navbar-header .navbar-toggle {
        margin: 15px 0 0;
        float: right;
        cursor: pointer;

    }
    .in-hzhb ul{
        width: 96% !important;
        margin: 0 auto;
    }

    .in-hzhb ul li{
        width: 50% !important;
    }
    .site-header.mobile-header .navbar-header .navbar-advisory {
        margin-right: 10px
    }

    .site-header.mobile-header .navbar-header .navbar-advisory.active {
        padding: 6px
    }

    .dm-page-nav .container nav {
        width: 100%
    }

    .dm-banner {
        height: 300px !important;
    }

    .dm-banner .banner-content {
        width: 100%
    }





    .dm-banner .banner-content .banner-slogan {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 80%;


    }

    .dm-banner .banner-content .banner-slogan .slogan-title{
      
    }
    .dm-Mbanner .banner-slogan{
        margin: 20px;


    }

    .M-news{
        width: 100% !important;
    }

    .M-news dl dt{
        float: none !important;
        width: 90% !important;
        margin: 0 auto;
        height: auto !important;
    }

    .M-news dl dd{
        float: none !important;
        width: 90% !important;
        margin: 0 auto;
        height: auto !important;
    }

    .M-news dl dd h2{
        padding-left: 0 !important;
    }

    .M-news dl dd span{
        padding-left: 0 !important;
    }
    .M-news dl dd b{
        margin-left: 0 !important;
    }

    .dm-banner .banner-content .banner-slogan .slogan-title {
        font-size: 32px;
        text-align: center;
        margin: 0;

    }

    .M-lianxi{
        width: 96% !important;
        margin: 0 auto !important;
    }


    .M-lianxi .right h3 {
        font-size: 22px !important;
        padding-left: 0 !important;
    }
    .M-lianxi .left {
        float: none !important;
        width: 100% !important;
    }
    .M-lianxi .right{
        float: none !important;
        width: 100% !important;
    }
    .M-lianxi .right p {

        padding-left: 0 !important;
    }
    .dm-banner .banner-content .banner-slogan .slogan-btn {
        float: left;
    }

    .dm-banner .banner-figure {
        display: none
    }

    .dm-module .module-content {
        width: 100%;
        padding: 40px 0
    }

    .dm-module .module-content .module-title {
        width: 90%;
        margin: auto;
        margin-bottom: 30px;
        /*margin-top: 30px*/
    }

    .dm-module.phone-hide {
        display: none
    }

    .dm-module .phone-hide {
        display: none !important
    }

    .dm-module .pc-hide {
        display: block !important
    }

    .dm-module .module-btn {
        display: none
    }

    .dm-module .module-content .module-items .tip-two {
        margin: 30px 0;
        margin-left: 20px;
        margin-right: 20px
    }
}



.dm-footer {
    background: #333;
    height: 400px;
    overflow: hidden;
    position: relative;
    color: #666
}
.dm-footer .dianHua{
    height: 50px;
    width: 50px;
    position: fixed;
    right: 10px;
    bottom: 0px;
    background: #31bbff url("../img/shoujip-2.png")/*tpa=http://www.dianhuarobot.com/public/static/home/by/img/shoujip-2.png*/ no-repeat center;
    background-size: 20px;
    z-index: 9999;
    border-radius: 50%;
    display: none;
}
.dm-footer .dianHua a{
    display: block;
    font-size: 12px;
    color: #333;
    padding-top: 50px;
    white-space:nowrap;
    text-align: center;
}

.dianHua {
    width: 50%;
    text-align: center;
    margin: 50px auto;
    animation: myfirst 2s infinite;
}


@keyframes myfirst {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, -10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}


.dm-footer > ul {
    width: 95%;
    max-width: 1200px;
    margin: 40px auto 0;
    overflow: inherit;
    list-style: none
}

.dm-footer > ul li, .dm-footer > ul ul {
    list-style: none;
    padding: 2px 0;
}

.dm-footer > ul > li {
    float: left;
    width: 20%;
    padding: 10px;
    list-style: none;
    position: relative !important
}

.dm-footer > ul > li h2 {
    font-weight: 400;
    color: #ccc;
    margin-bottom: 20px
}

.dm-footer > ul > li .qrcode {
    width: 80px;
    height: 80px
}

.dm-footer > ul > li .icon {
    width: 20px;
    display: inline-block;
    margin-left: 10px;
    opacity: .75;
    transition: opacity .3s cubic-bezier(.215, .61, .355, 1)
}

.dm-footer > ul > li .icon:first-child {
    margin-left: 0
}

.dm-footer > ul > li .icon:hover {
    opacity: 1
}

.dm-footer > ul > li a {
    color: #666;
    display: block
}

.dm-footer > ul > li a:hover {
    color: #ccc
}

.dm-footer > ul > li .logo {
    width: 80%;
    max-width: 100px;
    display: block;
    margin: 20px 0
}

.dm-footer .copyright {
    position: absolute;
    bottom: 0;
    width: 100%;
    /*height: 100px;*/
    padding-bottom: 50px;
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid rgba(233, 233, 233, .1)
}

.dm-footer .copyright span {
    display: block;
    margin: 20px auto 0
}

#right-menu {
    background: #56c5fc;
    width: 80px;
    padding: 0 10px;
    height: auto;
    position: fixed;
    z-index: 1000;
    right: 0;
    top: 50%;
    margin-top: -150px;
}

#right-menu .menu-item {
    position: relative;
    width: 60px;
    height: 100px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    cursor: pointer
}

#right-menu .menu-item:last-child {
    border-bottom: none
}

#right-menu .menu-item .iconfont {
    font-size: 26px
}

#right-menu .menu-item .tooltip-phone {
    position: absolute;
    height: 40px;
    line-height: 40px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    left: -220px;
    width: 200px;
    text-align: center;
    background-color: #3BBEFF;
    color: #fff;
    display: none;
    font-size: 18px;
    top:50%;
    margin-top: -20px;
    -webkit-transition: color 218ms cubic-bezier(.42,0,.58,1);
    -o-transition: color 218ms cubic-bezier(.42,0,.58,1);
    transition: color 218ms cubic-bezier(.42,0,.58,1);


}

#right-menu .menu-item:hover .tooltip-phone {
    display: block;

}

@media screen and (min-width: 768px) and (max-width: 1280px) {


    .dm-banner .banner-slogan {
        margin-left: 60px
    }

    #right-menu {
        top: 60vh;
        right: 0
    }
}

@media screen and (min-width: 767px) {
    .iconfont.icon-tec-smart-1.icon-big:before, .iconfont.icon-tec-smart-2.icon-big:before, .iconfont.icon-tec-smart-8.icon-big:before {
        font-size: 50px
    }

    .iconfont.icon-tec-smart-1.icon-big, .iconfont.icon-tec-smart-2.icon-big, .iconfont.icon-tec-smart-8.icon-big {
        margin: 7px 0
    }

    .dm-footer {
        min-width: 1200px
    }

    .dm-footer .copyright {
        display: flex;
        align-items: center
    }

    .dm-footer .copyright span {
        margin-top: 0
    }
}

@media screen and (max-width: 767px) {
    #right-menu {
        display: none !important
    }


    .dm-footer {
        height: auto
    }
    .dm-footer .dianHua{
        display: block;
    }
    .dm-footer > ul {
        width: 90%;
        margin: 20px auto 0;
        padding: 10px 0;
        list-style: none
    }

    .dm-footer > ul > li {
        width: 100%;
        list-style: none
    }

    .dm-footer > ul > li h2 {
        margin-bottom: 10px
    }

    .dm-footer > ul > li li {
        display: inline-block;
        margin-right: 10px
    }

    .dm-footer .copyright span {
        width: 90%;
        margin-top: 0
    }

    .dm-footer .copyright {
        position: relative;
        display: flex;
        align-items: center
    }
}

.blocker {
    z-index: 1000 !important
}

.join-form {
    padding: 0
}

.join-form a.close-modal {
    top: 10px;
    right: 10px
}

.join-form-content {
    margin: 0 auto;
    padding: 40px 10px;
    background-color: #fff;
    width: 472px
}

.join-form-content .title {
    width: 100%;
    font-size: 26px;
    color: rgba(0, 0, 0, .9);
    text-align: center;
    margin-bottom: 25px
}

.join-form-content .form-item {
    border: 1px solid #e0e0e0;
    margin-bottom: 20px
}

.join-form-content .form-item .form-label {
    padding: 0;
    width: 80px;
    padding-left: 15px;
    display: inline-block;
    height: 100%;
    line-height: 48px;
    font-size: 14px;
    color: rgba(0, 0, 0, .9)
}

.join-form-content .form-item .form-label-lg {
    width: 80px
}

.join-form-content .form-item .form-input {
    border: none;
    outline: 0;
    width: 280px;
    height: 46px
}

.join-form-content .form-item .form-label-radio {
    font-weight: 400;
    position: relative;
    margin-right: 15px;
    cursor: pointer
}

.join-form-content .form-item .form-label-radio input {
    position: relative;
    margin-right: 5px;
    top: -1px
}

.join-form-content .form-btn {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: #31bbff;
    color: #fff;
    font-size: 16px;
    outline: 0;
    border: none;
    text-align: center
}

.c-message {
    position: fixed;
    top: 30px;
    left: 50%;
    padding-left: 50px;
    padding-right: 20px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    min-width: 200px;
    color: #666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    z-index: 9999
}

.c-message--icon {
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 40px
}

.c-message--success {
    background: #13ce66 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%
}

.c-message--error {
    background: #ff4949 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%
}

.c-message--info {
    background: #20a0ff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat 0 50%
}

.c-message--warning {
    background: #f7ba2a url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat 0 50%
}

.c-message--close {
    position: absolute;
    right: 10px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
    font-size: 30px;
    top: 0;
    line-height: 34px;
    display: block;
    height: 40px
}

.c-message--close:hover {
    color: #666
}

@keyframes messageFadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        -webkit-transform: none;
        transform: none
    }
}

.c-message.messageFadeInDown {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: messageFadeInDown;
    animation-name: messageFadeInDown
}

@keyframes messageFadeOutUp {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.c-message.messageFadeOutUp {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: messageFadeOutUp;
    animation-name: messageFadeOutUp
}

@media screen and (max-width: 767px) {
    .join-form .join-form-content {
        width: 100%
    }

    .join-form .join-form-content .form-item {
        border-radius: 3px
    }

    .join-form .join-form-content .form-label {
        line-height:50px
    }

    .join-form .join-form-content .form-label-radio {
        margin-left: 15px
    }

    .join-form .join-form-content .form-input {
        width: 200px !important;
        height: 50px;
        background: #eeeeee;

    }

    .join-form .join-form-content .form-btn {
        height: 45px
    }
    .join-form .join-form-content .form-item{
        height: auto;
    }
    .Yzm{

        position: relative;
    }
    .Yzm b{
        width: 94px;
        text-align: center;
        height: 32px;
        line-height: 32px !important;
        color: #fff !important;
        background: #31bbff;
        display: block !important;
        float: none !important;
        border-top: 0;
        border-radius: 16px;
        margin-bottom: 5px;
        padding: 0 !important;
        top: -50px;
        right: 0px;
        /* margin-right: -60px; */
        position: absolute;
        font-size: 12px !important;

    }



    #yzm1{
        color: #333 !important;
        background: #fff;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 54px;
        border: 0 !important;
        margin: 0;


    }


    .join-form-content .form-item {

        margin-bottom: 7px;
    }
    .join-form-content .form-item .form-label{
        width: 65px;
    }

    .c-message {
        left: 40%
    }
}