@charset "utf-8";
/*
	project : Xinye Official Website
	function :  for index da-slider
	author : Jason Kim
	release : 17-3,2014
*/
/*
	da-slider
*/
.da-slider { background: white; width: 100%; height: 770px; position: relative;overflow: hidden; }
.da-slide { position: absolute; width: 100%; height: 100%; top: 0; left: 0; color:#fff; letter-spacing:3px; }
.da-slide-current { z-index: 1000; }
.da-slider-fb .da-slide { left: 100%; }
.da-slider-fb .da-slide.da-slide-current { left: 0; }
.da-slide h2,.da-slide p,.da-slide .da-img { position: absolute; opacity: 0; left: 0%; }
.da-slide h2 { font-size: 4.8rem; top: 100px; left:0; width: 100%; text-align:center; }
.da-slide .text-1,.da-slide .text-2,.da-slide .text-3,.da-slide .text-4 { font-size: 2.0rem;font-weight: bolder;font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;  top: 40%; left:0;width: 100%; font-style: italic; text-indent: -25%;color: #fff; }
.main_box .text-1,.main_box .text-2,.main_box .text-3,.main_box .text-4 { font-size: 2.0rem;font-size: 50px\9;font-weight: bolder;font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif; font-style: italic; top: 40%; left:0;width: 100%; color: #fff; }
.main_box .text-3{text-indent: -25%;}
.main_box .text-4{}
.da-slide .da-img { top: 80px; left:0; text-align: center; width:100%; }
.da-dots { width: 100%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; -moz-user-select: none; -webkit-user-select: none; }
.da-dots span { display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #223a60; margin: 3px; cursor: pointer; }
.da-dots span.da-dots-current { background: #FFF; }
.da-arrows { -moz-user-select: none; -webkit-user-select: none; }
.da-arrows span { width: 46px; height: 46px; top: 50%; margin-top: -23px; position: absolute; text-indent: -9999px; cursor: pointer; z-index:1500; }
.da-arrows span.da-arrows-prev { background-position: 0 0; left: 26px; }
.da-arrows span.da-arrows-next { background-position: -56px 0; right: 26px; }
.da-arrows span.da-arrows-prev:hover { background-position: 0 -56px; }
.da-arrows span.da-arrows-next:hover { background-position: -56px -56px; }
.da-slide-current h2, .da-slide-current p, .da-slide-current .da-img { opacity: 1; }
/*
	Animation classes and animations 
*/

/*
	Slide in from the right
	================================================================================
*/
.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
	-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}

.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
/* 
	Slide in from the left
	================================================================================
*/
.da-slide-fromleft h2{
	-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
	-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-img{
	-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}

@keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
@keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 0; opacity: 1; }
}
/*
	Slide out to the right 
	================================================================================
*/
.da-slide-toright h2{
	-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
	-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in-out both;
	-moz-animation: toRightAnim4 0.6s ease-in-out both;
	-o-animation: toRightAnim4 0.6s ease-in-out both;
	-ms-animation: toRightAnim4 0.6s ease-in-out both;
	animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
/* 
	Slide out to the left
	================================================================================
*/
.da-slide-toleft h2{
	-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
	-moz-animation: toLeftAnim1 0.6s ease-in-out both;
	-o-animation: toLeftAnim1 0.6s ease-in-out both;
	-ms-animation: toLeftAnim1 0.6s ease-in-out both;
	animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
	-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
	0%{ left: 0;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}




/*test*/
.hidden {
    display: none;
}

.p_top_middle {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -66px;
    font-size: 50px;
}

.banner_box {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.banner_cot {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.content {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}

.banner_list {
    position: relative;
    height: 100%;
}

.page_box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -9999px;
}

.bg_box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
}

    .bg_box img {
        position: absolute;
        top: 50%;
        left: 50%;
    }

.page_box .content {
    width: 1000px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -500px;
    z-index: 5;
    transform-origin: center center;
    -webkit-transform-origin: center center;
}

.page_box .main_box {
    position: relative;
    height: 100%;
    left: -9999px;
    top: 15%;
}

.banner_list .show {
    left: 0;
}

    .banner_list .show .main_box {
        left: 0;
    }

/*下方导航图标*/
.product_btns {
    position: absolute;
    width: 100%;
    bottom: 5px;
    z-index: 6;
    transition: bottom .3s;
    -webkit-transition: bottom .3s;
    z-index: 10;
}

    .product_btns.show {
        bottom: 100px;
    }

    .product_btns .content {
        width: 1000px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -500px;
    }

    .product_btns .btns_box {
        margin: auto;
    }

        .product_btns .btns_box a {
            display: inline-block;
            position: relative;
            background-size: auto;
        }


/*big size*/
.big_view .product_btns .content {
    height: 82px;
}

.big_view .product_btns .btns_box {
    width: 500px;
    height: 84px;
}

    .big_view .product_btns .btns_box a {
        width: 90px;
        height: 72px;
        margin: 0 15px;
    }

/*mid size*/
.mid_view .product_btns .content {
    height: 58px;
}

.mid_view .product_btns .btns_box {
    height: 58px;
    width: 388px;
}

    .mid_view .product_btns .btns_box a {
        width: 70px;
        height: 56px;
        margin: 0 12px;
        background-size: 70px 56px;
    }
/*small size*/
.small_view .product_btns .content {
    height: 42px;
}

.small_view .product_btns .btns_box {
    height: 42px;
    width: 180px;
    position: relative;
}

    .small_view .product_btns .btns_box a {
        width: 15px;
        height: 15px;
        background: #333;
        border-radius: 50px;
        position: absolute;
    }
#one-slider{
    	left:0;top:0;
    }
#two-slider{
    	left:25%;top:0;
    }
#three-slider{
    	left:50%;top:0;
    }
#fore-slider{
    	left:75%;top:0;
    }
/*分页样式*/
/*第一页*/
.sky_xia {
    z-index: 10;
}

.sky_cot {
    position: absolute;
    bottom: 18%;
    right: 68%;
    width: 371px;
    height: 341px;
}
.two-sky{
    position: absolute;
    bottom: 4%;
    right: 68%;
    width: 371px;
    height: 341px;
}

    .sky_cot img {
        width: 100%;
        height: 100%;
    }

.show .sky_anim1 {
    animation: sky_1 1s;
    -moz-animation: sky_1 1s;
    -webkit-animation: sky_1 1s;
    -o-animation: sky_1 1s;
}

.show .sky_anim2 {
    animation: bounceInLeft 2s 0.25s linear forwards;
    -moz-animation: bounceInLeft 2s 0.25s linear forwards;
    -webkit-animation: bounceInLeft 2s 0.25s linear forwards;
    -o-animation: bounceInLeft 2s 0.25s linear forwards;
}
/*第二页*/
.page_box .content .room_cot {
    position: absolute;
    bottom: 8%;
    left: 50%;
    margin-left: -200px;
    width: 668px;
    height: 585px;
}

.room_anim img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.show .sky_anim3 {
    animation: bounceInBottom 2s 0.25s linear forwards;
    -moz-animation: bounceInBottom 2s 0.25s linear forwards;
    -webkit-animation: bounceInBottom 2s 0.25s linear forwards;
    -o-animation: bounceInBottom 2s 0.25s linear forwards;
}
/*3页*/
.page_box .snow_cot {
    position: absolute;
    z-index: 12;
    bottom: -12%;
    left: 34%;
}
.two-snow{
    position: absolute;
    z-index: 12;
    bottom: -28%;
    left: 62%;
}

.snow_cot img {
    width: 100%;
    height: 100%;
}

.show .snow_anim { /* animation   加上show 函数则当前页面显示时出现动效*/
    animation: bounceInRight 2s 0.25s linear forwards;
    -moz-animation: bounceInRight 2s 0.25s linear forwards;
    -webkit-animation: bounceInRight 2s 0.25s linear forwards;
    -o-animation: bounceInRight 2s 0.25s linear forwards;
}
/*第四页*/
.page_box .content .forest_cot {
    position: absolute;
    bottom: -42%;
    /*right: 1.04%;*/
    width: 500px;
    height: 636px;
    left: 48%;
}

.forest_cot img {
    width: 100%;
    height: 100%;
}

.show .forest_anim {
    animation: bounceInTop 2s 0.25s linear forwards;
    -moz-animation: bounceInTop 2s 0.25s linear forwards;
    -webkit-animation: bounceInTop 2s 0.25s linear forwards;
    -o-animation: bounceInTop 2s 0.25s linear forwards;
}
@keyframes bounceInLeft {
        from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
        0% {opacity: 0;transform: translate3d(-3000px, 0, 0);}
        60% {opacity: 1;transform: translate3d(25px, 0, 0);}
        75% {transform: translate3d(-10px, 0, 0);}
        90% {transform: translate3d(5px, 0, 0);}
        100% {opacity: 1;transform: none;}
    }
@keyframes bounceInRight {
        from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
        0% {opacity: 0;transform: translate3d(3000px, 0, 0);}
        60% {opacity: 1;transform: translate3d(-25px, 0, 0);}
        75% {transform: translate3d(10px, 0, 0);}
        90% {transform: translate3d(-5px, 0, 0);}
        100% {opacity: 1;transform: none;}
    }
@keyframes bounceInTop {
        from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
        0% {opacity: 0;transform: translate3d(0, -3000px, 0);}
        60% {opacity: 1;transform: translate3d(0, 10%, 0);}
        75% {transform: translate3d(0, 3%, 0);}
        90% {transform: translate3d(0, 1%, 0);}
        100% {opacity: 1;transform: none;}
    }
@keyframes bounceInBottom {
        from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
        0% {opacity: 0;transform: translate3d(0, 3000px, 0);}
        60% {opacity: 1;transform: translate3d(0, -10%, 0);}
        75% {transform: translate3d(0, -3%, 0);}
        90% {transform: translate3d(0, -1%, 0);}
        100% {opacity: 1;transform: none;}
    }
@keyframes fadeInBig{
    from{opacity: 0;transform: scale(2.5);}
        to{opacity: 1;transform: scale(1);}
}