@media screen and (min-device-width:751px){
    .fixed-menu{
        position: fixed;
        top: 230px;
        background: #F8F8F8;
        z-index: 100;
    }
    .swiper {
        width: 100%;
        height: 755px;
        position: relative;
    }

    .swiper-slide {
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .lunbo-bot-box{
        width: 100%;
        position: absolute;
        top:31%;
        left: 0;
    }
    .lunbo-bot .swiper-pagination-bullet{
        width: 11px;
        height: 32px;
        border-radius: 0%;
        -webkit-border-radius: 0%;
        -moz-border-radius: 0%;
        -ms-border-radius: 0%;
        -o-border-radius: 0%;
        background: #ffffff;
    }
    .banner-text-box{
        position: absolute;
        bottom: 30px;
        width: 100%;
    }
    .banner-text-box-body{
        display: flex;
        flex-direction: row-reverse;
    }
    .banner-text-box-text{
        width: 1230px;
    }
    .banner-text-box-title{
        font-size: 41px;
        color: #f8f8f8;
        text-align: right;
    }
    .banner-text-box-title-active{
        animation: larger 2s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: larger 2s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
    }
    @keyframes larger{
        0%{
            font-size: 41px;
        }
        50%{
            font-size: 42px;
        }
        100% {
            font-size: 43px;
        }
    }
    .banner-text-box-content{
        margin-top: 80px;
        font-size: 20px;
        line-height: 36px;
        color: #f1f1f1;
        animation: bounceIndown 1.5s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: bounceIndown 1.5s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
    }
    @keyframes bounceIndown{
        0%{
            opacity: 0;
            transform: translate3d(0,100px,0);
            -webkit-transform: translate3d(0,100px,0);
            -moz-transform: translate3d(0,100px,0);
            -ms-transform: translate3d(0,100px,0);
            -o-transform: translate3d(0,100px,0);
    }
        50%{
            opacity: 0;
            transform: translate3d(0,50px,0);
            -webkit-transform: translate3d(0,50px,0);
            -moz-transform: translate3d(0,50px,0);
            -ms-transform: translate3d(0,50px,0);
            -o-transform: translate3d(0,50px,0);
    }
        100% {
            opacity: 1;
            transform: translate3d(0px, 0px, 0);
            -webkit-transform: translate3d(0px, 0px, 0);
            -moz-transform: translate3d(0px, 0px, 0);
            -ms-transform: translate3d(0px, 0px, 0);
            -o-transform: translate3d(0px, 0px, 0);
        }
    }
    .banner-text-box-content p:first-child{
        margin-bottom: 15px;
    }
    .design{
        background: #FFFFFF;
        padding-top: 65px;
    }
    .content-box1{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    }
    .content-box1-left{
        width: 710px;
        height: 470px;
        animation: showIndown 1.5s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: showIndown 1.5s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
    }
    .content-box1-right{
        margin-right: 20px;
    }
    .content-box1-right-text{
        margin-top: 30px;
        color: #232323;
        font-size: 30px;
    }
    .content-box1-right-float{
        position: absolute;
        width: 645px;
        height: 255px;
        left:590px;
        background: rgba(255, 255, 255, .73);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 60px;
        color: #232323;
        font-size: 16px;
        box-shadow: 2px 0px 5px #efefef;
        top: 115px;
    }
    @keyframes showIndown{
        0%{
            opacity: 0;
            transform: translate3d(0,300px,0);
            -webkit-transform: translate3d(0,300px,0);
            -moz-transform: translate3d(0,300px,0);
            -ms-transform: translate3d(0,300px,0);
            -o-transform: translate3d(0,300px,0);
    }
        50%{
            opacity: 0;
            transform: translate3d(0,100px,0);
            -webkit-transform: translate3d(0,100px,0);
            -moz-transform: translate3d(0,100px,0);
            -ms-transform: translate3d(0,100px,0);
            -o-transform: translate3d(0,100px,0);
    }
        100% {
            opacity: 1;
            transform: translate3d(0px, 0px, 0);
            -webkit-transform: translate3d(0px, 0px, 0);
            -moz-transform: translate3d(0px, 0px, 0);
            -ms-transform: translate3d(0px, 0px, 0);
            -o-transform: translate3d(0px, 0px, 0);
        }
    }
    .content-box1-right-float-title{
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        animation: showIndown 2s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: showIndown 2s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
    }
    .content-box1-right-float-text{
        animation: showIndown 3s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: showIndown 3s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
    }
    .content-box1-right-float-title span:first-child{
        font-size: 46px;
    }
    .content-box1-right-float-title span:last-child{
        font-size: 20px;
        margin-left: 35px;
    }
    .content-box2{
        margin-top: 85px;
        display: flex;
        justify-content: space-between;
    }
    .content-box2-left{
        display: flex;
        justify-content: space-between;
    }
    .content-box2-left-item1-box{
        width: 700px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .content-box2-left-item1{
        width: 346px;
        height: 135px;
        background: #81C0FF;
        margin-bottom: 5px;  
    }
    .content-box2-left-item1-active{
        background: #0075FA;
    }
    .content-box2-left-item1-box .content-box2-left-item1:nth-child(3),.content-box2-left-item1-box .content-box2-left-item1:nth-child(4){
        margin-bottom: 0;
    }
    .content-box2-left-item1-body{
        width: 270px;
        margin: 0 auto;
        display:flex;
        justify-content: space-between;
        align-items: center;
        height: 135px;
    }
    .content-box2-left-item1-content{
        width: 185px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        color: #ffffff;
    }
    .content-box2-left-item1-content-title{
        font-size: 18px;
        font-weight: bold;
    }
    .content-box2-left-item1-content-line{
        width: 20px;
        height: 3px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        background: #ffffff;
        margin-top: 2px;
    }
    .content-box2-left-item1-content-text{
        font-size: 14px;
        margin-top: 10px;
    }
    .content-box2-left-item1-body img{
        width: 63px;
        height: 70px;
    }
    .content-box2-left-item2{
        width: 238px;
        margin-left: 6px;
        background: #81C0FF;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .content-box2-left-item2 .content-box2-left-item1-content{
        margin-top: 30px;
        height: 50%;
    }
    .content-box2-right{
        width: 280px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .content-box2-right-tri{
        width: 0px;
        height: 0px;
        border-right: 50px solid #0075FA;
        border-top: 35px solid transparent;
        border-bottom: 35px solid transparent;
    }
    .content-box2-right-content{
        margin-left: 2px;
        width: 245px;
        background: #0075FA;
        height: 275px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .content-box2-right-content-body{
        width: 155px;
        margin: 0 auto;
        color: #ffffff;
        font-size: 16px;
    }
    .content-box2-right-content-title{
        font-size: 35px;
        margin-top: 30px;
    }
    .pale-box{
        margin-top: 30px;
        width: 100%;
        background:#D6D6D6;
    }
    .pale-box .swiper {
        width: 100%;
        height: 520px;
        overflow-x:hidden
    }
    .pale-box-body{
        position: relative;
    }
    .pale-box .swiper-slide{
        margin-top: 90px;
        margin-bottom: 25px;
    }
    .pale-box-body-content-img {
        width: 910px;
        height: 400px;
    }
    .pale-box-body-content-img .swiper {
        width: 910px;
        height: 400px;
    }
    .photoSwiper .swiper-slide{
        margin: 0;
    }
    .pale-box-body-content-img img {
        display: block;
        width: 100%;
    }
    .pale-box-body-content-text{
        width: 320px;
        background: #ffffff;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .package-title{
        color: #232323;
        font-size: 30px;
        margin-bottom: 35px;
    }
    .package-box{
        color: #666666;
        font-size: 14px;
    }
    .package-box:hover{
        animation: larger 1s linear 0s 1 alternate forwards;
        -webkit-animation: larger 1s linear 0s 1 alternate forwards;
    }
    @keyframes larger{
        0%{
            font-size: 14px;
        }
        50%{
            font-size: 15px;
        }
        100% {
            font-size: 16px;
        }
    }
    .pale-box-body-content .swiper-slide{
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 400px;
    }
    .pale-box-body-content .swiper-btn{
        position: absolute;
        width: 36px;
        height: 36px;
        top: 32px;
        z-index: 1; 
    }
    .pale-box-body-content .swiper-next .swiper-btn{
        left: 1194px;
    }
    .pale-box-body-content .swiper-prev .swiper-btn{
        left: 1065px;
    }
    .pale-box-body-content .swiper-pagination-fraction{
        position: absolute;
        top: 37px;
        left: 1097px;
        width: 100px;
        color: #515151;
        font-size: 18px;
    }
    .pale-box-body-title{
        position: absolute;
        top: 30px;
        left: 0;
        color: #232323;
        font-size: 30px;
    }
    .custom-box{
        padding: 50px 0 85px 0;
    }
    .custom-box-head{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .custom-box-head-left{
        width: 160px;
        color: #232323;
        font-size: 30px;
    }
    .custom-box-head-right{
        width: 400px;
        display: flex;
        justify-content: space-between;
    }
    .custom-box-head-right-item{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .date-number{
        color: #333333;
        display: flex;
        align-items:flex-start;
        font-size: 24px;
    }
    .date-number .add{
        font-size: 20px;
        margin-top: -5px;
    }
    .date-title{
        font-size: 14px;
        margin-top: 8px;
    }
    .custom-box-menu{
        display: flex;
    }
    .cate-box,.brand-box{
        width: 145px;
        height: 50px;
        border: 1px solid #333333;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        /* text-align: center; */
        color: #232323;
        font-size: 16px;
        background: url(../../image/industry/cjwmall/xl_icon.png) no-repeat center;
        background-size: 20px 15px;
        background-position-x: 105px;
        background-position-y: 19px;
        appearance: none;
        padding-left: 15px;
    }
    .brand-box{
        margin-left: 45px;
    }
    .cate-box option,.brand-box option{
        background: none;
    }
    .custom-box-content{
        margin-top: 20px;
        display:flex;
        /* justify-content: space-between; */
        flex-wrap: wrap;
    }
    .custom-box-content-item{
        width: 160px;
        height: 60px;
        margin-right: 51px;
        margin-top: 30px;
    }
    .custom-box-content-item img{
        width: 160px;
        height: 60px;
    }
    .custom-box-content-item:nth-child(6n){
        margin-right: 0;
    }
    .custom-box-content-left{
        width: 340px;
        height: 415px;
        position: relative;
    }
    .custom-box-content-left-body{
        position: absolute;
        width: 340px;
        height: 415px;
        top: 0;
        left: 0;
        background: rgba(17, 17, 17, 0.4);
    }
    .custom-box-content-left-body-main{
        width: 240px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 415px;
        margin: 0 auto;
        text-align: center;
        color: #fff;
    }
    .custom-box-content-left-body-title{
        font-size: 20px;
    }
    .custom-box-content-left-body-text{
        font-size: 14px;
    }
    .custom-box-content-right{
        width: 875px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .custom-box-content-right-item{
        width: 210px;
        height: 200px;
        margin-bottom: 15px;
        position: relative;
    }
    .custom-box-content-right-body{
        position: absolute;
        width: 210px;
        height: 200px;
        background: rgba(17, 17, 17, 0.4);
        top: 0;
        left: 0;
    }
    .custom-box-content-right-body-text{
        width: 105px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 200px;
    }
    .gray-box{
        width: 100%;
        background: #434343;
        padding: 50px 0;
    }
    .gray-box-body{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .gray-box-left{
        display: flex;
        align-items: center;
        width: 750px;
        flex-wrap: wrap;
    }
    .gray-box-left-title{
        width:100%;
        font-size: 30px;
        color: #ffffff;
        text-align: center;
    }
    .gray-box-left-content{
        margin: 10px auto 0 auto;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        flex-wrap: wrap;
    }
    .gray-box-left-content-title{
        font-size: 20px;
    }
    .gray-box-left-content-item{
        width: 65px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
        margin-left: 100px;
    }
    .gray-box-left-content-item-img{
        width: 65px;
        height: 65px;
        border: 1px solid #fff;
    }
    .gray-box-left-content-item-text{
        margin-top: 5px;
    }
    .gray-box-right{
        width: 315px;
        height: 275px;
        background: rgba(255, 255, 255, .9);
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        padding: 35px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .form-title{
        color: #333333;
        font-size: 30px;
    }
    .input-area,.input-phone{
        background: none;
        outline: none;
        border: none;
        width: 240px;
        height: 45px;
        border: 1px solid #333333;
        border-radius: 47px;
        -webkit-border-radius: 47px;
        -moz-border-radius: 47px;
        -ms-border-radius: 47px;
        -o-border-radius: 47px;
        text-align: center;
        color: #707070;
        font-size: 16px;
    }
    .gray-box-right input::placeholder{
        color: #707070;
        font-size: 16px;
    }
    .submit{
        width: 240px;
        height: 45px;
        background: #3A3A3A;
        color: #FFFFFF;
        font-size: 16px;
        border-radius: 47px;
        -webkit-border-radius: 47px;
        -moz-border-radius: 47px;
        -ms-border-radius: 47px;
        -o-border-radius: 47px;
        text-align: center;
        line-height: 45px;
    }
    .content-box1-m,.swiper-slide-img-m,.banner-logo,.pale-box-m,.box-title{
        display: none !important;
    }
}
@media screen and (min-device-width:300px) and (max-device-width:750px){
    .banner-text-box-title,.content-box1,.content-box1-body1-left-line,.pale-box,.foot-box,.brand_box,.pale-box-body-title,.custom-box-head{
        display: none;
    }
    .swiper-slide-img-m{
        height: 5.95rem !important;
    }
    .banner-logo{
        position: absolute;
        top: .5rem;
        right: 0;
        width: 2.6rem !important;
        height: 1.0rem !important;
    }
    .banner-logo img{
        width: 2.6rem !important;
        height: 1.0rem !important;
    }
    .banner-text-box{
        width: 6.9rem;
        margin: .25rem auto;
        color: #333333;
        font-size: .21rem;
    }
    .content-box1-m{
        width: 100%;
    }
    .content-box1-body1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .content-box1-body1-left{
        width: 100%;
        max-height: 3.8rem;
        margin: .3rem auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .content-box1-body1-left img{
        width: 100%;
        height: 100%;
    }
    @keyframes showIndown{
        0%{
            opacity: 0;
            transform: translate3d(0,300px,0);
            -webkit-transform: translate3d(0,300px,0);
            -moz-transform: translate3d(0,300px,0);
            -ms-transform: translate3d(0,300px,0);
            -o-transform: translate3d(0,300px,0);
    }
        50%{
            opacity: 0;
            transform: translate3d(0,100px,0);
            -webkit-transform: translate3d(0,100px,0);
            -moz-transform: translate3d(0,100px,0);
            -ms-transform: translate3d(0,100px,0);
            -o-transform: translate3d(0,100px,0);
    }
        100% {
            opacity: 1;
            transform: translate3d(0px, 0px, 0);
            -webkit-transform: translate3d(0px, 0px, 0);
            -moz-transform: translate3d(0px, 0px, 0);
            -ms-transform: translate3d(0px, 0px, 0);
            -o-transform: translate3d(0px, 0px, 0);
        }
    }
    .content-box1-body1-right{
        width: 6.9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: .25rem auto .35rem auto;
    }
    .content-box1-body1-right-title{
        font-weight: bold;
        font-size: .35rem;
        color: #232323;
        animation: showIndown 1s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: showIndown 1s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        margin-bottom: .25rem;
    }
    .content-box1-body1-right-text{
        width: 5.8rem;
        color: #232323;
        font-size: .25rem;
        text-align: center;
        animation: showIndown 1.5s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
        -webkit-animation: showIndown 1.5s cubic-bezier(0.215,0.355,0.61,1) 0s 1 alternate forwards;
    }
    .box-title{
        width: 4.0rem;
        margin: .25rem auto;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items:center
    }
    .box-title-left,.box-title-right{
        width: .7rem;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: .1rem;
    }
    .box-title-middle{
        width: 2.5rem;
        text-align: center;
        font-size: .3rem;
        font-weight: bold;
        color: #333333;
    }
    .box-title span{
        width: .2rem;
        background: #232323;
    }
    .line1{
        animation: line 0.6s 0.6s infinite ease-in-out alternate;
        -webkit-animation: line 0.6s 0.6s infinite ease-in-out alternate;
    }
    .line2{
        animation: line 0.6s infinite ease-in-out alternate;
        -webkit-animation: line 0.6s infinite ease-in-out alternate;
    }
    .line3{
        animation: line 0.6s 0.3s infinite ease-in-out alternate;
        -webkit-animation: line 0.6s 0.3s infinite ease-in-out alternate;
    }
    .content-box3{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    @keyframes line{
        from{
            height: 0;
        }
        to{
            height: .24rem;
        }
    }
    @-webkit-keyframes line{
        from{
            height: 0;
        }
        to{
            height: .24rem;
        }
    }
    .pale-box-m{
        width: 100%;
    }
    .pale-box-m .swiper {
        width: 100%;
        height: 4.0rem;
        overflow-x:hidden
    }
    .pale-box-body{
        position: relative;
    }
    .pale-box-m .swiper-slide{
        margin-top: .1rem;
    }
    .pale-box-body-content-img {
        width: 100%;
        height: 4.0rem;
    }
    .pale-box-body-content-img .swiper {
        width: 100%;
        height: 4.0rem;
    }
    .pale-box-body-content-img .swiper-wrapper{
        height: 3.45rem;
    }
    .photoSwiper-m .swiper-slide{
        margin: 0;
    }
    .pale-box-body-content-img img {
        display: block;
        width: 100%;
    }
    .pale-box-body-content-text{
        position: absolute;
        width: 2.0rem;
        background: rgba(255, 255, 255, .7);
        height: .75rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: .28rem;
        color: #232323;
        top: 50%;
        right: 0;
        z-index: 9;
        margin-top: -.4rem;
    }
    .pale-box-body-content-m .swiper-slide{
        width: 100%;
        height: 3.45rem;
    }
    .pale-box-body-content-m .swiper-pagination{
        position: absolute;
        width: 2.2rem;
    }
    .pale-box-body-content-m .swiper-pagination-bullet{
        width:.6rem;
        height: .1rem;
        background: rgba(45, 45, 45, .25);
        border-radius: .1rem;
        -webkit-border-radius: .1rem;
        -moz-border-radius: .1rem;
        -ms-border-radius: .1rem;
        -o-border-radius: .1rem;
    }
    .pale-box-body-content-m .swiper-pagination-bullet-active{
        background: rgba(45, 45, 45, 1);
    }
    .custom-box{
        padding: .5rem 0 0.3rem 0;
    }
    .custom-box .box-title{
        width: 3rem;
    }
    .custom-box .box-title-middle{
        width: 1.6rem;
    }
    .custom-box-content{
        margin-top: .2px;
        display:flex;
        /* justify-content: space-between; */
        flex-wrap: wrap;
    }
    .custom-box-content-item{
        width: 1.5rem;
        height: .55rem;
        margin-right: .16rem;
        margin-top: .23rem;
    }
    .custom-box-content-item img{
        width: 1.5rem;
        height: .55rem;
    }
    .custom-box-content-item:nth-child(4n){
        margin-right: 0;
    }
}