﻿/**
 +------------------------------------------------------------------------------
 * 大卫地板-适应动画
 +------------------------------------------------------------------------------
 * @江苏视宇文化传媒有限公司
 * @全国客服热线：400-666-5906
 +------------------------------------------------------------------------------
 */

/* 动画 */

    /* 公用 */
    .header{
        -webkit-animation: fadeInRight 1s both;
        animation: fadeInRight 1s both;
        -ms-animation: fadeInRight 1s both;
    }
    .footer{
        -webkit-animation: fadeInLeft 1s both;
        animation: fadeInLeft 1s both;
        -ms-animation: fadeInLeft 1s both;
    }

    /* 首页 */
    .i-layout-1 .scrollBox .pageBtn .list li.on{transition:all .2s ease-in 0s;}
    .i-layout-3 .list ul li:hove{
    -webkit-animation: fadeInDown 1s both;
    animation: fadeInDown 1s both;
    -ms-animation: fadeInDown 1s both;}


    .num{border:2px solid #000;width:100%;height:100%;float:left;margin-right:10px;position:relative;}
    .num .border_top{
        position:absolute;height:2px;width:0;font-size:0;background:#fdd000;top:0;left:0;
        -webkit-transition:all 0.5s ease-out;
        -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }
    .num .border_right{
        position:absolute;height:0px;width:2px;font-size:0;background:#fdd000;bottom:0;right:0;

        -webkit-transition:all 0.5s ease-out;
        -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }
    .num .border_bottom{
        position:absolute;height:2px;width:0px;font-size:0;background:#fdd000;right:0;bottom:0;

        -webkit-transition:all 0.5s ease-out;
        -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }
    .num .border_left{
        position:absolute;height:0px;width:2px;font-size:0;background:#fdd000;left:0;top:0;
        -webkit-transition:all 0.5s ease-out;
        -o-transition:all 0.5s ease-out;
        transition:all 0.5s ease-out;
    }
    .hover .border_top,.hover .border_bottom{width:100%}
    .hover .border_left,.hover .border_right{height:100%}

/* 适应 1920 */
@media screen and (min-width:1441px) and (max-width:2000px){
    .x-layout-3 .map{ height: 600px;}
    .shaitu .explain dd{ height: 340px;}
    .i-layout-5 .list{ width: 95%; margin: 0;}
    .index .content{ width: 95%; height: 580px;}
    .index .stitle{ padding-top: 180px;}
    .index .classification{ padding-top: 20px;}
    .i-layout-1 .content{ height: 610px;}
    .i-animation-1 .pic{ left: 24%; top:12%;}
    .i-layout-2 .content{ height: 520px;}
    .i-layout-4 .line,.i-layout-2 .line{ width: 96%;}
    .i-layout-3 .list{ padding-top: 90px;}
    .i-layout-2 .content,.i-layout-4 .content,.i-layout-5 .content{ width: 100%;}
    .i-layout-4 .x3 .lb{ width: 306px;}
    .i-layout-4 .x3 .title,.i-layout-4 .x3 .pic{ width: 304px;}
    .i-layout-5 .content{ height: 690px;}
    .i-layout-5 .list ul li{ padding-top: 80px;}
    .i-layout-6 .content{ height: 590px;}
    .fontfoot .content{ height: 650px;}
    .i-layout-6 .icon-jg a span.pic{background-size:23%;}
    .i-layout-6 .icon-jg a:hover span.pic{ background-position: center 15px;}
    .x-layout-1 .content,.kehuzhongxin .content{ bottom: 170px;}
    .about .content{ bottom: 220px;}
    .a-layout-1 .content{ bottom: 135px;}
    .a-layout-2 .content{ bottom: 220px;
    .a-layout-3 .content{ bottom: 240px;}
    .a-layout-5 .content{ bottom: 150px;}
    .a-layout-6 .content{ bottom: 110px;}
    .a-layout-7 .content{ bottom: 150px;}
	.a-layout-8 .content{ bottom: 130px;}
    .a-layout-9 .line{ width: 100%;}
    img.primg{ width: 950px; height: 595px;}
    .footer .share{ float: right; padding-right: 30px;}

    .about .content{ width: 100%;}
    .x-layout-1 .scrollBox .ohbox,.k-layout-1 .scrollBox .ohbox,.a-layout-7 .scrollBox .ohbox,.a-layout-5 .scrollBox .ohbox,.a-layout-4 .scrollBox .ohbox{ width: 1085px;}
    .a-layout-5 .scrollBox{ height: 510px;}
    .a-layout-7 .scrollBox .x6 img{ height: 270px;}
    .a-layout-7 .scrollBox{ height: 540px;}

    .a-layout-7 .scrollBox .pageBtn span{ top:220px;}
    .class-layout .class_nav .box{ height: 800px;}
    .productshow .x8 .content{ padding-left: 80px;}
    .productshow .y .content{ width: 70%;}
    .productshow .y .pas .pic{ width: 300px; padding-top: 20px;}
    .productshow .y .pas .pic img{ width: 100%;}
    .productshow .y .more{ width: 300px; margin-top: 5px;}
    .j-layout-1 .content{ bottom:276px;}
    .j-layout-2 .content{ bottom:200px;}
    .jiameng .content{ padding-top: 30px;}
    .jiameng .container{ height: 900px;}
}

/* 适应 1440 */
@media screen and (min-width:1281px) and (max-width:1440px){
    body{ overflow: visible;}
    .index .stitle{ padding-top: 180px;}
    .index .classification{ padding-top: 20px;}
    .index .content{ width: 94%; height: 525px;}
    .i-layout-1 .scrollBox .pageBtn span{ top:40%;}
    .i-layout-1 .scrollBox .ohbox{ left: -50px;}
    .i-layout-5 .list{ width: 95%; margin: 0;}
    .i-layout-7 .content{ width: 100%;}
    .i-layout-1 .content{ height: 530px;}
    .i-animation-1 .pic{ left: 24%; top:12%;}
    .i-layout-2 .content{ height: 400px; bottom:140px;}
    .i-layout-3 .content{ bottom:10px;}
    .i-layout-3 .list{ padding-top: 20px;}
    .i-layout-3 .list ul li{ padding: 14px 0;}
    .i-layout-2 .content,.i-layout-4 .content,.i-layout-5 .content{ width: 90%;}
    .i-layout-4 .content{ height: 440px; bottom: 150px;}
    .i-layout-4 .list{ width: 100%;}
    .i-layout-4 .x3 .lb{ width: 270px;}
    .i-layout-4 .x3 .title,.i-layout-4 .x3 .pic{ width: 268px;}
    .i-layout-5 .content{ height: 555px;}
    .i-layout-5 .classification{ padding-top:0px; margin-top: -70px;}
    .i-layout-5 .list ul li{ padding-top: 80px;}
    .i-layout-6 .content{ height: 450px; bottom: 160px;}
    .i-layout-6 .con a span.pic{ padding-top: 68px;}
    .fontfoot .content{ height: 520px;}
    .i-layout-6 .icon-jg a span.pic{background-size:23%;}
    .i-layout-6 .icon-jg a:hover span.pic{ background-position: center 15px;}
    .i-layout-7 .content{bottom: 170px;}
    .a-layout-9 .line{ width: 100%;}
    .productshow .x .content .pic img{ width: 750px;}
    .about .content{ width: 90%; bottom: 165px;}
    .a-layout-2 .content{ bottom: 210px;}
    .a-layout-3 .content{ bottom: 210px;}
    .a-layout-8 .content{ bottom: 30px;}
    .a-layout-6 .content{ bottom: 70px;}
    .a-layout-6 .prev{ left:0; top:40%; cursor: pointer;}
    .a-layout-6 .next{ right:0; top:40%; cursor: pointer;}
    .a-layout-7 .content,.a-layout-5 .content{ bottom: 60px;}
    .x-layout-1 .content,.kehuzhongxin .content{ bottom: 60px;}
    .footer .share{ float: right; padding-right: 30px;}

    .x-layout-1 .scrollBox .ohbox,.k-layout-1 .scrollBox .ohbox,.a-layout-7 .scrollBox .ohbox,.a-layout-5 .scrollBox .ohbox,.a-layout-4 .scrollBox .ohbox{ width: 1085px;}
    .a-layout-5 .scrollBox{ height: 510px;}
    .a-layout-7 .scrollBox .x6 img{ height: 270px;}
    .a-layout-7 .scrollBox{ height: 540px;}

    .a-layout-7 .scrollBox .pageBtn span{ top:220px;}
    .class-layout .class_nav .box{ height: 800px;}
    .productshow .x8 .content{ padding-left: 60px; padding-top: 50px;}
    .class-layout .class_nav dd{ padding: 5px 10px}
    .productshow .y .content{ width: 70%;}
    .productshow .y .pas .pic{ width: 300px; padding-top: 20px;}
    .productshow .y .pas .pic img{ width: 100%;}
    .productshow .y .more{ width: 300px; margin-top: 5px;}
    .j-layout-1 .content{ bottom:86px;}
    .j-layout-2 .content{ bottom:125px;}
    .jiameng .content{ padding-top: 15px;}
    .z-layout_1 .slide{ margin-top: -127px;}
    .z-layout_1 .next{ right: 40px;}
    .z-layout_1 .prev{ left: -55px;}
    .jiameng .container{ height: 900px;}
    .z-layout_2 dd{ height: 137px;}
    .lianxiwom .content{ height: 470px;}
}
/* 适应 1280 */
@media screen and (min-width:1024px) and (max-width:1280px){
    .fontfoot .navs{ width: 93%; margin: 0 auto;}
    body{ overflow: visible;}
    .container{ width: 1280px !important;}
    .i-layout-1 .scrollBox .ohbox{ left: -50px;}
    .i-layout-5 .list{ width: 95%; margin: 0; padding-right: 100px;}
    .index .content{ width: 94%; height: 525px;}
    .index .stitle{ padding-top: 180px;}
    .index .classification{ padding-top: 20px;}
    .i-layout-1 .content{ height: 630px;}
    .i-animation-1 .pic{ left: 24%; top:12%;}
    .i-layout-2 .content,.i-layout-5 .content{ width: 100%;}
    .i-layout-2 .content{ width: 90%; height: 500px; bottom:120px;}
    .i-layout-4 .line,.i-layout-2 .line{ width: 96%;}
    .i-layout-3 .content{ bottom:0px;}
    .i-layout-3 .list{ padding-top: 20px;}
    .i-layout-3 .list ul li{ padding: 14px 0;}
    .i-layout-4 .content{ width: 92%; height: 520px; bottom: 150px;}
    .i-layout-4 .x3 .lb{ width: 270px;}
    .i-layout-4 .list ul li .pic{ width: 255px;}
    .i-layout-5 .classification{ width: 91%; padding-top: 0; margin-top: -40px;}
    .i-layout-5 .content{ width: 96%; height: 655px;}
    .i-layout-5 .list ul li{ padding-top: 80px;}
    .i-layout-6 .content{ height: 550px; bottom: 150px;}
    .i-layout-6 .con a span.pic{ padding-top: 68px;}
    .i-layout-7 .content{ bottom: 190px;}
    .fontfoot .content{ height: 620px;}
    .i-layout-6 .icon-jg a span.pic{background-size:23%;}
    .i-layout-6 .icon-jg a:hover span.pic{ background-position: center 15px;}
    .a-layout-9 .line{ width: 100%;}
    .productshow .x .content .pic img{ width: 680px;}
    .about .content{ bottom: 265px;}
    .a-layout-8 .content{ bottom: 330px;}
    .a-layout-6 .content{ bottom: 370px;}
    .a-layout-6 .prev{ left: -60px;}
    .a-layout-6 .next{ right: 66px;}
    .a-layout-7 .content,.a-layout-5 .content{ bottom: 260px;}
    .a-layout-1 .content{ bottom: 390px;}
    .x-layout-1 .content,.kehuzhongxin .content,.a-layout-3 .content{ bottom: 300px;}
    .footer .share{ float: right; padding-right: 30px;}

    .about .content{ width: 85%;}
    .x-layout-1 .scrollBox .ohbox,.k-layout-1 .scrollBox .ohbox,.a-layout-7 .scrollBox .ohbox,.a-layout-5 .scrollBox .ohbox,.a-layout-4 .scrollBox .ohbox{ width: 1085px;}
    .a-layout-5 .scrollBox{ height: 510px;}
    .a-layout-7 .scrollBox .x6 img{ height: 270px;}
    .a-layout-7 .scrollBox{ height: 540px;}

    .a-layout-7 .scrollBox .pageBtn span{ top:220px;}
    .class-layout .class_nav .box{ height: 800px;}
    .productshow .x8 .content{ padding-left: 60px; padding-top: 50px;}
    .class-layout .class_nav dd{ padding: 5px 10px}
    .productshow .y .content{ width: 70%;}
    .productshow .y .pas .pic{ width: 300px; padding-top: 20px;}
    .productshow .y .pas .pic img{ width: 100%;}
    .productshow .y .more{ width: 300px; margin-top: 5px;}
    .j-layout-1 .content{ bottom:353px;}
    .j-layout-2 .content{ bottom:320px;}
    .jiameng .content{ padding-top: 15px;}
    .z-layout_1 .slide{ margin-top: 0px;}
    .z-layout_1 .next{ right: 40px;}
    .z-layout_1 .prev{ left: -55px;}
    .jiameng .container{ height: 900px;}
    .z-layout_2 dd{ height: 137px;}
    .lianxiwom .content{ height: 660px;}
}

[data-fp]{
    animation-duration: 1s;
    animation-fill-mode: both;
}