*{margin: 0;padding: 0;}
html,body{background: #fff;max-width: 1920px;min-width:1200px;margin: 0 auto;}
::-webkit-scrollbar{
    width:0px;
    height:8px;
}
::-webkit-scrollbar-track{
    background: rgb(0, 0, 0);
    border-radius:2px;
}
::-webkit-scrollbar-thumb{
    background: #ececec;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
    background: #ececec;
}
.silder-1{
    width: 100%;
    height: 1060px;
    background: url('../image/banner.jpg') no-repeat;
    background-size: cover;
    background-position:center;
    overflow: hidden;
}
.logo{
    display: block;
    width: 187px;
    height: 95px;
    margin-top: 22px;
    margin-left: 75px;
}

.btnBox{
    width: 639px;
    height: 176px;
    background: url('../image/btnBox-bg.png') no-repeat;
    background-size: 100% 100%;
    margin: 526px auto 0;
}
.wx_code{
    float: left;
    width: 128px;
    height: 128px;
    margin-top: 24px;
    margin-left: 94px;
}
.btnBox_btnList{
    float: left;
    width: 202px;
    height: 122px;
    margin-left: 25px;
    margin-top: 24px;
    cursor: pointer;
}
.videoBtn{
    float: left;
    width: 106px;
    height: 122px;
    margin-top: 28px;
    margin-left: 6px;
    cursor: pointer;
}
/* silder-3 */
.silder-3{
    position: relative;
    width: 100%;
    height: 1424px;
    background: url('../image/silder3-banner.jpg') no-repeat;
    background-size: cover;
    background-position:center;
    overflow: hidden;
}
.silder-3-title{
    width: 455px;
    height: 91px;
    background: url('../image/silder3-title.png') no-repeat;
    margin: 0px auto 0;
    background-size: 100% 100%;
}
.about-b{
    position: relative;
    width: 1412px;
    height: 1186px;
    margin: 61px auto 0;
}
.about-hero{
    position: relative;
    float: left;
    width: 286px;
    height: 1023px;
    z-index: 2;
}
.hero-name{
    position: relative;
    width: 281px;
    height: 132px;
    margin-top: 329px;
}
.hero-name .hero-name-l{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.hero-soul{
    width: 292px;
    height: 54px;
    margin-top: 20px;
    text-align: center;
    overflow: hidden;
}
.hero-soul img{
    display: block;
    width: 292px;
    height: 54px;
}
.hero-btnlist{
    width: 100%;
    height: 51px;
    margin-top: 21px;
}
.hero-btnlist div{
    float: left;
    height: 51px;
    margin-left: 7px;
    cursor: pointer;
}
.dub-btn{
    position: absolute;
    bottom: 0px;
    right: -14px;
    width: 59px;
    height: 58px;
    background: url('../image/dub.png') no-repeat;
    background-size: 100% 100%;
}
.dub-btn:hover{
    background: url('../image/dub-1.png') no-repeat;
    background-size: 100% 100%;
}
.hero-storyBtn{
    position: absolute;
    top: 341px;
    left: 449px;
    width: 91px;
    height: 90px;
    background: url('../image/introduce.png')  no-repeat;
    background-size: 100% 100%;
}
.hero-storyBtn:hover{
    background: url('../image/introduce-1.png')  no-repeat;
    background-size: 100% 100%;
}
.hero-btnlist div:first-child{
    margin: 0;
}
.hero-briefing{
    width: 286px;
    height: 14px;
    background: url('../image/css_sprites.png')  -2606px -1339px;
    margin-top: 24px;
}
.hero-story{
    width: 272px;
    font-size: 17px;
    font-weight: 500;
    color: #AEA194;
    line-height: 31px;
}
.about-user{
    position: absolute;
    width: 1284px;
    height: 1186px;
    top: 0;
    left: 17px;
}
.about-user img{
    width: 100%;
}
.silder3-heros{
    position: relative;
    float: right;
    width: 263px;
    height: 707px;
    margin-top: 148px;
}
.silder3-heros img{
    position: absolute;
}
.heros-up{
    position: absolute;
    width: 84px;
    height: 88px;
    background: url('../image/heros-up.png') no-repeat;
    background-size: 100% 100%;
    top: -10px;
    left: 9px;
    cursor: pointer;
}
.heros-up:hover{
    background: url('../image/heros-up-g.png') no-repeat;
    background-size: 100% 100%;
}
.hero-item{
    width: 80px;
    height: 81px;
    cursor: pointer;   
}

.heros-box img:nth-child(1){
    top: 63px;
    left: 59px;
}
.heros-box img:nth-child(2){
    top: 168px;
    left: 122px;
}
.heros-box img:nth-child(3){
    top: 286px;
    right: 0px
}
.heros-box img:nth-child(4){
    top:437px;
    left: 161px;
}
.heros-box img:nth-child(5){
    top:555px;
    left: 130px;
}
.heros-box img:nth-child(6){
    display: none;
}
.heros-down{
    position: absolute;
    width: 86px;
    height: 95px;
    background: url('../image/heros-down.png') no-repeat;
    background-size: 100% 100%;
    top: 636px;
    left: 94px;
    cursor: pointer;
}
.heros-down:hover{
    background: url('../image/heros-down-g.png') no-repeat;
    background-size: 100% 100%;
}
.hero-item-active{
    width: 114px;
    height: 115px;
}
/* silder-4 */
.silder-4{
    position: relative;
    width: 100%;
    height: 1088px;
    background: url('../image/silder4-banner.jpg') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.silder4-title{
    width: 515px;
    height: 91px;
    background: url('../image/silder4-title.png') no-repeat;
    margin: 40px auto 0;
    background-size: 100% 100%;
}
.mySwiper{
    width: 1412px;
    height: 671px;
    margin: 100px auto 0;
    overflow: hidden;
}
.swiper-slide{
    width: 1101px !important;
    height: 619px !important;
}
.swiper-slide img{
    width: 100%;
}
.swiper-pagination{
    bottom: 0 !important;
}
.swiper-slide-active{
    border-radius: 8px !important;
    overflow: hidden;
}
.swiper-button-prev{
    width: 83px !important;
    height: 64px !important;
    background-image:url('../image/swiper-left.png') !important;
    background-size:100% 100% !important; 
    left: 29px !important;
}
.swiper-button-next{
    width: 83px !important;
    height: 64px !important;
    background-image:url('../image/swiper-right.png') !important;
    background-size:100% 100% !important; 
    right: 29px !important;
}
.swiper-pagination-bullet{
    width: 21px !important;
    height: 21px !important;
    background:url('../image/swiper-bullet-active.png') !important;
    background-size: 100% 100% !important;
    opacity: 1 !important;
    margin: 0 25px !important;
}
.swiper-pagination-bullet-active{
    width: 21px !important;
    height: 21px !important;
    background:url('../image/swiper-bullet.png') !important;
    background-size: 100% 100% !important;
}
.swiper-slide-prev .swiper-slide-shadow-left{
    opacity: 0.7 !important;
    background-image: linear-gradient(to left,rgba(0,0,0,1),rgba(0,0,0,1)) !important;
}
.swiper-slide-next .swiper-slide-shadow-left{
    opacity: 0.7 !important;
    background-image: linear-gradient(to left,rgba(0,0,0,1),rgba(0,0,0,1)) !important;
}
.media-list{
    position: fixed;
    top: 88px;
    right: 0;
    width: 176px;
    height: 396px;
    background: url('../image/media-bg.png') no-repeat;
    background-size: 100% 100%;
}
.media-list img{
    width: 58px;
    height: 53px;
    margin-top: 36px;
    margin-left: 62px;
}
.footer-tips{
    text-align: center;
    font-size: 16px;
    color: #FFFFFF;
    margin-top:97px;
}
.footer-tips a{
    color: #fff;
}
.footer-tips:last-child{
    margin-top: 6px;
}
.Instagram{
    width: 78px;
    height: 55px !important;
    margin-bottom: 10px !important;
}
/* 弹窗 */
.dialog{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(0, 0, 0, 0.85);
    z-index: 10;
}
.registration{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 862px;
    height: 469px;
    background: url('../image/css_sprites.png') -10px -2119px;
}
.registration-content{
    width: 561px;
    height: 416px;
    margin: 53px auto 0;
    overflow: hidden;
}
.close{
    position: absolute;
    right: -54px;
    top: 54px;
    width: 46px;
    height: 46px;
    background: url('../image/css_sprites.png') -2838px -1042px;
    cursor: pointer;
}
.device{
    font-size: 24px;
    line-height: 24px;
    color: #5F5B58;
    margin-top: 25px;
}
.re-l{
    width: 561px;
    height: 149px;
    margin: 15px auto 0;
}
.re-type{
    width: 100%;
    height: 67px;
    font-size: 24px;
}
.re-type span{
    display: block;
    float: left;
    width: 269px;
    height: 65px;
    border: 1px solid #D0C3C4;
    margin-left: 18px;
    text-align: center;
    line-height: 65px;
    color: #5F5B58;
    border-radius: 8px;
    background:#F3EDE6;
    cursor: pointer;
}
.re-type span:first-child{
    margin-left: 0;
}
.re-type .channelType{
    background:#ffd08f;
}
.re-input{
    width: 100%;
    height: 64px;
    font-size: 24px;
    margin-top: 14px;
}
.re-input input{
    display: block;
    width: 559px;
    height: 64px;
    border: none;
    outline: none;
    text-align: center;
    font-size: 24px;
    color: #5F5B58;
    background:#F3EDE6;
    border: 1px solid #D0C3C4;
    border-radius: 8px;
}
.re-ag{
    width: 561px;
    height: 60px;
    margin-top: 16px;
}
.re-ag-radiao{
    float: left;
    width: 18px;
    height: 18px;
    background: url('../image/css_sprites.png') -2793px -1002px;
    margin-top: 5px;
    cursor: pointer;
}
.re-ag-check{
    display: block;
    margin: 2px auto 0;
}
.re-ag-tips{
    display: block;
    float: left;
    width: 526px;
    margin-left: 15px;
    color: #5F5B58;
    font-size: 20px;
    line-height: 30px;
}
.re-ag-tips a{
    color: #5F5B58;
}
.re-btn{
    width: 262px;
    height: 72px;
    background: url('../image/css_sprites.png') -2258px -1427px;
    margin: 17px auto 0;
    cursor: pointer;
}
.success{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 799px;
    height: 352px;
    background: url('../image/css_sprites.png') -892px -2119px;
}
.success-tips{
    width: 560px;
    height: 30px;
    margin: 110px auto 0;
    font-size: 30px;
    color: #5F5B58;
    line-height: 30px;
    text-align: center;
}
.success-tips-t{
    margin-top: 20px;
}
.success-btn{
    width: 262px;
    height: 72px;
    background: url('../image/css_sprites.png') -2258px -1427px;
    margin: 45px auto 0;
    cursor: pointer;
}
.story{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1104px;
    height: 683px;
}
.story1{
    background: url('../image/css_sprites.png') -10px -10px;
}
.story2{
    background: url('../image/css_sprites.png') -1134px -10px;
}
.story3{
    background: url('../image/css_sprites.png') -10px -713px;
}
.story3 .story-content{
    height: 223px;
    overflow-y: auto;
}
.story4{
    background: url('../image/css_sprites.png') -1134px -713px;
}
.story5{
    background: url('../image/css_sprites.png') -10px -1416px;
}
.story5 .story-content{
    height: 263px;
    overflow-y: auto;
}
.story6{
    background: url('../image/css_sprites.png') -1134px -1416px;
}
.story-close{
    position: absolute;
    right: -54px;
    top: 244px;
    width: 46px;
    height: 46px;
    background: url('../image/css_sprites.png') -2838px -1042px;
    cursor: pointer;
}
.story-content{
    width: 879px;
    height: 339px;
    font-size: 17px;
    font-weight: 400;
    color: #5F5B58;
    line-height: 32px;
    margin-top: 280px;
    overflow-y: auto;
    margin-left:156px;
}
.myvideoBox{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1200px;
    height: 750px;
}
/* .myvideoBox video{
    width: 100%;
} */
.myvideoBox .close{
    top: 0;
}
.error{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 798px;
    height: 305px;
    background: url('../image/css_sprites.png') -1711px -2119px;
}
.error p{
    width: 600px;
    margin: 100px auto 0;
    font-size: 30px;
    color: #5F5B58;
    text-align: center;
}
.error-close{
    position: absolute;
    right: -54px;
    top: 0;
    width: 46px;
    height: 46px;
    background: url('../image/css_sprites.png') -2838px -1042px;
    cursor: pointer;
}
.unsubscribe-success{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 798px;
    height: 305px;
    background: url('../image/css_sprites.png') -1711px -2119px;
}
.unsubscribe-success p{
    width: 600px;
    margin: 100px auto 0;
    font-size: 30px;
    color: #5F5B58;
    text-align: center;
}
.unsubscribe-success .close{
    top: 0;
    cursor: pointer;
}
.unsubscribe{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 798px;
    height: 305px;
    background: url('../image/css_sprites.png') -1711px -2119px;
}
.unsubscribe .close{
    top: 0;
}
.unsubscribe-tips{
    font-size: 28px;
    text-align: center;
    color: #5F5B58;
    margin-top: 20px;
}
.unsubscribe-content{
    width: 90%;
    font-size: 18px;
    margin: 10px auto 0;
    line-height: 1.5;
    text-align: center;
}
.unsubscribe-btnList{
    width: 400px;
    margin: 20px auto;
    overflow: hidden;
    font-size: 16px;
}
.unsubscribe-btnList span{
    display: block;
    float:left;
    width: 100px;
    height: 45px;
    background:#f6c361;
    color: #fff;
    margin-left: 60px;
    text-align: center;
    line-height: 45px;
    border-radius: 8px;
    cursor: pointer;
}
.unsubscribe-btnList span:first-child{
    background:#696969
}