/* banner */
.banner{width:100%;margin-top: 111px;}
.banner .img img{width:100%;}
@media only screen and (max-width:1660px){
.banner{margin-top: 99px;}
}
 
@media only screen and (max-width:1080px){
.banner{margin-top: 106px;}
}
@media only screen and (max-width:520px){
.banner{margin-top: 86.2px;}
}


/* location */
.location{padding: 15px 0;}
.location li{display: flex;align-items: center;}
.location li a{font-size:14px;color: #333;font-weight: bold;}
.location li img{width: 17px;margin-right: 6px;}
.location li .img2{filter: invert(0.9);margin: 0 2px;width: 16px;}
@media only screen and (max-width:768px){
.location li a{font-size:14px}
}
 

/* product_nav */
.product_nav{margin-top:25px}
.product_nav .tit{font-size:24px}
.product_nav .sec_pro_nav{margin:20px 0 0;background:#fff}
.product_nav .sec_pro_nav ul{width:auto}
.product_nav .sec_pro_nav ul li{display:inline-block;padding:14px 11px;width:200px;height:auto;font-size:16px;color:#242426;font-family:arial;box-sizing:border-box;text-align:center}
.product_nav .sec_pro_nav ul li.cur{background:#26225d;color:#fff}
.product_nav .sec_pro_nav ul li:hover{background:#26225d;color:#fff}
.product_nav .sec_pro_nav ul li .sample{margin:0 auto;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff;display:none}
.product_nav .sec_pro_nav ul li p{display:flex;margin-top:0;flex-direction:column;justify-content:center;min-height:36px;overflow:hidden}
.product_nav .sec_pro_nav .swiper-button-next,.product_nav .sec_pro_nav .swiper-button-prev{margin-top:0;top:0;width:61px;height:100%;background-color:rgba(255,255,255,.6);box-shadow:0 0 10px #ccc}
.product_nav .sec_pro_nav .swiper-button-next:after,.product_nav .sec_pro_nav .swiper-button-prev:after{content:initial}
.product_nav .sec_pro_nav .swiper-button-prev{left:0;background-image:url(../images/icon_rec01.png);background-repeat:no-repeat;background-position:center}
.product_nav .sec_pro_nav .swiper-button-next{right:0;background-image:url(../images/icon_rec02.png);background-repeat:no-repeat;background-position:center}
.my-button-disabled{visibility:hidden}
@media only screen and (max-width:768px){
.product_nav .tit{font-size:20px}
}
@media only screen and (max-width:480px){
.product_nav .tit{font-size:16px}
.product_nav .sec_pro_nav .swiper-button-next,.product_nav .sec_pro_nav .swiper-button-prev{width:28px}
.product_nav .sec_pro_nav ul li{padding:6px;font-size:13px;width:36%}
.product_nav .sec_pro_nav ul li p{min-height:32px}
}

/* productlist */
.productlist{padding: 150px 0 80px;min-height: 28vh;}
.productlist .title{font-size: 22px;font-weight: bold;color: #222;margin-bottom: 15px;}
.productlist .list1{background-color: #fff;border-radius: 8px;box-shadow: 0 0 12px 0 rgba(0,0,0,.2);padding: 16px;transform: translateY(-14vw);position: absolute;max-width: 1600px;width: 90%;margin: 0 auto;}
.productlist .list1 .img{background: rgba(0,0,0,.04);padding: 7px;border-radius: 7px;text-align: center;}
.productlist .list1 p{text-align: center;font-size: 16px;font-weight: bold;margin-top: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.productlist .list1 .swiper-button-next{right: 0;margin-top: 0;top: 0;width: 45px;height: 100%;background: #fff;box-shadow: 0 0 6px 0 rgba(0,0,0,.12);opacity: .8;}
.productlist .list1 .swiper-button-prev{left: 0;margin-top: 0;top: 0;width: 45px;height: 100%;background: #fff;box-shadow: 0 0 6px 0 rgba(0,0,0,.12);}
.productlist .list1 .swiper-button-next:after,.productlist .list1 .swiper-button-prev:after{font-size: 20px;color: #333;font-weight: bold;}
.productlist .list1 .swiper-button-next:hover{opacity: 1;}
.productlist .list2{margin-top: 65px;}
.productlist .list2 .img img{border-radius: 7px;}
.productlist .list2 p{text-align: center;font-size: 16px;color: #fff;margin-top: 5px;position: absolute;top: 26%;left: 6%;}
.productlist .list2 .swiper-button-next{right: 0;margin-top: 0;top: 45%;width: 40px;height: 40px;border-radius: 50%;background: #fff;box-shadow: 0 0 6px 0 rgba(0,0,0,.12);}
.productlist .list2 .swiper-button-prev{left: 0;margin-top: 0;top: 45%;width: 40px;height: 40px;border-radius: 50%;background: #fff;box-shadow: 0 0 6px 0 rgba(0,0,0,.12);}
.productlist .list2 .swiper-button-next:after,.productlist .list2 .swiper-button-prev:after{font-size: 20px;color: #333;font-weight: bold;}
.productlist .list3{padding: 40px 0 0;}
.productlist .list3 .item{width: 15%;margin-right: 2%;margin-bottom: 2%;position: relative;}
.productlist .list3 .item:nth-child(6n+6){margin-right: 0;}
.productlist .list3 .item .pic img{border-radius:7px}
.productlist .list3 .item .info .tit{font-size:15px;color:#222;margin:10px 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.productlist .list3 .item .info .jg{color:#222;font-size:20px;font-weight:700}
.productlist .list3 .item .video{position: absolute;top: 8px;right: 8px;padding: 3px 4px 3px 23px;background-color: rgba(33,33,33,0.43);border-radius: 6px;}
.productlist .list3 .item .video i img{filter: brightness(100);}
@media only screen and (max-width:1660px){
.productlist .list1{transform: translateY(-17vw);}
}
@media only screen and (max-width:1280px){
.productlist .list1{transform: translateY(-20vw);}
}
@media only screen and (max-width:1080px){
.productlist{padding: 50px 0;}
.productlist .title{font-size: 20px;}
.productlist .list1{position: initial;transform: translateY(0vw);width: auto;}
.productlist .list2{margin-top: 35px;}
.productlist .list3 .item{width: 23.5%;}
.productlist .list3 .item:nth-child(6n+6){margin-right:2%;}
.productlist .list3 .item:nth-child(4n+4){margin-right: 0;}
.productlist .list3 .item .info .tit{margin: 6px 0;}
.productlist .list3 .item .info .jg{font-size: 18px;}
}
@media only screen and (max-width:768px){
.productlist .list2 p{font-size: 14px;}
.productlist .list2 .swiper-button-next{top: 45%;width: 32px;height: 32px;}
.productlist .list2 .swiper-button-prev{top: 45%;width: 32px;height: 32px;}
.productlist .list2 .swiper-button-next:after, .productlist .list2 .swiper-button-prev:after{font-size: 15px;}
.productlist .list3 .item .info .tit{font-size: 14px;}
.productlist .list3{padding: 25px 0 0;}
.productlist .list3 .item{width:32%;}
.productlist .list3 .item:nth-child(6n+6){margin-right:2%;}
.productlist .list3 .item:nth-child(4n+4){margin-right: 2%;}
.productlist .list3 .item:nth-child(3n+3){margin-right: 0;}
}
@media only screen and (max-width:520px){
.productlist{padding: 25px 0;}
.productlist .title{font-size: 18px;margin-bottom: 10px;}
.productlist .list1{padding: 10px;}
.productlist .list1 .img{padding: 5px;}
.productlist .list1 p{font-size: 13px;margin-top: 2px;}
.productlist .list1 .swiper-button-next{width: 32px;}
.productlist .list1 .swiper-button-prev{width: 32px;}
.productlist .list1 .swiper-button-next:after, .productlist .list1 .swiper-button-prev:after{font-size: 16px;}
.productlist .list2 p{font-size: 13px;}
.productlist .list2 .swiper-button-next{width: 30px;height: 30px;}
.productlist .list2 .swiper-button-prev{width: 30px;height: 30px;}
.productlist .list2 .swiper-button-next:after, .productlist .list2 .swiper-button-prev:after{font-size: 14px;}
.productlist .list3{padding: 20px 0 0;}
.productlist .list3 .item{width:48%;margin-bottom: 4%;}
.productlist .list3 .item:nth-child(odd){margin-right:4%;}
.productlist .list3 .item:nth-child(even){margin-right: 0;}
.productlist .list3 .item .info .tit{font-size: 13px;margin: 4px 0;}
.productlist .list3 .item .info .jg{font-size: 16px;}
}

 
/* product */
.about_mode{background: #f6f6f6;padding:3% 0 0;}
.odbox_layout{display:flex;flex-wrap:wrap;justify-content:space-between}
.odbox_layout .side_list{transition:all .5s;width: calc(380px - 60px);padding: 30px;border-left: 1px solid #e5e5e5;}
.odbox_layout .side_list .list_item{margin-bottom:15px}
.odbox_layout .side_list .list_item:nth-last-child(1){margin-bottom:0}
.odbox_layout .side_list .list_item .list_tit{padding:0 0 20px;font-size: 22px;font-weight: bold;color: #333;border-bottom:1px solid #e5e5e5;}
.odbox_layout .side_list .list_item ul{padding:20px 0}
.odbox_layout .side_list .list_item ul li{margin-bottom: 15px;}
.odbox_layout .side_list .list_item ul li>a{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#1f1f1f}
.odbox_layout .side_list .list_item ul li .touxiang{display: flex;justify-content: center;}
.odbox_layout .side_list .list_item ul li .touxiang img{background: #fff;width: 130px;border-radius: 50%;padding: 10px;border: 1px solid #ddd;height: 130px;object-fit: cover;margin: 0;}
.odbox_layout .side_list .list_item ul li .tip{margin:12px 0 6px;font-size:14px;line-height:22px;color:#666}
.odbox_layout .side_list .list_item ul li b{font-size: 18px;display:inline-block;margin-bottom:10px;}
.odbox_layout .side_list .list_item ul li p{line-height: 2;font-size: 15px;}
.odbox_layout .side_list .list_item .w_pic{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;position:relative}
.odbox_layout .side_list .list_item .w_pic .lf_img{position:relative;width:100%;height:0;padding-bottom:45%;overflow:hidden}
.odbox_layout .side_list .list_item .w_pic .lf_img img{position:absolute;width:100%;left:50%;top:50%;transform:translate(-50%,-50%)}
.odbox_layout .side_list .list_item .w_pic .rt_content{width:100%;position:absolute;left:0;bottom:0}
.odbox_layout .side_list .list_item .w_pic .rt_content .title{padding:4px 10px;font-size:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#000;background:rgba(0,0,0,.2);box-sizing:border-box;text-align:center;transition:all .3s}
.odbox_layout .side_list .list_item .w_pic:hover .rt_content .title{color:#fff;background:rgba(255,0,0,.9)}
.odbox_layout .side_list .list_item .w_pic .rt_content .con{display:none;margin:10px 0}
.odbox_layout .side_list .list_item .w_pic .rt_content .con p{font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#787878}
.odbox_layout .side_list .list_item .w_pic .rt_content .time span{display:block;text-align:right}
.odbox_layout .side_list .list_item .key_word{display:flex;flex-wrap:wrap;justify-content:flex-start}
.odbox_layout .side_list .list_item .key_word li{margin:0 15px 10px 0}
.odbox_layout .side_list .list_item .key_word li>a{padding:4px}
.odbox_layout .main_box{width: calc(100% - 441px);transition:all .5s;}
.odbox_layout .main_box .position{background:#fff}
.odbox_layout .main_box .main_box_content{background-color:#fff;padding: 30px;}
.odbox_layout .main_box .main_box_content .common_about{padding:30px 20px;box-sizing:border-box}
@media only screen and (max-width:1280px){
.odbox_layout .main_box{width: 65%;}
}
@media only screen and (max-width:1000px){
.odbox_layout .side_list{width:239px}
.odbox_layout .main_box .main_box_content{padding: 0;}
}
@media only screen and (max-width:768px){
.odbox_layout .side_list{width:100%}
.odbox_layout .main_box{width:100%}
.odbox_layout .main_box .main_box_content .common_about{padding:30px 2%}
}
@media only screen and (max-width:480px){
.about_mode{padding:30px 0 0}
.odbox_layout .side_list .list_item .list_tit{font-size:18px}
.odbox_layout .side_list .list_item ul{padding: 10px 0 0;}
.odbox_layout .side_list .list_item ul li{margin-bottom:10px}
.odbox_layout .side_list .list_item ul li b{font-size: 16px;margin-bottom: 5px;}
.odbox_layout .side_list .list_item ul li p{font-size: 14px;line-height: 1.7;}
}


.pro_mode .odbox_layout .side_list .list_item .w_pic .lf_img{padding-bottom:70%}
.pro_mode .odbox_layout .side_list .list_item .directory li{font-size:16px;word-break:break-all;}
.product_wrap{margin-top:30px;background-color: rgb(255, 255, 255);box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px, rgba(0, 0, 0, 0.1) 0px -1px 5px;}
.product{box-sizing:border-box;}
.product .pdct_wrap{box-sizing:border-box;background:#fff}
.product .pdct_wrap .flx_w{flex-flow:row-reverse;align-items: inherit;}
.product .pdct_banner{background:#fff;width:40%;min-width:332px;position:relative}
.spBig{width:100%}
.nav_Sm{margin-top:10px;width:100%;height:auto}
.spSm{width:100%}
.spSm .img100{padding: 4px;}
.spSm .img100 img{}
.spSm .img100:before{content:'';position:absolute;width:100%;height:100%;top:0;left:0;box-sizing:border-box;opacity:1;z-index:2;border: 1px solid #fff;}
.spSm .active-nav .img100:before{border-color: #666;}
.spSm .swiper-button-next,.spSm .swiper-button-prev{transform:scale(.5);filter:hue-rotate(140deg)}
.product .pdct_mes{width:50%;box-sizing:border-box}
.product .pdct_mes .title{font-size: 26px;font-weight: bold;color: #333;border-bottom:1px solid #e5e5e5;padding-bottom: 15px;margin-bottom: 15px;}
.product .pdct_mes .name .fl{width:100%}
.product .pdct_mes .name .tit{font-size: 16px;color:#333;line-height:28px;font-weight:400;word-break:break-word;}
.product .pdct_mes .jianjie{padding:10px 0;font-size:14px;color:#666;line-height:28px}
.product .pdct_mes .price{font-size: 15px;color:#333;line-height:30px;}
.product .pdct_mes .price p{margin-left: 6px;}
.product .pdct_mes .ul{margin-top:40px}
.product .pdct_mes .ul .bn{height:40px;line-height:40px;background: #ffcf34;color:#fff;font-size:16px;margin-right:20px;padding:0 20px;border-radius:4px;text-align:center;}
.product .pdct_mes .ul .bn img{width: 20px;margin-right: 5px;}
.product .pdct_mes .bshare-custom{margin-top:20px;text-align:right}
.product1{margin-top: 40px;}
.product1 .wrap{width: calc(100% - 441px);}
.product1 .wrap:nth-child(2){padding: 15px 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;margin-bottom:15px;}
.product1 .wrap:nth-child(3){border-bottom: 1px solid #ddd;padding-bottom: 15px;}
.product1 .wrap .title{font-size: 20px;font-weight: bold;color: #000;}
.product1 .wrap:nth-child(1) .title{margin-bottom: 15px;}
.product1 .wrap .title img{transform: rotate(180deg);width: 18px;filter: invert(0.7);margin-left: 5px;}
.product1 .wrap .text{display: none;margin-top: 10px;}
.product1 .wrap .pro1_table{height: 188px;overflow: hidden;position: relative;}
.product1 .wrap .pro1_table.more{height: auto;}
.product1 .wrap .pro1_table .content{display: flex;flex-wrap: wrap;}
.product1 .wrap .pro1_table .content>div{width: 34%;margin-right: 2%;}
.product1 .wrap .pro1_table h3{display: flex;align-items: center;font-size: 18px;font-weight: bold;color: #333;margin: 15px 0;}
.product1 .wrap .pro1_table h3 i{width: 25px;height: 2px;margin-right: 10px;background: #333;}
.product1 .wrap .pro1_table p{font-size: 15px;color: #666;line-height: 2;}
.product1 .wrap .pro1_table table{border-collapse: collapse;text-align: center;margin: 20px 0;}
.product1 .wrap .pro1_table td{padding: 5px 8px;border: 1px solid #5a5656;font-size: 15px;width: fit-content;}
.product1 .wrap .pro1_table td:nth-child(odd){background: #f1f1f1;}
.product1 .wrap .pro1_table .more-bg{position: absolute;bottom: 0;left: 0;background-image: linear-gradient(0deg,#f6f6f6 55%,#ffffff36);height: 70px;line-height: 70px;width: calc(100% - 441px);}
.product1 .wrap .pro1_table .more-bg a{text-decoration: underline;font-size: 16px;}
.product1 .wrap .pro1_table .more-bg a img{transform: rotate(180deg);width: 18px;filter: invert(0.7);margin-left: 5px;}
.product1 .wrap .pro1_table .less-bg{margin-bottom: 20px;}
.product1 .wrap .pro1_table .less-bg a{text-decoration: underline;font-size: 16px;}
.product1 .wrap .pro1_table .less-bg a img{width: 18px;filter: invert(0.7);margin-left: 5px;}
.product1 .wrap .text .price{margin-bottom: 4px;color:#666;display: flex;align-items: center;}
.product1 .wrap .text .price span{display:block;font-size:14px}
.product1 .wrap .text .price p.con{font-size: 14px;font-weight:700;color:#333;line-height:28px;margin-left: 6px;}
.product1 .wrap .text .lx{margin-top: 15px;font-size: 16px;color: #333;}
.product1 .wrap .text .lx a{text-decoration: underline;}

.product2{background:#f2f3f7;margin-top: 40px;}
.product2 .all_message{background: #e6ecf221;box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px, rgba(0, 0, 0, 0.1) 0px -1px 5px;}
.product2 .all_message .mes_nav ul{display:flex;flex-wrap:wrap;justify-content:flex-start}
.product2 .all_message .mes_nav ul li{padding:12px 3%;width:calc(100% / 4);width:-webkit-calc(100% / 4);text-align:center;background:#fff;box-sizing:border-box;color:#666;cursor:pointer;font-size: 18px;border-top:2px solid transparent;background:#ffcf34;color:#fff}
.product2 .all_message .mes_box{padding:20px;background:#fff;box-sizing:border-box}
.product2 .detail{margin-top:0}
.product2 .detail .name{padding-bottom:10px}
.product2 .detail .name h3{font-size:26px;color:#3d44b8;line-height:28px;font-weight:400}
.product2 .detail .name p{font-size:1rem;color:#666;line-height:2;text-transform:uppercase}
.product2 .detail .content{padding:30px 0;margin-top:20px;color:#666;font-size:14px;line-height:28px;border-top:1px solid #e5e5e5}
.product2 .detail .content video{display:block;margin:0 auto;width:100%;max-width:100%}
@media only screen and (max-width:1350px){
.pro_mode .odbox_layout .side_list{width:26%}
.product .pdct_mes .title{font-size: 26px;}
}
@media only screen and (max-width:1080px){
.product_wrap{padding: 20px;margin-top: 0;}
.product .pdct_mes{width: calc(60% - 30px);padding: 0 0 0 30px;}
.product .pdct_mes .title{font-size: 22px;}
.product .pdct_mes .name .tit{font-size: 15px;}
.pro_mode .odbox_layout .main_box{width:100%;}
.pro_mode .odbox_layout .main_box .product{padding:0 0 20px 0;border-right:0}
.pro_mode .odbox_layout .side_list{width:100%;padding: 0;border-left:none;}
.pro_mode .odbox_layout .side_list .list_item .directory li{text-align: center;padding: 0;}
.product1 .wrap{width: 100%;}
.product1 .wrap .pro1_table .more-bg{width: 100%;}
.product1 .wrap .title{font-size: 20px;}
}
@media only screen and (max-width:850px){
.product .pdct_wrap .flx_w{flex-flow:column-reverse}
.product .pdct_mes{padding:20px 0 0;width:100%}
.pro_mode .odbox_layout .side_list .list_item .list_tit{font-size:20px}
}
@media only screen and (max-width:768px){
.pro_mode .odbox_layout .side_list .list_item ul.re_news{display:flex;flex-wrap:wrap;justify-content:space-around}
.pro_mode .odbox_layout .side_list .list_item ul.re_news li{width:48%}
.odbox_layout .side_list .list_item ul li:nth-last-child(1){margin-bottom:10px}
.page_nav2 .nav_item a p{display:none}
.page_nav2 .nav_item a img{position:initial;transform:initial}
.product2 .all_message .mes_nav ul li{width:50%}
}
@media only screen and (max-width:520px){
.product{padding:0}
.product_wrap{padding: 15px;}
.product .pdct_mes .title{font-size: 18px;padding-bottom: 10px;margin-bottom: 10px;}
.product .pdct_banner{width:100%;min-width:initial}
.product .pdct_mes .name .tit{font-size:14px;line-height: 20px;}
.product .pdct_mes .price p.con{font-size:15px}
.product .pdct_mes .name p{font-size:12px}
.product .pdct_mes .jianjie{line-height:24px}
.pro_mode .odbox_layout .main_box .product{padding: 0 0 15px 0;}
.pro_mode .odbox_layout .side_list .list_item .list_tit{font-size:16px}
.pro_mode .odbox_layout .side_list .list_item .directory li{font-size:14px}
.odbox_layout .side_list .list_item ul li .touxiang img{width: 100px;height: 100px;padding: 5px;}
.product2{margin-top: 30px;}
.product2 .detail .name h3{font-size:20px}
.product2 .detail .name p{font-size:14px}
.product2 .detail .content{line-height:24px;padding: 15px 0;margin-top: 0;}
.product2 .all_message .mes_nav ul li{font-size: 16px;padding: 6px 3%;}
.product1{margin-top: 20px;}
.product1 .wrap:nth-child(2){padding: 10px 0;margin-bottom: 10px;}
.product1 .wrap:nth-child(3){padding-bottom: 10px;}
.product1 .wrap:nth-child(1) .title{margin-bottom: 10px;}
.product1 .wrap .title{font-size: 16px;}
.product1 .wrap .title img{width: 15px;}
.product1 .wrap .pro1_table .content>div{width: 49%;}
.product1 .wrap .pro1_table .content>div:nth-child(even){margin-right: 0;}
.product1 .wrap .pro1_table table{margin: 10px 0;}
.product1 .wrap .pro1_table h3{font-size: 16px;margin: 10px 0;}
.product1 .wrap .pro1_table h3 i{width: 20px;}
.product1 .wrap .pro1_table p{font-size: 14px;}
.product1 .wrap .pro1_table td p{font-size: 14px;}
.product1 .wrap .pro1_table td{padding: 4px;font-size: 12px;word-break: break-all !important;}
.product1 .wrap .pro1_table .more-bg{height: 55px;}
.product1 .wrap .pro1_table .more-bg a{font-size: 14px;}
.product1 .wrap .pro1_table .more-bg a img{width: 15px;}
.product1 .wrap .pro1_table .less-bg a{font-size: 14px;}
.product1 .wrap .pro1_table .less-bg a img{width: 15px;}
.product1 .wrap .text{margin-top: 5px;}
.product1 .wrap .text .price{margin-bottom: 0;}
.product1 .wrap .text .price span{font-size: 13px;}
}
.spBig .img100{position:relative;overflow:hidden;width: 100%;}
.spBig .img100 .img{overflow: hidden;position: relative;padding-bottom: 90%;}
.spBig .img100 img{height: 100%;object-fit: cover;width: 100%;position: absolute;}
.spBig .img100 video{height: 100%;object-fit: cover;}
.i_box{width:50%;height:50%;border:1px solid #ccc;position:absolute;left:0;top:0;background:rgba(0,0,0,.3);cursor:move;display:none}
.bigbox{width:400px;height:400px;overflow:hidden;position:absolute;left:110%;top:0;border:1px solid #ccc;display:none}
.bigbox img{position:absolute;left:0;right:0;max-width:initial}
@media only screen and (max-width:768px){
.bigbox{left:90%;width:400px;height:300px;z-index:3}
}
@media only screen and (max-width:480px){
.i_box{display:none!important}
.bigbox{display:none!important}
.spBig .img100 img{}
}
 
.extra_side{width:350px}
.extra_side .parent_pro{padding:20px;background:#fff;box-sizing:border-box;border:1px solid #e6ecf2;box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px, rgba(0, 0, 0, 0.1) 0px -1px 5px;}
.extra_side .parent_pro form{width:100%}
.extra_side .parent_pro .search_box{border:1px solid #e6ecf2;box-sizing:border-box;border-radius:4px}
.extra_side .parent_pro .search_box input{padding: 0 0 0 10px;height:37px;line-height:37px;box-sizing:border-box;}
.extra_side .parent_pro .search_box input.search_con{width:calc(100% - 38px);}
.extra_side .parent_pro .search_box input.search{width:38px;background:#ddd url(../images/search_nei.png) no-repeat center}
.extra_side .parent_pro .parent_title{font-size:18px;font-weight:700;margin:22px 0 5px}
#category_nei{width:100%}
#category_nei .sec_name{padding: 10px 10px 10px 0;box-sizing:border-box;font-size:14px;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#category_nei .sec_nav:nth-last-of-type(1) .sec_name{border-bottom:0}
#category_nei .sec_nav.cur .sec_name{color:#000}
#category_nei .sec_name i{position:absolute;right:7px;top:50%;width:18px;height:18px;transform:translateY(-50%);z-index:2;cursor:pointer}
#category_nei .sec_name i::before{content:"";position:absolute;left:50%;width:1px;height:100%;background:#ccc}
#category_nei .sec_name i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:#ccc}
#category_nei .sec_nav.on .sec_name i::before{transform:rotateZ(90deg);transition:all .3s linear}
@media only screen and (max-width:1300px){
.extra_side{width:270px}
.extra_side .parent_pro{margin-top:12%}
}
@media only screen and (max-width:1000px){
.extra_side{width:100%}
.extra_side .parent_pro{margin-top:0}
}
@media only screen and (max-width:768px){
.extra_side .parent_pro .parent_title{font-size: 15px;margin: 10px 0 5px;}
#category_nei .next_nav>li{padding:10px 16px}
}
@media only screen and (max-width:520px){
.extra_side{margin: 25px 0;}
#category_nei .sec_name{font-size: 13px;}
}
.product_message_leave{padding: 30px;margin-top:30px;background: #f5f5f5;box-sizing:border-box;box-shadow: rgb(0 0 0 / 3%) 0px 5px 5px, rgba(0, 0, 0, 0.1) 0px -1px 5px;}
.product_message_leave .title{font-size: 22px;font-weight:700;color:#333;}
.product_message_leave .pro_mes_box{margin-top:15px}
.product_message_leave .form_item{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-bottom:15px;color:#666}
.product_message_leave .form_item .form_label{width:130px;text-align:right}
.product_message_leave .form_item .form_label .red{color: #f00;}
.product_message_leave .form_item .form-control{width:calc(100% - 150px);margin-left: 5px;}
.product_message_leave .form_item .content-container{width: 80%;}
.product_message_leave .form_item input{padding:0 10px;width:100%;height: 40px;line-height: 40px;color:#666;box-sizing:border-box;}
.product_message_leave .form_item textarea{padding:10px;width:100%;resize:none;height:200px;color:#666;box-sizing:border-box;font-family:arial}
.product_message_leave .form_item textarea::placeholder{color:#999}
.product_message_leave .form_item .fast-feedback{position:absolute;right:0;top:0;padding:15px;width:26%;background:#fff;box-shadow:0 0 10px #a0bfde;box-sizing:border-box}
.product_message_leave .form_item .fast-feedback p{margin:7px 0;font-size:14px;color:#666}
.product_message_leave .form_item .code{width:80px;height:30px;line-height:30px}
.product_message_leave .form_item .submit{width:auto;line-height:normal;background:#ffcf34;border-radius:2px;color:#fff;cursor:pointer;letter-spacing:1px;padding: 0 15px;}
.product_message_leave .form_item .submit:hover{box-shadow:0 0 5px #ffcf34}

@media only screen and (max-width:1350px){
.product_message_leave .form_item .content-container{width: 100%;}
}
@media only screen and (max-width:1080px){
.product_message_leave .form_item .fast-feedback p{font-size:12px}
}
@media only screen and (max-width:768px){
.product_message_leave .title{font-size:16px}
.product_message_leave .form_item .content-container{width:100%}
.product_message_leave .form_item .fast-feedback{position:initial;margin-top:15px;width:200px;max-width:100%}
}
@media only screen and (max-width:680px){
.product_message_leave{padding: 15px;}
.product_message_leave .form_item{margin-bottom: 10px;}
.product_message_leave .form_item .form_label{width:100%;text-align:left}
.product_message_leave .form_item .form-control{margin:10px 0 0 0;width:100%}
.product_message_leave .form_item input{height: 35px;line-height: 35px;}
.product_message_leave .form_item textarea{height: 130px;}
.product_message_leave .form_item .submit{line-height: 30px;height: 30px;}
}
@media only screen and (max-width:480px){
.product_message_leave .title{font-size:14px}
}


/* p_recommend */
.p_recommend{background: #F2F3F7;}
.p_recommend .title{font-size: 22px;font-weight: bold;color: #222;margin-bottom: 20px;}
.p_recommend .list{padding: 40px 0 10px;border-bottom: 1px solid #ddd;}
.p_recommend .list .item{width: 15%;margin-right: 2%;margin-bottom: 2%;position: relative;}
.p_recommend .list .item:nth-child(6n+6){margin-right: 0;}
.p_recommend .list .item .pic img{border-radius:7px}
.p_recommend .list .item .info .tit{font-size:15px;color:#222;margin:10px 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.p_recommend .list .item .info .jg{color:#222;font-size:20px;font-weight:700}
.p_recommend .list .item .video{position: absolute;top: 8px;right: 8px;padding: 3px 4px 3px 23px;background-color: rgba(33,33,33,0.43);border-radius: 6px;}
.p_recommend .list .item .video i img{filter: brightness(100);}
.p_recommend .related-list{padding: 40px 0;}
.p_recommend .related-list .gap{display:flex;gap:20px;flex-wrap:wrap}
.p_recommend .related-list .gap a{padding:8px 16px;border:1px solid #ddd;border-radius:24px;line-height:16px;font-size:14px;color:#222}
@media only screen and (max-width:1080px){
.p_recommend .title{font-size: 20px;}
.p_recommend .list .item{width: 23.5%;}
.p_recommend .list .item:nth-child(6n+6){margin-right:2%;}
.p_recommend .list .item:nth-child(4n+4){margin-right: 0;}
.p_recommend .list .item .info .tit{margin: 6px 0;}
.p_recommend .list .item .info .jg{font-size: 18px;}
}
@media only screen and (max-width:768px){
.p_recommend .list .item .info .tit{font-size: 14px;}
.p_recommend .list{padding: 25px 0 0;}
.p_recommend .list .item{width:32%;}
.p_recommend .list .item:nth-child(6n+6){margin-right:2%;}
.p_recommend .list .item:nth-child(4n+4){margin-right: 2%;}
.p_recommend .list .item:nth-child(3n+3){margin-right: 0;}
}
@media only screen and (max-width:520px){
.p_recommend .title{font-size: 18px;margin-bottom: 10px;}
.p_recommend .list{padding: 0px 0 0;}
.p_recommend .list .item{width:48%;margin-bottom: 4%;}
.p_recommend .list .item:nth-child(odd){margin-right:4%;}
.p_recommend .list .item:nth-child(even){margin-right: 0;}
.p_recommend .list .item .info .tit{font-size: 13px;margin: 4px 0;}
.p_recommend .list .item .info .jg{font-size: 16px;}
.p_recommend .related-list{padding: 20px 0;}
.p_recommend .related-list .gap{gap: 10px;justify-content: space-between;}
.p_recommend .related-list .gap a{padding: 8px 15px;font-size: 12px;}
}

/* login */
.login{background: linear-gradient(45deg, rgb(255 255 255 / 76%) 0%, #ffd0666b 100%);position: relative;width: 100%;height: 100vh;}
.login .login_wrap{max-width: 500px;width: 90%;margin: 0 auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius:8px;}
.login .logo{text-align: center;}
.login .logo .img img{width: 150px;}
.login .logo .rerun{background: #ffcf34;border-radius: 3px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);width: fit-content;padding: 8px 16px;color: #fff;margin: 0 auto;margin-top: 30px;margin-bottom: 30px;}
.login .form{padding: 50px;position: relative;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);background: #fff;border-radius: 4px;}
.login .form::after{position: absolute;content: "";background: #fafafa;height: 10px;width: 94%;border-radius: 5px 5px 0 0;left: 3%;top: -8px;}
.login .form .title{font-size: 24px;font-weight: bold;color: #ffcf34;margin-bottom: 25px;position: relative;}
.login .form .title::after{position: absolute;content: "";border-left: 5px solid #ffcf34;width: 4px;height: 100%;left: -50px;}
.login .form .item{position: relative;margin: 20px 0;}
.login .form .item .input{outline:0;z-index:1;position:relative;background:0 0;width:100%;height:60px;border:0;color:#212121;font-size: 16px;font-weight:400;}
.login .form .item label{position:absolute;top:0;left:0;color:#666;font-size:16px;font-weight:300;line-height:60px;transition:.2s ease}
.login .form .item .bar{position:absolute;left:0;bottom:0;background: #999999;width:100%;height:1px;}
.login .form .item .bar:after,.login .form .item .bar:before{content:"";position:absolute;background:#ffcf34;width:0;height: 1px;transition:.2s ease;}
.login .form .item .bar:before{left:50%}
.login .form .item .bar:after{right:50%}
.login .form .item .input:focus~label{color:#666;transform: translate(-12%,-25%) scale(.85);}
.login .form .item a{color: #ffcf34;}
.login .form .item .input:focus~.bar:after,.login .form .item .input:focus~.bar:before{width:50%}
.login .form .item .input:valid~label{color:#666;transform:translate(-12%,-50%) scale(.85)}
.login .form  .submit{background-color:#ffcf34;border-radius: 5px;text-align:center;width: 100%;line-height: 45px;transition:all .5s ease 0s;margin-top: 30px;}
.login .form .submit button{background: none;color: #fff;font-size: 16px;transition:all .5s ease 0s;width: 100%;line-height: 3rem}
.login .form .submit:hover{background-color: #fff;border: 1px solid #ffcf34;color: #ffcf34;}
.login .form .submit:hover button{color: #ffcf34;}
@media only screen and (max-width:640px){
.login .form{padding: 40px;}
.login .form .title::after{left: -40px;}
}
@media only screen and (max-width:420px){
.login .logo .img img{width: 130px;}
.login .logo .rerun{margin-top: 15px;margin-bottom: 20px;padding: 6px 15px;font-size: 12px;}
.login .form{padding: 30px;}
.login .form .title{font-size: 20px;margin-bottom: 10px;}
.login .form .title::after{left: -30px;}
.login .form .item{margin: 15px 0;}
.login .form .item .input{font-size: 14px;height: 50px;}
.login .form .item label{font-size: 14px;line-height: 50px;}
.login .form .item a{font-size: 12px;}
.login .form .submit{margin-top: 25px;line-height: 40px;}
.login .form .submit input{font-size: 15px;}
}

/* sign */
.sign{background: #F5F5F5;}
/* sign01 */
.sign01{background: #F5F5F5;position: relative;width: 100%;height: 100vh;}
.sign01 .sign01_wrap{max-width: 1200px;width: 90%;margin: 0 auto;border-radius:8px;}
.sign01 .logo{display: flex;align-items: center;justify-content: space-between;padding: 30px 0;}
.sign01 .logo .img img{width: 168px;}
.sign01 .logo .msg{width: 50%;text-align: end;}
.sign01 .logo .msg a{margin-left: 10px;font-size: 17px;color: #212529;}
.sign01 .logo .msg a:nth-child(2){color: #ffcf34;}
.sign01 .logo .msg a:nth-child(2):hover{text-decoration: revert;}
.sign01 .cont{padding: 50px 0;position: relative;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);background: #fff;}
.sign01 .cont .step{display: flex;justify-content: center;width: 85%;margin: 0 auto;}
.sign01 .cont .step li{position: relative;display: flex;align-items: center;justify-content: center;width: 32%;}
.sign01 .cont .step li:nth-last-child(1){margin-right: 0;}
.sign01 .cont .step li::before{content:'';position:absolute;width: 50%;height:3px;border-radius:4px;background:#eee;right: -50%;top: 50%;transform: translate(-50%,-50%);}
.sign01 .cont .step li span{border-radius:50%;background:#ccc;color:#fff;width: 25px;height: 25px;margin-right: 6px;display: flex;align-items: center;justify-content: center;font-weight: bold;}
.sign01 .cont .step li p{color:#999;font-size: 16px;}
.sign01 .cont .step li.cur p{color:#ffcf34}
.sign01 .cont .step li.cur span{background:#ffcf34}
.sign01 .cont .step li.cur::before{background:#ffcf34}
.sign01 .cont .step li:nth-last-child(1)::before{display: none;}
.sign01 .list{width: 80%;margin: 0 auto;padding-top: 100px;padding-bottom: 100px;overflow:hidden;justify-content: center;}
.sign01 .item{width:210px;height:210px;border:2px solid #fff;border-radius:10px;font-weight:700;overflow:hidden;cursor:pointer;position: relative;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;margin: 0 60px;}
.sign01 .item .flx_w{justify-content: center;}
.sign01 .item .img{width: 100%;}
.sign01 .item p{font-size: 20px;color: #000;}
.sign01 .item .img{width: 100%;display: flex;justify-content: center;margin-bottom: 10px;}
.sign01 .item .img img:nth-child(2){display: none;}
.sign01 .item.active{border:2px solid #ffcf34}
.sign01 .item.active .img img:nth-child(1){display: none;}
.sign01 .item.active .img img:nth-child(2){display: block;}
.sign01 .item.active p{color:#ffcf34}
.sign01 .item.active::before{content:'';width:80px;height:80px;background:#ffcf34;position:absolute;display:block;right:-40px;top:-40px;transform:rotate(-45deg)}
.sign01 .item.active::after{content:'';width:20px;height:20px;position:absolute;display:block;right:6px;top:6px;background:url(../images/icon_select_g.png) no-repeat center center;z-index:3}
.sign01 .btn{background-color:#ffcf34;border-radius: 6px;text-align:center;width: 15%;line-height: 45px;font-size: 16px;font-weight: bold;transition:all .5s ease 0s;margin: 0 auto;border: 1px solid #fff;color: #fff;}
.sign01 .btn:hover{background-color: #fff;border: 1px solid #ffcf34;color: #ffcf34;}
@media only screen and (max-width:1080px){
.sign01 .logo .img img{width: 150px;}
.sign01 .logo .msg a{font-size: 16px;}
.sign01 .cont .step{width: 100%;}
.sign01 .list{padding-top: 80px;padding-bottom: 80px;}
.sign01 .item{width: 180px;height: 180px;margin: 0 40px;}
.sign01 .item .img img{width: 50px;}
.sign01 .item p{font-size: 18px;}
.sign01 .btn{width: 35%;line-height: 40px;}
}
@media only screen and (max-width:768px){
.sign01 .cont .step li::before{width: 35%;right: -35%;}
.sign01 .list{padding-top: 60px;padding-bottom: 60px;}
.sign01 .item{width: 100%;height: 140px;margin: 0;}
.sign01 .item p{font-size: 16px;}
}
@media only screen and (max-width:520px){
.sign01 .logo{padding: 15px 0;}
.sign01 .logo .img img{width: 105px;}
.sign01 .logo .msg{width: 66%;}
.sign01 .logo .msg a{font-size: 13px;}
.sign01 .cont{padding: 25px 0;}
.sign01 .cont .step li::before{display: none;}
.sign01 .cont .step li span{font-size: 12px;width: 20px;height: 20px;margin-right: 4px;}
.sign01 .cont .step li p{font-size: 14px;}
.sign01 .list{padding-top: 40px;padding-bottom: 40px;}
.sign01 .item{width: 100%;height: 110px;margin: 0;}
.sign01 .item.active::before{width: 70px;height: 70px;}
.sign01 .item p{font-size: 15px;}
.sign01 .item .img img{width: 45px;}
.sign01 .btn{width: 58%;line-height: 40px;font-size: 15px;}
}

/* sign02 */
.sign02{background: #F5F5F5;position: relative;width: 100%;height: 100vh;}
.sign02 .sign02_wrap{max-width: 1000px;width: 90%;margin: 0 auto;border-radius:8px;}
.sign02 .logo{display: flex;align-items: center;justify-content: space-between;padding: 30px 0;}
.sign02 .logo .img img{width: 168px;}
.sign02 .logo .msg{width: 50%;text-align: end;}
.sign02 .logo .msg a{margin-left: 10px;font-size: 16px;color: #212529;}
.sign02 .logo .msg a:nth-child(2){color: #ffcf34;}
.sign02 .logo .msg a:nth-child(2):hover{text-decoration: revert;}
.sign02 .cont .step{display: flex;justify-content: center;width: 85%;margin: 0 auto;}
.sign02 .cont .step li{position: relative;display: flex;align-items: center;justify-content: center;width: 32%;}
.sign02 .cont .step li:nth-last-child(1){margin-right: 0;}
.sign02 .cont .step li::before{content:'';position:absolute;width: 50%;height:3px;border-radius:4px;background:#eee;right: -50%;top: 50%;transform: translate(-50%,-50%);}
.sign02 .cont .step li span{border-radius:50%;background:#ccc;color:#fff;width: 25px;height: 25px;margin-right: 6px;display: flex;align-items: center;justify-content: center;font-weight: bold;}
.sign02 .cont .step li p{color:#999;font-size: 17px;}
.sign02 .cont .step li.cur p{color:#ffcf34}
.sign02 .cont .step li.cur span{background:#ffcf34}
.sign02 .cont .step li.cur::before{background:#ffcf34}
.sign02 .cont .step li:nth-last-child(1)::before{display: none;}
.sign02 .cont{padding: 40px 0;position: relative;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);background: #fff;}
.sign02 .cont .form{width: 68%;margin: 0 auto;margin-top: 40px;}
.sign02 .cont .form .label{position: relative;}
.sign02 .cont .form .label i{color: #FF0000;position: absolute;left: 15px;top: 20%;font-weight: bold;}
.sign02 .cont .form .label picture{position: absolute;right: 15px;top: 25%;background: url(../images/select.png);background-size: 100% 100%;width: 10px;height: 10px;opacity: 0;transition: ease 0.6s;}
.sign02 .cont .form .label:hover picture{opacity: 1;}
.sign02 .cont .form .input{border: 1px solid #CED4DA;height: 45px;text-indent: 24px;margin-bottom: 20px;border-radius: 6px;color: #333;width: -webkit-fill-available;font-size: 15px;}
.sign02 .cont .form .input1{line-height: 50px;height: 100px;font-family: initial;}
.sign02 .cont .form #datalist{display: none;position: absolute;top: 45px;left: 0;z-index: 99;width: 110px;padding: 6px 0;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);background: #fff;border: 1px solid #BABABA;border-radius: 4px;}
.sign02 .cont .form #datalist ul li{cursor: pointer;line-height: 2;font-size: 14px;color: #202124;text-align: center;}
.sign02 .cont .form #datalist ul li:hover{background: #C8C8C9;}
.sign02 .cont .form .layui-input{position: relative;padding-left: 0;}
.sign02 .cont .form input::placeholder,.sign02 .cont .form textarea::placeholder{color: #757575;}
.sign02 .cont .form .layui-btn{position: absolute;right: 0;font-size: 14px;top: 0;background-color: #ffcf34;line-height: 45px;height: 45px;}
.sign02 .cont .form .code .rd{display: flex;margin-bottom: 10px;margin-left: 6px;}
.sign02 .cont .form .code .rd a{color: #212529;display: flex;align-items: center;margin-right: 20px;}
.sign02 .cont .form .code .rd a i{position:relative;width:10px;height:10px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-right: 10px;}
.sign02 .cont .form .code .rd a i::before{position:absolute;content:"";border:1px solid #333;border-radius:50%;width:14px;height:14px;}
.sign02 .cont .form .code .rd a.active i{background:#ffcf34;}
.sign02 .cont .form .code .rd a.active i::before{border:1px solid #ffcf34;}
.sign02 .cont .form .code .rd p{color: #707070;}
.sign02 .cont .form .code .hd_cont{position: relative;}
.sign02 .cont .form .code .btncode{position: absolute;right: 0;top: 3px;height: 40px;line-height: 40px;border: 1px solid #ffcf34;background: #ffcf34;color: #fff;border-radius: 24px;width: 140px;}
.sign02 .cont .form input:focus{border-color:#ffcf34}
.sign02 .cont .form .check{display: flex;align-items: center;}
.sign02 .cont .form .check .check_input{width: 15px;height: 15px;border: 1px solid #CED4DA;border-radius: 4px;margin-right: 6px;}
.sign02 .cont .form .check .check_label{color: #212529;}
.sign02 .cont .form .check .check_label a{color: #ffcf34;}
.sign02 .cont .form .flex{justify-content: center;margin-top: 20px;}
.sign02 .cont .form .btn{background-color:#ffcf34;border-radius: 6px;text-align:center;width: 26%;line-height: 45px;font-size: 16px;font-weight: bold;transition:all .5s ease 0s;border: 1px solid #fff;color: #fff;margin: 30px 20px 0 20px;}
.sign02 .cont .form .btn:hover{background-color: #fff;border: 1px solid #ffcf34;color: #ffcf34;}
@media only screen and (max-width:1080px){
.sign02 .logo .img img{width: 150px;}
.sign02 .logo .msg a{font-size: 16px;}
.sign02 .cont .step{width: 100%;}
.sign02 .cont .form{width: 88%;}
.sign02 .cont .form .btn{width: 30%;}
}
@media only screen and (max-width:768px){
.sign02 .cont .step li::before{width: 35%;right: -35%;}
.sign02 .cont .form .btn{width: 30%;}
}
@media only screen and (max-width:520px){
.sign02 .logo{padding: 15px 0;}
.sign02 .logo .img img{width: 105px;}
.sign02 .logo .msg{width: 66%;}
.sign02 .logo .msg a{font-size: 13px;}
.sign02 .cont{padding: 25px 0;}
.sign02 .cont .step li::before{display: none;}
.sign02 .cont .step li span{font-size: 12px;width: 20px;height: 20px;margin-right: 4px;}
.sign02 .cont .step li p{font-size: 14px;}
.sign02 .cont .form{margin-top: 25px;}
.sign02 .cont .form .label i{left: 10px;}
.sign02 .cont .form .input{line-height: 38px;height: 38px;font-size: 13px;margin-bottom: 12px;text-indent: 15px;}
.sign02 .cont .form .layui-btn{line-height: 38px;height: 38px;padding: 0 10px;font-size: 13px;}
.sign02 .cont .form #datalist{width: 90px;}
.sign02 .cont .form #datalist ul li{font-size: 13px;}
.sign02 .cont .form .label picture{opacity: 1;}
.sign02 .cont .form .code .btncode{height: 32px;line-height: 32px;width: 111px;top: 5px;}
.sign02 .cont .form .check .check_label{font-size: 12px;}
.sign02 .cont .form .btn{width: 47%;line-height: 36px;font-size: 15px;margin-right: 4%;margin: 0px 4% 0 0px;}
.sign02 .cont .form .btn:nth-child(2){margin-right: 0;}
}

 
/* z_pop */
.z_mask{ width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; left: 0; top: 0; z-index: 11; transition: ease 1s;opacity: 0; visibility: hidden;} 
.z_mask.on{ visibility: visible; opacity: 1;} 
.z_pop{width: 25%;position: fixed;overflow: hidden;left: 50%;top: 50%;transition: ease 1s;transform: translate(-50%,-50%)scale(.6,.6);opacity: 0;visibility: hidden;z-index: 12;background: #fff;border-radius: 8px;}
.z_pop.on{ transform: translate(-50%,-50%) scale(1,1); opacity: 1; visibility: visible;z-index: 99;}
.z_pop .z_info{padding: 30px;box-sizing: border-box;}
.z_pop .z_info .titbar{border-bottom: 1px solid #4b4b4bba;padding-bottom: 20px;margin-bottom: 20px;}
.z_pop .z_info .titbar h3{font-size: 22px;color: #333333d9;}
.z_pop .z_info .desc p{color: #333333c2;line-height: 2;overflow-y: auto;font-size: 16px;}
.z_pop .z_close{ width: 30px; height: 30px;background: url(../images/close.png); background-size: 100% 100%; position: absolute; right: 10px; top: 10px; cursor: pointer;transition: .3s all;}
.z_pop .z_close:hover{transform: rotate(180deg);-webkit-transform: rotate(180deg);}
@media only screen and (max-width:1550px){
.z_pop{width: 35%;}
}
@media only screen and (max-width:1080px){
.z_pop .z_info{padding: 25px;}
.z_pop .z_info .titbar h3{font-size: 22px;}
}
@media only screen and (max-width:850px){
.z_pop{width: 50%;}
}
@media only screen and (max-width:640px){
.z_pop{width: 70%;}
}
@media only screen and (max-width:520px){
.z_pop{width: 90%;}
.z_pop .z_info{padding: 15px;}
.z_pop .z_info .titbar{padding-bottom: 10px;margin-bottom: 10px;}
.z_pop .z_info .titbar h3{font-size: 18px;}
.z_pop .z_info .desc p{line-height: 26px;font-size: 12px;}
.z_pop .z_close{width: 22px;height: 22px;}
}