@charset "UTF-8";
*{margin: 0;padding: 0;color:inherit;font-size:0.832vw;box-sizing: border-box;font-weight: 500;font-family:"PingFang SC", "Microsoft Yahei","PingHei","Lucida Grande","Lucida Sans Unicode"}
:root {
    --primary: #3d61cb; /* 主色调、链接*/
    --cPrimary:#fdc735; /*辅色调*/
    --words: #333333;  /*大部分文字、深色文字*/
    --lightWords: #999; /*少部分文字、浅色文字*/
    --warn: #fdc735;/* 警告*/
    --danger: #ff4880; /*危险、错误*/
    --success: #7ebf50; /*成功*/
    --gray: #b4b8bc; /*灰色*/
    --dark: #202020; /*深色*/
}
@pc:1920;
html{color: var(--words); scroll-behavior: smooth;}
li{list-style: none}
a{text-decoration: none;color: inherit}
.warp{width:1200px;margin:   0 auto}
.warp-90{width: 90%;margin:  0 auto}
.img-fulid{max-width: 100%;}
.visible-lg, .visible-md, .visible-sm, .visible-xs {
    display: none!important;
}
.breathing {animation: 4s breathing infinite alternate ease-in-out;transform-origin: center}
.flex-row(@justify:center,@align:center) {
    display: flex;
    justify-content: @justify;
    align-items: @align;
}
.flex-column(@justify:center,@align:center) {
    display: flex;
    flex-direction: column;
    justify-content: @justify;
    align-items: @align;
}
.wordsize(@px){
    font-size:((100vw/@pc)*@px);
}
.header-top{height: ((100vw/@pc)*60);color: #fff;background: var(--primary);.flex-column()}
.header-top .warp{.flex-row(space-between)}
.header-top .l{.wordsize(14)}
.header-top .l span{display: inline-block;padding-left: 24px;}
.header-top .l span:first-of-type{background: url("../images/tell.png") no-repeat center left}
.header-top .l span:last-of-type{background: url("../images/email.png") no-repeat center left;margin-left: 30px}
.header-top .r span{display: flex;align-items: center}
.header-top .r i{font-size: 32px;margin-left: 10px}
//内页侧边导航
.no-data{height: 50vh;display: flex;align-items: center;justify-content: center;font-weight: bold;flex-direction: column}
.leftmenus{
    display: flex;justify-content: space-between;align-items: center; padding: 15px 10px;margin:10px 0;background:#eee;border-bottom: 1px solid #eee;overflow: hidden;
    .menus{display: flex;justify-content:flex-start;}
    .menus a{display: inline-block;font-weight: bold;margin-right: 10px;position: relative;white-space: nowrap  ;  padding: 3px 10px;border: 1px solid #999;}
    .menus a:after{position: absolute;content: '';width: 100%;height: 2px;background: var(--primary);bottom: -20px;left: 0px}
    .menus a.on:before{position: absolute;height: 10px;width: 10px;content: '';background: var(--primary);bottom: -20px;left: 50%;transform: translateX(-50%) rotate(45deg)}
}
header{
    box-shadow: 0px 1px 20px #f3f3f3;
    .warp{ .flex-row(space-between);padding: 10px 0px;}
    .logo{flex: 1;}
    .menu ul{.flex-row(space-between);.wordsize(14);}
    .menu ul li{padding:10px 20px;.wordsize(14);color: #999 }
    .menu ul li.active,.menu ul li:hover{color:#000;background: url("../images/line.jpg") bottom center no-repeat}
    .icons{.flex-row();margin-left: 40px}
    .icons i{width: 40px;height: 40px;background: var(--primary);display: flex;justify-content: center;align-items: center;margin: 0 5px;border-radius: 50%;}
    .icons i:first-of-type{background: #ffae00}
    .icons i:nth-of-type(2){background: #ff4880}
    .icons i:nth-of-type(3){background: #5798fe}
}
.banner {
    position:relative;
    img{max-width: 100%;display: block;}
    .wenzi{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-80%)}
    .wenzi h3{font-size: 4.3vw;color: #fff;text-transform:capitalize}
    .wenzi h4{font-size: 1.5vw;color: #fff;text-align: center;margin-top: 20px}
    .arrdown{position: absolute;bottom: 80px;left: 50%;text-align: center;color: #fff;transform: translateX(-50%);cursor: pointer;bottom: 30px;}
    .arrdown h6{margin-top: 20px;cursor: pointer}
}


.block1{
    position: relative;
    height: ((100vw/@pc)*286);
    .flex-row(space-between);
    background: var(--primary);
    .warp{ .flex-row(space-between);padding: 10px 0px;}
    .l{
        color: #fff;
        p {.wordsize(24);}
        span{.wordsize(36);font-weight: bold;}
    }
    .r{
        a{
            width: 166px;
            height: 52px;
            .flex-column();
            color: var(--words);
            background: var(--cPrimary);
            transition: .4s all;
        }
        a:hover{
            background:var(--danger);
            box-shadow: 1px 1px 0px 5px var(--primary), 1px 1px 0px 10px var(--cPrimary);
        }
    }
    .icon{position: absolute;animation: topAndDom 30s infinite ease}
    .icon-1{left: 50%}
    .icon-2{top: 10%;left: 10%;animation: topAndDom2 100s infinite ease}
    .icon-3{bottom: -80px;left: 5%;animation: topAndDom3 30s infinite ease}
}
.block2{
    overflow: hidden;
    position: relative;
    padding: ((100vw/@pc)*135) 0;
    .warp{.flex-row(space-between);}
    .l{
        img{display: inline-block;padding-right: 3vw}
    }
    .r{
        h5{.wordsize(18);color: var(--danger);font-weight: 800;margin-bottom: 20px;}
        h4{.wordsize(48);color: #2b3c6b;line-height: 1;font-weight: 600;}
        .desc{margin-top: 35px}
        .desc p{line-height: 2;text-indent: 2em}
        a{
            margin-top: 40px;
            width: 166px;
            height: 52px;
            .flex-column();
            color: #fff;
            background: var(--danger);
            transition: .4s all;
        }
        a:hover{
            background:var(--danger);
            box-shadow: 1px 1px 0px 5px #fff, 1px 1px 0px 10px var(--cPrimary);
        }
    }
    .icon{position: absolute;animation: topAndDom 30s 3s infinite ease;z-index: -1}
    .icon-1{top: 5%;right: 10px;}
}
.block3{
    padding:((100vw/@pc)*135) 0;
    background: #2d3e6f;
    position: relative;
    color: #fff;
    .flex-row(space-between);
    .l{
        h5{color:var(--danger); margin-bottom: 20px;}
        h4{line-height: 1.3;.wordsize(36);}
        p{margin-top: 50px}
        .btn{margin-top: 40px;}
        .btn span{cursor: pointer; width: 45px;height: 45px;background: #ff7162;display: inline-flex;justify-content: center;align-items: center;border-radius: 50%;}
    }
    .r{
        width: 70%;
        .swiper-slide{background: #fff;height: 345px;width: 345px;color: #000;.flex-column();padding:20px;border-radius: 15px}
        .tit{.wordsize(20);color: #2d3e6f;font-weight: bold;padding: 30px 0px}
        p{text-align: center;line-height: 2;}
    }
    .icon{position: absolute;animation: topAndDom2 30s infinite ease}
    .icon-1{bottom: -10%;left: 10px;}
}
.block4{
    padding: 20px 40px;
    .tit{text-align: center;.wordsize(36);color:var(--danger);padding-bottom: 54px;}
    .tit h3{display: inline-block;padding: 0 60px;position: relative}
    .tit h3:after{content:'';position: absolute;width: 40px;height: 2px;background: var(--danger);left: 0;top: 50%;}
    .tit h3:before{content:'';position: absolute;width: 40px;height: 2px;background: var(--danger);right: 0;top: 50%;}
    .tit h4{.wordsize(36);color: #2d3e6f;font-weight: bold}
    .swiper-slide{.flex-column()}
    .swiper-slide .img{width: 100%;padding: 50px;text-align: center;border:1px solid var(--primary)}
    .swiper-slide .img img{width: 300px;height: 300px;object-fit: contain}
    .swiper-slide .title{margin-top: 20px;color: #000;}
    .box{position: relative;}
    .btn{position: absolute;top: 40%;width: 100%;}
    .btn span{cursor: pointer; width: 45px;height: 45px;background: #f2eee9;display: inline-flex;justify-content: center;align-items: center;border-radius: 50%;    position: absolute;}
    .btn span.prev{left: -100px}
    .btn span.next{right: -100px;}
}
.block5{
    background: #f2eee9;
    padding: 20px 0 80px;
    .tit{text-align: center;.wordsize(36);color:var(--danger);padding-bottom: 54px;}
    .tit h3{display: inline-block;padding: 0 60px;position: relative;margin-bottom: 10px;}
    .tit h3:after{content:'';position: absolute;width: 40px;height: 2px;background: var(--danger);left: 0;top: 50%;}
    .tit h3:before{content:'';position: absolute;width: 40px;height: 2px;background: var(--danger);right: 0;top: 50%;}
    .tit h4{.wordsize(36);color: #2d3e6f;font-weight: bold;line-height: 1;}
    .box ul{display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 20px;}
    .box ul img{border-radius: 10px;width: 100%}
}
.block6{
    padding: 20px 40px;
    .tit{text-align: center;.wordsize(36);color:var(--danger);padding-bottom: 54px;}
    .tit h3{display: inline-block;padding: 0 60px;position: relative;margin-bottom: 10px}
    .tit h3:after{content:'';position: absolute;width: 40px;height: 2px;background: var(--danger);left: 0;top: 50%;}
    .tit h3:before{content:'';position: absolute;width: 40px;height: 2px;background: var(--danger);right: 0;top: 50%;}
    .tit h4{.wordsize(36);color: #2d3e6f;font-weight: bold;line-height: 1}
    .swiper-slide{.flex-column(); border-radius: 10px;  box-shadow: 1px 1px 7px 0px #eee;padding: 20px;margin-bottom: 20px;}
    .swiper-slide .date{text-align: left;width: 100%;color: var(--danger);margin-bottom: 20px;}
    .swiper-slide .desc{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3; overflow: hidden}
    .swiper-slide .img{text-align: center;}
    .swiper-slide .title{color: #2d3e6f;.wordsize(16);padding: 20px 0px}
    a {
        margin: 40px 0px 20px;
        width: 166px;
        height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #2b3c6b;
        transition: 0.4s all;
        border-radius: 20px
    }
    a:hover {
        background: #2b3c6b;
        box-shadow: 1px 1px 0px 5px #fff, 1px 1px 0px 10px var(--danger);
    }
}

footer{
    .nav{ .flex-row(space-between,flex-start);padding:12vw 0 10vw;}
    .about{width: 300px}
    .about p{line-height: 2}
    .nav ul li{line-height: 3;.wordsize(14);}
    .nav ul li a{.wordsize(18);font-weight: bold;margin-bottom: 15px}
    .nav ul li:first-of-type{.wordsize(18);font-weight: bold;margin-bottom: 15px}
    .nav input{ outline: none; border: none;background: #f6f6f6;padding: 20px 30px;border-radius: 10px}
    .nav input::placeholder{font-size: 14px}
    .nav .sumbit {
        margin: 40px 0px 20px;
        width: 166px;
        height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #2b3c6b;
        transition: 0.4s all;
        border-radius: 20px
    }
    .sumbit:hover {
        background: #2b3c6b;
        box-shadow: 1px 1px 0px 5px #fff, 1px 1px 0px 10px var(--cPrimary);
    }
    .copyright{font-size: 14px;padding-bottom: 4vw;text-align: center;color: #000;}
}
footer{position:relative;background: url("../images/footerbg.png") no-repeat bottom;background-size: contain;color:#000;}
footer:after{
    content: '';
    background: url(../images/footerbgtop.png) no-repeat top;
    position: absolute;
    width: 100%;
    height: 199px;
    top: 0px;
    left: 0px;
}

@-webkit-keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10% {
        -webkit-transform: translate3d(0, -34px, 0);
        transform: translate3d(0, -34px, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -34px, 0);
        transform: translate3d(0, -34px, 0);
    }
    60% {
        -webkit-transform: translate3d(0, -68px, 0);
        transform: translate3d(0, -68px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -68px, 0);
        transform: translate3d(0, -68px, 0);
    }
}

@keyframes topAndDom {
    0%{
        transform: translateY(0px) translateX(0px) skew(0,0deg);
    }　　　
25%{
    transform: translateY(-10px) translateX(-50px);
}
50%{
    transform: translateY(0px) translateY(0px)  scale(.8);
}
75%{
    transform: translateY(-10px) translateX(50px);
}
100%{
    transform: translateY(0px) translateX(0px) skew(0,0deg);
}
}
@keyframes topAndDom2 {
    0%{
        transform: translateY(0px) translateX(0px);
    }　　　
25%{
    transform: translateY(-10px) translateX(-100px) ;
}
50%{
    transform: translateY(0px) translateY(0px);
}
75%{
    transform: translateY(-10px) translateX(100px);
}
100%{
    transform: translateY(0px) translateX(0px);
}
}
@keyframes topAndDom3 {
    0%{
        transform: translateY(0px) translateX(0px);
    }　　　
25%{
    transform: translateY(50px) translateX(10px);
}
50%{
    transform: translateY(0px) translateY(0px);
}
75%{
    transform: translateY(50px) translateX(-10px);
}
100%{
    transform: translateY(0px) translateX(0px);
}
}
@keyframes breathing {
    0% {
        transform: scale(1); /* 初始大小为 1 */
    }
    50% {
        transform: scale(1.1); /* 放大到 1.1 */
    }
    100% {
        transform: scale(1); /* 缩小回 1 */
    }
}
/*___________________内页样式__________________________*/
/* 分页样式 */
.page-status{display: none;}
.paging { margin: 20px 0; font-size: 14px;text-align: center }
.paging > span { margin: auto 16px; }
.paging .page-numbar { margin: auto 0; }
.paging .page-numbar .page-num,
.paging .page-index,
.paging .page-pre,
.paging .page-next,
.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }
.paging .page-numbar .page-num-current,
.paging .page-numbar .page-num:hover { border-color: #000; color:  #000; }
.innerPage{padding: 20px 0px;}
.no-data{text-align: center;align-items: center;display: flex;flex-direction: column;justify-content: center;padding: 20vh 0px;}


/*关于我们*/
.list-about{
    video{margin: 20px auto;display: block;max-width: 100%}
    p{line-height: 2}
}
/*产品列表*/
.list-product{
    .gridlist {margin:40px 0px;display: grid;grid-template-columns: repeat(4,1fr);grid-gap:20px;}
    .gridlist li{box-shadow: 0px 0px 20px 0px #e0e0e0}
    .gridlist li .pic{}
    .gridlist li img{width:250px;height:250px;display: block;object-fit: contain;margin: auto}
    .gridlist li .tit{display: flex;align-items: center;justify-content: center;font-weight: bold;padding:10px 0px;border-top: 1px solid #ececec;}
}

/*新闻列表*/
.list-news{
    .gridlist li {box-shadow: 0px 0px 20px 0px #e0e0e0;}
    .gridlist {margin:40px 0px;display: grid;grid-template-columns: repeat(1,1fr);grid-gap:20px;}
    .item{padding: 20px 0px}
    .item h3{text-align: center;font-size: 24px;margin-bottom: 10px}
    .item h4{padding: 0 20px;color: #999}
    .item  a{text-align: center;display: block}
    .item .icon{margin-top: 20px}
}
/*新闻详情*/
.show-news{
    .xypg-detail-title {
        background: #eee;
        padding: 5px 10px;
        color: #363636;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.7;
    }
    .xypg-detail-info-bar {
        font-size: 14px;
        overflow: hidden;
        color: #9e9e9e;
        line-height: 35px;
        border-bottom: 1px dashed #cfcfcf;
        margin-bottom: 20px;
    }
    .xypg-detail-info-bar .detail-info-time {
        float: left;
        margin-right: 20px;
        position: relative;
        padding-left: 25px;
    }
    .xypg-detail-info-bar .detail-info-time i {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
    }
    .xypg-detail-info-bar .detail-info-numbers {
        float: left;
        position: relative;
        padding-left: 25px;
    }
    .xypg-detail-info-bar .detail-info-numbers i {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
    }
    .xypg-detail-tags {
        margin-top: 40px;
    }
    .xypg-detail-tags .tags-title {
        border-bottom: 1px solid #c3c3c3;
        position: relative;
    }
    .xypg-detail-tags .tags-title h3 {
        display: inline-block;
        padding: 0 30px;
        font-size: 16px;
        color: #005eb8;
        line-height: 40px;
        border-bottom: 3px solid #005eb8;
        margin-bottom: -1px;
    }
    .xypg-detail-tags .tags-title .baidu-share {
        position: absolute;
        right: 0;
        top: 8px;
    }
    .xypg-detail-tags .tags-content {
        padding-top: 12px;
    }
    .xypg-detail-tags .tags-content a {
        font-size: 12px;
        color: #2f2f2f;
        display: inline-block;
        margin-right: 9px;
        background: #f4f4f4;
        line-height: 28px;
        padding: 0 15px;
    }
    .xypg-detail-tags .tags-content a:hover {
        color: #005eb8;
    }
    .xypg-detail-url {
        margin-top: 15px;
    }
    .xypg-detail-url a {
        word-break: break-all;
    }
    .xypg-detail-pn {
        margin-top: 30px;
    }
    .xypg-detail-pn div + div {
        margin-top: 15px;
    }
    .xypg-detail-pn div {
        line-height: 22px;
        padding: 10px;
        position: relative;
        border: 1px solid #eeeeee;
    }
    .xypg-detail-pn div b {
        font-size: 14px;
        color: #005eb8;
        float: left;
        font-weight: normal;
    }
    .xypg-detail-pn div a {
        width: 75%;
        font-size: 14px;
        color: #666666;
    }
    .xypg-detail-pn div a:hover {
        color: #005eb8;
    }
}



/*联系我们*/
.contact .page {overflow: hidden;padding: 60px 0;}
.contact .page:after {content: '';display: block;clear: both;}
.contact  .page.on {background: #f9f9f9;}
.contact .page_tit {margin-bottom: 40px;text-align: center;}
.contact .page_tit h3 {font-size: 30px;margin-bottom: 20px;font-weight: normal;}
.contact .page_tit h2 {font-size: 28px;}
.contact  .page_tit p {color: #999;}
.contact  .page_tit p span:before, .page_tit p span:after {display: inline-block;width: 30px;height: 1px;background: #999;vertical-align: middle;content: '';margin: 0 2px;margin-bottom: 2px;}
.contact  .page_tag ul li {margin-left: -4px;display: inline-block;}
.contact  .page_tag {text-align: center;}
.contact  .page_tag a {display: block;line-height: 30px;padding: 0 23px;color: #7e7e7e;position: relative;}
.contact  .page_tag .on a, .page_tag a:hover {background: #be9a78;color: #fff;}
.contact  .page_tag .on a:before, .page_tag a:hover:before {color: #be9a78}
.contact  .page_tag a:before {content: '|';display: block;position: absolute;left: -2px;}
.contact  .page_tag li:first-child a:before {display: none;}
.contact  .pro_list ul:after {content: '';display: block;clear: both;}
.contact  .pro_list li {width: 33.333%;float: left;text-align: center;}
.contact  .pro_list h3 {font-size: 16px;color: #000;font-weight: normal;}
.contact  .pro_list p {padding: 10px 0 15px;color: #be9a78;background: no-repeat bottom center;}
.contact  .pro_list ul {display: none;margin-top: 20px;}
.contact  .pro_list ul.on {display: block;}
.contact  .pro_list ul.on li {animation-name: zoomIn;animation-duration: 1s;animation-fill-mode: both;}
.contact  .about_list2 {max-width: 1100px;margin: 0 auto;border-top: 1px solid #e8e8e8;margin-top: 30px;padding-top: 30px;}
.contact .cont_list ul li {width:24%;float: left;text-align: center;}
.contact .cont_list ul li .text {margin-top: 20px;color: #434343}
.contact .cont_list ul li .text h3 {font-size: 16px;font-weight: normal;color: #000;margin-bottom: 10px;}
.contact .message {max-width: 710px;margin: 0 auto;}
.contact .message ul li {width: 50%;float: left;}
.contact .page.on {background: #f9f9f9;}
.contact .div_input input {width: 100%;border: 0;background: none;text-align: left;outline: none}
.contact .div_input textarea {outline:none;width: 100%;height: 150px;border: 0;background: none;resize: none;padding: 10px 0;}
.contact .message ul li:last-child {width: 100%;}
.contact .message ul {margin-bottom: 30px;}
.contact .message .div_input {margin: 5px;line-height: 40px;border: 1px solid #e9e9e9;background: #fff;padding: 0 15px;}
.contact  input[type="submit"] {cursor: pointer;border: none}
.contact .xxj {color: #fff;display: block;line-height: 44px;width: 140px;text-align: center;background: var(--primary);margin: 20px auto;}

/*产品详情*/
.show-product{
    .swiper-slide img {display: block;width: 600px; height: 100%;object-fit: cover; margin: 20px auto; border: 1px solid #eee;padding: 20px;}
    .xypg-detail-con{padding: 10px;border: 1px solid #eee}
    .xypg-detail-con img{width: 100%}
    .swiper {
        --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
        --swiper-navigation-color: var(--primary);/* 单独设置按钮颜色 */
        --swiper-navigation-size: 30px;/* 设置按钮大小 */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .mySwiperB{
        margin: 20px 0px;
        //.swiper-slide-active{border: 2px solid #000}
    }

    .xypg-detail-title {
        background: #eee;
        padding: 5px 10px;
        color: #363636;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.7;
    }
    .xypg-detail-info-bar {
        font-size: 14px;
        overflow: hidden;
        color: #9e9e9e;
        line-height: 35px;
        border-bottom: 1px dashed #cfcfcf;
        margin-bottom: 20px;
    }
    .xypg-detail-info-bar .detail-info-time {
        float: left;
        margin-right: 20px;
        position: relative;
        padding-left: 25px;
    }
    .xypg-detail-info-bar .detail-info-time i {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
    }
    .xypg-detail-info-bar .detail-info-numbers {
        float: left;
        position: relative;
        padding-left: 25px;
    }
    .xypg-detail-info-bar .detail-info-numbers i {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
    }
    .xypg-detail-tags {
        margin-top: 40px;
    }
    .xypg-detail-tags .tags-title {
        border-bottom: 1px solid #c3c3c3;
        position: relative;
    }
    .xypg-detail-tags .tags-title h3 {
        display: inline-block;
        padding: 0 30px;
        font-size: 16px;
        color: #005eb8;
        line-height: 40px;
        border-bottom: 3px solid #005eb8;
        margin-bottom: -1px;
    }
    .xypg-detail-tags .tags-title .baidu-share {
        position: absolute;
        right: 0;
        top: 8px;
    }
    .xypg-detail-tags .tags-content {
        padding-top: 12px;
    }
    .xypg-detail-tags .tags-content a {
        font-size: 12px;
        color: #2f2f2f;
        display: inline-block;
        margin-right: 9px;
        background: #f4f4f4;
        line-height: 28px;
        padding: 0 15px;
    }
    .xypg-detail-tags .tags-content a:hover {
        color: #005eb8;
    }
    .xypg-detail-url {
        margin-top: 15px;
    }
    .xypg-detail-url a {
        word-break: break-all;
    }
    .xypg-detail-pn {
        margin-top: 30px;
    }
    .xypg-detail-pn div + div {
        margin-top: 15px;
    }
    .xypg-detail-pn div {
        line-height: 22px;
        padding: 10px;
        position: relative;
        border: 1px solid #eeeeee;
    }
    .xypg-detail-pn div b {
        font-size: 14px;
        color: #005eb8;
        float: left;
        font-weight: normal;
    }
    .xypg-detail-pn div a {
        width: 75%;
        font-size: 14px;
        color: #666666;
    }
    .xypg-detail-pn div a:hover {
        color: #005eb8;
    }
}

@media screen and (min-width: 320px) and (max-width: 800px){
    *{font-size: 14px}
    body {padding-top: 60px;}
    @pc:375;
    .hidden-xs {
        display: none!important;
    }
    .visible-xs {
        display: block!important;
    }
    .wordsize(@px){
        font-size:((100vw/@pc)*@px);
    }
    .warp{width:95%;margin: 0 auto;}

    .header-top{display: none}
    /*手机端头部*/
    .xymob-head {
        position: fixed;
        top: 0;
        z-index: 999999;
        left: 0;
        right: 0;
        background: var(--primary);
    }
    .xymob-head-box {
        position: relative;
        height: 60px;
    }
    .xymob-head-box .xymob-logo {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 70%;
        height: 30px;
        text-align: center;
    }
    .xymob-head-box .xymob-logo h1, .xymob-head-box .xymob-logo a {
        display: inline;
        font-size: 0;
    }
    .xymob-head-box .xymob-logo img {
        width: 63px;
        filter: invert(100%);
    }
    .xymob-navbtn {
        position: absolute;
        z-index: 9;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto 0 auto 27px;
        width: 30px;
        height: 20px;
    }
    .xymob-navbtn span, .xymob-navbtn:after, .xymob-navbtn:before {
        display: block;
        height: 2px;
        width: 100%;
        background: #fff;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .xymob-navbtn span {
        margin: 7px 0;
    }
    .xymob-navbtn:after, .xymob-navbtn:before {
        content: '';
        -webkit-transform-origin: 7.5%;
        transform-origin: 7.5%;
    }
    .xymob-navbtn.clicked span {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    .xymob-navbtn.clicked:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .xymob-navbtn.clicked:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .xymob-search-btn {
        position: absolute;
        z-index: 9;
        right: 0;
        top: 0;
        bottom: 0;
        width: 14%;
        text-align: center;
        line-height: 60px;
        font-size: 32px;
        color: #fff;
    }
    .xymob-search-btn i{
        font-size: 24px;
    }
    .xymob-search-btn .icon-font {
        display: block;
        width: 100%;
        height: 100%;
    }
    .xymob-search-btn .icon-font:after {
        background-position: -30px -210px;
    }
    .xymob-menu {
        display: none;
        position: absolute;
        z-index: 9999;
        left: 0;
        right: 0;
        height: 100vh;
        background: var(--primary);
        padding: 0 10%;
    }
    .xymob-menu .xymob-menu-box {
        height: 100vh;
        overflow: auto;
        padding-bottom: 80px;
    }
    .xymob-nav > li {
        border-bottom: 1px solid #fff;
        position: relative;
    }
    .xymob-nav > li > a {
        display: block;
        line-height: 50px;
        font-size: 16px;
        color: #ffffff;
    }
    .xymob-nav .xymob-menu-jt {
        position: absolute;
        width: 20%;
        height: 50px;
        line-height: 50px;
        right: 0;
        top: 0;
        text-align: center;
        z-index: 9;
        color: #fff;
    }
    .xymob-nav .xymob-menu-jt .icon-font {
        display: block;
        width: 100%;
        height: 100%;
    }
    .xymob-nav .xymob-menu-jt .icon-font:after {
        background-position: -30px -240px;
    }
    .xymob-nav .xymob-menu-jt.clicked .icon-font:after {
        background-position: -30px -270px;
    }
    .xymob-nav .xymob-sub-menu {
        background: #3a58af;
        display: none;
    }
    .xymob-nav .xymob-sub-menu > li {
        border-top: 1px dashed #fff;
    }
    .xymob-nav .xymob-sub-menu > li > a {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 40px;
        text-indent: 2em;
    }
    .xymob-dlbtn {
        margin-top: 40px;
    }
    .xymob-dlbtn a {
        text-align: center;
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #005eb8;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
    }
    .xymob-dlbtn a i {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .xymob-dlbtn a .icon-dl:after {
        background-position: -30px -540px;
    }
    .xymob-dlbtn a .icon-pn:after {
        background-position: -30px -600px;
    }
    .xymob-dlbtn a .icon-tc:after {
        background-position: -30px -570px;
    }
    .xymob-dlbtn .zx-btn {
        margin-top: 10px;
        background: none;
        border: 1px solid #fff;
    }
    .xymob-search {
        position: fixed;
        z-index: 99999;
        left: 100%;
        bottom: 0;
        top: 0;
        width: 100%;
        background: var(--primary);
        padding: 15px 15% 0 15%;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .xymob-search .xymob-search-close-btn {
        position: absolute;
        top: 27px;
        left: 30px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    header{
        .logo img{width: (100vw/@pc)*100}
        .head-top .logo:after{height: 16px}
        .head-top{padding: (100vw/@pc)*10;}
        .head-top .r{display: none}
    }
    .banner{
        .wenzi{
            display: none;
        }
        .arrdown{
            display: none;
        }
    }
    .leftmenus{
        .location{display: none}
    }
    .block1{
        height: auto;
        .warp{flex-direction: column;padding: 40px 0px;}
        .r a{
            width: 130px;
            height: 35px;
            color: #fff;
            margin-top: 30px;
        }
        .l{
            span{font-size: 16px}
            p{font-size: 16px}
        }
        .icon img{width: 100%;width: 80px}
        .icon-1{right: 0;left: auto}
    }
    .block2{
        .warp{
            flex-direction: column;
        }
        .l{
            img{padding: 0;width: 200px;}
        }
        .r{
            h5 {
                text-align: center;
                .wordsize(24);
                margin-bottom: 0px;
            }
            h4{
                text-align: center;
                .wordsize(16);
            }
            .desc {
                margin-top: 20px;
            }
            a{
                width: 100px;
                height: 35px;
                .wordsize(12);
                margin: 10px auto;
            }
        }
        .icon-1{
            top: 50%;
            right: 0;
            img{
                width: 120px;
            }
        }
    }
    .block3{
        flex-direction: column;
        .l{
            margin-bottom: 20px;
            h5{
                text-align: center;
                .wordsize(24);
                margin-bottom: 0px;
            }
            h4{
                text-align: center;
                .wordsize(16);
            }
            p{
                margin: 0px;
                text-align: center;
                margin-top: 10px    ;
            }
            .btn{
                margin-top: 20px;
                text-align: center;
            }
            .btn span{
                width: 35px;
                height: 35px;
            }
        }
        .r{
            width: 90%;margin: 0 auto;
            .tit{font-size: 14px;padding: 10px 0px}
            .swiper-slide{height: 62vw;}
            .swiper-slide .i img{width: 40px;}

        }
        .icon-1 img{
            width: 70px;
        }
    }
    .block4{
        .tit{
            margin-bottom: 0px;
            padding-bottom: 0px;
            h3{
                text-align: center;
                .wordsize(24);
                margin-bottom: 0px;
            }
            h4{
                text-align: center;
                .wordsize(16);
            }
            p{
                margin: 0px;
                text-align: center;
                margin-top: 10px    ;
            }
            .btn{
                margin-top: 20px;
                text-align: center;
            }
            .btn span{
                width: 35px;
                height: 35px;
            }
        }
        .box{
            margin-top: 20px;
        }
        .swiper-slide .img{padding: 10px}
        .btn{display: none}
    }
    .block5{
        .tit{
            margin-bottom: 0px;
            padding-bottom: 0px;
            h3{
                text-align: center;
                .wordsize(24);
                margin-bottom: 0px;
            }
            h4{
                text-align: center;
                .wordsize(16);
            }
            p{
                margin: 0px;
                text-align: center;
                margin-top: 10px    ;
            }
            .btn{
                margin-top: 20px;
                text-align: center;
            }
            .btn span{
                width: 35px;
                height: 35px;
            }
        }
        .box{
            margin-top: 20px;
            ul{
                display: flex;
                justify-content: space-evenly;
                overflow: auto;
                flex-wrap: wrap;
            }
            ul li{
                width:45%;
            }
            ul li:last-of-type{
                display: none;
            }
        }
        padding: 20px 0px;

    }
    .block6{
        padding: 20px;
        .tit{
            margin-bottom: 0px;
            padding-bottom: 0px;
            h3{
                text-align: center;
                .wordsize(24);
                margin-bottom: 0px;
            }
            h4{
                text-align: center;
                .wordsize(16);
            }
            p{
                margin: 0px;
                text-align: center;
                margin-top: 10px    ;
            }
            .btn{
                margin-top: 20px;
                text-align: center;
            }
            .btn span{
                width: 35px;
                height: 35px;
            }
        }
        .box{
            margin-top: 20px;
            ul{
                justify-content: flex-start;
                overflow: auto;
            }
        }
        .swiper-slide .title{
            padding:10px;
        }
        a{
            width: 100px;
            height: 35px;
            font-size: 3.2vw;
            margin-top: 10px;
        }
    }
    footer{
        padding: 20px 0px;
        background-size: cover;
        &:after{display: none;}
        .nav{display: none}
    }
    .list-news {
        .item h3{
            font-size: 18px;
        }
    }
    .contact{
        .page{}
        .cont_list ul li{width: 100%}
        .cont_list ul li svg{width:35px}
        .cont_list ul li .text,.contact .cont_list ul li .text h3{margin: 0px;font-size: 12px}
        .cont_list ul li p{font-size: 12px}
        .cont_list ul li{margin-bottom: 20px}
        .page{padding: 20px 0px}
        .message ul{overflow: hidden;}
        .page_tit h3{font-size: 18px}
        .page_tit{margin-bottom: 20px}
        .div_input input::placeholder{font-size: 12px}
        .div_input textarea::placeholder{font-size: 12px}
        input[type="submit"]{font-size: 12px;line-height: 30px;width: 124px;}
    }

    .list-product{
        .gridlist {grid-template-columns: repeat(2,1fr);grid-gap:10px;}
        .gridlist li img{width: 100%;height: auto}
    }
    /*产品详情*/
    .show-product{
        .xypg-detail-con img{width: 100%}
    }
    .details img{max-width: 100%}

}