@charset "UTF-8";

.wrapper {
    width: 100%;
    min-width: 1200px;
    max-width: 1920px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.content {
    position: relative;
    width: 100%;
    height: 967px;
    background-color: #750707;
}

.bg-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mask-in {
    -webkit-mask: url(../images/mask.png);
    -webkit-mask-size: 2500% 100%;
    -webkit-animation: maskIn 2s -.3s steps(24) forwards;
            animation: maskIn 2s -.3s steps(24) forwards;
}

@-webkit-keyframes maskIn{
    from{
        -webkit-mask-position: 0 0;
    }
    to{
        -webkit-mask-position: 100% 0;
    }
}

@keyframes maskIn{
    from{
        -webkit-mask-position: 0 0;
    }
    to{
        -webkit-mask-position: 100% 0;
    }
}

.bg-wrapper .bg-item {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-transition: opacity .6s linear;
    -o-transition: opacity .6s linear;
    transition: opacity .6s linear;
}

.bg-wrapper .active {
    opacity: 1;
}

.bg-wrapper .bg-item:first-child {
    background-image: url(../images/bg1.jpg);
}

.bg-wrapper .bg-item:last-child {
    background-image: url(../images/bg2.jpg);
}

.top-icon-wrapper {
    position: absolute;
    top: 33px;
    left: 56px;
    font-size: 0;
    z-index: 1;
}

.top-icon-wrapper .icon-item {
    display: inline-block;
    height: 92px;
    margin-left: 32px;
    background: url(../images/icon.png) no-repeat;
}

.top-icon-wrapper .icon-item:first-child {
    margin-left: 0;
}

.top-icon-wrapper .wd {
    width: 74px;
}

.top-icon-wrapper .aqy {
    margin-left: 40px;
    width: 119px;
    background-position: 0 -100px;
}

.top-icon-wrapper .nf {
    width: 72px;
    background-position: 0 -300px;
}

.top-icon-wrapper .fs {
    margin-left: 40px;
    width: 58px;
    background-position: 0 -200px;
}

.enter-official-website-btn {
    position: absolute;
    top: 57px;
    right: 138px;
    display: block;
    width: 130px;
    height: 35px;
    color: #fff1e5;
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
}

.enter-official-website-btn .border {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 35px;
    stroke: #fff1e5;
    stroke-width: 2px;
    stroke-dashoffset: -65;
    stroke-dasharray: 0 330;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.enter-official-website-btn:hover .border {
    stroke-dashoffset: 100;
    stroke-dasharray: 330 0;
}

.enter-official-website-btn .icon {
    display: inline-block;
    margin-top: -4px;
    margin-right: 15px;
    width: 15px;
    height: 16px;
    background: url(../images/icon.png) no-repeat;
    background-position: -210px -30px;
    vertical-align: middle;
}

.slogan-wrapper {
    position: absolute;
    top: 135px;
    left: 50%;
    margin-left: -623px;
    width: 1247px;
    font-size: 0;
    z-index: 2;
}

.slogan-wrapper .title {
    display: block;
    width: 100%;
    height: 242px;
    font-size: 0;
    background: url(../images/slogan.png) no-repeat;
}

.slogan-wrapper .des {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 533px;
    height: 55px;
    -webkit-transform: translate(-28px, -52px);
        -ms-transform: translate(-28px, -52px);
            transform: translate(-28px, -52px);
    background: url(../images/icon.png) no-repeat;
    background-position: 0 -400px;
}

.slogan-wrapper .des .video-btn {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-top: -38px;
    margin-left: -31px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    cursor: pointer;
}

.slogan-wrapper .des .video-btn .bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/icon.png) no-repeat;
    background-position: -80px 0;
    -webkit-animation: videoR 2s linear infinite;
            animation: videoR 2s linear infinite;
}

