html{overflow-x: hidden; overflow-y: auto;}

body{font-family: Arial, Microsoft Yahei;}

body .navibar{position: absolute; left: 0; top: 0; width: 100%;}

.banner, .banner .inner{ position: relative; }

.inner{width: 1120px; margin: 0 auto; position: relative;}
.banner .inner{ width: 100%; position: relative;}
.new-banner{ width: 100%;}
.new-inner{ width: 1120px; position: absolute; left: 50%;margin-left: -560px;top: 0;}
.banner .xdl-logo{padding-top: 59px;}

.banner .tit1{position: absolute; z-index: 10; left: -6px; top: 316px;}

.banner .tit2{position: absolute; z-index: 10; left: 26px; top: 453px;}

.pa{position: absolute; z-index: 10;}

.area textarea{display: none;}

.area1, .area1 .inner{background: url(../images/part1-bg.png) no-repeat center top; height: 928px; }

.area1 .tit{left: 334px; top: 184px;}

.area1 .video{left: 0; top: 258px; width: 1120px; height: 620px; overflow: hidden;}

.area1 .video .r1, .area1 .video .r3{width: 3px; height: 600px; background: #fff; left: 10px; top: 10px;}

.area1 .video .r2, .area1 .video .r4{width: 1100px; height: 3px; background: #fff; top: 10px; left: 10px;}

.area1 .video .r3{right: 10px; left: auto}

.area1 .video .r4{bottom: 10px; top: auto;}

.thumb img{-webkit-transition: all ease .5s;transition: all ease .5s; cursor: pointer;}

.thumb img:hover{-webkit-transform: scale(1.1);transform: scale(1.1);}

.video-con{width: 980px; height: 550px; left: 50%; margin-left: -490px; top: 30px; display: none; z-index: 12;}

.area3 .video-con{top: 293px;}

.area2, .area2 .inner{background: url(../images/part2-bg.png) no-repeat center top; height: 1202px;}

.area2 .tit{left: 331px; top: 179px;}

.area2 .left{ left: -150px; top: 252px;}

.area2 .left img{max-height: 900px;}

.area2 .left-pic{display: none;}

/*.area2 .left-pic{top: 252px; left: -330px;}*/



.area2 .right{top: 302px; left: 405px; background: #fff; width: 854px; height: 733px;}

.area2 .right .tip1{left: 170px; top: 57px;}

.area2 .right .tip2{left: 640px; top: 614px;}

.area2 .right .pics{height: 733px; overflow: hidden;}

.area2 .right .pics li{width: 854px; height: 733px;}

.area2 .right .pics .desc{float: left; padding-left: 26px; width: 238px; margin-top: 174px; margin-right: 26px;}

.area2 .right .pics .look{font-size: 66px; color: #fabfba; line-height: 80px; margin-bottom: 21px; text-align: center;}

.area2 .pics .hd{background: url(../images/part2-info-bg.png) no-repeat center bottom; width: 238px; text-align: center; font-size: 22px; color: #484e63; line-height: 26px; margin-bottom: 12px;}

.area2 .pics .bd{padding-left: 10px;}

.area2 .pics .text{font-size: 14px; color: #484e63; line-height: 24px; margin-bottom: 15px;}

.area2 .pics .res{min-width: 160px; border-top: 1px solid #484e63; font-size: 14px; line-height: 22px; padding-top: 6px; margin-bottom: 5px; display: inline-block; *display: inline; *zoom:1; color: #484e63;}

.area2 .pics .res p{white-space: nowrap;}

.area2 .pics .icon-arrow{

	height:0;

    width:0;

    overflow: hidden;

    font-size: 0;

    line-height: 0;

    border-color:transparent transparent #484e63 transparent;

    border-style: dashed dashed solid dashed;

    border-width:8px;

    display: block;

}

.area2 .pics .pic{float:left; height: 705px; position: relative;}

.area2 .pics .pic img{ border: 8px solid #484e63; position: absolute; left: 0; bottom: 0; max-height: 689px; width: auto;}

.area2 .pics .more-link{background: url(../images/more-link.png) no-repeat; width: 124px; height: 20px; display: block; margin-top: 20px;}

.area2 .prev-btn, .area2 .next-btn{width: 60px; height: 60px; background: #fabfba url(../images/page-btn.png) no-repeat 15px 22px; left: 210px; bottom: 110px;}

.area2 .next-btn{background-position: 15px -58px; bottom: 31px;}



.area3{background: url(../images/part3-bg01.jpg) no-repeat center top; height: 933px;}
.area3 .inner{ height: 933px;}

@media screen and (min-width: 1600px) and (max-width: 1920px) { 
	.area3{background: url(../images/part3-bg02.jpg) no-repeat center top; height: 933px;}
}
@media screen and (min-width: 1440px) and (max-width: 1600px) { 
	.area3{background: url(../images/part3-bg.jpg) no-repeat center top; height: 933px;}
}


.area3 .tit{left: 331px; top: 162px;}

.area3 .video{width: 1120px; height: 620px; left: 0; top: 263px;}

.area3 .video .border{left: 0; top: 0;}

.area3 .video .thumb{background: url(../images/part3-play.png) no-repeat center center; width: 1120px; height: 620px; -webkit-transition: all ease .5s; transition: all ease .5s; left: 0; top: 0; cursor: pointer;}

.area3 .preview{top: 167px; right: -1px; z-index: 11;}

.area3 .video .thumb:hover{-webkit-transform: scale(1.1);transform: scale(1.1);}

/*area4*/

.area4, .area4 .inner{background: url(../images/part4-bg.jpg) no-repeat center top; height: 750px;}

.area4 .video{height: 620px; left: 0; top: 50px; width: 100%; width: 1120px; overflow: hidden;}

.area4 .video .border{left: 10px; top: 10px;}

.area4 .video .tit{left: 28px; top: 166px;}

.area4 .video .tit2{left: 715px; top: 150px;}

.area4 .video .play{width: 100%; height: 100%; left: 0; top: 0; cursor: pointer;}

.area4 .video:hover .thumb img{-webkit-transform: scale(1.1);transform: scale(1.1);}



/*team*/

.team{height: 58px; background: #fabfba; text-align: center;}

.team .inner{font-size: 0; *word-spacing: -1px;}

.team .tit{padding-top: 17px;}

.team .tit, .team .bd{display: inline-block; *display: inline; *zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; }

.team .bd{color: #484e63; font-size: 13px; line-height: 58px;}

.team .bd a{margin:0 16px; color: #333; text-decoration: none;}
.team .bd a:hover{ color: #333;}

.mejs__container{width: 980px; height: 550px;}

/*animate*/

.show{opacity:0;-webkit-transition:all .5s;transition:all .5s}



.rotateIn{opacity: 0;}

.flash{opacity: 0;}

.in-out{

    -webkit-transition:;

    transition:;

    -webkit-transform:scale(0);transform:scale(0);opacity:0;-webkit-transition:all .7s;transition:all .7s}

.top-bottom{-webkit-transform:translate(0,-30%);transform:translate(0,-30%);opacity:0;-webkit-transition:all .5s linear;transition:all .5s linear}

.bottom-top{-webkit-transform:translate(0,30%);transform:translate(0,30%);opacity:0;-webkit-transition:all .5s linear;transition:all .5s linear}

.right-left{-webkit-transform:translate(30%,0);transform:translate(30%,0);opacity:0;-webkit-transition:all .5s linear;transition:all .5s linear}

.left-right{-webkit-transform:translate(-30%,0);transform:translate(-30%,0);opacity:0;-webkit-transition:all .5s linear;transition:all .5s linear}

.play .bottom-top,.play .top-bottom,.play .left-right,.play .right-left{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}

.play .show{opacity:1}

.play .in-out{-webkit-transform:scale(1);transform:scale(1);opacity:1}

.play .flash{-webkit-animation: flash .5s ease both;animation: flash .5s ease both;}

.play .rotateIn{opacity: 1; -webkit-animation: rotateIn .5s ease both; animation: rotateIn .5s ease both;}

@-webkit-keyframes flash {

    0%,50%,to {

        opacity: 1

    }



    25%,75% {

        opacity: 0

    }

}

@keyframes flash {

    0%,50%,to {

        opacity: 1

    }



    25%,75% {

        opacity: 0

    }

}



@-webkit-keyframes rotate{

    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

    50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}

    100%{-webkit-transform:rotate(720deg);transform:rotate(720deg)}

}





@keyframes rotate{

    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

    50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}

    100%{-webkit-transform:rotate(720deg);transform:rotate(720deg)}

}

@-webkit-keyframes rotate{

    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

    50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}

    100%{-webkit-transform:rotate(720deg);transform:rotate(720deg)}

}





@keyframes rotate{

    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}

    50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}

    100%{-webkit-transform:rotate(720deg);transform:rotate(720deg)}

}



@-webkit-keyframes rotateIn {

    0% {

        -webkit-transform-origin: center;

                transform-origin: center;

        -webkit-transform: rotate(-200deg);

                transform: rotate(-200deg);

        opacity: 0

    }



    to {

        -webkit-transform-origin: center;

                transform-origin: center;

        -webkit-transform: none;

                transform: none;

        opacity: 1

    }

}

@keyframes rotateIn {

    0% {

        -webkit-transform-origin: center;

                transform-origin: center;

        -webkit-transform: rotate(-200deg);

                transform: rotate(-200deg);

        opacity: 0

    }



    to {

        -webkit-transform-origin: center;

                transform-origin: center;

        -webkit-transform: none;

                transform: none;

        opacity: 1

    }

}

.ani{opacity: 0;}



.delay02{-webkit-transition-delay:.2s;transition-delay:.2s}

.delay03{-webkit-transition-delay:.3s;transition-delay:.3s;}

.delay04{-webkit-transition-delay:.4s;transition-delay:.4s}

.delay05{-webkit-transition-delay:.5s;transition-delay:.5s; }

.delay06{-webkit-transition-delay:.6s;transition-delay:.6s}

.delay07{-webkit-transition-delay:.7s;transition-delay:.7s}

.delay08{-webkit-transition-delay:.8s;transition-delay:.8s}

.delay09{-webkit-transition-delay:.9s;transition-delay:.9s}

.delay10{-webkit-transition-delay:1s;transition-delay:1s}

.delay11{-webkit-transition-delay:1.1s;transition-delay:1.1s}

.delay12{-webkit-transition-delay:1.2s;transition-delay:1.2s}

.delay16{-webkit-transition-delay:1.6s;transition-delay:1.6s}

.delay20{-webkit-transition-delay:2s;transition-delay:2s}



.delay_01{

    -webkit-animation-delay: 0.1s !important;

            animation-delay: 0.1s !important;

}

.delay_02{

    -webkit-animation-delay: 0.2s !important;

            animation-delay: 0.2s !important;

}

.delay_03{

    -webkit-animation-delay: 0.3s !important;

            animation-delay: 0.3s !important;

}

.delay_04{

    -webkit-animation-delay: 0.4s !important;

            animation-delay: 0.4s !important;

}

.delay_06{

    -webkit-animation-delay: 0.6s !important;

            animation-delay: 0.6s !important;

}

.delay_08{

    -webkit-animation-delay: 0.8s !important;

            animation-delay: 0.8s !important;

}

.delay_09{

    -webkit-animation-delay: 0.9s !important;

            animation-delay: 0.9s !important;

}

.delay_10{

    -webkit-animation-delay: 1s !important;

            animation-delay: 1s !important;

}

.delay_12{

    -webkit-animation-delay: 1.2s !important;

            animation-delay: 1.2s !important;

}

.delay_16{

    -webkit-animation-delay: 1.6s !important;

            animation-delay: 1.6s !important;

}

.delay_20{

    -webkit-animation-delay: 2s !important;

            animation-delay: 2s !important;

}


#focus{ width:1120px; height:620px; overflow:hidden; position:relative;}
#focus ul{ height:620px;position:absolute;}
#focus ul li{float:left;width:1120px;height:620px;overflow:hidden;}
#focus ul li img{ width:1120px; height:620px;}
#focus .preNext{width:26px;height:40px;position:absolute; bottom:20px;background:url(../images/aw.png) no-repeat 0 0;cursor:pointer;z-index:99;}
#focus .pre{left:20px; z-index:9999;}
#focus .next{left:46px;background-position:right top;}

#focus1{ width:1120px; height:620px; overflow:hidden; position:relative; z-index: 11;}
#focus1 ul{ height:620px;position:absolute;}
#focus1 ul li{float:left;width:1120px;height:620px;overflow:hidden;}
#focus1 ul li img{ width:1120px; height:620px;}
#focus1 .preNext{width:26px;height:40px;position:absolute; bottom:20px;background:url(../images/aw.png) no-repeat 0 0;cursor:pointer;z-index:99999;}
#focus1 .pre{left:20px; z-index:9999;}
#focus1 .next{left:46px;background-position:right top;}