.banner {width:100%; text-align: center; overflow:hidden;position:relative;height:600px; background:url(../images/join_bg.jpg) no-repeat center center; margin:0 auto 0;background-size:cover;}
.banner .stage{width:1160px; }
.banner .stage h1{font-size: 60px; color:#fff;font-weight: 400;margin: 140px auto 20px;}
.banner .stage .scale{padding: 0 0 100px;}
.banner .stage .scale li{margin: 0 15px;padding:5px 10px; width: 300px; background: #ffa229; display: inline-block; font-size: 85px; color: #fff;
    border-radius: 5px;position: relative;box-shadow: 0 4px 8px rgba(0,0,0,0.5);list-style: none;}
.banner .stage .scale span{font-family: Arial, Helvetica, sans-serif;display: block;letter-spacing: -3px; font-weight: bold;
    text-shadow: 0 4px 8px rgba(0,0,0,0.25);}
.banner .stage .scale i{width: 100%; height: 3px; background: #f99d25;position:absolute;left:0; top: 50px;}
.banner .stage .scale b{position:absolute;width: 100%; height: 20px; font-weight: 400; font-size: 26px; bottom: -25px; left: 0;}
.banner .stage a{color:#fff;border:1px #fff solid;font-size:26px;border-radius:3px;padding: 8px 25px;display:inline-block;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.banner .stage a:hover{background:#fff;color:#ff5300;box-shadow: 0 4px 8px rgba(0,0,0,0.5);}

.brand{padding: 120px 0 80px 0;}
.brand h1{font-size: 36px;font-weight: 400; text-align: center;}
.brand h2{font-size: 21px; font-weight: 400; text-align: center; color: #9f9f9f; padding: 10px 0; overflow:hidden; }
.brand article{line-height: 24px;}
.brand article p{text-indent: 32px;padding: 5px 0;}
.brand article p b{text-decoration: underline;font-size: 18px;}
.brand ul{width:1163px;display: inline-block;padding: 50px 0;}
.brand ul li{float:left;border-radius: 5px;list-style-type: none;position:relative;margin:0 30px 0 0; cursor: default;box-shadow: 0 4px 30px #e0e0e0;
    display:inline-block;width:367px;height:400px;background:#fff;color:#333333;}
.brand ul li .cover{width:367px;height:247px;display:block;overflow:hidden;position:relative;}
.brand ul li .detail{/*border-top: 1px #e3e3e3 solid;*/border-bottom-left-radius: 5px;border-bottom-right-radius: 5px; width:367px;padding: 10px 0;height: 154px; display:block;overflow:hidden;position:relative;}
.brand ul li img{width:100%;height:100%;top:0;left:0;position:absolute;-webkit-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}
.brand ul li h2{padding: 8px 15px;font-size:21px;font-weight: 400;color:#ff5300;}
.brand ul li p{padding: 15px 15px;font-size:16px;color:#666;}
/*.brand ul li:hover{color:#ff5300;}
.brand ul li:hover .cover img{-ms-transform:scale(1.1);transform:scale(1.1);transition:0.2s;}*/
.brand ul li:nth-child(3n){margin-right:0;}


.support {width:100%; min-width: 1160px; overflow: hidden; height:625px; padding-top: 60px; background:url(../images/support.png) #dcdedd no-repeat center bottom;margin:0 auto;}
.support h1{font-size: 36px;font-weight: 400; text-align: center;}
.support h2{font-size: 21px; font-weight: 400; text-align: center;color: #333;  padding: 10px 0; overflow:hidden; }

.step_bg, .arrow{background: url(../images/step.png);}
.guide{padding: 120px 0 120px 0;}
.guide h1{font-size: 36px;font-weight: 400; text-align: center;}
.guide h2{font-size: 21px; font-weight: 400; text-align: center; color: #9f9f9f; padding: 10px 0; overflow:hidden; }
.guide h3{font-size: 26px;font-weight: 400; text-align: center; }
.guide ul{ height: 160px; padding-bottom: 120px; margin-top: 80px;}
.guide ul li{ width: 208px; height:260px; float: left; margin-right: 30px; position: relative;}
.guide ul li:last-child {margin-right: 0;}

.guide ul li .tab{width: 208px; height:150px; margin-top: 60px; background: #fff; position: relative; display: block;}
.guide ul li .tab .img{ width: 208px; height: 80px; display: block;}
.guide ul li .tab .img img{ width: 208px; height: 80px;}
.guide ul li .tab .detail{text-align:center;border: 1px #e3e3e3 solid;border-top-width: 0; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;box-shadow: 0 4px 30px #e0e0e0;
    height: 56px; padding: 10px 10px; display: block; line-height: 24px; font-size: 14px; color: #666;}
.guide ul li .tab .detail b{font-size: 21px; font-weight: 400; color:#333;}

.guide ul li:hover .detail{box-shadow: 0 4px 30px #e0e0e0;}
/*.guide ul li:hover .tab_01{display: none;}*/
/*.guide ul li:hover .tab_02{display: block;}*/

.guide ul li .arrow{ width: 130px; height: 27px; background-position:-555px -35px; position: absolute; top:0; left: 160px; }
.guide ul li .step_bg{ width: 100px; height: 110px; position:absolute;  display: block; z-index: 10; left: 56px; top:-60px;}
.guide ul li:nth-child(1) .step_bg { background-position: -4px -4px;}
.guide ul li:nth-child(2) .step_bg { background-position: -105px -4px;}
.guide ul li:nth-child(3) .step_bg { background-position: -215px -4px;}
.guide ul li:nth-child(4) .step_bg { background-position: -322px -4px;}
.guide ul li:nth-child(5) .step_bg { background-position: -430px -4px;}

.contact {width:100%; min-width: 1160px; height:300px;
    background:url(../images/contact1.png) no-repeat center center;}
.contact h1{font-size: 36px; color:#fff;font-weight: 100; padding-top:60px; text-align: right; font-family:Consolas, Arial, sans-serif;}
.contact .more{text-align:right;width:100%;display:inline-block;margin-top:30px;}
.contact .more a{color:#fff;font-weight:100;
    background: #ff5300;font-size:36px;border-radius:3px;padding: 15px 25px;font-family:Consolas, Arial, sans-serif;
    display:inline-block;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.contact .more a:hover{background:#ff5300;color:#fff;}


@-webkit-keyframes ball-scale-multiple-dot {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    5% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@-moz-keyframes ball-scale-multiple-dot {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    5% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        -moz-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

@keyframes ball-scale-multiple-dot {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    5% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(3);
        -moz-transform: scale(3);
        transform: scale(3);
        opacity: 0
    }
}

.pro-pay-dot .pro-pay-dot-animation:nth-child(2), .tumax-video-play .play-animation:nth-child(2), .tutorial-video-play .play-animation:nth-child(2) {
    -webkit-animation-delay: -1.4s;
    -moz-animation-delay: -1.4s;
    animation-delay: -1.4s
}

.pro-pay-dot .pro-pay-dot-animation:nth-child(3), .tumax-video-play .play-animation:nth-child(3), .tutorial-video-play .play-animation:nth-child(3) {
    -webkit-animation-delay: -.7s;
    -moz-animation-delay: -.7s;
    animation-delay: -.7s
}

.tutorial-video-play .play-animation {
    background-color: #000;
    width: 45px;
    height: 44px
}

.pro-pay-dot .pro-pay-dot-animation, .tumax-video-play .play-animation, .tutorial-video-play .play-animation {
    display: block;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    opacity: 0
}

.tumax-video-play .play-animation, .tutorial-video-play .play-animation {
    -webkit-animation: ball-scale-multiple 3s 0s linear infinite;
    -moz-animation: ball-scale-multiple 3s 0s linear infinite;
    animation: ball-scale-multiple 3s 0s linear infinite
}

.pro-pay {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background-color: #ff5300
}

.pro-pay-header {
    position: absolute;
    left: 50%;
    top: 52px;
    z-index: 2;
    width: 394px;
    margin-left: -197px;
    text-align: center;
    color: #fff
}

.pro-pay-header .pro-pay-title {
    font-size: 32px;
    font-weight: 400
}

.pro-pay-header .pro-pay-description {
    font-size: 18px;
    margin-top: 8px
}

.pro-pay-container, .pro-pay-img {
    top: 50%;
    margin-top: -57px;
    margin-left: -960px;
    width: 1920px;
    height: 600px
}

.pro-pay-img {
    position: absolute;
    left: 50%;
    z-index: 1
}

.pro-pay-btn, .pro-pay-container {
    position: absolute;
    left: 50%;
    z-index: 2
}

.pro-pay-dot {
    position: absolute;
    width: 12px; /**/
    height: 12px; /**/
}

.pro-pay-dot.dot-1 {
    top: 278px;
    left: 828px
}

.pro-pay-dot.dot-2 {
    top: 309px;
    left: 783px
}

.pro-pay-dot.dot-3 {
    top: 378px;
    left: 778px
}

.pro-pay-dot.dot-4 {
    top: 422px;
    left: 845px
}

.pro-pay-dot.dot-5 {
    top: 278px;
    right: 830px
}

.pro-pay-dot.dot-6 {
    top: 309px;
    right: 784px
}

.pro-pay-dot.dot-7 {
    top: 378px;
    right: 780px
}

.pro-pay-dot.dot-8 {
    top: 421px;
    right: 849px
}

.pro-pay-dot .pro-pay-dot-animation {
    -webkit-animation: ball-scale-multiple-dot 3s 0s linear infinite;
    -moz-animation: ball-scale-multiple-dot 3s 0s linear infinite;
    animation: ball-scale-multiple-dot 3s 0s linear infinite;
    background-color: #ff5300;
    width: 12px; /**/
    height: 12px; /**/
}

.pro-pay-dot.dot-9 {
    top: 412px;
    left: 947px
}
.pro-pay-dot.dot-9 .pro-pay-dot-animation {
    background-color: rgba(255, 255, 255, .75); /*rgba(255, 83, 0, .5)*/
    width: 24px; /**/
    height: 24px; /**/
}