@-webkit-keyframes videoR{
    from{
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to{
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes videoR{
    from{
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
    to{
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

.slogan-wrapper .des .video-btn .play {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -5px;
    display: block;
    width: 1px;
    height: 1px;
    border: 11px solid transparent;
    border-left: 17px solid #e7c495;
}

.download-wrapper {
    position: absolute;
    top: 788px;
    left: 50%;
    margin-left: -276px;
    width: 319px;
    height: 139px;
    padding: 0 17px;
    font-size: 0;
    background: url(../images/download_wrapper_bg.png) no-repeat;
    z-index: 2;
}

.download-wrapper .code-wrapper {
    display: inline-block;
    margin-top: 14px;
}

.download-wrapper .code-wrapper .des {
    display: inline-block;
    font-size: 14px;
    width: 14px;
    color: #fff;
    vertical-align: middle;
    cursor: vertical-text;
}

.download-wrapper .code-wrapper .code-img {
    width: 116px;
    height: 107px;
    margin-left: 8px;
    border: 3px solid #fff;
    border-radius: 5px;
    vertical-align: middle;
}

.download-wrapper .download-btn-wrapper {
    display: inline-block;
    margin-left: 11px;
    vertical-align: middle;
}

.download-wrapper .download-btn-wrapper .download-btn {
    display: block;
    width: 164px;
    height: 50px;
    background: url(../images/icon.png) no-repeat;
}

.download-wrapper .download-btn-wrapper .ios {
    background-position: -120px -100px;
}

.download-wrapper .download-btn-wrapper .ios:hover {
    background-position: -120px -220px;
}

.download-wrapper .download-btn-wrapper .android {
    margin-top: 5px;
    background-position: -120px -160px;
}

.download-wrapper .download-btn-wrapper .android:hover {
    background-position: -120px -280px;
}

.download-wrapper .appointment-btn {
    position: absolute;
    top: -14px;
    right: -210px;
    width: 199px;
    height: 184px;
    background: url(../images/icon.png) no-repeat;
    background-position: -300px 0;
    cursor: pointer;
    -webkit-animation: apMove 1.5s infinite;
            animation: apMove 1.5s infinite;
}

.download-wrapper .appointment-btn:hover {
    background-position: -300px -190px;
}

@-webkit-keyframes apMove {
    0%, 100%{
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
    }
}

@keyframes apMove {
    0%, 100%{
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
    }
}

.ng-wrapper {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

.ng-list {
    margin: 0 auto;
    width: 1920px;
    height: 718px;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.line {
    float: left;
    width: 1px;
    height: 100%;
    background-color: #d1d1d1;
}

.ng-item {
    position: relative;
    float: left;
    height: 100%;
    width: 239px;
    font-size: 0;
    overflow: hidden;
}

.ng-item.active {
    -webkit-animation: ng-item-in .4s 1 linear forwards;
            animation: ng-item-in .4s 1 linear forwards;
}

.ng-item.out {
    -webkit-animation: ng-item-out .4s 1 linear forwards;
            animation: ng-item-out .4s 1 linear forwards;
}

@-webkit-keyframes ng-item-in {
    0%{
        width: 239px;
    }
    100%{
        width: 720px;
    }
}

@keyframes ng-item-in {
    0%{
        width: 239px;
    }
    100%{
        width: 720px;
    }
}

@-webkit-keyframes ng-item-out {
    from{
        width: 720px;
    }
    to{
        width: 239px;
    }
}

@keyframes ng-item-out {
    from{
        width: 720px;
    }
    to{
        width: 239px;
    }
}

.ng-intro {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 239px;
    height: 100%;
    font-size: 0;
    background: url(../images/ng_item_bg.jpg) no-repeat;
    cursor: pointer;
}

.item4 .ng-intro {
    cursor: default;
}

.ng-intro .num {
    position: absolute;
    top: 84px;
    left: 74px;
    display: block;
    width: 95px;
    height: 85px;
    background: url(../images/ng.png) no-repeat;
}

.ng-intro .img-wrapper {
    position: absolute;
    top: 230px;
    left: 50px;
    width: 136px;
    height: 136px;
    border: 1px solid #d5cdc4;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.ng-intro .img-wrapper .img-border {
    position: relative;
    margin: 0 auto;
    margin-top: 7px;
    width: 120px;
    height: 120px;
    border: 1px solid #c1a482;
    overflow: hidden;
}

.ng-intro .img-wrapper .img-border .img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    width: 100%;
    height: 100%;
    background: url(../images/ng.png) no-repeat;
    background-position: -200px 0;
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.ng-intro:hover .img-wrapper .img {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.ng-intro .ng-icon {
    position: absolute;
    display: block;
    top: 0;
    right: -38px;
    width: 24px;
    height: 74px;
    background: url(../images/icon.png) no-repeat;
    background-position: -240px 0;
    vertical-align: top;
}

.ng-intro .des {
    position: absolute;
    top: 430px;
    left: 74px;
    display: block;
    width: 45px;
    height: 216px;
    background: url(../images/ng.png) no-repeat;
    vertical-align: top;
}

.item2 .ng-intro {
    background-position: -240px 0;
}

.item3 .ng-intro {
    background-position: -480px 0;
}

.item4 .ng-intro {
    background-position: -720px 0;
}

.item5 .ng-intro {
    background-position: -960px 0;
}

.item6 .ng-intro {
    background-position: -1200px 0;
}

.item2 .ng-intro .num {
    background-position: 0 -90px;
}

.item3 .ng-intro .num {
    background-position: 0 -180px;
}

.item4 .ng-intro .num {
    top: 74px;
    left: 2px;
    width: 234px;
    height: 118px;
    background-position: 0 -450px;
}

.item5 .ng-intro .num {
    background-position: 0 -270px;
}

.item6 .ng-intro .num {
    background-position: 0 -360px;
}

.item1 .ng-intro .img-wrapper .img {
    background-position: -200px 0;
}

.item2 .ng-intro .img-wrapper .img {
    background-position: -330px 0;
}

.item3 .ng-intro .img-wrapper .img {
    background-position: -200px -130px;
}

.item4 .ng-intro .img-wrapper1 {
    position: absolute;
    display: block;
    top: 230px;
    left: 50px;
    width: 136px;
    height: 136px;
    border: 1px solid #d5cdc4;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.item4 .ng-intro .img-wrapper1-2 {
    top: 460px;
}

.item4 .ng-intro .img-wrapper1 .img-border {
    position: relative;
    margin: 0 auto;
    margin-top: 7px;
    width: 122px;
    height: 122px;
    border: 0;
    overflow: hidden;
}

.item4 .ng-intro .img-wrapper1 .img-border .img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -61px;
    margin-left: -61px;
    width: 100%;
    height: 100%;
    background: url(../images/ng.png) no-repeat;
    -webkit-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.item4 .ng-intro:hover .img-wrapper1 .img {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

.item4 .ng-intro .img-wrapper1:hover .img {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.item4 .ng-intro .img-wrapper1-1 .img-border .img {
    background-position: -330px -260px;
}

.item4 .ng-intro .img-wrapper1-2 .img-border .img {
    background-position: -330px -400px;
}

.item4 .ng-intro .img-wrapper1 .video-btn {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -10px;
    width: 21px;
    height: 31px;
    background: url(../images/icon.png) no-repeat;
    background-position: -210px -50px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    cursor: pointer;
}

.item5 .ng-intro .img-wrapper .img {
    background-position: -330px -130px;
}

.item6 .ng-intro .img-wrapper .img {
    background-position: -200px -260px;
}

.item1 .ng-intro .des {
    background-position: 0 -570px;
}

.item2 .ng-intro .des {
    background-position: -50px -570px;
}

.item3 .ng-intro .des {
    background-position: -100px -570px;
}

.item5 .ng-intro .des {
    background-position: -150px -570px;
}

.item6 .ng-intro .des {
    background-position: -200px -570px;
}

.ng-list .active .ng-intro {
    -webkit-transform: translateX(-239px);
        -ms-transform: translateX(-239px);
            transform: translateX(-239px);
}

.ng-list .active .ng-detail {
    -webkit-transform: translateX(-239px);
        -ms-transform: translateX(-239px);
            transform: translateX(-239px);
}

.ng-list .active .ng-intro {
    -webkit-animation: in .4s 1 linear forwards;
            animation: in .4s 1 linear forwards;
}

.ng-list .active .ng-detail {
    -webkit-animation: in .4s 1 linear forwards;
            animation: in .4s 1 linear forwards;
}

.ng-list .out .ng-intro {
    -webkit-animation: out .4s 1 linear forwards;
            animation: out .4s 1 linear forwards;
}

.ng-list .out .ng-detail {
    -webkit-animation: out .4s 1 linear forwards;
            animation: out .4s 1 linear forwards;
}

@-webkit-keyframes out{
    from{
        -webkit-transform: translateX(-239px);
                transform: translateX(-239px);
    }
    to{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes out{
    from{
        -webkit-transform: translateX(-239px);
                transform: translateX(-239px);
    }
    to{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@-webkit-keyframes in{
    from{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(-239px);
                transform: translateX(-239px);
    }
}

@keyframes in{
    from{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(-239px);
                transform: translateX(-239px);
    }
}

.ng-item .ng-detail {
    display: block;
    position: absolute;
    top: 0;
    left: 239px;
    width: 720px;
    height: 100%;
    font-size: 0;
    background: url(../images/ng_item3_active_bg.jpg);
    overflow: hidden;
}

.ng-detail .des-wrapper {
    position: relative;
    margin-top: 90px;
    padding-left: 160px;
    width: 100%;
}

.ng-detail .num {
    position: absolute;
    top: -8px;
    left: 56px;
    display: block;
    width: 87px;
    height: 65px;
    background: url(../images/ng.png) no-repeat;
}

.item1 .ng-detail .num {
    background-position: -100px 0;
}

.item2 .ng-detail .num {
    background-position: -100px -90px;
}

.item3 .ng-detail .num {
    background-position: -100px -180px;
}

.item5 .ng-detail .num {
    background-position: -100px -270px;
}

.item6 .ng-detail .num {
    background-position: -100px -360px;
}

.ng-detail .des-wrapper .ng-icon {
    position: absolute;
    top: -2px;
    right: -59px;
    display: block;
    width: 53px;
    height: 17px;
    vertical-align: top;
    background: url(../images/icon.png) no-repeat;
    background-position: -240px -80px;
}

.ng-detail .des-wrapper .des1 {
    position: relative;
    display: block;
    width: 192px;
    height: 24px;
    vertical-align: top;
    background: url(../images/ng.png) no-repeat;
}

.item1 .ng-detail .des-wrapper .des1 {
    background-position: -250px -570px;
}

.item2 .ng-detail .des-wrapper .des1 {
    width: 216px;
    background-position: -250px -610px;
}

.item3 .ng-detail .des-wrapper .des1 {
    background-position: -250px -650px;
}

.item5 .ng-detail .des-wrapper .des1 {
    width: 216px;
    background-position: -250px -690px;
}

.item6 .ng-detail .des-wrapper .des1 {
    width: 216px;
    background-position: -250px -730px;
}

.ng-detail .des-wrapper .des2 {
    display: block;
    width: 117px;
    height: 9px;
    background: url(../images/ng.png) no-repeat;
    background-position: -250px -600px;
}

.ng-detail .des-wrapper .line {
    background-color: #c5b47e;
    float: none;
    width: 100%;
    height: 1px;
    margin: 6px 0;
}

.ng-detail .img {
    position: absolute;
    top: 210px;
    left: 50px;
    width: 664px;
    height: 374px;
    border: 7px solid #fffbe8;
}

.video-modal1 .modal-wrapper,
.ng-video-modal1 .modal-wrapper,
.ng-video-modal2 .modal-wrapper {
    width: 720px;
    height: 404px;
}

.video-modal1 .modal-fix,
.ng-video-modal1 .modal-fix,
.ng-video-modal2 .modal-fix {
    margin-left: -360px;
}

.main-video {
    width: 720px;
    height: 404px;
}

.appointment-modal .modal-wrapper {
    width: 619px;
    height: 388px;
    background: url(../images/appointment_modal_bg.jpg) no-repeat;
}

.appointment-modal .modal-fix {
    margin-left: -309px;
}

.appointment-modal .modal-wrapper .download-code-img {
    position: absolute;
    display: block;
    top: 136px;
    left: 50%;
    margin-left: -78px;
    width: 138px;
    height: 138px;
    border: 8px solid #fff;
}

/*footer*/
.ti{ text-indent: -999em; }
.wrap { position: relative; width: 1000px; margin: 0 auto; }
.footer { float: left; width: 100%; min-width: 1200px; _width:expression((documentElement.clientWidth < 1000) ? "1000px" : "auto" ); padding: 20px 0 40px 0; overflow: hidden; background-color: #000; }
.f_link { display: inline; float: left; width: 270px; height: 52px; margin: 30px 0 0 12px; background: url(images/f_logo.png) no-repeat 0 0; }
.f_link a { float: left; height: 52px; }
.f_link a.jbt_link { width: 125px; }
.f_link a.ltyx_link { width: 140px; }
.f_txt { float: left; padding: 14px 0 0 10px; color: #a5a5a5; }
.f_txt p { height: 24px; font: 400 12px/2em '\5FAE\8F6F\96C5\9ED1',tahoma,sans-serif; }
.f_txt p a { color: #7b7f82; font: 400 12px/2em '\5FAE\8F6F\96C5\9ED1',tahoma,sans-serif; text-decoration: none; }
.f_txt p a:hover { color: #7b7f82; text-decoration: underline; }
.f_txt p a img{ vertical-align: middle; }
.f_txt p a:hover img{ text-decoration: none; }
.f_txt p span{ font-family: Arial; }