:root{ --header_width : 1323px; --on_color : #F47A86; --bg-color:#FDD2D8; } html{overflow-x: hidden;} *{transition: all 200ms ease;max-width: 100%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;} body.on #loading1{opacity: 0;pointer-events: none;} body.once #loading2{opacity: 1;pointer-events: unset;} /*加载页*/ .loading{position: fixed;top:0;left: 0;width: 100%;height: 100vh;z-index: 300;display: flex;align-items:center;justify-content: center;background-position: center;background-size: cover;background-repeat: no-repeat;transition: unset;flex-direction: column;} #loading1{z-index: 301;background: #fff;} #loading1 img{width: 100px;user-select: none;pointer-events: none;} #loading1 p{line-height: 30px;font-size: 16px;user-select: none;pointer-events: none;margin-top: 10px;} #loading2{overflow:hidden;opacity: 0;pointer-events: none;background-image: var(--pc_img);} #loading2 .logo{pointer-events:none;user-select: unset;} #loading2 .scroll{position: absolute;bottom: 20px;animation: up-scroll-down 6s infinite;cursor: pointer;} #loading2.remove{transition: all 1s cubic-bezier(0.61, 0.08, 0.11, 0.58);transform: translateY(-100%);} @keyframes up-scroll-down { 0% {bottom: 60px;} 50% {bottom: 10px;} 100% {bottom: 60px;} } /*头部*/ #header1{display: flex;flex-direction: column;align-items: center;z-index: 100;position: absolute;width: 100%;transition: unset;} #header1 .logo{height: 113px;width: 100%;display: flex;align-items: center;justify-content: center;background-color:#fff;} #header1 .logo img{max-height: 100%;} #header1 nav{width: 100%;background: #fff;display: flex;flex-direction: column;align-items: center;position: absolute;top:113px;transition: unset;} #header1 .nav_bu{width: 100%;height: 77px;} #header1 .nav{width: var(--header_width);height: 77px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-evenly;} #header1 .nav::before , #header1 .nav::after{content: '';display: block;padding: 0 20px;} #header1 .nav li a{color: #000;line-height: 34px;padding: 0 20px;position: relative;display: flex;align-items: center;justify-content: center;z-index: 1;} #header1 .nav li a .en{position: absolute;white-space:nowrap;max-width: unset;min-width: 100%;background-color: #fff;text-align: center;opacity: 0;pointer-events: none;padding: 0 10px;display: flex;justify-content: center;} #header1 .nav li a .en::after{content: '';height: 3px;border-radius: 1px;position: absolute;bottom: 0;display: block;width:50%; ;background-color: var(--on_color);transition: width 300ms;} #header1 .nav li:hover{z-index: 2;} #header1 .nav li:hover .cn , #header1 .nav li.on a .cn{opacity:0;} #header1 .nav li:hover .en , #header1 .nav li a .en:hover , #header1 .nav li.on a .en{opacity: 1;pointer-events: unset;color: var(--on_color);} #header1 .nav li:hover .en::after, #header1 .nav li a .en:hover::after, #header1 .nav li.on a .en::after{width: calc(100% - 20px);} #header1 .nav li .nav_zi{position: absolute;pointer-events: none;opacity: 0;background-color: #fff;width: 100%;left: 0;z-index: 1;padding-top: 32px;display: flex;justify-content: center;} #header1 .nav li .nav_zi .center{width:var(--header_width);display: flex;padding: 50px 0;} #header1 .nav li .nav_zi .center .img img{height: 204px;} #header1 .nav li .nav_zi .center .list{display: flex;flex-wrap: wrap;flex-direction: column;padding-right:30px;} #header1 .nav li .nav_zi .center .list p{padding:0 20px;} #header1 .nav li .nav_zi .center .list p a{justify-content: flex-start;position: relative;padding: 0;} #header1 .nav li .nav_zi .center .list p a .z_cn{padding: 0 10px;} #header1 .nav li .nav_zi .center .list p a .z_en{position: absolute;white-space:nowrap;max-width: unset;min-width: 100%;background-color: #fff;opacity: 0;pointer-events: none;padding: 0 10px;} #header1 .nav li .nav_zi .center .list p a:hover .z_en , #header1 .nav li .nav_zi .center .list p a.on .z_en{color:var(--on_color);opacity: 1;pointer-events: unset;} #header1 .nav li .nav_zi .center .list p a.on:hover .z_en{opacity: 0;} #header1 .nav li .nav_zi .center .list:last-child{padding-right:0;} #header1 .nav li .nav_zi::before{content: '';display: block;position: absolute;width: 100%;height: 2px;background-color:var(--bg-color);left:0;top:30px;opacity: 0.5;} #header1 .nav li:hover .nav_zi , #header1 .nav li .nav_zi:hover{opacity: 1;pointer-events: unset;z-index: 2;} #header1.on{position: fixed;transform: translateY(-100%);opacity: 0;} #header1.on.ontrans{transition: all .8s;} #header1.on.onshow{transition: all .8s;transform: translateY(0);opacity: 1;} #header2{display: flex;height: 60px;align-items: center;justify-content: space-between;position: fixed;width: 100%;box-sizing: border-box;padding:0 30px;z-index: 103;background-color: #fff;} #header2 .kong{width: 60px;display: flex;align-items: center;justify-content: center;height: 60px;box-sizing: border-box;padding: 6px;} #header2 .kong .backpage i{font-size: 30px;} #header2 .logo{width: calc(100% - (60px * 2 ));display: flex;align-items: center;justify-content: center;} #header2 .logo img{max-height: 40px;} #header2 .nav_btn{width: 48px;height: 48px;z-index: 103;box-sizing: border-box;padding: 8px;display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;} #header2 .nav_btn span{display: block;width: 26px;height: 2px;margin-bottom: 7px;border-radius: 1px;background-color: #000;transform-origin:left;transition: all .5s;} #header2 .nav_btn span:last-child{margin-bottom: 0;} .header2 .nav_zzc{position: fixed;width: 100%;height: calc(100% - 60px);top:60px;left: 0;z-index: 101;background-color: var(--bg-color);cursor: pointer;pointer-events: none;opacity: 0;} .header2 .phone_nav{width: 360px;height: calc(100% - 60px);position: fixed;top:60px;left: 0;z-index: 102;background: white;box-sizing: border-box;padding: 0 10px;overflow-y: auto;opacity: 0;pointer-events: none;} .header2 .phone_nav::-webkit-scrollbar{display: none;} .header2 .phone_nav .top{display: flex;height: 60px;align-items: center;} .header2 .phone_nav .top img{max-height: 60px;max-width: calc(100% - 60px);} .header2 .phone_nav .nav .list{padding: 15px 0;border-bottom: 1px solid rgba(94,94,94,.2);} .header2 .phone_nav .nav .list .fu .cn{font-weight: bolder;font-size: 18px;} .header2 .phone_nav .nav .list .fu.on a{color: var(--on_color);} .header2 .phone_nav .nav .list .nav_zi{margin-top: 10px;padding-left: 10px;box-sizing: border-box;} .header2 .phone_nav .nav .list .nav_zi p{padding: 7px 0;} .header2 .phone_nav .nav .list .nav_zi p a .en{font-size: 12px;} .header2 .phone_nav .nav .list .nav_zi p .on{color: var(--on_color);} .header2.on .nav_btn span:first-child{transform:translate3d(0,0,0) rotate(45deg);} .header2.on .nav_btn span:nth-child(2){opacity: 0;} .header2.on .nav_btn span:last-child{transform:translate3d(0,0,0) rotate(-45deg);} .header2.on .phone_nav{box-shadow: 4px 0 12px 0 rgba(0,0,0,.25);pointer-events: unset;opacity: 1;} .header2.on .nav_zzc{pointer-events: unset;opacity: 0.6;} .header_bu{width: 100%;height:190px;} /*底部*/ #footer1{background-color: var(--bg-color);padding: 20px 10px;box-sizing: border-box;overflow: hidden;} #footer1 .container{width: 1410px;display: flex;flex-wrap: wrap;margin: 0 auto;justify-content: space-between;} #footer1 .container .left{min-height: 280px;display: flex;flex-direction: column;justify-content: space-between;margin-top: 30px;} #footer1 .container .left .top{display: flex;flex-wrap: wrap;} #footer1 .container .left .top .model{margin-right: 70px;margin-bottom: 30px;} #footer1 .container .left .top .model .title{font-size: 17px;font-weight: bold;margin-bottom: 30px;} #footer1 .container .left .top .model .link{line-height: 30px;} #footer1 .container .left .top .model .email p{position: relative;width: 400px;height: 40px;display: flex;border-bottom: 1px solid #D9A3A5;} #footer1 .container .left .top .model .email p input{width: calc(100% - 40px);height: 40px;background-color: transparent;border:unset;box-sizing: border-box;padding:0 10px;} #footer1 .container .left .top .model .email p button{width: 40px;height: 40px;background-color: transparent;border:unset;z-index: 1;cursor: pointer;padding-right: 10px;} #footer1 .container .left .top .model .email p button img{height: 30px;} #footer1 .container .left .top .model .email p button:active{padding-right: 0;} #footer1 .container .left .top .model:last-child{margin-right: 0;} #footer1 .container .right{min-height: 280px;display: flex;flex-direction: column;justify-content: space-between;} #footer1 .container .right .top{display: flex;flex-wrap: wrap;justify-content: flex-end;} #footer1 .container .right .top .model{margin-top: 20px;margin-right: 100px;} #footer1 .container .right .top .model .title{margin-bottom: 10px;} #footer1 .container .right .top .model .title a{cursor: pointer;} #footer1 .container .right .top .model .cont{line-height: 20px;} #footer1 .container .right .top .model:last-child{margin-right: 0;} #footer1 .container .right .ewm{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;} #footer1 .container .right .ewm a{display: flex;align-items: center;justify-content: center;position: relative;margin:10px 20px 0 20px;} #footer1 .container .right .ewm a .img{max-height: 40px;} #footer1 .container .right .ewm a .ewm_img{position: absolute;height: 100px;max-width: unset;top:-130px;opacity: 0;pointer-events: none;} #footer1 .container .right .ewm a:hover .ewm_img{top:-110px;opacity: 1;} #footer2{background-color: var(--bg-color);padding: 25px 0;overflow: hidden;} #footer2 .layui-container .top{display: flex;align-items: center;} #footer2 .layui-container .top > div{width: 50%;box-sizing: border-box;word-break: break-word;} #footer2 .layui-container .top > .link{display: flex;align-items: flex-end;justify-content: center;flex-direction: column;line-height: 30px;position: relative;box-sizing: border-box;} #footer2 .layui-container .top > .link p{width: 200px;text-align: center;} #footer2 .layui-container .top > .link::after{content: '';display: block;width: 1px;height: 100%;position: absolute;right: 0;top:0;background-color: #7D6064;} #footer2 .layui-container .top > .contus{display: flex;justify-content: center;flex-direction: column;box-sizing: border-box;padding-left: 70px;line-height: 25px;} #footer2 .layui-container .email2{display: flex;align-items: center;justify-content: center;margin-top: 25px;} #footer2 .layui-container .email2 p{position: relative;width: 400px;height: 40px;display: flex;border: 1px solid #7D6064;border-radius: 10px;} #footer2 .layui-container .email2 p input{width: calc(100% - 40px);height: 40px;background-color: transparent;border:unset;box-sizing: border-box;padding:0 10px;} #footer2 .layui-container .email2 p input::-webkit-input-placeholder{color: #312525;} #footer2 .layui-container .email2 p input::-moz-placeholder{color: #312525;} #footer2 .layui-container .email2 p button{width: 40px;height: 40px;background-color: transparent;border:unset;z-index: 1;cursor: pointer;padding-right: 10px;} #footer2 .layui-container .email2 p button img{height: 30px;} #footer2 .layui-container .email2 p button:active{padding-right: 0;} #footer2 .layui-container .ewm{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;margin-top: 25px;} #footer2 .layui-container .ewm a{display: flex;align-items: center;justify-content: center;position: relative;margin:10px 20px 0 20px;} #footer2 .layui-container .ewm a .img{max-height: 40px;} #footer2 .layui-container .ewm a .ewm_img{position: absolute;height: 100px;max-width: unset;top:-130px;opacity: 0;pointer-events: none;z-index: 2;} #footer2 .layui-container .ewm a:hover .ewm_img , #footer2 .layui-container .ewm a .ewm_img:hover{top:-100px;opacity: 1;pointer-events: unset;} #footer2 .layui-container .inscribe{margin-top: 25px;text-align: center;} .showmore{display: flex;align-items: center;justify-content: center;width: 145px;position: relative;height: 36px;box-sizing: border-box;text-align: center;border: 1px solid #000000;letter-spacing: 2px;color: #000;} .showmore::before{content: '';display: block;position: absolute;z-index: -1;width:0;height: 100%;top:0;left: 0;transition: width 100ms;background-color: #eecfd2;} .showmore:hover{color: white;border-color: var(--bg-color);} .showmore:hover::before{width: 100%;} /*banner*/ .top_banner .swiper-wrapper .swiper-slide{overflow: hidden;} .top_banner .swiper-wrapper .swiper-slide img{width: 100%;} .top_banner .swiper-pagination{bottom: 20px;} .top_banner .swiper-pagination .swiper-pagination-bullet{width: 10px;height: 10px;border-radius: 10px;} .top_banner .swiper-pagination .swiper-pagination-bullet-active{width: 20px;background-color: var(--bg-color);} /*返回头部*/ #backTop{width: 34px;height: 34px;position: fixed;bottom: 25px;right:15px;background:#fff;transition: all 200ms;display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;z-index: -1;} #backTop i{font-size: 20px;color:var(--on_color);} #backTop:hover{opacity: 0.5;} #backTop.on{opacity: 1;z-index: 102;} /*分页*/ #pages{display: flex;align-items: center;justify-content: center;} #pages > div{display: flex;flex-wrap: wrap;padding: 20px 30px;box-shadow: 0 0 5px rgba(0,0,0,0.1);border-radius: 5px;} #pages a {font-size:14px;width: 40px;height: 40px;display: flex;align-items:center;justify-content: center;border-radius: 50%;user-select: none;box-sizing: border-box;font-family: Arial;margin-bottom: 5px;transition: background-color 0.2s ease-out;cursor: pointer;margin-right: 30px;} #pages a:last-child{margin-right: 0;} #pages a.active, #pages a:not(.no):hover {background-color: var(--bg-color);color: #fff;} #pages .no{cursor: not-allowed !important;} #pages .none{font-weight: bold;font-size: 20px;color:#333333;line-height: 50px;} #pages .none i{font-size: 35px;color:#E4332D;margin-right: 10px;vertical-align: sub;} /*图片查看*/ .lg-backdrop{opacity: 0!important;} .img_light_gallery{background-color: rgba(0,0,0,0.7);} #lg-actual-size , #lg-download{display: none;} .lg-outer .lg-toggle-thumb , .lg-outer .lg-thumb-outer{background-color: #fff!important;} .lg-outer .lg-toggle-thumb:hover {color: #000!important;} .lg-outer .lg-thumb{background-color: #fff!important;max-width: unset;} .lg-outer .lg-thumb-item{border-width: 4px!important;} .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {border-color: #4ea7f9!important;} /*格子图片*/ #index .d1{width: var(--header_width);padding: 100px 0;margin:0 auto;box-sizing: border-box;} #index .d1 *{transition: all 500ms;} #index .d1 > .title{text-align: center;font-size: 20px;letter-spacing: 5px;color: rgba(0,0,0,0.9);} #index .d1 > .d1_cont{margin-top: 30px;} #index .d1 > .d1_cont .list{display: flex;flex-direction: column;position: relative;} #index .d1 > .d1_cont .list .top{padding-top: calc(100% - 17px);display: flex;align-items: center;justify-content: center;position: relative;height: 0;order: 1;z-index: 1;background-color: #F9F9F9;} #index .d1 > .d1_cont .list .top .cont{position: absolute;top:0; background:#fff9eb;width: 100%;height: calc(100% + 17px);display: flex;align-items: center;justify-content: center;font-size: 27px;letter-spacing: 5px;box-sizing: border-box;padding:20px;pointer-events: none;user-select: none;} #index .d1 > .d1_cont .list .top .ewm{width: 100%;height: calc(100% + 17px);position: absolute;top:0;z-index: 2;display: flex;align-items: center;justify-content: center;box-sizing: border-box;padding: 20px;opacity: 0;pointer-events: none;} #index .d1 > .d1_cont .list .img{padding-top: calc(100% + 17px);background-size: cover;background-position: center;background-repeat: no-repeat;height: 0;order: 1;z-index: 2;position: relative;} #index .d1 > .d1_cont .list .img > div{position: absolute;top:0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: rgba(0,0,0,0.7);padding: 34px 17px 17px 17px;box-sizing: border-box;flex-direction: column;opacity: 0;pointer-events: none;} #index .d1 > .d1_cont .list .img > div img{width: 40px;} #index .d1 > .d1_cont .list .img > div p{font-size: 18px;color: var(--on_color);text-align: center;pointer-events: none;user-select: none;} #index .d1 > .d1_cont .list:nth-child(2n) .top{order: 2; background:#fff9eb; } #index .d1 > .d1_cont .list:nth-child(2n) .top .cont , #index .d1 > .d1_cont .list:nth-child(2n) .top .ewm{top:-17px;} #index .d1 > .d1_cont .list .left , #index .d1 > .d1_cont .list .right{position: absolute;top:calc(50% - 17px);height:0;width: calc(50% - 17px);border-top: 17px solid #F9F9F9;z-index: 3;pointer-events: none;} #index .d1 > .d1_cont .list .left{left: 0;border-right: 17px solid transparent;} #index .d1 > .d1_cont .list .right{right: 0;border-left: 17px solid transparent;} #index .d1 > .d1_cont .list:nth-child(2n) .left{top:50%;border-top: unset;border-bottom: 17px solid #F9F9F9;} #index .d1 > .d1_cont .list:nth-child(2n) .right{top:50%;border-top: unset;border-bottom: 17px solid #F9F9F9;} #index .d1 > .d1_cont .list:hover .left , #index .d1 > .d1_cont .list:hover .right , #index .d1 > .d1_cont .list:active .left{border-top-color: var(--bg-color)!important;border-bottom-color: var(--bg-color)!important;} #index .d1 > .d1_cont .list:hover .top{background-color: var(--bg-color);} #index .d1 > .d1_cont .list:hover .top .cont{opacity: 0;} #index .d1 > .d1_cont .list:hover .top .ewm{opacity: 1;pointer-events: unset;} #index .d1 > .d1_cont .list:hover .img > div{opacity: 1;} /*轮播*/ #index .d2{width: 1500px;margin: 0 auto;padding: 50px 40px;box-sizing: border-box;} #index .d2 .top{height: 100px;box-sizing: border-box;padding:0 80px 0 50px; display: flex;align-items: center;justify-content: space-between;position: relative;} #index .d2 .top .title{font-size: 40px;} #index .d2 .top .sub_name{font-size: 16px;padding:5px 10px;border-bottom: 1px solid #C7C7C7;align-self: flex-start;} #index .d2 .d2_cont{position: relative;} /*#index .d2 .d2_cont .swiper-button-prev{left: calc(-40px + ((40px - 27px) / 2 ));} #index .d2 .d2_cont .swiper-button-next{right: calc(-40px + ((40px - 27px) / 2 ));}*/ #index .d2 .d2_cont .swiper-container .swiper-slide{overflow: hidden;} #index .d2 .d2_cont .swiper-container .swiper-slide .img{display: block;height:0;padding-top: 146%;background-repeat: no-repeat;background-position: center;background-size: cover;transition: all .4s ease;} #index .d2 .d2_cont .swiper-container .swiper-slide .img:hover{transform: scale(1.06);} #index .d2 .d2_cont .list{padding: 5px;display: flex;flex-wrap: wrap;} #index .d2 .d2_cont .list > a{padding:0 5px;display: block;width: calc(50% - 10px);margin-bottom: 10px;} #index .d2 .d2_cont .list > a .img{display: block;height:0;padding-top: 146%;background-repeat: no-repeat;background-position: center;background-size: cover;} #index .d2 .d2_cont .showmore{margin: 0 auto;} /*图文链接*/ #index .d3{width: calc(var(--header_width) + 80px);padding: 70px 40px;box-sizing: border-box;margin:0 auto;} #index .d3 .d3_cont{} #index .d3 .d3_cont .info{display: flex;align-items: center;justify-content: center;flex-direction: column;} #index .d3 .d3_cont .info .title{font-size: 26px;} #index .d3 .d3_cont .info .showmore{margin-top: 50px;} #index .d3 .d3_cont .cs_name{width: 100%;text-align: center;font-size: 30px;padding: 10px 0;} #index .d3 .d3_cont .img{width: 65.6%;} #index .d3 .d3_cont .img img{width: 100%;} /*首页结束*/ /*联系我们 - 开始*/ #contus .banner img{width: 100%;} #contus .layui-container{width: 1220px;padding: 70px 10px;} #contus .layui-container .top{text-align: center;margin-bottom: 30px;} #contus .layui-container .top .cs_name{font-size: 28px;color: #000;} #contus .layui-container .top .en_name{color:var(--on_color);margin-top: 5px;} #contus .layui-container .map{width: 100%;border: unset;height: 420px;} #contus .layui-container .cont{width: 100%;box-sizing: border-box;border: 1px solid #CBCBCB;padding: 50px;} /*联系我们 - 结束*/ /*品牌介绍 - 开始*/ #brand .layui-container{padding:0 10px;} #brand .brand_list{padding: 80px 0;} #brand .brand_list .item{display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 40px;} #brand .brand_list .item > div{width: calc(50% - 20px);background-color: #EFEFEF;order: 1;} #brand .brand_list .item > .img{background-size: cover;background-repeat: no-repeat;background-position: center;} #brand .brand_list .item > .info{position: relative;display: flex;} #brand .brand_list .item > .info .box{box-sizing: border-box;padding: 40px;width: 100%;} #brand .brand_list .item > .info::before{content: '';display: block;padding-top: 100%;float: left;} #brand .brand_list .item > .info .name{font-size: 46px;margin-bottom: 30px;} #brand .brand_list .item > .info .cont{font-size: 20px;line-height: 45px;} #brand .brand_list .item:not(:first-child) > .info > .box{display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;} #brand .brand_list .item:nth-child(2n) .info{order: 0;} /*#brand .brand_list .item .img{width: calc(50%);} #brand .brand_list .item .info{width: calc(50% - 40px);}*/ /*品牌介绍 - 结束*/ /*店铺形象 - 开始*/ #store_image{padding:118px 10px;box-sizing: border-box;} #store_image .top{display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 30px;} #store_image .top p:nth-child(1){font-size: 30px;} #store_image .top p:nth-child(2){font-size: 22px;border-top:1px solid #7F7F7F;margin-top: 10px;padding-top: 10px;} #store_image .showmore{margin:0 auto 30px auto;} #store_image .lbt{width: 1323px;margin: 0 auto;} #store_image .lbt .gallery-top{position: relative;} #store_image .lbt .gallery-top .swiper-slide{overflow: hidden;} #store_image .lbt .gallery-top .swiper-slide .img{padding-top:50.5%;background-size: cover;background-repeat: no-repeat;background-position: center;} #store_image .lbt .gallery-thumbs{position: relative;top:-5px;} #store_image .lbt .gallery-thumbs .swiper-wrapperspan{width: 100px;height: 5px;background-color: var(--bg-color);position: absolute;left: 0;top:0;} #store_image .lbt .gallery-thumbs .swiper-slide{width: calc(100% / 6);display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;} #store_image .lbt .gallery-thumbs .swiper-slide p{font-size: 14px;line-height: 50px;margin-top: 5px;} #store_image .cont{width: 1200px;margin: 0 auto;margin-top: 150px;} /*店铺形象 - 结束*/ /*百科 - 结束*/ #news{background-color: #F5F5F5;padding: 80px 0;} #news .layui-container{padding:80px 10px;background-color: #fff;position: relative;} #news .news_list{padding: 0 25px;} #news .news_list .item{margin-bottom: 80px;display: flex;justify-content: space-between;} #news .news_list .item .img{width: 450px;position: relative;} #news .news_list .item .img > a{display: block;padding-top: 67.7%;background-size: cover;background-repeat: no-repeat;background-position: center;} #news .news_list .item .info{width: calc(100% - 465px);display: flex;flex-direction: column;justify-content: space-between;} #news .news_list .item .info .top{display: flex;justify-content: space-between;} #news .news_list .item .info .top .title{font-size: 28px;width: calc(100% - 170px);line-height: 40px;} #news .news_list .item .info .top .date{padding-top: 5px;} #news .news_list .item .info .top .date span:nth-child(1){font-size: 26px;} #news .news_list .item .info .top .date span:nth-child(2){font-size: 18px;} #news .news_list .item .info .desc{font-size: 16px;line-height: 28px;margin-top: 20px;position: relative;} #news .news_list .item .info .desc::after{content: '';display: block;width: 90px;height: 1px;background-color: #B2B2B2;margin-top: 25px;} #news .news_list .item .info .go{margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between;color: #e2e2e2;} #news .news_list .item .info .go .jt{width: 40px;height: 40px;text-align: center;display: flex;align-items: center;justify-content: center;} #news .news_list .item .info .go .jt img{width: 20px;} #news .news_list .item .info .go .jt img:nth-child(2){display: none;} #news .news_list .item:hover .info .jt{width: 115px;height: 40px;border-radius: 40px;background-color: var(--bg-color);} #news .news_list .item:hover .info .jt img:nth-child(1){display: none;} #news .news_list .item:hover .info .jt img:nth-child(2){display: unset;} /*详情*/ #news_detail{padding: 20px 0;min-height: calc(100vh - 200px);} #news_detail .layui-container{background-color: white;padding: 20px;} #news_detail .layui-container .top{padding: 10px 0;width: 100%;border-bottom: 1px solid #F0F0F0;} #news_detail .layui-container .top .title{font-size: 24px;color:#1E1E1E;margin-bottom: 10px;} #news_detail .layui-container .top .info{display: flex;align-items: center;} #news_detail .layui-container .top .info .date{color: #9f9f9f;} #news_detail .layui-container .cont{padding: 10px 0 30px 0;box-sizing: border-box;} #news_detail .layui-container .syy > div{padding: 5px 0;} /*百科 - 结束*/ /*门店自提 - 开始*/ #goods .layui-container{padding: 0 10px;} #goods .model{margin-top: 100px;} #goods .model .top{position: relative;display: flex;align-items: center;justify-content: center;} #goods .model .top::before{content: '';display: block;width: 100%;height: 1px;background-color: #817F7F;position: absolute;} #goods .model .top span{line-height: 60px;background-color: white;display: inline-block;font-size: 26px;box-sizing: border-box;padding:0 20px;position: relative;z-index: 1;width: 450px;text-align: center;} #goods .model .cont{margin: 50px 0 ;} #goods .model .list{display: flex;flex-wrap: wrap;} #goods .d1 .list{justify-content: space-around;} #goods .d1 .list .item{padding:10px;display: flex;align-items: center;justify-content: center;flex-direction: column;} #goods .d1 .list .item .desc{text-align: center;font-size: 16px;line-height: 24px;margin-top: 15px;} #goods .d2 .list{} #goods .d2 .list .item{width: calc((100% - 80px) / 3);box-sizing: border-box;border: 2px solid #F4F4F4;margin-top:50px;cursor: default;position: relative;margin-right: 40px;} #goods .d2 .list .item .img{padding-top:100%;background-size: cover;background-repeat: no-repeat;background-position: center;position: relative;} #goods .d2 .list .item .info{box-sizing: border-box;padding:18px;} #goods .d2 .list .item .info .name{font-size: 20px;} #goods .d2 .list .item .info .price{font-size: 22px;color: #FF0116;margin-top: 10px;} #goods .d2 .list .item .ewm{position: absolute;top:0;left: 0;width: 100%;height: 100%;background-color: var(--bg-color);z-index: 1;box-sizing: border-box;padding:20px;display: flex;align-items: center;justify-content: center;opacity: 0;} #goods .d2 .list .item:hover .ewm{opacity: 1;} #goods .d2 .list .default .img{background-color: #f9f9f9;} #goods .d2 .list .default .info p{height: 20px;width: 120px;background-color: #f9f9f9;} #goods .d2 .list .default .info p:nth-child(2){width: 200px;margin-top: 10px;} #listLoader{display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 10px;margin-top: 60px;} #listLoader img{width: 100px;user-select: none;pointer-events: none;} #listLoader p{line-height: 30px;font-size: 16px;user-select: none;pointer-events: none;margin-top: 10px;} #listLoader.no img{display: none;} #goods .d3{margin-bottom: 100px;} #goods .d3 .list{justify-content: center;align-items: center;} #goods .d3 .list .item{padding: 10px;display: flex;align-items: center;justify-content: center;flex-direction: column;} #goods .d3 .list .item .desc{text-align: center;font-size: 16px;line-height: 24px;margin-top: 15px;} #goods .d3 .list .jt{margin: 0 50px;} #goods .d3 .list .jt:last-child{display: none;} /*门店自提 - 结束*/ /*系列 - 开始*/ #xl .layui-container{padding: 120px 45px;} #xl .d1{display: flex;flex-wrap: wrap;} #xl .d1 .info{width: 660px;box-sizing: border-box;padding: 60px;background-color: #F6F7F7;} #xl .d1 .info .name{font-size: 52px;} #xl .d1 .info .cont{font-size: 20px;line-height: 40px;margin-top: 20px;} #xl .d1 .img{width: calc(100% - 700px);margin-left: 40px;background-size: cover;background-repeat: no-repeat;background-position: center;} #xl .d1 .img img{width: 100%;} #xl .d2{background-color: #F6F7F7;box-sizing: border-box;padding: 60px;margin-top: 60px;} #xl .d2 .top{display: flex;align-items: center;justify-content: center;flex-direction: column;} #xl .d2 .top .cs_name{font-size: 50px;} #xl .d2 .top .sub_name{font-size: 20px;} #xl .d2 .cont{margin-top: 30px;} /*系列 - 结束*/ @media only screen and (max-width: 1410px) and (min-width: 1200px){ /*底部*/ #footer1 .container{width: 1200px;} } @media only screen and (min-width: 1200px){ #goods .d2 .list .item:nth-child(3n){margin-right: 0;} } @media only screen and (max-width: 1199px){ /*底部*/ #footer1 .container .left .top .model{margin-right: 30px;} #footer1 .container .right .top .model{margin-right: 30px;} #footer1 .container .left .top .model .email p{width: 300px;} } @media only screen and (max-width: 1199px) and (min-width: 992px){ /*首页*/ #index .d1{width: 992px;} #index .d1 > .d1_cont .list:nth-child(2n) .top .cont , #index .d1 > .d1_cont .list:nth-child(2n) .top .ewm{top:0;} #index .d1 > .d1_cont .list:nth-child(3n - 1) .top .cont , #index .d1 > .d1_cont .list:nth-child(3n - 1 ) .top .ewm{top:-17px;} #index .d1 > .d1_cont .list:nth-child(2n) .left , #index .d1 > .d1_cont .list:nth-child(2n) .right{top:calc(50% - 17px);border-top: 17px solid #F9F9F9;border-bottom: unset;} #index .d1 > .d1_cont .list:nth-child(3n - 1) .left{top:50%;border-top: unset;border-bottom: 17px solid #F9F9F9;} #index .d1 > .d1_cont .list:nth-child(3n - 1) .right{top:50%;border-top: unset;border-bottom: 17px solid #F9F9F9;} #index .d1 > .d1_cont .list:nth-child(2n) .top{order: 1;} #index .d1 > .d1_cont .list:nth-child(3n -1) .top{order: 2;} /*店铺*/ #goods .d2 .list .item:nth-child(3n){margin-right: 0;} /*系列*/ #xl .layui-container{padding: 100px 10px;} #xl .d1 .info{width: 600px;padding: 40px;} #xl .d1 .img{width: calc(100% - 640px);} #xl .d2{padding: 40px;} /*百科*/ #news .news_list .item .img{width: 350px;} #news .news_list .item .info{width: calc(100% - 360px);} #news .news_list .item .info .desc::after{display: none;} } @media only screen and (max-width: 991px){ #loading2{background-image: var(--sj_img);} .header_bu{height: 60px;} /*首页*/ #index .d2 .top{padding: 0 10px;} #index .d2 .top .sub_name{align-self: center;} #index .d3 .d3_cont .img{width: 100%;} /*品牌介绍*/ #brand .brand_list .item{margin-bottom: 20px;} #brand .brand_list .item > div{width: calc(50% - 10px);} #brand .brand_list .item > .info .box{padding: 20px;} #brand .brand_list .item > .info .name{font-size: 30px;margin-bottom: 20px;} #brand .brand_list .item > .info .cont{font-size: 16px;line-height: 30px;} /*系列*/ #xl .layui-container{padding: 80px 10px;} #xl .d1 .info{width: 100%;padding: 60px;} #xl .d1 .img{width: 100%;margin-left: 0;margin-top:40px;} /*百科*/ #news .news_list{padding: 0 15px;} #news .news_list .item{margin-bottom: 30px;} #news .news_list .item .img{width: 250px;} #news .news_list .item .info{width: calc(100% - 260px);} #news .news_list .item .info .top .title{font-size: 22px;width: 100%;line-height: 30px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;} #news .news_list .item .info .desc{font-size: 14px;line-height: 24px;margin-top: 0;height: 72px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} #news .news_list .item .info .desc::after{display: none;} #news .news_list .item .info .go{width: 100%;height: 30px;margin-bottom: 0;} #news .news_list .item .info .go .jt{height: 30px;} #news .news_list .item .info .go .jt img{max-height: 30px;color: red;} #news .news_list .item:hover .info .jt{border-radius: 30px;} } @media only screen and (max-width: 991px) and (min-width: 769px){ /*首页*/ #index .d1 > .d1_cont .list:nth-child(2n) .top .cont , #index .d1 > .d1_cont .list:nth-child(2n) .top .ewm{top:0;} #index .d1 > .d1_cont .list:nth-child(3n - 1) .top .cont , #index .d1 > .d1_cont .list:nth-child(3n - 1 ) .top .ewm{top:-17px;} #index .d1 > .d1_cont .list:nth-child(2n) .left , #index .d1 > .d1_cont .list:nth-child(2n) .right{top:calc(50% - 17px);border-top: 17px solid #F9F9F9;border-bottom: unset;} #index .d1 > .d1_cont .list:nth-child(3n - 1) .left{top:50%;border-top: unset;border-bottom: 17px solid #F9F9F9;} #index .d1 > .d1_cont .list:nth-child(3n - 1) .right{top:50%;border-top: unset;border-bottom: 17px solid #F9F9F9;} #index .d1 > .d1_cont .list:nth-child(2n) .top{order: 1;} #index .d1 > .d1_cont .list:nth-child(3n -1) .top{order: 2;} #goods .d2 .list .item:nth-child(3n){margin-right: 0;} } @media only screen and (max-width: 768px){ /*头部*/ #header2{padding: 0;} .header2 .nav_btn{right: 10px;} /*底部*/ #footer2 .layui-container .top > .contus{padding-left:50px;} /*首页*/ #index .d1{padding: 70px 10px;} #index .d2{padding: 40px 0;} #index .d2 .top{height: 50px;} #index .d2 .top .title{font-size: 22px;} #index .d2 .top .sub_name{font-size: 12px;} #index .d3{padding: 30px 10px;} #index .d3 .d3_cont .info .showmore{margin-top: 30px;} /*联系我们*/ #contus .layui-container{padding:20px 10px;} #contus .layui-container .map{height: 280px;} #contus .layui-container .cont{padding: 20px;border: unset;} /*品牌介绍*/ #brand .brand_list .item{margin-bottom: 10px;} #brand .brand_list .item > div{width: calc(50% - 5px);} #brand .brand_list .item > .info .box{padding: 10px;} #brand .brand_list .item > .info .name{font-size: 22px;} /*形象*/ #store_image .top{margin-bottom: 80px;} #store_image .lbt .gallery-thumbs .swiper-slide{width: calc(100% / 3);} #store_image .lbt .gallery-thumbs .swiper-slide p{font-size: 16px;line-height: 40px;} #store_image{padding:80px 10px;} #store_image .cont{margin-top: 80px;} /*店铺*/ #goods .d2 .list .item{width: calc((100% - 40px) / 2);margin-right: 20px;} #goods .d2 .list .item:nth-child(2n){margin-right: 0;} /*系列*/ #xl .layui-container{padding: 50px 10px;} #xl .d1 .info{width: 100%;padding: 20px;} #xl .d1 .img{margin-top:20px;} #xl .d2{padding: 20px;} #news .news_list .item:hover .info .go .jt{width: 80px;} #news{padding: 0;} #news .layui-container{padding: 10px;} #news .news_list{padding: 0;} #news .news_list .item{flex-wrap: wrap;} #news .news_list .item .img{width: 100%;margin-bottom: 5px;} #news .news_list .item .info{width:100% ;} #news .news_list .item .info .top .title{font-size: 22px;line-height: 30px;max-height: 40px;} #news .news_list .item .info .desc{font-size: 14px;line-height: 26px;margin-top: 0;max-height: 60px;} #news .news_list .item .info .desc::after{display: none;} #news .news_list .item .info .go .jt{opacity: 0;pointer-events: none;} } @media only screen and (max-width: 480px){ .top_banner .swiper-pagination{bottom: 10px;} /*头部*/ .header2 .phone_nav{width: 100%;} .header2 .nav_btn{z-index: 104;} /*底部*/ #footer2 .layui-container .top > .link{width: 30%;} #footer2 .layui-container .top > .contus{width: 70%;padding-left:15px;} #header2 .layui-container{padding: 0 10px;} /*首页*/ #index .d1{padding: 30px 10px;} #index .d1 > .d1_cont .list .top{padding-top: calc(100% - 10px);} #index .d1 > .d1_cont .list .top .cont{height: calc(100% + 10px);font-size: 22px;padding:15px;} #index .d1 > .d1_cont .list .top .ewm{height: calc(100% + 10px);padding: 15px;} #index .d1 > .d1_cont .list .img{padding-top: calc(100% + 10px);} #index .d1 > .d1_cont .list .img > div{padding: 20px 10px 10px 10px;} #index .d1 > .d1_cont .list .img > div p{font-size: 18px;} #index .d1 > .d1_cont .list:nth-child(2n) .top .cont , #index .d1 > .d1_cont .list:nth-child(2n) .top .ewm{top:-10px;} #index .d1 > .d1_cont .list .left , #index .d1 > .d1_cont .list .right{top:calc(50% - 10px);width: calc(50% - 10px);border-top: 10px solid #F9F9F9;} #index .d1 > .d1_cont .list .left{border-right: 10px solid transparent;} #index .d1 > .d1_cont .list .right{border-left: 10px solid transparent;} #index .d1 > .d1_cont .list:nth-child(2n) .left{border-bottom: 10px solid #F9F9F9;} #index .d1 > .d1_cont .list:nth-child(2n) .right{border-bottom: 10px solid #F9F9F9;} #index .d2{padding: 10px 0;} #index .d3{padding: 30px 10px;} #index .d3 .d3_cont .cs_name{font-size: 22px;} #index .d3 .d3_cont .info .showmore{margin-top: 20px;} /*联系我们*/ #contus .layui-container .cont{padding: 20px 0 40px 0;} #contus .layui-container .cont div p{padding: 5px !important;} /*品牌介绍*/ #brand .brand_list{padding: 50px 0;} #brand .brand_list .item > div{width: 100%;order: 1!important;} #brand .brand_list .item > .img{padding-top: 100%;margin-bottom: 10px;} #brand .brand_list .item > .info .box{padding: 20px;} #brand .brand_list .item > .info .box .name{font-size:26px;} /*形象*/ #store_image{padding:30px 10px;} #store_image .top{margin-bottom: 20px;} #store_image .top p:nth-child(1){font-size: 24px;} #store_image .top p:nth-child(2){font-size: 16px;margin-top: 10px;padding-top: 10px;} #store_image .cont{margin-top: 30px;} /*店铺*/ #goods .model{margin-top: 30px;} #goods .model .top::before{display: none;} #goods .model .top span{line-height: 30px;font-size: 20px;padding:0 10px;} #goods .model .cont{margin: 20px 0 ;} #goods .d1 .list .item{width: 50%;box-sizing: border-box;} #goods .d2 .list{margin-top: 30px;} #goods .d2 .list .item{width: calc((100% - 10px) / 2);margin-top: 10px;margin-right: 10px;} #goods .d2 .list .item .info{padding: 10px;} #goods .d2 .list .item .info .name{font-size: 16px;} #goods .d2 .list .item .info .price{font-size: 16px;} #goods .d2 .list .item .ewm{padding: 10px;} #goods .d3 .list{justify-content: space-around;} #goods .d3 .list .jt{width: 50px;margin: 0;} #goods .d3 .list .jt:nth-child(4n){display:none;} #goods .d3 .list .item{width: calc((100% - 50px) / 2);box-sizing: border-box;} #listLoader{margin-top:10px;} /*系列*/ #xl .layui-container{padding:0;} #xl .d1 .info{width: 100%;padding: 10px;} #xl .d1 .info .name{font-size: 26px;} #xl .d1 .info .cont{font-size: 16px;line-height: 30px;margin-top: 0px;} #xl .d1 .img{margin-top:0;} #xl .d2{padding: 10px;margin-top: 0;} #xl .d2 .top{margin-top: 20px;} #xl .d2 .top .cs_name{font-size: 30px;} #xl .d2 .top .sub_name{font-size: 14px;} /*返回头部*/ #backTop{width: 30px;height: 30px;bottom: 20px;right:10px;} #pages > div{padding: 10px;} #pages a {width: 40px;height: 40px;margin-right: 5px;} #news .news_list .item .info .top .title{font-size: 16px;line-height: 20px;margin-bottom: 5px;} #news .news_list .item .info .desc{font-size: 12px;line-height: 20px;} #news .news_list .item .info .desc::after{display: none;} #news .news_list .item .info .go .jt{opacity: 0;pointer-events: none;} #news .news_list .item .info .go .date{font-size: 12px;} }